@lifi/widget 1.15.1 → 1.16.0

package/cjs/{components/Step/utils.js → hooks/useProcessMessage.js}

@@ -1,13 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getProcessMessage = void 0;
+exports.getProcessMessage = exports.useProcessMessage = void 0;
 const sdk_1 = require("@lifi/sdk");
-const utils_1 = require("../../utils");
-const formatProcessMessage = (initialMessage, args = {}) => {
-    return Object.keys(args).reduce((message, key) => {
-        return message.replace(`{${key}}`, args[key]);
-    }, initialMessage);
+const react_i18next_1 = require("react-i18next");
+const utils_1 = require("../utils");
+const useChains_1 = require("./useChains");
+const useProcessMessage = (step, process) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { getChainById } = (0, useChains_1.useChains)();
+    if (!step || !process) {
+        return {};
+    }
+    return getProcessMessage(t, getChainById, step, process);
 };
+exports.useProcessMessage = useProcessMessage;
 const processMessages = {
     TOKEN_ALLOWANCE: {
         STARTED: (t) => t(`swap.process.tokenAllowance.started`),
@@ -15,7 +21,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: {
@@ -70,9 +76,9 @@ function getProcessMessage(t, getChainById, step, process) {
                 title = t(`swap.error.title.slippageTooLarge`);
                 message = t(`swap.error.message.slippageTooLarge`);
                 break;
-            case sdk_1.MetaMaskProviderErrorCode.userRejectedRequest:
-                title = t(`swap.error.title.userRejectedSignatureRequest`);
-                message = t(`swap.error.message.signatureRequired`, {
+            case sdk_1.LifiErrorCode.TransactionRejected:
+                title = t(`swap.error.title.transactionRejected`);
+                message = t(`swap.error.message.transactionRejected`, {
                     amount: (0, utils_1.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/cjs/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/cjs/hooks/useRouteExecution.js

@@ -19,16 +19,25 @@ const shallow_1 = __importDefault(require("zustand/shallow"));
 const lifi_1 = require("../config/lifi");
 const WalletProvider_1 = require("../providers/WalletProvider");
 const stores_1 = require("../stores");
+const events_1 = require("../types/events");
 const utils_1 = require("../utils");
-const useRouteExecution = (routeId) => {
+const useWidgetEvents_1 = require("./useWidgetEvents");
+const useRouteExecution = (routeId, executeInBackground) => {
     const { account, switchChain } = (0, WalletProvider_1.useWallet)();
     const resumedAfterMount = (0, react_1.useRef)(false);
+    const emitter = (0, useWidgetEvents_1.useWidgetEvents)();
     const routeExecution = (0, stores_1.useRouteStore)((state) => state.routes[routeId]);
     const [updateRoute, restartRoute, deleteRoute] = (0, stores_1.useRouteStore)((state) => [state.updateRoute, state.restartRoute, state.deleteRoute], shallow_1.default);
     const updateCallback = (updatedRoute) => {
         const clonedUpdatedRoute = (0, utils_1.deepClone)(updatedRoute);
         console.log('Route updated.', clonedUpdatedRoute);
         updateRoute(clonedUpdatedRoute);
+        if ((0, stores_1.isRouteCompleted)(clonedUpdatedRoute)) {
+            emitter.emit(events_1.WidgetEvent.SwapCompleted);
+        }
+        if ((0, stores_1.isRouteFailed)(clonedUpdatedRoute)) {
+            emitter.emit(events_1.WidgetEvent.SwapFailed);
+        }
     };
     const switchChainHook = (requiredChainId) => __awaiter(void 0, void 0, void 0, function* () {
         if (!account.isActive || !account.signer) {
@@ -54,16 +63,12 @@ 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(events_1.WidgetEvent.SwapStarted);
         },
     });
     const resumeRouteMutation = (0, react_query_1.useMutation)((resumedRoute) => {
@@ -77,26 +82,21 @@ 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 = (0, react_1.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);
             },
         });
@@ -104,10 +104,10 @@ const useRouteExecution = (routeId) => {
     const resumeRoute = (0, react_1.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]);
@@ -123,7 +123,7 @@ const useRouteExecution = (routeId) => {
     // Resume route execution after page reload
     (0, react_1.useEffect)(() => {
         // Check if route is eligible for automatic resuming
-        if (isActiveRoute(routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route) &&
+        if ((0, stores_1.isRouteActive)(routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route) &&
             account.isActive &&
             !resumedAfterMount.current) {
             resumedAfterMount.current = true;
@@ -135,10 +135,10 @@ const useRouteExecution = (routeId) => {
         return () => {
             var _a;
             const route = (_a = stores_1.useRouteStore.getState().routes[routeId]) === null || _a === void 0 ? void 0 : _a.route;
-            if (!route || !isActiveRoute(route)) {
+            if (!route || !(0, stores_1.isRouteActive)(route)) {
                 return;
             }
-            lifi_1.LiFi.moveExecutionToBackground(route);
+            lifi_1.LiFi.updateRouteExecution(route, { executeInBackground: true });
             console.log('Move route execution to background.', routeId);
             resumedAfterMount.current = false;
         };
@@ -152,12 +152,3 @@ const useRouteExecution = (routeId) => {
     };
 };
 exports.useRouteExecution = useRouteExecution;
-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/cjs/hooks/useWidgetEvents.d.ts

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

package/cjs/hooks/useWidgetEvents.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useWidgetEvents = void 0;
+const events_1 = require("events");
+const zustand_1 = __importDefault(require("zustand"));
+const emitterStore = (0, zustand_1.default)()(() => new events_1.EventEmitter());
+const useWidgetEvents = () => {
+    return emitterStore();
+};
+exports.useWidgetEvents = useWidgetEvents;

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

@@ -14,11 +14,13 @@ 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 });
-exports.LiFiWidgetDrawer = exports.LiFiWidget = void 0;
+exports.LiFiWidgetDrawer = exports.LiFiWidget = exports.useWidgetEvents = void 0;
 const App_1 = require("./App");
 const AppDrawer_1 = require("./AppDrawer");
 require("./fonts/inter.css");
 const i18n_1 = require("./i18n");
+var hooks_1 = require("./hooks");
+Object.defineProperty(exports, "useWidgetEvents", { enumerable: true, get: function () { return hooks_1.useWidgetEvents; } });
 __exportStar(require("./types"), exports);
 (0, i18n_1.configureReactI18next)();
 // ClassNameGenerator.configure((componentName) =>

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

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

package/cjs/pages/ActiveSwapsPage/ActiveSwapsEmpty.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActiveSwapsEmpty = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_material_1 = require("@mui/icons-material");
+const material_1 = require("@mui/material");
+const react_i18next_1 = require("react-i18next");
+const ActiveSwapsEmpty = () => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    return ((0, jsx_runtime_1.jsxs)(material_1.Container, Object.assign({ sx: {
+            display: 'flex',
+            flex: 1,
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+        } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 48 }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.SwapHoriz, { fontSize: "inherit" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 18, fontWeight: 700 }, { children: t('swap.info.title.emptyActiveSwaps') })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2 }, { children: t('swap.info.message.emptyActiveSwaps') }))] })));
+};
+exports.ActiveSwapsEmpty = ActiveSwapsEmpty;

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

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

package/cjs/pages/ActiveSwapsPage/ActiveSwapsPage.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActiveSwapsPage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const ActiveSwaps_1 = require("../../components/ActiveSwaps");
+const providers_1 = require("../../providers");
+const stores_1 = require("../../stores");
+const ActiveSwapsEmpty_1 = require("./ActiveSwapsEmpty");
+const ActiveSwapsPage = () => {
+    const { account } = (0, providers_1.useWallet)();
+    const executingRoutes = (0, stores_1.useExecutingRoutesIds)(account.address);
+    if (!executingRoutes.length) {
+        return (0, jsx_runtime_1.jsx)(ActiveSwapsEmpty_1.ActiveSwapsEmpty, {});
+    }
+    return ((0, jsx_runtime_1.jsx)(material_1.Container, Object.assign({ disableGutters: true }, { children: (0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ sx: {
+                paddingLeft: 1.5,
+                paddingRight: 1.5,
+            } }, { children: executingRoutes.map((routeId) => ((0, jsx_runtime_1.jsx)(ActiveSwaps_1.ActiveSwapItem, { routeId: routeId }, routeId))) })) })));
+};
+exports.ActiveSwapsPage = ActiveSwapsPage;

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

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

package/cjs/{components/SwapsInProgress → pages/ActiveSwapsPage}/index.js

@@ -14,4 +14,4 @@ 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("./SwapsInProgress"), exports);
+__exportStar(require("./ActiveSwapsPage"), exports);

package/cjs/pages/MainPage/MainPage.js

@@ -3,14 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MainPage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
+const ActiveSwaps_1 = require("../../components/ActiveSwaps");
 const SelectChainAndToken_1 = require("../../components/SelectChainAndToken");
-const SendToWallet_1 = require("../../components/SendToWallet");
 const SwapInput_1 = require("../../components/SwapInput");
-const SwapsInProgress_1 = require("../../components/SwapsInProgress");
 const MainPage_style_1 = require("./MainPage.style");
 const MainSwapButton_1 = require("./MainSwapButton");
 const SwapRoutes_1 = require("./SwapRoutes");
 const MainPage = () => {
-    return ((0, jsx_runtime_1.jsxs)(MainPage_style_1.FormContainer, Object.assign({ disableGutters: true }, { children: [(0, jsx_runtime_1.jsx)(SwapsInProgress_1.SwapsInProgress, { mx: 3, mt: 1, mb: 2 }), (0, jsx_runtime_1.jsx)(SelectChainAndToken_1.SelectChainAndToken, { mt: 1, mx: 3, mb: 3 }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mx: 3, mb: 3 }, { children: (0, jsx_runtime_1.jsx)(SwapInput_1.SwapInput, { formType: "from" }) })), (0, jsx_runtime_1.jsx)(SendToWallet_1.SendToWallet, { mx: 3, mb: 3 }), (0, jsx_runtime_1.jsx)(SwapRoutes_1.SwapRoutes, { mx: 3, mb: 3 }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mx: 3, mb: 1 }, { children: (0, jsx_runtime_1.jsx)(MainSwapButton_1.MainSwapButton, {}) }))] })));
+    return ((0, jsx_runtime_1.jsxs)(MainPage_style_1.FormContainer, Object.assign({ disableGutters: true }, { children: [(0, jsx_runtime_1.jsx)(ActiveSwaps_1.ActiveSwaps, { mx: 3, mt: 1, mb: 2 }), (0, jsx_runtime_1.jsx)(SelectChainAndToken_1.SelectChainAndToken, { mt: 1, mx: 3, mb: 3 }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mx: 3, mb: 3 }, { children: (0, jsx_runtime_1.jsx)(SwapInput_1.SwapInput, { formType: "from" }) })), (0, jsx_runtime_1.jsx)(SwapRoutes_1.SwapRoutes, { mx: 3, mb: 3 }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mx: 3, mb: 1 }, { children: (0, jsx_runtime_1.jsx)(MainSwapButton_1.MainSwapButton, {}) }))] })));
 };
 exports.MainPage = MainPage;

