remove TokenSnippet

ui/address/AddressDetails.tsx

@@ -5,8 +5,6 @@ import React from 'react';
 
 import type { Address as TAddress } from 'types/api/address';
 
-import { route } from 'nextjs-routes';
-
 import type { ResourceError } from 'lib/api/resources';
 import useApiQuery from 'lib/api/useApiQuery';
 import getQueryParamString from 'lib/router/getQueryParamString';
@@ -19,8 +17,6 @@ import DetailsSponsoredItem from 'ui/shared/DetailsSponsoredItem';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
-import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
-import LinkInternal from 'ui/shared/LinkInternal';
 
 import AddressBalance from './details/AddressBalance';
 import AddressNameInfo from './details/AddressNameInfo';
@@ -118,14 +114,12 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
             hint="Implementation address of the proxy contract"
             columnGap={ 1 }
           >
-            <LinkInternal href={ route({ pathname: '/address/[hash]', query: { hash: data.implementation_address } }) } overflow="hidden">
-              { data.implementation_name || <HashStringShortenDynamic hash={ data.implementation_address }/> }
-            </LinkInternal>
-            { data.implementation_name && (
-              <Text variant="secondary" overflow="hidden">
-                <HashStringShortenDynamic hash={ `(${ data.implementation_address })` }/>
-              </Text>
-            ) }
+            <AddressEntity
+              address={{ hash: data.implementation_address, name: data.implementation_name, is_contract: true }}
+              isLoading={ addressQuery.isPlaceholderData }
+              noIcon
+              noCopy
+            />
           </DetailsInfoItem>
         ) }
         <AddressBalance data={ data } isLoading={ addressQuery.isPlaceholderData }/>

ui/address/contract/ContractCode.tsx

