diff --git a/packages/checkout/widgets-lib/src/lib/constants.ts b/packages/checkout/widgets-lib/src/lib/constants.ts
index b1c6334016..46fd171343 100644
--- 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
index a9eb525435..ca3bcc27e5 100644
--- 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
index ba57dccf6d..6e570aef69 100644
--- 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
index 9be0fafa59..9ac83e38aa 100644
--- 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
index edbcbe6cb4..c40d5de575 100644
--- 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
index f6bf343687..f5c5ace213 100644
--- 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({
{`${t('views.ADD_TOKENS.fees.fiatPricePrefix')}
- $${getFormattedNumberWithDecimalPlaces(selectedAmountUsd)}`}
+ $${getFormattedAmounts(selectedAmountUsd)}`}
)}
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
index 3109ca4d29..04e4c89316 100644
--- 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({
>
{`${t('views.ADD_TOKENS.fees.fiatPricePrefix')} $${
- route?.route.estimate.fromAmountUSD ?? ''
+ getFormattedAmounts(route?.route.estimate.fromAmountUSD ?? '')
}`}
@@ -788,7 +787,7 @@ export function Review({
{' '}
=
{' '}
- {getFormattedNumberWithDecimalPlaces(
+ {getFormattedAmounts(
route.route.estimate.exchangeRate,
)}
{' '}
@@ -869,7 +868,7 @@ export function Review({
>
{`${t('views.ADD_TOKENS.fees.fiatPricePrefix')} $${
- route?.route.estimate.toAmountUSD ?? ''
+ getFormattedAmounts(route?.route.estimate.toAmountUSD ?? '')
}`}
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
index 90edaa6b1e..3264c7286a 100644
--- 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
index b952aeb497..a4a7119e30 100644
--- 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,
});
});