scroll for token transfer

ui/tx/NftTokenTransferSnippet.tsx

-import { Flex, Link, Text, Icon } from '@chakra-ui/react';
+import { Flex, Link, Text, Icon, Box } from '@chakra-ui/react';
 import React from 'react';
 
 import nftIcon from 'icons/nft_shield.svg';
@@ -17,11 +17,13 @@ const NftTokenTransferSnippet = (props: Props) => {
   const url = link('token_instance_item', { hash: props.hash, id: props.tokenId });
 
   return (
-    <Flex alignItems="center">
+    <Flex alignItems="center" columnGap={ 3 } rowGap={ 2 } flexWrap="wrap">
       <Text fontWeight={ 500 } as="span">For { num } token ID:</Text>
-      <Icon as={ nftIcon } boxSize={ 6 } ml={ 3 } mr={ 1 }/>
-      <Link href={ url } fontWeight={ 600 }>{ props.tokenId }</Link>
-      <TokenSnippet symbol={ props.symbol } hash={ props.hash } name="Foo" ml={ 3 }/>
+      <Box display="inline-flex" alignItems="center">
+        <Icon as={ nftIcon } boxSize={ 6 } mr={ 1 }/>
+        <Link href={ url } fontWeight={ 600 }>{ props.tokenId }</Link>
+      </Box>
+      <TokenSnippet symbol={ props.symbol } hash={ props.hash } name="Foo"/>
     </Flex>
   );
 };

ui/tx/TokenTransferList.tsx

+import { Flex, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import type { TokenTransfer as TTokenTransfer } from 'types/api/tokenTransfer';
+
+import TokenTransfer from 'ui/tx/TokenTransfer';
+
+interface Props {
+  items: Array<TTokenTransfer>;
+}
+
+function getItemsNum(items: Array<TTokenTransfer>) {
+  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 TokenTransferList = ({ 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) => <TokenTransfer key={ index } { ...item }/>) }
+    </Flex>
+  );
+};
+
+export default React.memo(TokenTransferList);

ui/tx/TxDetails.tsx

-import { Grid, GridItem, Text, Box, Icon, Link, Flex, Spinner } from '@chakra-ui/react';
+import { Grid, GridItem, Text, Box, Icon, Link, Spinner } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import BigNumber from 'bignumber.js';
 import appConfig from 'configs/app/config';
@@ -32,7 +32,7 @@ import TxStatus from 'ui/shared/TxStatus';
 import Utilization from 'ui/shared/Utilization';
 import TxDetailsSkeleton from 'ui/tx/details/TxDetailsSkeleton';
 import TxRevertReason from 'ui/tx/details/TxRevertReason';
-import TokenTransfer from 'ui/tx/TokenTransfer';
+import TokenTransferList from 'ui/tx/TokenTransferList';
 import TxDecodedInputData from 'ui/tx/TxDecodedInputData';
 
 const TOKEN_TRANSFERS = [
@@ -171,10 +171,9 @@ const TxDetails = () => {
             key={ type }
             title={ title }
             hint={ hint }
+            position="relative"
           >
-            <Flex flexDirection="column" alignItems="flex-start" rowGap={ 5 } w="100%">
-              { items.map((item, index) => <TokenTransfer key={ index } { ...item }/>) }
-            </Flex>
+            <TokenTransferList items={ items }/>
           </DetailsInfoItem>
         );
       }) }