feat: add settings page draft

libs/react-scripts/package.json

@@ -61,7 +61,7 @@
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-loader": "^6.2.1",
     "postcss-normalize": "^10.0.1",
-    "postcss-preset-env": "^7.4.0",
+    "postcss-preset-env": "^7.4.1",
     "prompts": "^2.4.2",
     "react-app-polyfill": "^3.0.0",
     "react-dev-utils": "^12.0.0",
@@ -74,7 +74,7 @@
     "source-map-loader": "^3.0.0",
     "stream-browserify": "^3.0.0",
     "style-loader": "^3.3.1",
-    "tailwindcss": "^3.0.22",
+    "tailwindcss": "^3.0.23",
     "terser-webpack-plugin": "^5.3.1",
     "webpack": "^5.69.0",
     "webpack-dev-server": "^4.7.4",

packages/widget/src/components/SendToRecipientForm.tsx

@@ -1,5 +1,5 @@
 import { Box, Checkbox, FormControl, FormControlLabel } from '@mui/material';
-import { useFormContext, useWatch } from 'react-hook-form';
+import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { SwapFormKey } from '../providers/SwapFormProvider';
 import { Input } from './Input';
@@ -8,13 +8,11 @@ export const SendToRecipientForm: React.FC = () => {
   const { t } = useTranslation();
   const {
     register,
+    watch,
     formState: { isSubmitting },
   } = useFormContext();
-  const sendToRecipientChecked = useWatch({
-    name: SwapFormKey.IsSendToRecipient,
-  });
 
-  if (!sendToRecipientChecked) {
+  if (!watch(SwapFormKey.IsSendToRecipient)) {
     return null;
   }
 

packages/widget/src/components/SettingsDrawer/EnabledBridgesSelect.tsx

@@ -0,0 +1,36 @@
+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 EnabledBridgesSelect: React.FC = () => {
+  const { t } = useTranslation();
+  const { register } = useFormContext();
+
+  return (
+    <Box mt={3}>
+      <Box sx={{ display: 'flex', alignItems: 'center' }} mb={1}>
+        <HelpOutlineIcon sx={{ color: 'grey.500' }} />
+        <Typography
+          variant="subtitle1"
+          color="text.secondary"
+          lineHeight="normal"
+          ml={1}
+        >
+          {t(`settings.enabledBridges`)}
+        </Typography>
+      </Box>
+      <FormControl fullWidth>
+        <Select
+          defaultValue={1}
+          MenuProps={{ elevation: 2 }}
+          inputProps={{ ...register(SwapFormKey.EnabledBridges) }}
+        >
+          <MenuItem value={1}>{t(`swap.routePriority.recommended`)}</MenuItem>
+        </Select>
+      </FormControl>
+    </Box>
+  );
+};

packages/widget/src/components/SettingsDrawer/EnabledExchangesSelect.tsx

@@ -0,0 +1,36 @@
+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 EnabledExchangesSelect: React.FC = () => {
+  const { t } = useTranslation();
+  const { register } = useFormContext();
+
+  return (
+    <Box mt={3}>
+      <Box sx={{ display: 'flex', alignItems: 'center' }} mb={1}>
+        <HelpOutlineIcon sx={{ color: 'grey.500' }} />
+        <Typography
+          variant="subtitle1"
+          color="text.secondary"
+          lineHeight="normal"
+          ml={1}
+        >
+          {t(`settings.enabledExchanges`)}
+        </Typography>
+      </Box>
+      <FormControl fullWidth>
+        <Select
+          defaultValue={1}
+          MenuProps={{ elevation: 2 }}
+          inputProps={{ ...register(SwapFormKey.EnabledExchanges) }}
+        >
+          <MenuItem value={1}>{t(`swap.routePriority.recommended`)}</MenuItem>
+        </Select>
+      </FormControl>
+    </Box>
+  );
+};

packages/widget/src/components/SettingsDrawer/SettingsDrawer.style.tsx

@@ -0,0 +1,38 @@
+import {
+  Button as MuiButton,
+  ButtonGroup as MuiButtonGroup,
+} from '@mui/material';
+import { buttonClasses } from '@mui/material/Button';
+import { buttonGroupClasses } from '@mui/material/ButtonGroup';
+import { styled } from '@mui/material/styles';
+
+export const Button = styled(MuiButton)(({ theme }) => ({
+  textTransform: 'none',
+  borderRadius: 8,
+  padding: '7px 21px',
+  border: `2px solid rgba(19, 60, 76, 0.12)`,
+  [`&.${buttonClasses.outlined}`]: {
+    color: theme.palette.text.secondary,
+    fontWeight: 400,
+  },
+  [`&:hover`]: {
+    border: 2,
+    borderStyle: 'solid',
+    borderColor: theme.palette.primary.main,
+  },
+  [`&.${buttonClasses.outlined}:hover`]: {
+    color: theme.palette.primary.main,
+    backgroundColor: 'rgb(0 0 0 / 2%)',
+    borderColor: 'currentColor',
+  },
+}));
+
+export const ButtonGroup = styled(MuiButtonGroup)(({ theme }) => ({
+  [`& .${buttonGroupClasses.grouped}:not(.${buttonClasses.contained}:last-of-type):hover`]:
+    {
+      borderRightColor: theme.palette.primary.main,
+    },
+  [`&  .${buttonGroupClasses.grouped}:not(:first-of-type)`]: {
+    marginLeft: '-2px',
+  },
+}));

packages/widget/src/components/SettingsDrawer/SettingsDrawer.tsx

@@ -1,18 +1,190 @@
-import { Box, DrawerProps } from '@mui/material';
-import { forwardRef } from 'react';
+import { HelpOutline as HelpOutlineIcon } from '@mui/icons-material';
+import {
+  Box,
+  Divider,
+  DrawerProps,
+  FormControl,
+  MenuItem,
+  Typography,
+} from '@mui/material';
+import { ChangeEvent, forwardRef, useState } from 'react';
 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 { Switch } from '../Switch';
+import { EnabledBridgesSelect } from './EnabledBridgesSelect';
+import { EnabledExchangesSelect } from './EnabledExchangesSelect';
+import { Button, ButtonGroup } from './SettingsDrawer.style';
 import { SettingsDrawerBase } from './types';
 
 export const SettingsDrawer = forwardRef<SettingsDrawerBase, DrawerProps>(
   (_, ref) => {
     const { t } = useTranslation();
     const { register } = useFormContext();
+    const [value, setValue] = useState<'slow' | 'normal' | 'fast'>('normal');
+    const [advancedPreferences, setAdvancedPreferences] =
+      useState<boolean>(false);
+
+    const handleChange = (newValue: 'slow' | 'normal' | 'fast') => {
+      setValue(newValue);
+    };
+
+    const handleAdvancedPreferences = (
+      _: ChangeEvent<HTMLInputElement>,
+      checked: boolean,
+    ) => {
+      setAdvancedPreferences(checked);
+    };
 
     return (
       <ContainerDrawer ref={ref} route="settings">
-        <Box role="presentation">Settings</Box>
+        <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.route`)}
+              </Typography>
+            </Box>
+            <FormControl fullWidth>
+              <Select
+                defaultValue={1}
+                MenuProps={{ elevation: 2 }}
+                inputProps={{ ...register(SwapFormKey.SwapRoute) }}
+              >
+                <MenuItem value={1}>
+                  {t(`swap.routePriority.recommended`)}
+                </MenuItem>
+              </Select>
+            </FormControl>
+            <Box sx={{ display: 'flex', alignItems: 'center' }} my={3}>
+              <Box pr={2}>
+                <Box sx={{ display: 'flex', alignItems: 'center' }} mb={1}>
+                  <HelpOutlineIcon
+                    sx={{ color: 'grey.500', paddingRight: 1 }}
+                  />
+                  <Typography
+                    variant="subtitle1"
+                    color="text.secondary"
+                    lineHeight="normal"
+                  >
+                    {t(`settings.slippage`)}
+                  </Typography>
+                </Box>
+                <FormControl fullWidth>
+                  <Input
+                    size="small"
+                    placeholder={t(`settings.slippage`)}
+                    required
+                    inputProps={{ ...register(SwapFormKey.Slippage) }}
+                  />
+                </FormControl>
+              </Box>
+              <Box>
+                <Box sx={{ display: 'flex', alignItems: 'center' }} mb={1}>
+                  <HelpOutlineIcon sx={{ color: 'grey.500' }} />
+                  <Typography
+                    variant="subtitle1"
+                    color="text.secondary"
+                    lineHeight="normal"
+                    ml={1}
+                  >
+                    {t(`settings.gasPrice.title`)}
+                  </Typography>
+                </Box>
+                <ButtonGroup size="large">
+                  <Button
+                    key="slow"
+                    disableElevation
+                    variant={value === 'slow' ? 'contained' : 'outlined'}
+                    onClick={() => handleChange('slow')}
+                  >
+                    {t(`settings.gasPrice.slow`)}
+                  </Button>
+                  <Button
+                    key="normal"
+                    disableElevation
+                    variant={value === 'normal' ? 'contained' : 'outlined'}
+                    onClick={() => handleChange('normal')}
+                  >
+                    {t(`settings.gasPrice.normal`)}
+                  </Button>
+                  <Button
+                    key="fast"
+                    disableElevation
+                    variant={value === 'fast' ? 'contained' : 'outlined'}
+                    onClick={() => handleChange('fast')}
+                  >
+                    {t(`settings.gasPrice.fast`)}
+                  </Button>
+                </ButtonGroup>
+              </Box>
+            </Box>
+          </Box>
+          <Divider light />
+          <Box px={3}>
+            <Box
+              mt={3}
+              sx={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+              }}
+            >
+              <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                <Typography
+                  variant="subtitle1"
+                  color="text.primary"
+                  lineHeight="normal"
+                >
+                  {t(`settings.advancedPreferences`)}
+                </Typography>
+              </Box>
+              <Switch
+                value={advancedPreferences}
+                onChange={handleAdvancedPreferences}
+              />
+            </Box>
+            {advancedPreferences && (
+              <Box mt={3} mb={1}>
+                <Box sx={{ display: 'flex', alignItems: 'center' }} mb={1}>
+                  <HelpOutlineIcon sx={{ color: 'grey.500' }} />
+                  <Typography
+                    variant="subtitle1"
+                    color="text.secondary"
+                    lineHeight="normal"
+                    ml={1}
+                  >
+                    {t(`settings.bridgePrioritization`)}
+                  </Typography>
+                </Box>
+                <FormControl fullWidth>
+                  <Select
+                    defaultValue={1}
+                    MenuProps={{ elevation: 2 }}
+                    inputProps={{
+                      ...register(SwapFormKey.BridgePrioritization),
+                    }}
+                  >
+                    <MenuItem value={1}>
+                      {t(`swap.routePriority.recommended`)}
+                    </MenuItem>
+                  </Select>
+                </FormControl>
+                <EnabledBridgesSelect />
+                <EnabledExchangesSelect />
+              </Box>
+            )}
+          </Box>
+        </Box>
       </ContainerDrawer>
     );
   },

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

@@ -33,5 +33,20 @@
     "connectWallet": "Connect wallet",
     "couldntFindTokens": "We couldn't find your tokens on this chain or you don't have any.",
     "walletNotConnected": "Please, connect your wallet."
+  },
+  "settings": {
+    "route": "Route",
+    "slippage": "Slippage",
+    "gasPrice": {
+      "title": "Gas price",
+      "slow": "Slow",
+      "normal": "Normal",
+      "fast": "Fast"
+    },
+    "advancedPreferences": "Advanced preferences",
+    "bridgePrioritization": "Bridge prioritization",
+    "enabledBridges": "Enabled bridges",
+    "enabledExchanges": "Enabled exchanges",
+    "resetToDefault": "Reset to default"
   }
 }

packages/widget/src/pages/SwapPage/SwapPage.tsx

@@ -126,10 +126,10 @@ export const SwapPage: React.FC<SwapPageProps> = ({ settingsRef }) => {
           <Box sx={{ display: 'flex', alignItems: 'center' }}>
             <HelpOutlineIcon sx={{ color: 'grey.500' }} />
             <Typography
-              ml={2}
+              lineHeight="normal"
               variant="subtitle1"
               color="text.primary"
-              sx={{ alignSelf: 'end' }}
+              ml={1}
             >
               {t(`swap.sendToRecipient`)}
             </Typography>
@@ -148,10 +148,10 @@ export const SwapPage: React.FC<SwapPageProps> = ({ settingsRef }) => {
           <Box sx={{ display: 'flex', alignItems: 'center' }}>
             <HelpOutlineIcon sx={{ color: 'grey.500' }} />
             <Typography
-              ml={2}
+              lineHeight="normal"
               variant="subtitle1"
               color="text.primary"
-              sx={{ alignSelf: 'end' }}
+              ml={1}
             >
               {t(`swap.routePriority.title`)}
             </Typography>