package/cjs/pages/MainPage/MainSwapButton.js

@@ -11,6 +11,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MainSwapButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_hook_form_1 = require("react-hook-form");
 const react_router_dom_1 = require("react-router-dom");
 const SwapButton_1 = require("../../components/SwapButton");
 const hooks_1 = require("../../hooks");
@@ -18,6 +19,7 @@ const stores_1 = require("../../stores");
 const utils_1 = require("../../utils");
 const MainSwapButton = () => {
     const navigate = (0, react_router_dom_1.useNavigate)();
+    const { isValid, isValidating } = (0, react_hook_form_1.useFormState)();
     const setExecutableRoute = (0, stores_1.useSetExecutableRoute)();
     const { routes: swapRoutes, isLoading, isFetching } = (0, hooks_1.useSwapRoutes)();
     const currentRoute = swapRoutes === null || swapRoutes === void 0 ? void 0 : swapRoutes[0];
@@ -29,6 +31,6 @@ const MainSwapButton = () => {
             });
         }
     });
-    return ((0, jsx_runtime_1.jsx)(SwapButton_1.SwapButton, { onClick: handleClick, currentRoute: currentRoute, loading: isLoading || isFetching || !currentRoute }));
+    return ((0, jsx_runtime_1.jsx)(SwapButton_1.SwapButton, { onClick: handleClick, currentRoute: currentRoute, disable: isLoading || isFetching || !currentRoute || isValidating || !isValid }));
 };
 exports.MainSwapButton = MainSwapButton;

