refactor: extract components from swap page, improve input formatting

lifinance · Feb 21, 2022 · 07e5d69 · 07e5d69
1 parent 68d20e9
commit 07e5d69
Show file tree

Hide file tree

Showing 21 changed files with 392 additions and 340 deletions.
diff --git a/packages/widget/src/components/RoutePrioritySelect/RoutePrioritySelect.tsx b/packages/widget/src/components/RoutePrioritySelect/RoutePrioritySelect.tsx
@@ -0,0 +1,49 @@
+import { HelpOutline as HelpOutlineIcon } from '@mui/icons-material';
+import { Box, FormControl, MenuItem, Typography } from '@mui/material';
+import { useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { SwapFormKey } from '../../providers/SwapFormProvider';
+import { Select } from '../Select';
+
+export const RoutePrioritySelect: React.FC<{ fullWidth?: boolean }> = ({
+  fullWidth,
+}) => {
+  const { t } = useTranslation();
+  const { register } = useFormContext();
+
+  return (
+    <Box
+      sx={{
+        display: fullWidth ? 'block' : 'flex',
+        justifyContent: fullWidth ? 'unset' : 'space-between',
+        alignItems: fullWidth ? 'unset' : 'center',
+      }}
+    >
+      <Box
+        sx={{ display: 'flex', alignItems: 'center' }}
+        mb={fullWidth ? 1 : 0}
+      >
+        <HelpOutlineIcon sx={{ color: 'grey.500' }} />
+        <Typography
+          lineHeight="normal"
+          variant="subtitle1"
+          color="text.primary"
+          ml={1}
+        >
+          {t(`settings.routePriority.title`)}
+        </Typography>
+      </Box>
+      <FormControl sx={{ width: fullWidth ? '100%' : '50%' }} fullWidth>
+        <Select
+          defaultValue={1}
+          MenuProps={{ elevation: 2 }}
+          inputProps={{ ...register(SwapFormKey.RoutePriority) }}
+        >
+          <MenuItem value={1}>
+            {t(`settings.routePriority.recommended`)}
+          </MenuItem>
+        </Select>
+      </FormControl>
+    </Box>
+  );
+};
diff --git a/packages/widget/src/components/RoutePrioritySelect/index.ts b/packages/widget/src/components/RoutePrioritySelect/index.ts
@@ -0,0 +1 @@
+export * from './RoutePrioritySelect';
diff --git a/packages/widget/src/components/SelectTokenDrawer/SearchTokenInput.tsx b/packages/widget/src/components/SelectTokenDrawer/SearchTokenInput.tsx
@@ -27,6 +27,7 @@ export const SearchTokenInput = ({ formType }: SwapFormTypeProps) => {
             </InputAdornment>
           }
           inputProps={{
+            inputMode: 'search',
             ...register(SwapFormKey.FromSearchTokensFilter),
           }}
           autoComplete="off"

diff --git a/packages/widget/src/components/SelectTokenDrawer/SelectTokenDrawer.tsx b/packages/widget/src/components/SelectTokenDrawer/SelectTokenDrawer.tsx
@@ -6,7 +6,7 @@ import {
   MenuItem,
   Typography,
 } from '@mui/material';
-import { forwardRef, MutableRefObject, useState } from 'react';
+import { forwardRef, MutableRefObject, useEffect, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useResizeDetector } from 'react-resize-detector';
@@ -35,13 +35,13 @@ export const SelectTokenDrawer = forwardRef<SelectTokenDrawerBase, DrawerProps>(
     const closeDrawer = (ref as MutableRefObject<SelectTokenDrawerBase | null>)
       .current?.closeDrawer;
 
+    useEffect(() => {
+      register(SwapFormKey.FromToken);
+      register(SwapFormKey.ToToken);
+    }, [register]);
+
     return (
-      <ContainerDrawer
-        elementRef={drawerRef}
-        ref={ref}
-        onOpen={setFormType}
-        route="selectToken"
-      >
+      <ContainerDrawer elementRef={drawerRef} ref={ref} onOpen={setFormType}>
         <Box role="presentation">
           <TokenList
             height={drawerHeight ?? 0}

diff --git a/packages/widget/src/components/SendToRecipientForm.tsx b/packages/widget/src/components/SendToRecipientForm.tsx
diff --git a/packages/widget/src/components/SettingsDrawer/AdvancedPreferences.tsx b/packages/widget/src/components/SettingsDrawer/AdvancedPreferences.tsx
@@ -20,9 +20,8 @@ export const AdvancedPreferences = () => {
   };
 
   return (
-    <Box px={3}>
+    <Box p={3}>
       <Box
-        mt={3}
         sx={{
           display: 'flex',
           justifyContent: 'space-between',

diff --git a/packages/widget/src/components/SettingsDrawer/SettingsDrawer.tsx b/packages/widget/src/components/SettingsDrawer/SettingsDrawer.tsx
@@ -1,18 +1,9 @@
 import { HelpOutline as HelpOutlineIcon } from '@mui/icons-material';
-import {
-  Box,
-  Divider,
-  DrawerProps,
-  FormControl,
-  MenuItem,
-  Typography,
-} from '@mui/material';
+import { Box, Divider, DrawerProps, Typography } from '@mui/material';
 import { forwardRef } from 'react';
-import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { SwapFormKey } from '../../providers/SwapFormProvider';
 import { ContainerDrawer } from '../ContainerDrawer';
-import { Select } from '../Select';
+import { RoutePrioritySelect } from '../RoutePrioritySelect';
 import { AdvancedPreferences } from './AdvancedPreferences';
 import { GasPriceButtonGroup } from './GasPriceButtonGroup';
 import { SlippageInput } from './SlippageInput';
@@ -21,35 +12,13 @@ import { SettingsDrawerBase } from './types';
 export const SettingsDrawer = forwardRef<SettingsDrawerBase, DrawerProps>(
   (_, ref) => {
     const { t } = useTranslation();
-    const { register } = useFormContext();
 
     return (
       <ContainerDrawer ref={ref} route="settings">
         <Box role="presentation">
-          <Box px={3}>
-            <Box sx={{ display: 'flex', alignItems: 'center' }} mt={3} mb={1}>
-              <HelpOutlineIcon sx={{ color: 'grey.500' }} />
-              <Typography
-                variant="subtitle1"
-                color="text.secondary"
-                lineHeight="normal"
-                ml={1}
-              >
-                {t(`settings.routePriority.title`)}
-              </Typography>
-            </Box>
-            <FormControl fullWidth>
-              <Select
-                defaultValue={1}
-                MenuProps={{ elevation: 2 }}
-                inputProps={{ ...register(SwapFormKey.SwapRoute) }}
-              >
-                <MenuItem value={1}>
-                  {t(`settings.routePriority.recommended`)}
-                </MenuItem>
-              </Select>
-            </FormControl>
-            <Box sx={{ display: 'flex', alignItems: 'center' }} my={3}>
+          <Box p={3}>
+            <RoutePrioritySelect fullWidth />
+            <Box sx={{ display: 'flex', alignItems: 'center' }} mt={3}>
               <Box pr={2}>
                 <Box sx={{ display: 'flex', alignItems: 'center' }} mb={1}>
                   <HelpOutlineIcon

diff --git a/packages/widget/src/components/SettingsDrawer/SlippageInput.tsx b/packages/widget/src/components/SettingsDrawer/SlippageInput.tsx
@@ -1,3 +1,4 @@
+import { formatSlippage } from '@lifinance/widget/utils/format';
 import { FormControl, InputAdornment } from '@mui/material';
 import { ChangeEvent, useEffect, useRef } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
@@ -21,38 +22,19 @@ export const SlippageInput = () => {
     event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
   ) => {
     const { value } = event.target;
-    const parsedValue = parseFloat(value);
+    console.log(formatSlippage(value, defaultValue.current));
     setValue(
       SwapFormKey.Slippage,
-      `${
-        isNaN(parsedValue)
-          ? defaultValue.current
-          : parsedValue > 100
-          ? 100
-          : parsedValue < 0
-          ? Math.abs(parsedValue)
-          : value
-      }`,
+      formatSlippage(value, defaultValue.current, true),
     );
   };
 
   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
-      }`,
-    );
+    console.log(formatSlippage(value, defaultValue.current));
+    setValue(SwapFormKey.Slippage, formatSlippage(value, defaultValue.current));
   };
 
   return (
@@ -63,10 +45,7 @@ export const SlippageInput = () => {
         endAdornment={<InputAdornment position="end">%</InputAdornment>}
         autoComplete="off"
         inputProps={{
-          type: 'number',
-          inputMode: 'numeric',
-          min: 0,
-          step: 0.1,
+          inputMode: 'decimal',
         }}
         onChange={handleChange}
         onBlur={handleBlur}

diff --git a/packages/widget/src/components/SwapInput.tsx → .../components/SwapInput/SwapInput.style.tsx b/packages/widget/src/components/SwapInput.tsx → .../components/SwapInput/SwapInput.style.tsx
@@ -1,7 +1,7 @@
 import { styled } from '@mui/material/styles';
-import { Input } from './Input';
+import { Input as InputBase } from '../Input';
 
-export const SwapInput = styled(Input)({
+export const Input = styled(InputBase)({
   borderRadius: '0 0 8px 8px',
   borderWidth: '1px 2px 2px 2px',
   '& input[type="number"]::-webkit-outer-spin-button, & input[type="number"]::-webkit-inner-spin-button':

diff --git a/packages/widget/src/components/SwapInput/SwapInput.tsx b/packages/widget/src/components/SwapInput/SwapInput.tsx
@@ -0,0 +1,63 @@
+import { FormControl } from '@mui/material';
+import { ChangeEvent, useEffect } from 'react';
+import { useFormContext, useWatch } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import {
+  SwapFormKeyHelper,
+  SwapFormTypeProps,
+} from '../../providers/SwapFormProvider';
+import { formatAmount, formatTokenAmount } from '../../utils/format';
+import { SwapInputAdornment } from '../SwapInputAdornment';
+import { Input } from './SwapInput.style';
+
+export const SwapInput: React.FC<SwapFormTypeProps> = ({ formType }) => {
+  const { t } = useTranslation();
+  const {
+    register,
+    setValue,
+    formState: { isSubmitting },
+  } = useFormContext();
+  const amountKey = SwapFormKeyHelper.getAmountKey(formType);
+  const value = useWatch({
+    name: amountKey,
+  });
+
+  useEffect(() => {
+    register(amountKey, { required: true });
+  }, [amountKey, register]);
+  console.log(formatTokenAmount('5'));
+
+  const handleChange = (
+    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
+    const { value } = event.target;
+    setValue(amountKey, formatAmount(value, true));
+  };
+
+  const handleBlur = (
+    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
+    const { value } = event.target;
+    setValue(amountKey, formatAmount(value));
+  };
+
+  return (
+    <FormControl disabled={isSubmitting} fullWidth>
+      <Input
+        size="small"
+        autoComplete="off"
+        placeholder={t(`swap.enterAmount`)}
+        endAdornment={<SwapInputAdornment formType={formType} />}
+        inputProps={{
+          inputMode: 'decimal',
+        }}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        value={value}
+        name={amountKey}
+        required
+      />
+      {/* <FormHelperText id="swap-from-helper-text">Text</FormHelperText> */}
+    </FormControl>
+  );
+};
diff --git a/packages/widget/src/components/SwapInput/index.ts b/packages/widget/src/components/SwapInput/index.ts
@@ -0,0 +1 @@
+export * from './SwapInput';
diff --git a/packages/widget/src/components/SwapInputAdornment/SwapInputAdornment.tsx b/packages/widget/src/components/SwapInputAdornment/SwapInputAdornment.tsx
@@ -1,5 +1,4 @@
 import { InputAdornment, Skeleton, Typography } from '@mui/material';
-import BigNumber from 'bignumber.js';
 import { useMemo } from 'react';
 import { useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
@@ -31,10 +30,8 @@ export const SwapInputAdornment: React.FC<SwapFormTypeProps> = ({
 
   const amount = useMemo(
     () =>
-      token
-        ? formatTokenAmount(token, new BigNumber(tokenWithBalance?.amount ?? 0))
-        : null,
-    [token, tokenWithBalance?.amount],
+      tokenWithBalance ? formatTokenAmount(tokenWithBalance.amount) : null,
+    [tokenWithBalance],
   );
 
   return (