add token icon url

mocks/tokens/tokenInfo.ts

@@ -9,6 +9,7 @@ export const tokenInfo: TokenInfo = {
   symbol: 'ARIA',
   type: 'ERC-20',
   total_supply: '1235',
+  icon_url: null,
 };
 
 export const tokenCounters: TokenCounters = {
@@ -25,6 +26,7 @@ export const tokenInfoERC20a: TokenInfo = {
   symbol: 'HyFi',
   total_supply: '369000000000000000000000000',
   type: 'ERC-20',
+  icon_url: null,
 };
 
 export const tokenInfoERC20b: TokenInfo = {
@@ -36,6 +38,7 @@ export const tokenInfoERC20b: TokenInfo = {
   symbol: 'USDC',
   total_supply: '900000000000000000000000000',
   type: 'ERC-20',
+  icon_url: null,
 };
 
 export const tokenInfoERC20c: TokenInfo = {
@@ -47,6 +50,7 @@ export const tokenInfoERC20c: TokenInfo = {
   symbol: 'ETH',
   total_supply: '1000000000000000000000000',
   type: 'ERC-20',
+  icon_url: null,
 };
 
 export const tokenInfoERC20d: TokenInfo = {
@@ -58,6 +62,7 @@ export const tokenInfoERC20d: TokenInfo = {
   symbol: 'ZETA',
   total_supply: '2100000000000000000000000000',
   type: 'ERC-20',
+  icon_url: null,
 };
 
 export const tokenInfoERC20LongSymbol: TokenInfo = {
@@ -69,6 +74,7 @@ export const tokenInfoERC20LongSymbol: TokenInfo = {
   symbol: 'ipfs://QmUpFUfVKDCWeZQk5pvDFUxnpQP9N6eLSHhNUy49T1JVtY',
   total_supply: '2100000000000000000000000000',
   type: 'ERC-20',
+  icon_url: null,
 };
 
 export const tokenInfoERC721a: TokenInfo = {
@@ -80,6 +86,7 @@ export const tokenInfoERC721a: TokenInfo = {
   symbol: 'HYFI_ATHENA',
   total_supply: '105',
   type: 'ERC-721',
+  icon_url: null,
 };
 
 export const tokenInfoERC721b: TokenInfo = {
@@ -91,6 +98,7 @@ export const tokenInfoERC721b: TokenInfo = {
   symbol: 'WOWG',
   total_supply: null,
   type: 'ERC-721',
+  icon_url: null,
 };
 
 export const tokenInfoERC721c: TokenInfo = {
@@ -102,6 +110,7 @@ export const tokenInfoERC721c: TokenInfo = {
   symbol: 'PUMA',
   total_supply: null,
   type: 'ERC-721',
+  icon_url: null,
 };
 
 export const tokenInfoERC721LongSymbol: TokenInfo = {
@@ -113,6 +122,7 @@ export const tokenInfoERC721LongSymbol: TokenInfo = {
   symbol: 'ipfs://QmUpFUfVKDCWeZQk5pvDFUxnpQP9N6eLSHhNUy49T1JVtY',
   total_supply: null,
   type: 'ERC-721',
+  icon_url: null,
 };
 
 export const tokenInfoERC1155a: TokenInfo = {
@@ -124,6 +134,7 @@ export const tokenInfoERC1155a: TokenInfo = {
   symbol: 'HYFI_MEMBERSHIP',
   total_supply: '482',
   type: 'ERC-1155',
+  icon_url: null,
 };
 
 export const tokenInfoERC1155b: TokenInfo = {
@@ -135,6 +146,7 @@ export const tokenInfoERC1155b: TokenInfo = {
   symbol: 'WVC',
   total_supply: '4943',
   type: 'ERC-1155',
+  icon_url: null,
 };
 
 export const tokenInfoERC1155WithoutName: TokenInfo = {
@@ -146,4 +158,5 @@ export const tokenInfoERC1155WithoutName: TokenInfo = {
   symbol: null,
   total_supply: '482',
   type: 'ERC-1155',
+  icon_url: null,
 };

mocks/tokens/tokenTransfer.ts

@@ -30,6 +30,7 @@ export const erc20: TokenTransfer = {
     symbol: 'ARIA',
     type: 'ERC-20',
     total_supply: '0',
+    icon_url: null,
   },
   total: {
     decimals: '18',
@@ -73,6 +74,7 @@ export const erc721: TokenTransfer = {
     symbol: 'AriaSA',
     type: 'ERC-721',
     total_supply: '0',
+    icon_url: null,
   },
   total: {
     token_id: '875879856',
@@ -115,6 +117,7 @@ export const erc1155A: TokenTransfer = {
     symbol: 'MY_SYMBOL_IS_VERY_LONG',
     type: 'ERC-1155',
     total_supply: '0',
+    icon_url: null,
   },
   total: {
     token_id: '123',

mocks/txs/state.ts

@@ -31,6 +31,7 @@ export const mintToken: TxStateChange = {
     symbol: 'nMOONBIRD',
     total_supply: '10645',
     type: 'ERC-721',
+    icon_url: null,
   },
   type: 'token',
 };
@@ -66,6 +67,7 @@ export const receiveMintedToken: TxStateChange = {
     symbol: 'nMOONBIRD',
     total_supply: '10645',
     type: 'ERC-721',
+    icon_url: null,
   },
   type: 'token',
 };

stubs/token.ts

@@ -14,6 +14,7 @@ export const TOKEN_INFO_ERC_20: TokenInfo<'ERC-20'> = {
   symbol: 'STUB',
   total_supply: '6000000000000000000',
   type: 'ERC-20',
+  icon_url: null,
 };
 
 export const TOKEN_INFO_ERC_721: TokenInfo<'ERC-721'> = {

types/api/token.ts

@@ -12,6 +12,7 @@ export interface TokenInfo<T extends TokenType = TokenType> {
   holders: string | null;
   exchange_rate: string | null;
   total_supply: string | null;
+  icon_url: string | null;
 }
 
 export interface TokenCounters {

ui/address/AddressTokenTransfers.tsx

@@ -194,11 +194,17 @@ const AddressTokenTransfers = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLD
     </>
   ) : null;
 
+  const tokenData = React.useMemo(() => ({
+    address: tokenFilter || '',
+    name: '',
+    icon_url: '',
+  }), [ 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 hash={ tokenFilter } boxSize={ 6 } mr={ 2 }/>
+        <TokenLogo data={ tokenData } boxSize={ 6 } mr={ 2 }/>
         { isMobile ? <HashStringShorten hash={ tokenFilter }/> : tokenFilter }
         <Tooltip label="Reset filter">
           <Flex>

ui/address/details/AddressBalance.tsx

@@ -63,6 +63,12 @@ const AddressBalance = ({ data }: Props) => {
     handler: handleNewCoinBalanceMessage,
   });
 
+  const tokenData = React.useMemo(() => ({
+    address: appConfig.network.currency.address || '',
+    name: appConfig.network.currency.name || '',
+    icon_url: '',
+  }), [ ]);
+
   return (
     <DetailsInfoItem
       title="Balance"
@@ -71,8 +77,7 @@ const AddressBalance = ({ data }: Props) => {
       alignItems="flex-start"
     >
       <TokenLogo
-        hash={ appConfig.network.currency.address }
-        name={ appConfig.network.currency.name }
+        data={ tokenData }
         boxSize={ 5 }
         mr={ 2 }
         fontSize="sm"

ui/address/tokenSelect/TokenSelectItem.tsx

@@ -65,7 +65,7 @@ const TokenSelectItem = ({ data }: Props) => {
       href={ url }
     >
       <Flex alignItems="center" w="100%">
-        <TokenLogo hash={ data.token.address } name={ data.token.name } boxSize={ 6 }/>
+        <TokenLogo data={ data.token } boxSize={ 6 }/>
         <Text fontWeight={ 700 } ml={ 2 }>{ data.token.name || <HashStringShorten hash={ data.token.address }/> }</Text>
         { data.usd && <Text fontWeight={ 700 } ml="auto">${ data.usd.toFormat(2) }</Text> }
       </Flex>

ui/address/tokens/ERC20TokensListItem.tsx

@@ -24,7 +24,7 @@ const ERC20TokensListItem = ({ token, value }: Props) => {
   return (
     <ListItemMobile rowGap={ 2 }>
       <Flex alignItems="center" width="100%">
-        <TokenLogo hash={ token.address } name={ token.name } boxSize={ 6 } mr={ 2 }/>
+        <TokenLogo data={ token } boxSize={ 6 } mr={ 2 }/>
         <AddressLink fontWeight="700" hash={ token.address } type="token" alias={ tokenString }/>
       </Flex>
       <Flex alignItems="center" pl={ 8 }>

ui/address/tokens/ERC20TokensTableItem.tsx

@@ -27,7 +27,7 @@ const ERC20TokensTableItem = ({
     <Tr>
       <Td verticalAlign="middle">
         <Flex alignItems="center">
-          <TokenLogo hash={ token.address } name={ token.name } boxSize={ 6 } mr={ 2 }/>
+          <TokenLogo data={ token } boxSize={ 6 } mr={ 2 }/>
           <AddressLink fontWeight="700" hash={ token.address } type="token" alias={ tokenString }/>
         </Flex>
       </Td>

ui/address/tokens/ERC721TokensListItem.tsx

@@ -18,7 +18,7 @@ const ERC721TokensListItem = ({ token, value }: Props) => {
   return (
     <ListItemMobile rowGap={ 2 }>
       <Flex alignItems="center" width="100%">
-        <TokenLogo hash={ token.address } name={ token.name } boxSize={ 6 } mr={ 2 }/>
+        <TokenLogo data={ token } boxSize={ 6 } mr={ 2 }/>
         <AddressLink fontWeight="700" hash={ token.address } type="token" alias={ tokenString }/>
       </Flex>
       <Flex alignItems="center" pl={ 8 }>

ui/address/tokens/ERC721TokensTableItem.tsx

@@ -21,7 +21,7 @@ const ERC721TokensTableItem = ({
     <Tr>
       <Td verticalAlign="middle">
         <Flex alignItems="center">
-          <TokenLogo hash={ token.address } name={ token.name } boxSize={ 6 } mr={ 2 }/>
+          <TokenLogo data={ token } boxSize={ 6 } mr={ 2 }/>
           <AddressLink fontWeight="700" hash={ token.address } type="token" alias={ tokenString }/>
         </Flex>
       </Td>

ui/address/tokens/NFTItem.tsx

@@ -49,7 +49,7 @@ const NFTItem = ({ token, token_id: tokenId, token_instance: tokenInstance }: Pr
       ) }
       { token.name && (
         <Flex alignItems="center">
-          <TokenLogo hash={ token.address } name={ token.name } boxSize={ 6 } ml={ 1 } mr={ 1 }/>
+          <TokenLogo data={ token } boxSize={ 6 } ml={ 1 } mr={ 1 }/>
           <TruncatedTextTooltip label={ token.name }>
             <Text variant="secondary" overflow="hidden" whiteSpace="nowrap" textOverflow="ellipsis">{ token.name }</Text>
           </TruncatedTextTooltip>

ui/home/indicators/utils/indicators.tsx

@@ -27,11 +27,17 @@ const dailyTxsIndicator: TChainIndicator<'homepage_chart_txs'> = {
   },
 };
 
+const nativeTokenData = {
+  address: appConfig.network.currency.address || '',
+  name: appConfig.network.currency.name || '',
+  icon_url: '',
+};
+
 const coinPriceIndicator: TChainIndicator<'homepage_chart_market'> = {
   id: 'coin_price',
   title: `${ appConfig.network.currency.symbol } price`,
   value: (stats) => '$' + Number(stats.coin_price).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 }),
-  icon: <TokenLogo hash={ appConfig.network.currency.address || '' } name={ appConfig.network.currency.name } boxSize={ 6 }/>,
+  icon: <TokenLogo data={ nativeTokenData } boxSize={ 6 }/>,
   hint: `${ appConfig.network.currency.symbol } token daily price in USD.`,
   api: {
     resourceName: 'homepage_chart_market',

ui/pages/Token.tsx

@@ -245,7 +245,7 @@ const TokenPageContent = () => {
         text={ `${ tokenQuery.data?.name || 'Unnamed' }${ tokenSymbolText } token` }
         backLink={ backLink }
         additionalsLeft={ (
-          <TokenLogo hash={ tokenQuery.data?.address } name={ tokenQuery.data?.name } boxSize={ 6 } isLoading={ tokenQuery.isPlaceholderData }/>
+          <TokenLogo data={ tokenQuery.data } boxSize={ 6 } isLoading={ tokenQuery.isPlaceholderData }/>
         ) }
         additionalsRight={ tagsNode }
         afterTitle={

ui/shared/TokenLogo.tsx

 import { Image, chakra, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
+import type { TokenInfo } from 'types/api/token';
+
 import appConfig from 'configs/app/config';
 import TokenLogoPlaceholder from 'ui/shared/TokenLogoPlaceholder';
 
-interface Props {
-  hash?: string;
-  name?: string | null;
+export interface Props {
+  data?: Pick<TokenInfo, 'address' | 'icon_url' | 'name'>;
   className?: string;
   isLoading?: boolean;
 }
 
-const TokenLogo = ({ hash, name, className, isLoading }: Props) => {
+const TokenLogo = ({ className, isLoading, data }: Props) => {
 
   if (isLoading) {
     return <Skeleton className={ className } borderRadius="base"/>;
   }
 
-  const logoSrc = appConfig.network.assetsPathname && hash ? [
-    'https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/',
-    appConfig.network.assetsPathname,
-    '/assets/',
-    hash,
-    '/logo.png',
-  ].join('') : undefined;
+  const logoSrc = (() => {
+    if (data?.icon_url) {
+      return data.icon_url;
+    }
+
+    if (appConfig.network.assetsPathname && data?.address) {
+      return [
+        'https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/',
+        appConfig.network.assetsPathname,
+        '/assets/',
+        data.address,
+        '/logo.png',
+      ].join('');
+    }
+  })();
 
   return (
     <Image
       borderRadius="base"
       className={ className }
       src={ logoSrc }
-      alt={ `${ name || 'token' } logo` }
+      alt={ `${ data?.name || 'token' } logo` }
       fallback={ <TokenLogoPlaceholder className={ className }/> }
     />
   );

ui/shared/TokenSnippet/TokenSnippet.pw.tsx

 import { test, expect, devices } from '@playwright/experimental-ct-react';
 import React from 'react';
 
+import type { TokenInfo } from 'types/api/token';
+
 import TestApp from 'playwright/TestApp';
 
 import TokenSnippet from './TokenSnippet';
 
-const API_URL = 'https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0x363574E6C5C71c343d7348093D84320c76d5Dd29/logo.png';
-
 test.use(devices['iPhone 13 Pro']);
 
 test('unnamed', async({ mount }) => {
+  const data: TokenInfo = {
+    address: '0x363574E6C5C71c343d7348093D84320c76d5Dd29',
+    type: 'ERC-20',
+    symbol: 'xDAI',
+    name: null,
+    decimals: '18',
+    holders: '1',
+    exchange_rate: null,
+    total_supply: null,
+    icon_url: null,
+  };
   const component = await mount(
     <TestApp>
-      <TokenSnippet hash="0x363574E6C5C71c343d7348093D84320c76d5Dd29" symbol="xDAI"/>
+      <TokenSnippet data={ data }/>
     </TestApp>,
   );
 
@@ -20,16 +31,40 @@ test('unnamed', async({ mount }) => {
 });
 
 test('named', async({ mount }) => {
+  const data: TokenInfo = {
+    address: '0x363574E6C5C71c343d7348093D84320c76d5Dd29',
+    type: 'ERC-20',
+    symbol: 'SHA',
+    name: 'Shavuha token',
+    decimals: '18',
+    holders: '1',
+    exchange_rate: null,
+    total_supply: null,
+    icon_url: null,
+  };
   const component = await mount(
     <TestApp>
-      <TokenSnippet hash="0x363574E6C5C71c343d7348093D84320c76d5Dd29" name="Shavuha token" symbol="SHA"/>
+      <TokenSnippet data={ data }/>
     </TestApp>,
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('with logo', async({ mount, page }) => {
+test('with logo and long symbol', async({ mount, page }) => {
+  const API_URL = 'https://example.com/logo.png';
+  const data: TokenInfo = {
+    address: '0x363574E6C5C71c343d7348093D84320c76d5Dd29',
+    type: 'ERC-20',
+    symbol: 'SHAAAAAAAAAAAAA',
+    name: null,
+    decimals: '18',
+    holders: '1',
+    exchange_rate: null,
+    total_supply: null,
+    icon_url: API_URL,
+  };
+
   await page.route(API_URL, (route) => {
     return route.fulfill({
       status: 200,
@@ -39,7 +74,7 @@ test('with logo', async({ mount, page }) => {
 
   const component = await mount(
     <TestApp>
-      <TokenSnippet hash="0x363574E6C5C71c343d7348093D84320c76d5Dd29"/>
+      <TokenSnippet data={ data }/>
     </TestApp>,
   );
 

ui/shared/TokenSnippet/TokenSnippet.tsx

 import { Flex, Text, chakra } from '@chakra-ui/react';
 import React from 'react';
 
+import type { TokenInfo } from 'types/api/token';
+
+import trimTokenSymbol from 'lib/token/trimTokenSymbol';
 import AddressLink from 'ui/shared/address/AddressLink';
 import TokenLogo from 'ui/shared/TokenLogo';
 
 interface Props {
-  symbol?: string | null;
-  hash: string;
-  name?: string | null;
+  data?: Pick<TokenInfo, 'address' | 'icon_url' | 'name' | 'symbol'>;
   className?: string;
   logoSize?: number;
   isDisabled?: boolean;
 }
 
-const TokenSnippet = ({ symbol, hash, name, className, logoSize = 6, isDisabled }: Props) => {
+const TokenSnippet = ({ data, className, logoSize = 6, isDisabled }: Props) => {
   return (
     <Flex className={ className } alignItems="center" columnGap={ 2 } w="100%">
-      <TokenLogo boxSize={ logoSize } hash={ hash } name={ name }/>
-      <AddressLink hash={ hash } alias={ name } type="token" isDisabled={ isDisabled }/>
-      { symbol && <Text variant="secondary">({ symbol })</Text> }
+      <TokenLogo boxSize={ logoSize } data={ data }/>
+      <AddressLink hash={ data?.address || '' } alias={ data?.name || 'Unnamed token' } type="token" isDisabled={ isDisabled }/>
+      { data?.symbol && <Text variant="secondary">({ trimTokenSymbol(data.symbol) })</Text> }
     </Flex>
   );
 };

ui/shared/TokenTransfer/TokenTransferListItem.tsx

@@ -52,7 +52,7 @@ const TokenTransferListItem = ({
     <ListItemMobile rowGap={ 3 } isAnimated>
       <Flex w="100%" justifyContent="space-between">
         <Flex flexWrap="wrap" rowGap={ 1 } mr={ showTxInfo && txHash ? 2 : 0 }>
-          <TokenSnippet hash={ token.address } w="auto" maxW="calc(100% - 140px)" name={ token.name || 'Unnamed token' }/>
+          <TokenSnippet data={ token } w="auto" maxW="calc(100% - 140px)"/>
           <Tag flexShrink={ 0 } ml={ 2 } mr={ 2 }>{ token.type }</Tag>
           <Tag colorScheme="orange">{ getTokenTransferTypeText(type) }</Tag>
         </Flex>

ui/shared/TokenTransfer/TokenTransferTableItem.tsx

@@ -45,7 +45,7 @@ const TokenTransferTableItem = ({
       ) }
       <Td>
         <Flex flexDir="column" alignItems="flex-start">
-          <TokenSnippet hash={ token.address } name={ token.name || 'Unnamed token' } lineHeight="30px"/>
+          <TokenSnippet data={ token } lineHeight="30px"/>
           <Tag mt={ 1 }>{ token.type }</Tag>
           <Tag colorScheme="orange" mt={ 2 }>{ getTokenTransferTypeText(type) }</Tag>
         </Flex>

ui/tokenInstance/TokenInstanceDetails.tsx

@@ -58,7 +58,7 @@ const TokenInstanceDetails = ({ data, scrollRef }: Props) => {
             title="Token"
             hint="Token name"
           >
-            <TokenSnippet hash={ data.token.address } name={ data.token.name }/>
+            <TokenSnippet data={ data.token }/>
           </DetailsInfoItem>
           { data.is_unique && data.owner && (
             <DetailsInfoItem

ui/tokens/TokensListItem.tsx

@@ -47,7 +47,7 @@ const TokensTableItem = ({
       >
         <GridItem display="flex">
           <Flex overflow="hidden" mr={ 3 } alignItems="center">
-            <TokenLogo hash={ address } name={ name } boxSize={ 6 } mr={ 2 }/>
+            <TokenLogo data={ token } boxSize={ 6 } mr={ 2 }/>
             <AddressLink fontSize="sm" fontWeight="700" hash={ address } type="token" alias={ tokenString }/>
             <Tag flexShrink={ 0 } ml={ 3 }>{ type }</Tag>
           </Flex>

ui/tokens/TokensTableItem.tsx

@@ -53,7 +53,7 @@ const TokensTableItem = ({
           </Text>
           <Box>
             <Flex alignItems="center">
-              <TokenLogo hash={ address } name={ name } boxSize={ 6 } mr={ 2 }/>
+              <TokenLogo data={ token } boxSize={ 6 } mr={ 2 }/>
               <AddressLink fontSize="sm" fontWeight="700" hash={ address } type="token" alias={ tokenString }/>
             </Flex>
             <Flex alignItems="center" width="136px" justifyContent="space-between" ml={ 8 } mt={ 2 }>

ui/tx/NftTokenTransferSnippet.tsx

@@ -2,22 +2,22 @@ import { Flex, Link, Text, Icon, Box } from '@chakra-ui/react';
 import { route } from 'nextjs-routes';
 import React from 'react';
 
+import type { TokenInfo } from 'types/api/token';
+
 import nftIcon from 'icons/nft_shield.svg';
 import AddressLink from 'ui/shared/address/AddressLink';
 import HashStringShorten from 'ui/shared/HashStringShorten';
 import TokenSnippet from 'ui/shared/TokenSnippet/TokenSnippet';
 
 interface Props {
+  token: TokenInfo;
   value: string;
   tokenId: string;
-  hash: string;
-  name?: string | null;
-  symbol?: string | null;
 }
 
-const NftTokenTransferSnippet = ({ value, name, hash, symbol, tokenId }: Props) => {
+const NftTokenTransferSnippet = ({ value, token, tokenId }: Props) => {
   const num = value === '1' ? '' : value;
-  const url = route({ pathname: '/token/[hash]/instance/[id]', query: { hash: hash, id: tokenId } });
+  const url = route({ pathname: '/token/[hash]/instance/[id]', query: { hash: token.address, id: tokenId } });
 
   return (
     <Flex alignItems="center" columnGap={ 3 } rowGap={ 2 } flexWrap="wrap">
@@ -28,10 +28,10 @@ const NftTokenTransferSnippet = ({ value, name, hash, symbol, tokenId }: Props)
           { tokenId.length > 8 ? <HashStringShorten hash={ tokenId }/> : tokenId }
         </Link>
       </Box>
-      { name ? (
-        <TokenSnippet symbol={ symbol } hash={ hash } name={ name } w="auto" logoSize={ 5 } columnGap={ 1 }/>
+      { token.name ? (
+        <TokenSnippet data={ token } w="auto" logoSize={ 5 } columnGap={ 1 }/>
       ) : (
-        <AddressLink hash={ hash } truncation="constant" type="token"/>
+        <AddressLink hash={ token.address } truncation="constant" type="token"/>
       ) }
     </Flex>
   );

ui/tx/details/TxDetailsAction.tsx

@@ -7,7 +7,6 @@ import type { TxAction, TxActionGeneral } from 'types/api/txAction';
 
 import appConfig from 'configs/app/config';
 import uniswapIcon from 'icons/uniswap.svg';
-import trimTokenSymbol from 'lib/token/trimTokenSymbol';
 import AddressLink from 'ui/shared/address/AddressLink';
 import TokenSnippet from 'ui/shared/TokenSnippet/TokenSnippet';
 
@@ -39,6 +38,20 @@ const TxDetailsAction = ({ action }: Props) => {
       const amount0 = BigNumber(data.amount0).toFormat();
       const amount1 = BigNumber(data.amount1).toFormat();
       const [ text0, text1 ] = getActionText(type);
+      const token0 = {
+        address: data.symbol0 === 'Ether' ? appConfig.network.currency.address || '' : data.address0,
+        name: data.symbol0 === 'Ether' ? appConfig.network.currency.symbol || null : data.symbol0,
+        type: 'ERC-20',
+        symbol: null,
+        icon_url: null,
+      };
+      const token1 = {
+        address: data.symbol0 === 'Ether' ? appConfig.network.currency.address || '' : data.address1,
+        name: data.symbol0 === 'Ether' ? appConfig.network.currency.symbol || null : data.symbol1,
+        type: 'ERC-20',
+        symbol: null,
+        icon_url: null,
+      };
 
       return (
         <Flex flexWrap="wrap" columnGap={ 1 } rowGap={ 2 } alignItems="center">
@@ -46,8 +59,7 @@ const TxDetailsAction = ({ action }: Props) => {
 
           <chakra.span fontWeight={ 600 }>{ amount0 }</chakra.span>
           <TokenSnippet
-            name={ data.symbol0 === 'Ether' ? appConfig.network.currency.symbol : data.symbol0 }
-            hash={ data.symbol0 === 'Ether' ? appConfig.network.currency.address || '' : data.address1 }
+            data={ token0 }
             w="auto"
             columnGap={ 1 }
             logoSize={ 5 }
@@ -58,8 +70,7 @@ const TxDetailsAction = ({ action }: Props) => {
 
           <chakra.span fontWeight={ 600 }>{ amount1 }</chakra.span>
           <TokenSnippet
-            name={ data.symbol1 === 'Ether' ? appConfig.network.currency.symbol : data.symbol1 }
-            hash={ data.symbol1 === 'Ether' ? appConfig.network.currency.address || '' : data.address1 }
+            data={ token1 }
             w="auto"
             columnGap={ 1 }
             logoSize={ 5 }
@@ -76,14 +87,20 @@ const TxDetailsAction = ({ action }: Props) => {
     }
 
     case 'mint_nft' : {
+      const token = {
+        address: data.address,
+        name: data.name,
+        type: 'ERC-20',
+        symbol: null,
+        icon_url: null,
+      };
+
       return (
         <div>
           <Flex rowGap={ 2 } flexWrap="wrap" alignItems="center" whiteSpace="pre-wrap">
             <chakra.span>Mint of </chakra.span>
             <TokenSnippet
-              name={ data.name }
-              hash={ data.address }
-              symbol={ trimTokenSymbol(data.symbol) }
+              data={ token }
               w="auto"
               columnGap={ 1 }
               logoSize={ 5 }

ui/tx/details/TxDetailsTokenTransfer.tsx

@@ -5,7 +5,6 @@ import type { TokenTransfer as TTokenTransfer, Erc20TotalPayload, Erc721TotalPay
 
 import rightArrowIcon from 'icons/arrows/east.svg';
 import { space } from 'lib/html-entities';
-import trimTokenSymbol from 'lib/token/trimTokenSymbol';
 import AddressLink from 'ui/shared/address/AddressLink';
 import CurrencyValue from 'ui/shared/CurrencyValue';
 import TokenSnippet from 'ui/shared/TokenSnippet/TokenSnippet';
@@ -27,9 +26,7 @@ const TxDetailsTokenTransfer = ({ data }: Props) => {
               <CurrencyValue value={ total.value } exchangeRate={ data.token.exchange_rate } fontWeight={ 600 } decimals={ total.decimals }/>
             </Text>
             <TokenSnippet
-              symbol={ trimTokenSymbol(data.token.symbol) }
-              hash={ data.token.address }
-              name={ data.token.name }
+              data={ data.token }
               w="auto"
               flexGrow="1"
               columnGap={ 1 }
@@ -43,11 +40,9 @@ const TxDetailsTokenTransfer = ({ data }: Props) => {
         const total = data.total as Erc721TotalPayload;
         return (
           <NftTokenTransferSnippet
-            name={ data.token.name }
+            token={ data.token }
             tokenId={ total.token_id }
             value="1"
-            hash={ data.token.address }
-            symbol={ trimTokenSymbol(data.token.symbol) }
           />
         );
       }
@@ -56,12 +51,10 @@ const TxDetailsTokenTransfer = ({ data }: Props) => {
         const total = data.total as Erc1155TotalPayload;
         return (
           <NftTokenTransferSnippet
-            name={ data.token.name }
             key={ total.token_id }
+            token={ data.token }
             tokenId={ total.token_id }
             value={ total.value }
-            hash={ data.token.address }
-            symbol={ trimTokenSymbol(data.token.symbol) }
           />
         );
       }

ui/watchlist/WatchlistTable/WatchListAddressItem.tsx

@@ -14,14 +14,19 @@ import TokenLogo from 'ui/shared/TokenLogo';
 const WatchListAddressItem = ({ item }: {item: TWatchlistItem}) => {
   const infoItemsPaddingLeft = { base: 1, lg: 8 };
 
+  const nativeTokenData = React.useMemo(() => ({
+    address: appConfig.network.currency.address || '',
+    name: appConfig.network.currency.name || '',
+    icon_url: '',
+  }), [ ]);
+
   return (
     <VStack spacing={ 2 } align="stretch" fontWeight={ 500 }>
       <AddressSnippet address={ item.address }/>
       <Flex fontSize="sm" h={ 6 } pl={ infoItemsPaddingLeft } flexWrap="wrap" alignItems="center" rowGap={ 1 }>
         { appConfig.network.currency.address && (
           <TokenLogo
-            hash={ appConfig.network.currency.address }
-            name={ appConfig.network.name }
+            data={ nativeTokenData }
             boxSize={ 4 }
             borderRadius="sm"
             mr={ 2 }