package/cjs/pages/MainPage/SwapRoutes.js

@@ -6,11 +6,13 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const icons_material_1 = require("@mui/icons-material");
 const material_1 = require("@mui/material");
 const react_1 = require("react");
+const react_hook_form_1 = require("react-hook-form");
 const react_i18next_1 = require("react-i18next");
 const react_router_dom_1 = require("react-router-dom");
 const Card_1 = require("../../components/Card");
 const GasSufficiencyMessage_1 = require("../../components/GasSufficiencyMessage");
 const ProgressToNextUpdate_1 = require("../../components/ProgressToNextUpdate");
+const SendToWallet_1 = require("../../components/SendToWallet");
 const SwapRouteCard_1 = require("../../components/SwapRouteCard");
 const hooks_1 = require("../../hooks");
 const utils_1 = require("../../utils");
@@ -18,6 +20,7 @@ const SwapRoutes_style_1 = require("./SwapRoutes.style");
 const SwapRoutes = (props) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const navigate = (0, react_router_dom_1.useNavigate)();
+    const { isValid, isValidating } = (0, react_hook_form_1.useFormState)();
     const { routes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch, } = (0, hooks_1.useSwapRoutes)();
     const handleCardClick = (0, react_1.useCallback)(() => {
         navigate(utils_1.navigationRoutes.swapRoutes);
@@ -35,6 +38,6 @@ const SwapRoutes = (props) => {
                                     borderWidth: !routeNotFound && (isFetching || (routes && routes.length > 1))
                                         ? 1
                                         : 0,
-                                } }, { children: isLoading || isFetching ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, { minWidth: "80%", dense: true }), (0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, { minWidth: "80%", dense: true })] })) : !currentRoute ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteNotFoundCard, { minWidth: "100%", dense: true })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { minWidth: routes.length > 1 ? '80%' : '100%', route: currentRoute, active: true, dense: true }), routes.length > 1 ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { minWidth: "80%", route: routes[1], dense: true })) : null] })) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: !routeNotFound ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ py: 1, pr: 1 }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleCardClick, size: "medium", "aria-label": "swap-routes" }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.KeyboardArrowRight, {}) })) }))) : null }))] }))] })), (0, jsx_runtime_1.jsx)(GasSufficiencyMessage_1.GasSufficiencyMessage, Object.assign({ route: !isFetching ? currentRoute : undefined }, props))] }));
+                                } }, { children: isLoading || isFetching ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, { minWidth: "80%", dense: true }), (0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, { minWidth: "80%", dense: true })] })) : !currentRoute ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteNotFoundCard, { minWidth: "100%", dense: true })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { minWidth: routes.length > 1 ? '80%' : '100%', route: currentRoute, active: true, dense: true }), routes.length > 1 ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { minWidth: "80%", route: routes[1], dense: true })) : null] })) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: !routeNotFound ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ py: 1, pr: 1 }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleCardClick, size: "medium", "aria-label": "swap-routes", disabled: isValidating || !isValid }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.KeyboardArrowRight, {}) })) }))) : null }))] }))] })), (0, jsx_runtime_1.jsx)(GasSufficiencyMessage_1.GasSufficiencyMessage, Object.assign({ route: !isFetching ? currentRoute : undefined }, props)), (0, jsx_runtime_1.jsx)(SendToWallet_1.SendToWallet, { mx: 3, mb: 3 })] }));
 };
 exports.SwapRoutes = SwapRoutes;

