diff --git a/ui/hooks/useCurrencyDisplay.js b/ui/hooks/useCurrencyDisplay.js index f4a6302567e6..192aebf37906 100644 --- a/ui/hooks/useCurrencyDisplay.js +++ b/ui/hooks/useCurrencyDisplay.js @@ -22,7 +22,7 @@ const MIN_AMOUNT_DISPLAY = `<${MIN_AMOUNT}`; // The default precision for displaying currency values. // It set to the number of decimal places in the minimum amount. -export const MIN_AMOUNT_DECIMALS = new BigNumber(MIN_AMOUNT).decimalPlaces(); +export const DEFAULT_PRECISION = new BigNumber(MIN_AMOUNT).decimalPlaces(); /** * Defines the shape of the options parameter for useCurrencyDisplay @@ -74,7 +74,7 @@ export function useCurrencyDisplay( ) { const ethDisplayValue = new Numeric(inputValue, 16, EtherDenomination.WEI) .toDenomination(denomination || EtherDenomination.ETH) - .round(numberOfDecimals || MIN_AMOUNT_DECIMALS) + .round(numberOfDecimals || DEFAULT_PRECISION) .toBase(10) .toString(); diff --git a/ui/pages/confirmations/components/simulation-details/amount-pill.tsx b/ui/pages/confirmations/components/simulation-details/amount-pill.tsx index d16ba5eb6f15..87fec23eb77c 100644 --- a/ui/pages/confirmations/components/simulation-details/amount-pill.tsx +++ b/ui/pages/confirmations/components/simulation-details/amount-pill.tsx @@ -46,10 +46,7 @@ export const AmountPill: React.FC<{ // ERC721 amounts are always 1 and are not displayed. if (asset.standard !== TokenStandard.ERC721) { const formattedAmount = formatAmount(locale, amount.abs()); - const fullPrecisionAmount = formatAmountMaxPrecision( - locale, - amount.abs().toNumber(), - ); + const fullPrecisionAmount = formatAmountMaxPrecision(locale, amount.abs()); amountParts.push(formattedAmount); tooltipParts.push(fullPrecisionAmount); diff --git a/ui/pages/confirmations/components/simulation-details/formatAmount.ts b/ui/pages/confirmations/components/simulation-details/formatAmount.ts index 9e2c3bae1dff..1314b3b5f911 100644 --- a/ui/pages/confirmations/components/simulation-details/formatAmount.ts +++ b/ui/pages/confirmations/components/simulation-details/formatAmount.ts @@ -1,7 +1,7 @@ import { BigNumber } from 'bignumber.js'; import { MIN_AMOUNT, - MIN_AMOUNT_DECIMALS, + DEFAULT_PRECISION, } from '../../../../hooks/useCurrencyDisplay'; // The number of significant decimals places to show for amounts less than 1. @@ -9,13 +9,14 @@ const MAX_SIGNIFICANT_DECIMAL_PLACES = 3; const ZERO_DISPLAY = '0'; -export const formatAmountMaxPrecision = ( +export function formatAmountMaxPrecision( locale: string, num: number | BigNumber, -): string => - new Intl.NumberFormat(locale, { +): string { + return new Intl.NumberFormat(locale, { minimumSignificantDigits: 1, }).format(new BigNumber(num.toString()).toNumber()); +} /** * Formats the a token amount with variable precision and significant @@ -65,7 +66,7 @@ export function formatAmount(locale: string, amount: BigNumber): string { return new Intl.NumberFormat(locale, { maximumSignificantDigits: MAX_SIGNIFICANT_DECIMAL_PLACES, } as Intl.NumberFormatOptions).format( - amount.round(MIN_AMOUNT_DECIMALS).toNumber(), + amount.round(DEFAULT_PRECISION).toNumber(), ); }