@lifi/widget 1.32.0 → 1.32.1

package/components/SwapRouteCard/SwapRouteCard.style.d.ts

@@ -17,7 +17,7 @@ export declare const Label: import("@emotion/styled").StyledComponent<import("@m
 export declare const IconButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").IconButtonClasses> | undefined;
-    color?: "inherit" | "default" | "success" | "warning" | "error" | "info" | "primary" | "secondary" | undefined;
+    color?: "inherit" | "default" | "success" | "warning" | "error" | "primary" | "secondary" | "info" | undefined;
     disabled?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     edge?: false | "end" | "start" | undefined;

package/components/TokenList/TokenList.style.d.ts

@@ -35,4 +35,4 @@ export declare const ListItem: import("@emotion/styled").StyledComponent<{
     } | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
     ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
-}, "button" | "className" | "style" | "classes" | "children" | "disabled" | "sx" | "alignItems" | "autoFocus" | "dense" | "divider" | "components" | "componentsProps" | "slotProps" | "slots" | "selected" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "disablePadding" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "button" | "className" | "style" | "classes" | "children" | "disabled" | "sx" | "alignItems" | "autoFocus" | "dense" | "divider" | "components" | "slotProps" | "slots" | "componentsProps" | "selected" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "disablePadding" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/config/version.d.ts

@@ -1,2 +1,2 @@
 export declare const name = "@lifi/widget";
-export declare const version = "1.32.0";
+export declare const version = "1.32.1";

package/config/version.js

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget';
-export const version = '1.32.0';
+export const version = '1.32.1';

package/hooks/useTools.js

@@ -1,10 +1,9 @@
 import { useQuery } from '@tanstack/react-query';
 import { isItemAllowed, useLiFi, useWidgetConfig } from '../providers';
-import { useSettingsStoreContext } from '../stores';
+import { useSettingsStore } from '../stores';
 export const useTools = () => {
     const lifi = useLiFi();
     const { bridges, exchanges } = useWidgetConfig();
-    const settingsStoreContext = useSettingsStoreContext();
     const { data } = useQuery(['tools'], async () => {
         const tools = await lifi.getTools();
         return {
@@ -13,7 +12,7 @@ export const useTools = () => {
         };
     }, {
         onSuccess(data) {
-            const { initializeTools } = settingsStoreContext.getState();
+            const { initializeTools } = useSettingsStore.getState();
             initializeTools('Bridges', data.bridges.map((bridge) => bridge.key));
             initializeTools('Exchanges', data.exchanges.map((exchange) => exchange.key));
         },

package/i18n/en.json

@@ -56,7 +56,6 @@
     "title": "Language"
   },
   "settings": {
-    "advancedPreferences": "Advanced preferences",
     "enabledBridges": "Enabled bridges",
     "enabledExchanges": "Enabled exchanges",
     "gasPrice": {
@@ -65,10 +64,7 @@
       "slow": "Slow",
       "title": "Gas price"
     },
-    "resetToDefault": "Reset to default",
     "routePriority": "Route priority",
-    "selectEnabledBridges": "Select enabled bridges",
-    "selectEnabledExchanges": "Select enabled exchanges",
     "showDestinationWallet": "Show destination wallet",
     "slippage": "Slippage"
   },

package/i18n/uk.json

@@ -6,7 +6,6 @@
     "contactSupport": "Служба підтримки",
     "continue": "Продовжити",
     "copyAddress": "Скопіювати адресу",
-    "viewOnExplorer": "Переглянути в оглядачі",
     "dark": "Темна",
     "delete": "Видалити",
     "disconnect": "Від'єднатись",
@@ -19,6 +18,8 @@
     "ok": "Ок",
     "okay": "Добре",
     "removeSwap": "Видалити своп",
+    "reset": "Скинути",
+    "resetSettings": "Скинути налаштування",
     "restartSwap": "Перезапустити своп",
     "reviewGasSwap": "Переглянути своп газу",
     "reviewSwap": "Переглянути своп",
@@ -27,7 +28,8 @@
     "startGasSwap": "Почати своп газу",
     "startSwap": "Почати своп",
     "swap": "Своп",
-    "tryAgain": "Спробувати ще раз"
+    "tryAgain": "Спробувати ще раз",
+    "viewOnExplorer": "Переглянути в оглядачі"
   },
   "format": {
     "currency": "{{value, currency(currency: USD)}}",
@@ -54,7 +56,6 @@
     "title": "Мова"
   },
   "settings": {
-    "advancedPreferences": "Розширені параметри",
     "enabledBridges": "Увімкнені мости",
     "enabledExchanges": "Увімкнені обмінники",
     "gasPrice": {
@@ -63,10 +64,7 @@
       "slow": "Повільно",
       "title": "Ціна на газ"
     },
-    "resetToDefault": "Скинути налаштування",
     "routePriority": "Пріоритет маршруту",
-    "selectEnabledBridges": "Виберіть увімкнені мости",
-    "selectEnabledExchanges": "Виберіть увімкнені обмінники",
     "showDestinationWallet": "Показати цільовий гаманець",
     "slippage": "Прослизання"
   },
@@ -201,7 +199,8 @@
         "highValueLoss": "Вартість отриманих токенів значно нижча, ніж обмінені токени та вартість транзакції.",
         "insufficientFunds": "У вас недостатньо коштів для здійснення свопу.",
         "insufficientGas": "Потрібно додати хоча б:",
-        "rateChanged": "Курс обміну змінився. Продовжуючи своп, ви приймете новий курс."
+        "rateChanged": "Курс обміну змінився. Продовжуючи своп, ви приймете новий курс.",
+        "resetSettings": "Це скине пріоритет вашого маршруту, прослизання, ціну газу, увімкнені мости та обмінники."
       },
       "title": {
         "deleteActiveSwaps": "Видалити всі активні свопи?",
@@ -209,7 +208,8 @@
         "deleteSwapHistory": "Видалити історію свопів?",
         "highValueLoss": "Висока втрата вартості",
         "insufficientGas": "Недостатня кількість газу",
-        "rateChanged": "Курс змінився"
+        "rateChanged": "Курс змінився",
+        "resetSettings": "Скинути налаштування?"
       }
     }
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "1.32.0",
+  "version": "1.32.1",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "main": "./cjs/index.js",
   "module": "./index.js",

