@lifi/widget 1.28.3 → 1.29.0

package/pages/SwapDetailsPage/SwapDetailsPage.js

@@ -8,12 +8,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ContentCopy as ContentCopyIcon, DeleteOutline as DeleteIcon } from '@mui/icons-material';
-import { Box, Button, DialogActions, DialogContent, DialogContentText, DialogTitle, IconButton, Typography } from '@mui/material';
+import { ContentCopy as ContentCopyIcon, DeleteOutline as DeleteIcon, } from '@mui/icons-material';
+import { Box, Button, DialogActions, DialogContent, DialogContentText, DialogTitle, IconButton, Typography, } from '@mui/material';
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
-import shallow from 'zustand/shallow';
+import { shallow } from 'zustand/shallow';
 import { Card, CardTitle } from '../../components/Card';
 import { Dialog } from '../../components/Dialog';
 import { useHeaderActionStore } from '../../components/Header';

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 { 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 { shallow } from 'zustand/shallow';
+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}

@@ -1,9 +1,9 @@
-import create from 'zustand';
+import { create } from 'zustand';
 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 { 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/useRecommendedRouteStore.js

@@ -1,4 +1,4 @@
-import create from 'zustand';
+import { create } from 'zustand';
 export const useRecommendedRouteStore = create((set) => ({
     setRecommendedRoute: (recommendedRoute) => {
         set(() => ({

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 { 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,8 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-/* eslint-disable no-underscore-dangle */
-import create from 'zustand';
+import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 import { SettingsToolTypes } from './types';
 export const defaultConfigurableSettings = {
@@ -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';

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/types.d.ts

@@ -4,7 +4,7 @@ export type ValueSetter<S> = <K extends keyof S>(key: K, value: S[Extract<K, str
 export type ValuesSetter<S> = <K extends keyof S>(values: Record<K, S[Extract<K, string>]>) => void;
 export type SettingsToolType = 'Bridges' | 'Exchanges';
 export declare const SettingsToolTypes: SettingsToolType[];
-export interface SettingsState {
+export interface SettingsProps {
     advancedPreferences: boolean;
     appearance: Appearance;
     gasPrice?: string;
@@ -17,9 +17,9 @@ export interface SettingsState {
     enabledExchanges?: string[];
     _enabledExchanges?: Record<string, boolean>;
 }
-export interface SettingsStore extends SettingsState {
-    setValue: ValueSetter<SettingsState>;
-    setValues: ValuesSetter<SettingsState>;
+export interface SettingsState extends SettingsProps {
+    setValue: ValueSetter<SettingsProps>;
+    setValues: ValuesSetter<SettingsProps>;
     initializeTools(toolType: SettingsToolType, tools: string[]): void;
     setTools(toolType: SettingsToolType, tools: string[], availableTools: (Pick<Bridge, 'key'> | Pick<Exchange, 'key'>)[]): void;
 }

package/stores/settings/useAppearance.js

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

package/stores/settings/useSendToWalletStore.js

@@ -1,4 +1,4 @@
-import create from 'zustand';
+import { create } from 'zustand';
 export const useSendToWalletStore = create((set) => ({
     showSendToWallet: false,
     showSendToWalletDirty: false,

package/stores/settings/useSettings.js

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

package/stores/types.d.ts

@@ -0,0 +1,5 @@
+import type { PropsWithChildren } from 'react';
+export interface PersistStoreProps {
+    namePrefix?: string;
+}
+export type PersistStoreProviderProps = PropsWithChildren<PersistStoreProps>;

package/stores/types.js

@@ -0,0 +1 @@
+export {};