add market cap field

mocks/tokens/tokenInfo.ts

@@ -2,6 +2,7 @@ import type { TokenCounters, TokenInfo } from 'types/api/token';
 
 export const tokenInfo: TokenInfo = {
   address: '0x55d536e4d6c1993d8ef2e2a4ef77f02088419420',
+  circulating_market_cap: '117629601.61913824',
   decimals: '18',
   exchange_rate: '2.0101',
   holders: '46554',
@@ -19,6 +20,7 @@ export const tokenCounters: TokenCounters = {
 
 export const tokenInfoERC20a: TokenInfo = {
   address: '0xb2a90505dc6680a7a695f7975d0d32EeF610f456',
+  circulating_market_cap: '117268489.23970924',
   decimals: '18',
   exchange_rate: null,
   holders: '23',
@@ -31,6 +33,7 @@ export const tokenInfoERC20a: TokenInfo = {
 
 export const tokenInfoERC20b: TokenInfo = {
   address: '0xc1116c98ba622a6218433fF90a2E40DEa482d7A7',
+  circulating_market_cap: '115060192.36105014',
   decimals: '6',
   exchange_rate: '0.982',
   holders: '17',
@@ -43,6 +46,7 @@ export const tokenInfoERC20b: TokenInfo = {
 
 export const tokenInfoERC20c: TokenInfo = {
   address: '0xc1116c98ba622a6218433fF90a2E40DEa482d7A7',
+  circulating_market_cap: null,
   decimals: '18',
   exchange_rate: '1328.89',
   holders: '17',
@@ -55,6 +59,7 @@ export const tokenInfoERC20c: TokenInfo = {
 
 export const tokenInfoERC20d: TokenInfo = {
   address: '0xCc7bb2D219A0FC08033E130629C2B854b7bA9195',
+  circulating_market_cap: null,
   decimals: '18',
   exchange_rate: null,
   holders: '102625',
@@ -67,6 +72,7 @@ export const tokenInfoERC20d: TokenInfo = {
 
 export const tokenInfoERC20LongSymbol: TokenInfo = {
   address: '0xCc7bb2D219A0FC08033E130629C2B854b7bA9195',
+  circulating_market_cap: '112855875.75888918',
   decimals: '18',
   exchange_rate: '1328.89',
   holders: '102625',
@@ -79,6 +85,7 @@ export const tokenInfoERC20LongSymbol: TokenInfo = {
 
 export const tokenInfoERC721a: TokenInfo = {
   address: '0xDe7cAc71E072FCBd4453E5FB3558C2684d1F88A0',
+  circulating_market_cap: null,
   decimals: null,
   exchange_rate: null,
   holders: '7',
@@ -91,6 +98,7 @@ export const tokenInfoERC721a: TokenInfo = {
 
 export const tokenInfoERC721b: TokenInfo = {
   address: '0xA8d5C7beEA8C9bB57f5fBa35fB638BF45550b11F',
+  circulating_market_cap: null,
   decimals: null,
   exchange_rate: null,
   holders: '2',
@@ -103,6 +111,7 @@ export const tokenInfoERC721b: TokenInfo = {
 
 export const tokenInfoERC721c: TokenInfo = {
   address: '0x47646F1d7dc4Dd2Db5a41D092e2Cf966e27A4992',
+  circulating_market_cap: null,
   decimals: null,
   exchange_rate: null,
   holders: '12',
@@ -115,6 +124,7 @@ export const tokenInfoERC721c: TokenInfo = {
 
 export const tokenInfoERC721LongSymbol: TokenInfo = {
   address: '0x47646F1d7dc4Dd2Db5a41D092e2Cf966e27A4992',
+  circulating_market_cap: null,
   decimals: null,
   exchange_rate: null,
   holders: '12',
@@ -127,6 +137,7 @@ export const tokenInfoERC721LongSymbol: TokenInfo = {
 
 export const tokenInfoERC1155a: TokenInfo = {
   address: '0x4b333DEd10c7ca855EA2C8D4D90A0a8b73788c8e',
+  circulating_market_cap: null,
   decimals: null,
   exchange_rate: null,
   holders: '22',
@@ -139,6 +150,7 @@ export const tokenInfoERC1155a: TokenInfo = {
 
 export const tokenInfoERC1155b: TokenInfo = {
   address: '0xf4b71b179132ad457f6bcae2a55efa9e4b26eefc',
+  circulating_market_cap: null,
   decimals: null,
   exchange_rate: null,
   holders: '100',
@@ -151,6 +163,7 @@ export const tokenInfoERC1155b: TokenInfo = {
 
 export const tokenInfoERC1155WithoutName: TokenInfo = {
   address: '0x4b333DEd10c7ca855EA2C8D4D90A0a8b73788c8e',
+  circulating_market_cap: null,
   decimals: null,
   exchange_rate: null,
   holders: '22',

types/api/token.ts

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

ui/token/TokenDetails.tsx

@@ -65,17 +65,16 @@ const TokenDetails = ({ tokenQuery }: Props) => {
   const {
     exchange_rate: exchangeRate,
     total_supply: totalSupply,
+    circulating_market_cap: marketCap,
     decimals,
     symbol,
     type,
   } = tokenQuery.data || {};
 
-  let marketcap;
   let totalSupplyValue;
 
   if (type === 'ERC-20') {
     const totalValue = totalSupply ? getCurrencyValue({ value: totalSupply, accuracy: 3, accuracyUsd: 2, exchangeRate, decimals }) : undefined;
-    marketcap = totalValue?.usd;
     totalSupplyValue = totalValue?.valueStr;
   } else {
     totalSupplyValue = Number(totalSupply).toLocaleString();
@@ -100,7 +99,7 @@ const TokenDetails = ({ tokenQuery }: Props) => {
           </Skeleton>
         </DetailsInfoItem>
       ) }
-      { marketcap && (
+      { marketCap && (
         <DetailsInfoItem
           title="Fully diluted market cap"
           hint="Total supply * Price"
@@ -108,7 +107,7 @@ const TokenDetails = ({ tokenQuery }: Props) => {
           isLoading={ tokenQuery.isPlaceholderData }
         >
           <Skeleton isLoaded={ !tokenQuery.isPlaceholderData } display="inline-block">
-            <span>{ `$${ marketcap }` }</span>
+            <span>{ `$${ marketCap }` }</span>
           </Skeleton>
         </DetailsInfoItem>
       ) }

ui/tokens/TokensListItem.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 
 import type { TokenInfo } from 'types/api/token';
 
-import getCurrencyValue from 'lib/getCurrencyValue';
 import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet';
 import AddressLink from 'ui/shared/address/AddressLink';
 import Tag from 'ui/shared/chakra/Tag';
@@ -29,17 +28,14 @@ const TokensTableItem = ({
 
   const {
     address,
-    total_supply: totalSupply,
     exchange_rate: exchangeRate,
     type,
     name,
     symbol,
-    decimals,
     holders,
+    circulating_market_cap: marketCap,
   } = token;
 
-  const totalValue = totalSupply !== null ? getCurrencyValue({ value: totalSupply, accuracy: 3, accuracyUsd: 2, exchangeRate, decimals }) : undefined;
-
   const tokenString = [ name, symbol && `(${ symbol })` ].filter(Boolean).join(' ');
 
   return (
@@ -74,10 +70,10 @@ const TokensTableItem = ({
           <Skeleton isLoaded={ !isLoading } fontSize="sm" color="text_secondary"><span>{ exchangeRate }</span></Skeleton>
         </HStack>
       ) }
-      { totalValue?.usd && (
+      { marketCap && (
         <HStack spacing={ 3 }>
           <Skeleton isLoaded={ !isLoading } fontSize="sm" fontWeight={ 500 }>On-chain market cap</Skeleton>
-          <Skeleton isLoaded={ !isLoading } fontSize="sm" color="text_secondary"><span>{ totalValue.usd }</span></Skeleton>
+          <Skeleton isLoaded={ !isLoading } fontSize="sm" color="text_secondary"><span>{ marketCap }</span></Skeleton>
         </HStack>
       ) }
       <HStack spacing={ 3 }>

ui/tokens/TokensTableItem.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 
 import type { TokenInfo } from 'types/api/token';
 
-import getCurrencyValue from 'lib/getCurrencyValue';
 import Address from 'ui/shared/address/Address';
 import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet';
 import AddressLink from 'ui/shared/address/AddressLink';
@@ -29,17 +28,14 @@ const TokensTableItem = ({
 
   const {
     address,
-    total_supply: totalSupply,
     exchange_rate: exchangeRate,
     type,
     name,
     symbol,
-    decimals,
     holders,
+    circulating_market_cap: marketCap,
   } = token;
 
-  const totalValue = totalSupply !== null ? getCurrencyValue({ value: totalSupply, accuracy: 3, accuracyUsd: 2, exchangeRate, decimals }) : undefined;
-
   const tokenString = [ name, symbol && `(${ symbol })` ].filter(Boolean).join(' ');
 
   return (
@@ -81,7 +77,7 @@ const TokensTableItem = ({
       </Td>
       <Td isNumeric maxWidth="300px" width="300px">
         <Skeleton isLoaded={ !isLoading } fontSize="sm" lineHeight="24px" fontWeight={ 500 } display="inline-block">
-          { totalValue?.usd && `$${ totalValue.usd }` }
+          { marketCap && `$${ marketCap }` }
         </Skeleton>
       </Td>
       <Td isNumeric>