@lifi/widget 2.0.0-beta.13 → 2.0.0-beta.15

package/cjs/i18n/zh.json

@@ -77,38 +77,87 @@
     "showDestinationWallet": "显示收款钱包",
     "slippage": "滑点"
   },
-  "swap": {
+  "info": {
+    "message": {
+      "autoRefuel": "您在 {{chainName}} 链上的燃气费很低。如果启用该选项，您将获得足够的燃气费完成此次兑换。",
+      "emptyActiveSwaps": "正在进行的兑换将在这里显示。一旦完成，你可在兑换记录中找到它们。",
+      "emptySwapHistory": "兑换记录只存储在本地，如果你清除浏览器数据，他们将被删除。",
+      "emptyTokenList": "我们无法在 {{chainName}} 链上找到这些代币，或者你的钱包内没有这些代币。请再次搜索或者选择其他链再试一次。",
+      "routeNotFound": "试试另一个代币组合。"
+    },
+    "title": {
+      "autoRefuel": "获得燃气费",
+      "emptyActiveSwaps": "没有正在进行的兑换",
+      "emptySwapHistory": "没有兑换记录",
+      "routeNotFound": "没有可用的路由"
+    }
+  },
+  "success": {
+    "message": {
+      "swapPartiallySuccessful": "我们试图完成兑换，但 {{tool}} 的 {{tokenSymbol}} 代币流动性不足。",
+      "purchaseSuccessful": "您的 {{walletAddress}} 钱包在 {{chainName}} 链上拥有该 {{assetName}} 财产",
+      "swapSuccessful": "现在有 {{amount, number(maximumFractionDigits: 9)}} 个{{tokenSymbol}} 在{{chainName}} 链上的{{walletAddress}} 钱包里。"
+    },
+    "title": {
+      "gasSwapSuccessful": "燃气费兑换成功",
+      "purchaseSuccessful": "购买成功",
+      "refundIssued": "退款已受理",
+      "swapPartiallySuccessful": "兑换部分完成",
+      "swapSuccessful": "兑换成功"
+    }
+  },
+  "warning": {
+    "message": {
+      "deleteActiveSwaps": "正在进行的兑换记录只存储在本地，如果删除它们，我们将无法恢复这些记录。",
+      "deleteSwapHistory": "兑换记录只存储在本地，如果你删除它，我们将无法恢复这些记录。",
+      "highValueLoss": "收到的代币的价值明显低于要被兑换的代币和交易成本。",
+      "insufficientFunds": "你没有足够的资金来完成这笔交易。",
+      "insufficientGas": "您没有足够的燃气费来完成此次交易。您至少需要添加：",
+      "rateChanged": "兑换比例已经改变，如果继续兑换，您将接受新的兑换比例。",
+      "resetSettings": "这将重置您的路由优先级，滑点，燃气费，选中的跨链桥和链上交易所。"
+    },
+    "title": {
+      "deleteActiveSwaps": "确定要清空正在进行的兑换记录？",
+      "deleteSwap": "确定要删除这个兑换记录？",
+      "deleteSwapHistory": "确定要清空兑换记录？",
+      "highValueLoss": "大额资金损失",
+      "insufficientGas": "燃气费不足",
+      "rateChanged": "兑换比例变动",
+      "resetSettings": "确定要恢复默认设置吗?"
+    }
+  },
+  "error": {
+    "message": {
+      "allowanceRequired": "{{tokenSymbol}} 的转账金额超过了您设置的支出上限。请提高该代币的支出上限，然后重试。",
+      "insufficientFunds": "您没有足够的燃气费支付该交易。",
+      "slippageThreshold": "滑点大于预设值，请选择其他路由并获取新的价格。",
+      "transactionFailed": "请查看区块浏览器以了解更多信息。",
+      "transactionNotSent": "交易未发送，不用担心，{{chainName}} 链上{{amount, number(maximumFractionDigits: 9)}} 个{{tokenSymbol}} 仍在您的钱包里。",
+      "transactionRejected": "需要您签名来完成此次交易，资金是安全的，{{chainName}} 链上{{amount, number(maximumFractionDigits: 9)}} 个{{tokenSymbol}} 仍在您的钱包里。",
+      "unknown": "请再试一次或者联系支持。"
+    },
+    "title": {
+      "allowanceRequired": "余额不足",
+      "balanceIsTooLow": "余额太低",
+      "chainSwitch": "请切换当前网络",
+      "failed": "兑换失败",
+      "gasLimitIsTooLow": "燃气费设置过低",
+      "insufficientFunds": "资金不足",
+      "slippageNotMet": "滑点未满足",
+      "transactionCanceled": "交易取消",
+      "transactionFailed": "交易失败",
+      "transactionRejected": "交易需要签名",
+      "transactionUnderpriced": "交易定价过低",
+      "transactionUnprepared": "无法开始该交易",
+      "unknown": "未知错误",
+      "walletAddressInvalid": "钱包地址无效。",
+      "walletAddressRequired": "请输入钱包地址。",
+      "walletEnsAddressInvalid": "钱包地址无效或者当前网络不支持ENS。"
+    }
+  },
+  "main": {
     "crossStepDetails": "通过{{tool}}把资产从{{from}}链跨到{{to}}链上",
     "currentAmount": "当前余额",
-    "error": {
-      "message": {
-        "allowanceRequired": "{{tokenSymbol}} 的转账金额超过了您设置的支出上限。请提高该代币的支出上限，然后重试。",
-        "insufficientFunds": "您没有足够的燃气费支付该交易。",
-        "slippageThreshold": "滑点大于预设值，请选择其他路由并获取新的价格。",
-        "transactionFailed": "请查看区块浏览器以了解更多信息。",
-        "transactionNotSent": "交易未发送，不用担心，{{chainName}} 链上{{amount, number(maximumFractionDigits: 9)}} 个{{tokenSymbol}} 仍在您的钱包里。",
-        "transactionRejected": "需要您签名来完成此次交易，资金是安全的，{{chainName}} 链上{{amount, number(maximumFractionDigits: 9)}} 个{{tokenSymbol}} 仍在您的钱包里。",
-        "unknown": "请再试一次或者联系支持。"
-      },
-      "title": {
-        "allowanceRequired": "余额不足",
-        "balanceIsTooLow": "余额太低",
-        "chainSwitch": "请切换当前网络",
-        "failed": "兑换失败",
-        "gasLimitIsTooLow": "燃气费设置过低",
-        "insufficientFunds": "资金不足",
-        "slippageNotMet": "滑点未满足",
-        "transactionCanceled": "交易取消",
-        "transactionFailed": "交易失败",
-        "transactionRejected": "交易需要签名",
-        "transactionUnderpriced": "交易定价过低",
-        "transactionUnprepared": "无法开始该交易",
-        "unknown": "未知错误",
-        "walletAddressInvalid": "钱包地址无效。",
-        "walletAddressRequired": "请输入钱包地址。",
-        "walletEnsAddressInvalid": "钱包地址无效或者当前网络不支持ENS。"
-      }
-    },
     "estimatedTime": "{{value}}分钟",
     "featuredTokens": "精选代币",
     "from": "从",
@@ -117,27 +166,6 @@
     "gasFeeEstimated": "预估燃气费",
     "gasFeePaid": "已支付燃气费",
     "inProgress": "进行中",
-    "insurance": {
-      "bridgeExploits": "跨链桥故障、被黑或者被利用漏洞",
-      "insure": "在跨链期间为<strong>{{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}}</strong> 投保。",
-      "insured": "在跨链期间为<strong>{{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}}</strong> 投保。",
-      "slippageError": "目标链代币的滑点错误"
-    },
-    "info": {
-      "message": {
-        "autoRefuel": "您在 {{chainName}} 链上的燃气费很低。如果启用该选项，您将获得足够的燃气费完成此次兑换。",
-        "emptyActiveSwaps": "正在进行的兑换将在这里显示。一旦完成，你可在兑换记录中找到它们。",
-        "emptySwapHistory": "兑换记录只存储在本地，如果你清除浏览器数据，他们将被删除。",
-        "emptyTokenList": "我们无法在 {{chainName}} 链上找到这些代币，或者你的钱包内没有这些代币。请再次搜索或者选择其他链再试一次。",
-        "routeNotFound": "试试另一个代币组合。"
-      },
-      "title": {
-        "autoRefuel": "获得燃气费",
-        "emptyActiveSwaps": "没有正在进行的兑换",
-        "emptySwapHistory": "没有兑换记录",
-        "routeNotFound": "没有可用的路由"
-      }
-    },
     "nftStepDetails": "通过 {{tool}} 购买 NFT",
     "onChain": "在{{chainName}} 上",
     "otherTokens": "其他代币",
@@ -190,20 +218,6 @@
     "stepSwap": "兑换",
     "stepSwapAndBridge": "兑换和跨链",
     "stepSwapAndBuy": "兑换并购买",
-    "success": {
-      "message": {
-        "swapPartiallySuccessful": "我们试图完成兑换，但 {{tool}} 的 {{tokenSymbol}} 代币流动性不足。",
-        "purchaseSuccessful": "您的 {{walletAddress}} 钱包在 {{chainName}} 链上拥有该 {{assetName}} 财产",
-        "swapSuccessful": "现在有 {{amount, number(maximumFractionDigits: 9)}} 个{{tokenSymbol}} 在{{chainName}} 链上的{{walletAddress}} 钱包里。"
-      },
-      "title": {
-        "gasSwapSuccessful": "燃气费兑换成功",
-        "purchaseSuccessful": "购买成功",
-        "refundIssued": "退款已受理",
-        "swapPartiallySuccessful": "兑换部分完成",
-        "swapSuccessful": "兑换成功"
-      }
-    },
     "supportId": "支持ID",
     "swapStepDetails": "通过{{tool}}在{{chain}}链上兑换代币",
     "swapping": "兑换中",
@@ -221,27 +235,13 @@
     "tokenOnChainAmount": "{{chainName}} 链上{{amount, number(maximumFractionDigits: 9)}} 个{{tokenSymbol}}",
     "tokenSearch": "按代币名称或者地址搜索",
     "valueLoss": "资金损失",
-    "walletAddressOrEns": "钱包地址或ENS名称",
-    "warning": {
-      "message": {
-        "deleteActiveSwaps": "正在进行的兑换记录只存储在本地，如果删除它们，我们将无法恢复这些记录。",
-        "deleteSwapHistory": "兑换记录只存储在本地，如果你删除它，我们将无法恢复这些记录。",
-        "highValueLoss": "收到的代币的价值明显低于要被兑换的代币和交易成本。",
-        "insufficientFunds": "你没有足够的资金来完成这笔交易。",
-        "insufficientGas": "您没有足够的燃气费来完成此次交易。您至少需要添加：",
-        "rateChanged": "兑换比例已经改变，如果继续兑换，您将接受新的兑换比例。",
-        "resetSettings": "这将重置您的路由优先级，滑点，燃气费，选中的跨链桥和链上交易所。"
-      },
-      "title": {
-        "deleteActiveSwaps": "确定要清空正在进行的兑换记录？",
-        "deleteSwap": "确定要删除这个兑换记录？",
-        "deleteSwapHistory": "确定要清空兑换记录？",
-        "highValueLoss": "大额资金损失",
-        "insufficientGas": "燃气费不足",
-        "rateChanged": "兑换比例变动",
-        "resetSettings": "确定要恢复默认设置吗?"
-      }
-    }
+    "walletAddressOrEns": "钱包地址或ENS名称"
+  },
+  "insurance": {
+    "bridgeExploits": "跨链桥故障、被黑或者被利用漏洞",
+    "insure": "在跨链期间为<0>{{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}}</0> 投保。",
+    "insured": "在跨链期间为<0>{{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}}</0> 投保。",
+    "slippageError": "目标链代币的滑点错误"
   },
   "tooltip": {
     "additionalProviderFee": "跨链和交易所的手续费。",

package/cjs/index.d.ts

@@ -1,9 +1,11 @@
 /// <reference types="react" />
 import './fonts/inter.css';
+export { useFormContext, useWatch } from 'react-hook-form';
 export type { WidgetDrawer } from './AppDrawer';
 export * from './components/NFT';
 export * from './config/version';
 export { useWidgetEvents, widgetEvents } from './hooks';
+export * from './providers/FormProvider/types';
 export { useWallet } from './providers/WalletProvider';
 export * from './types';
 export declare const LiFiWidget: import("react").ForwardRefExoticComponent<import("./types").WidgetDrawerProps & import("./types").WidgetConfig & import("./types").WidgetConfigPartialProps & import("react").RefAttributes<import("./AppDrawer").WidgetDrawer>>;

package/cjs/index.js

@@ -14,15 +14,19 @@ 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.LiFiWidget = exports.useWallet = exports.widgetEvents = exports.useWidgetEvents = void 0;
+exports.LiFiWidget = exports.useWallet = exports.widgetEvents = exports.useWidgetEvents = exports.useWatch = exports.useFormContext = void 0;
 const App_1 = require("./App");
 // TODO: remove or make optional
 require("./fonts/inter.css");
+var react_hook_form_1 = require("react-hook-form");
+Object.defineProperty(exports, "useFormContext", { enumerable: true, get: function () { return react_hook_form_1.useFormContext; } });
+Object.defineProperty(exports, "useWatch", { enumerable: true, get: function () { return react_hook_form_1.useWatch; } });
 __exportStar(require("./components/NFT"), exports);
 __exportStar(require("./config/version"), exports);
 var hooks_1 = require("./hooks");
 Object.defineProperty(exports, "useWidgetEvents", { enumerable: true, get: function () { return hooks_1.useWidgetEvents; } });
 Object.defineProperty(exports, "widgetEvents", { enumerable: true, get: function () { return hooks_1.widgetEvents; } });
+__exportStar(require("./providers/FormProvider/types"), exports);
 var WalletProvider_1 = require("./providers/WalletProvider");
 Object.defineProperty(exports, "useWallet", { enumerable: true, get: function () { return WalletProvider_1.useWallet; } });
 __exportStar(require("./types"), exports);

package/cjs/pages/ActiveTransactionsPage/ActiveTransactionsEmpty.d.ts

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

package/cjs/pages/{ActiveSwapsPage/ActiveSwapsEmpty.js → ActiveTransactionsPage/ActiveTransactionsEmpty.js}

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

package/cjs/pages/ActiveTransactionsPage/ActiveTransactionsPage.d.ts

@@ -0,0 +1 @@
+export declare const ActiveTransactionsPage: () => import("react/jsx-runtime").JSX.Element;

package/cjs/pages/{ActiveSwapsPage/ActiveSwapsPage.js → ActiveTransactionsPage/ActiveTransactionsPage.js}

@@ -1,18 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ActiveSwapsPage = void 0;
+exports.ActiveTransactionsPage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const DeleteOutline_1 = require("@mui/icons-material/DeleteOutline");
 const material_1 = require("@mui/material");
 const react_1 = require("react");
 const react_i18next_1 = require("react-i18next");
-const ActiveSwaps_1 = require("../../components/ActiveSwaps");
+const ActiveTransactions_1 = require("../../components/ActiveTransactions");
 const Dialog_1 = require("../../components/Dialog");
 const Header_1 = require("../../components/Header");
 const providers_1 = require("../../providers");
 const stores_1 = require("../../stores");
-const ActiveSwapsEmpty_1 = require("./ActiveSwapsEmpty");
-const ActiveSwapsPage = () => {
+const ActiveTransactionsEmpty_1 = require("./ActiveTransactionsEmpty");
+const ActiveTransactionsPage = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { account } = (0, providers_1.useWallet)();
     const executingRoutes = (0, stores_1.useExecutingRoutesIds)(account.address);
@@ -23,15 +23,15 @@ const ActiveSwapsPage = () => {
     }, []);
     (0, react_1.useEffect)(() => {
         if (executingRoutes.length) {
-            return Header_1.useHeaderActionStore.getState().setAction((0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "end", onClick: toggleDialog, children: (0, jsx_runtime_1.jsx)(DeleteOutline_1.default, {}) }));
+            return Header_1.useHeaderStore.getState().setAction((0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "end", onClick: toggleDialog, children: (0, jsx_runtime_1.jsx)(DeleteOutline_1.default, {}) }));
         }
     }, [executingRoutes.length, toggleDialog]);
     if (!executingRoutes.length) {
-        return (0, jsx_runtime_1.jsx)(ActiveSwapsEmpty_1.ActiveSwapsEmpty, {});
+        return (0, jsx_runtime_1.jsx)(ActiveTransactionsEmpty_1.ActiveTransactionsEmpty, {});
     }
     return ((0, jsx_runtime_1.jsxs)(material_1.Container, { disableGutters: true, children: [(0, jsx_runtime_1.jsx)(material_1.List, { sx: {
                     paddingLeft: 1.5,
                     paddingRight: 1.5,
-                }, children: executingRoutes.map((routeId) => ((0, jsx_runtime_1.jsx)(ActiveSwaps_1.ActiveSwapItem, { routeId: routeId }, routeId))) }), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { open: open, onClose: toggleDialog, children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: t('swap.warning.title.deleteActiveSwaps') }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: t('swap.warning.message.deleteActiveSwaps') }) }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { onClick: toggleDialog, children: t('button.cancel') }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: () => deleteRoutes('active'), autoFocus: true, children: t('button.delete') })] })] })] }));
+                }, children: executingRoutes.map((routeId) => ((0, jsx_runtime_1.jsx)(ActiveTransactions_1.ActiveTransactionItem, { routeId: routeId }, routeId))) }), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { open: open, onClose: toggleDialog, children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: t('warning.title.deleteActiveTransactions') }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: t('warning.message.deleteActiveTransactions') }) }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { onClick: toggleDialog, children: t('button.cancel') }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: () => deleteRoutes('active'), autoFocus: true, children: t('button.delete') })] })] })] }));
 };
