diff --git a/.eslintrc b/.eslintrc index e7bb58be1..baa858d8a 100644 --- a/.eslintrc +++ b/.eslintrc @@ -5,10 +5,7 @@ "browser": true, "node": true }, - "extends": [ - "react-app", - "plugin:prettier/recommended" - ], + "extends": ["react-app", "plugin:prettier/recommended"], "parser": "@typescript-eslint/parser", "parserOptions": { "ecmaFeatures": { @@ -24,10 +21,7 @@ "@typescript-eslint/no-shadow": "off", "@typescript-eslint/no-unused-vars": "warn", "class-methods-use-this": "off", - "comma-dangle": [ - "error", - "always-multiline" - ], + "comma-dangle": ["error", "always-multiline"], "curly": 1, "import/extensions": "off", "import/no-default-export": "error", @@ -35,15 +29,17 @@ "import/no-unresolved": 0, "import/prefer-default-export": "off", "indent": "off", - "jsx-quotes": [ - "error", - "prefer-double" - ], + "jsx-quotes": ["error", "prefer-double"], "linebreak-style": "off", "max-len": "off", "newline-per-chained-call": "off", "no-bitwise": "off", - "no-console": "off", + "no-console": [ + "error", + { + "allow": ["warn", "error"] + } + ], "no-continue": "off", "no-implicit-any-catch": "off", "no-nested-ternary": "off", @@ -60,10 +56,7 @@ "react/jsx-filename-extension": [ 1, { - "extensions": [ - ".ts", - ".tsx" - ] + "extensions": [".ts", ".tsx"] } ], "react/jsx-one-expression-per-line": "off", diff --git a/examples/nextjs/components/WidgetEvents.tsx b/examples/nextjs/components/WidgetEvents.tsx index ca5433bfe..743facd61 100644 --- a/examples/nextjs/components/WidgetEvents.tsx +++ b/examples/nextjs/components/WidgetEvents.tsx @@ -1,3 +1,4 @@ +/* eslint-disable no-console */ import type { Route } from '@lifi/sdk'; import type { RouteExecutionUpdate, diff --git a/packages/widget/src/hooks/useRouteExecution.ts b/packages/widget/src/hooks/useRouteExecution.ts index ffcac2569..cfae45efd 100644 --- a/packages/widget/src/hooks/useRouteExecution.ts +++ b/packages/widget/src/hooks/useRouteExecution.ts @@ -1,3 +1,4 @@ +/* eslint-disable no-console */ import type { ExchangeRateUpdateParams, Route } from '@lifi/sdk'; import { useMutation, useQueryClient } from '@tanstack/react-query'; import { useCallback, useEffect, useRef } from 'react'; diff --git a/packages/widget/src/i18n/en.json b/packages/widget/src/i18n/en.json index 112a75cac..734a4fb52 100644 --- a/packages/widget/src/i18n/en.json +++ b/packages/widget/src/i18n/en.json @@ -255,7 +255,8 @@ }, "routePriority": "Route priority", "showDestinationWallet": "Show destination wallet", - "slippage": "Slippage" + "slippage": "Slippage", + "resetSettings": "You've customised the settings that could limit the number of available routes" }, "wallet": { "extensionNotFound": "Please make sure that only the {{name}} browser extension is active before choosing this wallet." diff --git a/packages/widget/src/pages/SettingsPage/ResetSettingsButton.style.tsx b/packages/widget/src/pages/SettingsPage/ResetSettingsButton.style.tsx new file mode 100644 index 000000000..eeb26ee10 --- /dev/null +++ b/packages/widget/src/pages/SettingsPage/ResetSettingsButton.style.tsx @@ -0,0 +1,12 @@ +import { getContrastAlphaColor } from '../../utils'; +import { Box, styled } from '@mui/material'; + +export const ResetButtonContainer = styled(Box)(({ theme }) => ({ + background: getContrastAlphaColor(theme.palette.mode, '4%'), + borderRadius: '16px', + padding: '16px', + + [`svg`]: { + fill: getContrastAlphaColor(theme.palette.mode, '40%'), + }, +})); diff --git a/packages/widget/src/pages/SettingsPage/ResetSettingsButton.tsx b/packages/widget/src/pages/SettingsPage/ResetSettingsButton.tsx index 7e982ad0f..2e597cc57 100644 --- a/packages/widget/src/pages/SettingsPage/ResetSettingsButton.tsx +++ b/packages/widget/src/pages/SettingsPage/ResetSettingsButton.tsx @@ -11,9 +11,28 @@ import { useTranslation } from 'react-i18next'; import { Dialog } from '../../components/Dialog'; import { useTools } from '../../hooks'; import { useWidgetConfig } from '../../providers'; -import { useSettingsStore } from '../../stores'; +import { + defaultConfigurableSettings, + setDefaultSettings, + useSettingsStore, +} from '../../stores'; +import { ResetButtonContainer } from './ResetSettingsButton.style'; +import { InfoRounded } from '@mui/icons-material'; +import { shallow } from 'zustand/shallow'; export const ResetSettingsButton: React.FC = () => { + const [enabledBridges, enabledExchanges, routePriority, slippage, gasPrice] = + useSettingsStore( + (state) => [ + state.enabledBridges, + state.enabledExchanges, + state.routePriority, + state.slippage, + state.gasPrice, + ], + shallow, + ); + const { t } = useTranslation(); const { tools } = useTools(); const config = useWidgetConfig(); @@ -31,29 +50,63 @@ export const ResetSettingsButton: React.FC = () => { tools.bridges.map((tool) => tool.key), tools.exchanges.map((tool) => tool.key), ); + + setDefaultSettings(config); } toggleDialog(); }; + const isSlippageChanged = config.slippage + ? Number(slippage) !== config.slippage * 100 + : slippage !== defaultConfigurableSettings.slippage; + + const isRoutePriorityChanged = config.routePriority + ? routePriority !== config.routePriority + : routePriority !== defaultConfigurableSettings.routePriority; + + const isGasPriceChanged = gasPrice !== defaultConfigurableSettings.gasPrice; + + const isCustomRouteSettings = + tools?.bridges?.length !== enabledBridges?.length || + tools?.exchanges?.length !== enabledExchanges?.length || + isSlippageChanged || + isRoutePriorityChanged || + isGasPriceChanged; + + if (!isCustomRouteSettings) { + return null; + } + return ( - - - {t('warning.title.resetSettings')} - - - {t('warning.message.resetSettings')} - - - - - - - + + + + {t(`settings.resetSettings`)} + + + + + {t('warning.title.resetSettings')} + + + {t('warning.message.resetSettings')} + + + + + + + + ); }; diff --git a/packages/widget/src/stores/routes/createRouteExecutionStore.ts b/packages/widget/src/stores/routes/createRouteExecutionStore.ts index bb14b5a64..88197ded2 100644 --- a/packages/widget/src/stores/routes/createRouteExecutionStore.ts +++ b/packages/widget/src/stores/routes/createRouteExecutionStore.ts @@ -177,7 +177,7 @@ export const createRouteExecutionStore = ({ namePrefix }: PersistStoreProps) => localStorage.removeItem('routes'); } } catch (error) { - console.log(error); + console.error(error); } return state; }, diff --git a/packages/widget/src/stores/settings/useSettingsStore.ts b/packages/widget/src/stores/settings/useSettingsStore.ts index 6f6f0c937..f147c4165 100644 --- a/packages/widget/src/stores/settings/useSettingsStore.ts +++ b/packages/widget/src/stores/settings/useSettingsStore.ts @@ -7,10 +7,11 @@ import { SettingsToolTypes } from './types'; export const defaultConfigurableSettings: Pick< SettingsState, - 'routePriority' | 'slippage' + 'routePriority' | 'slippage' | 'gasPrice' > = { routePriority: 'RECOMMENDED', slippage: '0.5', + gasPrice: 'normal', }; export const defaultSettings: SettingsProps = { @@ -98,10 +99,11 @@ export const useSettingsStore = createWithEqualityFn( ), })), reset: (config, bridges, exchanges) => { + const { appearance, ...restDefaultSettings } = defaultSettings; + set(() => ({ - ...defaultSettings, + ...restDefaultSettings, ...defaultConfigurableSettings, - appearance: config.appearance ?? defaultSettings.appearance, })); get().initializeTools('Bridges', bridges, true); get().initializeTools('Exchanges', exchanges, true); @@ -140,7 +142,8 @@ export const useSettingsStore = createWithEqualityFn( ); export const setDefaultSettings = (config?: WidgetConfig) => { - const { slippage, routePriority, setValue } = useSettingsStore.getState(); + const { slippage, routePriority, setValue, gasPrice } = + useSettingsStore.getState(); const defaultSlippage = (config?.slippage || config?.sdkConfig?.defaultRouteOptions?.slippage || @@ -158,4 +161,7 @@ export const setDefaultSettings = (config?: WidgetConfig) => { if (!routePriority) { setValue('routePriority', defaultConfigurableSettings.routePriority); } + if (!gasPrice) { + setValue('gasPrice', defaultConfigurableSettings.gasPrice); + } }; diff --git a/scripts/copy-files.js b/scripts/copy-files.js index 4c342d02a..79209072d 100644 --- a/scripts/copy-files.js +++ b/scripts/copy-files.js @@ -1,3 +1,4 @@ +/* eslint-disable no-console */ const path = require('path'); const fse = require('fs-extra'); diff --git a/scripts/private-version.js b/scripts/private-version.js index a67734dd1..3ea81f05b 100644 --- a/scripts/private-version.js +++ b/scripts/private-version.js @@ -1,3 +1,4 @@ +/* eslint-disable no-console */ /* eslint-disable no-prototype-builtins */ const fs = require('fs-extra'); const path = require('path');