diff --git a/src/app/components/FiatValue/index.tsx b/src/app/components/FiatValue/index.tsx new file mode 100644 index 000000000..8c5b4282e --- /dev/null +++ b/src/app/components/FiatValue/index.tsx @@ -0,0 +1,26 @@ +import { FC } from 'react' +import { useTranslation } from 'react-i18next' + +type FiatValueProps = { + isLoading: boolean + value: number | undefined +} + +export const FiatValue: FC = ({ isLoading, value }) => { + const { t } = useTranslation() + + return ( + <> + {!isLoading && value + ? t('common.fiatValueInUSD', { + value: value, + formatParams: { + value: { + currency: 'USD', + } satisfies Intl.NumberFormatOptions, + }, + }) + : t('common.missing')} + + ) +} diff --git a/src/app/components/Tokens/TokenList.tsx b/src/app/components/Tokens/TokenList.tsx index 96c2e0d88..fae4ab4c4 100644 --- a/src/app/components/Tokens/TokenList.tsx +++ b/src/app/components/Tokens/TokenList.tsx @@ -18,6 +18,7 @@ import { RoundedBalance } from '../RoundedBalance' import { getTokenMarketCap } from '../../utils/tokens' import { useTokenPrice } from '../../../coin-gecko/api' import { Ticker } from '../../../types/ticker' +import { FiatValue } from '../FiatValue' import { MarketCapTitle } from './MarketCapTitle' type TokensProps = { @@ -86,6 +87,8 @@ export const TokenList = (props: TokensProps) => { ] const tableRows = tokens?.map((token, index) => { + const marketCapValue = getTokenMarketCap(token?.relative_total_value, priceQuery.price) + return { key: token.contract_addr, data: [ @@ -148,14 +151,7 @@ export const TokenList = (props: TokensProps) => { ), }, { - content: t('common.fiatValueInUSD', { - value: getTokenMarketCap(8.01909111301725e22, priceQuery.price), // provide relative_total_value - formatParams: { - value: { - currency: 'USD', - } satisfies Intl.NumberFormatOptions, - }, - }), + content: , key: 'marketCap', align: TableCellAlign.Right, }, diff --git a/src/app/pages/TokenDashboardPage/TokenMarketCapCard.tsx b/src/app/pages/TokenDashboardPage/TokenMarketCapCard.tsx index 132efc052..1e7727759 100644 --- a/src/app/pages/TokenDashboardPage/TokenMarketCapCard.tsx +++ b/src/app/pages/TokenDashboardPage/TokenMarketCapCard.tsx @@ -1,37 +1,34 @@ import { FC } from 'react' -import { useTranslation } from 'react-i18next' import Skeleton from '@mui/material/Skeleton' import { SearchScope } from '../../../types/searchScope' import { MarketCapTitle } from '../../components/Tokens/MarketCapTitle' import { SnapshotTextCard } from '../../components/Snapshots/SnapshotCard' +import { FiatValue } from '../../components/FiatValue' import { getTokenMarketCap } from '../../utils/tokens' +import { useTokenInfo } from './hook' type TokenMarketCapCardProps = { - isLoading: boolean + address: string + isPriceLoading: boolean rosePriceInUsd: number | undefined scope: SearchScope } -export const TokenMarketCapCard: FC = ({ isLoading, rosePriceInUsd, scope }) => { - const { t } = useTranslation() +export const TokenMarketCapCard: FC = ({ + address, + isPriceLoading, + rosePriceInUsd, + scope, +}) => { + const { isLoading, token } = useTokenInfo(scope, address) + const marketCapValue = getTokenMarketCap(token?.relative_total_value, rosePriceInUsd) return ( } withConstantHeight> - {isLoading ? ( + {isLoading && isPriceLoading ? ( ) : ( - rosePriceInUsd && ( - <> - {t('common.fiatValueInUSD', { - value: getTokenMarketCap(8.01909111301725e22, rosePriceInUsd), // provide relative_total_value - formatParams: { - value: { - currency: 'USD', - } satisfies Intl.NumberFormatOptions, - }, - })} - - ) + )} ) diff --git a/src/app/pages/TokenDashboardPage/TokenSnapshot.tsx b/src/app/pages/TokenDashboardPage/TokenSnapshot.tsx index 6fd4eccfe..b78ad5e9f 100644 --- a/src/app/pages/TokenDashboardPage/TokenSnapshot.tsx +++ b/src/app/pages/TokenDashboardPage/TokenSnapshot.tsx @@ -57,7 +57,8 @@ export const TokenSnapshot: FC = ({