feat: add validation to slippage input

lifinance · Feb 18, 2022 · fa14a49 · fa14a49
1 parent aea18ea
commit fa14a49
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 10 deletions.
diff --git a/packages/widget/src/components/SettingsDrawer/SettingsDrawer.tsx b/packages/widget/src/components/SettingsDrawer/SettingsDrawer.tsx
@@ -12,10 +12,10 @@ import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { SwapFormKey } from '../../providers/SwapFormProvider';
 import { ContainerDrawer } from '../ContainerDrawer';
-import { Input } from '../Input';
 import { Select } from '../Select';
 import { AdvancedPreferences } from './AdvancedPreferences';
 import { GasPriceButtonGroup } from './GasPriceButtonGroup';
+import { SlippageInput } from './SlippageInput';
 import { SettingsDrawerBase } from './types';
 
 export const SettingsDrawer = forwardRef<SettingsDrawerBase, DrawerProps>(
@@ -63,14 +63,7 @@ export const SettingsDrawer = forwardRef<SettingsDrawerBase, DrawerProps>(
                     {t(`settings.slippage`)}
                   </Typography>
                 </Box>
-                <FormControl fullWidth>
-                  <Input
-                    size="small"
-                    placeholder={t(`settings.slippage`)}
-                    required
-                    inputProps={{ ...register(SwapFormKey.Slippage) }}
-                  />
-                </FormControl>
+                <SlippageInput />
               </Box>
               <GasPriceButtonGroup />
             </Box>

diff --git a/packages/widget/src/components/SettingsDrawer/SlippageInput.tsx b/packages/widget/src/components/SettingsDrawer/SlippageInput.tsx
@@ -0,0 +1,78 @@
+import { FormControl, InputAdornment } from '@mui/material';
+import { ChangeEvent, useEffect, useRef } from 'react';
+import { useFormContext, useWatch } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { SwapFormKey } from '../../providers/SwapFormProvider';
+import { Input } from '../Input';
+
+export const SlippageInput = () => {
+  const { t } = useTranslation();
+  const { register, setValue } = useFormContext();
+  const value = useWatch({
+    name: SwapFormKey.Slippage,
+  });
+  const defaultValue = useRef(value);
+
+  useEffect(() => {
+    register(SwapFormKey.Slippage);
+  }, [register]);
+
+  const handleChange = (
+    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
+    const { value } = event.target;
+    const parsedValue = parseFloat(value);
+    setValue(
+      SwapFormKey.Slippage,
+      `${
+        isNaN(parsedValue)
+          ? defaultValue.current
+          : parsedValue > 100
+          ? 100
+          : parsedValue < 0
+          ? Math.abs(parsedValue)
+          : value
+      }`,
+    );
+  };
+
+  const handleBlur = (
+    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
+    const { value } = event.target;
+    const parsedValue = parseFloat(value);
+    setValue(
+      SwapFormKey.Slippage,
+      `${
+        isNaN(parsedValue)
+          ? defaultValue.current
+          : parsedValue > 100
+          ? 100
+          : parsedValue < 0
+          ? Math.abs(parsedValue)
+          : parsedValue
+      }`,
+    );
+  };
+
+  return (
+    <FormControl fullWidth>
+      <Input
+        size="small"
+        placeholder={t(`settings.slippage`)}
+        endAdornment={<InputAdornment position="end">%</InputAdornment>}
+        autoComplete="off"
+        inputProps={{
+          type: 'number',
+          inputMode: 'numeric',
+          min: 0,
+          step: 0.1,
+        }}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        value={value}
+        name={SwapFormKey.Slippage}
+      />
+    </FormControl>
+  );
+};
diff --git a/packages/widget/src/providers/SwapFormProvider/SwapFormProvider.tsx b/packages/widget/src/providers/SwapFormProvider/SwapFormProvider.tsx
@@ -6,7 +6,7 @@ const defaultValues = {
   [SwapFormKey.FromAmount]: 0,
   [SwapFormKey.FromSearchTokensFilter]: '',
   [SwapFormKey.GasPrice]: 'normal',
-  [SwapFormKey.Slippage]: '0.5',
+  [SwapFormKey.Slippage]: '3',
   [SwapFormKey.ToAmount]: 0,
   [SwapFormKey.ToSearchTokensFilter]: '',
 };