remove usage of TokenLogo

ui/address/AddressTokenTransfers.tsx

@@ -22,11 +22,11 @@ import TOKEN_TYPE from 'lib/token/tokenTypes';
 import { getTokenTransfersStub } from 'stubs/token';
 import ActionBar from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
+import * as TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import HashStringShorten from 'ui/shared/HashStringShorten';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 import * as SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
-import TokenLogo from 'ui/shared/TokenLogo';
 import TokenTransferFilter from 'ui/shared/TokenTransfer/TokenTransferFilter';
 import TokenTransferList from 'ui/shared/TokenTransfer/TokenTransferList';
 import TokenTransferTable from 'ui/shared/TokenTransfer/TokenTransferTable';
@@ -227,19 +227,20 @@ const AddressTokenTransfers = ({ scrollRef, overloadCount = OVERLOAD_COUNT }: Pr
     address: tokenFilter || '',
     name: '',
     icon_url: '',
+    symbol: '',
   }), [ tokenFilter ]);
 
   const tokenFilterComponent = tokenFilter && (
     <Flex alignItems="center" flexWrap="wrap" mb={{ base: isActionBarHidden ? 3 : 6, lg: 0 }} mr={ 4 }>
       <Text whiteSpace="nowrap" mr={ 2 } py={ 1 }>Filtered by token</Text>
       <Flex alignItems="center" py={ 1 }>
-        <TokenLogo data={ tokenData } boxSize={ 6 } mr={ 2 }/>
+        <TokenEntity.Icon token={ tokenData } isLoading={ isPlaceholderData }/>
         { isMobile ? <HashStringShorten hash={ tokenFilter }/> : tokenFilter }
         <Tooltip label="Reset filter">
           <Flex>
             <Icon
               as={ crossIcon }
-              boxSize={ 6 }
+              boxSize={ 5 }
               ml={ 1 }
               color={ resetTokenIconColor }
               cursor="pointer"

ui/address/details/AddressBalance.tsx

@@ -10,7 +10,6 @@ import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
 import CurrencyValue from 'ui/shared/CurrencyValue';
 import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
-import TokenLogo from 'ui/shared/TokenLogo';
 
 interface Props {
   data: Pick<Address, 'block_number_balance_updated_at' | 'coin_balance' | 'hash' | 'exchange_rate'>;
@@ -64,11 +63,6 @@ const AddressBalance = ({ data, isLoading }: Props) => {
     handler: handleNewCoinBalanceMessage,
   });
 
-  const tokenData = React.useMemo(() => ({
-    name: config.chain.currency.name || '',
-    icon_url: '',
-  }), [ ]);
-
   return (
     <DetailsInfoItem
       title="Balance"
@@ -77,13 +71,6 @@ const AddressBalance = ({ data, isLoading }: Props) => {
       alignItems="flex-start"
       isLoading={ isLoading }
     >
-      <TokenLogo
-        data={ tokenData }
-        boxSize={ 5 }
-        mr={ 2 }
-        fontSize="sm"
-        isLoading={ isLoading }
-      />
       <CurrencyValue
         value={ data.coin_balance || '0' }
         exchangeRate={ data.exchange_rate }

ui/address/tokens/ERC20TokensListItem.tsx

@@ -5,17 +5,14 @@ import type { AddressTokenBalance } from 'types/api/address';
 
 import getCurrencyValue from 'lib/getCurrencyValue';
 import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet';
-import AddressLink from 'ui/shared/address/AddressLink';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
-import TokenLogo from 'ui/shared/TokenLogo';
 
 type Props = AddressTokenBalance & { isLoading: boolean};
 
 const ERC20TokensListItem = ({ token, value, isLoading }: Props) => {
 
-  const tokenString = [ token.name, token.symbol && `(${ token.symbol })` ].filter(Boolean).join(' ');
-
   const {
     valueStr: tokenQuantity,
     usd: tokenValue,
@@ -24,8 +21,13 @@ const ERC20TokensListItem = ({ token, value, isLoading }: Props) => {
   return (
     <ListItemMobile rowGap={ 2 }>
       <Flex alignItems="center" width="100%">
-        <TokenLogo data={ token } boxSize={ 6 } mr={ 2 } isLoading={ isLoading }/>
-        <AddressLink fontWeight="700" hash={ token.address } type="token" alias={ tokenString } isLoading={ isLoading }/>
+        <TokenEntity
+          token={ token }
+          isLoading={ isLoading }
+          noCopy
+          jointSymbol
+          fontWeight="700"
+        />
       </Flex>
       <Flex alignItems="center" pl={ 8 }>
         <AddressEntity

ui/address/tokens/ERC20TokensTableItem.tsx

@@ -5,9 +5,8 @@ import type { AddressTokenBalance } from 'types/api/address';
 
 import getCurrencyValue from 'lib/getCurrencyValue';
 import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet';
-import AddressLink from 'ui/shared/address/AddressLink';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
-import TokenLogo from 'ui/shared/TokenLogo';
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 
 type Props = AddressTokenBalance & { isLoading: boolean };
 
@@ -17,8 +16,6 @@ const ERC20TokensTableItem = ({
   isLoading,
 }: Props) => {
 
-  const tokenString = [ token.name, token.symbol && `(${ token.symbol })` ].filter(Boolean).join(' ');
-
   const {
     valueStr: tokenQuantity,
     usd: tokenValue,
@@ -27,10 +24,13 @@ const ERC20TokensTableItem = ({
   return (
     <Tr>
       <Td verticalAlign="middle">
-        <Flex alignItems="center">
-          <TokenLogo data={ token } boxSize={ 6 } mr={ 2 } isLoading={ isLoading }/>
-          <AddressLink fontWeight="700" hash={ token.address } type="token" alias={ tokenString } isLoading={ isLoading }/>
-        </Flex>
+        <TokenEntity
+          token={ token }
+          isLoading={ isLoading }
+          noCopy
+          jointSymbol
+          fontWeight="700"
+        />
       </Td>
       <Td verticalAlign="middle">
         <Flex alignItems="center" width="150px" justifyContent="space-between">

ui/address/tokens/ERC721TokensListItem.tsx

@@ -5,10 +5,9 @@ import React from 'react';
 import type { AddressTokenBalance } from 'types/api/address';
 
 import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet';
-import AddressLink from 'ui/shared/address/AddressLink';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import TokenEntityWithAddressFilter from 'ui/shared/entities/token/TokenEntityWithAddressFilter';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
-import TokenLogo from 'ui/shared/TokenLogo';
 
 type Props = AddressTokenBalance & { isLoading: boolean};
 
@@ -17,14 +16,16 @@ const ERC721TokensListItem = ({ token, value, isLoading }: Props) => {
 
   const hash = router.query.hash?.toString() || '';
 
-  const tokenString = [ token.name, token.symbol && `(${ token.symbol })` ].filter(Boolean).join(' ');
-
   return (
     <ListItemMobile rowGap={ 2 }>
-      <Flex alignItems="center" width="100%">
-        <TokenLogo data={ token } boxSize={ 6 } mr={ 2 } isLoading={ isLoading }/>
-        <AddressLink fontWeight="700" hash={ hash } tokenHash={ token.address } type="address_token" alias={ tokenString } isLoading={ isLoading }/>
-      </Flex>
+      <TokenEntityWithAddressFilter
+        token={ token }
+        isLoading={ isLoading }
+        addressHash={ hash }
+        noCopy
+        jointSymbol
+        fontWeight={ 700 }
+      />
       <Flex alignItems="center" pl={ 8 }>
         <AddressEntity
           address={{ hash: token.address }}

ui/address/tokens/ERC721TokensTableItem.tsx

@@ -5,9 +5,8 @@ import React from 'react';
 import type { AddressTokenBalance } from 'types/api/address';
 
 import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet';
-import AddressLink from 'ui/shared/address/AddressLink';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
-import TokenLogo from 'ui/shared/TokenLogo';
+import TokenEntityWithAddressFilter from 'ui/shared/entities/token/TokenEntityWithAddressFilter';
 
 type Props = AddressTokenBalance & { isLoading: boolean};
 
@@ -19,15 +18,18 @@ const ERC721TokensTableItem = ({
   const router = useRouter();
 
   const hash = router.query.hash?.toString() || '';
-  const tokenString = [ token.name, token.symbol && `(${ token.symbol })` ].filter(Boolean).join(' ');
 
   return (
     <Tr>
       <Td verticalAlign="middle">
-        <Flex alignItems="center">
-          <TokenLogo data={ token } boxSize={ 6 } mr={ 2 } isLoading={ isLoading }/>
-          <AddressLink fontWeight="700" hash={ hash } tokenHash={ token.address } type="address_token" alias={ tokenString } isLoading={ isLoading }/>
-        </Flex>
+        <TokenEntityWithAddressFilter
+          token={ token }
+          addressHash={ hash }
+          isLoading={ isLoading }
+          noCopy
+          jointSymbol
+          fontWeight="700"
+        />
       </Td>
       <Td verticalAlign="middle">
         <Flex alignItems="center" width="150px" justifyContent="space-between">

ui/address/tokens/NFTItem.tsx

@@ -5,10 +5,9 @@ import type { AddressTokenBalance } from 'types/api/address';
 
 import { route } from 'nextjs-routes';
 
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import NftMedia from 'ui/shared/nft/NftMedia';
-import TokenLogo from 'ui/shared/TokenLogo';
 import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
-import TruncatedValue from 'ui/shared/TruncatedValue';
 
 type Props = AddressTokenBalance & { isLoading: boolean };
 
@@ -53,12 +52,12 @@ const NFTItem = ({ token, token_id: tokenId, token_instance: tokenInstance, isLo
           </TruncatedTextTooltip>
         </Flex>
       ) }
-      { token.name && (
-        <Flex alignItems="center">
-          <TokenLogo data={ token } boxSize={ 6 } ml={ 1 } mr={ 1 } isLoading={ isLoading }/>
-          <TruncatedValue isLoading={ isLoading } value={ token.name } color="text_secondary"/>
-        </Flex>
-      ) }
+      <TokenEntity
+        token={ token }
+        isLoading={ isLoading }
+        noCopy
+        noSymbol
+      />
     </LinkBox>
   );
 };

ui/home/indicators/utils/indicators.tsx

@@ -7,7 +7,7 @@ import config from 'configs/app';
 import globeIcon from 'icons/globe.svg';
 import txIcon from 'icons/transactions.svg';
 import { sortByDateDesc } from 'ui/shared/chart/utils/sorts';
-import TokenLogo from 'ui/shared/TokenLogo';
+import * as TokenEntity from 'ui/shared/entities/token/TokenEntity';
 
 const dailyTxsIndicator: TChainIndicator<'homepage_chart_txs'> = {
   id: 'daily_txs',
@@ -30,13 +30,15 @@ const dailyTxsIndicator: TChainIndicator<'homepage_chart_txs'> = {
 const nativeTokenData = {
   name: config.chain.currency.name || '',
   icon_url: '',
+  symbol: '',
+  address: '',
 };
 
 const coinPriceIndicator: TChainIndicator<'homepage_chart_market'> = {
   id: 'coin_price',
   title: `${ config.chain.currency.symbol } price`,
   value: (stats) => '$' + Number(stats.coin_price).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 }),
-  icon: <TokenLogo data={ nativeTokenData } boxSize={ 6 }/>,
+  icon: <TokenEntity.Icon token={ nativeTokenData } iconSize="24"/>,
   hint: `${ config.chain.currency.symbol } token daily price in USD.`,
   api: {
     resourceName: 'homepage_chart_market',

ui/pages/Token.tsx

@@ -24,6 +24,7 @@ import * as tokenStubs from 'stubs/token';
 import { generateListStub } from 'stubs/utils';
 import AddressContract from 'ui/address/AddressContract';
 import TextAd from 'ui/shared/ad/TextAd';
+import * as TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import EntityTags from 'ui/shared/EntityTags';
 import NetworkExplorers from 'ui/shared/NetworkExplorers';
 import PageTitle from 'ui/shared/Page/PageTitle';
@@ -31,7 +32,6 @@ import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
 import TabsSkeleton from 'ui/shared/Tabs/TabsSkeleton';
-import TokenLogo from 'ui/shared/TokenLogo';
 import TokenContractInfo from 'ui/token/TokenContractInfo';
 import TokenDetails from 'ui/token/TokenDetails';
 import TokenHolders from 'ui/token/TokenHolders/TokenHolders';
@@ -270,14 +270,13 @@ const TokenPageContent = () => {
         title={ `${ tokenQuery.data?.name || 'Unnamed token' }${ tokenSymbolText }` }
         isLoading={ tokenQuery.isPlaceholderData }
         backLink={ backLink }
-        beforeTitle={ (
-          <TokenLogo
-            data={ tokenQuery.data }
-            boxSize={ 6 }
+        beforeTitle={ tokenQuery.data ? (
+          <TokenEntity.Icon
+            token={ tokenQuery.data }
             isLoading={ tokenQuery.isPlaceholderData }
-            mr={ 2 }
+            iconSize="lg"
           />
-        ) }
+        ) : null }
         contentAfter={ titleContentAfter }
       />
       <TokenContractInfo tokenQuery={ tokenQuery } contractQuery={ contractQuery }/>

ui/searchResults/SearchResultListItem.tsx

@@ -13,6 +13,7 @@ import * as mixpanel from 'lib/mixpanel/index';
 import { saveToRecentKeywords } from 'lib/recentSearchKeywords';
 import * as AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import * as BlockEntity from 'ui/shared/entities/block/BlockEntity';
+import * as TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import * as TxEntity from 'ui/shared/entities/tx/TxEntity';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import LinkExternal from 'ui/shared/LinkExternal';
@@ -20,7 +21,6 @@ import LinkInternal from 'ui/shared/LinkInternal';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import type { SearchResultAppItem } from 'ui/shared/search/utils';
 import { getItemCategory, searchItemTitles } from 'ui/shared/search/utils';
-import TokenLogo from 'ui/shared/TokenLogo';
 
 interface Props {
   data: SearchResultItem | SearchResultAppItem;
@@ -48,9 +48,8 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
 
         return (
           <Flex alignItems="flex-start" flexGrow={ 1 } overflow="hidden">
-            <TokenLogo boxSize={ 6 } data={ data } flexShrink={ 0 } isLoading={ isLoading }/>
+            <TokenEntity.Icon token={ data } isLoading={ isLoading }/>
             <LinkInternal
-              ml={ 2 }
               href={ route({ pathname: '/token/[hash]', query: { hash: data.address } }) }
               fontWeight={ 700 }
               wordBreak="break-all"

ui/searchResults/SearchResultTableItem.tsx

@@ -13,13 +13,13 @@ import * as mixpanel from 'lib/mixpanel/index';
 import { saveToRecentKeywords } from 'lib/recentSearchKeywords';
 import * as AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import * as BlockEntity from 'ui/shared/entities/block/BlockEntity';
+import * as TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import * as TxEntity from 'ui/shared/entities/tx/TxEntity';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import LinkExternal from 'ui/shared/LinkExternal';
 import LinkInternal from 'ui/shared/LinkInternal';
 import type { SearchResultAppItem } from 'ui/shared/search/utils';
 import { getItemCategory, searchItemTitles } from 'ui/shared/search/utils';
-import TokenLogo from 'ui/shared/TokenLogo';
 
 interface Props {
   data: SearchResultItem | SearchResultAppItem;
@@ -49,9 +49,8 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
           <>
             <Td fontSize="sm">
               <Flex alignItems="center">
-                <TokenLogo boxSize={ 6 } data={ data } flexShrink={ 0 } isLoading={ isLoading }/>
+                <TokenEntity.Icon token={ data } isLoading={ isLoading }/>
                 <LinkInternal
-                  ml={ 2 }
                   href={ route({ pathname: '/token/[hash]', query: { hash: data.address } }) }
                   fontWeight={ 700 }
                   wordBreak="break-all"

ui/shared/Page/specs/DefaultView.tsx

@@ -5,9 +5,9 @@ import type { TokenInfo } from 'types/api/token';
 
 import iconVerifiedToken from 'icons/verified_token.svg';
 import useIsMobile from 'lib/hooks/useIsMobile';
+import * as TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import EntityTags from 'ui/shared/EntityTags';
 import NetworkExplorers from 'ui/shared/NetworkExplorers';
-import TokenLogo from 'ui/shared/TokenLogo';
 
 import PageTitle from '../PageTitle';
 
@@ -49,7 +49,10 @@ const DefaultView = () => {
     <PageTitle
       title="Shavukha Token (SHVKH) token"
       beforeTitle={ (
-        <TokenLogo data={ tokenData } boxSize={ 6 } mr={ 2 }/>
+        <TokenEntity.Icon
+          token={ tokenData }
+          iconSize="lg"
+        />
       ) }
       backLink={ backLink }
       contentAfter={ contentAfter }

ui/shared/Page/specs/LongNameAndManyTags.tsx

@@ -7,9 +7,9 @@ import type { TokenInfo } from 'types/api/token';
 import iconVerifiedToken from 'icons/verified_token.svg';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import { publicTag, privateTag, watchlistName } from 'mocks/address/tag';
+import * as TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import EntityTags from 'ui/shared/EntityTags';
 import NetworkExplorers from 'ui/shared/NetworkExplorers';
-import TokenLogo from 'ui/shared/TokenLogo';
 
 import PageTitle from '../PageTitle';
 
@@ -57,7 +57,10 @@ const LongNameAndManyTags = () => {
     <PageTitle
       title={ `${ tokenData?.name }${ tokenSymbolText } token` }
       beforeTitle={ (
-        <TokenLogo data={ tokenData } boxSize={ 6 } mr={ 2 }/>
+        <TokenEntity.Icon
+          token={ tokenData }
+          iconSize="lg"
+        />
       ) }
       contentAfter={ contentAfter }
     />

ui/shared/TokenLogo.tsx

@@ -11,6 +11,7 @@ export interface Props {
   isLoading?: boolean;
 }
 
+// TODO @tom2drum - remove this component
 const TokenLogo = ({ className, isLoading, data }: Props) => {
 
   if (isLoading) {

ui/shared/entities/base/utils.ts

-export type IconSize = 'md' | 'lg';
+export type IconSize = 'md' | 'lg' | '24';
 
 export function getIconProps(size: IconSize = 'md') {
   switch (size) {
@@ -12,5 +12,10 @@ export function getIconProps(size: IconSize = 'md') {
         boxSize: '30px', // for headings
       };
     }
+    case '24': {
+      return {
+        boxSize: '24px', // deprecated
+      };
+    }
   }
 }

ui/shared/entities/token/TokenEntity.tsx

@@ -28,11 +28,11 @@ const Link = chakra((props: LinkProps) => {
   );
 });
 
-type IconProps = Pick<EntityProps, 'token' | 'isLoading' | 'iconSize' | 'noIcon'> & {
+type IconProps = Pick<EntityProps, 'token' | 'isLoading' | 'iconSize' | 'noIcon' | 'className'> & {
   asProp?: As;
 };
 
-const Icon = (props: IconProps) => {
+const Icon = chakra((props: IconProps) => {
   if (props.noIcon) {
     return null;
   }
@@ -44,26 +44,30 @@ const Icon = (props: IconProps) => {
   };
 
   if (props.isLoading) {
-    return <Skeleton { ...styles } flexShrink={ 0 }/>;
+    return <Skeleton { ...styles } className={ props.className } flexShrink={ 0 }/>;
   }
 
   return (
     <Image
       { ...styles }
+      className={ props.className }
       src={ props.token.icon_url ?? undefined }
       alt={ `${ props.token.name || 'token' } logo` }
       fallback={ <TokenLogoPlaceholder { ...styles }/> }
     />
   );
-};
+});
 
-type ContentProps = Omit<EntityBase.ContentBaseProps, 'text'> & Pick<EntityProps, 'token'>;
+type ContentProps = Omit<EntityBase.ContentBaseProps, 'text'> & Pick<EntityProps, 'token' | 'jointSymbol'>;
 
 const Content = chakra((props: ContentProps) => {
-  const name = props.token.name ?? 'Unnamed token';
+  const nameString = [
+    props.token.name ?? 'Unnamed token',
+    props.token.symbol && props.jointSymbol && `(${ props.token.symbol })`,
+  ].filter(Boolean).join(' ');
 
   return (
-    <TruncatedTextTooltip label={ name }>
+    <TruncatedTextTooltip label={ nameString }>
       <Skeleton
         isLoaded={ !props.isLoading }
         display="inline-block"
@@ -72,18 +76,18 @@ const Content = chakra((props: ContentProps) => {
         textOverflow="ellipsis"
         height="fit-content"
       >
-        { name }
+        { nameString }
       </Skeleton>
     </TruncatedTextTooltip>
   );
 });
 
-type SymbolProps = Pick<EntityProps, 'token' | 'isLoading' | 'noSymbol'>;
+type SymbolProps = Pick<EntityProps, 'token' | 'isLoading' | 'noSymbol' | 'jointSymbol'>;
 
 const Symbol = (props: SymbolProps) => {
   const symbol = props.token.symbol;
 
-  if (!symbol || props.noSymbol) {
+  if (!symbol || props.noSymbol || props.jointSymbol) {
     return null;
   }
 
@@ -129,6 +133,7 @@ const Container = EntityBase.Container;
 export interface EntityProps extends EntityBase.EntityBaseProps {
   token: Pick<TokenInfo, 'address' | 'icon_url' | 'name' | 'symbol'>;
   noSymbol?: boolean;
+  jointSymbol?: boolean;
 }
 
 const TokenEntity = (props: EntityProps) => {

ui/shared/entities/token/TokenEntityWithAddressFilter.tsx

+import { chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import { route } from 'nextjs-routes';
+
+import * as TokenEntity from './TokenEntity';
+
+interface Props extends TokenEntity.EntityProps {
+  addressHash: string;
+}
+
+const TokenEntityWithAddressFilter = (props: Props) => {
+  const defaultHref = route({
+    pathname: '/address/[hash]',
+    query: {
+      ...props.query,
+      hash: props.addressHash,
+      tab: 'token_transfers',
+      token: props.token.address,
+      scroll_to_tabs: 'true',
+    },
+  });
+
+  return (
+    <TokenEntity.default { ...props } href={ props.href ?? defaultHref }/>
+  );
+};
+
+export default chakra(TokenEntityWithAddressFilter);

ui/token/TokenTransfer/TokenTransferTableItem.tsx

@@ -59,6 +59,7 @@ const TokenTransferTableItem = ({
           isLoading={ isLoading }
           truncation="constant"
           tokenHash={ token.address }
+          my="5px"
         />
       </Td>
       <Td px={ 0 }>
@@ -72,6 +73,7 @@ const TokenTransferTableItem = ({
           isLoading={ isLoading }
           truncation="constant"
           tokenHash={ token.address }
+          my="5px"
         />
       </Td>
       { (token.type === 'ERC-721' || token.type === 'ERC-1155') && (

ui/tokens/TokensListItem.tsx

@@ -5,11 +5,10 @@ import React from 'react';
 import type { TokenInfo } from 'types/api/token';
 
 import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet';
-import AddressLink from 'ui/shared/address/AddressLink';
 import Tag from 'ui/shared/chakra/Tag';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
-import TokenLogo from 'ui/shared/TokenLogo';
 
 type Props = {
   token: TokenInfo;
@@ -31,14 +30,10 @@ const TokensTableItem = ({
     address,
     exchange_rate: exchangeRate,
     type,
-    name,
-    symbol,
     holders,
     circulating_market_cap: marketCap,
   } = token;
 
-  const tokenString = [ name, symbol && `(${ symbol })` ].filter(Boolean).join(' ');
-
   return (
     <ListItemMobile rowGap={ 3 }>
       <Grid
@@ -46,11 +41,16 @@ const TokensTableItem = ({
         gridTemplateColumns="minmax(0, 1fr)"
       >
         <GridItem display="flex">
-          <Flex overflow="hidden" mr={ 3 } alignItems="center">
-            <TokenLogo data={ token } boxSize={ 6 } mr={ 2 } isLoading={ isLoading }/>
-            <AddressLink fontSize="sm" fontWeight="700" hash={ address } type="token" alias={ tokenString } isLoading={ isLoading } mr={ 3 }/>
-            <Tag flexShrink={ 0 } isLoading={ isLoading }>{ type }</Tag>
-          </Flex>
+          <TokenEntity
+            token={ token }
+            isLoading={ isLoading }
+            jointSymbol
+            noCopy
+            w="auto"
+            fontSize="sm"
+            fontWeight="700"
+          />
+          <Tag flexShrink={ 0 } isLoading={ isLoading } ml={ 3 }>{ type }</Tag>
           <Skeleton isLoaded={ !isLoading } fontSize="sm" ml="auto" color="text_secondary" minW="24px" textAlign="right" lineHeight={ 6 }>
             <span>{ (page - 1) * PAGE_SIZE + index + 1 }</span>
           </Skeleton>

ui/tokens/TokensTableItem.tsx

@@ -5,11 +5,10 @@ import React from 'react';
 import type { TokenInfo } from 'types/api/token';
 
 import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet';
-import AddressLink from 'ui/shared/address/AddressLink';
 import Tag from 'ui/shared/chakra/Tag';
 import type { EntityProps as AddressEntityProps } from 'ui/shared/entities/address/AddressEntity';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
-import TokenLogo from 'ui/shared/TokenLogo';
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 
 type Props = {
   token: TokenInfo;
@@ -31,13 +30,10 @@ const TokensTableItem = ({
     address,
     exchange_rate: exchangeRate,
     type,
-    name,
-    symbol,
     holders,
     circulating_market_cap: marketCap,
   } = token;
 
-  const tokenString = [ name, symbol && `(${ symbol })` ].filter(Boolean).join(' ');
   const tokenAddress: AddressEntityProps['address'] = {
     hash: address,
     name: '',
@@ -53,7 +49,7 @@ const TokensTableItem = ({
           <Skeleton
             isLoaded={ !isLoading }
             fontSize="sm"
-            lineHeight="24px"
+            lineHeight="20px"
             fontWeight={ 600 }
             mr={ 3 }
             minW="28px"
@@ -61,10 +57,14 @@ const TokensTableItem = ({
             { (page - 1) * PAGE_SIZE + index + 1 }
           </Skeleton>
           <Box overflow="hidden">
-            <Flex alignItems="center">
-              <TokenLogo data={ token } boxSize={ 6 } mr={ 2 } isLoading={ isLoading }/>
-              <AddressLink fontSize="sm" fontWeight="700" hash={ address } type="token" alias={ tokenString } isLoading={ isLoading }/>
-            </Flex>
+            <TokenEntity
+              token={ token }
+              isLoading={ isLoading }
+              jointSymbol
+              noCopy
+              fontSize="sm"
+              fontWeight="700"
+            />
             <Box ml={ 8 } mt={ 2 }>
               <Flex>
                 <AddressEntity

ui/watchlist/WatchlistTable/WatchListAddressItem.tsx

@@ -12,7 +12,7 @@ import { nbsp } from 'lib/html-entities';
 import Icon from 'ui/shared/chakra/Icon';
 import CurrencyValue from 'ui/shared/CurrencyValue';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
-import TokenLogo from 'ui/shared/TokenLogo';
+import * as TokenEntity from 'ui/shared/entities/token/TokenEntity';
 
 const WatchListAddressItem = ({ item, isLoading }: { item: WatchlistAddress; isLoading?: boolean }) => {
   const infoItemsPaddingLeft = { base: 1, lg: 8 };
@@ -20,6 +20,8 @@ const WatchListAddressItem = ({ item, isLoading }: { item: WatchlistAddress; isL
   const nativeTokenData = React.useMemo(() => ({
     name: config.chain.currency.name || '',
     icon_url: '',
+    symbol: '',
+    address: '',
   }), [ ]);
 
   const { usdBn: usdNative } = getCurrencyValue({ value: item.address_balance, accuracy: 2, accuracyUsd: 2, exchangeRate: item.exchange_rate });
@@ -33,11 +35,8 @@ const WatchListAddressItem = ({ item, isLoading }: { item: WatchlistAddress; isL
         py="2px"
       />
       <Flex fontSize="sm" pl={ infoItemsPaddingLeft } flexWrap="wrap" alignItems="center" rowGap={ 1 }>
-        <TokenLogo
-          data={ nativeTokenData }
-          boxSize={ 5 }
-          borderRadius="sm"
-          mr={ 2 }
+        <TokenEntity.Icon
+          token={ nativeTokenData }
           isLoading={ isLoading }
         />
         <Skeleton isLoaded={ !isLoading } whiteSpace="pre" display="inline-flex">