nft link

ui/shared/TokenTransfer/TokenTransferListItem.tsx

@@ -5,7 +5,6 @@ import React from 'react';
 import type { TokenTransfer } from 'types/api/tokenTransfer';
 
 import eastArrowIcon from 'icons/arrows/east.svg';
-import nftPlaceholder from 'icons/nft_shield.svg';
 import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
 import AdditionalInfoButton from 'ui/shared/AdditionalInfoButton';
 import Address from 'ui/shared/address/Address';
@@ -14,6 +13,7 @@ import AddressLink from 'ui/shared/address/AddressLink';
 import InOutTag from 'ui/shared/InOutTag';
 import TokenSnippet from 'ui/shared/TokenSnippet';
 import { getTokenTransferTypeText } from 'ui/shared/TokenTransfer/helpers';
+import TokenTransferNft from 'ui/shared/TokenTransfer/TokenTransferNft';
 
 type Props = TokenTransfer & {
   baseAddress?: string;
@@ -38,13 +38,7 @@ const TokenTransferListItem = ({ token, total, tx_hash: txHash, from, to, baseAd
         <Tag colorScheme="orange">{ getTokenTransferTypeText(type) }</Tag>
         { showTxInfo && <AdditionalInfoButton position="absolute" top={ 0 } right={ 0 }/> }
       </Flex>
-      { 'token_id' in total && (
-        <Flex alignItems="center">
-          <Text fontWeight={ 500 }>Token ID</Text>
-          <Icon mx={ 1 } as={ nftPlaceholder } boxSize="30px"/>
-          <AddressLink hash={ token.address } id={ total.token_id } type="token_instance_item"/>
-        </Flex>
-      ) }
+      { 'token_id' in total && <TokenTransferNft hash={ token.address } id={ total.token_id }/> }
       { showTxInfo && (
         <Flex columnGap={ 2 } w="100%">
           <Text fontWeight={ 500 } flexShrink={ 0 }>Txn hash</Text>

ui/shared/TokenTransfer/TokenTransferNft.tsx

+import { Box, Icon, Link } from '@chakra-ui/react';
+import React from 'react';
+
+import nftPlaceholder from 'icons/nft_shield.svg';
+import link from 'lib/link/link';
+import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
+
+interface Props {
+  hash: string;
+  id: string;
+}
+
+const TokenTransferNft = ({ hash, id }: Props) => {
+  return (
+    <Link href={ link('token_instance_item', { hash, id }) } overflow="hidden" whiteSpace="nowrap" display="flex" alignItems="center" w="100%">
+      <Icon as={ nftPlaceholder } boxSize="30px" mr={ 1 } color="inherit"/>
+      <Box maxW="calc(100% - 34px)">
+        <HashStringShortenDynamic hash={ id } fontWeight={ 500 }/>
+      </Box>
+    </Link>
+  );
+};
+
+export default React.memo(TokenTransferNft);

ui/shared/TokenTransfer/TokenTransferTableItem.tsx

-import { Tr, Td, Tag, Icon, Flex } from '@chakra-ui/react';
+import { Tr, Td, Tag, Flex } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
 import type { TokenTransfer } from 'types/api/tokenTransfer';
 
-import nftPlaceholder from 'icons/nft_shield.svg';
 import AdditionalInfoButton from 'ui/shared/AdditionalInfoButton';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
@@ -12,6 +11,7 @@ import AddressLink from 'ui/shared/address/AddressLink';
 import InOutTag from 'ui/shared/InOutTag';
 import TokenSnippet from 'ui/shared/TokenSnippet';
 import { getTokenTransferTypeText } from 'ui/shared/TokenTransfer/helpers';
+import TokenTransferNft from 'ui/shared/TokenTransfer/TokenTransferNft';
 
 type Props = TokenTransfer & {
   baseAddress?: string;
@@ -42,12 +42,7 @@ const TxInternalTableItem = ({ token, total, tx_hash: txHash, from, to, baseAddr
         </Flex>
       </Td>
       <Td lineHeight="30px">
-        { 'token_id' in total ? (
-          <Flex align="center">
-            <Icon as={ nftPlaceholder } boxSize="30px" mr={ 1 }/>
-            <AddressLink hash={ token.address } id={ total.token_id } type="token_instance_item"/>
-          </Flex>
-        ) : '-' }
+        { 'token_id' in total ? <TokenTransferNft hash={ token.address } id={ total.token_id }/> : '-' }
       </Td>
       { showTxInfo && (
         <Td>