Skip to content

F
frontend
Commit 43339f53 authored by Igor Stuev's avatar Igor Stuev Committed by GitHub
Browse files
Options

Merge pull request #879 from blockscout/circulating_market_cap 

Circulating market cap
parents a96eabdb ab25d4cc
Hide whitespace changes
Inline Side-by-side
Showing with 39 additions and 18 deletions
mocks/tokens/tokenInfo.ts
View file @ 43339f53
......@@ -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
View file @ 43339f53
......@@ -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
View file @ 43339f53
......@@ -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
View file @ 43339f53
......@@ -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
View file @ 43339f53
......@@ -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
View file @ 43339f53
......@@ -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
View file @ 43339f53
......@@ -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
View file @ 43339f53
......@@ -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
View file @ 43339f53
......@@ -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
View file @ 43339f53
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
View file @ 43339f53
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
View file @ 43339f53
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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment