@lifi/widget 1.15.1 → 1.16.0

package/hooks/useChains.js

@@ -7,27 +7,20 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { useQuery } from '@tanstack/react-query';
 import { useCallback } from 'react';
 import { LiFi } from '../config/lifi';
 import { useWidgetConfig } from '../providers/WidgetProvider';
+import { useSetChainOrder } from '../stores/chains';
 export const useChains = () => {
     const { disabledChains } = useWidgetConfig();
-    const _a = useQuery(['chains'], () => __awaiter(void 0, void 0, void 0, function* () {
+    const [, initializeChains] = useSetChainOrder();
+    const { data, isLoading } = useQuery(['chains'], () => __awaiter(void 0, void 0, void 0, function* () {
         const chains = yield LiFi.getChains();
-        return chains.filter((chain) => !(disabledChains === null || disabledChains === void 0 ? void 0 : disabledChains.includes(chain.id)));
-    })), { data } = _a, other = __rest(_a, ["data"]);
+        const filteredChains = chains.filter((chain) => !(disabledChains === null || disabledChains === void 0 ? void 0 : disabledChains.includes(chain.id)));
+        initializeChains(filteredChains.map((chain) => chain.id));
+        return filteredChains;
+    }));
     const getChainById = useCallback((chainId) => {
         const chain = data === null || data === void 0 ? void 0 : data.find((chain) => chain.id === chainId);
         // if (!chain) {
@@ -35,5 +28,5 @@ export const useChains = () => {
         // }
         return chain;
     }, [data]);
-    return Object.assign({ chains: data, getChainById }, other);
+    return { chains: data, getChainById, isLoading };
 };

package/{components/Step/utils.d.ts → hooks/useProcessMessage.d.ts}

@@ -1,5 +1,9 @@
 import type { EVMChain, Process, Step } from '@lifi/sdk';
 import type { TFunction } from 'react-i18next';
+export declare const useProcessMessage: (step?: Step, process?: Process) => {
+    title?: string | undefined;
+    message?: string | undefined;
+};
 export declare function getProcessMessage(t: TFunction<'translation', undefined>, getChainById: (chainId: number) => EVMChain | undefined, step: Step, process: Process): {
     title?: string;
     message?: string;

package/{pages/SwapPage/utils.js → hooks/useProcessMessage.js}

@@ -1,9 +1,14 @@
-import { LifiErrorCode, MetaMaskProviderErrorCode } from '@lifi/sdk';
-import { formatTokenAmount } from '../../utils';
-const formatProcessMessage = (initialMessage, args = {}) => {
-    return Object.keys(args).reduce((message, key) => {
-        return message.replace(`{${key}}`, args[key]);
-    }, initialMessage);
+import { LifiErrorCode } from '@lifi/sdk';
+import { useTranslation } from 'react-i18next';
+import { formatTokenAmount } from '../utils';
+import { useChains } from './useChains';
+export const useProcessMessage = (step, process) => {
+    const { t } = useTranslation();
+    const { getChainById } = useChains();
+    if (!step || !process) {
+        return {};
+    }
+    return getProcessMessage(t, getChainById, step, process);
 };
 const processMessages = {
     TOKEN_ALLOWANCE: {
@@ -12,7 +17,7 @@ const processMessages = {
         DONE: (t) => t(`swap.process.tokenAllowance.done`),
     },
     SWITCH_CHAIN: {
-        PENDING: (t) => t(`swap.process.switchChain.pending`),
+        ACTION_REQUIRED: (t) => t(`swap.process.switchChain.actionRequired`),
         DONE: (t) => t(`swap.process.switchChain.done`),
     },
     SWAP: {
@@ -67,9 +72,9 @@ export function getProcessMessage(t, getChainById, step, process) {
                 title = t(`swap.error.title.slippageTooLarge`);
                 message = t(`swap.error.message.slippageTooLarge`);
                 break;
-            case MetaMaskProviderErrorCode.userRejectedRequest:
-                title = t(`swap.error.title.userRejectedSignatureRequest`);
-                message = t(`swap.error.message.signatureRequired`, {
+            case LifiErrorCode.TransactionRejected:
+                title = t(`swap.error.title.transactionRejected`);
+                message = t(`swap.error.message.transactionRejected`, {
                     amount: formatTokenAmount(step.action.fromAmount, step.action.fromToken.decimals),
                     tokenSymbol: step.action.fromToken.symbol,
                     chainName: (_b = (_a = getChainById(step.action.fromChainId)) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : '',

package/hooks/useRouteExecution.d.ts

@@ -1,5 +1,5 @@
 import type { Route } from '@lifi/sdk';
-export declare const useRouteExecution: (routeId: string) => {
+export declare const useRouteExecution: (routeId: string, executeInBackground?: boolean) => {
     executeRoute: () => void;
     restartRoute: () => void;
     deleteRoute: () => void;

package/hooks/useRouteExecution.js

@@ -12,17 +12,26 @@ import { useCallback, useEffect, useRef } from 'react';
 import shallow from 'zustand/shallow';
 import { LiFi } from '../config/lifi';
 import { useWallet } from '../providers/WalletProvider';
-import { useRouteStore } from '../stores';
+import { isRouteActive, isRouteCompleted, isRouteFailed, useRouteStore, } from '../stores';
+import { WidgetEvent } from '../types/events';
 import { deepClone } from '../utils';
-export const useRouteExecution = (routeId) => {
+import { useWidgetEvents } from './useWidgetEvents';
+export const useRouteExecution = (routeId, executeInBackground) => {
     const { account, switchChain } = useWallet();
     const resumedAfterMount = useRef(false);
+    const emitter = useWidgetEvents();
     const routeExecution = useRouteStore((state) => state.routes[routeId]);
     const [updateRoute, restartRoute, deleteRoute] = useRouteStore((state) => [state.updateRoute, state.restartRoute, state.deleteRoute], shallow);
     const updateCallback = (updatedRoute) => {
         const clonedUpdatedRoute = deepClone(updatedRoute);
         console.log('Route updated.', clonedUpdatedRoute);
         updateRoute(clonedUpdatedRoute);
+        if (isRouteCompleted(clonedUpdatedRoute)) {
+            emitter.emit(WidgetEvent.SwapCompleted);
+        }
+        if (isRouteFailed(clonedUpdatedRoute)) {
+            emitter.emit(WidgetEvent.SwapFailed);
+        }
     };
     const switchChainHook = (requiredChainId) => __awaiter(void 0, void 0, void 0, function* () {
         if (!account.isActive || !account.signer) {
@@ -48,16 +57,12 @@ export const useRouteExecution = (routeId) => {
             updateCallback,
             switchChainHook,
             infiniteApproval: false,
+            executeInBackground,
         });
     }, {
         onMutate: () => {
             console.log('Execution started.', routeId);
-        },
-        onError: () => {
-            console.warn('Execution failed.', routeId);
-        },
-        onSuccess: (route) => {
-            console.log('Executed successfully.', routeId);
+            emitter.emit(WidgetEvent.SwapStarted);
         },
     });
     const resumeRouteMutation = useMutation((resumedRoute) => {
@@ -71,26 +76,21 @@ export const useRouteExecution = (routeId) => {
             updateCallback,
             switchChainHook,
             infiniteApproval: false,
+            executeInBackground,
         });
     }, {
         onMutate: () => {
             console.log('Resumed to execution.', routeId);
         },
-        onError: () => {
-            console.warn('Resumed execution failed.', routeId);
-        },
-        onSuccess: (route) => {
-            console.log('Resumed execution successful.', route);
-        },
     });
     const executeRoute = useCallback(() => {
         executeRouteMutation.mutateAsync(undefined, {
             onError: () => {
-                console.warn('Real execution failed!', routeId);
+                console.warn('Execution failed!', routeId);
                 // Notification.showNotification(NotificationType.SwapExecution_ERROR);
             },
             onSuccess: (route) => {
-                console.log('Real execution successfully!', route);
+                console.log('Executed successfully!', route);
                 // Notification.showNotification(NotificationType.TRANSACTION_SUCCESSFULL);
             },
         });
@@ -98,10 +98,10 @@ export const useRouteExecution = (routeId) => {
     const resumeRoute = useCallback((route) => {
         resumeRouteMutation.mutateAsync(route, {
             onError: () => {
-                console.warn('Real resumed execution failed.', routeId);
+                console.warn('Resumed execution failed.', routeId);
             },
             onSuccess: (route) => {
-                console.log('Real resumed execution successful.', route);
+                console.log('Resumed execution successful.', route);
             },
         });
     }, [resumeRouteMutation, routeId]);
@@ -117,7 +117,7 @@ export const useRouteExecution = (routeId) => {
     // Resume route execution after page reload
     useEffect(() => {
         // Check if route is eligible for automatic resuming
-        if (isActiveRoute(routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route) &&
+        if (isRouteActive(routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route) &&
             account.isActive &&
             !resumedAfterMount.current) {
             resumedAfterMount.current = true;
@@ -129,10 +129,10 @@ export const useRouteExecution = (routeId) => {
         return () => {
             var _a;
             const route = (_a = useRouteStore.getState().routes[routeId]) === null || _a === void 0 ? void 0 : _a.route;
-            if (!route || !isActiveRoute(route)) {
+            if (!route || !isRouteActive(route)) {
                 return;
             }
-            LiFi.moveExecutionToBackground(route);
+            LiFi.updateRouteExecution(route, { executeInBackground: true });
             console.log('Move route execution to background.', routeId);
             resumedAfterMount.current = false;
         };
@@ -145,12 +145,3 @@ export const useRouteExecution = (routeId) => {
         status: routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.status,
     };
 };
-const isActiveRoute = (route) => {
-    if (!route) {
-        return false;
-    }
-    const allDone = route.steps.every((step) => { var _a; return ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'DONE'; });
-    const isFailed = route.steps.some((step) => { var _a; return ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'FAILED'; });
-    const alreadyStarted = route.steps.some((step) => step.execution);
-    return !allDone && !isFailed && alreadyStarted;
-};

package/hooks/useWidgetEvents.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="node" />
+import { EventEmitter } from 'events';
+export declare const useWidgetEvents: () => EventEmitter;

package/hooks/useWidgetEvents.js

@@ -0,0 +1,6 @@
+import { EventEmitter } from 'events';
+import create from 'zustand';
+const emitterStore = create()(() => new EventEmitter());
+export const useWidgetEvents = () => {
+    return emitterStore();
+};

package/i18n/en/translation.json

@@ -6,10 +6,12 @@
     "swap": "Swap",
     "from": "Swap from",
     "to": "Swap to",
+    "selectChain": "Select chain",
     "settings": "Settings",
     "routes": "You get",
     "swapHistory": "Swap history",
-    "swapDetails": "Swap details"
+    "swapDetails": "Swap details",
+    "activeSwaps": "Active swaps"
   },
   "button": {
     "connectWallet": "Connect wallet",
@@ -31,6 +33,7 @@
     "delete": "Delete",
     "hide": "Hide",
     "max": "max",
+    "showAll": "Show all",
     "contactSupport": "Contact support",
     "lifiSwap": "LI.FI Swap"
   },
@@ -53,7 +56,6 @@
     "featuredTokens": "Featured tokens",
     "otherTokens": "Other tokens",
     "inProgress": "in progress",
-    "activeTransfers": "Active transfers",
     "couldntFindTokens": "We couldn't find tokens on this chain or you don't have any.",
     "stepSwap": "Swap",
     "stepBridge": "Bridge",
@@ -63,7 +65,7 @@
     "swapStepDetails": "Swap on {{chain}} via {{tool}}",
     "tokenOnChain": "{{tokenSymbol}} on {{chainName}}",
     "tokenOnChainAmount": "{{amount}} {{tokenSymbol}} on {{chainName}}",
-    "routeId": "Route ID",
+    "supportId": "Support ID",
     "sendToWallet": "Send to a different wallet",
     "walletAddressOrEns": "Wallet address or ENS name",
     "tags": {
@@ -84,11 +86,13 @@
     "info": {
       "title": {
         "routeNotFound": "No routes available",
-        "emptySwapHistory": "No recent swaps"
+        "emptySwapHistory": "No recent swaps",
+        "emptyActiveSwaps": "No active swaps"
       },
       "message": {
         "routeNotFound": "Try another token combination.",
-        "emptySwapHistory": "Swap history is only stored locally and will be deleted if you clear your browser data."
+        "emptySwapHistory": "Swap history is only stored locally and will be deleted if you clear your browser data.",
+        "emptyActiveSwaps": "Swaps in progress will appear here. Once completed, find them in swap history."
       }
     },
     "warning": {
@@ -105,18 +109,19 @@
     },
     "error": {
       "title": {
+        "failed": "Swap failed.",
         "chainSwitch": "Chain switch required.",
         "transactionFailed": "Transaction has failed.",
         "transactionUnderpriced": "Transaction is underpriced.",
         "transactionUnprepared": "Unable to prepare transaction.",
+        "transactionRejected": "Signature required.",
         "unknown": "Something went wrong.",
-        "userRejectedSignatureRequest": "Signature required.",
         "slippageTooLarge": "Slippage too large.",
         "walletAddressInvalid": "Wallet address is invalid.",
         "walletEnsAddressInvalid": "Wallet address is invalid or network doesn't support ENS."
       },
       "message": {
-        "signatureRequired": "Your signature is required to complete the transaction. {{amount}} {{tokenSymbol}} on {{chainName}} remain in your wallet.",
+        "transactionRejected": "Your signature is required to complete the transaction. {{amount}} {{tokenSymbol}} on {{chainName}} remain in your wallet.",
         "transactionFailed": "Please check the block explorer for more information.",
         "transactionNotSent": "Transaction was not sent, your funds are still in your wallet ({{amount}} {{tokenSymbol}} on {{chainName}}).",
         "slippageTooLarge": "The slippage is larger than the defined threshold. Please request a new route to get a fresh quote."
@@ -129,7 +134,7 @@
         "done": "Token allowance approved."
       },
       "switchChain": {
-        "pending": "Chain switch required.",
+        "actionRequired": "Chain switch required.",
         "done": "Chain switched successfully."
       },
       "swap": {

package/i18n/index.d.ts

@@ -9,10 +9,12 @@ export declare const resources: {
                 swap: string;
                 from: string;
                 to: string;
+                selectChain: string;
                 settings: string;
                 routes: string;
                 swapHistory: string;
                 swapDetails: string;
+                activeSwaps: string;
             };
             button: {
                 connectWallet: string;
@@ -34,6 +36,7 @@ export declare const resources: {
                 delete: string;
                 hide: string;
                 max: string;
+                showAll: string;
                 contactSupport: string;
                 lifiSwap: string;
             };
@@ -56,7 +59,6 @@ export declare const resources: {
                 featuredTokens: string;
                 otherTokens: string;
                 inProgress: string;
-                activeTransfers: string;
                 couldntFindTokens: string;
                 stepSwap: string;
                 stepBridge: string;
@@ -66,7 +68,7 @@ export declare const resources: {
                 swapStepDetails: string;
                 tokenOnChain: string;
                 tokenOnChainAmount: string;
-                routeId: string;
+                supportId: string;
                 sendToWallet: string;
                 walletAddressOrEns: string;
                 tags: {
@@ -88,10 +90,12 @@ export declare const resources: {
                     title: {
                         routeNotFound: string;
                         emptySwapHistory: string;
+                        emptyActiveSwaps: string;
                     };
                     message: {
                         routeNotFound: string;
                         emptySwapHistory: string;
+                        emptyActiveSwaps: string;
                     };
                 };
                 warning: {
@@ -108,18 +112,19 @@ export declare const resources: {
                 };
                 error: {
                     title: {
+                        failed: string;
                         chainSwitch: string;
                         transactionFailed: string;
                         transactionUnderpriced: string;
                         transactionUnprepared: string;
+                        transactionRejected: string;
                         unknown: string;
-                        userRejectedSignatureRequest: string;
                         slippageTooLarge: string;
                         walletAddressInvalid: string;
                         walletEnsAddressInvalid: string;
                     };
                     message: {
-                        signatureRequired: string;
+                        transactionRejected: string;
                         transactionFailed: string;
                         transactionNotSent: string;
                         slippageTooLarge: string;
@@ -132,7 +137,7 @@ export declare const resources: {
                         done: string;
                     };
                     switchChain: {
-                        pending: string;
+                        actionRequired: string;
                         done: string;
                     };
                     swap: {

package/index.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import './fonts/inter.css';
+export { useWidgetEvents } from './hooks';
 export * from './types';
 export declare const LiFiWidget: import("react").FC<import("./AppProvider").AppProps>;
 export declare const LiFiWidgetDrawer: import("react").ForwardRefExoticComponent<Pick<import("./AppDrawer").AppDrawerProps, "className" | "style" | "classes" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "children" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "key" | "transitionDuration" | "variant" | "open" | "anchor" | "elementRef" | "components" | "componentsProps" | "BackdropComponent" | "BackdropProps" | "closeAfterTransition" | "container" | "disableAutoFocus" | "disableEnforceFocus" | "disableEscapeKeyDown" | "disablePortal" | "disableRestoreFocus" | "disableScrollLock" | "hideBackdrop" | "keepMounted" | "onBackdropClick" | "onClose" | "config" | "elevation" | "ModalProps" | "PaperProps" | "SlideProps"> & import("react").RefAttributes<import("./AppDrawer").AppDrawerBase>>;

package/index.js

@@ -2,6 +2,7 @@ import { App } from './App';
 import { AppDrawer } from './AppDrawer';
 import './fonts/inter.css';
 import { configureReactI18next } from './i18n';
+export { useWidgetEvents } from './hooks';
 export * from './types';
 configureReactI18next();
 // ClassNameGenerator.configure((componentName) =>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "1.15.1",
+  "version": "1.16.0",
   "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",
@@ -37,28 +37,29 @@
     "lifi"
   ],
   "dependencies": {
-    "@emotion/react": "^11.10.0",
-    "@emotion/styled": "^11.10.0",
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
     "@ethersproject/address": "^5.7.0",
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/providers": "^5.7.0",
-    "@lifi/sdk": "^1.2.2",
-    "@lifi/wallet-management": "^1.1.8",
-    "@mui/icons-material": "^5.10.2",
-    "@mui/lab": "^5.0.0-alpha.96",
-    "@mui/material": "^5.10.2",
-    "@sentry/integrations": "^7.11.1",
-    "@sentry/react": "^7.11.1",
-    "@sentry/tracing": "^7.11.1",
-    "@tanstack/react-query": "^4.2.1",
+    "@lifi/sdk": "^1.5.0",
+    "@lifi/wallet-management": "^1.1.9",
+    "@mui/icons-material": "^5.10.3",
+    "@mui/lab": "^5.0.0-alpha.98",
+    "@mui/material": "^5.10.4",
+    "@sentry/integrations": "^7.12.1",
+    "@sentry/react": "^7.12.1",
+    "@sentry/tracing": "^7.12.1",
+    "@tanstack/react-query": "^4.2.3",
     "@tanstack/react-virtual": "^3.0.0-beta.17",
     "big.js": "^6.2.1",
+    "events": "^3.3.0",
     "i18next": "^21.9.1",
     "immer": "^9.0.15",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.34.2",
-    "react-i18next": "^11.18.4",
+    "react-i18next": "^11.18.5",
     "react-router-dom": "^6.3.0",
     "react-timer-hook": "^3.0.5",
     "zustand": "^4.1.1"

package/pages/ActiveSwapsPage/ActiveSwapsEmpty.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ActiveSwapsEmpty: React.FC;

package/pages/ActiveSwapsPage/ActiveSwapsEmpty.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SwapHoriz as SwapHorizIcon } from '@mui/icons-material';
+import { Container, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+export const ActiveSwapsEmpty = () => {
+    const { t } = useTranslation();
+    return (_jsxs(Container, Object.assign({ sx: {
+            display: 'flex',
+            flex: 1,
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+        } }, { children: [_jsx(Typography, Object.assign({ fontSize: 48 }, { children: _jsx(SwapHorizIcon, { fontSize: "inherit" }) })), _jsx(Typography, Object.assign({ fontSize: 18, fontWeight: 700 }, { children: t('swap.info.title.emptyActiveSwaps') })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2 }, { children: t('swap.info.message.emptyActiveSwaps') }))] })));
+};

package/pages/ActiveSwapsPage/ActiveSwapsPage.d.ts

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

package/pages/ActiveSwapsPage/ActiveSwapsPage.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Container, List } from '@mui/material';
+import { ActiveSwapItem } from '../../components/ActiveSwaps';
+import { useWallet } from '../../providers';
+import { useExecutingRoutesIds } from '../../stores';
+import { ActiveSwapsEmpty } from './ActiveSwapsEmpty';
+export const ActiveSwapsPage = () => {
+    const { account } = useWallet();
+    const executingRoutes = useExecutingRoutesIds(account.address);
+    if (!executingRoutes.length) {
+        return _jsx(ActiveSwapsEmpty, {});
+    }
+    return (_jsx(Container, Object.assign({ disableGutters: true }, { children: _jsx(List, Object.assign({ sx: {
+                paddingLeft: 1.5,
+                paddingRight: 1.5,
+            } }, { children: executingRoutes.map((routeId) => (_jsx(ActiveSwapItem, { routeId: routeId }, routeId))) })) })));
+};

package/pages/ActiveSwapsPage/index.d.ts

@@ -0,0 +1 @@
+export * from './ActiveSwapsPage';

package/pages/ActiveSwapsPage/index.js

@@ -0,0 +1 @@
+export * from './ActiveSwapsPage';

package/pages/MainPage/MainPage.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@mui/material';
+import { ActiveSwaps } from '../../components/ActiveSwaps';
 import { SelectChainAndToken } from '../../components/SelectChainAndToken';
-import { SendToWallet } from '../../components/SendToWallet';
 import { SwapInput } from '../../components/SwapInput';
-import { SwapsInProgress } from '../../components/SwapsInProgress';
 import { FormContainer } from './MainPage.style';
 import { MainSwapButton } from './MainSwapButton';
 import { SwapRoutes } from './SwapRoutes';
 export const MainPage = () => {
-    return (_jsxs(FormContainer, Object.assign({ disableGutters: true }, { children: [_jsx(SwapsInProgress, { mx: 3, mt: 1, mb: 2 }), _jsx(SelectChainAndToken, { mt: 1, mx: 3, mb: 3 }), _jsx(Box, Object.assign({ mx: 3, mb: 3 }, { children: _jsx(SwapInput, { formType: "from" }) })), _jsx(SendToWallet, { mx: 3, mb: 3 }), _jsx(SwapRoutes, { mx: 3, mb: 3 }), _jsx(Box, Object.assign({ mx: 3, mb: 1 }, { children: _jsx(MainSwapButton, {}) }))] })));
+    return (_jsxs(FormContainer, Object.assign({ disableGutters: true }, { children: [_jsx(ActiveSwaps, { mx: 3, mt: 1, mb: 2 }), _jsx(SelectChainAndToken, { mt: 1, mx: 3, mb: 3 }), _jsx(Box, Object.assign({ mx: 3, mb: 3 }, { children: _jsx(SwapInput, { formType: "from" }) })), _jsx(SwapRoutes, { mx: 3, mb: 3 }), _jsx(Box, Object.assign({ mx: 3, mb: 1 }, { children: _jsx(MainSwapButton, {}) }))] })));
 };

package/pages/MainPage/MainSwapButton.js

@@ -8,6 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useFormState } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import { SwapButton } from '../../components/SwapButton';
 import { useSwapRoutes } from '../../hooks';
@@ -15,6 +16,7 @@ import { useSetExecutableRoute } from '../../stores';
 import { navigationRoutes } from '../../utils';
 export const MainSwapButton = () => {
     const navigate = useNavigate();
+    const { isValid, isValidating } = useFormState();
     const setExecutableRoute = useSetExecutableRoute();
     const { routes: swapRoutes, isLoading, isFetching } = useSwapRoutes();
     const currentRoute = swapRoutes === null || swapRoutes === void 0 ? void 0 : swapRoutes[0];
@@ -26,5 +28,5 @@ export const MainSwapButton = () => {
             });
         }
     });
-    return (_jsx(SwapButton, { onClick: handleClick, currentRoute: currentRoute, loading: isLoading || isFetching || !currentRoute }));
+    return (_jsx(SwapButton, { onClick: handleClick, currentRoute: currentRoute, disable: isLoading || isFetching || !currentRoute || isValidating || !isValid }));
 };

package/pages/MainPage/SwapRoutes.js

@@ -3,11 +3,13 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { KeyboardArrowRight as KeyboardArrowRightIcon } from '@mui/icons-material';
 import { Box, IconButton } from '@mui/material';
 import { useCallback } from 'react';
+import { useFormState } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { Card, CardTitle } from '../../components/Card';
 import { GasSufficiencyMessage } from '../../components/GasSufficiencyMessage';
 import { ProgressToNextUpdate } from '../../components/ProgressToNextUpdate';
+import { SendToWallet } from '../../components/SendToWallet';
 import { SwapRouteCard, SwapRouteCardSkeleton, SwapRouteNotFoundCard, } from '../../components/SwapRouteCard';
 import { useSwapRoutes } from '../../hooks';
 import { navigationRoutes } from '../../utils';
@@ -15,6 +17,7 @@ import { Stack } from './SwapRoutes.style';
 export const SwapRoutes = (props) => {
     const { t } = useTranslation();
     const navigate = useNavigate();
+    const { isValid, isValidating } = useFormState();
     const { routes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch, } = useSwapRoutes();
     const handleCardClick = useCallback(() => {
         navigate(navigationRoutes.swapRoutes);
@@ -32,5 +35,5 @@ export const SwapRoutes = (props) => {
                                     borderWidth: !routeNotFound && (isFetching || (routes && routes.length > 1))
                                         ? 1
                                         : 0,
-                                } }, { children: isLoading || isFetching ? (_jsxs(_Fragment, { children: [_jsx(SwapRouteCardSkeleton, { minWidth: "80%", dense: true }), _jsx(SwapRouteCardSkeleton, { minWidth: "80%", dense: true })] })) : !currentRoute ? (_jsx(SwapRouteNotFoundCard, { minWidth: "100%", dense: true })) : (_jsxs(_Fragment, { children: [_jsx(SwapRouteCard, { minWidth: routes.length > 1 ? '80%' : '100%', route: currentRoute, active: true, dense: true }), routes.length > 1 ? (_jsx(SwapRouteCard, { minWidth: "80%", route: routes[1], dense: true })) : null] })) })), _jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: !routeNotFound ? (_jsx(Box, Object.assign({ py: 1, pr: 1 }, { children: _jsx(IconButton, Object.assign({ onClick: handleCardClick, size: "medium", "aria-label": "swap-routes" }, { children: _jsx(KeyboardArrowRightIcon, {}) })) }))) : null }))] }))] })), _jsx(GasSufficiencyMessage, Object.assign({ route: !isFetching ? currentRoute : undefined }, props))] }));
+                                } }, { children: isLoading || isFetching ? (_jsxs(_Fragment, { children: [_jsx(SwapRouteCardSkeleton, { minWidth: "80%", dense: true }), _jsx(SwapRouteCardSkeleton, { minWidth: "80%", dense: true })] })) : !currentRoute ? (_jsx(SwapRouteNotFoundCard, { minWidth: "100%", dense: true })) : (_jsxs(_Fragment, { children: [_jsx(SwapRouteCard, { minWidth: routes.length > 1 ? '80%' : '100%', route: currentRoute, active: true, dense: true }), routes.length > 1 ? (_jsx(SwapRouteCard, { minWidth: "80%", route: routes[1], dense: true })) : null] })) })), _jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: !routeNotFound ? (_jsx(Box, Object.assign({ py: 1, pr: 1 }, { children: _jsx(IconButton, Object.assign({ onClick: handleCardClick, size: "medium", "aria-label": "swap-routes", disabled: isValidating || !isValid }, { children: _jsx(KeyboardArrowRightIcon, {}) })) }))) : null }))] }))] })), _jsx(GasSufficiencyMessage, Object.assign({ route: !isFetching ? currentRoute : undefined }, props)), _jsx(SendToWallet, { mx: 3, mb: 3 })] }));
 };

package/pages/SelectChainPage/SelectChainPage.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { SwapFormTypeProps } from '../../providers';
+export declare const SelectChainPage: React.FC<Partial<SwapFormTypeProps>>;