@lifi/widget 1.31.1 → 1.32.1

package/cjs/stores/routes/createRouteExecutionStore.js

@@ -11,10 +11,10 @@ const createRouteExecutionStore = ({ namePrefix }) => (0, zustand_1.create)((0,
     setExecutableRoute: (route) => {
         if (!get().routes[route.id]) {
             set((state) => {
-                const routes = Object.assign({}, state.routes);
+                const routes = { ...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; })
+                    .filter((routeId) => routes[routeId]?.status === types_1.RouteExecutionStatus.Idle)
                     .forEach((routeId) => delete routes[routeId]);
                 routes[route.id] = {
                     route,
@@ -30,7 +30,10 @@ const createRouteExecutionStore = ({ namePrefix }) => (0, zustand_1.create)((0,
         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 }) }),
+                    routes: {
+                        ...state.routes,
+                        [route.id]: { ...state.routes[route.id], route },
+                    },
                 };
                 const isFailed = (0, utils_2.isRouteFailed)(route);
                 if (isFailed) {
@@ -64,14 +67,20 @@ const createRouteExecutionStore = ({ namePrefix }) => (0, zustand_1.create)((0,
     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 }) }),
+                routes: {
+                    ...state.routes,
+                    [routeId]: {
+                        ...state.routes[routeId],
+                        status: types_1.RouteExecutionStatus.Pending,
+                    },
+                },
             }));
         }
     },
     deleteRoute: (routeId) => {
         if (get().routes[routeId]) {
             set((state) => {
-                const routes = Object.assign({}, state.routes);
+                const routes = { ...state.routes };
                 delete routes[routeId];
                 return {
                     routes,
@@ -80,14 +89,11 @@ const createRouteExecutionStore = ({ namePrefix }) => (0, zustand_1.create)((0,
         }
     },
     deleteRoutes: (type) => set((state) => {
-        const routes = Object.assign({}, state.routes);
+        const routes = { ...state.routes };
         Object.keys(routes)
-            .filter((routeId) => {
-            var _a, _b, _c, _d;
-            return type === 'completed'
-                ? (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);
-        })
+            .filter((routeId) => type === 'completed'
+            ? (0, utils_1.hasEnumFlag)(routes[routeId]?.status ?? 0, types_1.RouteExecutionStatus.Done)
+            : !(0, utils_1.hasEnumFlag)(routes[routeId]?.status ?? 0, types_1.RouteExecutionStatus.Done))
             .forEach((routeId) => delete routes[routeId]);
         return {
             routes,
@@ -98,16 +104,21 @@ const createRouteExecutionStore = ({ namePrefix }) => (0, zustand_1.create)((0,
     version: 1,
     partialize: (state) => ({ routes: state.routes }),
     merge: (persistedState, currentState) => {
-        const state = Object.assign(Object.assign({}, currentState), persistedState);
+        const state = {
+            ...currentState,
+            ...persistedState,
+        };
         try {
             // Move swaps to history after 1 day
             const currentTime = new Date().getTime();
             const oneDay = 1000 * 60 * 60 * 24;
             Object.values(state.routes).forEach((routeExecution) => {
-                var _a, _b, _c, _d, _e;
-                const startedAt = (_e = (_d = (_c = (_b = (_a = routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route.steps) === null || _a === void 0 ? void 0 : _a.find((step) => { var _a; return ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'FAILED'; })) === null || _b === void 0 ? void 0 : _b.execution) === null || _c === void 0 ? void 0 : _c.process.find((process) => process.startedAt)) === null || _d === void 0 ? void 0 : _d.startedAt) !== null && _e !== void 0 ? _e : 0;
+                const startedAt = routeExecution?.route.steps
+                    ?.find((step) => step.execution?.status === 'FAILED')
+                    ?.execution?.process.find((process) => process.startedAt)
+                    ?.startedAt ?? 0;
                 const outdated = startedAt > 0 && currentTime - startedAt > oneDay;
-                if ((routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route) && outdated) {
+                if (routeExecution?.route && outdated) {
                     routeExecution.status |= types_1.RouteExecutionStatus.Done;
                 }
             });

package/cjs/stores/routes/types.d.ts

@@ -19,7 +19,7 @@ export declare enum RouteExecutionStatus {
     Partial = 8,
     Refunded = 16
 }
-export interface RecommendedRouteStore {
+export interface RecommendedRouteState {
     recommendedRoute?: Route;
     setRecommendedRoute: (route?: Route) => void;
 }

package/cjs/stores/routes/useExecutingRoutesIds.js

@@ -9,11 +9,8 @@ const useExecutingRoutesIds = (address) => {
         .filter((item) => item.route.fromAddress === address &&
         (item.status === types_1.RouteExecutionStatus.Pending ||
             item.status === types_1.RouteExecutionStatus.Failed))
-        .sort((a, b) => {
-        var _a, _b, _c, _d;
-        return ((_b = (_a = b === null || b === void 0 ? void 0 : b.route.steps[0].execution) === null || _a === void 0 ? void 0 : _a.process[0].startedAt) !== null && _b !== void 0 ? _b : 0) -
-            ((_d = (_c = a === null || a === void 0 ? void 0 : a.route.steps[0].execution) === null || _c === void 0 ? void 0 : _c.process[0].startedAt) !== null && _d !== void 0 ? _d : 0);
-    })
+        .sort((a, b) => (b?.route.steps[0].execution?.process[0].startedAt ?? 0) -
+        (a?.route.steps[0].execution?.process[0].startedAt ?? 0))
         .map(({ route }) => route.id), shallow_1.shallow);
 };
 exports.useExecutingRoutesIds = useExecutingRoutesIds;

package/cjs/stores/routes/useRecommendedRouteStore.d.ts

@@ -1,2 +1,10 @@
-import type { RecommendedRouteStore } from './types';
-export declare const useRecommendedRouteStore: import("zustand").UseBoundStore<import("zustand").StoreApi<RecommendedRouteStore>>;
+/// <reference types="react" />
+import type { StoreApi, UseBoundStore } from 'zustand';
+import type { PersistStoreProviderProps } from '../types';
+import type { RecommendedRouteState } from './types';
+export declare const createRecommendedRouteStore: () => UseBoundStore<StoreApi<RecommendedRouteState>>;
+export type RecommendedRouteStore = UseBoundStore<StoreApi<RecommendedRouteState>>;
+export declare const RecommendedRouteStoreContext: import("react").Context<RecommendedRouteStore | null>;
+export declare function RecommendedRouteStoreProvider({ children, ...props }: PersistStoreProviderProps): JSX.Element;
+export declare function useRecommendedRouteStore<T>(selector: (state: RecommendedRouteState) => T, equalityFn?: (left: T, right: T) => boolean): T;
+export declare function useRecommendedRouteStoreContext(): RecommendedRouteStore;

package/cjs/stores/routes/useRecommendedRouteStore.js

@@ -1,11 +1,39 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useRecommendedRouteStore = void 0;
+exports.useRecommendedRouteStoreContext = exports.useRecommendedRouteStore = exports.RecommendedRouteStoreProvider = exports.RecommendedRouteStoreContext = exports.createRecommendedRouteStore = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const zustand_1 = require("zustand");
-exports.useRecommendedRouteStore = (0, zustand_1.create)((set) => ({
+const createRecommendedRouteStore = () => (0, zustand_1.create)((set) => ({
     setRecommendedRoute: (recommendedRoute) => {
         set(() => ({
             recommendedRoute,
         }));
     },
 }));
+exports.createRecommendedRouteStore = createRecommendedRouteStore;
+exports.RecommendedRouteStoreContext = (0, react_1.createContext)(null);
+function RecommendedRouteStoreProvider({ children, ...props }) {
+    const storeRef = (0, react_1.useRef)();
+    if (!storeRef.current) {
+        storeRef.current = (0, exports.createRecommendedRouteStore)();
+    }
+    return ((0, jsx_runtime_1.jsx)(exports.RecommendedRouteStoreContext.Provider, { value: storeRef.current, children: children }));
+}
+exports.RecommendedRouteStoreProvider = RecommendedRouteStoreProvider;
+function useRecommendedRouteStore(selector, equalityFn) {
+    const useStore = (0, react_1.useContext)(exports.RecommendedRouteStoreContext);
+    if (!useStore) {
+        throw new Error(`You forgot to wrap your component in <${RecommendedRouteStoreProvider.name}>.`);
+    }
+    return useStore(selector, equalityFn);
+}
+exports.useRecommendedRouteStore = useRecommendedRouteStore;
+function useRecommendedRouteStoreContext() {
+    const useStore = (0, react_1.useContext)(exports.RecommendedRouteStoreContext);
+    if (!useStore) {
+        throw new Error(`You forgot to wrap your component in <${RecommendedRouteStoreProvider.name}>.`);
+    }
+    return useStore;
+}
+exports.useRecommendedRouteStoreContext = useRecommendedRouteStoreContext;

package/cjs/stores/routes/useSwapHistory.js

@@ -7,12 +7,9 @@ const RouteExecutionStore_1 = require("./RouteExecutionStore");
 const types_1 = require("./types");
 const useSwapHistory = (address) => {
     return (0, RouteExecutionStore_1.useRouteExecutionStore)((state) => Object.values(state.routes)
-        .filter((item) => (item === null || item === void 0 ? void 0 : item.route.fromAddress) === address &&
+        .filter((item) => item?.route.fromAddress === address &&
         (0, utils_1.hasEnumFlag)(item.status, types_1.RouteExecutionStatus.Done))
-        .sort((a, b) => {
-        var _a, _b, _c, _d;
-        return ((_b = (_a = b === null || b === void 0 ? void 0 : b.route.steps[0].execution) === null || _a === void 0 ? void 0 : _a.process[0].startedAt) !== null && _b !== void 0 ? _b : 0) -
-            ((_d = (_c = a === null || a === void 0 ? void 0 : a.route.steps[0].execution) === null || _c === void 0 ? void 0 : _c.process[0].startedAt) !== null && _d !== void 0 ? _d : 0);
-    }), shallow_1.shallow);
+        .sort((a, b) => (b?.route.steps[0].execution?.process[0].startedAt ?? 0) -
+        (a?.route.steps[0].execution?.process[0].startedAt ?? 0)), shallow_1.shallow);
 };
 exports.useSwapHistory = useSwapHistory;

package/cjs/stores/routes/utils.js

@@ -3,19 +3,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getUpdatedProcess = exports.isRouteActive = exports.isRouteFailed = exports.isRouteRefunded = exports.isRoutePartiallyDone = exports.isRouteDone = void 0;
 const microdiff_1 = require("microdiff");
 const isRouteDone = (route) => {
-    return route.steps.every((step) => { var _a; return ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'DONE'; });
+    return route.steps.every((step) => step.execution?.status === 'DONE');
 };
 exports.isRouteDone = isRouteDone;
 const isRoutePartiallyDone = (route) => {
-    return route.steps.some((step) => { var _a; return (_a = step.execution) === null || _a === void 0 ? void 0 : _a.process.some((process) => process.substatus === 'PARTIAL'); });
+    return route.steps.some((step) => step.execution?.process.some((process) => process.substatus === 'PARTIAL'));
 };
 exports.isRoutePartiallyDone = isRoutePartiallyDone;
 const isRouteRefunded = (route) => {
-    return route.steps.some((step) => { var _a; return (_a = step.execution) === null || _a === void 0 ? void 0 : _a.process.some((process) => process.substatus === 'REFUNDED'); });
+    return route.steps.some((step) => step.execution?.process.some((process) => process.substatus === 'REFUNDED'));
 };
 exports.isRouteRefunded = isRouteRefunded;
 const isRouteFailed = (route) => {
-    return route.steps.some((step) => { var _a; return ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'FAILED'; });
+    return route.steps.some((step) => step.execution?.status === 'FAILED');
 };
 exports.isRouteFailed = isRouteFailed;
 const isRouteActive = (route) => {

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

@@ -1,5 +1,5 @@
-export * from './SettingsStore';
 export * from './types';
 export * from './useAppearance';
 export * from './useSendToWalletStore';
 export * from './useSettings';
+export * from './useSettingsStore';

package/cjs/stores/settings/index.js

@@ -14,8 +14,8 @@ 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("./SettingsStore"), exports);
 __exportStar(require("./types"), exports);
 __exportStar(require("./useAppearance"), exports);
 __exportStar(require("./useSendToWalletStore"), exports);
 __exportStar(require("./useSettings"), exports);
+__exportStar(require("./useSettingsStore"), exports);

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

@@ -1,27 +1,27 @@
-import type { Bridge, Exchange, Order } from '@lifi/sdk';
+import type { Order } from '@lifi/sdk';
 import type { Appearance } from '../../types';
 export type ValueSetter<S> = <K extends keyof S>(key: K, value: S[Extract<K, string>]) => void;
 export type ValuesSetter<S> = <K extends keyof S>(values: Record<K, S[Extract<K, string>]>) => void;
 export type SettingsToolType = 'Bridges' | 'Exchanges';
 export declare const SettingsToolTypes: SettingsToolType[];
 export interface SettingsProps {
-    advancedPreferences: boolean;
     appearance: Appearance;
     gasPrice?: string;
     language?: string;
     routePriority?: Order;
     showDestinationWallet: boolean;
     slippage?: string;
-    enabledBridges?: string[];
+    enabledBridges: string[];
     _enabledBridges?: Record<string, boolean>;
-    enabledExchanges?: string[];
+    enabledExchanges: string[];
     _enabledExchanges?: Record<string, boolean>;
 }
 export interface SettingsState extends SettingsProps {
     setValue: ValueSetter<SettingsProps>;
     setValues: ValuesSetter<SettingsProps>;
-    initializeTools(toolType: SettingsToolType, tools: string[]): void;
-    setTools(toolType: SettingsToolType, tools: string[], availableTools: (Pick<Bridge, 'key'> | Pick<Exchange, 'key'>)[]): void;
+    initializeTools(toolType: SettingsToolType, tools: string[], reset?: boolean): void;
+    setTools(toolType: SettingsToolType, tools: string[], availableTools: string[]): void;
+    reset(bridges: string[], exchanges: string[]): void;
 }
 export interface SendToWalletState {
     showSendToWallet: boolean;

package/cjs/stores/settings/useAppearance.js

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useAppearance = void 0;
 const shallow_1 = require("zustand/shallow");
-const SettingsStore_1 = require("./SettingsStore");
+const useSettingsStore_1 = require("./useSettingsStore");
 const useAppearance = () => {
-    const [appearance, setValue] = (0, SettingsStore_1.useSettingsStore)((state) => [state.appearance, state.setValue], shallow_1.shallow);
+    const [appearance, setValue] = (0, useSettingsStore_1.useSettingsStore)((state) => [state.appearance, state.setValue], shallow_1.shallow);
     const setAppearance = (appearance) => {
         setValue('appearance', appearance);
     };

package/cjs/stores/settings/useSettings.js

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSettings = void 0;
 const shallow_1 = require("zustand/shallow");
-const SettingsStore_1 = require("./SettingsStore");
+const useSettingsStore_1 = require("./useSettingsStore");
 const useSettings = (keys) => {
-    return (0, SettingsStore_1.useSettingsStore)((state) => keys.reduce((values, key) => {
+    return (0, useSettingsStore_1.useSettingsStore)((state) => keys.reduce((values, key) => {
         values[key] = state[key];
         return values;
     }, {}), shallow_1.shallow);

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

@@ -0,0 +1,6 @@
+import type { WidgetConfig } from '../../types';
+import type { SettingsProps, SettingsState } from './types';
+export declare const defaultConfigurableSettings: Pick<SettingsState, 'routePriority' | 'slippage'>;
+export declare const defaultSettings: SettingsProps;
+export declare const useSettingsStore: import("zustand").UseBoundStore<import("zustand").StoreApi<SettingsState>>;
+export declare const setDefaultSettings: (config?: WidgetConfig) => void;

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

@@ -1,17 +1,6 @@
 "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.createSettingsStore = exports.defaultSettings = exports.defaultConfigurableSettings = void 0;
+exports.setDefaultSettings = exports.useSettingsStore = exports.defaultSettings = exports.defaultConfigurableSettings = void 0;
 const zustand_1 = require("zustand");
 const middleware_1 = require("zustand/middleware");
 const types_1 = require("./types");
@@ -22,27 +11,32 @@ exports.defaultConfigurableSettings = {
 exports.defaultSettings = {
     appearance: 'auto',
     gasPrice: 'normal',
-    advancedPreferences: false,
     showDestinationWallet: true,
+    enabledBridges: [],
+    enabledExchanges: [],
 };
-const createSettingsStore = ({ namePrefix }) => (0, zustand_1.create)((0, middleware_1.persist)((set) => (Object.assign(Object.assign({}, exports.defaultSettings), { setValue: (key, value) => set(() => ({
+exports.useSettingsStore = (0, zustand_1.create)((0, middleware_1.persist)((set, get) => ({
+    ...exports.defaultSettings,
+    setValue: (key, value) => set(() => ({
         [key]: value,
-    })), setValues: (values) => set((state) => {
-        const updatedState = Object.assign({}, state);
+    })),
+    setValues: (values) => set((state) => {
+        const updatedState = { ...state };
         for (const key in values) {
             if (Object.hasOwn(state, key)) {
                 updatedState[key] = values[key];
             }
         }
         return updatedState;
-    }), initializeTools: (toolType, tools) => {
+    }),
+    initializeTools: (toolType, tools, reset) => {
         if (!tools.length) {
             return;
         }
         set((state) => {
-            const updatedState = Object.assign({}, state);
-            if (updatedState[`_enabled${toolType}`]) {
-                // Add a new tools
+            const updatedState = { ...state };
+            if (updatedState[`_enabled${toolType}`] && !reset) {
+                // Add new tools
                 const enabledTools = tools
                     .filter((tool) => !Object.hasOwn(updatedState[`_enabled${toolType}`], tool))
                     .reduce((values, tool) => {
@@ -63,21 +57,31 @@ const createSettingsStore = ({ namePrefix }) => (0, zustand_1.create)((0, middle
                 .map(([key]) => key);
             return updatedState;
         });
-    }, setTools: (toolType, tools, availableTools) => set(() => ({
+    },
+    setTools: (toolType, tools, availableTools) => set(() => ({
         [`enabled${toolType}`]: tools,
-        [`_enabled${toolType}`]: availableTools.reduce((values, tool) => {
-            values[tool.key] = tools.includes(tool.key);
+        [`_enabled${toolType}`]: availableTools.reduce((values, toolKey) => {
+            values[toolKey] = tools.includes(toolKey);
             return values;
         }, {}),
-    })) })), {
-    name: `${namePrefix || 'li.fi'}-widget-settings`,
+    })),
+    reset: (bridges, exchanges) => {
+        set(() => ({
+            ...exports.defaultSettings,
+            ...exports.defaultConfigurableSettings,
+        }));
+        get().initializeTools('Bridges', bridges, true);
+        get().initializeTools('Exchanges', exchanges, true);
+    },
+}), {
+    name: `li.fi-widget-settings`,
     version: 2,
     partialize: (state) => {
-        const { enabledBridges, enabledExchanges } = state, partializedState = __rest(state, ["enabledBridges", "enabledExchanges"]);
+        const { enabledBridges, enabledExchanges, ...partializedState } = state;
         return partializedState;
     },
     merge: (persistedState, currentState) => {
-        const state = Object.assign(Object.assign({}, currentState), persistedState);
+        const state = { ...currentState, ...persistedState };
         types_1.SettingsToolTypes.forEach((toolType) => {
             state[`enabled${toolType}`] = Object.entries(persistedState[`_enabled${toolType}`])
                 .filter(([_, value]) => value)
@@ -95,4 +99,20 @@ const createSettingsStore = ({ namePrefix }) => (0, zustand_1.create)((0, middle
         return persistedState;
     },
 }));
-exports.createSettingsStore = createSettingsStore;
+const setDefaultSettings = (config) => {
+    const { slippage, routePriority, setValue } = exports.useSettingsStore.getState();
+    const defaultSlippage = (config?.slippage ||
+        config?.sdkConfig?.defaultRouteOptions?.slippage ||
+        0) * 100;
+    const defaultRoutePriority = config?.routePriority || config?.sdkConfig?.defaultRouteOptions?.order;
+    exports.defaultConfigurableSettings.slippage = (defaultSlippage || exports.defaultConfigurableSettings.slippage)?.toString();
+    exports.defaultConfigurableSettings.routePriority =
+        defaultRoutePriority || exports.defaultConfigurableSettings.routePriority;
+    if (!slippage) {
+        setValue('slippage', exports.defaultConfigurableSettings.slippage);
+    }
+    if (!routePriority) {
+        setValue('routePriority', exports.defaultConfigurableSettings.routePriority);
+    }
+};
+exports.setDefaultSettings = setDefaultSettings;

package/cjs/utils/colors.js

@@ -7,7 +7,7 @@ const getContrastAlphaColor = (theme, alpha) => theme.palette.mode === 'light'
     ? `rgb(0 0 0 / ${alpha})`
     : `rgb(255 255 255 / ${alpha})`;
 exports.getContrastAlphaColor = getContrastAlphaColor;
-const getContrastTextColor = (theme, background) => (0, styles_1.getContrastRatio)(colors_1.common.white, background !== null && background !== void 0 ? background : theme.palette.primary.main) >= 3
+const getContrastTextColor = (theme, background) => (0, styles_1.getContrastRatio)(colors_1.common.white, background ?? theme.palette.primary.main) >= 3
     ? colors_1.common.white
     : colors_1.common.black;
 exports.getContrastTextColor = getContrastTextColor;

package/cjs/utils/format.js

@@ -14,14 +14,14 @@ big_js_1.default.NE = -42;
 const formatTokenAmount = (amount = '0', decimals = 0, decimalPlaces = 3) => {
     let shiftedAmount = amount;
     if (decimals) {
-        shiftedAmount = (Number(amount) / Math.pow(10, decimals)).toString();
+        shiftedAmount = (Number(amount) / 10 ** decimals).toString();
     }
     const parsedAmount = parseFloat(shiftedAmount);
     if (parsedAmount === 0 || isNaN(Number(shiftedAmount))) {
         return '0';
     }
     const absAmount = Math.abs(parsedAmount);
-    while (absAmount < 1 / Math.pow(10, decimalPlaces)) {
+    while (absAmount < 1 / 10 ** decimalPlaces) {
         decimalPlaces++;
     }
     return (0, big_js_1.default)(parseFloat((0, big_js_1.default)(parsedAmount).toFixed(decimalPlaces + 1, 0))).toString();
@@ -70,7 +70,7 @@ const formatAmount = (amount = '', returnInitial = false) => {
             return formattedAmount;
         }
     }
-    catch (_a) {
+    catch {
         return '';
     }
     return (0, big_js_1.default)(parsedAmount).toString();

package/cjs/utils/navigationRoutes.d.ts

@@ -1,6 +1,8 @@
 export declare const navigationRoutes: {
     home: string;
     activeSwaps: string;
+    bridges: string;
+    exchanges: string;
     fromChain: string;
     fromToken: string;
     selectWallet: string;

package/cjs/utils/navigationRoutes.js

@@ -4,6 +4,8 @@ exports.backButtonRoutes = exports.stickyHeaderRoutes = exports.navigationRoutes
 exports.navigationRoutes = {
     home: '/',
     activeSwaps: 'active-swaps',
+    bridges: 'bridges',
+    exchanges: 'exchanges',
     fromChain: 'from-chain',
     fromToken: 'from-token',
     selectWallet: 'wallet',
@@ -19,6 +21,8 @@ exports.navigationRoutes = {
 exports.navigationRoutesValues = Object.values(exports.navigationRoutes);
 exports.stickyHeaderRoutes = [
     exports.navigationRoutes.activeSwaps,
+    exports.navigationRoutes.bridges,
+    exports.navigationRoutes.exchanges,
     exports.navigationRoutes.fromChain,
     exports.navigationRoutes.home,
     exports.navigationRoutes.selectWallet,
@@ -32,6 +36,8 @@ exports.stickyHeaderRoutes = [
 ];
 exports.backButtonRoutes = [
     exports.navigationRoutes.activeSwaps,
+    exports.navigationRoutes.bridges,
+    exports.navigationRoutes.exchanges,
     exports.navigationRoutes.fromChain,
     exports.navigationRoutes.fromToken,
     exports.navigationRoutes.selectWallet,

package/components/ActiveSwaps/ActiveSwapItem.js

@@ -9,15 +9,17 @@ import { StepTimer } from '../Step/StepTimer';
 import { TokenAvatar, TokenAvatarGroup } from '../TokenAvatar';
 import { ListItem, ListItemButton } from './ActiveSwaps.style';
 export const ActiveSwapItem = ({ routeId, dense }) => {
-    var _a;
     const navigate = useNavigate();
     const { route, status } = useRouteExecution({
         routeId,
         executeInBackground: true,
     });
     // TODO: replace with ES2023 findLast
-    const lastActiveStep = route === null || route === void 0 ? void 0 : route.steps.slice().reverse().find((step) => step.execution);
-    const lastActiveProcess = (_a = lastActiveStep === null || lastActiveStep === void 0 ? void 0 : lastActiveStep.execution) === null || _a === void 0 ? void 0 : _a.process.at(-1);
+    const lastActiveStep = route?.steps
+        .slice()
+        .reverse()
+        .find((step) => step.execution);
+    const lastActiveProcess = lastActiveStep?.execution?.process.at(-1);
     const { title } = useProcessMessage(lastActiveStep, lastActiveProcess);
     if (!route || !lastActiveStep) {
         return null;
@@ -26,20 +28,20 @@ export const ActiveSwapItem = ({ routeId, dense }) => {
         navigate(navigationRoutes.swapExecution, { state: { routeId } });
     };
     const getStatusComponent = () => {
-        switch (lastActiveProcess === null || lastActiveProcess === void 0 ? void 0 : lastActiveProcess.status) {
+        switch (lastActiveProcess?.status) {
             case 'ACTION_REQUIRED':
                 return _jsx(InfoIcon, { color: "info", fontSize: "small" });
             case 'FAILED':
                 return _jsx(ErrorIcon, { color: "error", fontSize: "small" });
             default:
-                return (_jsx(Typography, Object.assign({ fontSize: 14, fontWeight: 500 }, { children: _jsx(StepTimer, { step: lastActiveStep, hideInProgress: true }) })));
+                return (_jsx(Typography, { fontSize: 14, fontWeight: 500, children: _jsx(StepTimer, { step: lastActiveStep, hideInProgress: true }) }));
         }
     };
     const ListItemComponent = dense ? ListItem : ListItemButton;
-    return (_jsxs(ListItemComponent, Object.assign({ onClick: handleClick, dense: true, disableRipple: true }, { children: [_jsx(ListItemAvatar, { children: _jsxs(TokenAvatarGroup, Object.assign({ total: 2 }, { children: [_jsx(TokenAvatar, { token: route.fromToken }), _jsx(TokenAvatar, { token: route.toToken })] })) }), _jsx(ListItemText, { sx: { margin: 0 }, disableTypography: true, primary: _jsxs(Typography, Object.assign({ fontWeight: 500, lineHeight: 1, sx: {
+    return (_jsxs(ListItemComponent, { onClick: handleClick, dense: true, disableRipple: true, children: [_jsx(ListItemAvatar, { children: _jsxs(TokenAvatarGroup, { total: 2, children: [_jsx(TokenAvatar, { token: route.fromToken }), _jsx(TokenAvatar, { token: route.toToken })] }) }), _jsx(ListItemText, { sx: { margin: 0 }, disableTypography: true, primary: _jsxs(Typography, { fontWeight: 500, lineHeight: 1, sx: {
                         display: 'flex',
                         alignItems: 'center',
                         marginLeft: 2,
                         height: 16,
-                    } }, { children: [route.fromToken.symbol, _jsx(ArrowForwardIcon, { sx: { paddingX: 0.5 } }), route.toToken.symbol] })), secondary: status !== RouteExecutionStatus.Done ? (_jsx(Typography, Object.assign({ fontWeight: 400, fontSize: 12, color: "text.secondary", lineHeight: 1, mt: 0.75, ml: 2 }, { children: title }))) : null }), getStatusComponent()] })));
+                    }, children: [route.fromToken.symbol, _jsx(ArrowForwardIcon, { sx: { paddingX: 0.5 } }), route.toToken.symbol] }), secondary: status !== RouteExecutionStatus.Done ? (_jsx(Typography, { fontWeight: 400, fontSize: 12, color: "text.secondary", lineHeight: 1, mt: 0.75, ml: 2, children: title })) : null }), getStatusComponent()] }));
 };

package/components/ActiveSwaps/ActiveSwaps.js

@@ -13,12 +13,12 @@ export const ActiveSwaps = (props) => {
     const navigate = useNavigate();
     const { account } = useWallet();
     const executingRoutes = useExecutingRoutesIds(account.address);
-    if (!(executingRoutes === null || executingRoutes === void 0 ? void 0 : executingRoutes.length)) {
+    if (!executingRoutes?.length) {
         return null;
     }
     const handleShowAll = () => {
         navigate(navigationRoutes.activeSwaps);
     };
-    const hasShowAll = (executingRoutes === null || executingRoutes === void 0 ? void 0 : executingRoutes.length) > 2;
-    return (_jsxs(Card, Object.assign({ variant: "selected", selectionColor: "secondary" }, props, { children: [_jsx(CardTitle, { children: t('header.activeSwaps') }), _jsx(Stack, Object.assign({ spacing: 1.5, pt: 1.5, pb: hasShowAll ? 0 : 2 }, { children: executingRoutes.slice(0, 2).map((routeId) => (_jsx(ActiveSwapItem, { routeId: routeId, dense: true }, routeId))) })), hasShowAll ? (_jsx(ShowAllButton, Object.assign({ disableRipple: true, fullWidth: true, onClick: handleShowAll }, { children: t('button.showAll') }))) : null] })));
+    const hasShowAll = executingRoutes?.length > 2;
+    return (_jsxs(Card, { variant: "selected", selectionColor: "secondary", ...props, children: [_jsx(CardTitle, { children: t('header.activeSwaps') }), _jsx(Stack, { spacing: 1.5, pt: 1.5, pb: hasShowAll ? 0 : 2, children: executingRoutes.slice(0, 2).map((routeId) => (_jsx(ActiveSwapItem, { routeId: routeId, dense: true }, routeId))) }), hasShowAll ? (_jsx(ShowAllButton, { disableRipple: true, fullWidth: true, onClick: handleShowAll, children: t('button.showAll') })) : null] }));
 };

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

@@ -15,7 +15,7 @@ export declare const ListItemButton: import("@emotion/styled").StyledComponent<i
     tabIndex?: number | undefined;
     TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
     touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
-}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
 }, "className" | "style" | "classes" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "autoFocus" | "dense" | "divider" | "selected" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const ListItem: import("@emotion/styled").StyledComponent<{
@@ -33,13 +33,13 @@ export declare const ListItem: import("@emotion/styled").StyledComponent<{
     slots?: {
         root?: import("react").ElementType<any> | undefined;
     } | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof import("react").LiHTMLAttributes<HTMLLIElement>> & {
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
     ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
-}, "button" | "className" | "style" | "classes" | "children" | "disabled" | "sx" | "alignItems" | "autoFocus" | "dense" | "divider" | "components" | "componentsProps" | "slotProps" | "slots" | "selected" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "disablePadding" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "button" | "className" | "style" | "classes" | "children" | "disabled" | "sx" | "alignItems" | "autoFocus" | "dense" | "divider" | "components" | "slotProps" | "slots" | "componentsProps" | "selected" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "disablePadding" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const ShowAllButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
-    color?: "inherit" | "success" | "warning" | "error" | "info" | "primary" | "secondary" | undefined;
+    color?: "inherit" | "success" | "warning" | "error" | "primary" | "secondary" | "info" | undefined;
     disabled?: boolean | undefined;
     disableElevation?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
@@ -66,6 +66,6 @@ export declare const ShowAllButton: import("@emotion/styled").StyledComponent<{
     tabIndex?: number | undefined;
     TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
     touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
-}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "href" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "size" | "startIcon" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;