Sync token UI with API changes

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<FiatValueProps> = ({ isLoading, value }) => {
+  const { t } = useTranslation()
+
+  return (
+    <>
+      {!isLoading && value
+        ? t('common.fiatValueInUSD', {
+            value: value,
+            formatParams: {
+              value: {
+                currency: 'USD',
+              } satisfies Intl.NumberFormatOptions,
+            },
+          })
+        : t('common.missing')}
+    </>
+  )
+}

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: <FiatValue isLoading={priceQuery.isLoading} value={marketCapValue} />,
           key: 'marketCap',
           align: TableCellAlign.Right,
         },

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<TokenMarketCapCardProps> = ({ isLoading, rosePriceInUsd, scope }) => {
-  const { t } = useTranslation()
+export const TokenMarketCapCard: FC<TokenMarketCapCardProps> = ({
+  address,
+  isPriceLoading,
+  rosePriceInUsd,
+  scope,
+}) => {
+  const { isLoading, token } = useTokenInfo(scope, address)
+  const marketCapValue = getTokenMarketCap(token?.relative_total_value, rosePriceInUsd)
 
   return (
     <SnapshotTextCard title={<MarketCapTitle scope={scope} />} withConstantHeight>
-      {isLoading ? (
+      {isLoading && isPriceLoading ? (
         <Skeleton variant="text" />
       ) : (
-        rosePriceInUsd && (
-          <>
-            {t('common.fiatValueInUSD', {
-              value: getTokenMarketCap(8.01909111301725e22, rosePriceInUsd), // provide relative_total_value
-              formatParams: {
-                value: {
-                  currency: 'USD',
-                } satisfies Intl.NumberFormatOptions,
-              },
-            })}
-          </>
-        )
+        <FiatValue isLoading={isPriceLoading} value={marketCapValue} />
       )}
     </SnapshotTextCard>
   )

src/app/pages/TokenDashboardPage/TokenSnapshot.tsx

@@ -57,7 +57,8 @@ export const TokenSnapshot: FC<TokenSnapshotProps> = ({
         </StyledGrid>
         <StyledGrid item xs={22} md={6}>
           <TokenMarketCapCard
-            isLoading={isRosePriceInUsdLoading}
+            address={address}
+            isPriceLoading={isRosePriceInUsdLoading}
             rosePriceInUsd={rosePriceInUsd}
             scope={scope}
           />