feat: update swap form layout

packages/widget/src/components/SwapChainButton.tsx

@@ -0,0 +1,36 @@
+import { Button } from '@mui/material';
+import { buttonClasses } from '@mui/material/Button';
+import { alpha, styled } from '@mui/material/styles';
+
+export const SwapChainButton = styled(Button)(({ theme }) => ({
+  backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#2b2b2b',
+  color: theme.palette.text.primary,
+  borderRadius: '8px 8px 0 0',
+  borderWidth: '2px 2px 1px 2px',
+  borderStyle: 'solid',
+  borderColor: '#E3E7E9',
+  paddingRight: 14,
+  textTransform: 'none',
+  marginBottom: -1,
+  height: '42px',
+  [`& .${buttonClasses.endIcon}`]: {
+    color: theme.palette.text.secondary,
+    flex: 1,
+    justifyContent: 'end',
+  },
+  [`&.${buttonClasses.focusVisible}`]: {
+    backgroundColor: `${alpha(theme.palette.primary.main, 0.02)}`,
+  },
+  '&:hover': {
+    backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#2b2b2b',
+    borderColor: '#E3E7E9',
+    borderWidth: '2px 2px 1px 2px',
+    boxShadow: 'none',
+  },
+  '&:focus': {
+    boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
+    backgroundColor: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
+    borderColor: theme.palette.primary.main,
+    zIndex: 1,
+  },
+}));

packages/widget/src/components/SwapForm.tsx

@@ -1,62 +1,76 @@
-import { Box, FormControl, InputAdornment, OutlinedInput, Typography } from '@mui/material';
-import { outlinedInputClasses } from '@mui/material/OutlinedInput';
-import { alpha, styled } from '@mui/material/styles';
+import { KeyboardArrowDown as KeyboardArrowDownIcon, SwapVert as SwapVertIcon } from '@mui/icons-material';
+import { Box, FormControl, Typography } from '@mui/material';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-
-const SwapInput = styled(OutlinedInput)(({ theme }) => ({
-  borderRadius: 4,
-  backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#2b2b2b',
-  // border: '1px solid #ced4da',
-  // fontSize: 16,
-  // width: 'auto',
-  // padding: '10px 12px',
-  transition: theme.transitions.create([
-    'border-color',
-    'background-color',
-    'box-shadow',
-  ]),
-  [`&.${outlinedInputClasses.focused}`]: {
-    boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
-    borderColor: theme.palette.primary.main,
-  },
-}));
+import { SwapChainButton } from './SwapChainButton';
+import { SwapInput } from './SwapInput';
+import { SwapFromInputAdornment, SwapToInputAdornment } from './SwapInputAdornment';
 
 export const SwapForm: React.FC = () => {
   const { register, reset, handleSubmit, getValues, formState: { isSubmitting } } = useFormContext();
   const { t } = useTranslation();
 
   return (
     <Box>
-      <Typography
-        variant="subtitle1"
-        color="text.secondary"
-      >
+      <Typography variant="subtitle1" color="text.secondary" mt={3}>
         {t(`swap.form.from`)}
       </Typography>
-      <FormControl variant="standard" margin="dense" fullWidth>
-        <SwapInput
-          // type="number"
-          size="small"
-          // {...register('fromAmount', { required: true })}
-          disabled={isSubmitting}
-          endAdornment={<InputAdornment position="end">$</InputAdornment>}
-          aria-describedby=""
-          inputProps={{
-            'aria-label': '',
-            inputMode: 'numeric',
-            ...register('fromAmount', { required: true, min: 0, valueAsNumber: true }),
-          }}
-          required
-        />
-        {/* <FormHelperText id="outlined-weight-helper-text">Weight</FormHelperText> */}
-      </FormControl>
-      <Typography
-        variant="subtitle1"
-        color="text.secondary"
-      >
-        {t(`swap.form.to`)}
-      </Typography>
+      <Box my={1}>
+        <SwapChainButton fullWidth disableElevation disableRipple variant="outlined" endIcon={<KeyboardArrowDownIcon />}>
+          MATIC on ETH
+        </SwapChainButton>
+        <FormControl variant="standard" fullWidth>
+          <SwapInput
+            type="number"
+            size="small"
+            defaultValue={0}
+            disabled={isSubmitting}
+            autoComplete="off"
+            endAdornment={(<SwapFromInputAdornment maxAmount={98700.30} price={1300.00} />)}
+            aria-describedby=""
+            inputProps={{
+              min: 0,
+              step: 1e-18,
+              'aria-label': '',
+              inputMode: 'numeric',
+              ...register('fromAmount', { required: true }),
+            }}
+            required
+          />
+          {/* <FormHelperText id="swap-from-helper-text">Text</FormHelperText> */}
+        </FormControl>
+      </Box>
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', height: 40 }}>
+        <Typography variant="subtitle1" color="text.secondary" sx={{ alignSelf: 'end' }}>
+          {t(`swap.form.to`)}
+        </Typography>
+        <SwapVertIcon sx={{ alignSelf: 'center', padding: '0 16px' }} />
+      </Box>
+      <Box my={1}>
+        <SwapChainButton fullWidth disableElevation disableRipple variant="outlined" endIcon={<KeyboardArrowDownIcon />}>
+          MATIC on ETH
+        </SwapChainButton>
+        <FormControl variant="standard" fullWidth>
+          <SwapInput
+            type="number"
+            size="small"
+            defaultValue={0}
+            disabled={isSubmitting}
+            autoComplete="off"
+            endAdornment={(<SwapToInputAdornment price={1300.00} />)}
+            aria-describedby=""
+            inputProps={{
+              min: 0,
+              step: 1e-18,
+              'aria-label': '',
+              inputMode: 'numeric',
+              ...register('toAmount', { required: true }),
+            }}
+            required
+          />
+          {/* <FormHelperText id="swap-to-helper-text">Text</FormHelperText> */}
+        </FormControl>
+      </Box>
     </Box>
   );
 };

