more token transfer types

types/api/tokenTransfer.ts

@@ -2,25 +2,39 @@ import type { AddressParam } from './addressParams';
 
 export type TokenTransfer = (
   {
-    type: 'token_transfer';
+    token_type: 'ERC-20';
     total: {
       value: string;
     };
   } |
   {
-    type: 'token_minting';
+    token_type: 'ERC-721';
     total: {
       token_id: string;
     };
+  } |
+  {
+    token_type: 'ERC-1155';
+    total: {
+      value: string;
+      token_id: string;
+    };
+  } |
+  {
+    token_type: 'ERC-1155_batch';
+    total: Array<{
+      value: string;
+      token_id: string;
+    }>;
   }
 ) & TokenTransferBase
 
 interface TokenTransferBase {
+  type: 'token_transfer' | 'token_burning' | 'token_spawning' | 'token_minting';
   txHash: string;
   from: AddressParam;
   to: AddressParam;
   token_address: string;
   token_symbol: string;
-  token_type: string;
   exchange_rate: string;
 }

ui/tx/TokenTransfer.tsx

@@ -5,41 +5,46 @@ 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 link from 'lib/link/link';
 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, type, ...token }: Props) => {
-  const link = useLink();
-
+const TokenTransfer = (props: Props) => {
   const content = (() => {
-    switch (type) {
-      case 'token_transfer':
+    switch (props.token_type) {
+      case 'ERC-20':
         return (
-          <CurrencyValue value={ total.value } unit="ether" exchangeRate={ exchangeRate } fontWeight={ 600 }/>
+          <Text fontWeight={ 500 } as="span">For:{ space }
+            <CurrencyValue value={ props.total.value } unit="ether" exchangeRate={ props.exchange_rate } fontWeight={ 600 }/>
+          </Text>
         );
 
-      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>;
+      case 'ERC-721': {
+        const url = link('token_instance_item', { hash: props.token_address, id: props.total.token_id });
+        return (
+          <Text fontWeight={ 500 } as="span">For token ID:{ space }
+            <Link href={ url } fontWeight={ 600 }>{ props.total.token_id }</Link>
+          </Text>
+        );
       }
+
+      default:
+        return null;
     }
   })();
 
   return (
     <Flex alignItems="center" flexWrap="wrap" columnGap={ 3 } rowGap={ 3 }>
       <Flex alignItems="center">
-        <AddressLink fontWeight="500" hash={ from.hash } truncation="constant"/>
+        <AddressLink fontWeight="500" hash={ props.from.hash } truncation="constant"/>
         <Icon as={ rightArrowIcon } boxSize={ 6 } mx={ 2 } color="gray.500"/>
-        <AddressLink fontWeight="500" hash={ to.hash } truncation="constant"/>
+        <AddressLink fontWeight="500" hash={ props.to.hash } truncation="constant"/>
       </Flex>
-      <Text fontWeight={ 500 } as="span">For:{ space }
-        { content }
-      </Text>
-      <TokenSnippet symbol={ token.token_symbol } hash={ token.token_address } name="Foo"/>
+      { content }
+      <TokenSnippet symbol={ props.token_symbol } hash={ props.token_address } name="Foo"/>
     </Flex>
   );
 };

ui/tx/TxDetails.tsx

@@ -35,6 +35,13 @@ import TxRevertReason from 'ui/tx/details/TxRevertReason';
 import TokenTransfer from 'ui/tx/TokenTransfer';
 import TxDecodedInputData from 'ui/tx/TxDecodedInputData';
 
+const TOKEN_TRANSFERS = [
+  { title: 'Tokens Transferred', hint: 'List of tokens transferred in the transaction.', type: 'token_transfer' },
+  { title: 'Tokens Minted', hint: 'List of tokens minted in the transaction.', type: 'token_minting' },
+  { title: 'Tokens Burnt', hint: 'List of tokens burnt in the transaction.', type: 'token_burning' },
+  { title: 'Tokens Created', hint: 'List of tokens created in the transaction.', type: 'token_spawning' },
+];
+
 const TxDetails = () => {
   const router = useRouter();
   const fetch = useFetch();
@@ -65,9 +72,6 @@ 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
@@ -157,26 +161,24 @@ const TxDetails = () => {
         </Tooltip> */ }
         { /* <TokenSnippet symbol="UP" name="User Pay" hash="0xA17ed5dFc62D0a3E74D69a0503AE9FdA65d9f212" ml={ 3 }/> */ }
       </DetailsInfoItem>
-      { 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%">
-            { 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>
-      ) }
+      { TOKEN_TRANSFERS.map(({ title, hint, type }) => {
+        const items = data.token_transfers?.filter((token) => token.type === type) || [];
+        if (items.length === 0) {
+          return null;
+        }
+        return (
+          <DetailsInfoItem
+            key={ type }
+            title={ title }
+            hint={ hint }
+          >
+            <Flex flexDirection="column" alignItems="flex-start" rowGap={ 5 } w="100%">
+              { items.map((item, index) => <TokenTransfer key={ index } { ...item }/>) }
+            </Flex>
+          </DetailsInfoItem>
+        );
+      }) }
+
       <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 3, lg: 8 }}/>
       <DetailsInfoItem
         title="Value"