diff --git a/src/assets/locales/en/translation.json b/src/assets/locales/en/translation.json index 96f09cb03..7d94e975a 100644 --- a/src/assets/locales/en/translation.json +++ b/src/assets/locales/en/translation.json @@ -541,8 +541,8 @@ }, "staking_page": { "stake_ticker": "Stake {{ticker}}", - "total_staked_ticker_in_the_network": "Total Staked {{ticker}} in the network", - "total_ticker_in_the_network": "Total {{ticker}} in the network", + "total_staked_ticker_in_the_network": "Total Staked {{ticker}}", + "total_ticker_in_the_network": "{{ticker}} - Total vote-escrow", "time": { "one_week": "1 Week", "one_month": "1 Month", diff --git a/src/common/utils/utils.ts b/src/common/utils/utils.ts index 693636ce3..180e14954 100644 --- a/src/common/utils/utils.ts +++ b/src/common/utils/utils.ts @@ -135,6 +135,16 @@ const formatPercentage = ( return `${format(percentage)}%`; }; +const formatLargeNumber = (amount: number): string => { + const { format } = new Intl.NumberFormat(undefined, { + notation: 'compact', + maximumFractionDigits: 2, + minimumFractionDigits: 2 + }); + + return format(amount); +}; + function displayMonetaryAmount(amount: MonetaryAmount | undefined, defaultValue = '0.00'): string { if (amount === undefined) return defaultValue; @@ -194,6 +204,7 @@ export { displayMonetaryAmountInUSDFormat, formatDateTime, formatDateTimePrecise, + formatLargeNumber, formatNumber, formatPercentage, formatUSD, diff --git a/src/pages/Staking/components/StakingForm/StakingNetworkDetails.tsx b/src/pages/Staking/components/StakingForm/StakingNetworkDetails.tsx index 41e01c0b9..2522ec21f 100644 --- a/src/pages/Staking/components/StakingForm/StakingNetworkDetails.tsx +++ b/src/pages/Staking/components/StakingForm/StakingNetworkDetails.tsx @@ -1,5 +1,6 @@ import { useTranslation } from 'react-i18next'; +import { formatLargeNumber } from '@/common/utils/utils'; import { TransactionDetails, TransactionDetailsDd, @@ -28,15 +29,15 @@ const StakingNetworkDetails = ({ data, ...props }: StakingNetworkDetailsProps): {t('staking_page.total_staked_ticker_in_the_network', { ticker: GOVERNANCE_TOKEN.ticker })} - {data.totalStakedBalance.toHuman()} {GOVERNANCE_TOKEN.ticker} + {formatLargeNumber(data.totalStakedBalance.toBig().toNumber())} {GOVERNANCE_TOKEN.ticker} - {t('staking_page.total_ticker_in_the_network', { ticker: GOVERNANCE_TOKEN.ticker })} + {t('staking_page.total_ticker_in_the_network', { ticker: VOTE_GOVERNANCE_TOKEN.ticker })} - {data.totalVotingSupply.toHuman()} {VOTE_GOVERNANCE_TOKEN.ticker} + {formatLargeNumber(data.totalVotingSupply.toBig().toNumber())} {VOTE_GOVERNANCE_TOKEN.ticker}