@lifi/widget 1.26.1 → 1.26.3

package/cjs/stores/routes/useRouteExecutionStore.js

@@ -3,68 +3,96 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRouteExecutionStore = void 0;
 const zustand_1 = require("zustand");
 const middleware_1 = require("zustand/middleware");
-const immer_1 = require("zustand/middleware/immer");
 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)((0, immer_1.immer)((set) => ({
+exports.useRouteExecutionStore = (0, zustand_1.default)()((0, middleware_1.persist)((set, get) => ({
     routes: {},
-    setExecutableRoute: (route) => set((state) => {
-        if (!state.routes[route.id]) {
-            // clean previous idle routes that were not executed
-            Object.keys(state.routes)
-                .filter((routeId) => { var _a; return ((_a = state.routes[routeId]) === null || _a === void 0 ? void 0 : _a.status) === types_1.RouteExecutionStatus.Idle; })
-                .forEach((routeId) => delete state.routes[routeId]);
-            state.routes[route.id] = {
-                route,
-                status: types_1.RouteExecutionStatus.Idle,
-            };
+    setExecutableRoute: (route) => {
+        if (!get().routes[route.id]) {
+            set((state) => {
+                const routes = Object.assign({}, state.routes);
+                // clean previous idle routes that were not executed
+                Object.keys(routes)
+                    .filter((routeId) => { var _a; return ((_a = routes[routeId]) === null || _a === void 0 ? void 0 : _a.status) === types_1.RouteExecutionStatus.Idle; })
+                    .forEach((routeId) => delete routes[routeId]);
+                routes[route.id] = {
+                    route,
+                    status: types_1.RouteExecutionStatus.Idle,
+                };
+                return {
+                    routes,
+                };
+            });
         }
-    }),
-    updateRoute: (route) => set((state) => {
-        if (state.routes[route.id]) {
-            state.routes[route.id].route = route;
-            const isFailed = (0, utils_2.isRouteFailed)(route);
-            if (isFailed) {
-                state.routes[route.id].status = types_1.RouteExecutionStatus.Failed;
-                return;
-            }
-            const isDone = (0, utils_2.isRouteDone)(route);
-            if (isDone) {
-                state.routes[route.id].status = types_1.RouteExecutionStatus.Done;
-                if ((0, utils_2.isRoutePartiallyDone)(route)) {
-                    state.routes[route.id].status |= types_1.RouteExecutionStatus.Partial;
+    },
+    updateRoute: (route) => {
+        if (get().routes[route.id]) {
+            set((state) => {
+                const updatedState = {
+                    routes: Object.assign(Object.assign({}, state.routes), { [route.id]: Object.assign(Object.assign({}, state.routes[route.id]), { route }) }),
+                };
+                const isFailed = (0, utils_2.isRouteFailed)(route);
+                if (isFailed) {
+                    updatedState.routes[route.id].status =
+                        types_1.RouteExecutionStatus.Failed;
+                    return updatedState;
                 }
-                else if ((0, utils_2.isRouteRefunded)(route)) {
-                    state.routes[route.id].status |= types_1.RouteExecutionStatus.Refunded;
+                const isDone = (0, utils_2.isRouteDone)(route);
+                if (isDone) {
+                    updatedState.routes[route.id].status = types_1.RouteExecutionStatus.Done;
+                    if ((0, utils_2.isRoutePartiallyDone)(route)) {
+                        updatedState.routes[route.id].status |=
+                            types_1.RouteExecutionStatus.Partial;
+                    }
+                    else if ((0, utils_2.isRouteRefunded)(route)) {
+                        updatedState.routes[route.id].status |=
+                            types_1.RouteExecutionStatus.Refunded;
+                    }
+                    return updatedState;
                 }
-                return;
-            }
-            const isLoading = route.steps.some((step) => step.execution);
-            if (isLoading) {
-                state.routes[route.id].status = types_1.RouteExecutionStatus.Pending;
-            }
+                const isLoading = route.steps.some((step) => step.execution);
+                if (isLoading) {
+                    updatedState.routes[route.id].status =
+                        types_1.RouteExecutionStatus.Pending;
+                }
+                return updatedState;
+            });
         }
-    }),
-    restartRoute: (routeId) => set((state) => {
-        state.routes[routeId].status = types_1.RouteExecutionStatus.Pending;
-    }),
-    deleteRoute: (routeId) => set((state) => {
-        if (state.routes[routeId]) {
-            delete state.routes[routeId];
+    },
+    restartRoute: (routeId) => {
+        if (get().routes[routeId]) {
+            set((state) => ({
+                routes: Object.assign(Object.assign({}, state.routes), { [routeId]: Object.assign(Object.assign({}, state.routes[routeId]), { status: types_1.RouteExecutionStatus.Pending }) }),
+            }));
         }
-    }),
+    },
+    deleteRoute: (routeId) => {
+        if (get().routes[routeId]) {
+            set((state) => {
+                const routes = Object.assign({}, state.routes);
+                delete routes[routeId];
+                return {
+                    routes,
+                };
+            });
+        }
+    },
     deleteRoutes: (type) => set((state) => {
-        Object.keys(state.routes)
+        const routes = Object.assign({}, state.routes);
+        Object.keys(routes)
             .filter((routeId) => {
             var _a, _b, _c, _d;
             return type === 'completed'
-                ? (0, utils_1.hasEnumFlag)((_b = (_a = state.routes[routeId]) === null || _a === void 0 ? void 0 : _a.status) !== null && _b !== void 0 ? _b : 0, types_1.RouteExecutionStatus.Done)
-                : !(0, utils_1.hasEnumFlag)((_d = (_c = state.routes[routeId]) === null || _c === void 0 ? void 0 : _c.status) !== null && _d !== void 0 ? _d : 0, types_1.RouteExecutionStatus.Done);
+                ? (0, utils_1.hasEnumFlag)((_b = (_a = routes[routeId]) === null || _a === void 0 ? void 0 : _a.status) !== null && _b !== void 0 ? _b : 0, types_1.RouteExecutionStatus.Done)
+                : !(0, utils_1.hasEnumFlag)((_d = (_c = routes[routeId]) === null || _c === void 0 ? void 0 : _c.status) !== null && _d !== void 0 ? _d : 0, types_1.RouteExecutionStatus.Done);
         })
-            .forEach((routeId) => delete state.routes[routeId]);
+            .forEach((routeId) => delete routes[routeId]);
+        return {
+            routes,
+        };
     }),
-})), {
+}), {
     name: 'li.fi-widget-routes',
     version: 1,
     partialize: (state) => ({ routes: state.routes }),

package/cjs/stores/settings/useSettingsStore.d.ts

@@ -2,7 +2,7 @@ import type { WidgetConfig } from '../../types';
 import type { SettingsState, SettingsStore } from './types';
 export declare const defaultConfigurableSettings: Pick<SettingsState, 'routePriority' | 'slippage'>;
 export declare const defaultSettings: SettingsState;
-export declare const useSettingsStore: import("zustand").UseBoundStore<Omit<Omit<import("zustand").StoreApi<SettingsStore>, "persist"> & {
+export declare const useSettingsStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<SettingsStore>, "persist"> & {
     persist: {
         setOptions: (options: Partial<import("zustand/middleware").PersistOptions<SettingsStore, {
             setValue: import("./types").ValueSetter<SettingsState>;
@@ -40,7 +40,5 @@ export declare const useSettingsStore: import("zustand").UseBoundStore<Omit<Omit
             _enabledExchanges?: Record<string, boolean> | undefined;
         }>>;
     };
-}, "setState"> & {
-    setState(nextStateOrUpdater: SettingsStore | Partial<SettingsStore> | ((state: import("immer/dist/internal").WritableDraft<SettingsStore>) => void), shouldReplace?: boolean | undefined): void;
 }>;
 export declare const setDefaultSettings: (config?: WidgetConfig) => void;

package/cjs/stores/settings/useSettingsStore.js

@@ -15,7 +15,6 @@ exports.setDefaultSettings = exports.useSettingsStore = exports.defaultSettings
 /* eslint-disable no-underscore-dangle */
 const zustand_1 = require("zustand");
 const middleware_1 = require("zustand/middleware");
-const immer_1 = require("zustand/middleware/immer");
 const types_1 = require("./types");
 exports.defaultConfigurableSettings = {
     routePriority: 'RECOMMENDED',
@@ -27,45 +26,51 @@ exports.defaultSettings = {
     advancedPreferences: false,
     showDestinationWallet: true,
 };
-exports.useSettingsStore = (0, zustand_1.default)()((0, middleware_1.persist)((0, immer_1.immer)((set) => (Object.assign(Object.assign({}, exports.defaultSettings), { setValue: (key, value) => set((state) => {
-        state[key] = value;
-    }), setValues: (values) => set((state) => {
+exports.useSettingsStore = (0, zustand_1.default)()((0, middleware_1.persist)((set) => (Object.assign(Object.assign({}, exports.defaultSettings), { setValue: (key, value) => set(() => ({
+        [key]: value,
+    })), setValues: (values) => set((state) => {
+        const updatedState = Object.assign({}, state);
         for (const key in values) {
             if (Object.prototype.hasOwnProperty.call(state, key)) {
-                state[key] = values[key];
+                updatedState[key] = values[key];
             }
         }
-    }), initializeTools: (toolType, tools) => set((state) => {
+        return updatedState;
+    }), initializeTools: (toolType, tools) => {
         if (!tools.length) {
             return;
         }
-        if (state[`_enabled${toolType}`]) {
-            // Add a new tools
-            const enabledTools = tools
-                .filter((tool) => !Object.prototype.hasOwnProperty.call(state[`_enabled${toolType}`], tool))
-                .reduce((values, tool) => {
-                values[tool] = true;
-                return values;
-            }, state[`_enabled${toolType}`]);
-            // Filter tools we no longer have
-            state[`_enabled${toolType}`] = Object.fromEntries(Object.entries(enabledTools).filter(([key]) => tools.includes(key)));
-        }
-        else {
-            state[`_enabled${toolType}`] = tools.reduce((values, tool) => {
-                values[tool] = true;
-                return values;
-            }, {});
-        }
-        state[`enabled${toolType}`] = Object.entries(state[`_enabled${toolType}`])
-            .filter(([_, value]) => value)
-            .map(([key]) => key);
-    }), setTools: (toolType, tools, availableTools) => set((state) => {
-        state[`enabled${toolType}`] = tools;
-        state[`_enabled${toolType}`] = availableTools.reduce((values, tool) => {
+        set((state) => {
+            const updatedState = Object.assign({}, state);
+            if (updatedState[`_enabled${toolType}`]) {
+                // Add a new tools
+                const enabledTools = tools
+                    .filter((tool) => !Object.prototype.hasOwnProperty.call(updatedState[`_enabled${toolType}`], tool))
+                    .reduce((values, tool) => {
+                    values[tool] = true;
+                    return values;
+                }, updatedState[`_enabled${toolType}`]);
+                // Filter tools we no longer have
+                updatedState[`_enabled${toolType}`] = Object.fromEntries(Object.entries(enabledTools).filter(([key]) => tools.includes(key)));
+            }
+            else {
+                updatedState[`_enabled${toolType}`] = tools.reduce((values, tool) => {
+                    values[tool] = true;
+                    return values;
+                }, {});
+            }
+            updatedState[`enabled${toolType}`] = Object.entries(updatedState[`_enabled${toolType}`])
+                .filter(([_, value]) => value)
+                .map(([key]) => key);
+            return updatedState;
+        });
+    }, setTools: (toolType, tools, availableTools) => set(() => ({
+        [`enabled${toolType}`]: tools,
+        [`_enabled${toolType}`]: availableTools.reduce((values, tool) => {
             values[tool.key] = tools.includes(tool.key);
             return values;
-        }, {});
-    }) }))), {
+        }, {}),
+    })) })), {
     name: 'li.fi-widget-settings',
     version: 2,
     partialize: (state) => {

package/components/ActiveSwaps/ActiveSwaps.style.d.ts

@@ -39,7 +39,7 @@ export declare const ListItem: import("@emotion/styled").StyledComponent<{
 export declare const ShowAllButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
-    color?: "inherit" | "error" | "success" | "warning" | "primary" | "secondary" | "info" | undefined;
+    color?: "inherit" | "success" | "warning" | "error" | "primary" | "secondary" | "info" | undefined;
     disabled?: boolean | undefined;
     disableElevation?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;

package/components/BottomSheet/BottomSheet.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Drawer } from '@mui/material';
-import { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react';
+import { forwardRef, useCallback, useImperativeHandle, useRef, useState, } from 'react';
 import { getScrollableContainer } from '../../hooks';
 import { backdropProps, modalProps, paperProps } from '../Dialog';
 export const BottomSheet = forwardRef(({ elementRef, children, open, onClose }, ref) => {
@@ -10,7 +10,7 @@ export const BottomSheet = forwardRef(({ elementRef, children, open, onClose },
         setDrawerOpen(false);
         openRef.current = false;
         onClose === null || onClose === void 0 ? void 0 : onClose();
-    }, []);
+    }, [onClose]);
     useImperativeHandle(ref, () => ({
         isOpen: () => openRef.current,
         open: () => {

package/components/Header/Header.style.d.ts

@@ -21,7 +21,7 @@ export declare const Container: import("@emotion/styled").StyledComponent<import
 export declare const WalletButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
-    color?: "inherit" | "error" | "success" | "warning" | "primary" | "secondary" | "info" | undefined;
+    color?: "inherit" | "success" | "warning" | "error" | "primary" | "secondary" | "info" | undefined;
     disabled?: boolean | undefined;
     disableElevation?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;

package/components/Header/useHeaderActionStore.d.ts

@@ -1,4 +1,2 @@
 import type { HeaderActionStore } from './types';
-export declare const useHeaderActionStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<HeaderActionStore>, "setState"> & {
-    setState(nextStateOrUpdater: HeaderActionStore | Partial<HeaderActionStore> | ((state: import("immer/dist/internal").WritableDraft<HeaderActionStore>) => void), shouldReplace?: boolean | undefined): void;
-}>;
+export declare const useHeaderActionStore: import("zustand").UseBoundStore<import("zustand").StoreApi<HeaderActionStore>>;

package/components/Header/useHeaderActionStore.js

@@ -1,16 +1,15 @@
 /* eslint-disable no-underscore-dangle */
 import create from 'zustand';
-import { immer } from 'zustand/middleware/immer';
-export const useHeaderActionStore = create()(immer((set, get) => ({
+export const useHeaderActionStore = create((set, get) => ({
     setAction: (element) => {
-        set((state) => {
-            state.element = element;
-        });
+        set(() => ({
+            element,
+        }));
         return get().removeAction;
     },
     removeAction: () => {
-        set((state) => {
-            state.element = null;
-        });
+        set(() => ({
+            element: null,
+        }));
     },
-})));
+}));

package/components/ReverseTokensButton/ReverseTokensButton.style.d.ts

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

package/components/SendToWallet/SendToWallet.js

@@ -46,7 +46,7 @@ export const SendToWallet = forwardRef((props, ref) => {
         }),
         onBlur: () => trigger(SwapFormKey.ToAddress),
     });
-    return (_jsx(Collapse, Object.assign({ timeout: 225, in: showSendToWallet, mountOnEnter: true, unmountOnExit: true }, { children: _jsxs(Card, Object.assign({}, props, { ref: ref }, { children: [_jsx(CardTitle, { children: t('swap.sendToWallet') }), _jsxs(FormControl, Object.assign({ fullWidth: true, sx: { paddingTop: '6px', paddingBottom: '5px' } }, { children: [_jsx(Input, { ref: inputRef, size: "small", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: "false", onChange: onChange, onBlur: onBlur, name: name, placeholder: t('swap.walletAddressOrEns'), autoFocus: true }), _jsx(SendToWalletFormHelperText, {})] }))] })) })));
+    return (_jsx(Collapse, Object.assign({ timeout: 225, in: showSendToWallet, mountOnEnter: true, unmountOnExit: true }, { children: _jsxs(Card, Object.assign({}, props, { ref: ref }, { children: [_jsx(CardTitle, { children: t('swap.sendToWallet') }), _jsxs(FormControl, Object.assign({ fullWidth: true, sx: { paddingTop: '6px', paddingBottom: '5px' } }, { children: [_jsx(Input, { ref: inputRef, size: "small", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: "false", onChange: onChange, onBlur: onBlur, name: name, placeholder: t('swap.walletAddressOrEns') }), _jsx(SendToWalletFormHelperText, {})] }))] })) })));
 });
 export const SendToWalletFormHelperText = () => {
     var _a;

package/components/SendToWallet/SendToWallet.style.d.ts

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

package/components/SendToWallet/store.d.ts

@@ -1,4 +1,2 @@
 import type { SendToWalletStore } from './types';
-export declare const useSendToWalletStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<SendToWalletStore>, "setState"> & {
-    setState(nextStateOrUpdater: SendToWalletStore | Partial<SendToWalletStore> | ((state: import("immer/dist/internal").WritableDraft<SendToWalletStore>) => void), shouldReplace?: boolean | undefined): void;
-}>;
+export declare const useSendToWalletStore: import("zustand").UseBoundStore<import("zustand").StoreApi<SendToWalletStore>>;

package/components/SendToWallet/store.js

@@ -1,10 +1,9 @@
 import create from 'zustand';
-import { immer } from 'zustand/middleware/immer';
-export const useSendToWalletStore = create()(immer((set) => ({
+export const useSendToWalletStore = create((set) => ({
     showSendToWallet: false,
     toggleSendToWallet: () => {
-        set((state) => {
-            state.showSendToWallet = !state.showSendToWallet;
-        });
+        set((state) => ({
+            showSendToWallet: !state.showSendToWallet,
+        }));
     },
-})));
+}));

package/components/Step/StepProcess.style.d.ts

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

package/components/SwapInput/SwapInput.style.d.ts

@@ -4,7 +4,7 @@ export declare const minInputFontSize = 14;
 export declare const FormControl: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").FormControlClasses> | undefined;
-    color?: "error" | "success" | "warning" | "primary" | "secondary" | "info" | undefined;
+    color?: "success" | "warning" | "error" | "primary" | "secondary" | "info" | undefined;
     disabled?: boolean | undefined;
     error?: boolean | undefined;
     fullWidth?: boolean | undefined;

package/components/SwapInput/SwapInputAdornment.style.d.ts

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

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

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

package/config/version.d.ts

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

package/config/version.js

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

package/hooks/useRouteExecution.js

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useCallback, useEffect, useRef } from 'react';
 import shallow from 'zustand/shallow';
 import { useLiFi, useWallet } from '../providers';
@@ -17,6 +17,7 @@ import { deepClone } from '../utils';
 import { useWidgetEvents } from './useWidgetEvents';
 export const useRouteExecution = ({ routeId, executeInBackground, onAcceptExchangeRateUpdate, }) => {
     const lifi = useLiFi();
+    const queryClient = useQueryClient();
     const { account, switchChain } = useWallet();
     const resumedAfterMount = useRef(false);
     const emitter = useWidgetEvents();
@@ -74,6 +75,7 @@ export const useRouteExecution = ({ routeId, executeInBackground, onAcceptExchan
         if (!(routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route)) {
             throw Error('Execution route not found.');
         }
+        queryClient.removeQueries(['routes']);
         return lifi.executeRoute(account.signer, routeExecution.route, {
             updateCallback,
             switchChainHook,

package/hooks/useWidgetEvents.d.ts

@@ -1,3 +1,3 @@
-import type { Emitter } from 'mitt';
 import type { WidgetEvents } from '../types';
-export declare const useWidgetEvents: () => Emitter<WidgetEvents>;
+export declare const widgetEvents: import("mitt").Emitter<WidgetEvents>;
+export declare const useWidgetEvents: () => import("mitt").Emitter<WidgetEvents>;

package/hooks/useWidgetEvents.js

@@ -1,6 +1,5 @@
 import mitt from 'mitt';
-import create from 'zustand';
-const emitterStore = create()(() => mitt());
+export const widgetEvents = mitt();
 export const useWidgetEvents = () => {
-    return emitterStore();
+    return widgetEvents;
 };

package/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import './fonts/inter.css';
 export type { WidgetDrawer } from './AppDrawer';
-export { useWidgetEvents } from './hooks';
+export { useWidgetEvents, widgetEvents } from './hooks';
 export * from './types';
 export declare const LiFiWidget: import("react").FC<import("./types").WidgetProps>;
 /**

package/index.js

@@ -1,7 +1,7 @@
 import { App } from './App';
 import { AppDrawer } from './AppDrawer';
 import './fonts/inter.css';
-export { useWidgetEvents } from './hooks';
+export { useWidgetEvents, widgetEvents } from './hooks';
 export * from './types';
 // ClassNameGenerator.configure((componentName) =>
 //   componentName.replace('Mui', 'LiFi'),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "1.26.1",
+  "version": "1.26.3",
   "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",
@@ -44,23 +44,22 @@
     "@ethersproject/providers": "^5.7.2",
     "@lifi/sdk": "^1.7.0",
     "@lifi/wallet-management": "^1.2.1",
-    "@mui/icons-material": "^5.10.15",
-    "@mui/lab": "^5.0.0-alpha.109",
-    "@mui/material": "^5.10.15",
-    "@sentry/integrations": "^7.21.1",
-    "@sentry/react": "^7.21.1",
-    "@sentry/tracing": "^7.21.1",
-    "@tanstack/react-query": "^4.16.1",
+    "@mui/icons-material": "^5.10.16",
+    "@mui/lab": "^5.0.0-alpha.110",
+    "@mui/material": "^5.10.16",
+    "@sentry/integrations": "^7.22.0",
+    "@sentry/react": "^7.22.0",
+    "@sentry/tracing": "^7.22.0",
+    "@tanstack/react-query": "^4.18.0",
     "@tanstack/react-virtual": "^3.0.0-beta.23",
     "big.js": "^6.2.1",
     "i18next": "22.0.4",
     "i18next-browser-languagedetector": "^7.0.1",
-    "immer": "^9.0.16",
     "microdiff": "^1.3.1",
     "mitt": "^3.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.39.5",
+    "react-hook-form": "^7.39.7",
     "react-i18next": "^12.0.0",
     "react-router-dom": "^6.4.3",
     "react-timer-hook": "^3.0.5",

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

package/pages/SwapPage/ExchangeRateBottomSheet.d.ts

@@ -3,7 +3,7 @@ import type { ExchangeRateUpdateParams, Route } from '@lifi/sdk';
 export interface ExchangeRateBottomSheetBase {
     isOpen(): void;
     open(resolver: (value: boolean) => void, data: ExchangeRateUpdateParams): void;
-    close(value?: boolean): void;
+    close(value?: boolean, bottomSheetClose?: boolean): void;
 }
 interface ExchangeRateBottomSheetProps {
     data?: ExchangeRateUpdateParams;

package/pages/SwapPage/ExchangeRateBottomSheet.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { WarningRounded as WarningIcon } from '@mui/icons-material';
 import { Box, Button, Typography } from '@mui/material';
 import Big from 'big.js';
-import { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react';
+import { forwardRef, useCallback, useImperativeHandle, useRef, useState, } from 'react';
 import { useTranslation } from 'react-i18next';
 import { BottomSheet } from '../../components/BottomSheet';
 import { useSetContentHeight } from '../../hooks';
@@ -21,7 +21,12 @@ export const ExchangeRateBottomSheet = forwardRef(({ onContinue, onCancel }, ref
         var _a;
         (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close(false);
         onCancel === null || onCancel === void 0 ? void 0 : onCancel();
-    }, []);
+    }, [onCancel, ref]);
+    const handleClose = useCallback(() => {
+        var _a;
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close(false, false);
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+    }, [onCancel, ref]);
     useImperativeHandle(ref, () => ({
         isOpen: () => { var _a; return (_a = bottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.isOpen(); },
         open: (resolver, data) => {
@@ -30,13 +35,15 @@ export const ExchangeRateBottomSheet = forwardRef(({ onContinue, onCancel }, ref
             resolverRef.current = resolver;
             (_a = bottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.open();
         },
-        close: (value = false) => {
+        close: (value = false, bottomSheetClose = true) => {
             var _a, _b;
             (_a = resolverRef.current) === null || _a === void 0 ? void 0 : _a.call(resolverRef, value);
-            (_b = bottomSheetRef.current) === null || _b === void 0 ? void 0 : _b.close();
+            if (bottomSheetClose) {
+                (_b = bottomSheetRef.current) === null || _b === void 0 ? void 0 : _b.close();
+            }
         },
     }), []);
-    return (_jsx(BottomSheet, Object.assign({ ref: bottomSheetRef, onClose: handleCancel }, { children: _jsx(ExchangeRateBottomSheetContent, { data: data, onContinue: handleContinue, onCancel: handleCancel }) })));
+    return (_jsx(BottomSheet, Object.assign({ ref: bottomSheetRef, onClose: handleClose }, { children: _jsx(ExchangeRateBottomSheetContent, { data: data, onContinue: handleContinue, onCancel: handleCancel }) })));
 });
 const ExchangeRateBottomSheetContent = ({ data, onCancel, onContinue }) => {
     const { t } = useTranslation();