@lifi/widget 1.14.1 → 1.16.0

package/cjs/hooks/useSwapRoutes.js

@@ -13,6 +13,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSwapRoutes = void 0;
+const address_1 = require("@ethersproject/address");
 const react_query_1 = require("@tanstack/react-query");
 const big_js_1 = __importDefault(require("big.js"));
 const react_hook_form_1 = require("react-hook-form");
@@ -24,7 +25,7 @@ const stores_1 = require("../stores");
 const refetchTime = 60000;
 const useSwapRoutes = () => {
     var _a;
-    const { account } = (0, WalletProvider_1.useWallet)();
+    const { account, provider } = (0, WalletProvider_1.useWallet)();
     const queryClient = (0, react_query_1.useQueryClient)();
     const { slippage, enabledBridges, enabledExchanges, routePriority } = (0, stores_1.useSettings)([
         'slippage',
@@ -32,12 +33,13 @@ const useSwapRoutes = () => {
         'enabledBridges',
         'enabledExchanges',
     ]);
-    const [fromChainId, fromTokenAddress, toChainId, toTokenAddress] = (0, react_hook_form_1.useWatch)({
+    const [fromChainId, fromTokenAddress, toChainId, toTokenAddress, toAddress] = (0, react_hook_form_1.useWatch)({
         name: [
             SwapFormProvider_1.SwapFormKey.FromChain,
             SwapFormProvider_1.SwapFormKey.FromToken,
             SwapFormProvider_1.SwapFormKey.ToChain,
             SwapFormProvider_1.SwapFormKey.ToToken,
+            SwapFormProvider_1.SwapFormKey.ToAddress,
         ],
     });
     const [fromTokenAmount] = (0, _1.useDebouncedWatch)([SwapFormProvider_1.SwapFormKey.FromAmount], 250);
@@ -59,6 +61,7 @@ const useSwapRoutes = () => {
         fromTokenAmount,
         toChainId,
         toTokenAddress,
+        toAddress,
         slippage,
         enabledBridges,
         enabledExchanges,
@@ -68,16 +71,24 @@ const useSwapRoutes = () => {
     const refetchInterval = previousDataUpdatedAt
         ? Math.min(Math.abs(refetchTime - (Date.now() - previousDataUpdatedAt)), refetchTime)
         : refetchTime;
-    const { data, isLoading, isFetching, isFetched, dataUpdatedAt, refetch } = (0, react_query_1.useQuery)(queryKey, ({ queryKey: [_, address, fromChainId, fromTokenAddress, fromTokenAmount, toChainId, toTokenAddress, slippage, enabledBridges, enabledExchanges, routePriority,], signal, }) => __awaiter(void 0, void 0, void 0, function* () {
-        var _b;
+    const { data, isLoading, isFetching, isFetched, dataUpdatedAt, refetch } = (0, react_query_1.useQuery)(queryKey, ({ queryKey: [_, fromAddress, fromChainId, fromTokenAddress, fromTokenAmount, toChainId, toTokenAddress, toAddress, slippage, enabledBridges, enabledExchanges, routePriority,], signal, }) => __awaiter(void 0, void 0, void 0, function* () {
+        var _b, _c;
+        let toWalletAddress;
+        try {
+            toWalletAddress =
+                (_b = (yield (provider === null || provider === void 0 ? void 0 : provider.resolveName(toAddress)))) !== null && _b !== void 0 ? _b : ((0, address_1.isAddress)(toAddress) ? toAddress : fromAddress);
+        }
+        catch (_d) {
+            toWalletAddress = (0, address_1.isAddress)(toAddress) ? toAddress : fromAddress;
+        }
         return lifi_1.LiFi.getRoutes({
             fromChainId,
-            fromAmount: (0, big_js_1.default)(Number(fromTokenAmount) * Math.pow(10, ((_b = token === null || token === void 0 ? void 0 : token.decimals) !== null && _b !== void 0 ? _b : 0))).toString(),
+            fromAmount: (0, big_js_1.default)(Number(fromTokenAmount) * Math.pow(10, ((_c = token === null || token === void 0 ? void 0 : token.decimals) !== null && _c !== void 0 ? _c : 0))).toString(),
             fromTokenAddress,
             toChainId,
             toTokenAddress,
-            fromAddress: address,
-            toAddress: address,
+            fromAddress,
+            toAddress: toWalletAddress,
             options: {
                 slippage: slippage / 100,
                 bridges: {

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"
   },
@@ -52,24 +55,25 @@
     "selectChainAndToken": "Select chain and token",
     "featuredTokens": "Featured tokens",
     "otherTokens": "Other tokens",
-    "inProgress": "In progress",
+    "inProgress": "in progress",
     "couldntFindTokens": "We couldn't find tokens on this chain or you don't have any.",
     "stepSwap": "Swap",
     "stepBridge": "Bridge",
     "stepSwapAndBridge": "Swap and bridge",
     "estimatedTime": "~{{value}} min.",
-    "networkIsBusy": "Network is busy...",
     "crossStepDetails": "Bridge from {{from}} to {{to}} via {{tool}}",
     "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": {
-      "recommended": "Recommended",
-      "fastest": "Fast",
-      "cheapest": "Cheap",
-      "safest": "Safe",
-      "general": "General"
+      "RECOMMENDED": "RECOMMENDED",
+      "FASTEST": "FAST",
+      "CHEAPEST": "CHEAP",
+      "SAFEST": "SAFE",
+      "ALTERNATIVE": "ALTERNATIVE"
     },
     "success": {
       "title": {
@@ -82,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": {
@@ -103,16 +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."
+        "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."
@@ -125,7 +134,7 @@
         "done": "Token allowance approved."
       },
       "switchChain": {
-        "pending": "Chain switch required.",
+        "actionRequired": "Chain switch required.",
         "done": "Chain switched successfully."
       },
       "swap": {
@@ -156,6 +165,7 @@
       "fast": "Fast"
     },
     "advancedPreferences": "Advanced preferences",
+    "showDestinationWallet": "Show destination wallet",
     "enabledBridges": "Enabled bridges",
     "selectEnabledBridges": "Select enabled bridges",
     "enabledExchanges": "Enabled exchanges",

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;
             };
@@ -61,18 +64,19 @@ export declare const resources: {
                 stepBridge: string;
                 stepSwapAndBridge: string;
                 estimatedTime: string;
-                networkIsBusy: string;
                 crossStepDetails: string;
                 swapStepDetails: string;
                 tokenOnChain: string;
                 tokenOnChainAmount: string;
-                routeId: string;
+                supportId: string;
+                sendToWallet: string;
+                walletAddressOrEns: string;
                 tags: {
-                    recommended: string;
-                    fastest: string;
-                    cheapest: string;
-                    safest: string;
-                    general: string;
+                    RECOMMENDED: string;
+                    FASTEST: string;
+                    CHEAPEST: string;
+                    SAFEST: string;
+                    ALTERNATIVE: string;
                 };
                 success: {
                     title: {
@@ -86,10 +90,12 @@ export declare const resources: {
                     title: {
                         routeNotFound: string;
                         emptySwapHistory: string;
+                        emptyActiveSwaps: string;
                     };
                     message: {
                         routeNotFound: string;
                         emptySwapHistory: string;
+                        emptyActiveSwaps: string;
                     };
                 };
                 warning: {
@@ -106,16 +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;
@@ -128,7 +137,7 @@ export declare const resources: {
                         done: string;
                     };
                     switchChain: {
-                        pending: string;
+                        actionRequired: string;
                         done: string;
                     };
                     swap: {
@@ -159,6 +168,7 @@ export declare const resources: {
                     fast: string;
                 };
                 advancedPreferences: string;
+                showDestinationWallet: string;
                 enabledBridges: string;
                 selectEnabledBridges: string;
                 enabledExchanges: string;

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/pages/ActiveSwapsPage/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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("./ActiveSwapsPage"), exports);

package/cjs/pages/MainPage/MainPage.js

@@ -3,13 +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 SwapInProgress_1 = require("../../components/SwapInProgress");
 const SwapInput_1 = require("../../components/SwapInput");
 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)(SwapInProgress_1.SwapInProgress, { 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, {}) }))] })));
+    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';

package/cjs/pages/SelectChainPage/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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("./SelectChainPage"), exports);

package/cjs/pages/SelectTokenPage/SearchTokenInput.js

@@ -8,14 +8,14 @@ const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const react_i18next_1 = require("react-i18next");
 const Card_1 = require("../../components/Card");
-const SwapFormProvider_1 = require("../../providers/SwapFormProvider");
+const providers_1 = require("../../providers");
 const SearchTokenInput_style_1 = require("./SearchTokenInput.style");
 const SearchTokenInput = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { register, setValue } = (0, react_hook_form_1.useFormContext)();
     (0, react_1.useEffect)(() => () => {
-        setValue(SwapFormProvider_1.SwapFormKey.TokenSearchFilter, '');
+        setValue(providers_1.SwapFormKey.TokenSearchFilter, '');
     }, [setValue]);
-    return ((0, jsx_runtime_1.jsx)(Card_1.Card, { children: (0, jsx_runtime_1.jsx)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(SearchTokenInput_style_1.Input, { size: "small", placeholder: t(`swap.tokenSearch`), defaultValue: "", endAdornment: (0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.Search, {}) })), inputProps: Object.assign({ inputMode: 'search' }, register(SwapFormProvider_1.SwapFormKey.TokenSearchFilter)), autoComplete: "off" }) })) }));
+    return ((0, jsx_runtime_1.jsx)(Card_1.Card, { children: (0, jsx_runtime_1.jsx)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(SearchTokenInput_style_1.Input, { size: "small", placeholder: t(`swap.tokenSearch`), defaultValue: "", endAdornment: (0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.Search, {}) })), inputProps: Object.assign({ inputMode: 'search' }, register(providers_1.SwapFormKey.TokenSearchFilter)), autoComplete: "off" }) })) }));
 };
 exports.SearchTokenInput = SearchTokenInput;

package/cjs/pages/SelectTokenPage/SelectTokenPage.d.ts

@@ -1,5 +1,3 @@
 import type { FC } from 'react';
-import type { SwapFormDirection } from '../../providers/SwapFormProvider';
-export declare const SelectTokenPage: FC<{
-    formType: SwapFormDirection;
-}>;
+import type { SwapFormTypeProps } from '../../providers';
+export declare const SelectTokenPage: FC<SwapFormTypeProps>;