-exports.ActiveSwapsPage = ActiveSwapsPage;
+exports.ActiveTransactionsPage = ActiveTransactionsPage;

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

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

package/cjs/pages/{ActiveSwapsPage → ActiveTransactionsPage}/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("./ActiveSwapsPage"), exports);
+__exportStar(require("./ActiveTransactionsPage"), exports);

package/cjs/pages/MainPage/MainGasMessage.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const GasMessage_1 = require("../../components/GasMessage");
 const hooks_1 = require("../../hooks");
 const MainGasMessage = (props) => {
-    const { routes } = (0, hooks_1.useSwapRoutes)();
+    const { routes } = (0, hooks_1.useRoutes)();
     const currentRoute = routes?.[0];
     return (0, jsx_runtime_1.jsx)(GasMessage_1.GasMessage, { route: currentRoute, ...props });
 };

package/cjs/pages/MainPage/MainPage.js

@@ -3,22 +3,22 @@ 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 ActiveTransactions_1 = require("../../components/ActiveTransactions");
+const AmountInput_1 = require("../../components/AmountInput");
 const ContractComponent_1 = require("../../components/ContractComponent");
 const GasMessage_1 = require("../../components/GasMessage");
+const Routes_1 = require("../../components/Routes");
 const SelectChainAndToken_1 = require("../../components/SelectChainAndToken");
 const SendToWallet_1 = require("../../components/SendToWallet");
