@lifi/widget 1.28.4 → 1.29.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "1.28.4",
+  "version": "1.29.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",
@@ -46,13 +46,13 @@
     "@lifi/sdk": "^1.7.2",
     "@lifi/wallet-management": "^1.2.4",
     "@mui/icons-material": "^5.11.0",
-    "@mui/lab": "^5.0.0-alpha.115",
-    "@mui/material": "^5.11.4",
-    "@sentry/integrations": "^7.30.0",
-    "@sentry/react": "^7.30.0",
-    "@sentry/tracing": "^7.30.0",
-    "@tanstack/react-query": "^4.22.0",
-    "@tanstack/react-virtual": "^3.0.0-beta.36",
+    "@mui/lab": "^5.0.0-alpha.116",
+    "@mui/material": "^5.11.5",
+    "@sentry/integrations": "^7.31.1",
+    "@sentry/react": "^7.31.1",
+    "@sentry/tracing": "^7.31.1",
+    "@tanstack/react-query": "^4.22.4",
+    "@tanstack/react-virtual": "^3.0.0-beta.39",
     "big.js": "^6.2.1",
     "i18next": "^22.4.9",
     "i18next-browser-languagedetector": "^7.0.1",
@@ -60,12 +60,12 @@
     "mitt": "^3.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.41.5",
+    "react-hook-form": "^7.42.1",
     "react-i18next": "^12.1.4",
-    "react-router-dom": "^6.6.2",
+    "react-router-dom": "^6.7.0",
     "react-timer-hook": "^3.0.5",
     "uuid": "^9.0.0",
