diff --git a/src/containers/votingTerminal/breakdownTab.tsx b/src/containers/votingTerminal/breakdownTab.tsx index d007cffd2..016fa8fb6 100644 --- 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 = ({ 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 + }`} /> ))} diff --git a/src/utils/proposals.ts b/src/utils/proposals.ts index 862267467..35d46e3d2 100644 --- 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() + ) + ), }, }; }