condition for view all link

ui/shared/TokenTransfer/TokenTransfer.tsx

@@ -3,12 +3,12 @@ import type { QueryKey } from '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
 import React from 'react';
 
-import { TokenTransfer } from 'types/api/tokenTransfer';
 import type { TokenTransferResponse } from 'types/api/tokenTransfer';
 
 import useFetch from 'lib/hooks/useFetch';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import SkeletonTable from 'ui/shared/SkeletonTable';
+import { flattenTotal } from 'ui/shared/TokenTransfer/helpers';
 import TokenTransferList from 'ui/shared/TokenTransfer/TokenTransferList';
 import TokenTransferSkeletonMobile from 'ui/shared/TokenTransfer/TokenTransferSkeletonMobile';
 import TokenTransferTable from 'ui/shared/TokenTransfer/TokenTransferTable';
@@ -52,17 +52,7 @@ const TokenTransfer = ({ isLoading: isLoadingProp, isDisabled, queryKey, path, b
     return <Alert>There are no token transfers</Alert>;
   }
 
-  const items = data.items.reduce((result, item) => {
-    if (Array.isArray(item.total)) {
-      item.total.forEach((total) => {
-        result.push({ ...item, total });
-      });
-    } else {
-      result.push(item);
-    }
-
-    return result;
-  }, [] as Array<TokenTransfer>);
+  const items = data.items.reduce(flattenTotal, []);
 
   return (
     <>

ui/shared/TokenTransfer/helpers.ts

+import type { TokenTransfer } from 'types/api/tokenTransfer';
+
+export const flattenTotal = (result: Array<TokenTransfer>, item: TokenTransfer): Array<TokenTransfer> => {
+  if (Array.isArray(item.total)) {
+    item.total.forEach((total) => {
+      result.push({ ...item, total });
+    });
+  } else {
+    result.push(item);
+  }
+
+  return result;
+};

ui/tx/details/TxDetailsTokenTransferList.tsx

-import { Flex, useColorModeValue } from '@chakra-ui/react';
-import React from 'react';
-
-import type { TokenTransfer } from 'types/api/tokenTransfer';
-
-import TxDetailsTokenTransfer from './TxDetailsTokenTransfer';
-
-interface Props {
-  items: Array<TokenTransfer>;
-}
-
-function getItemsNum(items: Array<TokenTransfer>) {
-  const nonErc1155items = items.filter((item) => item.token.type !== 'ERC-1155').length;
-  const erc1155items = items
-    .filter((item) => item.token.type === 'ERC-1155')
-    .map((item) => {
-      if (Array.isArray(item.total)) {
-        return item.total.length;
-      }
-
-      return 1;
-    })
-    .reduce((sum, item) => sum + item, 0);
-
-  return nonErc1155items + erc1155items;
-}
-
-const TxDetailsTokenTransferList = ({ items }: Props) => {
-  const itemsNum = getItemsNum(items);
-  const hasScroll = itemsNum > 5;
-
-  const gradientStartColor = useColorModeValue('whiteAlpha.600', 'blackAlpha.600');
-  const gradientEndColor = useColorModeValue('whiteAlpha.900', 'blackAlpha.900');
-
-  return (
-    <Flex
-      flexDirection="column"
-      alignItems="flex-start"
-      rowGap={ 5 }
-      w="100%"
-      _after={ hasScroll ? {
-        position: 'absolute',
-        content: '""',
-        bottom: 0,
-        left: 0,
-        right: '20px',
-        height: '48px',
-        bgGradient: `linear(to-b, ${ gradientStartColor } 37.5%, ${ gradientEndColor } 77.5%)`,
-      } : undefined }
-      maxH={ hasScroll ? '200px' : 'auto' }
-      overflowY={ hasScroll ? 'scroll' : 'auto' }
-      pr={ hasScroll ? 5 : 0 }
-      pb={ hasScroll ? 10 : 0 }
-    >
-      { items.map((item, index) => <TxDetailsTokenTransfer key={ index } { ...item }/>) }
-    </Flex>
-  );
-};
-
-export default React.memo(TxDetailsTokenTransferList);

ui/tx/details/TxDetailsTokenTransfers.tsx

-import { Text, Icon, Link, GridItem, Show } from '@chakra-ui/react';
+import { Icon, Link, GridItem, Show, Flex } from '@chakra-ui/react';
 import NextLink from 'next/link';
 import React from 'react';
 
@@ -7,55 +7,69 @@ 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 { flattenTotal } from 'ui/shared/TokenTransfer/helpers';
 
-import TxDetailsTokenTransferList from './TxDetailsTokenTransferList';
+import TxDetailsTokenTransfer from './TxDetailsTokenTransfer';
 
 interface Props {
   data: Array<TokenTransfer>;
   txHash: string;
 }
 
-const TOKEN_TRANSFERS = [
+const TOKEN_TRANSFERS_TYPES = [
   { 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 VISIBLE_ITEMS_NUM = 3;
 
 const TxDetailsTokenTransfers = ({ data, txHash }: Props) => {
   const viewAllUrl = link('tx', { id: txHash }, { tab: 'token_transfers' });
 
+  const formattedData = data.reduce(flattenTotal, []);
+  const transferGroups = TOKEN_TRANSFERS_TYPES.map((group) => ({
+    ...group,
+    items: formattedData?.filter((token) => token.type === group.type) || [],
+  }));
+  const showViewAllLink = transferGroups.some(({ items }) => items.length > VISIBLE_ITEMS_NUM);
+
   return (
     <>
-      { TOKEN_TRANSFERS.map(({ title, hint, type }) => {
-        const items = data?.filter((token) => token.type === type) || [];
+      { transferGroups.map(({ title, hint, type, items }) => {
         if (items.length === 0) {
           return null;
         }
+
         return (
           <DetailsInfoItem
             key={ type }
-            title={ (
-              <>
-                <Text as="span">{ title }</Text>
-                <Text as="span" whiteSpace="pre" variant="secondary"> ({ items.length })</Text>
-              </>
-            ) }
+            title={ title }
             hint={ hint }
             position="relative"
           >
-            <TxDetailsTokenTransferList items={ items }/>
+            <Flex
+              flexDirection="column"
+              alignItems="flex-start"
+              rowGap={ 5 }
+              w="100%"
+            >
+              { items.slice(0, VISIBLE_ITEMS_NUM).map((item, index) => <TxDetailsTokenTransfer key={ index } { ...item }/>) }
+            </Flex>
           </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"> ({ data.length })</Text>
-      </GridItem>
+      { showViewAllLink && (
+        <>
+          <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>
+          </GridItem>
+        </>
+      ) }
     </>
   );
 };