minor fixes

stubs/address.ts

 import type { Address } from 'types/api/address';
 import type { AddressParam } from 'types/api/addressParams';
 
-import { TOKEN_INFO } from './token';
+import { TOKEN_INFO_ERC_20 } from './token';
 
 export const ADDRESS_HASH = '0x2B51Ae4412F79c3c1cB12AA40Ea4ECEb4e80511a';
 
@@ -39,7 +39,7 @@ export const ADDRESS_INFO: Address = {
   is_contract: false,
   is_verified: false,
   name: 'ChainLink Token (goerli)',
-  token: TOKEN_INFO,
+  token: TOKEN_INFO_ERC_20,
   private_tags: [],
   public_tags: [],
   watchlist_names: [],

ui/pages/Token.tsx

@@ -11,7 +11,8 @@ import useContractTabs from 'lib/hooks/useContractTabs';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import trimTokenSymbol from 'lib/token/trimTokenSymbol';
-import * as stubs from 'stubs/token';
+import * as addressStubs from 'stubs/address';
+import * as tokenStubs from 'stubs/token';
 import AddressContract from 'ui/address/AddressContract';
 import TextAd from 'ui/shared/ad/TextAd';
 import PageTitle from 'ui/shared/Page/PageTitle';
@@ -42,7 +43,12 @@ const TokenPageContent = () => {
 
   const tokenQuery = useApiQuery('token', {
     pathParams: { hash: hashString },
-    queryOptions: { enabled: Boolean(router.query.hash), placeholderData: stubs.TOKEN_INFO_ERC_20 },
+    queryOptions: { enabled: Boolean(router.query.hash), placeholderData: tokenStubs.TOKEN_INFO_ERC_20 },
+  });
+
+  const contractQuery = useApiQuery('address', {
+    pathParams: { hash: hashString },
+    queryOptions: { enabled: Boolean(router.query.hash), placeholderData: addressStubs.ADDRESS_INFO },
   });
 
   useEffect(() => {
@@ -65,8 +71,8 @@ const TokenPageContent = () => {
     pathParams: { hash: hashString },
     scrollRef,
     options: {
-      enabled: Boolean(router.query.hash && (!router.query.tab || router.query.tab === 'token_transfers') && tokenQuery.data),
-      placeholderData: stubs.getTokenTransfersStub(tokenQuery.data?.type),
+      enabled: Boolean(router.query.hash && (!router.query.tab || router.query.tab === 'token_transfers') && tokenQuery.data && contractQuery.data),
+      placeholderData: tokenStubs.getTokenTransfersStub(tokenQuery.data?.type),
     },
   });
 
@@ -75,8 +81,8 @@ const TokenPageContent = () => {
     pathParams: { hash: hashString },
     scrollRef,
     options: {
-      enabled: Boolean(router.query.hash && router.query.tab === 'holders' && tokenQuery.data),
-      placeholderData: stubs.TOKEN_HOLDERS,
+      enabled: Boolean(router.query.hash && router.query.tab === 'holders' && tokenQuery.data && contractQuery.data),
+      placeholderData: tokenStubs.TOKEN_HOLDERS,
     },
   });
 
@@ -85,16 +91,11 @@ const TokenPageContent = () => {
     pathParams: { hash: hashString },
     scrollRef,
     options: {
-      enabled: Boolean(router.query.hash && router.query.tab === 'inventory' && tokenQuery.data),
-      placeholderData: stubs.TOKEN_INSTANCES,
+      enabled: Boolean(router.query.hash && router.query.tab === 'inventory' && tokenQuery.data && contractQuery.data),
+      placeholderData: tokenStubs.TOKEN_INSTANCES,
     },
   });
 
-  const contractQuery = useApiQuery('address', {
-    pathParams: { hash: hashString },
-    queryOptions: { enabled: Boolean(router.query.hash) },
-  });
-
   const contractTabs = useContractTabs(contractQuery.data);
 
   const tabs: Array<RoutedTab> = [
@@ -168,7 +169,7 @@ const TokenPageContent = () => {
         ) }
         additionalsRight={ <Skeleton isLoaded={ !tokenQuery.isPlaceholderData } borderRadius="sm"><Tag>{ tokenQuery.data?.type }</Tag></Skeleton> }
       />
-      <TokenContractInfo tokenQuery={ tokenQuery }/>
+      <TokenContractInfo tokenQuery={ tokenQuery } contractQuery={ contractQuery }/>
       <TokenDetails tokenQuery={ tokenQuery }/>
       { /* should stay before tabs to scroll up with pagination */ }
       <Box ref={ scrollRef }></Box>

ui/privateTags/AddressTagTable/AddressTagTableItem.tsx

@@ -34,13 +34,11 @@ const AddressTagTableItem = ({ item, onEditClick, onDeleteClick, isLoading }: Pr
         <AddressSnippet address={ item.address } isLoading={ isLoading }/>
       </Td>
       <Td whiteSpace="nowrap">
-        <TruncatedTextTooltip label={ item.name }>
-          <Skeleton isLoaded={ !isLoading } display="inline-block" borderRadius="sm">
-            <Tag>
-              { item.name }
-            </Tag>
-          </Skeleton>
-        </TruncatedTextTooltip>
+        <Skeleton isLoaded={ !isLoading } display="inline-block" borderRadius="sm" maxW="100%">
+          <TruncatedTextTooltip label={ item.name }>
+            <Tag>{ item.name }</Tag>
+          </TruncatedTextTooltip>
+        </Skeleton>
       </Td>
       <Td>
         <TableItemActionButtons onDeleteClick={ onItemDeleteClick } onEditClick={ onItemEditClick } isLoading={ isLoading }/>

ui/token/TokenContractInfo.tsx

 import type { UseQueryResult } from '@tanstack/react-query';
-import { useRouter } from 'next/router';
 import React from 'react';
 
+import type { Address } from 'types/api/address';
 import type { TokenInfo } from 'types/api/token';
 
-import useApiQuery from 'lib/api/useApiQuery';
-import * as stubs from 'stubs/address';
 import AddressHeadingInfo from 'ui/shared/AddressHeadingInfo';
 
 interface Props {
   tokenQuery: UseQueryResult<TokenInfo>;
+  contractQuery: UseQueryResult<Address>;
 }
 
-const TokenContractInfo = ({ tokenQuery }: Props) => {
-  const router = useRouter();
-
-  const contractQuery = useApiQuery('address', {
-    pathParams: { hash: router.query.hash?.toString() },
-    queryOptions: { enabled: Boolean(router.query.hash), placeholderData: stubs.ADDRESS_INFO },
-  });
-
+const TokenContractInfo = ({ tokenQuery, contractQuery }: Props) => {
   // we show error in parent component, this is only for TS
   if (tokenQuery.isError) {
     return null;

ui/token/TokenTransfer/TokenTransferTableItem.tsx

@@ -10,6 +10,7 @@ import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
 import TokenTransferNft from 'ui/shared/TokenTransfer/TokenTransferNft';
+import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
 
 type Props = TokenTransfer & { tokenId?: string; isLoading?: boolean }
 
@@ -37,7 +38,7 @@ const TokenTransferTableItem = ({
   return (
     <Tr alignItems="top">
       <Td>
-        <Grid alignItems="center" gridTemplateColumns="auto 130px" width="fit-content">
+        <Grid alignItems="center" gridTemplateColumns="auto 130px" width="fit-content" py="7px">
           <Address display="inline-flex" fontWeight={ 600 }>
             <AddressLink type="transaction" hash={ txHash } isLoading={ isLoading }/>
           </Address>
@@ -51,12 +52,14 @@ const TokenTransferTableItem = ({
         </Grid>
       </Td>
       <Td>
-        <Skeleton isLoaded={ !isLoading } display="inline-block" borderRadius="sm">
-          { method ? <Tag colorScheme="gray">{ method }</Tag> : '-' }
+        <Skeleton isLoaded={ !isLoading } display="inline-block" borderRadius="sm" maxW="100%" py="3px">
+          <TruncatedTextTooltip label={ method || '' }>
+            { method ? <Tag> { method } </Tag> : '-' }
+          </TruncatedTextTooltip>
         </Skeleton>
       </Td>
       <Td>
-        <Address display="inline-flex" maxW="100%">
+        <Address display="inline-flex" maxW="100%" py="3px">
           <AddressIcon address={ from } isLoading={ isLoading }/>
           <AddressLink
             ml={ 2 }
@@ -72,10 +75,10 @@ const TokenTransferTableItem = ({
         </Address>
       </Td>
       <Td px={ 0 }>
-        <Icon as={ eastArrowIcon } boxSize={ 6 } color="gray.500"/>
+        <Icon as={ eastArrowIcon } boxSize={ 6 } color="gray.500" my="3px"/>
       </Td>
       <Td>
-        <Address display="inline-flex" maxW="100%">
+        <Address display="inline-flex" maxW="100%" py="3px">
           <AddressIcon address={ to } isLoading={ isLoading }/>
           <AddressLink
             ml={ 2 }
@@ -106,7 +109,7 @@ const TokenTransferTableItem = ({
       ) }
       { (token.type === 'ERC-20' || token.type === 'ERC-1155') && (
         <Td isNumeric verticalAlign="top">
-          <Skeleton isLoaded={ !isLoading }>
+          <Skeleton isLoaded={ !isLoading } py="7px">
             { value || '-' }
           </Skeleton>
         </Td>