[NO CHANGELOG] [Add tokens Widget] Fix/add tokens invalid input (#2397)

immutable · Nov 14, 2024 · b8a511e · b8a511e
1 parent 769bcb0
commit b8a511e
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 27 deletions.
diff --git a/packages/checkout/widgets-lib/src/widgets/add-tokens/functions/amountValidation.ts b/packages/checkout/widgets-lib/src/widgets/add-tokens/functions/amountValidation.ts
@@ -1,16 +1,15 @@
-const VALID_NUMBER_REGEX = /^[0-9]+(\.[0-9]+)?$/;
+const VALID_NUMBER_REGEX = /^(0|[1-9]\d*)(\.\d*)?$/;
 
 /**
  * Validate the amount input
  * @param amount - The amount to validate
  * @returns An object containing the sanitized value, the float amount, and a boolean indicating if the amount is valid
  */
 export const validateToAmount = (amount: string) => {
-  const value = amount || '0';
+  const value = amount || '';
   const sanitizedValue = value.replace(/^0+(?=\d)/, '');
-  const floatAmount = parseFloat(sanitizedValue);
+  const isValid = VALID_NUMBER_REGEX.test(sanitizedValue);
+  const floatAmount = isValid ? parseFloat(sanitizedValue) : NaN;
 
-  const isValid = VALID_NUMBER_REGEX.test(sanitizedValue) && floatAmount > 0;
-
-  return { value: sanitizedValue, amount: floatAmount, isValid };
+  return { value: sanitizedValue, amount: floatAmount, isValid: isValid && floatAmount > 0 };
 };
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
@@ -188,22 +188,25 @@ export function AddTokens({
   const handleOnAmountInputChange = (event: ChangeEvent<HTMLInputElement>) => {
     const { value, amount, isValid } = validateToAmount(event.target.value);
 
-    if (!isValid && amount < 0) {
-      return;
+    if (isValid || amount === 0 || value === '') {
+      setInputValue(value);
+
+      if (amount > 0) {
+        setSelectedAmount(value);
+
+        track({
+          userJourney: UserJourney.ADD_TOKENS,
+          screen: 'InputScreen',
+          control: 'AmountInput',
+          controlType: 'TextInput',
+          extras: {
+            toAmount: value,
+          },
+        });
+      } else {
+        setSelectedAmount('');
+      }
     }
-
-    setInputValue(value);
-    setSelectedAmount(value);
-
-    track({
-      userJourney: UserJourney.ADD_TOKENS,
-      screen: 'InputScreen',
-      control: 'AmountInput',
-      controlType: 'TextInput',
-      extras: {
-        toAmount: value,
-      },
-    });
   };
 
   const {
@@ -550,7 +553,7 @@ export function AddTokens({
             <Body>{t('views.ADD_TOKENS.tokenSelection.buttonText')}</Body>
           ) : (
             <HeroFormControl
-              validationStatus={inputValue === '0' ? 'error' : 'success'}
+              validationStatus={validateToAmount(inputValue).isValid || inputValue === '' ? 'success' : 'error'}
             >
               <HeroFormControl.Label>
                 {t('views.ADD_TOKENS.tokenSelection.tokenLabel')}
@@ -560,9 +563,9 @@ export function AddTokens({
               <HeroTextInput
                 inputRef={inputRef}
                 testId="add-tokens-amount-input"
-                type="number"
+                type="text"
                 value={inputValue}
-                onChange={(value) => handleOnAmountInputChange(value)}
+                onChange={(event) => handleOnAmountInputChange(event)}
                 placeholder="0"
                 maxTextSize="xLarge"
               />
@@ -590,7 +593,7 @@ export function AddTokens({
             <SelectedWallet
               sx={selectedToken
                 && !fromAddress
-                && inputValue
+                && selectedAmount
                 ? { animation: `${PULSE_SHADOW} 2s infinite ease-in-out` }
                 : {}}
               label={t('views.ADD_TOKENS.walletSelection.fromText')}
@@ -603,7 +606,7 @@ export function AddTokens({
                 setShowPayWithDrawer(true);
               }}
             >
-              {selectedToken && fromAddress && inputValue && (
+              {selectedToken && fromAddress && selectedAmount && (
               <>
                 <MenuItem.BottomSlot.Divider
                   sx={fromAddress ? { ml: 'base.spacing.x4' } : undefined}
@@ -640,7 +643,7 @@ export function AddTokens({
               sx={selectedToken
                 && fromAddress
                 && !toAddress
-                && inputValue
+                && selectedAmount
                 ? { animation: `${PULSE_SHADOW} 2s infinite ease-in-out` }
                 : {}}
               label={t('views.ADD_TOKENS.walletSelection.toText')}