@lifi/widget 1.28.3 → 1.29.0

package/cjs/components/TokenAvatar/TokenAvatar.style.d.ts

@@ -5,14 +5,14 @@ export declare const AvatarDefault: import("@emotion/styled").StyledComponent<im
     component?: import("react").ElementType<any> | undefined;
     ref?: import("react").Ref<unknown> | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").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<import("@mui/material").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<import("@mui/material").Theme>, {}, {}>;
 export declare const AvatarDefaultContainer: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
     children?: import("react").ReactNode;
     component?: import("react").ElementType<any> | undefined;
     ref?: import("react").Ref<unknown> | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").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<import("@mui/material").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<import("@mui/material").Theme>, {}, {}>;

package/cjs/config/theme.js

@@ -52,6 +52,9 @@ const createTheme = (mode, theme = {}) => {
     const contrastButtonColor = (0, styles_1.getContrastRatio)(colors_1.common.white, primaryMainColor) >= 3
         ? colors_1.common.white
         : colors_1.common.black;
+    const contrastTextButtonColor = (0, styles_1.getContrastRatio)(colors_1.common.white, (0, styles_1.alpha)(primaryMainColor, 0.08)) >= 3
+        ? colors_1.common.white
+        : colors_1.common.black;
     return (0, styles_1.createTheme)({
         typography: Object.assign({ fontFamily: 'Inter var, Inter, sans-serif' }, theme.typography),
         palette: Object.assign(Object.assign(Object.assign(Object.assign({ mode }, palette), (mode === 'light' ? paletteLight : paletteDark)), theme.palette), { primary: {
@@ -83,14 +86,15 @@ const createTheme = (mode, theme = {}) => {
                 defaultProps: {
                     disableElevation: true,
                 },
-                styleOverrides: Object.assign({ root: {
+                styleOverrides: {
+                    root: {
                         borderRadius: (_v = (_u = theme.shape) === null || _u === void 0 ? void 0 : _u.borderRadiusSecondary) !== null && _v !== void 0 ? _v : shape.borderRadiusSecondary,
                         textTransform: 'none',
                         fontSize: '1rem',
                         [`&.Mui-disabled, &.Mui-disabled:hover`]: {
                             color: mode === 'light'
-                                ? 'rgb(0 0 0 / 56%)'
-                                : 'rgb(255 255 255 / 56%)',
+                                ? (0, styles_1.alpha)(colors_1.common.black, 0.56)
+                                : (0, styles_1.alpha)(colors_1.common.white, 0.56),
                             cursor: 'not-allowed',
                             pointerEvents: 'auto',
                         },
@@ -106,39 +110,30 @@ const createTheme = (mode, theme = {}) => {
                         [`&.${LoadingButton_1.loadingButtonClasses.root}.${LoadingButton_1.loadingButtonClasses.loading}`]: {
                             color: 'transparent',
                         },
-                    }, text: {
-                        backgroundColor: (0, styles_1.alpha)(primaryMainColor, 0.08),
+                    },
+                    text: {
+                        backgroundColor: mode === 'light'
+                            ? (0, styles_1.alpha)(primaryMainColor, 0.08)
+                            : (0, styles_1.alpha)(primaryMainColor, 0.42),
                         '&:hover': {
-                            backgroundColor: (0, styles_1.alpha)(primaryMainColor, 0.12),
+                            backgroundColor: mode === 'light'
+                                ? (0, styles_1.alpha)(primaryMainColor, 0.12)
+                                : (0, styles_1.alpha)(primaryMainColor, 0.56),
                         },
-                    }, contained: {
+                        color: mode === 'light' ? primaryMainColor : contrastTextButtonColor,
+                    },
+                    contained: {
                         '&:hover': {
                             color: contrastButtonColor,
                         },
-                    }, sizeMedium: {
+                    },
+                    sizeMedium: {
                         padding: '10px 14px',
                         [`.${DialogActions_1.dialogActionsClasses.root} &`]: {
                             padding: '6px 12px',
                         },
-                    } }, (mode === 'dark'
-                    ? {
-                        outlined: {
-                            color: primaryLightColor,
-                            borderColor: primaryLightColor,
-                            '&:hover': {
-                                backgroundColor: (0, styles_1.alpha)(primaryLightColor, 0.08),
-                                borderColor: primaryLightColor,
-                            },
-                        },
-                        text: {
-                            backgroundColor: (0, styles_1.lighten)(paletteDark.background.paper, 0.08),
-                            color: colors_1.common.white,
-                            '&:hover': {
-                                backgroundColor: (0, styles_1.lighten)(paletteDark.background.paper, 0.12),
-                            },
-                        },
-                    }
-                    : {})),
+                    },
+                },
             },
             MuiIconButton: {
                 styleOverrides: {

package/cjs/config/version.d.ts

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

package/cjs/config/version.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.version = exports.name = void 0;
 exports.name = '@lifi/widget';
-exports.version = '1.28.3';
+exports.version = '1.29.0';

package/cjs/hooks/useChains.js

@@ -19,12 +19,11 @@ const useChains = () => {
     const { disabledChains, chains } = (0, providers_1.useWidgetConfig)();
     const lifi = (0, providers_1.useLiFi)();
     const { getValues, setValue } = (0, react_hook_form_1.useFormContext)();
+    const initializeChains = (0, stores_1.useChainOrderStore)((state) => state.initializeChains);
     const { data, isLoading } = (0, react_query_1.useQuery)(['chains'], () => __awaiter(void 0, void 0, void 0, function* () {
         const availableChains = yield lifi.getChains();
         const filteredChains = availableChains.filter((chain) => (0, providers_1.isItemAllowed)(chain.id, chains, disabledChains));
-        const chainOrder = stores_1.useChainOrderStore
-            .getState()
-            .initializeChains(filteredChains.map((chain) => chain.id));
+        const chainOrder = initializeChains(filteredChains.map((chain) => chain.id));
         const [fromChainValue, toChainValue] = getValues([
             providers_1.SwapFormKey.FromChain,
             providers_1.SwapFormKey.ToChain,

package/cjs/hooks/useRouteExecution.js

@@ -24,10 +24,11 @@ const useRouteExecution = ({ routeId, executeInBackground, onAcceptExchangeRateU
     const { account, switchChain } = (0, providers_1.useWallet)();
     const resumedAfterMount = (0, react_1.useRef)(false);
     const emitter = (0, useWidgetEvents_1.useWidgetEvents)();
+    const routeExecutionStoreContext = (0, stores_1.useRouteExecutionStoreContext)();
     const routeExecution = (0, stores_1.useRouteExecutionStore)((state) => state.routes[routeId]);
-    const [updateRoute, restartRoute, deleteRoute] = (0, stores_1.useRouteExecutionStore)((state) => [state.updateRoute, state.restartRoute, state.deleteRoute], shallow_1.default);
+    const [updateRoute, restartRoute, deleteRoute] = (0, stores_1.useRouteExecutionStore)((state) => [state.updateRoute, state.restartRoute, state.deleteRoute], shallow_1.shallow);
     const updateCallback = (updatedRoute) => {
-        const routeExecution = stores_1.useRouteExecutionStore.getState().routes[updatedRoute.id];
+        const routeExecution = routeExecutionStoreContext.getState().routes[updatedRoute.id];
         if (!routeExecution) {
             return;
         }
@@ -158,7 +159,7 @@ const useRouteExecution = ({ routeId, executeInBackground, onAcceptExchangeRateU
     (0, react_1.useEffect)(() => {
         return () => {
             var _a;
-            const route = (_a = stores_1.useRouteExecutionStore.getState().routes[routeId]) === null || _a === void 0 ? void 0 : _a.route;
+            const route = (_a = routeExecutionStoreContext.getState().routes[routeId]) === null || _a === void 0 ? void 0 : _a.route;
             if (!route || !(0, stores_1.isRouteActive)(route)) {
                 return;
             }
@@ -166,7 +167,7 @@ const useRouteExecution = ({ routeId, executeInBackground, onAcceptExchangeRateU
             console.log('Move route execution to background.', routeId);
             resumedAfterMount.current = false;
         };
-    }, [lifi, routeId]);
+    }, [lifi, routeExecutionStoreContext, routeId]);
     return {
         executeRoute,
         restartRoute: restartRouteMutation,

package/cjs/hooks/useTools.js

@@ -8,9 +8,10 @@ const stores_1 = require("../stores");
 const useTools = () => {
     const lifi = (0, providers_1.useLiFi)();
     const { bridges, exchanges } = (0, providers_1.useWidgetConfig)();
+    const settingsStoreContext = (0, stores_1.useSettingsStoreContext)();
     const { data } = (0, react_query_1.useQuery)(['tools'], () => lifi.getTools(), {
         onSuccess(data) {
-            const { initializeTools } = stores_1.useSettingsStore.getState();
+            const { initializeTools } = settingsStoreContext.getState();
             initializeTools('Bridges', data.bridges
                 .filter((bridge) => (0, providers_1.isItemAllowed)(bridge.key, bridges))
                 .map((bridge) => bridge.key));

package/cjs/pages/ActiveSwapsPage/ActiveSwapsPage.d.ts

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

package/cjs/pages/SelectTokenPage/SearchTokenInput.d.ts

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

package/cjs/pages/SelectWalletPage/SelectWalletPage.d.ts

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

package/cjs/pages/SettingsPage/AdvancedPreferences.d.ts

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

package/cjs/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/cjs/pages/SettingsPage/EnabledBridgesSelect.js

@@ -13,7 +13,7 @@ const stores_1 = require("../../stores");
 const EnabledBridgesSelect = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { tools, formattedTools } = (0, hooks_1.useTools)();
-    const [enabledBridges, setTools] = (0, stores_1.useSettingsStore)((state) => [state.enabledBridges, state.setTools], shallow_1.default);
+    const [enabledBridges, setTools] = (0, stores_1.useSettingsStore)((state) => [state.enabledBridges, state.setTools], shallow_1.shallow);
     return (tools === null || tools === void 0 ? void 0 : tools.bridges.length) ? ((0, jsx_runtime_1.jsxs)(Card_1.Card, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`settings.enabledBridges`) }), (0, jsx_runtime_1.jsx)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(Select_1.Select, Object.assign({ multiple: true, placeholder: t(`settings.selectEnabledBridges`), MenuProps: { elevation: 2, PaperProps: { sx: { maxHeight: 320 } } }, IconComponent: icons_material_1.KeyboardArrowDown, value: enabledBridges !== null && enabledBridges !== void 0 ? enabledBridges : [], onChange: (event) => {
                         setTools('Bridges', event.target.value, tools.bridges);
                     }, renderValue: (selected) => ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { display: 'flex', flexWrap: 'wrap', gap: 0.5 } }, { children: selected.map((value) => {

package/cjs/pages/SettingsPage/EnabledExchangesSelect.js

@@ -13,7 +13,7 @@ const stores_1 = require("../../stores");
 const EnabledExchangesSelect = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { tools, formattedTools } = (0, hooks_1.useTools)();
-    const [enabledExchanges, setTools] = (0, stores_1.useSettingsStore)((state) => [state.enabledExchanges, state.setTools], shallow_1.default);
+    const [enabledExchanges, setTools] = (0, stores_1.useSettingsStore)((state) => [state.enabledExchanges, state.setTools], shallow_1.shallow);
     return (tools === null || tools === void 0 ? void 0 : tools.exchanges.length) ? ((0, jsx_runtime_1.jsxs)(Card_1.Card, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`settings.enabledExchanges`) }), (0, jsx_runtime_1.jsx)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(Select_1.Select, Object.assign({ multiple: true, placeholder: t(`settings.selectEnabledExchanges`), value: enabledExchanges !== null && enabledExchanges !== void 0 ? enabledExchanges : [], onChange: (event) => {
                         setTools('Exchanges', event.target.value, tools.exchanges);
                     }, MenuProps: { elevation: 2, PaperProps: { sx: { maxHeight: 320 } } }, IconComponent: icons_material_1.KeyboardArrowDown, renderValue: (selected) => ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { display: 'flex', flexWrap: 'wrap', gap: 0.5 } }, { children: selected.map((value) => {

package/cjs/pages/SettingsPage/GasPriceSelect.d.ts

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

package/cjs/pages/SettingsPage/SettingsPage.d.ts

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

package/cjs/pages/SettingsPage/ShowDestinationWallet.d.ts

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

package/cjs/pages/SettingsPage/SlippageInput.d.ts

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

package/cjs/pages/SwapDetailsPage/SwapDetailsPage.js

@@ -29,7 +29,7 @@ const SwapDetailsPage = () => {
     const { t, i18n } = (0, react_i18next_1.useTranslation)();
     const { navigateBack } = (0, hooks_1.useNavigateBack)();
     const { state } = (0, react_router_dom_1.useLocation)();
-    const [routeExecution, deleteRoute] = (0, stores_1.useRouteExecutionStore)((store) => [store.routes[state === null || state === void 0 ? void 0 : state.routeId], store.deleteRoute], shallow_1.default);
+    const [routeExecution, deleteRoute] = (0, stores_1.useRouteExecutionStore)((store) => [store.routes[state === null || state === void 0 ? void 0 : state.routeId], store.deleteRoute], shallow_1.shallow);
     const [open, setOpen] = (0, react_1.useState)(false);
     const toggleDialog = (0, react_1.useCallback)(() => {
         setOpen((open) => !open);

package/cjs/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/cjs/providers/WalletProvider/WalletProvider.js

@@ -15,7 +15,7 @@ const wallet_management_1 = require("@lifi/wallet-management");
 const react_1 = require("react");
 const WidgetProvider_1 = require("../WidgetProvider");
 const stub = () => {
-    throw new Error('You forgot to wrap your component in <WalletProvider>.');
+    throw new Error(`You forgot to wrap your component in <${exports.WalletProvider.name}>.`);
 };
 const initialContext = {
     connect: stub,

package/cjs/providers/WidgetProvider/WidgetProvider.js

@@ -25,6 +25,7 @@ const useWidgetConfig = () => (0, react_1.useContext)(WidgetContext);
 exports.useWidgetConfig = useWidgetConfig;
 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 = (0, stores_1.useSettingsStoreContext)();
     const value = (0, react_1.useMemo)(() => {
         var _a, _b, _c, _d, _e, _f;
         try {
@@ -61,8 +62,8 @@ const WidgetProvider = (_a) => {
         }
     }, [config, fromAmount, fromChain, fromToken, toChain, toToken]);
     (0, react_1.useEffect)(() => {
-        (0, stores_1.setDefaultSettings)(value);
-    }, [value]);
+        (0, stores_1.setDefaultSettings)(settingsStoreContext, value);
+    }, [settingsStoreContext, value]);
     return ((0, jsx_runtime_1.jsx)(WidgetContext.Provider, Object.assign({ value: value }, { children: children })));
 };
 exports.WidgetProvider = WidgetProvider;

package/cjs/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/cjs/stores/StoreProvider.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StoreProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const chains_1 = require("./chains");
+const routes_1 = require("./routes");
+const settings_1 = require("./settings");
+const StoreProvider = ({ children, namePrefix }) => {
+    return ((0, jsx_runtime_1.jsx)(routes_1.RouteExecutionStoreProvider, Object.assign({ namePrefix: namePrefix }, { children: (0, jsx_runtime_1.jsx)(settings_1.SettingsStoreProvider
+        // namePrefix={namePrefix}
+        , { children: (0, jsx_runtime_1.jsx)(chains_1.ChainOrderStoreProvider, Object.assign({ namePrefix: namePrefix }, { children: children })) }) })));
+};
+exports.StoreProvider = StoreProvider;

package/cjs/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/cjs/stores/chains/ChainOrderStore.js

@@ -0,0 +1,44 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useChainOrderStoreContext = exports.useChainOrderStore = exports.ChainOrderStoreProvider = exports.ChainOrderStoreContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable no-underscore-dangle */
+const react_1 = require("react");
+const createChainOrderStore_1 = require("./createChainOrderStore");
+exports.ChainOrderStoreContext = (0, react_1.createContext)(null);
+function ChainOrderStoreProvider(_a) {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    const storeRef = (0, react_1.useRef)();
+    if (!storeRef.current) {
+        storeRef.current = (0, createChainOrderStore_1.createChainOrderStore)(props);
+    }
+    return ((0, jsx_runtime_1.jsx)(exports.ChainOrderStoreContext.Provider, Object.assign({ value: storeRef.current }, { children: children })));
+}
+exports.ChainOrderStoreProvider = ChainOrderStoreProvider;
+function useChainOrderStore(selector, equalityFn) {
+    const useStore = (0, react_1.useContext)(exports.ChainOrderStoreContext);
+    if (!useStore) {
+        throw new Error(`You forgot to wrap your component in <${ChainOrderStoreProvider.name}>.`);
+    }
+    return useStore(selector, equalityFn);
+}
+exports.useChainOrderStore = useChainOrderStore;
+function useChainOrderStoreContext() {
+    const useStore = (0, react_1.useContext)(exports.ChainOrderStoreContext);
+    if (!useStore) {
+        throw new Error(`You forgot to wrap your component in <${ChainOrderStoreProvider.name}>.`);
+    }
+    return useStore;
+}
+exports.useChainOrderStoreContext = useChainOrderStoreContext;

package/cjs/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/cjs/stores/chains/{useChainOrderStore.js → createChainOrderStore.js}

@@ -1,11 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useChainOrderStore = exports.maxChainToOrder = void 0;
-/* eslint-disable no-underscore-dangle */
+exports.createChainOrderStore = exports.maxChainToOrder = void 0;
 const zustand_1 = require("zustand");
 const middleware_1 = require("zustand/middleware");
 exports.maxChainToOrder = 9;
-exports.useChainOrderStore = (0, zustand_1.default)()((0, middleware_1.persist)((set, get) => ({
+const createChainOrderStore = ({ namePrefix }) => (0, zustand_1.create)((0, middleware_1.persist)((set, get) => ({
     chainOrder: [],
     availableChains: [],
     initializeChains: (chainIds) => {
@@ -47,7 +46,8 @@ exports.useChainOrderStore = (0, zustand_1.default)()((0, middleware_1.persist)(
         });
     },
 }), {
-    name: 'li.fi-widget-chains-order',
+    name: `${namePrefix || 'li.fi'}-widget-chains-order`,
     version: 0,
     partialize: (state) => ({ chainOrder: state.chainOrder }),
 }));
+exports.createChainOrderStore = createChainOrderStore;

package/cjs/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/cjs/stores/chains/index.js

@@ -14,6 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ChainOrderStore"), exports);
+__exportStar(require("./createChainOrderStore"), exports);
 __exportStar(require("./types"), exports);
 __exportStar(require("./useChainOrder"), exports);
-__exportStar(require("./useChainOrderStore"), exports);

package/cjs/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/cjs/stores/chains/useChainOrder.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useChainOrder = void 0;
 const shallow_1 = require("zustand/shallow");
-const useChainOrderStore_1 = require("./useChainOrderStore");
+const ChainOrderStore_1 = require("./ChainOrderStore");
 const useChainOrder = () => {
-    return (0, useChainOrderStore_1.useChainOrderStore)((state) => [state.chainOrder, state.setChain], shallow_1.default);
+    return (0, ChainOrderStore_1.useChainOrderStore)((state) => [state.chainOrder, state.setChain], shallow_1.shallow);
 };
 exports.useChainOrder = useChainOrder;

package/cjs/stores/index.d.ts

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

package/cjs/stores/index.js

@@ -17,3 +17,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./chains"), exports);
 __exportStar(require("./routes"), exports);
 __exportStar(require("./settings"), exports);
+__exportStar(require("./StoreProvider"), exports);

package/cjs/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/cjs/stores/routes/RouteExecutionStore.js

@@ -0,0 +1,44 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRouteExecutionStoreContext = exports.useRouteExecutionStore = exports.RouteExecutionStoreProvider = exports.RouteExecutionStoreContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable no-underscore-dangle */
+const react_1 = require("react");
+const createRouteExecutionStore_1 = require("./createRouteExecutionStore");
+exports.RouteExecutionStoreContext = (0, react_1.createContext)(null);
+function RouteExecutionStoreProvider(_a) {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    const storeRef = (0, react_1.useRef)();
+    if (!storeRef.current) {
+        storeRef.current = (0, createRouteExecutionStore_1.createRouteExecutionStore)(props);
+    }
+    return ((0, jsx_runtime_1.jsx)(exports.RouteExecutionStoreContext.Provider, Object.assign({ value: storeRef.current }, { children: children })));
+}
+exports.RouteExecutionStoreProvider = RouteExecutionStoreProvider;
+function useRouteExecutionStore(selector, equalityFn) {
+    const useStore = (0, react_1.useContext)(exports.RouteExecutionStoreContext);
+    if (!useStore) {
+        throw new Error(`You forgot to wrap your component in <${RouteExecutionStoreProvider.name}>.`);
+    }
+    return useStore(selector, equalityFn);
+}
+exports.useRouteExecutionStore = useRouteExecutionStore;
+function useRouteExecutionStoreContext() {
+    const useStore = (0, react_1.useContext)(exports.RouteExecutionStoreContext);
+    if (!useStore) {
+        throw new Error(`You forgot to wrap your component in <${RouteExecutionStoreProvider.name}>.`);
+    }
+    return useStore;
+}
+exports.useRouteExecutionStoreContext = useRouteExecutionStoreContext;

package/cjs/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/cjs/stores/routes/{useRouteExecutionStore.js → createRouteExecutionStore.js}

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useRouteExecutionStore = void 0;
+exports.createRouteExecutionStore = void 0;
 const zustand_1 = require("zustand");
 const middleware_1 = require("zustand/middleware");
 const utils_1 = require("../../utils");
 const types_1 = require("./types");
 const utils_2 = require("./utils");
-exports.useRouteExecutionStore = (0, zustand_1.default)()((0, middleware_1.persist)((set, get) => ({
+const createRouteExecutionStore = ({ namePrefix }) => (0, zustand_1.create)((0, middleware_1.persist)((set, get) => ({
     routes: {},
     setExecutableRoute: (route) => {
         if (!get().routes[route.id]) {
@@ -40,7 +40,8 @@ exports.useRouteExecutionStore = (0, zustand_1.default)()((0, middleware_1.persi
                 }
                 const isDone = (0, utils_2.isRouteDone)(route);
                 if (isDone) {
-                    updatedState.routes[route.id].status = types_1.RouteExecutionStatus.Done;
+                    updatedState.routes[route.id].status =
+                        types_1.RouteExecutionStatus.Done;
                     if ((0, utils_2.isRoutePartiallyDone)(route)) {
                         updatedState.routes[route.id].status |=
                             types_1.RouteExecutionStatus.Partial;
@@ -93,7 +94,7 @@ exports.useRouteExecutionStore = (0, zustand_1.default)()((0, middleware_1.persi
         };
     }),
 }), {
-    name: 'li.fi-widget-routes',
+    name: `${namePrefix || 'li.fi'}-widget-routes`,
     version: 1,
     partialize: (state) => ({ routes: state.routes }),
     merge: (persistedState, currentState) => {
@@ -172,3 +173,4 @@ exports.useRouteExecutionStore = (0, zustand_1.default)()((0, middleware_1.persi
         return persistedState;
     },
 }));
+exports.createRouteExecutionStore = createRouteExecutionStore;