Display tx actions for Uniswap V3 on Details tab

ui/shared/StringShorten.tsx

+import { Tooltip } from '@chakra-ui/react';
+import React from 'react';
+
+interface Props {
+  title: string;
+  maxLength: number;
+}
+
+const StringShorten = ({ title, maxLength }: Props) => {
+  if (title.length > maxLength) {
+    return (
+      <Tooltip label={ title }>
+        { title.slice(0, maxLength) + '...' }
+      </Tooltip>
+    );
+  } else {
+    return title;
+  }
+};
+
+export default StringShorten;

ui/tx/TxDetails.tsx

@@ -25,6 +25,7 @@ import TextSeparator from 'ui/shared/TextSeparator';
 import TxStatus from 'ui/shared/TxStatus';
 import Utilization from 'ui/shared/Utilization/Utilization';
 import TxDetailsSkeleton from 'ui/tx/details/TxDetailsSkeleton';
+import TxDetailsActions from 'ui/tx/details/TxDetailsActions';
 import TxDetailsTokenTransfers from 'ui/tx/details/TxDetailsTokenTransfers';
 import TxRevertReason from 'ui/tx/details/TxRevertReason';
 import TxDecodedInputData from 'ui/tx/TxDecodedInputData/TxDecodedInputData';
@@ -125,6 +126,8 @@ const TxDetails = () => {
           <Text variant="secondary">{ getConfirmationDuration(data.confirmation_duration) }</Text>
         </DetailsInfoItem>
       ) }
+      { data.actions && <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 3, lg: 8 }}/> }
+      { data.actions && <TxDetailsActions actions={ data.actions }/> }
       <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 3, lg: 8 }}/>
       <DetailsInfoItem
         title="From"

ui/tx/details/TxDetailsAction.tsx

+import { Flex, Image, Link, Text } from '@chakra-ui/react';
+import React from 'react';
+
+import link from 'lib/link/link';
+import { space } from 'lib/html-entities';
+import AddressLink from 'ui/shared/address/AddressLink';
+import TokenSnippet from 'ui/shared/TokenSnippet';
+import StringShorten from 'ui/shared/StringShorten';
+
+import BigNumber from 'bignumber.js';
+
+const uniswapIconUrl = 'https://raw.githubusercontent.com/trustwallet/assets/master/dapps/app.uniswap.org.png';
+
+const TxDetailsAction = ({ protocol, type, data }) => {
+  if (protocol === 'uniswap_v3') {
+    if (['mint', 'burn', 'collect', 'swap'].includes(type)) {
+      const amount0 = BigNumber(data.amount0).toFormat();
+      const amount1 = BigNumber(data.amount1).toFormat();
+
+      const actionName = {
+        'mint': ['Add', 'Liquidity To'],
+        'burn': ['Remove', 'Liquidity From'],
+        'collect': ['Collect', 'From'],
+        'swap': ['Swap', 'On']
+      }
+
+      return (
+        <Flex flexWrap="wrap" columnGap={ 1 } rowGap={ 2 }>
+          <Text color="gray.500" as="span">
+            { actionName[type][0] }
+          </Text>
+
+          <Flex columnGap={ 1 }>
+            <Text as="span">{ amount0 }</Text>
+            { data.symbol0 === 'Ether' ? <Text as="span">Ether</Text> : <TokenSnippet name={ data.symbol0 } hash={ data.address0 }/> }
+          </Flex>
+          
+          <Text color="gray.500" as="span">
+            { type === 'swap' ? 'For' : 'And' }
+          </Text>
+
+          <Flex columnGap={ 1 }>
+            <Text as="span">{ amount1 }</Text>
+            { data.symbol1 === 'Ether' ? <Text as="span">Ether</Text> : <TokenSnippet name={ data.symbol1 } hash={ data.address1 }/> }
+          </Flex>
+
+          <Text color="gray.500" as="span">
+            { actionName[type][1] }
+          </Text>
+
+          <Flex columnGap={ 1 }>
+            <Image src={ uniswapIconUrl } boxSize={ 5 } fallback=" "/>
+            <Text color="gray.500" as="span">
+              Uniswap V3
+            </Text>
+          </Flex>
+        </Flex>
+      );
+    } else if (type === 'mint_nft') {
+      const tokenUrl = link('token_index', { hash: data.address });
+      return (
+        <Flex rowGap={ 2 } flexDirection="column">
+          <Flex flexWrap="wrap" columnGap={ 1 } rowGap={ 2 }>
+            <Flex columnGap={ 1 }>
+              <Text as="span">Mint of</Text>
+              <Image src={ uniswapIconUrl } boxSize={ 5 } fallback=" "/>
+              <Link href={ tokenUrl } target={ '_blank' } overflow="hidden" whiteSpace="nowrap">
+                <StringShorten title={ data.name } maxLength="12"/>
+                { space }
+                (<StringShorten title={ data.symbol } maxLength="6"/>)
+              </Link>
+            </Flex>
+            <Flex columnGap={ 1 }>
+              <Text as="span">To</Text>
+              <AddressLink hash={ data.to }/>
+            </Flex>
+          </Flex>
+          <Flex columnGap={ 1 } rowGap={ 2 } marginLeft={ 3 } flexDirection="column">
+            {
+              data.ids.map((id) => {
+                const url = link('token_instance_item', { hash: data.address, id });
+                return (
+                  <Flex>
+                    <Flex columnGap={ 1 }>
+                      <Text>1 of</Text>
+                      <Text color="gray.500">Token ID [</Text>
+                    </Flex>
+                    <Link href={ url }>{ id }</Link>
+                    <Text color="gray.500">]</Text>
+                  </Flex>
+                );
+              })
+            }
+          </Flex>
+        </Flex>
+      );
+    }
+  }
+};
+
+export default React.memo(TxDetailsAction);

ui/tx/details/TxDetailsActions.tsx

+import { Flex } from '@chakra-ui/react';
+import React from 'react';
+
+import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+
+import TxDetailsAction from './TxDetailsAction';
+
+const TxDetailsActions = ({ actions }) => {
+  return (
+    <DetailsInfoItem
+      title="Transaction Action"
+      hint="Highlighted events of the transaction"
+      position="relative"
+    >
+      <Flex
+        flexDirection="column"
+        alignItems="flex-start"
+        rowGap={ 5 }
+        w="100%"
+        fontWeight={ 500 }
+      >
+        { actions.map((action, index) => <TxDetailsAction key={ index } { ...action }/>) }
+      </Flex>
+    </DetailsInfoItem>
+  );
+};
+
+export default React.memo(TxDetailsActions);