Skip to content

F
frontend
Commit 509a943b authored by isstuev's avatar isstuev
Browse files
Options

add market cap field

parent f3412634
Hide whitespace changes
Inline Side-by-side
Showing with 22 additions and 17 deletions
mocks/tokens/tokenInfo.ts
View file @ 509a943b
......@@ -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
View file @ 509a943b
......@@ -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
View file @ 509a943b
......@@ -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
View file @ 509a943b
......@@ -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
View file @ 509a943b
......@@ -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>
......
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