fix: Swap Widget from amount truncation to next non-zero digit (#1268)

immutable · Dec 11, 2023 · dd5b8ed · dd5b8ed
1 parent 5c165f9
commit dd5b8ed
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 7 deletions.
diff --git a/packages/checkout/widgets-lib/src/lib/utils.test.ts b/packages/checkout/widgets-lib/src/lib/utils.test.ts
@@ -435,8 +435,20 @@ describe('utils', () => {
       expect(tokenValueFormat('0.0000012')).toEqual('0.000001');
     });
 
-    it(`should format to maximum of ${DEFAULT_TOKEN_FORMATTING_DECIMALS} decimal places`, () => {
-      expect(tokenValueFormat('0.0000001')).toEqual('0.000000');
+    it(`should format to default maximum of ${DEFAULT_TOKEN_FORMATTING_DECIMALS} decimal places`, () => {
+      expect(tokenValueFormat('0.00000012345')).toEqual('0.000000');
+    });
+
+    it('should format to custom maximum decimal places of 3', () => {
+      expect(tokenValueFormat('0.00000012345', 3)).toEqual('0.000');
+    });
+
+    it('should format to custom maximum decimal places of 18', () => {
+      expect(tokenValueFormat('0.000000000000000000', 18)).toEqual('0.000000000000000000');
+    });
+
+    it('should format to first non zero digit before maximum decimal places of 18', () => {
+      expect(tokenValueFormat('0.0000000012345', 18)).toEqual('0.000000001');
     });
   });
 

diff --git a/packages/checkout/widgets-lib/src/lib/utils.ts b/packages/checkout/widgets-lib/src/lib/utils.ts
@@ -93,7 +93,10 @@ const tokenValueFormatDecimals = (s: string, numDecimals: number): string => {
   return parseFloat(s.substring(0, pointIndex + numDecimals + 1)).toFixed(numDecimals);
 };
 
-export const tokenValueFormat = (s: Number | string): string => {
+export const tokenValueFormat = (
+  s: Number | string,
+  maxDecimals: number = DEFAULT_TOKEN_FORMATTING_DECIMALS,
+): string => {
   const asString = s.toString();
 
   // Only float numbers will be handled by this function
@@ -104,7 +107,19 @@ export const tokenValueFormat = (s: Number | string): string => {
   // 1. The number provided starts with "." (e.g. ".012")
   // 2. The number starts with 0 (e.g. "0.234")
   if (asString[0] === '.' || parseInt(asString[0], 10) === 0) {
-    return tokenValueFormatDecimals(asString, DEFAULT_TOKEN_FORMATTING_DECIMALS);
+    let formattedDecimals = Math.min(maxDecimals, DEFAULT_TOKEN_FORMATTING_DECIMALS);
+    let formattedValue = tokenValueFormatDecimals(asString, formattedDecimals);
+    if (parseFloat(formattedValue) === 0) {
+      // Ensure we return a value greater than 0
+      while ((formattedValue[formattedValue.length - 1] || '') === '0' && formattedDecimals < maxDecimals) {
+        formattedDecimals += 1;
+        formattedValue = tokenValueFormatDecimals(asString, formattedDecimals);
+        if ((formattedValue[formattedValue.length - 1] || '') !== '0') {
+          break;
+        }
+      }
+    }
+    return formattedValue;
   }
 
   // In case the number is greater than 1 then the formatting will look slightly different.

diff --git a/packages/checkout/widgets-lib/src/widgets/swap/components/SwapForm.tsx b/packages/checkout/widgets-lib/src/widgets/swap/components/SwapForm.tsx
@@ -276,10 +276,13 @@ export function SwapForm({ data }: SwapFromProps) {
 
       setToAmount(
         formatZeroAmount(
-          tokenValueFormat(utils.formatUnits(
-            result.quote.amount.value,
+          tokenValueFormat(
+            utils.formatUnits(
+              result.quote.amount.value,
+              result.quote.amount.token.decimals,
+            ),
             result.quote.amount.token.decimals,
-          )),
+          ),
         ),
       );