-    "zustand": "^4.3.1"
+    "zustand": "^4.3.2"
   },
   "peerDependencies": {
     "@types/react": "^18.0.0",

package/pages/ActiveSwapsPage/ActiveSwapsPage.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const ActiveSwapsPage: () => JSX.Element;

package/pages/SelectChainPage/SelectChainPage.style.js

@@ -3,7 +3,7 @@ import { listItemTextClasses } from '@mui/material/ListItemText';
 import { styled } from '@mui/material/styles';
 import { getContrastAlphaColor } from '../../utils';
 export const ListItemButton = styled(MuiListItemButton)(({ theme }) => ({
-    borderRadius: theme.shape.borderRadiusSecondary,
+    borderRadius: theme.shape.borderRadius,
     paddingLeft: theme.spacing(1.5),
     height: 56,
     '&:hover': {

package/pages/SelectNativeTokenPage/SelectNativeTokenPage.style.js

@@ -3,7 +3,7 @@ import { listItemTextClasses } from '@mui/material/ListItemText';
 import { styled } from '@mui/material/styles';
 import { getContrastAlphaColor } from '../../utils';
 export const ListItemButton = styled(MuiListItemButton)(({ theme }) => ({
-    borderRadius: theme.shape.borderRadiusSecondary,
+    borderRadius: theme.shape.borderRadius,
     paddingLeft: theme.spacing(1.5),
     height: 56,
     '&:hover': {

package/pages/SelectTokenPage/SearchTokenInput.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const SearchTokenInput: () => JSX.Element;

package/pages/SelectWalletPage/SelectWalletPage.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const SelectWalletPage: () => JSX.Element;

package/pages/SelectWalletPage/SelectWalletPage.style.js

@@ -3,7 +3,7 @@ import { listItemTextClasses } from '@mui/material/ListItemText';
 import { styled } from '@mui/material/styles';
 import { getContrastAlphaColor } from '../../utils';
 export const ListItemButton = styled(MuiListItemButton)(({ theme }) => ({
-    borderRadius: theme.shape.borderRadiusSecondary,
+    borderRadius: theme.shape.borderRadius,
     paddingLeft: theme.spacing(1.5),
     height: 56,
     '&:hover': {

package/pages/SettingsPage/AdvancedPreferences.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const AdvancedPreferences: () => JSX.Element;

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" | "primary" | "secondary" | "info" | "standard" | undefined;
+    color?: "success" | "warning" | "error" | "info" | "primary" | "secondary" | "standard" | undefined;
     disabled?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     fullWidth?: boolean | undefined;

package/pages/SettingsPage/GasPriceSelect.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const GasPriceSelect: () => JSX.Element;

package/pages/SettingsPage/SettingsPage.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const SettingsPage: () => JSX.Element;

package/pages/SettingsPage/ShowDestinationWallet.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const ShowDestinationWallet: () => JSX.Element | null;

package/pages/SettingsPage/SlippageInput.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const SlippageInput: () => JSX.Element;

package/pages/SwapPage/StatusBottomSheet.style.d.ts

@@ -7,17 +7,17 @@ export declare const IconContainer: import("@emotion/styled").StyledComponent<im
     component?: import("react").ElementType<any> | undefined;
     ref?: import("react").Ref<unknown> | undefined;
     sx?: import("@mui/material").SxProps<Theme> | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+} & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "ref" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "component"> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+}, "children" | "sx" | "ref" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "component"> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
 export declare const IconCircle: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<Theme> & {
     children?: import("react").ReactNode;
     component?: import("react").ElementType<any> | undefined;
     ref?: import("react").Ref<unknown> | undefined;
     sx?: import("@mui/material").SxProps<Theme> | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+} & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "ref" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "component"> & import("@mui/system").MUIStyledCommonProps<Theme> & {
+}, "children" | "sx" | "ref" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "component"> & import("@mui/system").MUIStyledCommonProps<Theme> & {
     status: StatusColor;
 }, {}, {}>;
 export {};

package/providers/WalletProvider/WalletProvider.js

@@ -12,7 +12,7 @@ import { addChain as walletAddChain, switchChain as walletSwitchChain, switchCha
 import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
 import { useWidgetConfig } from '../WidgetProvider';
 const stub = () => {
-    throw new Error('You forgot to wrap your component in <WalletProvider>.');
+    throw new Error(`You forgot to wrap your component in <${WalletProvider.name}>.`);
 };
 const initialContext = {
     connect: stub,

package/providers/WidgetProvider/WidgetProvider.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { getChainByKey } from '@lifi/sdk';
 import { createContext, useContext, useEffect, useMemo } from 'react';
-import { setDefaultSettings } from '../../stores';
+import { setDefaultSettings, useSettingsStoreContext } from '../../stores';
 import { formatAmount } from '../../utils';
 const initialContext = {
     disabledChains: [],
@@ -21,6 +21,7 @@ const WidgetContext = createContext(initialContext);
 export const useWidgetConfig = () => useContext(WidgetContext);
 export const WidgetProvider = (_a) => {
     var { children } = _a, _b = _a.config, _c = _b === void 0 ? {} : _b, { fromChain, fromToken, toChain, toToken, fromAmount } = _c, config = __rest(_c, ["fromChain", "fromToken", "toChain", "toToken", "fromAmount"]);
+    const settingsStoreContext = useSettingsStoreContext();
     const value = useMemo(() => {
         var _a, _b, _c, _d, _e, _f;
         try {
@@ -57,7 +58,7 @@ export const WidgetProvider = (_a) => {
         }
     }, [config, fromAmount, fromChain, fromToken, toChain, toToken]);
     useEffect(() => {
-        setDefaultSettings(value);
-    }, [value]);
+        setDefaultSettings(settingsStoreContext, value);
+    }, [settingsStoreContext, value]);
     return (_jsx(WidgetContext.Provider, Object.assign({ value: value }, { children: children })));
 };

package/stores/StoreProvider.d.ts

@@ -0,0 +1,3 @@
+import type { PropsWithChildren } from 'react';
+import type { PersistStoreProviderProps } from './types';
+export declare const StoreProvider: React.FC<PropsWithChildren<PersistStoreProviderProps>>;

package/stores/StoreProvider.js

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

package/stores/chains/ChainOrderStore.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { StoreApi, UseBoundStore } from 'zustand';
+import type { PersistStoreProviderProps } from '../types';
+import type { ChainOrderState } from './types';
+export type ChainOrderStore = UseBoundStore<StoreApi<ChainOrderState>>;
+export declare const ChainOrderStoreContext: import("react").Context<ChainOrderStore | null>;
+export declare function ChainOrderStoreProvider({ children, ...props }: PersistStoreProviderProps): JSX.Element;
+export declare function useChainOrderStore<T>(selector: (state: ChainOrderState) => T, equalityFn?: (left: T, right: T) => boolean): T;
+export declare function useChainOrderStoreContext(): ChainOrderStore;

package/stores/chains/ChainOrderStore.js

@@ -0,0 +1,38 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable no-underscore-dangle */
+import { createContext, useContext, useRef } from 'react';
+import { createChainOrderStore } from './createChainOrderStore';
+export const ChainOrderStoreContext = createContext(null);
+export function ChainOrderStoreProvider(_a) {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    const storeRef = useRef();
+    if (!storeRef.current) {
+        storeRef.current = createChainOrderStore(props);
+    }
+    return (_jsx(ChainOrderStoreContext.Provider, Object.assign({ value: storeRef.current }, { children: children })));
+}
+export function useChainOrderStore(selector, equalityFn) {
+    const useStore = useContext(ChainOrderStoreContext);
+    if (!useStore) {
+        throw new Error(`You forgot to wrap your component in <${ChainOrderStoreProvider.name}>.`);
+    }
+    return useStore(selector, equalityFn);
+}
+export function useChainOrderStoreContext() {
+    const useStore = useContext(ChainOrderStoreContext);
+    if (!useStore) {
+        throw new Error(`You forgot to wrap your component in <${ChainOrderStoreProvider.name}>.`);
+    }
+    return useStore;
+}

package/stores/chains/createChainOrderStore.d.ts

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

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

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

package/stores/chains/index.d.ts

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

package/stores/chains/index.js

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

package/stores/chains/types.d.ts

@@ -1,8 +1,8 @@
-export interface ChainOrderState {
+export interface ChainOrderProps {
     chainOrder: number[];
     availableChains: number[];
 }
-export interface ChainOrderStore extends ChainOrderState {
+export interface ChainOrderState extends ChainOrderProps {
     initializeChains(chainIds: number[]): number[];
     setChain(chainId: number): void;
 }

package/stores/chains/useChainOrder.js

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

package/stores/index.d.ts

@@ -1,3 +1,4 @@
 export * from './chains';
 export * from './routes';
 export * from './settings';
+export * from './StoreProvider';

package/stores/index.js

@@ -1,3 +1,4 @@
 export * from './chains';
 export * from './routes';
 export * from './settings';
+export * from './StoreProvider';

package/stores/routes/RouteExecutionStore.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { StoreApi, UseBoundStore } from 'zustand';
+import type { PersistStoreProviderProps } from '../types';
+import type { RouteExecutionState } from './types';
+export type RouteExecutionStore = UseBoundStore<StoreApi<RouteExecutionState>>;
+export declare const RouteExecutionStoreContext: import("react").Context<RouteExecutionStore | null>;
+export declare function RouteExecutionStoreProvider({ children, ...props }: PersistStoreProviderProps): JSX.Element;
+export declare function useRouteExecutionStore<T>(selector: (state: RouteExecutionState) => T, equalityFn?: (left: T, right: T) => boolean): T;
+export declare function useRouteExecutionStoreContext(): RouteExecutionStore;

package/stores/routes/RouteExecutionStore.js

@@ -0,0 +1,38 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable no-underscore-dangle */
+import { createContext, useContext, useRef } from 'react';
+import { createRouteExecutionStore } from './createRouteExecutionStore';
+export const RouteExecutionStoreContext = createContext(null);
+export function RouteExecutionStoreProvider(_a) {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    const storeRef = useRef();
+    if (!storeRef.current) {
+        storeRef.current = createRouteExecutionStore(props);
+    }
+    return (_jsx(RouteExecutionStoreContext.Provider, Object.assign({ value: storeRef.current }, { children: children })));
+}
+export function useRouteExecutionStore(selector, equalityFn) {
+    const useStore = useContext(RouteExecutionStoreContext);
+    if (!useStore) {
+        throw new Error(`You forgot to wrap your component in <${RouteExecutionStoreProvider.name}>.`);
+    }
+    return useStore(selector, equalityFn);
+}
+export function useRouteExecutionStoreContext() {
+    const useStore = useContext(RouteExecutionStoreContext);
+    if (!useStore) {
+        throw new Error(`You forgot to wrap your component in <${RouteExecutionStoreProvider.name}>.`);
+    }
+    return useStore;
+}

package/stores/routes/createRouteExecutionStore.d.ts

@@ -0,0 +1,3 @@
+import type { PersistStoreProps } from '../types';
+import type { RouteExecutionState } from './types';
+export declare const createRouteExecutionStore: ({ namePrefix }: PersistStoreProps) => import("zustand").UseBoundStore<import("zustand").StoreApi<RouteExecutionState>>;

package/stores/routes/{useRouteExecutionStore.js → createRouteExecutionStore.js}

@@ -3,7 +3,7 @@ import { persist } from 'zustand/middleware';
 import { hasEnumFlag } from '../../utils';
 import { RouteExecutionStatus } from './types';
 import { isRouteDone, isRouteFailed, isRoutePartiallyDone, isRouteRefunded, } from './utils';
-export const useRouteExecutionStore = create()(persist((set, get) => ({
+export const createRouteExecutionStore = ({ namePrefix }) => create(persist((set, get) => ({
     routes: {},
     setExecutableRoute: (route) => {
         if (!get().routes[route.id]) {
@@ -37,7 +37,8 @@ export const useRouteExecutionStore = create()(persist((set, get) => ({
                 }
                 const isDone = isRouteDone(route);
                 if (isDone) {
-                    updatedState.routes[route.id].status = RouteExecutionStatus.Done;
+                    updatedState.routes[route.id].status =
+                        RouteExecutionStatus.Done;
                     if (isRoutePartiallyDone(route)) {
                         updatedState.routes[route.id].status |=
                             RouteExecutionStatus.Partial;
@@ -90,7 +91,7 @@ export const useRouteExecutionStore = create()(persist((set, get) => ({
         };
     }),
 }), {
-    name: 'li.fi-widget-routes',
+    name: `${namePrefix || 'li.fi'}-widget-routes`,
     version: 1,
     partialize: (state) => ({ routes: state.routes }),
     merge: (persistedState, currentState) => {

package/stores/routes/index.d.ts

@@ -1,7 +1,7 @@
+export * from './RouteExecutionStore';
 export * from './types';
 export * from './useExecutingRoutesIds';
 export * from './useRecommendedRouteStore';
-export * from './useRouteExecutionStore';
 export * from './useSetExecutableRoute';
 export * from './useSwapHistory';
 export * from './utils';

package/stores/routes/index.js

@@ -1,7 +1,7 @@
+export * from './RouteExecutionStore';
 export * from './types';
 export * from './useExecutingRoutesIds';
 export * from './useRecommendedRouteStore';
-export * from './useRouteExecutionStore';
 export * from './useSetExecutableRoute';
 export * from './useSwapHistory';
 export * from './utils';

package/stores/routes/types.d.ts

@@ -1,5 +1,9 @@
 import type { Route } from '@lifi/sdk';
-export interface RouteExecutionStore {
+export interface RouteExecution {
+    route: Route;
+    status: RouteExecutionStatus;
+}
+export interface RouteExecutionState {
     routes: Partial<Record<string, RouteExecution>>;
     setExecutableRoute: (route: Route) => void;
     updateRoute: (route: Route) => void;
@@ -15,10 +19,6 @@ export declare enum RouteExecutionStatus {
     Partial = 8,
     Refunded = 16
 }
-export interface RouteExecution {
-    route: Route;
-    status: RouteExecutionStatus;
-}
 export interface RecommendedRouteStore {
     recommendedRoute?: Route;
     setRecommendedRoute: (route?: Route) => void;

package/stores/routes/useExecutingRoutesIds.js

@@ -1,6 +1,6 @@
 import { shallow } from 'zustand/shallow';
+import { useRouteExecutionStore } from './RouteExecutionStore';
 import { RouteExecutionStatus } from './types';
-import { useRouteExecutionStore } from './useRouteExecutionStore';
 export const useExecutingRoutesIds = (address) => {
     return useRouteExecutionStore((state) => Object.values(state.routes)
         .filter((item) => item.route.fromAddress === address &&

package/stores/routes/useSetExecutableRoute.js

@@ -1,4 +1,4 @@
-import { useRouteExecutionStore } from './useRouteExecutionStore';
+import { useRouteExecutionStore } from './RouteExecutionStore';
 export const useSetExecutableRoute = () => {
     return useRouteExecutionStore((state) => state.setExecutableRoute);
 };

package/stores/routes/useSwapHistory.js

@@ -1,7 +1,7 @@
 import { shallow } from 'zustand/shallow';
 import { hasEnumFlag } from '../../utils';
+import { useRouteExecutionStore } from './RouteExecutionStore';
 import { RouteExecutionStatus } from './types';
-import { useRouteExecutionStore } from './useRouteExecutionStore';
 export const useSwapHistory = (address) => {
     return useRouteExecutionStore((state) => Object.values(state.routes)
         .filter((item) => (item === null || item === void 0 ? void 0 : item.route.fromAddress) === address &&

package/stores/settings/SettingsStore.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { WidgetConfig } from '@lifi/widget';
+import type { StoreApi, UseBoundStore } from 'zustand';
+import type { PersistStoreProviderProps } from '../types';
+import type { SettingsState } from './types';
+export type SettingsStore = UseBoundStore<StoreApi<SettingsState>>;
+export declare const SettingsStoreContext: import("react").Context<SettingsStore | null>;
+export declare function SettingsStoreProvider({ children, ...props }: PersistStoreProviderProps): JSX.Element;
+export declare function useSettingsStore<T>(selector: (state: SettingsState) => T, equalityFn?: (left: T, right: T) => boolean): T;
+export declare function useSettingsStoreContext(): SettingsStore;
+export declare const setDefaultSettings: (useSettingsStore: SettingsStore, config?: WidgetConfig) => void;

package/stores/settings/SettingsStore.js

@@ -0,0 +1,51 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useRef } from 'react';
+import { createSettingsStore, defaultConfigurableSettings, } from './createSettingsStore';
+export const SettingsStoreContext = createContext(null);
+export function SettingsStoreProvider(_a) {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    const storeRef = useRef();
+    if (!storeRef.current) {
+        storeRef.current = createSettingsStore(props);
+    }
+    return (_jsx(SettingsStoreContext.Provider, Object.assign({ value: storeRef.current }, { children: children })));
+}
+export function useSettingsStore(selector, equalityFn) {
+    const useStore = useContext(SettingsStoreContext);
+    if (!useStore) {
+        throw new Error(`You forgot to wrap your component in <${SettingsStoreProvider.name}>.`);
+    }
+    return useStore(selector, equalityFn);
+}
+export function useSettingsStoreContext() {
+    const useStore = useContext(SettingsStoreContext);
+    if (!useStore) {
+        throw new Error(`You forgot to wrap your component in <${SettingsStoreProvider.name}>.`);
+    }
+    return useStore;
+}
+export const setDefaultSettings = (useSettingsStore, config) => {
+    var _a, _b, _c, _d, _e;
+    const { slippage, routePriority, setValue } = useSettingsStore.getState();
+    const defaultSlippage = ((config === null || config === void 0 ? void 0 : config.slippage) ||
+        ((_b = (_a = config === null || config === void 0 ? void 0 : config.sdkConfig) === null || _a === void 0 ? void 0 : _a.defaultRouteOptions) === null || _b === void 0 ? void 0 : _b.slippage) ||
+        0) * 100;
+    const defaultRoutePriority = (config === null || config === void 0 ? void 0 : config.routePriority) || ((_d = (_c = config === null || config === void 0 ? void 0 : config.sdkConfig) === null || _c === void 0 ? void 0 : _c.defaultRouteOptions) === null || _d === void 0 ? void 0 : _d.order);
+    if (!slippage) {
+        setValue('slippage', (_e = (defaultSlippage || defaultConfigurableSettings.slippage)) === null || _e === void 0 ? void 0 : _e.toString());
+    }
+    if (!routePriority) {
+        setValue('routePriority', defaultRoutePriority || defaultConfigurableSettings.routePriority);
+    }
+};

package/stores/settings/createSettingsStore.d.ts

@@ -0,0 +1,5 @@
+import type { PersistStoreProps } from '../types';
+import type { SettingsProps, SettingsState } from './types';
+export declare const defaultConfigurableSettings: Pick<SettingsState, 'routePriority' | 'slippage'>;
+export declare const defaultSettings: SettingsProps;
+export declare const createSettingsStore: ({ namePrefix }: PersistStoreProps) => import("zustand").UseBoundStore<import("zustand").StoreApi<SettingsState>>;

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

@@ -9,7 +9,6 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-/* eslint-disable no-underscore-dangle */
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 import { SettingsToolTypes } from './types';
@@ -23,7 +22,7 @@ export const defaultSettings = {
     advancedPreferences: false,
     showDestinationWallet: true,
 };
-export const useSettingsStore = create()(persist((set) => (Object.assign(Object.assign({}, defaultSettings), { setValue: (key, value) => set(() => ({
+export const createSettingsStore = ({ namePrefix }) => create(persist((set) => (Object.assign(Object.assign({}, defaultSettings), { setValue: (key, value) => set(() => ({
         [key]: value,
     })), setValues: (values) => set((state) => {
         const updatedState = Object.assign({}, state);
@@ -68,7 +67,7 @@ export const useSettingsStore = create()(persist((set) => (Object.assign(Object.
             return values;
         }, {}),
     })) })), {
-    name: 'li.fi-widget-settings',
+    name: `${namePrefix || 'li.fi'}-widget-settings`,
     version: 2,
     partialize: (state) => {
         const { enabledBridges, enabledExchanges } = state, partializedState = __rest(state, ["enabledBridges", "enabledExchanges"]);
@@ -93,17 +92,3 @@ export const useSettingsStore = create()(persist((set) => (Object.assign(Object.
         return persistedState;
     },
 }));
-export const setDefaultSettings = (config) => {
-    var _a, _b, _c, _d, _e;
-    const { slippage, routePriority, setValue } = useSettingsStore.getState();
-    const defaultSlippage = ((config === null || config === void 0 ? void 0 : config.slippage) ||
-        ((_b = (_a = config === null || config === void 0 ? void 0 : config.sdkConfig) === null || _a === void 0 ? void 0 : _a.defaultRouteOptions) === null || _b === void 0 ? void 0 : _b.slippage) ||
-        0) * 100;
-    const defaultRoutePriority = (config === null || config === void 0 ? void 0 : config.routePriority) || ((_d = (_c = config === null || config === void 0 ? void 0 : config.sdkConfig) === null || _c === void 0 ? void 0 : _c.defaultRouteOptions) === null || _d === void 0 ? void 0 : _d.order);
-    if (!slippage) {
-        setValue('slippage', (_e = (defaultSlippage || defaultConfigurableSettings.slippage)) === null || _e === void 0 ? void 0 : _e.toString());
-    }
-    if (!routePriority) {
-        setValue('routePriority', defaultRoutePriority || defaultConfigurableSettings.routePriority);
-    }
-};

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';