display actual token symbol in transfers table header

ui/pages/Token.tsx

@@ -99,7 +99,7 @@ const TokenPageContent = () => {
   const contractTabs = useContractTabs(contractQuery.data);
 
   const tabs: Array<RoutedTab> = [
-    { id: 'token_transfers', title: 'Token transfers', component: <TokenTransfer transfersQuery={ transfersQuery }/> },
+    { id: 'token_transfers', title: 'Token transfers', component: <TokenTransfer transfersQuery={ transfersQuery } token={ tokenQuery.data }/> },
     { id: 'holders', title: 'Holders', component: <TokenHolders tokenQuery={ tokenQuery } holdersQuery={ holdersQuery }/> },
     (tokenQuery.data?.type === 'ERC-1155' || tokenQuery.data?.type === 'ERC-721') ?
       { id: 'inventory', title: 'Inventory', component: <TokenInventory inventoryQuery={ inventoryQuery }/> } :

ui/token/TokenTransfer/TokenTransfer.tsx

@@ -4,6 +4,7 @@ import { useRouter } from 'next/router';
 import React from 'react';
 
 import type { SocketMessage } from 'lib/socket/types';
+import type { TokenInfo } from 'types/api/token';
 import type { TokenTransferResponse } from 'types/api/tokenTransfer';
 
 import useGradualIncrement from 'lib/hooks/useGradualIncrement';
@@ -25,9 +26,10 @@ type Props = {
     isPaginationVisible: boolean;
   };
   tokenId?: string;
+  token?: TokenInfo;
 }
 
-const TokenTransfer = ({ transfersQuery, tokenId }: Props) => {
+const TokenTransfer = ({ transfersQuery, tokenId, token }: Props) => {
   const isMobile = useIsMobile();
   const router = useRouter();
   const { isError, isLoading, isPlaceholderData, data, pagination, isPaginationVisible } = transfersQuery;
@@ -72,6 +74,7 @@ const TokenTransfer = ({ transfersQuery, tokenId }: Props) => {
           socketInfoAlert={ socketAlert }
           socketInfoNum={ newItemsCount }
           tokenId={ tokenId }
+          token={ token }
           isLoading={ isPlaceholderData }
         />
       </Hide>

ui/token/TokenTransfer/TokenTransferTable.tsx

 import { Table, Tbody, Tr, Th, Td, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
+import type { TokenInfo } from 'types/api/token';
 import type { TokenTransfer } from 'types/api/tokenTransfer';
 
 import trimTokenSymbol from 'lib/token/trimTokenSymbol';
@@ -16,11 +17,11 @@ interface Props {
   socketInfoNum?: number;
   tokenId?: string;
   isLoading?: boolean;
+  token?: TokenInfo;
 }
 
-const TokenTransferTable = ({ data, top, showSocketInfo, socketInfoAlert, socketInfoNum, tokenId, isLoading }: Props) => {
+const TokenTransferTable = ({ data, top, showSocketInfo, socketInfoAlert, socketInfoNum, tokenId, isLoading, token }: Props) => {
   const tokenType = data[0].token.type;
-  const tokenSymbol = data[0].token.symbol;
 
   return (
     <Table variant="simple" size="sm" minW="950px">
@@ -32,7 +33,8 @@ const TokenTransferTable = ({ data, top, showSocketInfo, socketInfoAlert, socket
           <Th width="36px" px={ 0 }/>
           <Th width="218px" >To</Th>
           { (tokenType === 'ERC-721' || tokenType === 'ERC-1155') && <Th width="20%" isNumeric={ tokenType === 'ERC-721' }>Token ID</Th> }
-          { (tokenType === 'ERC-20' || tokenType === 'ERC-1155') && <Th width="20%" isNumeric whiteSpace="nowrap">Value { trimTokenSymbol(tokenSymbol) }</Th> }
+          { (tokenType === 'ERC-20' || tokenType === 'ERC-1155') &&
+            <Th width="20%" isNumeric whiteSpace="nowrap">Value { trimTokenSymbol(token?.symbol || '') }</Th> }
         </Tr>
       </Thead>
       <Tbody>

ui/tokenInstance/TokenInstanceContent.tsx

@@ -51,7 +51,11 @@ const TokenInstanceContent = () => {
   });
 
   const tabs: Array<RoutedTab> = [
-    { id: 'token_transfers', title: 'Token transfers', component: <TokenTransfer transfersQuery={ transfersQuery } tokenId={ id }/> },
+    {
+      id: 'token_transfers',
+      title: 'Token transfers',
+      component: <TokenTransfer transfersQuery={ transfersQuery } tokenId={ id } token={ tokenInstanceQuery.data?.token }/>,
+    },
     // there is no api for this tab yet
     // { id: 'holders', title: 'Holders', component: <span>Holders</span> },
     { id: 'metadata', title: 'Metadata', component: <TokenInstanceMetadata data={ tokenInstanceQuery.data?.metadata }/> },