package/cjs/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>>;

package/cjs/pages/SelectChainPage/SelectChainPage.js

@@ -0,0 +1,33 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectChainPage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_router_dom_1 = require("react-router-dom");
+const ChainSelect_1 = require("../../components/ChainSelect");
+const hooks_1 = require("../../hooks");
+const SelectChainPage_style_1 = require("./SelectChainPage.style");
+const SelectChainPage = ({ formType, }) => {
+    const { navigateBack } = (0, hooks_1.useNavigateBack)();
+    const { state } = (0, react_router_dom_1.useLocation)();
+    const formTypeState = (state === null || state === void 0 ? void 0 : state.formType) || formType;
+    const { chains, setCurrentChain } = (0, ChainSelect_1.useChainSelect)(formTypeState);
+    const handleClick = (chainId) => __awaiter(void 0, void 0, void 0, function* () {
+        setCurrentChain(chainId);
+        navigateBack();
+    });
+    return ((0, jsx_runtime_1.jsx)(material_1.Container, Object.assign({ disableGutters: true }, { children: (0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ sx: {
+                paddingLeft: 1.5,
+                paddingRight: 1.5,
+            } }, { children: chains === null || chains === void 0 ? void 0 : chains.map((chain) => ((0, jsx_runtime_1.jsxs)(SelectChainPage_style_1.ListItemButton, Object.assign({ onClick: () => handleClick(chain.id), disableRipple: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, Object.assign({ src: chain.logoURI, alt: chain.name }, { children: chain.name[0] })) }), (0, jsx_runtime_1.jsx)(SelectChainPage_style_1.ListItemText, { primary: chain.name })] }), chain.id))) })) })));
+};
+exports.SelectChainPage = SelectChainPage;

package/cjs/pages/SelectChainPage/SelectChainPage.style.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+export declare const ListItemButton: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    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>> & {
+    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 ListItemText: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemTextProps<import("react").ElementType<any>, import("react").ElementType<any>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/cjs/pages/SelectChainPage/SelectChainPage.style.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListItemText = exports.ListItemButton = void 0;
+const material_1 = require("@mui/material");
+const ListItemText_1 = require("@mui/material/ListItemText");
+const styles_1 = require("@mui/material/styles");
+const utils_1 = require("../../utils");
+exports.ListItemButton = (0, styles_1.styled)(material_1.ListItemButton)(({ theme }) => ({
+    borderRadius: theme.shape.borderRadiusSecondary,
+    paddingLeft: theme.spacing(1.5),
+    height: 56,
+    '&:hover': {
+        backgroundColor: (0, utils_1.getContrastAlphaColor)(theme, '4%'),
+    },
+}));
+exports.ListItemText = (0, styles_1.styled)(material_1.ListItemText)(({ theme }) => ({
+    [`.${ListItemText_1.listItemTextClasses.primary}`]: {
+        fontWeight: 400,
+    },
+}));

package/cjs/pages/SelectChainPage/index.d.ts

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