@lifi/widget 1.26.1 → 1.26.3

package/pages/SwapPage/StatusBottomSheet.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable consistent-return */
-import { Done as DoneIcon, ErrorRounded as ErrorIcon, InfoRounded as InfoIcon, WarningRounded as WarningIcon } from '@mui/icons-material';
+import { Done as DoneIcon, ErrorRounded as ErrorIcon, InfoRounded as InfoIcon, WarningRounded as WarningIcon, } from '@mui/icons-material';
 import { Box, Button, Typography } from '@mui/material';
 import { useEffect, useRef } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { BottomSheet } from '../../components/BottomSheet';
 import { Token } from '../../components/Token';
-import { getProcessMessage, useChains, useNavigateBack, useTokenBalance } from '../../hooks';
+import { getProcessMessage, useChains, useNavigateBack, useTokenBalance, } from '../../hooks';
 import { SwapFormKey } from '../../providers';
 import { RouteExecutionStatus } from '../../stores';
-import { formatTokenAmount, hasEnumFlag, navigationRoutes, shortenWalletAddress } from '../../utils';
+import { formatTokenAmount, hasEnumFlag, navigationRoutes, shortenWalletAddress, } from '../../utils';
 import { IconCircle, IconContainer } from './StatusBottomSheet.style';
 export const StatusBottomSheet = ({ status, route, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;

package/pages/SwapPage/SwapPage.js

@@ -23,7 +23,7 @@ import { RouteExecutionStatus } from '../../stores';
 import { ExchangeRateBottomSheet } from './ExchangeRateBottomSheet';
 import { StatusBottomSheet } from './StatusBottomSheet';
 import { Container } from './SwapPage.style';
-import { getTokenValueLossThreshold, TokenValueBottomSheet } from './TokenValueBottomSheet';
+import { getTokenValueLossThreshold, TokenValueBottomSheet, } from './TokenValueBottomSheet';
 export const SwapPage = () => {
     var _a;
     const { t } = useTranslation();
@@ -79,5 +79,5 @@ export const SwapPage = () => {
                                 enableLoading: true }), status === RouteExecutionStatus.Failed ? (_jsx(Tooltip, Object.assign({ title: t('button.removeSwap'), placement: "bottom-end", enterDelay: 400, arrow: true }, { children: _jsx(Button, Object.assign({ onClick: handleRemoveRoute, sx: {
                                         minWidth: 48,
                                         marginLeft: 1,
-                                    } }, { children: _jsx(DeleteIcon, {}) })) }))) : null] }))] })) : null, route && status ? (_jsx(StatusBottomSheet, { status: status, route: route })) : null, route ? (_jsx(TokenValueBottomSheet, { route: route, ref: tokenValueBottomSheetRef, onContinue: handleExecuteRoute })) : null, route ? _jsx(ExchangeRateBottomSheet, { ref: exchangeRateBottomSheetRef }) : null] }));
+                                    } }, { children: _jsx(DeleteIcon, {}) })) }))) : null] }))] })) : null, route && status ? (_jsx(StatusBottomSheet, { status: status, route: route })) : null, route ? (_jsx(TokenValueBottomSheet, { route: route, ref: tokenValueBottomSheetRef, onContinue: handleExecuteRoute })) : null, route ? (_jsx(ExchangeRateBottomSheet, { ref: exchangeRateBottomSheetRef })) : null] }));
 };

package/pages/SwapPage/TokenValueBottomSheet.js

