abbreviate token amount

aragon · Nov 1, 2023 · dc9b01a · dc9b01a
1 parent f9a6ac7
commit dc9b01a
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 10 deletions.
diff --git a/src/containers/votingTerminal/breakdownTab.tsx b/src/containers/votingTerminal/breakdownTab.tsx
@@ -3,9 +3,9 @@ import React from 'react';
 import {useTranslation} from 'react-i18next';
 import styled from 'styled-components';
 
-import {formatterUtils, NumberFormat} from '@aragon/ods';
 import {TokenVotingOptions} from 'utils/proposals';
 import {ProposalVoteResults, VotingTerminalProps} from '.';
+import {abbreviateTokenAmount} from 'utils/tokens';
 
 type BreakdownProps = {
   approvals?: string[];
@@ -52,9 +52,9 @@ const BreakdownTab: React.FC<BreakdownProps> = ({
             key={key}
             option={key as TokenVotingOptions}
             percentage={result.percentage}
-            value={`${formatterUtils.formatNumber(result.value, {
-              format: NumberFormat.TOKEN_AMOUNT_SHORT,
-            })} ${token.symbol}`}
+            value={`${abbreviateTokenAmount(result.value.toString())} ${
+              token.symbol
+            }`}
           />
         ))}
       </VStackRelaxed>

diff --git a/src/utils/proposals.ts b/src/utils/proposals.ts
@@ -57,6 +57,11 @@ const MappedVotes: {
   3: 'no',
 };
 
+const formatter = new Intl.NumberFormat('en-US', {
+  minimumFractionDigits: 0, // Minimum number of decimal places
+  maximumFractionDigits: 2, // Maximum number of decimal places
+});
+
 // this type guard will need to evolve when there are more types
 export function isTokenBasedProposal(
   proposal: SupportedProposals | undefined | null
@@ -218,18 +223,29 @@ export function getErc20Results(
 
   const totalYesNo = Big(yes.toString()).plus(no.toString());
 
+  // TODO: Format with new ODS formatter
   return {
     yes: {
-      value: formatUnits(yes, tokenDecimals),
-      percentage: Big(yes.toString()).mul(100).div(totalYesNo).toNumber(),
+      value: formatter.format(Number(formatUnits(yes, tokenDecimals))),
+      percentage: Number(
+        formatter.format(
+          Big(yes.toString()).mul(100).div(totalYesNo).toNumber()
+        )
+      ),
     },
     no: {
-      value: formatUnits(no, tokenDecimals),
-      percentage: Big(no.toString()).mul(100).div(totalYesNo).toNumber(),
+      value: formatter.format(Number(formatUnits(no, tokenDecimals))),
+      percentage: Number(
+        formatter.format(Big(no.toString()).mul(100).div(totalYesNo).toNumber())
+      ),
     },
     abstain: {
-      value: formatUnits(abstain, tokenDecimals),
-      percentage: Big(abstain.toString()).mul(100).div(totalYesNo).toNumber(),
+      value: formatter.format(Number(formatUnits(abstain, tokenDecimals))),
+      percentage: Number(
+        formatter.format(
+          Big(abstain.toString()).mul(100).div(totalYesNo).toNumber()
+        )
+      ),
     },
   };
 }