fix: ability to set default slippage and route priority

packages/widget-embedded/src/config.ts

@@ -29,6 +29,10 @@ export const widgetBaseConfig: WidgetConfig = {
   // disabledUI: ['toAddress', 'fromAmount', 'toToken', 'fromToken'],
   sdkConfig: {
     apiUrl: 'https://staging.li.quest/v1/',
+    defaultRouteOptions: {
+      // slippage: 0.02,
+      // order: 'SAFEST',
+    },
   },
   tokens: {
     featured: [

packages/widget/src/hooks/useSwapRoutes.ts

@@ -10,7 +10,7 @@ const refetchTime = 60_000;
 
 export const useSwapRoutes = () => {
   const lifi = useLiFi();
-  const { variant } = useWidgetConfig();
+  const { variant, sdkConfig } = useWidgetConfig();
   const { account, provider } = useWallet();
   const queryClient = useQueryClient();
   const { slippage, enabledBridges, enabledExchanges, routePriority } =
@@ -56,6 +56,7 @@ export const useSwapRoutes = () => {
     enabledExchanges,
     routePriority,
     variant,
+    sdkConfig?.defaultRouteOptions?.allowSwitchChain,
   ];
   const previousDataUpdatedAt =
     queryClient.getQueryState(queryKey)?.dataUpdatedAt;
@@ -83,6 +84,7 @@ export const useSwapRoutes = () => {
           enabledExchanges,
           routePriority,
           variant,
+          allowSwitchChain,
         ],
         signal,
       }) => {
@@ -94,9 +96,9 @@ export const useSwapRoutes = () => {
         } catch {
           toWalletAddress = isAddress(toAddress) ? toAddress : fromAddress;
         }
-        const fromAmount = Big(
-          Number(fromTokenAmount) * 10 ** (fromToken?.decimals ?? 0),
-        ).toString();
+        const fromAmount = Big(fromTokenAmount)
+          .mul(10 ** (fromToken?.decimals ?? 0))
+          .toString();
         const formattedSlippage = parseFloat(slippage) / 100;
         return lifi.getRoutes(
           {
@@ -116,7 +118,7 @@ export const useSwapRoutes = () => {
                 allow: enabledExchanges,
               },
               order: routePriority,
-              allowSwitchChain: variant !== 'refuel',
+              allowSwitchChain: variant === 'refuel' ? false : allowSwitchChain,
             },
           },
           { signal },

packages/widget/src/pages/SettingsPage/RoutePrioritySelect.tsx

@@ -11,14 +11,15 @@ export const RoutePrioritySelect: React.FC = () => {
   const { t } = useTranslation();
   const setValue = useSettingsStore((state) => state.setValue);
   const { routePriority } = useSettings(['routePriority']);
+  const value = routePriority ?? '';
 
   return (
     <Card>
       <CardTitle>{t(`settings.routePriority`)}</CardTitle>
       <FormControl fullWidth>
         <Select
           MenuProps={{ elevation: 2 }}
-          value={routePriority}
+          value={value}
           onChange={(event) =>
             setValue('routePriority', event.target.value as Order)
           }

packages/widget/src/pages/SettingsPage/SlippageInput.tsx

@@ -23,6 +23,8 @@ export const SlippageInput = () => {
     setValue('slippage', formatSlippage(value, defaultValue.current));
   };
 
+  const value = slippage ?? '';
+
   return (
     <Card>
       <CardTitle>{t(`settings.slippage`)}</CardTitle>
@@ -37,7 +39,7 @@ export const SlippageInput = () => {
           }}
           onChange={handleChange}
           onBlur={handleBlur}
-          value={slippage}
+          value={value}
         />
       </FormControl>
     </Card>

packages/widget/src/providers/WidgetProvider/WidgetProvider.tsx

@@ -1,6 +1,7 @@
 import type { ChainKey } from '@lifi/sdk';
 import { getChainByKey } from '@lifi/sdk';
-import { createContext, useContext, useMemo } from 'react';
+import { createContext, useContext, useEffect, useMemo } from 'react';
+import { setDefaultSettings } from '../../stores';
 import { formatAmount } from '../../utils';
 import type { WidgetContextProps, WidgetProviderProps } from './types';
 
@@ -81,6 +82,10 @@ export const WidgetProvider: React.FC<
     }
   }, [config, fromAmount, fromChain, fromToken, toChain, toToken]);
 
+  useEffect(() => {
+    setDefaultSettings(value);
+  }, [value]);
+
   return (
     <WidgetContext.Provider value={value}>{children}</WidgetContext.Provider>
   );

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

@@ -15,12 +15,12 @@ export const SettingsToolTypes: SettingsToolType[] = ['Bridges', 'Exchanges'];
 
 export interface SettingsState {
   advancedPreferences: boolean;
-  appearance: Appearance;
-  gasPrice: string;
+  appearance?: Appearance;
+  gasPrice?: string;
   language?: string;
-  routePriority: Order;
+  routePriority?: Order;
   showDestinationWallet: boolean;
-  slippage: string;
+  slippage?: string;
   enabledBridges?: string[];
   _enabledBridges?: Record<string, boolean>;
   enabledExchanges?: string[];

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

@@ -2,20 +2,21 @@
 import create from 'zustand';
 import { persist } from 'zustand/middleware';
 import { immer } from 'zustand/middleware/immer';
+import type { WidgetConfig } from '../../types';
 import type { SettingsState, SettingsStore } from './types';
 import { SettingsToolTypes } from './types';
 
-export const defaultSettings: Omit<
+export const defaultConfigurableSettings: Pick<
   SettingsState,
-  | 'enabledBridges'
-  | 'enabledExchanges'
-  | '_enabledBridges'
-  | '_enabledExchanges'
+  'routePriority' | 'slippage'
 > = {
-  appearance: 'auto',
-  gasPrice: 'normal',
   routePriority: 'RECOMMENDED',
   slippage: '0.5',
+};
+
+export const defaultSettings: SettingsState = {
+  appearance: 'auto',
+  gasPrice: 'normal',
   advancedPreferences: false,
   showDestinationWallet: true,
 };
@@ -105,13 +106,35 @@ export const useSettingsStore = create<SettingsStore>()(
       },
       migrate: (persistedState: any, version) => {
         if (version === 0 && persistedState.appearance === 'system') {
-          persistedState.appearance = 'auto';
+          persistedState.appearance = defaultSettings.appearance;
         }
         if (version === 1) {
-          persistedState.slippage = '0.5';
+          persistedState.slippage = defaultConfigurableSettings.slippage;
         }
         return persistedState as SettingsStore;
       },
     },
   ),
 );
