From a9d417505b5f5193985c73db50dae9740999bfe5 Mon Sep 17 00:00:00 2001
From: Eugene Chybisov <imchybisov@gmail.com>
Date: Thu, 17 Feb 2022 17:08:06 +0200
Subject: [PATCH] feat: add settings components

---
 packages/widget/src/components/Select.tsx     |   6 +
 .../src/components/SendToRecipientForm.tsx    |   9 +-
 .../SettingsDrawer/AdvancedPreferences.tsx    |  81 ++++++++++++
 .../SettingsDrawer/EnabledBridgesSelect.tsx   |  53 ++++++--
 .../SettingsDrawer/EnabledExchangesSelect.tsx |  53 ++++++--
 ...tyle.tsx => GasPriceButtonGroup.style.tsx} |   1 -
 .../SettingsDrawer/GasPriceButtonGroup.tsx    |  66 ++++++++++
 .../SettingsDrawer/SettingsDrawer.tsx         | 117 +-----------------
 .../WalletHeader/WalletHeader.style.tsx       |  13 ++
 .../{ => WalletHeader}/WalletHeader.tsx       |  19 +--
 .../src/components/WalletHeader/index.ts      |   1 +
 packages/widget/src/i18n/en/translation.json  |   2 +
 12 files changed, 268 insertions(+), 153 deletions(-)
 create mode 100644 packages/widget/src/components/SettingsDrawer/AdvancedPreferences.tsx
 rename packages/widget/src/components/SettingsDrawer/{SettingsDrawer.style.tsx => GasPriceButtonGroup.style.tsx} (98%)
 create mode 100644 packages/widget/src/components/SettingsDrawer/GasPriceButtonGroup.tsx
 create mode 100644 packages/widget/src/components/WalletHeader/WalletHeader.style.tsx
 rename packages/widget/src/components/{ => WalletHeader}/WalletHeader.tsx (78%)
 create mode 100644 packages/widget/src/components/WalletHeader/index.ts

diff --git a/packages/widget/src/components/Select.tsx b/packages/widget/src/components/Select.tsx
index 41e17b7a8..03b22e6f2 100644
--- a/packages/widget/src/components/Select.tsx
+++ b/packages/widget/src/components/Select.tsx
@@ -34,3 +34,9 @@ export const Select = styled(MuiSelect)(({ theme }) => ({
     borderColor: theme.palette.primary.main,
   },
 }));
+
+export const MultiSelect = styled(Select)(({ theme }) => ({
+  [`& .${inputBaseClasses.input}`]: {
+    padding: '4px 14px',
+  },
+}));
diff --git a/packages/widget/src/components/SendToRecipientForm.tsx b/packages/widget/src/components/SendToRecipientForm.tsx
index 8cd44eb75..ef0cb8e02 100644
--- a/packages/widget/src/components/SendToRecipientForm.tsx
+++ b/packages/widget/src/components/SendToRecipientForm.tsx
@@ -1,5 +1,5 @@
 import { Box, Checkbox, FormControl, FormControlLabel } from '@mui/material';