@@ -105,9 +105,14 @@ const ContractCode = ({ addressHash, noSocket }: Props) => {
 
     const decoded = data.decoded_constructor_args
       .map(([ value, { name, type } ], index) => {
-        const valueEl = type === 'address' ?
-          <LinkInternal href={ route({ pathname: '/address/[hash]', query: { hash: value } }) }>{ value }</LinkInternal> :
-          <span>{ value }</span>;
+        const valueEl = type === 'address' ? (
+          <AddressEntity
+            address={{ hash: value }}
+            noIcon
+            display="inline-flex"
+            maxW="100%"
+          />
+        ) : <span>{ value }</span>;
         return (
           <Box key={ index }>
             <span>Arg [{ index }] { name || '' } ({ type }): </span>

ui/address/details/AddressNameInfo.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import type { Address } from 'types/api/address';
 
 import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
-import TokenSnippet from 'ui/shared/TokenSnippet/TokenSnippet';
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 
 interface Props {
   data: Pick<Address, 'name' | 'token' | 'is_contract'>;
@@ -19,7 +19,12 @@ const AddressNameInfo = ({ data, isLoading }: Props) => {
         hint="Token name and symbol"
         isLoading={ isLoading }
       >
-        <TokenSnippet data={ data.token } isLoading={ isLoading } hideIcon/>
+        <TokenEntity
+          token={ data.token }
+          isLoading={ isLoading }
+          noIcon
+          noCopy
+        />
       </DetailsInfoItem>
     );
   }

ui/address/tokenSelect/TokenSelectItem.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 
 import { route } from 'nextjs-routes';
 
-import TokenSnippet from 'ui/shared/TokenSnippet/TokenSnippet';
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import TruncatedValue from 'ui/shared/TruncatedValue';
 
 import type { TokenEnhancedData } from '../utils/tokenUtils';
@@ -68,7 +68,13 @@ const TokenSelectItem = ({ data }: Props) => {
       href={ url }
     >
       <Flex alignItems="center" w="100%" overflow="hidden">
-        <TokenSnippet data={ data.token } hideSymbol fontWeight={ 700 } isDisabled/>
+        <TokenEntity
+          token={ data.token }
+          noSymbol
+          noCopy
+          noLink
+          fontWeight={ 700 }
+        />
         { data.usd && <Text fontWeight={ 700 } ml="auto">${ data.usd.toFormat(2) }</Text> }
       </Flex>
       <Flex alignItems="center" justifyContent="space-between" w="100%" whiteSpace="nowrap">

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';
-
-test.use(devices['iPhone 13 Pro']);
-
-test('unnamed', async({ mount }) => {
-  const data: TokenInfo = {
-    address: '0x363574E6C5C71c343d7348093D84320c76d5Dd29',
-    circulating_market_cap: '117629601.61913824',
-    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 data={ data }/>
-    </TestApp>,
-  );
-
-  await expect(component).toHaveScreenshot();
-});
-
-test('named', async({ mount }) => {
-  const data: TokenInfo = {
-    address: '0x363574E6C5C71c343d7348093D84320c76d5Dd29',
-    circulating_market_cap: '117629601.61913824',
-    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 data={ data }/>
-    </TestApp>,
-  );
-
-  await expect(component).toHaveScreenshot();
-});
-
-test('with logo and long symbol', async({ mount, page }) => {
-  const API_URL = 'https://example.com/logo.png';
-  const data: TokenInfo = {
-    address: '0x363574E6C5C71c343d7348093D84320c76d5Dd29',
-    circulating_market_cap: '117629601.61913824',
-    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,
-      path: './playwright/mocks/image_s.jpg',
-    });
-  });
-
-  const component = await mount(
-    <TestApp>
-      <TokenSnippet data={ data }/>
-    </TestApp>,
-  );
-
-  await expect(component).toHaveScreenshot();
-});

ui/shared/TokenSnippet/TokenSnippet.tsx

-import type { StyleProps } from '@chakra-ui/react';
-import { Flex, chakra, Skeleton, shouldForwardProp } from '@chakra-ui/react';
-import React from 'react';
-
-import type { TokenInfo } from 'types/api/token';
-
-import AddressLink from 'ui/shared/address/AddressLink';
-import TokenLogo from 'ui/shared/TokenLogo';
-import TruncatedValue from 'ui/shared/TruncatedValue';
-
-interface Props {
-  data?: Pick<TokenInfo, 'address' | 'icon_url' | 'name' | 'symbol'>;
-  className?: string;
-  logoSize?: number;
-  isDisabled?: boolean;
-  isLoading?: boolean;
-  hideSymbol?: boolean;
-  hideIcon?: boolean;
-  maxW: StyleProps['maxW'];
-}
-
-/**
- * @deprecated use `ui/shared/entities/token/**` instead
- */
-const TokenSnippet = ({ data, className, logoSize = 6, isDisabled, hideSymbol, hideIcon, isLoading, maxW }: Props) => {
-
-  const withSymbol = data && data.symbol && !hideSymbol;
-  const columnGap = 2;
-
-  return (
-    <Flex className={ className } alignItems="center" columnGap={ columnGap } w="100%" overflow="hidden">
-      { !hideIcon && <TokenLogo boxSize={ logoSize } data={ data } isLoading={ isLoading }/> }
-      <AddressLink
-        flexShrink={ 0 }
-        hash={ data?.address || '' }
-        alias={ data?.name || 'Unnamed token' }
-        type="token"
-        isDisabled={ isDisabled }
-        isLoading={ isLoading }
-        maxW={ withSymbol ?
-          `calc(80% - ${ (logoSize + columnGap * 2) * 4 }px)` :
-          `calc(${ maxW || '100%' } - ${ (logoSize + columnGap) * 4 }px)`
-        }
-        overflow="hidden"
-        textOverflow="ellipsis"
-      />
-      { withSymbol && (
-        <Skeleton isLoaded={ !isLoading } color="text_secondary" maxW="20%" display="flex">
-          <div>(</div>
-          <TruncatedValue value={ data.symbol } display="block" wordBreak="break-all"/>
-          <div>)</div>
-        </Skeleton>
-      ) }
-    </Flex>
-  );
-};
-
-export default chakra(TokenSnippet, {
-  shouldForwardProp: (prop) => {
-    const isChakraProp = !shouldForwardProp(prop);
-
-    if (isChakraProp && prop !== 'maxW') {
-      return false;
-    }
-
-    return true;
-  },
-});

ui/shared/TokenTransfer/TokenTransferListItem.tsx

@@ -9,10 +9,10 @@ import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import Icon from 'ui/shared/chakra/Icon';
 import Tag from 'ui/shared/chakra/Tag';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import InOutTag from 'ui/shared/InOutTag';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
-import TokenSnippet from 'ui/shared/TokenSnippet/TokenSnippet';
 import { getTokenTransferTypeText } from 'ui/shared/TokenTransfer/helpers';
 import TokenTransferNft from 'ui/shared/TokenTransfer/TokenTransferNft';
 import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo';
@@ -52,7 +52,13 @@ const TokenTransferListItem = ({
     <ListItemMobile rowGap={ 3 } isAnimated>
       <Flex w="100%" justifyContent="space-between">
         <Flex flexWrap="wrap" rowGap={ 1 } mr={ showTxInfo && txHash ? 2 : 0 } columnGap={ 2 } overflow="hidden">
-          <TokenSnippet data={ token } w="auto" hideSymbol isLoading={ isLoading }/>
+          <TokenEntity
+            token={ token }
+            isLoading={ isLoading }
+            noSymbol
+            noCopy
+            w="auto"
+          />
           <Tag flexShrink={ 0 } isLoading={ isLoading }>{ token.type }</Tag>
           <Tag colorScheme="orange" isLoading={ isLoading }>{ getTokenTransferTypeText(type) }</Tag>
         </Flex>

ui/shared/TokenTransfer/TokenTransferTableItem.tsx

@@ -7,9 +7,9 @@ import type { TokenTransfer } from 'types/api/tokenTransfer';
 import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import Tag from 'ui/shared/chakra/Tag';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import InOutTag from 'ui/shared/InOutTag';
-import TokenSnippet from 'ui/shared/TokenSnippet/TokenSnippet';
 import { getTokenTransferTypeText } from 'ui/shared/TokenTransfer/helpers';
 import TokenTransferNft from 'ui/shared/TokenTransfer/TokenTransferNft';
 import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo';
@@ -47,7 +47,13 @@ const TokenTransferTableItem = ({
       ) }
       <Td>
         <Flex flexDir="column" alignItems="flex-start" my="3px" rowGap={ 2 }>
-          <TokenSnippet data={ token } isLoading={ isLoading } hideSymbol/>
+          <TokenEntity
+            token={ token }
+            isLoading={ isLoading }
+            noSymbol
+            noCopy
+            my="2px"
+          />
           <Tag isLoading={ isLoading }>{ token.type }</Tag>
           <Tag colorScheme="orange" isLoading={ isLoading }>{ getTokenTransferTypeText(type) }</Tag>
         </Flex>

ui/tokenInstance/TokenInstanceDetails.tsx

@@ -7,9 +7,9 @@ import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import DetailsSponsoredItem from 'ui/shared/DetailsSponsoredItem';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import NftMedia from 'ui/shared/nft/NftMedia';
-import TokenSnippet from 'ui/shared/TokenSnippet/TokenSnippet';
 
 import TokenInstanceCreatorAddress from './details/TokenInstanceCreatorAddress';
 import TokenInstanceDivider from './details/TokenInstanceDivider';
@@ -49,7 +49,11 @@ const TokenInstanceDetails = ({ data, scrollRef, isLoading }: Props) => {
             hint="Token name"
             isLoading={ isLoading }
           >
-            <TokenSnippet data={ data.token } isLoading={ isLoading }/>
+            <TokenEntity
+              token={ data.token }
+              isLoading={ isLoading }
+              noCopy
+            />
           </DetailsInfoItem>
           { data.is_unique && data.owner && (
             <DetailsInfoItem

ui/tx/NftTokenTransferSnippet.tsx

@@ -6,9 +6,8 @@ import type { TokenInfo } from 'types/api/token';
 import { route } from 'nextjs-routes';
 
 import nftIcon from 'icons/nft_shield.svg';
-import AddressLink from 'ui/shared/address/AddressLink';
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import HashStringShorten from 'ui/shared/HashStringShorten';
-import TokenSnippet from 'ui/shared/TokenSnippet/TokenSnippet';
 
 interface Props {
   token: TokenInfo;
@@ -29,11 +28,10 @@ const NftTokenTransferSnippet = ({ value, token, tokenId }: Props) => {
           { tokenId.length > 8 ? <HashStringShorten hash={ tokenId }/> : tokenId }
         </Link>
       </Box>
-      { token.name ? (
-        <TokenSnippet data={ token } logoSize={ 5 } columnGap={ 1 }/>
-      ) : (
-        <AddressLink hash={ token.address } truncation="constant" type="token"/>
-      ) }
+      <TokenEntity
+        token={ token }
+        noCopy
+      />
     </Flex>
   );
 };

ui/tx/details/TxDetailsAction.tsx

@@ -9,7 +9,7 @@ import { route } from 'nextjs-routes';
 import config from 'configs/app';
 import uniswapIcon from 'icons/uniswap.svg';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
-import TokenSnippet from 'ui/shared/TokenSnippet/TokenSnippet';
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 
 interface Props {
   action: TxAction;
@@ -58,34 +58,32 @@ const TxDetailsAction = ({ action }: Props) => {
         <Flex flexWrap="wrap" columnGap={ 1 } rowGap={ 2 } alignItems="center">
           <chakra.span color="text_secondary">{ text0 }: </chakra.span>
 
-          <chakra.span fontWeight={ 600 }>{ amount0 }</chakra.span>
-          <TokenSnippet
-            data={ token0 }
+          <chakra.span fontWeight={ 600 } mr={ 1 }>{ amount0 }</chakra.span>
+          <TokenEntity
+            token={ token0 }
+            noLink={ data.symbol0 === 'Ether' }
+            noCopy
+            noSymbol
             w="auto"
-            columnGap={ 1 }
-            logoSize={ 5 }
-            isDisabled={ data.symbol0 === 'Ether' }
-            hideSymbol
             maxW="200px"
             flexShrink={ 0 }
           />
 
           <chakra.span color="text_secondary">{ type === 'swap' ? 'For' : 'And' }: </chakra.span>
 
-          <chakra.span fontWeight={ 600 }>{ amount1 }</chakra.span>
-          <TokenSnippet
-            data={ token1 }
+          <chakra.span fontWeight={ 600 } mr={ 1 }>{ amount1 }</chakra.span>
+          <TokenEntity
+            token={ token1 }
+            noLink={ data.symbol1 === 'Ether' }
+            noCopy
+            noSymbol
             w="auto"
-            columnGap={ 1 }
-            logoSize={ 5 }
-            isDisabled={ data.symbol1 === 'Ether' }
-            hideSymbol
             maxW="200px"
             flexShrink={ 0 }
           />
 
-          <chakra.span color="text_secondary">{ text1 } </chakra.span>
-          <Flex columnGap={ 1 }>
+          <chakra.span color="text_secondary" mr={ 1 }>{ text1 }</chakra.span>
+          <Flex columnGap={ 2 }>
             <Icon as={ uniswapIcon } boxSize={ 5 } color="white" bgColor="#ff007a" borderRadius="full" p="2px"/>
             <chakra.span color="text_secondary">Uniswap V3</chakra.span>
           </Flex>
@@ -105,12 +103,11 @@ const TxDetailsAction = ({ action }: Props) => {
       return (
         <div>
           <Flex rowGap={ 2 } flexWrap="wrap" alignItems="center" whiteSpace="pre-wrap">
-            <chakra.span>Mint of </chakra.span>
-            <TokenSnippet
-              data={ token }
+            <chakra.span mr={ 2 }>Mint of</chakra.span>
+            <TokenEntity
+              token={ token }
+              noCopy
               w="auto"
-              columnGap={ 1 }
-              logoSize={ 5 }
               rowGap={ 2 }
             />
             <chakra.span> to </chakra.span>

ui/tx/details/TxDetailsTokenTransfer.tsx

@@ -7,7 +7,7 @@ import rightArrowIcon from 'icons/arrows/east.svg';
 import { space } from 'lib/html-entities';
 import CurrencyValue from 'ui/shared/CurrencyValue';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
-import TokenSnippet from 'ui/shared/TokenSnippet/TokenSnippet';
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import NftTokenTransferSnippet from 'ui/tx/NftTokenTransferSnippet';
 
 interface Props {
@@ -25,12 +25,11 @@ const TxDetailsTokenTransfer = ({ data }: Props) => {
             <Text fontWeight={ 500 } as="span">For:{ space }
               <CurrencyValue value={ total.value } exchangeRate={ data.token.exchange_rate } fontWeight={ 600 } decimals={ total.decimals }/>
             </Text>
-            <TokenSnippet
-              data={ data.token }
+            <TokenEntity
+              token={ data.token }
+              noCopy
               w="auto"
               flexGrow="1"
-              columnGap={ 1 }
-              logoSize={ 5 }
             />
           </Flex>
         );
@@ -63,7 +62,7 @@ const TxDetailsTokenTransfer = ({ data }: Props) => {
 
   return (
     <Flex
-      alignItems="center"
+      alignItems="flex-start"
       flexWrap={{ base: 'wrap', lg: 'nowrap' }}
       columnGap={ 3 }
       rowGap={ 3 }
@@ -72,7 +71,7 @@ const TxDetailsTokenTransfer = ({ data }: Props) => {
     >
       <Flex alignItems="center" fontWeight="500">
         <AddressEntity address={ data.from } truncation="constant" noIcon maxW="150px"/>
-        <Icon as={ rightArrowIcon } boxSize={ 6 } mx={ 2 } color="gray.500"/>
+        <Icon as={ rightArrowIcon } boxSize={ 5 } mx={ 2 } color="gray.500"/>
         <AddressEntity address={ data.to } truncation="constant" noIcon maxW="150px"/>
       </Flex>
       <Flex flexDir="column" rowGap={ 5 } w="100%" overflow="hidden">