From 2370a30c2e9960a1fb70c1f8a4c67b5e9ae02873 Mon Sep 17 00:00:00 2001 From: Eugene Chybisov Date: Thu, 17 Feb 2022 12:15:06 +0200 Subject: [PATCH] feat: add settings page draft --- libs/react-scripts/package.json | 4 +- .../src/components/SendToRecipientForm.tsx | 8 +- .../SettingsDrawer/EnabledBridgesSelect.tsx | 36 ++++ .../SettingsDrawer/EnabledExchangesSelect.tsx | 36 ++++ .../SettingsDrawer/SettingsDrawer.style.tsx | 38 ++++ .../SettingsDrawer/SettingsDrawer.tsx | 178 +++++++++++++++++- packages/widget/src/i18n/en/translation.json | 15 ++ .../widget/src/pages/SwapPage/SwapPage.tsx | 8 +- .../SwapFormProvider/SwapFormProvider.tsx | 1 + .../src/providers/SwapFormProvider/types.ts | 6 + yarn.lock | 28 +-- 11 files changed, 330 insertions(+), 28 deletions(-) create mode 100644 packages/widget/src/components/SettingsDrawer/EnabledBridgesSelect.tsx create mode 100644 packages/widget/src/components/SettingsDrawer/EnabledExchangesSelect.tsx create mode 100644 packages/widget/src/components/SettingsDrawer/SettingsDrawer.style.tsx diff --git a/libs/react-scripts/package.json b/libs/react-scripts/package.json index 016f98aa0..29bc953bc 100644 --- a/libs/react-scripts/package.json +++ b/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", diff --git a/packages/widget/src/components/SendToRecipientForm.tsx b/packages/widget/src/components/SendToRecipientForm.tsx index 3ca275227..8cd44eb75 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, 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; } diff --git a/packages/widget/src/components/SettingsDrawer/EnabledBridgesSelect.tsx b/packages/widget/src/components/SettingsDrawer/EnabledBridgesSelect.tsx new file mode 100644 index 000000000..74af0ef2a --- /dev/null +++ b/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 ( + + + + + {t(`settings.enabledBridges`)} + + + + + + + ); +}; diff --git a/packages/widget/src/components/SettingsDrawer/EnabledExchangesSelect.tsx b/packages/widget/src/components/SettingsDrawer/EnabledExchangesSelect.tsx new file mode 100644 index 000000000..2989f7fe1 --- /dev/null +++ b/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 ( + + + + + {t(`settings.enabledExchanges`)} + + + + + + + ); +}; diff --git a/packages/widget/src/components/SettingsDrawer/SettingsDrawer.style.tsx b/packages/widget/src/components/SettingsDrawer/SettingsDrawer.style.tsx new file mode 100644 index 000000000..34d41abd5 --- /dev/null +++ b/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', + }, +})); diff --git a/packages/widget/src/components/SettingsDrawer/SettingsDrawer.tsx b/packages/widget/src/components/SettingsDrawer/SettingsDrawer.tsx index f487b37c6..51820f2e6 100644 --- a/packages/widget/src/components/SettingsDrawer/SettingsDrawer.tsx +++ b/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( (_, ref) => { const { t } = useTranslation(); const { register } = useFormContext(); + const [value, setValue] = useState<'slow' | 'normal' | 'fast'>('normal'); + const [advancedPreferences, setAdvancedPreferences] = + useState(false); + + const handleChange = (newValue: 'slow' | 'normal' | 'fast') => { + setValue(newValue); + }; + + const handleAdvancedPreferences = ( + _: ChangeEvent, + checked: boolean, + ) => { + setAdvancedPreferences(checked); + }; return ( - Settings + + + + + + {t(`settings.route`)} + + + + + + + + + + + {t(`settings.slippage`)} + + + + + + + + + + + {t(`settings.gasPrice.title`)} + + + + + + + + + + + + + + + + {t(`settings.advancedPreferences`)} + + + + + {advancedPreferences && ( + + + + + {t(`settings.bridgePrioritization`)} + + + + + + + + + )} + + ); }, diff --git a/packages/widget/src/i18n/en/translation.json b/packages/widget/src/i18n/en/translation.json index 711a59eae..6fc2417bd 100644 --- a/packages/widget/src/i18n/en/translation.json +++ b/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" } } diff --git a/packages/widget/src/pages/SwapPage/SwapPage.tsx b/packages/widget/src/pages/SwapPage/SwapPage.tsx index ee0a0e8b5..fd463d238 100644 --- a/packages/widget/src/pages/SwapPage/SwapPage.tsx +++ b/packages/widget/src/pages/SwapPage/SwapPage.tsx @@ -126,10 +126,10 @@ export const SwapPage: React.FC = ({ settingsRef }) => { {t(`swap.sendToRecipient`)} @@ -148,10 +148,10 @@ export const SwapPage: React.FC = ({ settingsRef }) => { {t(`swap.routePriority.title`)} diff --git a/packages/widget/src/providers/SwapFormProvider/SwapFormProvider.tsx b/packages/widget/src/providers/SwapFormProvider/SwapFormProvider.tsx index 16dadbbb9..df61327f9 100644 --- a/packages/widget/src/providers/SwapFormProvider/SwapFormProvider.tsx +++ b/packages/widget/src/providers/SwapFormProvider/SwapFormProvider.tsx @@ -7,6 +7,7 @@ const defaultValues = { [SwapFormKey.ToSearchTokensFilter]: '', [SwapFormKey.FromAmount]: 0, [SwapFormKey.ToAmount]: 0, + [SwapFormKey.Slippage]: '0.5', }; export const SwapFormProvider: React.FC = ({ children }) => { diff --git a/packages/widget/src/providers/SwapFormProvider/types.ts b/packages/widget/src/providers/SwapFormProvider/types.ts index 4143459aa..638b84092 100644 --- a/packages/widget/src/providers/SwapFormProvider/types.ts +++ b/packages/widget/src/providers/SwapFormProvider/types.ts @@ -9,15 +9,21 @@ export type SwapFormValues = { }; export enum SwapFormKey { + BridgePrioritization = 'bridgePrioritization', + EnabledBridges = 'enabledBridges', + EnabledExchanges = 'enabledExchanges', FromAmount = 'fromAmount', FromChain = 'fromChain', FromSearchTokensFilter = 'fromSearchTokensFilter', FromToken = 'fromToken', + GasPrice = 'gasPrice', IsAddressConfirmed = 'isAddressConfirmed', IsSendToRecipient = 'isSendToRecipient', MyTokensFilter = 'myTokensFilter', RecipientsAddress = 'recipientsAddress', RoutePriority = 'routePriority', + Slippage = 'slippage', + SwapRoute = 'swapRoute', ToAmount = 'toAmount', ToChain = 'toChain', ToSearchTokensFilter = 'toSearchTokensFilter', diff --git a/yarn.lock b/yarn.lock index a44ff2514..ecf65c2ce 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11914,12 +11914,12 @@ postcss-calc@^8.2.0: postcss-selector-parser "^6.0.9" postcss-value-parser "^4.2.0" -postcss-clamp@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/postcss-clamp/-/postcss-clamp-3.0.0.tgz#09cb1ad64243b46c9159ded5e8d3e8349150a09e" - integrity sha512-QENQMIF/Grw0qX0RzSPJjw+mAiGPIwG2AnsQDIoR/WJ5Q19zLB0NrZX8cH7CzzdDWEerTPGCdep7ItFaAdtItg== +postcss-clamp@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/postcss-clamp/-/postcss-clamp-4.0.0.tgz#766d3dbaa2dc56e8bea1b690291b632c0c5bf728" + integrity sha512-FsMmeBZtymFN7Jtlnw9is8I4nB+qEEb/qS0ZLTIqcKiwZyHBq44Yhv29Q+VQsTGHYFqIr/s/9tqvNM7j+j1d+g== dependencies: - postcss-value-parser "^4.1.0" + postcss-value-parser "^4.2.0" postcss-color-functional-notation@^4.2.2: version "4.2.2" @@ -12297,10 +12297,10 @@ postcss-place@^7.0.4: dependencies: postcss-value-parser "^4.2.0" -postcss-preset-env@^7.4.0: - version "7.4.0" - resolved "https://registry.yarnpkg.com/postcss-preset-env/-/postcss-preset-env-7.4.0.tgz#f857ae123e96a7aa2472c75c5595e2d270c2c492" - integrity sha512-nWC9bDW6nQ4a15RZ/UKgpxZT8xbv0gl+/2q6PROAwwzsxiEb4pjsChAbS0sltepvAjqXbQhff+38FXDxJCCobw== +postcss-preset-env@^7.4.1: + version "7.4.1" + resolved "https://registry.yarnpkg.com/postcss-preset-env/-/postcss-preset-env-7.4.1.tgz#ca6131c6e0d0e0bcc429dbef3e8f8d03250041ea" + integrity sha512-UvBVvPJ2vb4odAtckSbryndyBz+Me1q8wawqq0qznpDXy188I+8W5Sa929sCPqw2/NSYnqpHJbo41BKso3+I9A== dependencies: "@csstools/postcss-color-function" "^1.0.2" "@csstools/postcss-font-format-keywords" "^1.0.0" @@ -12317,7 +12317,7 @@ postcss-preset-env@^7.4.0: css-prefers-color-scheme "^6.0.3" cssdb "^6.3.1" postcss-attribute-case-insensitive "^5.0.0" - postcss-clamp "^3.0.0" + postcss-clamp "^4.0.0" postcss-color-functional-notation "^4.2.2" postcss-color-hex-alpha "^8.0.3" postcss-color-rebeccapurple "^7.0.2" @@ -14324,10 +14324,10 @@ table@^6.0.9: string-width "^4.2.3" strip-ansi "^6.0.1" -tailwindcss@^3.0.22: - version "3.0.22" - resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.0.22.tgz#5f1aac83810261300ae5b2f98fd4a2fa2ded2c42" - integrity sha512-F8lt74RlNZirnkaSk310+vGQta7c0/hgx7/bqxruM4wS9lp8oqV93lzavajC3VT0Lp4UUtUVIt8ifKcmGzkr0A== +tailwindcss@^3.0.23: + version "3.0.23" + resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.0.23.tgz#c620521d53a289650872a66adfcb4129d2200d10" + integrity sha512-+OZOV9ubyQ6oI2BXEhzw4HrqvgcARY38xv3zKcjnWtMIZstEsXdI9xftd1iB7+RbOnj2HOEzkA0OyB5BaSxPQA== dependencies: arg "^5.0.1" chalk "^4.1.2"