-import { useFormContext } from 'react-hook-form';
+import { useFormContext, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { SwapFormKey } from '../providers/SwapFormProvider';
 import { Input } from './Input';
@@ -8,11 +8,14 @@ export const SendToRecipientForm: React.FC = () => {
   const { t } = useTranslation();
   const {
     register,
-    watch,
     formState: { isSubmitting },
   } = useFormContext();
 
-  if (!watch(SwapFormKey.IsSendToRecipient)) {
+  const sendToRecipientChecked = useWatch({
+    name: SwapFormKey.IsSendToRecipient,
+  });
+
+  if (!sendToRecipientChecked) {
     return null;
   }
 
diff --git a/packages/widget/src/components/SettingsDrawer/AdvancedPreferences.tsx b/packages/widget/src/components/SettingsDrawer/AdvancedPreferences.tsx
new file mode 100644
index 000000000..e622f8fa8
--- /dev/null
+++ b/packages/widget/src/components/SettingsDrawer/AdvancedPreferences.tsx
@@ -0,0 +1,81 @@
+import { HelpOutline as HelpOutlineIcon } from '@mui/icons-material';
+import { Box, FormControl, MenuItem, Typography } from '@mui/material';
+import { ChangeEvent, useState } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { SwapFormKey } from '../../providers/SwapFormProvider';
+import { Select } from '../Select';
+import { Switch } from '../Switch';
+import { EnabledBridgesSelect } from './EnabledBridgesSelect';
+import { EnabledExchangesSelect } from './EnabledExchangesSelect';
+
+export const AdvancedPreferences = () => {
+  const { t } = useTranslation();
+  const { register } = useFormContext();
+  const [advancedPreferences, setAdvancedPreferences] =
+    useState<boolean>(false);
+
+  const handleAdvancedPreferences = (
+    _: ChangeEvent<HTMLInputElement>,
+    checked: boolean,
+  ) => {
+    setAdvancedPreferences(checked);
+  };
+
+  return (
+    <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>
+  );
+};
diff --git a/packages/widget/src/components/SettingsDrawer/EnabledBridgesSelect.tsx b/packages/widget/src/components/SettingsDrawer/EnabledBridgesSelect.tsx
index 74af0ef2a..3b477a139 100644
--- a/packages/widget/src/components/SettingsDrawer/EnabledBridgesSelect.tsx
+++ b/packages/widget/src/components/SettingsDrawer/EnabledBridgesSelect.tsx
@@ -1,13 +1,22 @@
 import { HelpOutline as HelpOutlineIcon } from '@mui/icons-material';
-import { Box, FormControl, MenuItem, Typography } from '@mui/material';
+import {
+  Box,
+  Chip,
+  FormControl,
+  MenuItem,
+  Skeleton,
+  Typography,
+} from '@mui/material';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+import { useBridges } from '../../hooks/useBridges';
 import { SwapFormKey } from '../../providers/SwapFormProvider';
-import { Select } from '../Select';
+import { MultiSelect } from '../Select';
 
 export const EnabledBridgesSelect: React.FC = () => {
   const { t } = useTranslation();
   const { register } = useFormContext();
+  const bridges = useBridges();
 
   return (
     <Box mt={3}>
@@ -22,15 +31,37 @@ export const EnabledBridgesSelect: React.FC = () => {
           {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>
+      {bridges.length > 0 ? (
+        <FormControl fullWidth>
+          <MultiSelect
+            multiple
+            placeholder={t(`settings.selectEnabledBridges`)}
+            defaultValue={bridges}
+            MenuProps={{ elevation: 2 }}
+            inputProps={{ ...register(SwapFormKey.EnabledBridges) }}
+            renderValue={(selected) => (
+              <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
+                {(selected as string[]).map((value) => (
+                  <Chip key={value} label={value} />
+                ))}
+              </Box>
+            )}
+          >
+            {bridges.map((bridge) => (
+              <MenuItem key={bridge} value={bridge}>
+                {bridge}
+              </MenuItem>
+            ))}
+          </MultiSelect>
+        </FormControl>
+      ) : (
+        <Skeleton
+          variant="rectangular"
+          width="100%"
+          height={44}
+          sx={{ borderRadius: '8px' }}
+        />
+      )}
     </Box>
   );
 };
diff --git a/packages/widget/src/components/SettingsDrawer/EnabledExchangesSelect.tsx b/packages/widget/src/components/SettingsDrawer/EnabledExchangesSelect.tsx
index 2989f7fe1..90805ee3b 100644
--- a/packages/widget/src/components/SettingsDrawer/EnabledExchangesSelect.tsx
+++ b/packages/widget/src/components/SettingsDrawer/EnabledExchangesSelect.tsx
@@ -1,13 +1,22 @@
 import { HelpOutline as HelpOutlineIcon } from '@mui/icons-material';
-import { Box, FormControl, MenuItem, Typography } from '@mui/material';
+import {
+  Box,
+  Chip,
+  FormControl,
+  MenuItem,
+  Skeleton,
+  Typography,
+} from '@mui/material';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+import { useExchanges } from '../../hooks/useExchanges';
 import { SwapFormKey } from '../../providers/SwapFormProvider';
-import { Select } from '../Select';
+import { MultiSelect } from '../Select';
 
 export const EnabledExchangesSelect: React.FC = () => {
   const { t } = useTranslation();
   const { register } = useFormContext();
+  const exchanges = useExchanges();
 
   return (
     <Box mt={3}>
@@ -22,15 +31,37 @@ export const EnabledExchangesSelect: React.FC = () => {
           {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>
+      {exchanges.length > 0 ? (
+        <FormControl fullWidth>
+          <MultiSelect
+            multiple
+            placeholder={t(`settings.selectEnabledExchanges`)}
+            defaultValue={exchanges}
+            MenuProps={{ elevation: 2 }}
+            inputProps={{ ...register(SwapFormKey.EnabledExchanges) }}
+            renderValue={(selected) => (
+              <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
+                {(selected as string[]).map((value) => (
+                  <Chip key={value} label={value} />
+                ))}
+              </Box>
+            )}
+          >
+            {exchanges.map((exchange) => (
+              <MenuItem key={exchange} value={exchange}>
+                {exchange}
+              </MenuItem>
+            ))}
+          </MultiSelect>
+        </FormControl>
+      ) : (
+        <Skeleton
+          variant="rectangular"
+          width="100%"
+          height={44}
+          sx={{ borderRadius: '8px' }}
+        />
+      )}
     </Box>
   );
 };
diff --git a/packages/widget/src/components/SettingsDrawer/SettingsDrawer.style.tsx b/packages/widget/src/components/SettingsDrawer/GasPriceButtonGroup.style.tsx
similarity index 98%
rename from packages/widget/src/components/SettingsDrawer/SettingsDrawer.style.tsx
rename to packages/widget/src/components/SettingsDrawer/GasPriceButtonGroup.style.tsx
index 34d41abd5..318f7ef34 100644
--- a/packages/widget/src/components/SettingsDrawer/SettingsDrawer.style.tsx
+++ b/packages/widget/src/components/SettingsDrawer/GasPriceButtonGroup.style.tsx
@@ -13,7 +13,6 @@ export const Button = styled(MuiButton)(({ theme }) => ({
   border: `2px solid rgba(19, 60, 76, 0.12)`,
   [`&.${buttonClasses.outlined}`]: {
     color: theme.palette.text.secondary,
-    fontWeight: 400,
   },
   [`&:hover`]: {
     border: 2,
diff --git a/packages/widget/src/components/SettingsDrawer/GasPriceButtonGroup.tsx b/packages/widget/src/components/SettingsDrawer/GasPriceButtonGroup.tsx
new file mode 100644
index 000000000..6e6674be6
--- /dev/null
+++ b/packages/widget/src/components/SettingsDrawer/GasPriceButtonGroup.tsx
@@ -0,0 +1,66 @@
+import { HelpOutline as HelpOutlineIcon } from '@mui/icons-material';
+import { Box, Typography } from '@mui/material';
+import { useEffect } from 'react';
+import { useFormContext, useWatch } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { SwapFormKey } from '../../providers/SwapFormProvider';
+import { Button, ButtonGroup } from './GasPriceButtonGroup.style';
+
+export const GasPriceButtonGroup = () => {
+  const { t } = useTranslation();
+  const { register, setValue } = useFormContext();
+
+  const value = useWatch({
+    name: SwapFormKey.GasPrice,
+  });
+
+  const handleChange = (newValue: 'slow' | 'normal' | 'fast') => {
+    setValue(SwapFormKey.GasPrice, newValue);
+  };
+
+  useEffect(() => {
+    register(SwapFormKey.GasPrice);
+  }, [register]);
+
+  return (
+    <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>
+  );
+};
diff --git a/packages/widget/src/components/SettingsDrawer/SettingsDrawer.tsx b/packages/widget/src/components/SettingsDrawer/SettingsDrawer.tsx
index 51820f2e6..da294247b 100644
--- a/packages/widget/src/components/SettingsDrawer/SettingsDrawer.tsx
+++ b/packages/widget/src/components/SettingsDrawer/SettingsDrawer.tsx
@@ -7,37 +7,21 @@ import {
   MenuItem,
   Typography,
 } from '@mui/material';
-import { ChangeEvent, forwardRef, useState } from 'react';
+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 { 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 { AdvancedPreferences } from './AdvancedPreferences';
+import { GasPriceButtonGroup } from './GasPriceButtonGroup';
 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">
@@ -88,102 +72,11 @@ export const SettingsDrawer = forwardRef<SettingsDrawerBase, DrawerProps>(
                   />
                 </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>
+              <GasPriceButtonGroup />
             </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>
+          <AdvancedPreferences />
         </Box>
       </ContainerDrawer>
     );
diff --git a/packages/widget/src/components/WalletHeader/WalletHeader.style.tsx b/packages/widget/src/components/WalletHeader/WalletHeader.style.tsx
new file mode 100644
index 000000000..00d52c960
--- /dev/null
+++ b/packages/widget/src/components/WalletHeader/WalletHeader.style.tsx
@@ -0,0 +1,13 @@
+import { Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+export const WalletTypography = styled(Typography, {
+  shouldForwardProp: (prop) => prop !== 'connected',
+})<{ connected?: boolean }>(({ theme, connected }) => ({
+  transition: theme.transitions.create(['color']),
+  pointerEvents: connected ? 'auto' : 'none',
+  '&:hover': {
+    color: theme.palette.grey[200],
+    cursor: 'pointer',
+  },
+}));
diff --git a/packages/widget/src/components/WalletHeader.tsx b/packages/widget/src/components/WalletHeader/WalletHeader.tsx
similarity index 78%
rename from packages/widget/src/components/WalletHeader.tsx
rename to packages/widget/src/components/WalletHeader/WalletHeader.tsx
index b5528a7b8..4d6f63d6a 100644
--- a/packages/widget/src/components/WalletHeader.tsx
+++ b/packages/widget/src/components/WalletHeader/WalletHeader.tsx
@@ -1,23 +1,12 @@
-import { Box, Menu, MenuItem, Typography } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { Box, Menu, MenuItem } from '@mui/material';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   usePriorityAccount,
   usePriorityConnector,
-} from '../hooks/connectorHooks';
-import { Header } from './Header';
-
-export const WalletTypography = styled(Typography, {
-  shouldForwardProp: (prop) => prop !== 'connected',
-})<{ connected?: boolean }>(({ theme, connected }) => ({
-  transition: theme.transitions.create(['color']),
-  pointerEvents: connected ? 'auto' : 'none',
-  '&:hover': {
-    color: theme.palette.grey[200],
-    cursor: 'pointer',
-  },
-}));
+} from '../../hooks/connectorHooks';
+import { Header } from '../Header';
+import { WalletTypography } from './WalletHeader.style';
 
 export const WalletHeader: React.FC = () => {
   const { t } = useTranslation();
diff --git a/packages/widget/src/components/WalletHeader/index.ts b/packages/widget/src/components/WalletHeader/index.ts
new file mode 100644
index 000000000..10a38143f
--- /dev/null
+++ b/packages/widget/src/components/WalletHeader/index.ts
@@ -0,0 +1 @@
+export * from './WalletHeader';
diff --git a/packages/widget/src/i18n/en/translation.json b/packages/widget/src/i18n/en/translation.json
index 6fc2417bd..55e4354d8 100644
--- a/packages/widget/src/i18n/en/translation.json
+++ b/packages/widget/src/i18n/en/translation.json
@@ -46,7 +46,9 @@
     "advancedPreferences": "Advanced preferences",
     "bridgePrioritization": "Bridge prioritization",
     "enabledBridges": "Enabled bridges",
+    "selectEnabledBridges": "Select enabled bridges",
     "enabledExchanges": "Enabled exchanges",
+    "selectEnabledExchanges": "Select enabled exchanges",
     "resetToDefault": "Reset to default"
   }
 }