From 1e00fb4da805c6001369d8b1806949c52632b0ce Mon Sep 17 00:00:00 2001 From: Eugene Chybisov Date: Mon, 8 Jul 2024 12:53:11 +0200 Subject: [PATCH] fix: allowed bridges option doesn't applied correctly --- .../DesignControls/FontsControl/index.ts | 2 +- .../src/defaultWidgetConfig.ts | 2 +- .../src/store/editTools/index.ts | 2 +- .../src/store/widgetConfig/index.ts | 2 +- packages/widget/src/hooks/useRoutes.ts | 41 ++++++++---- .../src/pages/SelectEnabledToolsPage.tsx | 2 +- packages/widget/src/stores/settings/types.ts | 6 +- .../src/stores/settings/useSettingsStore.ts | 64 +++++++++++++------ 8 files changed, 83 insertions(+), 38 deletions(-) diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/index.ts b/packages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/index.ts index b7ba7d59f..9dda9239f 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/index.ts +++ b/packages/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 index aab9f7d3e..16442500d 100644 --- 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 index df284079a..c8fa73934 100644 --- 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 index 0f5896396..873b3099e 100644 --- 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 index 2d83de72c..0fdcd2b77 100644 --- 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 index 43b39328f..d910c9dea 100644 --- 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 index fb17c0741..bb2c10e4b 100644 --- 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; + enabledBridges: string[]; + _enabledBridges: Record; disabledExchanges: string[]; - enabledExchanges: Record; + enabledExchanges: string[]; + _enabledExchanges: Record; } export interface SettingsState extends SettingsProps { diff --git a/packages/widget/src/stores/settings/useSettingsStore.ts b/packages/widget/src/stores/settings/useSettingsStore.ts index f8c72970c..4d4eabc75 100644 --- 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( @@ -53,49 +55,60 @@ export const useSettingsStore = createWithEqualityFn( 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( 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; },