fix: custom bridge and exchange select indicator

packages/widget-playground/src/App.tsx

@@ -189,6 +189,8 @@ export const App = () => {
     }
   }, [darkMode, prefersDarkMode, primary, secondary, systemColor]);
 
+  console.log({ config });
+
   return (
     <ThemeProvider theme={theme}>
       <WidgetEvents />

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."

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%'),
+  },
+}));

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,62 @@ 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;
+
   return (
-    <Box px={3} mt={1.5} mb={1}>
-      <Button onClick={toggleDialog} fullWidth>
-        {t('button.resetSettings')}
-      </Button>
-      <Dialog open={open} onClose={toggleDialog}>
-        <DialogTitle>{t('warning.title.resetSettings')}</DialogTitle>
-        <DialogContent>
-          <DialogContentText>
-            {t('warning.message.resetSettings')}
-          </DialogContentText>
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={toggleDialog}>{t('button.cancel')}</Button>
-          <Button variant="contained" onClick={handleReset} autoFocus>
-            {t('button.reset')}
+    isCustomRouteSettings && (
+      <Box px={3} mt={1.5} mb={1}>
+        <ResetButtonContainer>
+          <Box display={'flex'} marginBottom={'12px'}>
+            <InfoRounded
+              sx={{
+                marginRight: '8px',
+              }}
+            />
+            <Box marginTop={'2px'} fontSize={14}>
+              {t(`settings.resetSettings`)}
+            </Box>
+          </Box>
+          <Button onClick={toggleDialog} fullWidth>
+            {t('button.resetSettings')}
           </Button>
-        </DialogActions>
-      </Dialog>
-    </Box>
+
+          <Dialog open={open} onClose={toggleDialog}>
+            <DialogTitle>{t('warning.title.resetSettings')}</DialogTitle>
+            <DialogContent>
+              <DialogContentText>
+                {t('warning.message.resetSettings')}
+              </DialogContentText>
+            </DialogContent>
+            <DialogActions>
+              <Button onClick={toggleDialog}>{t('button.cancel')}</Button>
+              <Button variant="contained" onClick={handleReset} autoFocus>
+                {t('button.reset')}
+              </Button>
+            </DialogActions>
+          </Dialog>
+        </ResetButtonContainer>
+      </Box>
+    )
   );
 };

packages/widget/src/stores/settings/useSettingsStore.ts

@@ -8,9 +8,12 @@ import { SettingsToolTypes } from './types';
 export const defaultConfigurableSettings: Pick<
   SettingsState,
   'routePriority' | 'slippage'
-> = {
+> & {
+  gasPrice: string;
+} = {
   routePriority: 'RECOMMENDED',
   slippage: '0.5',
+  gasPrice: 'slow',
 };
 
 export const defaultSettings: SettingsProps = {
@@ -139,7 +142,8 @@ export const useSettingsStore = create<SettingsState>(
 );
 
 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 ||
@@ -157,4 +161,7 @@ export const setDefaultSettings = (config?: WidgetConfig) => {
   if (!routePriority) {
     setValue('routePriority', defaultConfigurableSettings.routePriority);
   }
+  if (!gasPrice) {
+    setValue('gasPrice', defaultConfigurableSettings.gasPrice);
+  }
 };