-const SwapInput_1 = require("../../components/SwapInput");
-const SwapRoutes_1 = require("../../components/SwapRoutes");
 const hooks_1 = require("../../hooks");
 const providers_1 = require("../../providers");
 const MainGasMessage_1 = require("./MainGasMessage");
 const MainPage_style_1 = require("./MainPage.style");
-const MainSwapButton_1 = require("./MainSwapButton");
+const ReviewButton_1 = require("./ReviewButton");
 const MainPage = () => {
     const expandable = (0, hooks_1.useExpandableVariant)();
-    const { variant } = (0, providers_1.useWidgetConfig)();
-    const nft = variant === 'nft';
-    return ((0, jsx_runtime_1.jsxs)(MainPage_style_1.FormContainer, { disableGutters: true, children: [(0, jsx_runtime_1.jsx)(ActiveSwaps_1.ActiveSwaps, { mx: 3, mt: 1, mb: 1 }), nft ? (0, jsx_runtime_1.jsx)(ContractComponent_1.ContractComponent, { mx: 3, mt: 1, mb: 1 }) : null, (0, jsx_runtime_1.jsx)(SelectChainAndToken_1.SelectChainAndToken, { mt: 1, mx: 3, mb: 2 }), !nft ? (0, jsx_runtime_1.jsx)(SwapInput_1.SwapInput, { formType: "from", mx: 3, mb: 2 }) : null, !expandable ? (0, jsx_runtime_1.jsx)(SwapRoutes_1.SwapRoutes, { mx: 3, mb: 2 }) : null, (0, jsx_runtime_1.jsx)(SendToWallet_1.SendToWallet, { mx: 3, mb: 2 }), (0, jsx_runtime_1.jsx)(GasMessage_1.GasRefuelMessage, { mx: 3, mb: 2 }), (0, jsx_runtime_1.jsx)(MainGasMessage_1.MainGasMessage, { mx: 3, mb: 2 }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", mx: 3, mb: 1, children: [(0, jsx_runtime_1.jsx)(MainSwapButton_1.MainSwapButton, {}), (0, jsx_runtime_1.jsx)(SendToWallet_1.SendToWalletButton, {})] })] }));
+    const { subvariant, contractComponent } = (0, providers_1.useWidgetConfig)();
+    const nft = subvariant === 'nft';
+    return ((0, jsx_runtime_1.jsxs)(MainPage_style_1.FormContainer, { disableGutters: true, children: [(0, jsx_runtime_1.jsx)(ActiveTransactions_1.ActiveTransactions, { mx: 3, mt: 1, mb: 1 }), nft ? ((0, jsx_runtime_1.jsx)(ContractComponent_1.ContractComponent, { mx: 3, mt: 1, mb: 1, children: contractComponent })) : null, (0, jsx_runtime_1.jsx)(SelectChainAndToken_1.SelectChainAndToken, { mt: 1, mx: 3, mb: 2 }), !nft ? (0, jsx_runtime_1.jsx)(AmountInput_1.AmountInput, { formType: "from", mx: 3, mb: 2 }) : null, !expandable ? (0, jsx_runtime_1.jsx)(Routes_1.Routes, { mx: 3, mb: 2 }) : null, (0, jsx_runtime_1.jsx)(SendToWallet_1.SendToWallet, { mx: 3, mb: 2 }), (0, jsx_runtime_1.jsx)(GasMessage_1.GasRefuelMessage, { mx: 3, mb: 2 }), (0, jsx_runtime_1.jsx)(MainGasMessage_1.MainGasMessage, { mx: 3, mb: 2 }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", mx: 3, mb: 1, children: [(0, jsx_runtime_1.jsx)(ReviewButton_1.ReviewButton, {}), (0, jsx_runtime_1.jsx)(SendToWallet_1.SendToWalletButton, {})] })] }));
 };
 exports.MainPage = MainPage;

package/cjs/pages/MainPage/ReviewButton.d.ts

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

package/cjs/pages/MainPage/ReviewButton.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReviewButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+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 DefaultTransactionButton_1 = require("../../components/DefaultTransactionButton");
+const hooks_1 = require("../../hooks");
+const providers_1 = require("../../providers");
+const stores_1 = require("../../stores");
+const utils_1 = require("../../utils");
+const ReviewButton = () => {
+    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 setExecutableRoute = (0, stores_1.useSetExecutableRoute)();
+    const { subvariant } = (0, providers_1.useWidgetConfig)();
+    const splitState = (0, stores_1.useSplitSubvariantStore)((state) => state.state);
+    const { routes } = (0, hooks_1.useRoutes)();
+    const currentRoute = routes?.[0];
+    const handleClick = async () => {
+        if (currentRoute) {
+            setExecutableRoute(currentRoute);
+            navigate(utils_1.navigationRoutes.transactionExecution, {
+                state: { routeId: currentRoute.id },
+            });
+        }
+    };
+    const getButtonText = () => {
+        if (currentRoute) {
+            switch (subvariant) {
+                case 'nft':
+                    return t(`button.reviewPurchase`);
+                case 'refuel':
+                    return t(`button.reviewBridge`);
+                default:
+                    const transactionType = currentRoute.fromChainId === currentRoute.toChainId
+                        ? 'Swap'
+                        : 'Bridge';
+                    return t(`button.review${transactionType}`);
+            }
+        }
+        else {
+            switch (subvariant) {
+                case 'nft':
+                    return t(`button.buy`);
+                case 'refuel':
+                    return t(`button.getGas`);
+                case 'split':
+                    if (splitState) {
+                        return t(`button.${splitState}`);
+                    }
+                    return t(`button.exchange`);
+                default:
+                    return t(`button.exchange`);
+            }
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(DefaultTransactionButton_1.DefaultTransactionButton, { text: getButtonText(), onClick: handleClick, disabled: currentRoute && (isValidating || !isValid) }));
+};
+exports.ReviewButton = ReviewButton;

package/{components/SwapRoutes/SwapRoutes.d.ts → cjs/pages/RoutesPage/RoutesPage.d.ts}

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import type { BoxProps } from '@mui/material';
-export declare const SwapRoutes: React.FC<BoxProps>;
+export declare const RoutesPage: React.FC<BoxProps>;

package/cjs/pages/{SwapRoutesPage/SwapRoutesPage.js → RoutesPage/RoutesPage.js}

@@ -1,38 +1,38 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SwapRoutesPage = void 0;
+exports.RoutesPage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Header_1 = require("../../components/Header");
 const ProgressToNextUpdate_1 = require("../../components/ProgressToNextUpdate");
-const SwapRouteCard_1 = require("../../components/SwapRouteCard");
+const RouteCard_1 = require("../../components/RouteCard");
 const hooks_1 = require("../../hooks");
 const stores_1 = require("../../stores");
 const utils_1 = require("../../utils");
-const SwapRoutesPage_style_1 = require("./SwapRoutesPage.style");
-const SwapRoutesPage = () => {
+const RoutesPage_style_1 = require("./RoutesPage.style");
+const RoutesPage = () => {
     const { navigateBack, navigate } = (0, hooks_1.useNavigateBack)();
-    const { routes: swapRoutes, isLoading, isFetching, dataUpdatedAt, refetchTime, refetch, } = (0, hooks_1.useSwapRoutes)();
+    const { routes, isLoading, isFetching, dataUpdatedAt, refetchTime, refetch } = (0, hooks_1.useRoutes)();
     const setExecutableRoute = (0, stores_1.useSetExecutableRoute)();
     const handleRouteClick = (route) => {
         setExecutableRoute(route);
-        navigate(utils_1.navigationRoutes.swapExecution, {
+        navigate(utils_1.navigationRoutes.transactionExecution, {
             state: { routeId: route.id },
         });
     };
     (0, react_1.useEffect)(() => {
-        if (!swapRoutes?.length && !isLoading && !isFetching) {
+        if (!routes?.length && !isLoading && !isFetching) {
             navigateBack();
         }
         // redirect to the home page if no routes are found on page reload
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     (0, react_1.useEffect)(() => {
-        return Header_1.useHeaderActionStore
+        return Header_1.useHeaderStore
             .getState()
             .setAction((0, jsx_runtime_1.jsx)(ProgressToNextUpdate_1.ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: { marginRight: -1 }, size: "medium", edge: "end" }));
     }, [dataUpdatedAt, isFetching, refetch, refetchTime]);
-    const routeNotFound = !swapRoutes?.length && !isLoading && !isFetching;
-    return ((0, jsx_runtime_1.jsx)(SwapRoutesPage_style_1.Stack, { direction: "column", spacing: 2, flex: 1, children: routeNotFound ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteNotFoundCard, {})) : isLoading ? (Array.from({ length: 3 }).map((_, index) => ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, {}, index)))) : (swapRoutes?.map((route, index) => ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { route: route, onClick: () => handleRouteClick(route), active: index === 0, expanded: swapRoutes?.length <= 2 }, route.id)))) }));
+    const routeNotFound = !routes?.length && !isLoading && !isFetching;
+    return ((0, jsx_runtime_1.jsx)(RoutesPage_style_1.Stack, { direction: "column", spacing: 2, flex: 1, children: routeNotFound ? ((0, jsx_runtime_1.jsx)(RouteCard_1.RouteNotFoundCard, {})) : isLoading ? (Array.from({ length: 3 }).map((_, index) => ((0, jsx_runtime_1.jsx)(RouteCard_1.RouteCardSkeleton, {}, index)))) : (routes?.map((route, index) => ((0, jsx_runtime_1.jsx)(RouteCard_1.RouteCard, { route: route, onClick: () => handleRouteClick(route), active: index === 0, expanded: routes?.length <= 2 }, route.id)))) }));
 };
-exports.SwapRoutesPage = SwapRoutesPage;
+exports.RoutesPage = RoutesPage;

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

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

package/cjs/{components/SwapInput → pages/RoutesPage}/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("./SwapInput"), exports);
+__exportStar(require("./RoutesPage"), exports);

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

@@ -1,4 +1,4 @@
-import type { SwapFormTypeProps } from '../../providers';
-export interface SelectChainPageProps extends SwapFormTypeProps {
+import type { FormTypeProps } from '../../providers';
+export interface SelectChainPageProps extends FormTypeProps {
     selectNativeToken?: boolean;
 }

package/cjs/pages/SelectEnabledToolsPage/SelectEnabledToolsPage.js

@@ -44,7 +44,7 @@ const SelectEnabledToolsPage = ({ type }) => {
                 setTools(type, toolKeys, toolKeys);
             }
         };
-        return Header_1.useHeaderActionStore.getState().setAction((0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "end", onClick: toggleCheckboxes, children: allToolsSelected ? ((0, jsx_runtime_1.jsx)(CheckBoxOutlined_1.default, {})) : enabledTools.length ? ((0, jsx_runtime_1.jsx)(IndeterminateCheckBoxOutlined_1.default, {})) : ((0, jsx_runtime_1.jsx)(CheckBoxOutlineBlankOutlined_1.default, {})) }));
+        return Header_1.useHeaderStore.getState().setAction((0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "end", onClick: toggleCheckboxes, children: allToolsSelected ? ((0, jsx_runtime_1.jsx)(CheckBoxOutlined_1.default, {})) : enabledTools.length ? ((0, jsx_runtime_1.jsx)(IndeterminateCheckBoxOutlined_1.default, {})) : ((0, jsx_runtime_1.jsx)(CheckBoxOutlineBlankOutlined_1.default, {})) }));
     }, [enabledTools.length, setTools, tools, type, typeKey]);
     return ((0, jsx_runtime_1.jsx)(material_1.Container, { disableGutters: true, children: (0, jsx_runtime_1.jsx)(material_1.List, { sx: {
                 paddingLeft: 1.5,

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

@@ -17,4 +17,4 @@ export declare const ListItemButton: import("@emotion/styled").StyledComponent<i
     touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
 }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-}, "className" | "style" | "classes" | "autoFocus" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "dense" | "divider" | "selected" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+}, "className" | "style" | "classes" | "autoFocus" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "divider" | "dense" | "selected" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/cjs/pages/SelectNativeTokenPage/SelectNativeTokenPage.d.ts

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

package/cjs/pages/SelectNativeTokenPage/SelectNativeTokenPage.js

@@ -17,6 +17,6 @@ const SelectNativeTokenPage = ({ formType, }) => {
     return ((0, jsx_runtime_1.jsx)(material_1.Container, { disableGutters: true, children: (0, jsx_runtime_1.jsx)(material_1.List, { sx: {
                 paddingLeft: 1.5,
                 paddingRight: 1.5,
-            }, children: chains?.map((chain) => ((0, jsx_runtime_1.jsxs)(ListItemButton_1.ListItemButton, { onClick: () => selectToken(chain.nativeToken.address, chain.id), children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: chain.nativeToken, chain: chain }) }), (0, jsx_runtime_1.jsx)(ListItemText_1.ListItemText, { primary: chain.nativeToken.symbol, secondary: t('swap.onChain', { chainName: chain.name }) })] }, chain.id))) }) }));
+            }, children: chains?.map((chain) => ((0, jsx_runtime_1.jsxs)(ListItemButton_1.ListItemButton, { onClick: () => selectToken(chain.nativeToken.address, chain.id), children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: chain.nativeToken, chain: chain }) }), (0, jsx_runtime_1.jsx)(ListItemText_1.ListItemText, { primary: chain.nativeToken.symbol, secondary: t('main.onChain', { chainName: chain.name }) })] }, chain.id))) }) }));
 };
 exports.SelectNativeTokenPage = SelectNativeTokenPage;

