link to transaction tab

lib/link/link.ts

@@ -32,5 +32,5 @@ export default function link(
     url.searchParams.append(key, value);
   });
 
-  return url.pathname;
+  return url.toString();
 }

ui/shared/DetailsInfoItem.tsx

@@ -4,8 +4,8 @@ import React from 'react';
 
 import infoIcon from 'icons/info.svg';
 
-interface Props extends HTMLChakraProps<'div'> {
-  title: string;
+interface Props extends Omit<HTMLChakraProps<'div'>, 'title'> {
+  title: React.ReactNode;
   hint: string;
   children: React.ReactNode;
 }

ui/tx/TxDetails.tsx

@@ -25,19 +25,12 @@ import TextSeparator from 'ui/shared/TextSeparator';
 import TxStatus from 'ui/shared/TxStatus';
 import Utilization from 'ui/shared/Utilization';
 import TxDetailsSkeleton from 'ui/tx/details/TxDetailsSkeleton';
+import TxDetailsTokenTransfers from 'ui/tx/details/TxDetailsTokenTransfers';
 import TxRevertReason from 'ui/tx/details/TxRevertReason';
-import TokenTransferList from 'ui/tx/TokenTransferList';
 import TxDecodedInputData from 'ui/tx/TxDecodedInputData';
 import TxSocketAlert from 'ui/tx/TxSocketAlert';
 import useFetchTxInfo from 'ui/tx/useFetchTxInfo';
 
-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 { data, isLoading, isError, socketStatus } = useFetchTxInfo();
 
@@ -181,22 +174,7 @@ const TxDetails = () => {
           </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 }
-            position="relative"
-          >
-            <TokenTransferList items={ items }/>
-          </DetailsInfoItem>
-        );
-      }) }
+      { data.token_transfers && <TxDetailsTokenTransfers data={ data.token_transfers } txHash={ data.hash }/> }
 
       <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 3, lg: 8 }}/>
       <DetailsInfoItem

ui/tx/TokenTransfer.tsx → ui/tx/details/TxDetailsTokenTransfer.tsx

@@ -12,7 +12,7 @@ import NftTokenTransferSnippet from 'ui/tx/NftTokenTransferSnippet';
 
 type Props = TTokenTransfer;
 
-const TokenTransfer = ({ token, total, to, from }: Props) => {
+const TxDetailsTokenTransfer = ({ token, total, to, from }: Props) => {
 
   const isColumnLayout = token.type === 'ERC-1155' && Array.isArray(total);
   const tokenSnippet = <TokenSnippet symbol={ token.symbol } hash={ token.address } name={ token.name } ml={ 3 }/>;
@@ -79,4 +79,4 @@ const TokenTransfer = ({ token, total, to, from }: Props) => {
   );
 };
 
-export default React.memo(TokenTransfer);
+export default React.memo(TxDetailsTokenTransfer);

ui/tx/TokenTransferList.tsx → ui/tx/details/TxDetailsTokenTransferList.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import type { TokenTransfer as TTokenTransfer } from 'types/api/tokenTransfer';
 
-import TokenTransfer from 'ui/tx/TokenTransfer';
+import TokenTransfer from './TxDetailsTokenTransfer';
 
 interface Props {
   items: Array<TTokenTransfer>;
@@ -25,7 +25,7 @@ function getItemsNum(items: Array<TTokenTransfer>) {
   return nonErc1155items + erc1155items;
 }
 
-const TokenTransferList = ({ items }: Props) => {
+const TxDetailsTokenTransferList = ({ items }: Props) => {
   const itemsNum = getItemsNum(items);
   const hasScroll = itemsNum > 5;
 
@@ -57,4 +57,4 @@ const TokenTransferList = ({ items }: Props) => {
   );
 };
 
-export default React.memo(TokenTransferList);
+export default React.memo(TxDetailsTokenTransferList);

ui/tx/details/TxDetailsTokenTransfers.tsx

+import { Text, Icon, Link, GridItem, Show } from '@chakra-ui/react';
+import NextLink from 'next/link';
+import React from 'react';
+
+import type { TokenTransfer } from 'types/api/tokenTransfer';
+
+import tokenIcon from 'icons/token.svg';
+import link from 'lib/link/link';
+import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+
+import TxDetailsTokenTransferList from './TxDetailsTokenTransferList';
+
+interface Props {
+  data: Array<TokenTransfer>;
+  txHash: string;
+}
+
+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 TxDetailsTokenTransfers = ({ data, txHash }: Props) => {
+  const viewAllUrl = link('tx', { id: txHash }, { tab: 'token_transfers' });
+
+  return (
+    <>
+      { TOKEN_TRANSFERS.map(({ title, hint, type }) => {
+        const items = data?.filter((token) => token.type === type) || [];
+        if (items.length === 0) {
+          return null;
+        }
+        return (
+          <DetailsInfoItem
+            key={ type }
+            title={ (
+              <>
+                <Text as="span">{ title }</Text>
+                { items.length > 1 && <Text as="span" whiteSpace="pre" variant="secondary"> ({ items.length })</Text> }
+              </>
+            ) }
+            hint={ hint }
+            position="relative"
+          >
+            <TxDetailsTokenTransferList items={ items }/>
+          </DetailsInfoItem>
+        );
+      }) }
+      <Show above="lg"><GridItem></GridItem></Show>
+      <GridItem fontSize="sm" alignItems="center" display="inline-flex" pl={{ base: '28px', lg: 0 }}>
+        <Icon as={ tokenIcon } boxSize={ 6 }/>
+        <NextLink href={ viewAllUrl } passHref>
+          <Link>View all</Link>
+        </NextLink>
+        <Text variant="secondary" as="span" whiteSpace="pre"> (15)</Text>
+      </GridItem>
+    </>
+  );
+};
+
+export default React.memo(TxDetailsTokenTransfers);