Token list horizontal view: ticker after name, fix formatting supply

oasisprotocol · Jul 2, 2023 · 24eb097 · 24eb097
1 parent ecdce27
commit 24eb097
Showing 1 changed file with 6 additions and 5 deletions.
diff --git a/src/app/components/Tokens/TokenDetails.tsx b/src/app/components/Tokens/TokenDetails.tsx
@@ -8,8 +8,9 @@ import { TokenLink } from './TokenLink'
 import { CopyToClipboard } from '../CopyToClipboard'
 import { AccountLink } from '../Account/AccountLink'
 import { DashboardLink } from '../../pages/ParatimeDashboardPage/DashboardLink'
-import { LongDataDisplay } from '../LongDataDisplay'
 import { DelayedContractVerificationInfo } from '../Account/ContractVerificationInfo'
+import Box from '@mui/material/Box'
+import { COLORS } from '../../../styles/theme/colors'
 
 export const TokenDetails: FC<{
   isLoading?: boolean
@@ -36,6 +37,7 @@ export const TokenDetails: FC<{
       <dt>{t('common.name')}</dt>
       <dd>
         <TokenLink scope={token} address={token.eth_contract_addr ?? token.contract_addr} name={token.name} />
+        <Box sx={{ ml: 3, fontWeight: 700, color: COLORS.grayMedium }}>({token.symbol})</Box>
       </dd>
 
       <dt>{t(isMobile ? 'common.smartContract_short' : 'common.smartContract')}</dt>
@@ -55,11 +57,10 @@ export const TokenDetails: FC<{
 
       <dt>{t('tokens.totalSupply')}</dt>
       <dd>
-        <LongDataDisplay data={token.total_supply || t('common.missing')} threshold={100} fontWeight={400} />
+        {token.total_supply
+          ? t('tokens.totalSupplyValue', { value: token.total_supply })
+          : t('common.missing')}
       </dd>
-
-      <dt>{t('common.ticker')}</dt>
-      <dd>{token.symbol}</dd>
     </StyledDescriptionList>
   )
 }