package/pages/SettingsPage/ColorSchemeButtonGroup.style.d.ts

@@ -2,7 +2,7 @@
 export declare const ToggleButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ToggleButtonClasses> | undefined;
-    color?: "success" | "warning" | "error" | "info" | "primary" | "secondary" | "standard" | undefined;
+    color?: "success" | "warning" | "error" | "primary" | "secondary" | "info" | "standard" | undefined;
     disabled?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     fullWidth?: boolean | undefined;

package/providers/WidgetProvider/WidgetProvider.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { getChainByKey } from '@lifi/sdk';
-import { createContext, useContext, useEffect, useId, useMemo } from 'react';
-import { setDefaultSettings, useSettingsStoreContext } from '../../stores';
+import { createContext, useContext, useId, useMemo } from 'react';
+import { setDefaultSettings } from '../../stores';
 import { formatAmount } from '../../utils';
 const initialContext = {
     disabledChains: [],
@@ -10,7 +10,6 @@ const initialContext = {
 const WidgetContext = createContext(initialContext);
 export const useWidgetConfig = () => useContext(WidgetContext);
 export const WidgetProvider = ({ children, config: { fromChain, fromToken, toChain, toToken, fromAmount, ...config } = {}, }) => {
-    const settingsStoreContext = useSettingsStoreContext();
     const elementId = useId();
     const value = useMemo(() => {
         try {
@@ -21,7 +20,7 @@ export const WidgetProvider = ({ children, config: { fromChain, fromToken, toCha
                     delete searchParams[`${key}Token`];
                 }
             });
-            return {
+            const value = {
                 ...config,
                 fromChain: (searchParams.fromChain &&
                     isNaN(parseInt(searchParams.fromChain, 10))) ||
@@ -48,14 +47,13 @@ export const WidgetProvider = ({ children, config: { fromChain, fromToken, toCha
                     : fromAmount,
                 elementId,
             };
+            setDefaultSettings(value);
+            return value;
         }
         catch (e) {
             console.warn(e);
             return { ...config, elementId };
         }
     }, [config, elementId, fromAmount, fromChain, fromToken, toChain, toToken]);
-    useEffect(() => {
-        setDefaultSettings(settingsStoreContext, value);
-    }, [settingsStoreContext, value]);
     return (_jsx(WidgetContext.Provider, { value: value, children: children }));
 };

package/stores/StoreProvider.js

@@ -1,11 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ChainOrderStoreProvider } from './chains';
-import { RouteExecutionStoreProvider } from './routes';
-import { SettingsStoreProvider } from './settings';
+import { RecommendedRouteStoreProvider, RouteExecutionStoreProvider, } from './routes';
 export const StoreProvider = ({ children, namePrefix }) => {
-    return (_jsx(RouteExecutionStoreProvider, { namePrefix: namePrefix, children: _jsx(SettingsStoreProvider
-        // namePrefix={namePrefix}
-        , { children: _jsx(ChainOrderStoreProvider
-            // namePrefix={namePrefix}
-            , { children: children }) }) }));
+    return (_jsx(RouteExecutionStoreProvider, { namePrefix: namePrefix, children: _jsx(RecommendedRouteStoreProvider, { children: children }) }));
 };

package/stores/chains/index.d.ts

@@ -1,4 +1,3 @@
-export * from './ChainOrderStore';
-export * from './createChainOrderStore';
 export * from './types';
 export * from './useChainOrder';
+export * from './useChainOrderStore';

package/stores/chains/index.js

@@ -1,4 +1,3 @@
-export * from './ChainOrderStore';
-export * from './createChainOrderStore';
 export * from './types';
 export * from './useChainOrder';
+export * from './useChainOrderStore';

package/stores/chains/useChainOrder.js

@@ -1,5 +1,5 @@
 import { shallow } from 'zustand/shallow';
-import { useChainOrderStore } from './ChainOrderStore';
+import { useChainOrderStore } from '.';
 export const useChainOrder = () => {
     return useChainOrderStore((state) => [state.chainOrder, state.setChain], shallow);
 };

package/stores/chains/useChainOrderStore.d.ts

@@ -0,0 +1,3 @@
+import type { ChainOrderState } from './types';
+export declare const maxChainToOrder = 9;
+export declare const useChainOrderStore: import("zustand").UseBoundStore<import("zustand").StoreApi<ChainOrderState>>;

package/stores/chains/{createChainOrderStore.js → useChainOrderStore.js}

@@ -1,7 +1,7 @@
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 export const maxChainToOrder = 9;
-export const createChainOrderStore = ({ namePrefix }) => create(persist((set, get) => ({
+export const useChainOrderStore = create(persist((set, get) => ({
     chainOrder: [],
     availableChains: [],
     initializeChains: (chainIds) => {
@@ -43,7 +43,7 @@ export const createChainOrderStore = ({ namePrefix }) => create(persist((set, ge
         });
     },
 }), {
-    name: `${namePrefix || 'li.fi'}-widget-chains-order`,
+    name: `li.fi-widget-chains-order`,
     version: 0,
     partialize: (state) => ({ chainOrder: state.chainOrder }),
 }));

package/stores/routes/types.d.ts

@@ -19,7 +19,7 @@ export declare enum RouteExecutionStatus {
     Partial = 8,
     Refunded = 16
 }
-export interface RecommendedRouteStore {
+export interface RecommendedRouteState {
     recommendedRoute?: Route;
     setRecommendedRoute: (route?: Route) => void;
 }

package/stores/routes/useRecommendedRouteStore.d.ts

@@ -1,2 +1,10 @@
-import type { RecommendedRouteStore } from './types';
-export declare const useRecommendedRouteStore: import("zustand").UseBoundStore<import("zustand").StoreApi<RecommendedRouteStore>>;
+/// <reference types="react" />
+import type { StoreApi, UseBoundStore } from 'zustand';
+import type { PersistStoreProviderProps } from '../types';
+import type { RecommendedRouteState } from './types';
+export declare const createRecommendedRouteStore: () => UseBoundStore<StoreApi<RecommendedRouteState>>;
+export type RecommendedRouteStore = UseBoundStore<StoreApi<RecommendedRouteState>>;
+export declare const RecommendedRouteStoreContext: import("react").Context<RecommendedRouteStore | null>;
+export declare function RecommendedRouteStoreProvider({ children, ...props }: PersistStoreProviderProps): JSX.Element;
+export declare function useRecommendedRouteStore<T>(selector: (state: RecommendedRouteState) => T, equalityFn?: (left: T, right: T) => boolean): T;
+export declare function useRecommendedRouteStoreContext(): RecommendedRouteStore;

package/stores/routes/useRecommendedRouteStore.js

@@ -1,8 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useRef } from 'react';
 import { create } from 'zustand';
-export const useRecommendedRouteStore = create((set) => ({
+export const createRecommendedRouteStore = () => create((set) => ({
     setRecommendedRoute: (recommendedRoute) => {
         set(() => ({
             recommendedRoute,
         }));
     },
 }));
+export const RecommendedRouteStoreContext = createContext(null);
+export function RecommendedRouteStoreProvider({ children, ...props }) {
+    const storeRef = useRef();
+    if (!storeRef.current) {
+        storeRef.current = createRecommendedRouteStore();
+    }
+    return (_jsx(RecommendedRouteStoreContext.Provider, { value: storeRef.current, children: children }));
+}
+export function useRecommendedRouteStore(selector, equalityFn) {
+    const useStore = useContext(RecommendedRouteStoreContext);
+    if (!useStore) {
+        throw new Error(`You forgot to wrap your component in <${RecommendedRouteStoreProvider.name}>.`);
+    }
+    return useStore(selector, equalityFn);
+}
+export function useRecommendedRouteStoreContext() {
+    const useStore = useContext(RecommendedRouteStoreContext);
+    if (!useStore) {
+        throw new Error(`You forgot to wrap your component in <${RecommendedRouteStoreProvider.name}>.`);
+    }
+    return useStore;
+}

package/stores/settings/index.d.ts

@@ -1,5 +1,5 @@
-export * from './SettingsStore';
 export * from './types';
 export * from './useAppearance';
 export * from './useSendToWalletStore';
 export * from './useSettings';
+export * from './useSettingsStore';

package/stores/settings/index.js

@@ -1,5 +1,5 @@
-export * from './SettingsStore';
 export * from './types';
 export * from './useAppearance';
 export * from './useSendToWalletStore';
 export * from './useSettings';
+export * from './useSettingsStore';

package/stores/settings/useAppearance.js

@@ -1,5 +1,5 @@
 import { shallow } from 'zustand/shallow';
-import { useSettingsStore } from './SettingsStore';
+import { useSettingsStore } from './useSettingsStore';
 export const useAppearance = () => {
     const [appearance, setValue] = useSettingsStore((state) => [state.appearance, state.setValue], shallow);
     const setAppearance = (appearance) => {

package/stores/settings/useSettings.js

@@ -1,5 +1,5 @@
 import { shallow } from 'zustand/shallow';
-import { useSettingsStore } from './SettingsStore';
+import { useSettingsStore } from './useSettingsStore';
 export const useSettings = (keys) => {
     return useSettingsStore((state) => keys.reduce((values, key) => {
         values[key] = state[key];

package/stores/settings/useSettingsStore.d.ts

@@ -0,0 +1,6 @@
+import type { WidgetConfig } from '../../types';
+import type { SettingsProps, SettingsState } from './types';
+export declare const defaultConfigurableSettings: Pick<SettingsState, 'routePriority' | 'slippage'>;
+export declare const defaultSettings: SettingsProps;
+export declare const useSettingsStore: import("zustand").UseBoundStore<import("zustand").StoreApi<SettingsState>>;
+export declare const setDefaultSettings: (config?: WidgetConfig) => void;

package/stores/settings/{createSettingsStore.js → useSettingsStore.js}

@@ -12,7 +12,7 @@ export const defaultSettings = {
     enabledBridges: [],
     enabledExchanges: [],
 };
-export const createSettingsStore = ({ namePrefix }) => create(persist((set, get) => ({
+export const useSettingsStore = create(persist((set, get) => ({
     ...defaultSettings,
     setValue: (key, value) => set(() => ({
         [key]: value,
@@ -71,7 +71,7 @@ export const createSettingsStore = ({ namePrefix }) => create(persist((set, get)
         get().initializeTools('Exchanges', exchanges, true);
     },
 }), {
-    name: `${namePrefix || 'li.fi'}-widget-settings`,
+    name: `li.fi-widget-settings`,
     version: 2,
     partialize: (state) => {
         const { enabledBridges, enabledExchanges, ...partializedState } = state;
@@ -96,3 +96,19 @@ export const createSettingsStore = ({ namePrefix }) => create(persist((set, get)
         return persistedState;
     },
 }));
+export const setDefaultSettings = (config) => {
+    const { slippage, routePriority, setValue } = useSettingsStore.getState();
+    const defaultSlippage = (config?.slippage ||
+        config?.sdkConfig?.defaultRouteOptions?.slippage ||
+        0) * 100;
+    const defaultRoutePriority = config?.routePriority || config?.sdkConfig?.defaultRouteOptions?.order;
+    defaultConfigurableSettings.slippage = (defaultSlippage || defaultConfigurableSettings.slippage)?.toString();
+    defaultConfigurableSettings.routePriority =
+        defaultRoutePriority || defaultConfigurableSettings.routePriority;
+    if (!slippage) {
+        setValue('slippage', defaultConfigurableSettings.slippage);
+    }
+    if (!routePriority) {
+        setValue('routePriority', defaultConfigurableSettings.routePriority);
+    }
+};