diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx index 81cd690e6f65..02a91ce95afc 100644 --- a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx +++ b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx @@ -55,8 +55,6 @@ const PermitSimulation: React.FC<{ const { tokenValue, tokenValueMaxPrecision } = useMemo(() => { const tokenAmount = calcTokenAmount(value, tokenDecimals); - // FIXME - Precision may be lost for large values when using formatAmount - /** @see {@link https://github.com/MetaMask/metamask-extension/issues/25755} */ return { tokenValue: formatAmount('en-US', tokenAmount), tokenValueMaxPrecision: formatAmountMaxPrecision('en-US', tokenAmount), diff --git a/ui/pages/confirmations/components/simulation-details/formatAmount.test.ts b/ui/pages/confirmations/components/simulation-details/formatAmount.test.ts index f7a627e46e5c..7f73e0ab42fc 100644 --- a/ui/pages/confirmations/components/simulation-details/formatAmount.test.ts +++ b/ui/pages/confirmations/components/simulation-details/formatAmount.test.ts @@ -37,14 +37,10 @@ describe('formatAmount', () => { [47361034.006, '47,361,034'], ['12130982923409.5', '12,130,982,923,410'], ['1213098292340944.5', '1,213,098,292,340,945'], - // Precision is lost after the value is greator than Number.MAX_SAFE_INTEGER. The digits after - // the 15th digit become 0's. - // TODO fix the precision - /** @see {@link https://github.com/MetaMask/metamask-extension/issues/25755} */ - ['30001231231212312138768', '30,001,231,231,212,312,000,000'], + ['30001231231212312138768', '30,001,231,231,212,312,138,768'], [ - '115792089237316195423570985008687907853269984665640564039457584007913129639935', - '115,792,089,237,316,200,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000', + '1157920892373161954235709850086879078532699846656405640394575.84007913129639935', + '1,157,920,892,373,161,954,235,709,850,086,879,078,532,699,846,656,405,640,394,576', ], ])( 'formats amount greater than or equal to 1 with appropriate decimal precision (%s => %s)', diff --git a/ui/pages/confirmations/components/simulation-details/formatAmount.ts b/ui/pages/confirmations/components/simulation-details/formatAmount.ts index 1314b3b5f911..213b55d52083 100644 --- a/ui/pages/confirmations/components/simulation-details/formatAmount.ts +++ b/ui/pages/confirmations/components/simulation-details/formatAmount.ts @@ -13,9 +13,18 @@ export function formatAmountMaxPrecision( locale: string, num: number | BigNumber, ): string { - return new Intl.NumberFormat(locale, { - minimumSignificantDigits: 1, - }).format(new BigNumber(num.toString()).toNumber()); + const bigNumberValue = new BigNumber(num); + const numberOfDecimals = bigNumberValue.decimalPlaces(); + const formattedValue = bigNumberValue.toFixed(numberOfDecimals); + + const [integerPart, fractionalPart] = formattedValue.split('.'); + const formattedIntegerPart = new Intl.NumberFormat(locale).format( + integerPart as unknown as number, + ); + + return fractionalPart + ? `${formattedIntegerPart}.${fractionalPart}` + : formattedIntegerPart; } /** @@ -82,5 +91,10 @@ export function formatAmount(locale: string, amount: BigNumber): string { return new Intl.NumberFormat(locale, { maximumFractionDigits, - } as Intl.NumberFormatOptions).format(amount.toNumber()); + } as Intl.NumberFormatOptions).format( + // string is valid parameter for format function + // for some reason it gives TS issue + // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/format#number + amount.toFixed(maximumFractionDigits) as unknown as number, + ); }