scroll

ui/tx/details/TxDetailsAction.tsx

@@ -67,17 +67,19 @@ const TxDetailsAction = ({ action }: Props) => {
           />
 
           <chakra.span color="text_secondary">{ text1 } </chakra.span>
+          <Flex columnGap={ 1 }>
             <Icon as={ uniswapIcon } boxSize={ 5 } color="white" bgColor="#ff007a" borderRadius="full" p="2px"/>
             <chakra.span color="text_secondary">Uniswap V3</chakra.span>
           </Flex>
+        </Flex>
       );
     }
 
     case 'mint_nft' : {
       return (
         <div>
-          <Flex rowGap={ 2 } flexWrap="wrap" whiteSpace="pre-wrap">
-            <span>Mint of </span>
+          <Flex rowGap={ 2 } flexWrap="wrap" alignItems="center" whiteSpace="pre-wrap">
+            <chakra.span>Mint of </chakra.span>
             <TokenSnippet
               name={ data.name }
               hash={ data.address }
@@ -85,8 +87,10 @@ const TxDetailsAction = ({ action }: Props) => {
               w="auto"
               columnGap={ 1 }
               logoSize={ 5 }
+              rowGap={ 2 }
+              flexWrap="wrap"
             />
-            <span> to </span>
+            <chakra.span> to </chakra.span>
             <AddressLink hash={ data.to } type="address" truncation="constant"/>
           </Flex>
 

ui/tx/details/TxDetailsActions.tsx

-import { Flex } from '@chakra-ui/react';
+import { Flex, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import type { TxAction } from 'types/api/txAction';
@@ -12,17 +12,45 @@ interface Props {
 }
 
 const TxDetailsActions = ({ actions }: Props) => {
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const [ hasScroll, setHasScroll ] = React.useState(false);
+
+  const gradientStartColor = useColorModeValue('whiteAlpha.600', 'blackAlpha.600');
+  const gradientEndColor = useColorModeValue('whiteAlpha.900', 'blackAlpha.900');
+
+  React.useEffect(() => {
+    if (!containerRef.current) {
+      return;
+    }
+    setHasScroll(containerRef.current.scrollHeight > containerRef.current.clientHeight);
+  }, []);
+
   return (
     <DetailsInfoItem
       title="Transaction Action"
       hint="Highlighted events of the transaction"
-      note="Scroll to see more"
+      note={ hasScroll ? 'Scroll to see more' : undefined }
+      position="relative"
     >
       <Flex
         flexDirection="column"
         alignItems="flex-start"
         rowGap={ 5 }
         w="100%"
+        maxH="200px"
+        overflowY="scroll"
+        ref={ containerRef }
+        _after={ hasScroll ? {
+          position: 'absolute',
+          content: '""',
+          bottom: 0,
+          left: 0,
+          right: '20px',
+          height: '48px',
+          bgGradient: `linear(to-b, ${ gradientStartColor } 37.5%, ${ gradientEndColor } 77.5%)`,
+        } : undefined }
+        pr={ hasScroll ? 5 : 0 }
+        pb={ hasScroll ? 10 : 0 }
       >
         { actions.map((action, index: number) => <TxDetailsAction key={ index } action={ action }/>) }
       </Flex>