tokens list

lib/api/resources.ts

@@ -24,6 +24,7 @@ import type { RawTracesResponse } from 'types/api/rawTrace';
 import type { SearchResult, SearchResultFilters } from 'types/api/search';
 import type { Counters, StatsCharts, StatsChart, HomeStats } from 'types/api/stats';
 import type { TokenCounters, TokenInfo, TokenHolders } from 'types/api/tokenInfo';
+import type { TokensResponse, TokensFilters } from 'types/api/tokens';
 import type { TokenTransferResponse, TokenTransferFilters } from 'types/api/tokenTransfer';
 import type { TransactionsResponseValidated, TransactionsResponsePending, Transaction } from 'types/api/transaction';
 import type { TTxsFilters } from 'types/api/txsFilters';
@@ -213,6 +214,11 @@ export const RESOURCES = {
     paginationFields: [ 'block_number' as const, 'items_count' as const, 'index' as const ],
     filterFields: [],
   },
+  tokens: {
+    path: '/api/v2/tokens',
+    paginationFields: [ 'holder_count' as const, 'items_count' as const, 'name' as const ],
+    filterFields: [ 'filter' as const ],
+  },
 
   // HOMEPAGE
   homepage_stats: {
@@ -283,7 +289,7 @@ export type PaginatedResources = 'blocks' | 'block_txs' |
 'address_txs' | 'address_internal_txs' | 'address_token_transfers' | 'address_blocks_validated' | 'address_coin_balance' |
 'search' |
 'address_logs' | 'address_tokens' |
-'token_transfers' | 'token_holders';
+'token_transfers' | 'token_holders' | 'tokens';
 
 export type PaginatedResponse<Q extends PaginatedResources> = ResourcePayload<Q>;
 
@@ -330,6 +336,7 @@ Q extends 'token' ? TokenInfo :
 Q extends 'token_counters' ? TokenCounters :
 Q extends 'token_transfers' ? TokenTransferResponse :
 Q extends 'token_holders' ? TokenHolders :
+Q extends 'tokens' ? TokensResponse :
 Q extends 'search' ? SearchResult :
 Q extends 'contract' ? SmartContract :
 Q extends 'contract_methods_read' ? Array<SmartContractReadMethod> :
@@ -349,5 +356,6 @@ Q extends 'address_txs' | 'address_internal_txs' ? AddressTxsFilters :
 Q extends 'address_token_transfers' ? AddressTokenTransferFilters :
 Q extends 'address_tokens' ? AddressTokensFilter :
 Q extends 'search' ? SearchResultFilters :
+Q extends 'tokens' ? TokensFilters :
 never;
 /* eslint-enable @typescript-eslint/indent */

mocks/address/tokenBalance.ts

 import type { AddressTokenBalance } from 'types/api/address';
 
+import * as tokens from 'mocks/tokens/tokenInfo';
+
 export const erc20a: AddressTokenBalance = {
-  token: {
-    address: '0xb2a90505dc6680a7a695f7975d0d32EeF610f456',
-    decimals: '18',
-    exchange_rate: null,
-    holders: '23',
-    name: 'hyfi.token',
-    symbol: 'HyFi',
-    total_supply: '369000000000000000000000000',
-    type: 'ERC-20',
-  },
+  token: tokens.tokenInfoERC20a,
   token_id: null,
   value: '1169320000000000000000000',
 };
 
 export const erc20b: AddressTokenBalance = {
-  token: {
-    address: '0xc1116c98ba622a6218433fF90a2E40DEa482d7A7',
-    decimals: '6',
-    exchange_rate: '0.982',
-    holders: '17',
-    name: 'USD Coin',
-    symbol: 'USDC',
-    total_supply: '900000000000000000000000000',
-    type: 'ERC-20',
-  },
+  token: tokens.tokenInfoERC20b,
   token_id: null,
   value: '872500000000',
 };
 
 export const erc20c: AddressTokenBalance = {
-  token: {
-    address: '0xc1116c98ba622a6218433fF90a2E40DEa482d7A7',
-    decimals: '18',
-    exchange_rate: '1328.89',
-    holders: '17',
-    name: 'Ethereum',
-    symbol: 'ETH',
-    total_supply: '1000000000000000000000000',
-    type: 'ERC-20',
-  },
+  token: tokens.tokenInfoERC20c,
   token_id: null,
   value: '9852000000000000000000',
 };
 
 export const erc20d: AddressTokenBalance = {
-  token: {
-    address: '0xCc7bb2D219A0FC08033E130629C2B854b7bA9195',
-    decimals: '18',
-    exchange_rate: null,
-    holders: '102625',
-    name: 'Zeta',
-    symbol: 'ZETA',
-    total_supply: '2100000000000000000000000000',
-    type: 'ERC-20',
-  },
+  token: tokens.tokenInfoERC20d,
   token_id: null,
   value: '39000000000000000000',
 };
 
 export const erc721a: AddressTokenBalance = {
-  token: {
-    address: '0xDe7cAc71E072FCBd4453E5FB3558C2684d1F88A0',
-    decimals: null,
-    exchange_rate: null,
-    holders: '7',
-    name: 'HyFi Athena',
-    symbol: 'HYFI_ATHENA',
-    total_supply: '105',
-    type: 'ERC-721',
-  },
+  token: tokens.tokenInfoERC721a,
   token_id: null,
   value: '51',
 };
 
 export const erc721b: AddressTokenBalance = {
-  token: {
-    address: '0xA8d5C7beEA8C9bB57f5fBa35fB638BF45550b11F',
-    decimals: null,
-    exchange_rate: null,
-    holders: '2',
-    name: 'World Of Women Galaxy',
-    symbol: 'WOWG',
-    total_supply: null,
-    type: 'ERC-721',
-  },
+  token: tokens.tokenInfoERC721b,
   token_id: null,
   value: '1',
 };
 
 export const erc721c: AddressTokenBalance = {
-  token: {
-    address: '0x47646F1d7dc4Dd2Db5a41D092e2Cf966e27A4992',
-    decimals: null,
-    exchange_rate: null,
-    holders: '12',
-    name: 'Puma',
-    symbol: 'PUMA',
-    total_supply: null,
-    type: 'ERC-721',
-  },
+  token: tokens.tokenInfoERC721c,
   token_id: null,
   value: '5',
 };
 
 export const erc1155a: AddressTokenBalance = {
-  token: {
-    address: '0x4b333DEd10c7ca855EA2C8D4D90A0a8b73788c8e',
-    decimals: null,
-    exchange_rate: null,
-    holders: '22',
-    name: 'HyFi Membership',
-    symbol: 'HYFI_MEMBERSHIP',
-    total_supply: '482',
-    type: 'ERC-1155',
-  },
+  token: tokens.tokenInfoERC1155a,
   token_id: '42',
   value: '24',
 };
 
 export const erc1155b: AddressTokenBalance = {
-  token: {
-    address: '0xf4b71b179132ad457f6bcae2a55efa9e4b26eefc',
-    decimals: null,
-    exchange_rate: null,
-    holders: '100',
-    name: 'WinkyVerse Collections',
-    symbol: 'WVC',
-    total_supply: '4943',
-    type: 'ERC-1155',
-  },
+  token: tokens.tokenInfoERC1155b,
   token_id: '100010000000001',
   value: '11',
 };
 
 export const erc1155withoutName: AddressTokenBalance = {
-  token: {
-    address: '0x4b333DEd10c7ca855EA2C8D4D90A0a8b73788c8e',
-    decimals: null,
-    exchange_rate: null,
-    holders: '22',
-    name: null,
-    symbol: null,
-    total_supply: '482',
-    type: 'ERC-1155',
-  },
+  token: tokens.tokenInfoERC1155WithoutName,
   token_id: '64532245',
   value: '42',
 };

mocks/tokens/tokenInfo.ts

@@ -15,3 +15,113 @@ export const tokenCounters: TokenCounters = {
   token_holders_count: '8838883',
   transfers_count: '88282281',
 };
+
+export const tokenInfoERC20a: TokenInfo = {
+  address: '0xb2a90505dc6680a7a695f7975d0d32EeF610f456',
+  decimals: '18',
+  exchange_rate: null,
+  holders: '23',
+  name: 'hyfi.token',
+  symbol: 'HyFi',
+  total_supply: '369000000000000000000000000',
+  type: 'ERC-20',
+};
+
+export const tokenInfoERC20b: TokenInfo = {
+  address: '0xc1116c98ba622a6218433fF90a2E40DEa482d7A7',
+  decimals: '6',
+  exchange_rate: '0.982',
+  holders: '17',
+  name: 'USD Coin',
+  symbol: 'USDC',
+  total_supply: '900000000000000000000000000',
+  type: 'ERC-20',
+};
+
+export const tokenInfoERC20c: TokenInfo = {
+  address: '0xc1116c98ba622a6218433fF90a2E40DEa482d7A7',
+  decimals: '18',
+  exchange_rate: '1328.89',
+  holders: '17',
+  name: 'Ethereum',
+  symbol: 'ETH',
+  total_supply: '1000000000000000000000000',
+  type: 'ERC-20',
+};
+
+export const tokenInfoERC20d: TokenInfo = {
+  address: '0xCc7bb2D219A0FC08033E130629C2B854b7bA9195',
+  decimals: '18',
+  exchange_rate: null,
+  holders: '102625',
+  name: 'Zeta',
+  symbol: 'ZETA',
+  total_supply: '2100000000000000000000000000',
+  type: 'ERC-20',
+};
+
+export const tokenInfoERC721a: TokenInfo = {
+  address: '0xDe7cAc71E072FCBd4453E5FB3558C2684d1F88A0',
+  decimals: null,
+  exchange_rate: null,
+  holders: '7',
+  name: 'HyFi Athena',
+  symbol: 'HYFI_ATHENA',
+  total_supply: '105',
+  type: 'ERC-721',
+};
+
+export const tokenInfoERC721b: TokenInfo = {
+  address: '0xA8d5C7beEA8C9bB57f5fBa35fB638BF45550b11F',
+  decimals: null,
+  exchange_rate: null,
+  holders: '2',
+  name: 'World Of Women Galaxy',
+  symbol: 'WOWG',
+  total_supply: null,
+  type: 'ERC-721',
+};
+
+export const tokenInfoERC721c: TokenInfo = {
+  address: '0x47646F1d7dc4Dd2Db5a41D092e2Cf966e27A4992',
+  decimals: null,
+  exchange_rate: null,
+  holders: '12',
+  name: 'Puma',
+  symbol: 'PUMA',
+  total_supply: null,
+  type: 'ERC-721',
+};
+
+export const tokenInfoERC1155a: TokenInfo = {
+  address: '0x4b333DEd10c7ca855EA2C8D4D90A0a8b73788c8e',
+  decimals: null,
+  exchange_rate: null,
+  holders: '22',
+  name: 'HyFi Membership',
+  symbol: 'HYFI_MEMBERSHIP',
+  total_supply: '482',
+  type: 'ERC-1155',
+};
+
+export const tokenInfoERC1155b: TokenInfo = {
+  address: '0xf4b71b179132ad457f6bcae2a55efa9e4b26eefc',
+  decimals: null,
+  exchange_rate: null,
+  holders: '100',
+  name: 'WinkyVerse Collections',
+  symbol: 'WVC',
+  total_supply: '4943',
+  type: 'ERC-1155',
+};
+
+export const tokenInfoERC1155WithoutName: TokenInfo = {
+  address: '0x4b333DEd10c7ca855EA2C8D4D90A0a8b73788c8e',
+  decimals: null,
+  exchange_rate: null,
+  holders: '22',
+  name: null,
+  symbol: null,
+  total_supply: '482',
+  type: 'ERC-1155',
+};

pages/tokens.tsx

+import type { NextPage } from 'next';
+import Head from 'next/head';
+import React from 'react';
+
+import getNetworkTitle from 'lib/networks/getNetworkTitle';
+import Tokens from 'ui/pages/Tokens';
+
+const BlockPage: NextPage = () => {
+  const title = getNetworkTitle();
+  return (
+    <>
+      <Head>
+        <title>{ title }</title>
+      </Head>
+      <Tokens/>
+    </>
+  );
+};
+
+export default BlockPage;
+
+export { getServerSideProps } from 'lib/next/getServerSideProps';

types/api/tokens.ts

+import type { TokenInfo } from './tokenInfo';
+
+export type TokensResponse = {
+  items: Array<TokenInfo>;
+  next_page_params: {
+    holder_count: number;
+    items_count: number;
+    name: string;
+  };
+}
+
+export type TokensFilters = { filter: string };

ui/address/details/AddressAddToMetaMask.tsx

@@ -50,7 +50,7 @@ const AddressAddToMetaMask = ({ className, token }: Props) => {
     }
   }, [ toast, token ]);
 