packages/widget/src/components/SwapInput.tsx

@@ -0,0 +1,31 @@
+import { InputBase } from '@mui/material';
+import { inputBaseClasses } from '@mui/material/InputBase';
+import { alpha, styled } from '@mui/material/styles';
+
+export const SwapInput = styled(InputBase)(({ theme }) => ({
+  borderRadius: '0 0 8px 8px',
+  backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#2b2b2b',
+  borderWidth: '1px 2px 2px 2px',
+  borderStyle: 'solid',
+  borderColor: '#E3E7E9',
+  paddingRight: '14px',
+  transition: theme.transitions.create([
+    'border-color',
+    'background-color',
+    'box-shadow',
+  ]),
+  [`& .${inputBaseClasses.input}`]: {
+    padding: '8.5px 0 8.5px 14px',
+  },
+  [`&.${inputBaseClasses.focused}`]: {
+    boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
+    borderColor: theme.palette.primary.main,
+  },
+  '& input[type="number"]::-webkit-outer-spin-button, & input[type="number"]::-webkit-inner-spin-button': {
+    WebkitAppearance: 'none',
+    margin: 0,
+  },
+  '& input[type="number"]': {
+    MozAppearance: 'textfield',
+  },
+}));

packages/widget/src/components/SwapInputAdornment.tsx

@@ -0,0 +1,45 @@
+import { InputAdornment, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { useTranslation } from 'react-i18next';
+
+const SwapInputAdornment = styled(Typography)({
+  borderLeft: '1px solid #E3E7E9',
+  paddingLeft: 8,
+  marginLeft: 8,
+});
+
+const SwapMaxInputAdornment = styled(Typography)({
+  textDecoration: 'underline',
+  marginRight: 8,
+  '&:hover': {
+    cursor: 'pointer',
+  },
+});
+
+export const SwapFromInputAdornment: React.FC<{ maxAmount: number; price: number; }> = ({ maxAmount, price }) => {
+  const { t } = useTranslation();
+  return (
+    <InputAdornment position="end">
+      <SwapMaxInputAdornment variant="body2" color="text.primary">
+        {t(`swap.form.max`)}
+      </SwapMaxInputAdornment>
+      <Typography variant="body2" color="text.secondary">
+        {t(`swap.form.maxAmount`, { value: maxAmount })}
+      </Typography>
+      <SwapInputAdornment variant="body2" color="text.secondary">
+        {t(`swap.form.price`, { value: price })}
+      </SwapInputAdornment>
+    </InputAdornment>
+  );
+};
+
+export const SwapToInputAdornment: React.FC<{ price: number; }> = ({ price }) => {
+  const { t } = useTranslation();
+  return (
+    <InputAdornment position="end">
+      <SwapInputAdornment variant="body2" color="text.secondary">
+        {t(`swap.form.price`, { value: price })}
+      </SwapInputAdornment>
+    </InputAdornment>
+  );
+};

packages/widget/src/i18n/en/translation.json

@@ -7,7 +7,10 @@
     },
     "form": {
       "from": "I'd like to swap",
-      "to": "And receive to"
+      "to": "And receive to",
+      "max": "Max",
+      "maxAmount": "({{value, number(minimumFractionDigits: 2)}})",
+      "price": "\u2248 {{value, currency(currency: USD)}}"
     },
     "button": "Swap"
   }