+
+export const setDefaultSettings = (config?: WidgetConfig) => {
+  const { slippage, routePriority, setValue } = useSettingsStore.getState();
+  const defaultSlippage =
+    (config?.slippage ||
+      config?.sdkConfig?.defaultRouteOptions?.slippage ||
+      0) * 100;
+  const defaultRoutePriority =
+    config?.routePriority || config?.sdkConfig?.defaultRouteOptions?.order;
+  if (!slippage) {
+    setValue(
+      'slippage',
+      (defaultSlippage || defaultConfigurableSettings.slippage)?.toString(),
+    );
+  }
+  if (!routePriority) {
+    setValue(
+      'routePriority',
+      defaultRoutePriority || defaultConfigurableSettings.routePriority,
+    );
+  }
+};

packages/widget/src/types/widget.ts

@@ -1,4 +1,10 @@
-import type { ChainKey, ConfigUpdate, Token } from '@lifi/sdk';
+import type {
+  ChainKey,
+  ConfigUpdate,
+  Order,
+  RouteOptions,
+  Token,
+} from '@lifi/sdk';
 import type { PaletteMode, PaletteOptions, Shape } from '@mui/material';
 import type { TypographyOptions } from '@mui/material/styles/createTypography';
 import type { Signer } from 'ethers';
@@ -31,6 +37,14 @@ export interface WidgetWalletManagement {
   signer?: Signer;
 }
 
+export interface SDKConfig
+  extends Omit<
+    ConfigUpdate,
+    'defaultExecutionSettings' | 'defaultRouteOptions' | 'disableVersionCheck'
+  > {
+  defaultRouteOptions?: Omit<RouteOptions, 'bridges' | 'exchanges'>;
+}
+
 export interface WidgetConfig {
   fromChain?: `${ChainKey}` | number;
   toChain?: `${ChainKey}` | number;
@@ -41,6 +55,9 @@ export interface WidgetConfig {
 
   integrator?: string;
 
+  slippage?: number;
+  routePriority?: Order;
+
   variant?: WidgetVariant;
 
   appearance?: Appearance;
@@ -53,7 +70,7 @@ export interface WidgetConfig {
   useRecommendedRoute?: boolean;
 
   walletManagement?: WidgetWalletManagement;
-  sdkConfig?: ConfigUpdate;
+  sdkConfig?: SDKConfig;
 
   buildSwapUrl?: boolean;