-  if (token.type !== 'ERC-20' || !('ethereum' in window)) {
+  if (!('ethereum' in window)) {
     return null;
   }
 

ui/pages/Tokens.tsx

+import React from 'react';
+
+import Page from 'ui/shared/Page/Page';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import TokensList from 'ui/tokens/Tokens';
+
+const Transactions = () => {
+  return (
+    <Page>
+      <PageTitle text="Tokens" withTextAd/>
+      <TokensList/>
+    </Page>
+  );
+};
+
+export default Transactions;

ui/shared/address/AddressLink.tsx

@@ -7,6 +7,8 @@ import link from 'lib/link/link';
 import HashStringShorten from 'ui/shared/HashStringShorten';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 
+import TruncatedTextTooltip from '../TruncatedTextTooltip';
+
 interface Props {
   type?: 'address' | 'transaction' | 'token' | 'block' | 'token_instance_item';
   alias?: string | null;
@@ -37,9 +39,17 @@ const AddressLink = ({ alias, type, className, truncation = 'dynamic', hash, id,
 
   const content = (() => {
     if (alias) {
+      const text = <Box overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap">{ alias }</Box>;
+      if (type === 'token') {
+        return (
+          <TruncatedTextTooltip label={ alias }>
+            { text }
+          </TruncatedTextTooltip>
+        );
+      }
       return (
         <Tooltip label={ hash } isDisabled={ isMobile }>
-          <Box overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap">{ alias }</Box>
+          { text }
         </Tooltip>
       );
     }

ui/tokens/Tokens.pw.tsx

+import { Box } from '@chakra-ui/react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import * as tokens from 'mocks/tokens/tokenInfo';
+import TestApp from 'playwright/TestApp';
+import buildApiUrl from 'playwright/utils/buildApiUrl';
+
+import Tokens from './Tokens';
+
+const API_URL_TOKENS = buildApiUrl('tokens');
+
+const tokensResponse = {
+  items: [
+    tokens.tokenInfoERC20a, tokens.tokenInfoERC20b, tokens.tokenInfoERC20c, tokens.tokenInfoERC20d,
+    tokens.tokenInfoERC721a, tokens.tokenInfoERC721b, tokens.tokenInfoERC721c,
+    tokens.tokenInfoERC1155a, tokens.tokenInfoERC1155b, tokens.tokenInfoERC1155WithoutName,
+  ],
+  next_page_params: {
+    holder_count: 1,
+    items_count: 1,
+    name: 'a',
+  },
+};
+
+test('base view +@mobile +@dark-mode', async({ mount, page }) => {
+  await page.route(API_URL_TOKENS, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(tokensResponse),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <Box h={{ base: '134px', lg: 6 }}/>
+      <Tokens/>
+    </TestApp>,
+  );
+
+  await expect(component).toHaveScreenshot();
+});

ui/tokens/Tokens.tsx

+import { Hide, Show, Text } from '@chakra-ui/react';
+import React from 'react';
+
+import useDebounce from 'lib/hooks/useDebounce';
+import useQueryWithPages from 'lib/hooks/useQueryWithPages';
+import { apos } from 'lib/html-entities';
+import EmptySearchResult from 'ui/apps/EmptySearchResult';
+import ActionBar from 'ui/shared/ActionBar';
+import DataFetchAlert from 'ui/shared/DataFetchAlert';
+import FilterInput from 'ui/shared/FilterInput';
+import Pagination from 'ui/shared/Pagination';
+import SkeletonList from 'ui/shared/skeletons/SkeletonList';
+import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
+
+import TokensListItem from './TokensListItem';
+import TokensTable from './TokensTable';
+
+const Tokens = () => {
+  const [ filter, setFilter ] = React.useState<string>('');
+
+  const debouncedFilter = useDebounce(filter, 300);
+
+  const { isError, isLoading, data, isPaginationVisible, pagination } = useQueryWithPages({
+    resourceName: 'tokens',
+    filters: { filter: debouncedFilter },
+  });
+
+  if (isError) {
+    return <DataFetchAlert/>;
+  }
+
+  const bar = (
+    <>
+      <Show below="lg">
+        <FilterInput
+          w="100%"
+          size="xs"
+          onChange={ setFilter }
+          placeholder="Token name or symbol"
+          mb={ 6 }
+        />
+      </Show>
+      <ActionBar mt={ -6 } flexDirection={{ base: 'column', lg: 'row' }} rowGap={ 6 }>
+        <Hide below="lg">
+          <FilterInput
+            w="362px"
+            size="xs"
+            onChange={ setFilter }
+            placeholder="Token name or symbol"
+          />
+        </Hide>
+        { isPaginationVisible && <Pagination ml="auto" { ...pagination }/> }
+      </ActionBar>
+    </>
+  );
+
+  if (isLoading) {
+    return (
+      <>
+        { bar }
+        <Show below="lg"><SkeletonList/></Show>
+        <Hide below="lg">
+          <SkeletonTable columns={ [ '25px', '33%', '33%', '33%', '110px' ] }/>
+        </Hide>
+      </>
+    );
+  }
+
+  if (!data.items.length) {
+    if (debouncedFilter) {
+      return (
+        <>
+          { bar }
+          <EmptySearchResult text={ `Couldn${ apos }t find token that matches your filter query.` }/>;
+        </>
+      );
+    }
+    return <Text as="span">There are no tokens</Text>;
+  }
+
+  return (
+    <>
+      { bar }
+      <Show below="lg" ssr={ false }>
+        { data.items.map((item, index) => <TokensListItem key={ item.address } token={ item } index={ index } page={ pagination.page }/>) }
+      </Show>
+      <Hide below="lg" ssr={ false }><TokensTable items={ data.items } page={ pagination.page }/></Hide>
+    </>
+  );
+};
+
+export default Tokens;

ui/tokens/TokensListItem.tsx

+import { Flex, Text, Tag, HStack, Grid, GridItem } from '@chakra-ui/react';
+import React from 'react';
+
+import type { TokenInfo } from 'types/api/tokenInfo';
+
+import getCurrencyValue from 'lib/getCurrencyValue';
+import AddressAddToMetaMask from 'ui/address/details/AddressAddToMetaMask';
+import AddressLink from 'ui/shared/address/AddressLink';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import ListItemMobile from 'ui/shared/ListItemMobile';
+import TokenLogo from 'ui/shared/TokenLogo';
+
+type Props = {
+  token: TokenInfo;
+  index: number;
+  page: number;
+}
+
+const PAGE_SIZE = 50;
+
+const TokensTableItem = ({
+  token,
+  page,
+  index,
+}: Props) => {
+
+  const {
+    address,
+    total_supply: totalSupply,
+    exchange_rate: exchangeRate,
+    type,
+    name,
+    symbol,
+    decimals,
+    holders,
+  } = token;
+
+  const totalValue = totalSupply !== null ? getCurrencyValue({ value: totalSupply, accuracy: 3, accuracyUsd: 2, exchangeRate, decimals }) : undefined;
+
+  const tokenString = [ name, symbol && `(${ symbol })` ].filter(Boolean).join(' ');
+
+  return (
+    <ListItemMobile rowGap={ 3 }>
+      <Grid
+        width="100%"
+        gridTemplateColumns="minmax(0, 1fr)"
+      >
+        <GridItem display="flex">
+          <Flex overflow="hidden" mr={ 3 } alignItems="center">
+            <TokenLogo hash={ address } name={ name } boxSize={ 6 } mr={ 2 }/>
+            <AddressLink fontSize="sm" fontWeight="700" hash={ address } type="token" alias={ tokenString }/>
+            <Tag flexShrink={ 0 } ml={ 3 }>{ type }</Tag>
+          </Flex>
+          <Text fontSize="sm" ml="auto" variant="secondary">{ (page - 1) * PAGE_SIZE + index + 1 }</Text>
+        </GridItem>
+      </Grid>
+      <Flex justifyContent="space-between" alignItems="center" width="100%">
+        <Flex alignItems="center" width="136px" justifyContent="space-between" ml={ 8 } mt="-8px">
+          <Flex alignItems="center">
+            <AddressLink fontSize="sm" hash={ address } type="address" truncation="constant"/>
+            <CopyToClipboard text={ address } ml={ 1 }/>
+          </Flex>
+          <AddressAddToMetaMask token={ token }/>
+        </Flex>
+      </Flex>
+      { exchangeRate && (
+        <HStack spacing={ 3 }>
+          <Text fontSize="sm" fontWeight={ 500 }>Price</Text>
+          <Text fontSize="sm" variant="secondary">{ exchangeRate || '-' }</Text>
+        </HStack>
+      ) }
+      { totalValue?.usd && (
+        <HStack spacing={ 3 }>
+          <Text fontSize="sm" fontWeight={ 500 }>On-chain market cap</Text>
+          <Text fontSize="sm" variant="secondary">{ totalValue.usd }</Text>
+        </HStack>
+      ) }
+      <HStack spacing={ 3 }>
+        <Text fontSize="sm" fontWeight={ 500 }>Holders</Text>
+        <Text fontSize="sm" variant="secondary">{ holders }</Text>
+      </HStack>
+    </ListItemMobile>
+  );
+};
+
+export default TokensTableItem;

ui/tokens/TokensTable.tsx

+import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
+import React from 'react';
+
+import type { TokenInfo } from 'types/api/tokenInfo';
+
+import { default as Thead } from 'ui/shared/TheadSticky';
+
+import TokensTableItem from './TokensTableItem';
+
+type Props = {
+  items: Array<TokenInfo>;
+  page: number;
+}
+
+const TokensTable = ({ items, page }: Props) => {
+  return (
+    <Table style={{ tableLayout: 'auto' }}>
+      <Thead top={ 80 }>
+        <Tr>
+          <Th width="fit-content"></Th>
+          <Th>Token</Th>
+          <Th isNumeric>Price</Th>
+          <Th isNumeric>On-chain market cap</Th>
+          <Th isNumeric>Holders</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        { items.map((item, index) => (
+          <TokensTableItem key={ item.address } token={ item } index={ index } page={ page }/>
+        )) }
+      </Tbody>
+    </Table>
+  );
+};
+
+export default TokensTable;

ui/tokens/TokensTableItem.tsx

+import { Flex, Td, Tr, Text, Tag } from '@chakra-ui/react';
+import React from 'react';
+
+import type { TokenInfo } from 'types/api/tokenInfo';
+
+import getCurrencyValue from 'lib/getCurrencyValue';
+import AddressAddToMetaMask from 'ui/address/details/AddressAddToMetaMask';
+import AddressLink from 'ui/shared/address/AddressLink';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import TokenLogo from 'ui/shared/TokenLogo';
+
+type Props = {
+  token: TokenInfo;
+  index: number;
+  page: number;
+}
+
+const PAGE_SIZE = 50;
+
+const TokensTableItem = ({
+  token,
+  page,
+  index,
+}: Props) => {
+
+  const {
+    address,
+    total_supply: totalSupply,
+    exchange_rate: exchangeRate,
+    type,
+    name,
+    symbol,
+    decimals,
+    holders,
+  } = token;
+
+  const totalValue = totalSupply !== null ? getCurrencyValue({ value: totalSupply, accuracy: 3, accuracyUsd: 2, exchangeRate, decimals }) : undefined;
+
+  const tokenString = [ name, symbol && `(${ symbol })` ].filter(Boolean).join(' ');
+
+  return (
+    <Tr>
+      <Td><Text fontSize="sm" lineHeight="24px" fontWeight={ 600 }>{ (page - 1) * PAGE_SIZE + index + 1 }</Text></Td>
+      <Td>
+        <Flex alignItems="center">
+          <TokenLogo hash={ address } name={ name } 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={ 1 }>
+          <Flex alignItems="center">
+            <AddressLink fontSize="sm" hash={ address } type="address" truncation="constant" fontWeight={ 500 }/>
+            <CopyToClipboard text={ address } ml={ 1 }/>
+          </Flex>
+          <AddressAddToMetaMask token={ token }/>
+        </Flex>
+        <Tag flexShrink={ 0 } ml={ 8 } mt={ 3 }>{ type }</Tag>
+      </Td>
+      <Td isNumeric><Text fontSize="sm" lineHeight="24px" fontWeight={ 500 }>{ exchangeRate ? `$${ exchangeRate }` : '-' }</Text></Td>
+      <Td isNumeric maxWidth="300px" width="300px">
+        <Text fontSize="sm" lineHeight="24px" fontWeight={ 500 }>{ totalValue?.usd ? `$${ totalValue.usd }` : '-' }</Text>
+      </Td>
+      <Td isNumeric><Text fontSize="sm" lineHeight="24px" fontWeight={ 500 }>{ holders }</Text></Td>
+    </Tr>
+  );
+};
+
+export default TokensTableItem;