update staking labels and format valuers (#1609)

* update staking labels and format valuers * add missing return typr
interlay · Dec 4, 2023 · e0241cd · e0241cd · vercel · Dec 4, 2023
1 parent 49e3d6a
commit e0241cd
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git 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
@@ -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<CurrencyExt> | 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
@@ -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 })}
         </TransactionDetailsDt>
         <TransactionDetailsDd>
-          {data.totalStakedBalance.toHuman()} {GOVERNANCE_TOKEN.ticker}
+          {formatLargeNumber(data.totalStakedBalance.toBig().toNumber())} {GOVERNANCE_TOKEN.ticker}
         </TransactionDetailsDd>
       </TransactionDetailsGroup>
       <TransactionDetailsGroup>
         <TransactionDetailsDt>
-          {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 })}
         </TransactionDetailsDt>
         <TransactionDetailsDd>
-          {data.totalVotingSupply.toHuman()} {VOTE_GOVERNANCE_TOKEN.ticker}
+          {formatLargeNumber(data.totalVotingSupply.toBig().toNumber())} {VOTE_GOVERNANCE_TOKEN.ticker}
         </TransactionDetailsDd>
       </TransactionDetailsGroup>
     </TransactionDetails>