From f6a1013db98387a51716d15fd8762448bfca6dce Mon Sep 17 00:00:00 2001
From: Tom Jeatt <hello@tomjeatt.com>
Date: Mon, 4 Dec 2023 14:08:28 +0000
Subject: [PATCH] update staking labels and format valuers

---
 src/assets/locales/en/translation.json                |  4 ++--
 src/common/utils/utils.ts                             | 11 +++++++++++
 .../components/StakingForm/StakingNetworkDetails.tsx  |  7 ++++---
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/assets/locales/en/translation.json b/src/assets/locales/en/translation.json
index 96f09cb03f..7d94e975ad 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 693636ce3f..76f122c324 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) => {
+  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
index 41e01c0b93..2522ec21f0 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 })}
         </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>