package/cjs/pages/SelectTokenPage/SearchTokenInput.js

@@ -14,11 +14,11 @@ const SearchTokenInput = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { register, setValue } = (0, react_hook_form_1.useFormContext)();
     (0, react_1.useEffect)(() => () => {
-        setValue(providers_1.SwapFormKey.TokenSearchFilter, '');
+        setValue(providers_1.FormKey.TokenSearchFilter, '');
     }, [setValue]);
-    return ((0, jsx_runtime_1.jsx)(Card_1.Card, { children: (0, jsx_runtime_1.jsx)(material_1.FormControl, { 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, { position: "end", children: (0, jsx_runtime_1.jsx)(Search_1.default, {}) }), inputProps: {
+    return ((0, jsx_runtime_1.jsx)(Card_1.Card, { children: (0, jsx_runtime_1.jsx)(material_1.FormControl, { fullWidth: true, children: (0, jsx_runtime_1.jsx)(SearchTokenInput_style_1.Input, { size: "small", placeholder: t(`main.tokenSearch`), defaultValue: "", endAdornment: (0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "end", children: (0, jsx_runtime_1.jsx)(Search_1.default, {}) }), inputProps: {
                     inputMode: 'search',
-                    ...register(providers_1.SwapFormKey.TokenSearchFilter),
+                    ...register(providers_1.FormKey.TokenSearchFilter),
                 }, autoComplete: "off" }) }) }));
 };
 exports.SearchTokenInput = SearchTokenInput;

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

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

package/cjs/pages/SelectTokenPage/types.js

@@ -5,4 +5,4 @@ var TokenFilterType;
 (function (TokenFilterType) {
     TokenFilterType[TokenFilterType["My"] = 0] = "My";
     TokenFilterType[TokenFilterType["All"] = 1] = "All";
-})(TokenFilterType = exports.TokenFilterType || (exports.TokenFilterType = {}));
+})(TokenFilterType || (exports.TokenFilterType = TokenFilterType = {}));

package/cjs/pages/SettingsPage/ColorSchemeButtonGroup.style.d.ts

@@ -2,14 +2,14 @@
 export declare const ToggleButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ToggleButtonClasses> | undefined;
-    color?: import("@mui/types").OverridableStringUnion<"success" | "warning" | "error" | "primary" | "secondary" | "info" | "standard", import("@mui/material").ToggleButtonPropsColorOverrides> | undefined;
+    color?: import("@mui/types").OverridableStringUnion<"primary" | "secondary" | "error" | "warning" | "info" | "success" | "standard", import("@mui/material").ToggleButtonPropsColorOverrides> | undefined;
     disabled?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     fullWidth?: boolean | undefined;
     onChange?: ((event: import("react").MouseEvent<HTMLElement, MouseEvent>, value: any) => void) | undefined;
     onClick?: ((event: import("react").MouseEvent<HTMLElement, MouseEvent>, value: any) => void) | undefined;
     selected?: boolean | undefined;
-    size?: import("@mui/types").OverridableStringUnion<"small" | "medium" | "large", import("@mui/material").ToggleButtonPropsSizeOverrides> | undefined;
+    size?: import("@mui/types").OverridableStringUnion<"small" | "large" | "medium", import("@mui/material").ToggleButtonPropsSizeOverrides> | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
     value: {};
 } & Omit<{