Merge pull request #879 from blockscout/circulating_market_cap

Circulating market cap

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',

mocks/tokens/tokenTransfer.ts

@@ -23,6 +23,7 @@ export const erc20: TokenTransfer = {
   },
   token: {
     address: '0x55d536e4d6c1993d8ef2e2a4ef77f02088419420',
+    circulating_market_cap: '117629601.61913824',
     decimals: '18',
     exchange_rate: null,
     holders: '46554',
@@ -67,6 +68,7 @@ export const erc721: TokenTransfer = {
   },
   token: {
     address: '0x363574E6C5C71c343d7348093D84320c76d5Dd29',
+    circulating_market_cap: null,
     decimals: null,
     exchange_rate: null,
     holders: '63090',
@@ -110,6 +112,7 @@ export const erc1155A: TokenTransfer = {
   },
   token: {
     address: '0xF56b7693E4212C584de4a83117f805B8E89224CB',
+    circulating_market_cap: null,
     decimals: null,
     exchange_rate: null,
     holders: '1',

mocks/txs/state.ts

@@ -24,6 +24,7 @@ export const mintToken: TxStateChange = {
   is_miner: false,
   token: {
     address: '0x8977EA6C55e878125d1bF3433EBf72138B7a4543',
+    circulating_market_cap: null,
     decimals: null,
     exchange_rate: null,
     holders: '9191',
@@ -60,6 +61,7 @@ export const receiveMintedToken: TxStateChange = {
   is_miner: false,
   token: {
     address: '0x8977EA6C55e878125d1bF3433EBf72138B7a4543',
+    circulating_market_cap: null,
     decimals: null,
     exchange_rate: null,
     holders: '9191',
@@ -89,6 +91,7 @@ export const transfer1155Token: TxStateChange = {
   is_miner: false,
   token: {
     address: '0x56Cc277717106E528A9FcC2CD342Ff98db758041',
+    circulating_market_cap: null,
     decimals: null,
     exchange_rate: null,
     holders: '50413',

stubs/token.ts

@@ -8,6 +8,7 @@ import { generateListStub } from './utils';
 
 export const TOKEN_INFO_ERC_20: TokenInfo<'ERC-20'> = {
   address: ADDRESS_HASH,
+  circulating_market_cap: '117629601.61913824',
   decimals: '18',
   exchange_rate: '0.999997',
   holders: '16026',
@@ -20,11 +21,13 @@ export const TOKEN_INFO_ERC_20: TokenInfo<'ERC-20'> = {
 
 export const TOKEN_INFO_ERC_721: TokenInfo<'ERC-721'> = {
   ...TOKEN_INFO_ERC_20,
+  circulating_market_cap: null,
   type: 'ERC-721',
 };
 
 export const TOKEN_INFO_ERC_1155: TokenInfo<'ERC-1155'> = {
   ...TOKEN_INFO_ERC_20,
+  circulating_market_cap: null,
   type: 'ERC-1155',
 };
 

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 {

types/api/txStateChanges.ts

@@ -45,7 +45,6 @@ export type TxStateChanges = {
   items: Array<TxStateChange>;
   next_page_params: {
     items_count: number;
-    // ???
     state_changes: null;
   };
 };

ui/shared/Page/specs/DefaultView.tsx

@@ -16,6 +16,7 @@ const DefaultView = () => {
 
   const tokenData: TokenInfo = {
     address: '0x363574E6C5C71c343d7348093D84320c76d5Dd29',
+    circulating_market_cap: '117629601.61913824',
     type: 'ERC-20',
     symbol: 'SHAAAAAAAAAAAAA',
     name: null,

ui/shared/Page/specs/LongNameAndManyTags.tsx

@@ -19,6 +19,7 @@ const LongNameAndManyTags = () => {
 
   const tokenData: TokenInfo = {
     address: '0xa77A39CC9680B10C00af5D4ABFc92e1F07406c64',
+    circulating_market_cap: null,
     decimals: null,
     exchange_rate: null,
     holders: '294',

ui/shared/TokenSnippet/TokenSnippet.pw.tsx

@@ -12,6 +12,7 @@ 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,
@@ -33,6 +34,7 @@ test('unnamed', async({ mount }) => {
 test('named', async({ mount }) => {
   const data: TokenInfo = {
     address: '0x363574E6C5C71c343d7348093D84320c76d5Dd29',
+    circulating_market_cap: '117629601.61913824',
     type: 'ERC-20',
     symbol: 'SHA',
     name: 'Shavuha token',
@@ -55,6 +57,7 @@ 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,

ui/token/TokenDetails.tsx

 import { Box, Flex, Grid, Link, Skeleton } from '@chakra-ui/react';
 import type { UseQueryResult } from '@tanstack/react-query';
+import BigNumber from 'bignumber.js';
 import { useRouter } from 'next/router';
 import React, { useCallback } from 'react';
 import { scroller } from 'react-scroll';
@@ -65,17 +66,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 +100,7 @@ const TokenDetails = ({ tokenQuery }: Props) => {
           </Skeleton>
         </DetailsInfoItem>
       ) }
-      { marketcap && (
+      { marketCap && (
         <DetailsInfoItem
           title="Fully diluted market cap"
           hint="Total supply * Price"
@@ -108,7 +108,7 @@ const TokenDetails = ({ tokenQuery }: Props) => {
           isLoading={ tokenQuery.isPlaceholderData }
         >
           <Skeleton isLoaded={ !tokenQuery.isPlaceholderData } display="inline-block">
-            <span>{ `$${ marketcap }` }</span>
+            <span>{ `$${ BigNumber(marketCap).toFormat() }` }</span>
           </Skeleton>
         </DetailsInfoItem>
       ) }

ui/tokens/TokensListItem.tsx

 import { Flex, HStack, Grid, GridItem, Skeleton } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
 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 +29,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 +71,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>{ BigNumber(marketCap).toFormat() }</span></Skeleton>
         </HStack>
       ) }
       <HStack spacing={ 3 }>

ui/tokens/TokensTableItem.tsx

 import { Box, Flex, Td, Tr, Skeleton } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
 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 +29,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 +78,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 && `$${ BigNumber(marketCap).toFormat() }` }
         </Skeleton>
       </Td>
       <Td isNumeric>