token minted list

lib/link/routes.ts

@@ -95,9 +95,12 @@ export const ROUTES = {
     crossNetworkNavigation: true,
   },
   token_index: {
-    pattern: `${ BASE_PATH }/token/[id]`,
+    pattern: `${ BASE_PATH }/token/[hash]`,
     crossNetworkNavigation: true,
   },
+  token_instance_item: {
+    pattern: `${ BASE_PATH }/token/[hash]/instance/[id]`,
+  },
 
   // ADDRESSES
   address_index: {

types/api/tokenTransfer.ts

 import type { AddressParam } from './addressParams';
 
-export interface TokenTransfer {
-  type: string;
+export type TokenTransfer = (
+  {
+    type: 'token_transfer';
+    total: {
+      value: string;
+    };
+  } |
+  {
+    type: 'token_minting';
+    total: {
+      token_id: string;
+    };
+  }
+) & TokenTransferBase
+
+interface TokenTransferBase {
   txHash: string;
   from: AddressParam;
   to: AddressParam;
   token_address: string;
   token_symbol: string;
   token_type: string;
-  total: {
-    value: string;
-  };
   exchange_rate: string;
 }

ui/shared/TokenSnippet.tsx

@@ -14,7 +14,7 @@ interface Props {
 const TokenSnippet = ({ symbol, hash, name, className }: Props) => {
   const link = useLink();
 
-  const url = link('token_index', { id: hash });
+  const url = link('token_index', { hash });
 
   return (
     <Center className={ className } columnGap={ 1 }>

ui/shared/address/AddressLink.tsx

@@ -21,7 +21,7 @@ const AddressLink = ({ alias, type, className, truncation = 'dynamic', hash, id,
   if (type === 'transaction') {
     url = link('tx_index', { id: id || hash });
   } else if (type === 'token') {
-    url = link('token_index', { id: id || hash });
+    url = link('token_index', { hash: id || hash });
   } else if (type === 'block') {
     url = link('block_index', { id: id || hash });
   } else {

ui/tx/TokenTransfer.tsx

-import { Flex, Icon, Text } from '@chakra-ui/react';
+import { Flex, Icon, Text, Link } from '@chakra-ui/react';
 import React from 'react';
 
 import type { TokenTransfer as TTokenTransfer } from 'types/api/tokenTransfer';
 
 import rightArrowIcon from 'icons/arrows/east.svg';
 import { space } from 'lib/html-entities';
+import useLink from 'lib/link/useLink';
 import AddressLink from 'ui/shared/address/AddressLink';
 import CurrencyValue from 'ui/shared/CurrencyValue';
 import TokenSnippet from 'ui/shared/TokenSnippet';
 
 type Props = TTokenTransfer
 
-const TokenTransfer = ({ from, to, total, exchange_rate: exchangeRate, ...token }: Props) => {
+const TokenTransfer = ({ from, to, total, exchange_rate: exchangeRate, type, ...token }: Props) => {
+  const link = useLink();
+
+  const content = (() => {
+    switch (type) {
+      case 'token_transfer':
+        return (
+          <CurrencyValue value={ total.value } unit="ether" exchangeRate={ exchangeRate } fontWeight={ 600 }/>
+        );
+
+      case 'token_minting': {
+        const url = link('token_instance_item', { hash: token.token_address, id: total.token_id });
+        return <Text as="span">Token ID [<Link href={ url }>{ total.token_id }</Link>]</Text>;
+      }
+    }
+  })();
+
   return (
     <Flex alignItems="center" flexWrap="wrap" columnGap={ 3 } rowGap={ 3 }>
       <Flex alignItems="center">
@@ -20,7 +37,7 @@ const TokenTransfer = ({ from, to, total, exchange_rate: exchangeRate, ...token
         <AddressLink fontWeight="500" hash={ to.hash } truncation="constant"/>
       </Flex>
       <Text fontWeight={ 500 } as="span">For:{ space }
-        <CurrencyValue value={ total.value } unit="ether" exchangeRate={ exchangeRate } fontWeight={ 600 }/>
+        { content }
       </Text>
       <TokenSnippet symbol={ token.token_symbol } hash={ token.token_address } name="Foo"/>
     </Flex>

ui/tx/TxDecodedInputData.tsx

@@ -164,7 +164,7 @@ const TxDecodedInputData = ({ data }: Props) => {
               </Address>
             ) : (
               <Flex alignItems="flex-start" justifyContent="space-between" whiteSpace="normal" wordBreak="break-all">
-                <Text>{ value }</Text>
+                <Text>{ String(value) }</Text>
                 <CopyToClipboard text={ value }/>
               </Flex>
             ) }

ui/tx/TxDetails.tsx

@@ -66,6 +66,9 @@ const TxDetails = () => {
     return <DataFetchAlert/>;
   }
 
+  const transferredTokens = data.token_transfers?.filter(({ type }) => type === 'token_transfer') || [];
+  const mintedTokens = data.token_transfers?.filter(({ type }) => type === 'token_minting') || [];
+
   return (
     <Grid columnGap={ 8 } rowGap={{ base: 3, lg: 3 }} templateColumns={{ base: 'minmax(0, 1fr)', lg: 'auto minmax(0, 1fr)' }}>
       <DetailsInfoItem
@@ -155,13 +158,23 @@ const TxDetails = () => {
         </Tooltip> */ }
         { /* <TokenSnippet symbol="UP" name="User Pay" hash="0xA17ed5dFc62D0a3E74D69a0503AE9FdA65d9f212" ml={ 3 }/> */ }
       </DetailsInfoItem>
-      { (data.token_transfers?.length || 0) > 0 && (
+      { transferredTokens.length > 0 && (
         <DetailsInfoItem
           title="Token transferred"
           hint="List of token transferred in the transaction."
         >
           <Flex flexDirection="column" alignItems="flex-start" rowGap={ 5 } w="100%">
-            { data.token_transfers?.map((item, index) => <TokenTransfer key={ index } { ...item }/>) }
+            { transferredTokens.map((item, index) => <TokenTransfer key={ index } { ...item }/>) }
+          </Flex>
+        </DetailsInfoItem>
+      ) }
+      { mintedTokens.length > 0 && (
+        <DetailsInfoItem
+          title="Token Minted"
+          hint="List of token minted in the transaction."
+        >
+          <Flex flexDirection="column" alignItems="flex-start" rowGap={ 5 } w="100%">
+            { mintedTokens.map((item, index) => <TokenTransfer key={ index } { ...item }/>) }
           </Flex>
         </DetailsInfoItem>
       ) }