@@ -2,18 +2,18 @@ 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, useRef } from 'react';
+import { forwardRef, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { BottomSheet } from '../../components/BottomSheet';
 import { useSetContentHeight } from '../../hooks';
 import { IconCircle, IconContainer } from './StatusBottomSheet.style';
 export const TokenValueBottomSheet = forwardRef(({ route, onContinue, onCancel }, ref) => {
-    const handleCancel = useCallback(() => {
+    const handleCancel = () => {
         var _a;
         (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close();
         onCancel === null || onCancel === void 0 ? void 0 : onCancel();
-    }, []);
-    return (_jsx(BottomSheet, Object.assign({ ref: ref, onClose: handleCancel }, { children: _jsx(TokenValueBottomSheetContent, { route: route, onContinue: onContinue, onCancel: handleCancel }) })));
+    };
+    return (_jsx(BottomSheet, Object.assign({ ref: ref, onClose: onCancel }, { children: _jsx(TokenValueBottomSheetContent, { route: route, onContinue: onContinue, onCancel: handleCancel }) })));
 });
 const TokenValueBottomSheetContent = ({ route, onCancel, onContinue, }) => {
     const { t } = useTranslation();

package/stores/chains/useChainOrderStore.d.ts

@@ -1,6 +1,6 @@
 import type { ChainOrderStore } from './types';
 export declare const maxChainToOrder = 9;
-export declare const useChainOrderStore: import("zustand").UseBoundStore<Omit<Omit<import("zustand").StoreApi<ChainOrderStore>, "persist"> & {
+export declare const useChainOrderStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<ChainOrderStore>, "persist"> & {
     persist: {
         setOptions: (options: Partial<import("zustand/middleware").PersistOptions<ChainOrderStore, {
             chainOrder: number[];
@@ -14,6 +14,4 @@ export declare const useChainOrderStore: import("zustand").UseBoundStore<Omit<Om
             chainOrder: number[];
         }>>;
     };
-}, "setState"> & {
-    setState(nextStateOrUpdater: ChainOrderStore | Partial<ChainOrderStore> | ((state: import("immer/dist/internal").WritableDraft<ChainOrderStore>) => void), shouldReplace?: boolean | undefined): void;
 }>;

package/stores/chains/useChainOrderStore.js

@@ -1,38 +1,49 @@
 /* eslint-disable no-underscore-dangle */
 import create from 'zustand';
 import { persist } from 'zustand/middleware';
-import { immer } from 'zustand/middleware/immer';
 export const maxChainToOrder = 9;
-export const useChainOrderStore = create()(persist(immer((set, get) => ({
+export const useChainOrderStore = create()(persist((set, get) => ({
     chainOrder: [],
     availableChains: [],
     initializeChains: (chainIds) => {
         set((state) => {
-            state.availableChains = chainIds;
-            state.chainOrder = state.chainOrder.filter((chainId) => chainIds.includes(chainId));
-            const chainsToAdd = chainIds.filter((chainId) => !state.chainOrder.includes(chainId));
-            if (state.chainOrder.length === maxChainToOrder ||
-                !chainsToAdd.length) {
-                return;
+            const chainOrder = state.chainOrder.filter((chainId) => chainIds.includes(chainId));
+            const chainsToAdd = chainIds.filter((chainId) => !chainOrder.includes(chainId));
+            if (chainOrder.length === maxChainToOrder || !chainsToAdd.length) {
+                return {
+                    availableChains: chainIds,
+                    chainOrder,
+                };
             }
-            const chainsToAddLength = maxChainToOrder - state.chainOrder.length;
+            const chainsToAddLength = maxChainToOrder - chainOrder.length;
             for (let index = 0; index < chainsToAddLength; index++) {
-                state.chainOrder.push(chainsToAdd[index]);
+                chainOrder.push(chainsToAdd[index]);
             }
+            return {
+                availableChains: chainIds,
+                chainOrder,
+            };
         });
         return get().chainOrder;
     },
-    setChain: (chainId) => set((state) => {
+    setChain: (chainId) => {
+        const state = get();
         if (state.chainOrder.includes(chainId) ||
             !state.availableChains.includes(chainId)) {
             return;
         }
-        state.chainOrder.unshift(chainId);
-        if (state.chainOrder.length > maxChainToOrder) {
-            state.chainOrder.pop();
-        }
-    }),
-})), {
+        set((state) => {
+            const chainOrder = state.chainOrder.slice();
+            chainOrder.unshift(chainId);
+            if (chainOrder.length > maxChainToOrder) {
+                chainOrder.pop();
+            }
+            return {
+                chainOrder,
+            };
+        });
+    },
+}), {
     name: 'li.fi-widget-chains-order',
     version: 0,
     partialize: (state) => ({ chainOrder: state.chainOrder }),

package/stores/routes/useRecommendedRouteStore.d.ts

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

package/stores/routes/useRecommendedRouteStore.js

@@ -1,9 +1,8 @@
 import create from 'zustand';
-import { immer } from 'zustand/middleware/immer';
-export const useRecommendedRouteStore = create()(immer((set) => ({
-    setRecommendedRoute: (route) => {
-        set((state) => {
-            state.recommendedRoute = route;
-        });
+export const useRecommendedRouteStore = create((set) => ({
+    setRecommendedRoute: (recommendedRoute) => {
+        set(() => ({
+            recommendedRoute,
+        }));
     },
-})));
+}));

package/stores/routes/useRouteExecutionStore.d.ts

@@ -1,5 +1,5 @@
 import type { RouteExecutionStore } from './types';
-export declare const useRouteExecutionStore: import("zustand").UseBoundStore<Omit<Omit<import("zustand").StoreApi<RouteExecutionStore>, "persist"> & {
+export declare const useRouteExecutionStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<RouteExecutionStore>, "persist"> & {
     persist: {
         setOptions: (options: Partial<import("zustand/middleware").PersistOptions<RouteExecutionStore, {
             routes: Partial<Record<string, import("./types").RouteExecution>>;
@@ -13,6 +13,4 @@ export declare const useRouteExecutionStore: import("zustand").UseBoundStore<Omi
             routes: Partial<Record<string, import("./types").RouteExecution>>;
         }>>;
     };
-}, "setState"> & {
-    setState(nextStateOrUpdater: RouteExecutionStore | Partial<RouteExecutionStore> | ((state: import("immer/dist/internal").WritableDraft<RouteExecutionStore>) => void), shouldReplace?: boolean | undefined): void;
 }>;

package/stores/routes/useRouteExecutionStore.js

@@ -1,67 +1,95 @@
 import create from 'zustand';
 import { persist } from 'zustand/middleware';
-import { immer } from 'zustand/middleware/immer';
 import { hasEnumFlag } from '../../utils';
 import { RouteExecutionStatus } from './types';
 import { isRouteDone, isRouteFailed, isRoutePartiallyDone, isRouteRefunded, } from './utils';
-export const useRouteExecutionStore = create()(persist(immer((set) => ({
+export const useRouteExecutionStore = create()(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) === RouteExecutionStatus.Idle; })
-                .forEach((routeId) => delete state.routes[routeId]);
-            state.routes[route.id] = {
-                route,
-                status: 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) === RouteExecutionStatus.Idle; })
+                    .forEach((routeId) => delete routes[routeId]);
+                routes[route.id] = {
+                    route,
+                    status: RouteExecutionStatus.Idle,
+                };
+                return {
+                    routes,
+                };
+            });
         }
-    }),
-    updateRoute: (route) => set((state) => {
-        if (state.routes[route.id]) {
-            state.routes[route.id].route = route;
-            const isFailed = isRouteFailed(route);
-            if (isFailed) {
-                state.routes[route.id].status = RouteExecutionStatus.Failed;
-                return;
-            }
-            const isDone = isRouteDone(route);
-            if (isDone) {
-                state.routes[route.id].status = RouteExecutionStatus.Done;
-                if (isRoutePartiallyDone(route)) {
-                    state.routes[route.id].status |= 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 = isRouteFailed(route);
+                if (isFailed) {
+                    updatedState.routes[route.id].status =
+                        RouteExecutionStatus.Failed;
+                    return updatedState;
                 }
-                else if (isRouteRefunded(route)) {
-                    state.routes[route.id].status |= RouteExecutionStatus.Refunded;
+                const isDone = isRouteDone(route);
+                if (isDone) {
+                    updatedState.routes[route.id].status = RouteExecutionStatus.Done;
+                    if (isRoutePartiallyDone(route)) {
+                        updatedState.routes[route.id].status |=
+                            RouteExecutionStatus.Partial;
+                    }
+                    else if (isRouteRefunded(route)) {
+                        updatedState.routes[route.id].status |=
+                            RouteExecutionStatus.Refunded;
+                    }
+                    return updatedState;
                 }
-                return;
-            }
-            const isLoading = route.steps.some((step) => step.execution);
-            if (isLoading) {
-                state.routes[route.id].status = RouteExecutionStatus.Pending;
-            }
+                const isLoading = route.steps.some((step) => step.execution);
+                if (isLoading) {
+                    updatedState.routes[route.id].status =
+                        RouteExecutionStatus.Pending;
+                }
+                return updatedState;
+            });
         }
-    }),
-    restartRoute: (routeId) => set((state) => {
-        state.routes[routeId].status = 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: 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'
-                ? hasEnumFlag((_b = (_a = state.routes[routeId]) === null || _a === void 0 ? void 0 : _a.status) !== null && _b !== void 0 ? _b : 0, RouteExecutionStatus.Done)
-                : !hasEnumFlag((_d = (_c = state.routes[routeId]) === null || _c === void 0 ? void 0 : _c.status) !== null && _d !== void 0 ? _d : 0, RouteExecutionStatus.Done);
+                ? hasEnumFlag((_b = (_a = routes[routeId]) === null || _a === void 0 ? void 0 : _a.status) !== null && _b !== void 0 ? _b : 0, RouteExecutionStatus.Done)
+                : !hasEnumFlag((_d = (_c = routes[routeId]) === null || _c === void 0 ? void 0 : _c.status) !== null && _d !== void 0 ? _d : 0, 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/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/stores/settings/useSettingsStore.js

@@ -12,7 +12,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 /* eslint-disable no-underscore-dangle */
 import create from 'zustand';
 import { persist } from 'zustand/middleware';
-import { immer } from 'zustand/middleware/immer';
 import { SettingsToolTypes } from './types';
 export const defaultConfigurableSettings = {
     routePriority: 'RECOMMENDED',
@@ -24,45 +23,51 @@ export const defaultSettings = {
     advancedPreferences: false,
     showDestinationWallet: true,
 };
-export const useSettingsStore = create()(persist(immer((set) => (Object.assign(Object.assign({}, defaultSettings), { setValue: (key, value) => set((state) => {
-        state[key] = value;
-    }), setValues: (values) => set((state) => {
+export const useSettingsStore = create()(persist((set) => (Object.assign(Object.assign({}, 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) => {