[NO CHANGELOG] [Commerce Widget] Fix/add tokens amounts & update deci…

…mals (#2425)
immutable · Nov 28, 2024 · 866c52c · 866c52c
1 parent abc296a
commit 866c52c
Show file tree

Hide file tree

Showing 9 changed files with 22 additions and 28 deletions.
diff --git a/packages/checkout/widgets-lib/src/lib/constants.ts b/packages/checkout/widgets-lib/src/lib/constants.ts
@@ -7,7 +7,7 @@ export const ENV_DEVELOPMENT = 'development' as Environment;
 export const NATIVE = 'native';
 
 export const DEFAULT_TOKEN_DECIMALS = 18;
-export const DEFAULT_TOKEN_FORMATTING_DECIMALS = 6;
+export const DEFAULT_TOKEN_FORMATTING_DECIMALS = 5;
 // Used to enforce the number of decimals to show if the number is greater than 1
 export const DEFAULT_GT_ONE_TOKEN_FORMATTING_DECIMALS = 2;
 // Used to enforce the number of decimals in the input fields

diff --git a/packages/checkout/widgets-lib/src/lib/utils.test.ts b/packages/checkout/widgets-lib/src/lib/utils.test.ts
@@ -432,11 +432,11 @@ describe('utils', () => {
     });
 
     it(`should format number to ${DEFAULT_TOKEN_FORMATTING_DECIMALS} decimal places`, () => {
-      expect(tokenValueFormat('0.0000012')).toEqual('0.000001');
+      expect(tokenValueFormat('0.0000012')).toEqual('0.00000');
     });
 
     it(`should format to default maximum of ${DEFAULT_TOKEN_FORMATTING_DECIMALS} decimal places`, () => {
-      expect(tokenValueFormat('0.00000012345')).toEqual('0.000000');
+      expect(tokenValueFormat('0.00000012345')).toEqual('0.00000');
     });
 
     it('should format to custom maximum decimal places of 3', () => {

diff --git a/packages/checkout/widgets-lib/src/lib/validations/amountInputValidations.test.ts b/packages/checkout/widgets-lib/src/lib/validations/amountInputValidations.test.ts
@@ -1,7 +1,7 @@
 import { amountInputValidation } from './amountInputValidations';
 
 describe('amountInPutValidation', () => {
-  const validTestCases = ['123.123456', '1.12345', '123456', '123456.0'];
+  const validTestCases = ['123.12345', '1.12345', '123456', '123456.0'];
   const invalidTestCases = ['123.1234567', '1.1234567', 'blah'];
 
   validTestCases.forEach((testCase) => {

diff --git a/packages/checkout/widgets-lib/src/lib/validations/widgetValidators.test.ts b/packages/checkout/widgets-lib/src/lib/validations/widgetValidators.test.ts
@@ -30,18 +30,18 @@ describe('widget validators', () => {
   });
 
   describe('Amount Validator', () => {
-    const validCases = ['1', '1.0', '1.234567', '100000000', '']; // empty amount should pass as valid
+    const validCases = ['1', '1.0', '1.23456', '100000000', '']; // empty amount should pass as valid
     const invalidCases = ['acdas', '0.1234s', '1.2345678', undefined];
 
     validCases.forEach((testCase) => {
-      it(`should validate amount as a float with 6 decimal places for ${testCase}`, () => {
+      it(`should validate amount as a float with 5 decimal places for ${testCase}`, () => {
         const result = isValidAmount(testCase);
         expect(result).toBeTruthy();
       });
     });
 
     invalidCases.forEach((testCase) => {
-      it(`should return false for any amount not a float with 6 decimal places for ${testCase}`, () => {
+      it(`should return false for any amount not a float with 5 decimal places for ${testCase}`, () => {
         const result = isValidAmount(testCase);
         expect(result).toBeFalsy();
       });

diff --git a/packages/checkout/widgets-lib/src/widgets/add-tokens/functions/getFormattedNumber.ts b/packages/checkout/widgets-lib/src/widgets/add-tokens/functions/getFormattedNumber.ts
@@ -13,8 +13,12 @@ export const getFormattedAmounts = (
 ) => {
   const amount = typeof value === 'number' ? value : parseFloat(value);
 
+  if (Number.isNaN(amount)) {
+    return '-.--';
+  }
+
   if (amount > 0 && amount < 1) {
-    return tokenValueFormat(amount, maxDecimals).replace(/\.?0+$/, '');
+    return tokenValueFormat(value, maxDecimals).replace(/\.?0+$/, '');
   }
 
   return tokenValueFormat(amount, maxDecimals);
@@ -26,7 +30,7 @@ export const getFormattedAmounts = (
 export function getFormattedNumber(
   value?: string | number,
   decimals?: number,
-  maxDecimals = DEFAULT_TOKEN_FORMATTING_DECIMALS,
+  maxDecimals = 5,
 ): string {
   const amount = String(value);
   let formattedValue = '';
@@ -45,12 +49,3 @@ export function getFormattedNumber(
 
   return getFormattedAmounts(formattedValue, maxDecimals);
 }
-
-export function getFormattedNumberWithDecimalPlaces(value: string | number, decimals = 2) : string {
-  const amount = typeof value === 'number' ? value : parseFloat(value);
-
-  return amount.toLocaleString('en-US', {
-    minimumFractionDigits: 0,
-    maximumFractionDigits: decimals,
-  });
-}
diff --git a/packages/checkout/widgets-lib/src/widgets/add-tokens/views/AddTokens.tsx b/packages/checkout/widgets-lib/src/widgets/add-tokens/views/AddTokens.tsx
@@ -65,10 +65,10 @@ import { validateToAmount } from '../functions/amountValidation';
 import { OnboardingDrawer } from '../components/OnboardingDrawer';
 import { useError } from '../hooks/useError';
 import { SquidFooter } from '../components/SquidFooter';
-import { getFormattedNumberWithDecimalPlaces } from '../functions/getFormattedNumber';
 import { TokenDrawerMenu } from '../components/TokenDrawerMenu';
 import { PULSE_SHADOW } from '../utils/animation';
 import { checkSanctionedAddresses } from '../functions/checkSanctionedAddresses';
+import { getFormattedAmounts } from '../functions/getFormattedNumber';
 
 interface AddTokensProps {
   checkout: Checkout;
@@ -607,7 +607,7 @@ export function AddTokens({
 
               <HeroFormControl.Caption>
                 {`${t('views.ADD_TOKENS.fees.fiatPricePrefix')} 
-                $${getFormattedNumberWithDecimalPlaces(selectedAmountUsd)}`}
+                $${getFormattedAmounts(selectedAmountUsd)}`}
               </HeroFormControl.Caption>
             </HeroFormControl>
           )}

diff --git a/packages/checkout/widgets-lib/src/widgets/add-tokens/views/Review.tsx b/packages/checkout/widgets-lib/src/widgets/add-tokens/views/Review.tsx
@@ -64,7 +64,6 @@ import { getRouteChains } from '../functions/getRouteChains';
 import {
   getFormattedAmounts,
   getFormattedNumber,
-  getFormattedNumberWithDecimalPlaces,
 } from '../functions/getFormattedNumber';
 import { SquidFooter } from '../components/SquidFooter';
 import { useError } from '../hooks/useError';
@@ -729,7 +728,7 @@ export function Review({
                 >
                   <PriceDisplay.Caption size="small">
                     {`${t('views.ADD_TOKENS.fees.fiatPricePrefix')} $${
-                      route?.route.estimate.fromAmountUSD ?? ''
+                      getFormattedAmounts(route?.route.estimate.fromAmountUSD ?? '')
                     }`}
                   </PriceDisplay.Caption>
                 </PriceDisplay>
@@ -788,7 +787,7 @@ export function Review({
                     {' '}
                     =
                     {' '}
-                    {getFormattedNumberWithDecimalPlaces(
+                    {getFormattedAmounts(
                       route.route.estimate.exchangeRate,
                     )}
                     {' '}
@@ -869,7 +868,7 @@ export function Review({
                 >
                   <PriceDisplay.Caption size="small">
                     {`${t('views.ADD_TOKENS.fees.fiatPricePrefix')} $${
-                      route?.route.estimate.toAmountUSD ?? ''
+                      getFormattedAmounts(route?.route.estimate.toAmountUSD ?? '')
                     }`}
                   </PriceDisplay.Caption>
                 </PriceDisplay>

diff --git a/packages/checkout/widgets-lib/src/widgets/sale/functions/fundingBalanceFees.test.ts b/packages/checkout/widgets-lib/src/widgets/sale/functions/fundingBalanceFees.test.ts
@@ -150,7 +150,7 @@ describe('getFundingBalanceFeeBreakDown', () => {
   it('should return fee breakdowns', () => {
     const expected = [
       {
-        amount: '0.000200',
+        amount: '0.00020',
         fiatAmount: '≈ drawers.feesBreakdown.fees.fiatPricePrefix-.--',
         label: 'drawers.feesBreakdown.fees.swapGasFee.label',
         prefix: '~ ',
@@ -162,7 +162,7 @@ describe('getFundingBalanceFeeBreakDown', () => {
         },
       },
       {
-        amount: '0.000010',
+        amount: '0.00001',
         fiatAmount: '≈ drawers.feesBreakdown.fees.fiatPricePrefix-.--',
         label: 'drawers.feesBreakdown.fees.approvalFee.label',
         prefix: '~ ',
@@ -174,7 +174,7 @@ describe('getFundingBalanceFeeBreakDown', () => {
         },
       },
       {
-        amount: '0.600000',
+        amount: '0.60000',
         fiatAmount: '≈ drawers.feesBreakdown.fees.fiatPricePrefix-.--',
         label: 'drawers.feesBreakdown.fees.swapSecondaryFee.label',
         prefix: '',

diff --git a/packages/checkout/widgets-lib/src/widgets/swap/functions/swapConversionRate.test.ts b/packages/checkout/widgets-lib/src/widgets/swap/functions/swapConversionRate.test.ts
@@ -196,7 +196,7 @@ describe('formatQuoteConversionRate', () => {
     expect(mockTranslate).toHaveBeenCalledWith(labelKey, {
       fromSymbol: 'ETH',
       toSymbol: 'DAI',
-      rate: '0.499750',
+      rate: '0.49975',
       fee: 1,
     });
   });