fix: change in number format to fix loss of precision for very big va…

…lues (#25968)
MetaMask · Aug 19, 2024 · ddc6bb4 · ddc6bb4
1 parent db10925
commit ddc6bb4
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 13 deletions.
diff --git a/.../confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx b/.../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
@@ -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
@@ -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,
+  );
 }