fix: allowed bridges option doesn't applied correctly

lifinance · Jul 8, 2024 · 1e00fb4 · 1e00fb4
1 parent a68873b
commit 1e00fb4
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 38 deletions.
diff --git a/...ages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/index.ts b/...ages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/index.ts
@@ -1,2 +1,2 @@
-export * from './FontsControl';
 export * from './fontDefinitions';
+export * from './FontsControl';
diff --git a/packages/widget-playground/src/defaultWidgetConfig.ts b/packages/widget-playground/src/defaultWidgetConfig.ts
@@ -189,7 +189,7 @@ export const widgetBaseConfig: WidgetConfig = {
   },
   // bridges: {
   //   allow: ['stargate'],
-  //   deny: ['connext'],
+  //   deny: ['amarok'],
   // },
   // languages: {
   //   allow: ['uk'],

diff --git a/packages/widget-playground/src/store/editTools/index.ts b/packages/widget-playground/src/store/editTools/index.ts
@@ -1,5 +1,5 @@
-export * from './EditToolsProvider';
 export * from './constants';
+export * from './EditToolsProvider';
 export * from './types';
 export * from './useCodeToolValues';
 export * from './useDrawerToolValues';

diff --git a/packages/widget-playground/src/store/widgetConfig/index.ts b/packages/widget-playground/src/store/widgetConfig/index.ts
@@ -1,5 +1,5 @@
-export * from './WidgetConfigProvider';
 export * from './useConfig';
 export * from './useConfigActions';
 export * from './useConfigValues';
 export * from './utils/getConfigOutput';
+export * from './WidgetConfigProvider';
diff --git a/packages/widget/src/hooks/useRoutes.ts b/packages/widget/src/hooks/useRoutes.ts
@@ -24,19 +24,24 @@ interface RoutesProps {
 }
 
 export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
-  const { subvariant, sdkConfig, insurance, contractTool } = useWidgetConfig();
+  const { subvariant, sdkConfig, insurance, contractTool, bridges, exchanges } =
+    useWidgetConfig();
   const queryClient = useQueryClient();
   const emitter = useWidgetEvents();
   const swapOnly = useSwapOnly();
   const {
     disabledBridges,
     disabledExchanges,
+    enabledBridges,
+    enabledExchanges,
     enabledAutoRefuel,
     routePriority,
     slippage,
   } = useSettings([
     'disabledBridges',
     'disabledExchanges',
+    'enabledBridges',
+    'enabledExchanges',
     'enabledAutoRefuel',
     'routePriority',
     'slippage',
@@ -87,6 +92,16 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
   // toAddress might be an empty string, but we need to pass undefined if there is no value
   const toWalletAddress = toAddress || undefined;
 
+  // We need to send the full allowed tools array if custom tool settings are applied
+  const allowedBridges =
+    bridges?.allow?.length || bridges?.deny?.length
+      ? enabledBridges
+      : undefined;
+  const allowedExchanges =
+    exchanges?.allow?.length || exchanges?.deny?.length
+      ? enabledExchanges
+      : undefined;
+
   const isEnabled =
     Boolean(Number(fromChainId)) &&
     Boolean(Number(toChainId)) &&
@@ -113,6 +128,8 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
     swapOnly,
     disabledBridges,
     disabledExchanges,
+    allowedBridges,
+    allowedExchanges,
     routePriority,
     subvariant,
     sdkConfig?.routeOptions?.allowSwitchChain,
@@ -141,6 +158,8 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
           swapOnly,
           disabledBridges,
           disabledExchanges,
+          allowedBridges,
+          allowedExchanges,
           routePriority,
           subvariant,
           allowSwitchChain,
@@ -157,7 +176,7 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
         ).toString();
         const formattedSlippage = parseFloat(slippage) / 100;
 
-        const allowedBridges = swapOnly
+        const allowBridges = swapOnly
           ? []
           : insurableRoute
             ? insurableRoute.steps.flatMap((step) =>
@@ -168,9 +187,9 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
                   return toolKeys;
                 }, [] as string[]),
               )
-            : undefined;
+            : allowedBridges;
 
-        const allowedExchanges = insurableRoute
+        const allowExchanges = insurableRoute
           ? insurableRoute.steps.flatMap((step) =>
               step.includedSteps.reduce((toolKeys, includedStep) => {
                 if (includedStep.type === 'swap') {
@@ -179,7 +198,7 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
                 return toolKeys;
               }, [] as string[]),
             )
-          : undefined;
+          : allowedExchanges;
 
         if (subvariant === 'custom' && contractCalls && toTokenAmount) {
           const contractCallQuote = await getContractCallsQuote(
@@ -196,8 +215,8 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
               denyExchanges: disabledExchanges.length
                 ? disabledExchanges
                 : undefined,
-              allowBridges: allowedBridges,
-              allowExchanges: allowedExchanges,
+              allowBridges,
+              allowExchanges,
               toFallbackAddress: toAddress,
               slippage: formattedSlippage,
             },
@@ -263,18 +282,18 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
               allowSwitchChain:
                 subvariant === 'refuel' ? false : allowSwitchChain,
               bridges:
-                allowedBridges?.length || disabledBridges.length
+                allowBridges?.length || disabledBridges.length
                   ? {
-                      allow: allowedBridges,
+                      allow: allowBridges,
                       deny: disabledBridges.length
                         ? disabledBridges
                         : undefined,
                     }
                   : undefined,
               exchanges:
-                allowedExchanges?.length || disabledExchanges.length
+                allowExchanges?.length || disabledExchanges.length
                   ? {
-                      allow: allowedExchanges,
+                      allow: allowExchanges,
                       deny: disabledExchanges.length
                         ? disabledExchanges
                         : undefined,

diff --git a/packages/widget/src/pages/SelectEnabledToolsPage.tsx b/packages/widget/src/pages/SelectEnabledToolsPage.tsx
@@ -67,7 +67,7 @@ export const SelectEnabledToolsPage: React.FC<{
   const [enabledTools, disabledTools, setToolValue, toggleTools] =
     useSettingsStore(
       (state) => [
-        state[`enabled${type}`],
+        state[`_enabled${type}`],
         state[`disabled${type}`],
         state.setToolValue,
         state.toggleTools,

diff --git a/packages/widget/src/stores/settings/types.ts b/packages/widget/src/stores/settings/types.ts
@@ -24,9 +24,11 @@ export interface SettingsProps {
   enabledAutoRefuel: boolean;
   slippage?: string;
   disabledBridges: string[];
-  enabledBridges: Record<string, boolean>;
+  enabledBridges: string[];
+  _enabledBridges: Record<string, boolean>;
   disabledExchanges: string[];
-  enabledExchanges: Record<string, boolean>;
+  enabledExchanges: string[];
+  _enabledExchanges: Record<string, boolean>;
 }
 
 export interface SettingsState extends SettingsProps {

diff --git a/packages/widget/src/stores/settings/useSettingsStore.ts b/packages/widget/src/stores/settings/useSettingsStore.ts
@@ -22,8 +22,10 @@ export const defaultSettings: SettingsProps = {
   enabledAutoRefuel: true,
   disabledBridges: [],
   disabledExchanges: [],
-  enabledBridges: {},
-  enabledExchanges: {},
+  enabledBridges: [],
+  enabledExchanges: [],
+  _enabledBridges: {},
+  _enabledExchanges: {},
 };
 
 export const useSettingsStore = createWithEqualityFn<SettingsState>(
@@ -53,49 +55,60 @@ export const useSettingsStore = createWithEqualityFn<SettingsState>(
           if (!reset) {
             // Add new tools
             tools.forEach((tool) => {
-              if (!Object.hasOwn(updatedState[`enabled${toolType}`], tool)) {
-                updatedState[`enabled${toolType}`][tool] = true;
+              if (!Object.hasOwn(updatedState[`_enabled${toolType}`], tool)) {
+                updatedState[`_enabled${toolType}`][tool] = true;
               }
             });
             // Filter tools we no longer have
-            updatedState[`enabled${toolType}`] = Object.fromEntries(
-              Object.entries(updatedState[`enabled${toolType}`]).filter(
+            updatedState[`_enabled${toolType}`] = Object.fromEntries(
+              Object.entries(updatedState[`_enabled${toolType}`]).filter(
                 ([key]) => tools.includes(key),
               ),
             );
           } else {
             tools.forEach((tool) => {
-              updatedState[`enabled${toolType}`][tool] = true;
+              updatedState[`_enabled${toolType}`][tool] = true;
             });
           }
-          updatedState[`disabled${toolType}`] = Object.keys(
-            updatedState[`enabled${toolType}`],
-          ).filter((key) => !updatedState[`enabled${toolType}`][key]);
+          const enabledToolKeys = Object.keys(
+            updatedState[`_enabled${toolType}`],
+          );
+          updatedState[`enabled${toolType}`] = enabledToolKeys.filter(
+            (key) => updatedState[`_enabled${toolType}`][key],
+          );
+          updatedState[`disabled${toolType}`] = enabledToolKeys.filter(
+            (key) => !updatedState[`_enabled${toolType}`][key],
+          );
           return updatedState;
         });
       },
       setToolValue: (toolType, tool, value) =>
         set((state) => {
           const enabledTools = {
-            ...state[`enabled${toolType}`],
+            ...state[`_enabled${toolType}`],
             [tool]: value,
           };
+          const enabledToolKeys = Object.keys(enabledTools);
           return {
-            [`enabled${toolType}`]: enabledTools,
-            [`disabled${toolType}`]: Object.keys(enabledTools).filter(
+            [`_enabled${toolType}`]: enabledTools,
+            [`enabled${toolType}`]: enabledToolKeys.filter(
+              (key) => enabledTools[key],
+            ),
+            [`disabled${toolType}`]: enabledToolKeys.filter(
               (key) => !enabledTools[key],
             ),
           };
         }),
       toggleTools: (toolType) =>
         set((state) => {
-          const enabledTools = { ...state[`enabled${toolType}`] };
+          const enabledTools = { ...state[`_enabled${toolType}`] };
           const enableAll = Boolean(state[`disabled${toolType}`].length);
           for (const toolKey in enabledTools) {
             enabledTools[toolKey] = enableAll;
           }
           return {
-            [`enabled${toolType}`]: enabledTools,
+            [`_enabled${toolType}`]: enabledTools,
+            [`enabled${toolType}`]: enableAll ? Object.keys(enabledTools) : [],
             [`disabled${toolType}`]: enableAll ? [] : Object.keys(enabledTools),
           };
         }),
@@ -113,16 +126,27 @@ export const useSettingsStore = createWithEqualityFn<SettingsState>(
       name: `li.fi-widget-settings`,
       version: 4,
       partialize: (state) => {
-        const { disabledBridges, disabledExchanges, ...partializedState } =
-          state;
+        const {
+          disabledBridges,
+          disabledExchanges,
+          enabledBridges,
+          enabledExchanges,
+          ...partializedState
+        } = state;
         return partializedState;
       },
       merge: (persistedState: any, currentState: SettingsState) => {
         const state = { ...currentState, ...persistedState };
         SettingsToolTypes.forEach((toolType) => {
-          state[`disabled${toolType}`] = Object.keys(
-            persistedState[`enabled${toolType}`],
-          ).filter((key) => !persistedState[`enabled${toolType}`][key]);
+          const enabledToolKeys = Object.keys(
+            persistedState[`_enabled${toolType}`],
+          );
+          state[`enabled${toolType}`] = enabledToolKeys.filter(
+            (key) => persistedState[`_enabled${toolType}`][key],
+          );
+          state[`disabled${toolType}`] = enabledToolKeys.filter(
+            (key) => !persistedState[`_enabled${toolType}`][key],
+          );
         });
         return state;
       },