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

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

@@ -1,9 +1,11 @@
 import { App } from './App';
 // TODO: remove or make optional
 import './fonts/inter.css';
+export { useFormContext, useWatch } from 'react-hook-form';
 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';
 // ClassNameGenerator.configure((componentName) =>

package/package.json

@@ -1,10 +1,20 @@
 {
   "name": "@lifi/widget",
-  "version": "2.0.0-beta.13",
+  "version": "2.0.0-beta.15",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
-  "main": "./cjs/index.js",
-  "module": "./index.js",
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
   "types": "./index.d.ts",
+  "scripts": {
+    "watch": "tsc -w -p ./tsconfig.json",
+    "build": "tsc --build --clean && yarn build:version && tsc --build && tsc --build tsconfig.cjs.json && yarn build:copy-files",
+    "build:copy-files": "node ../../scripts/copy-files.js && cpy 'src/**/*' '!src/**/*.ts*' build && cpy 'src/**/*' '!src/**/*.ts*' build/cjs",
+    "build:version": "node ../../scripts/version.js",
+    "pre-commit": "lint-staged",
+    "lint": "eslint --ext .tsx --ext .ts ./src",
+    "lint:fix": "eslint --ext .tsx --ext .ts ./src --fix",
+    "prettier:fix": "prettier --write ./src/."
+  },
   "lint-staged": {
     "src/**/*.{ts,tsx}": [
       "yarn run lint:fix",
@@ -37,34 +47,38 @@
     "lifi"
   ],
   "dependencies": {
-    "@emotion/react": "^11.11.0",
+    "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@ethersproject/abstract-signer": "^5.7.0",
     "@ethersproject/address": "^5.7.0",
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/providers": "^5.7.2",
-    "@lifi/sdk": "^2.0.0-beta.15",
-    "@lifi/wallet-management": "^2.0.0-beta.8",
+    "@lifi/sdk": "^2.0.0-beta.16",
+    "@lifi/wallet-management": "^2.0.0-beta.10",
     "@mui/icons-material": "^5.11.16",
-    "@mui/lab": "^5.0.0-alpha.131",
-    "@mui/material": "^5.13.2",
-    "@tanstack/react-query": "^4.29.7",
+    "@mui/lab": "^5.0.0-alpha.134",
+    "@mui/material": "^5.13.5",
+    "@tanstack/react-query": "^4.29.13",
     "@tanstack/react-virtual": "^3.0.0-beta.54",
     "big.js": "^6.2.1",
-    "i18next": "^22.5.0",
-    "i18next-browser-languagedetector": "^7.0.1",
+    "i18next": "^22.5.1",
+    "i18next-browser-languagedetector": "^7.0.2",
     "microdiff": "^1.3.2",
     "mitt": "^3.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.43.9",
+    "react-hook-form": "^7.44.3",
     "react-i18next": "^12.3.1",
-    "react-intersection-observer": "^9.4.3",
-    "react-router-dom": "^6.11.2",
+    "react-intersection-observer": "^9.4.4",
+    "react-router-dom": "^6.12.1",
     "react-timer-hook": "^3.0.6",
     "uuid": "^9.0.0",
     "zustand": "^4.3.8"
   },
+  "devDependencies": {
+    "cpy-cli": "^4.2.0",
+    "typescript": "^5.1.3"
+  },
   "peerDependencies": {
     "@types/react": "^18.0.0",
     "react": "^18.0.0",
@@ -79,5 +93,5 @@
     "extends": "../../.eslintrc"
   },
   "sideEffects": false,
-  "private": false
-}
+  "gitHead": "183d16a641a21a8176105452c08d2f7079925125"
+}

package/pages/ActiveTransactionsPage/ActiveTransactionsEmpty.d.ts

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

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

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

package/pages/ActiveTransactionsPage/ActiveTransactionsPage.d.ts

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

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

@@ -3,13 +3,13 @@ import DeleteIcon from '@mui/icons-material/DeleteOutline';
 import { Button, Container, DialogActions, DialogContent, DialogContentText, DialogTitle, IconButton, List, } from '@mui/material';
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ActiveSwapItem } from '../../components/ActiveSwaps';
+import { ActiveTransactionItem } from '../../components/ActiveTransactions';
 import { Dialog } from '../../components/Dialog';
-import { useHeaderActionStore } from '../../components/Header';
+import { useHeaderStore } from '../../components/Header';
 import { useWallet } from '../../providers';
 import { useExecutingRoutesIds, useRouteExecutionStore } from '../../stores';
-import { ActiveSwapsEmpty } from './ActiveSwapsEmpty';
-export const ActiveSwapsPage = () => {
+import { ActiveTransactionsEmpty } from './ActiveTransactionsEmpty';
+export const ActiveTransactionsPage = () => {
     const { t } = useTranslation();
     const { account } = useWallet();
     const executingRoutes = useExecutingRoutesIds(account.address);
@@ -20,14 +20,14 @@ export const ActiveSwapsPage = () => {
     }, []);
     useEffect(() => {
         if (executingRoutes.length) {
-            return useHeaderActionStore.getState().setAction(_jsx(IconButton, { size: "medium", edge: "end", onClick: toggleDialog, children: _jsx(DeleteIcon, {}) }));
+            return useHeaderStore.getState().setAction(_jsx(IconButton, { size: "medium", edge: "end", onClick: toggleDialog, children: _jsx(DeleteIcon, {}) }));
         }
     }, [executingRoutes.length, toggleDialog]);
     if (!executingRoutes.length) {
-        return _jsx(ActiveSwapsEmpty, {});
+        return _jsx(ActiveTransactionsEmpty, {});
     }
     return (_jsxs(Container, { disableGutters: true, children: [_jsx(List, { sx: {
                     paddingLeft: 1.5,
                     paddingRight: 1.5,
-                }, children: executingRoutes.map((routeId) => (_jsx(ActiveSwapItem, { routeId: routeId }, routeId))) }), _jsxs(Dialog, { open: open, onClose: toggleDialog, children: [_jsx(DialogTitle, { children: t('swap.warning.title.deleteActiveSwaps') }), _jsx(DialogContent, { children: _jsx(DialogContentText, { children: t('swap.warning.message.deleteActiveSwaps') }) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: toggleDialog, children: t('button.cancel') }), _jsx(Button, { variant: "contained", onClick: () => deleteRoutes('active'), autoFocus: true, children: t('button.delete') })] })] })] }));
+                }, children: executingRoutes.map((routeId) => (_jsx(ActiveTransactionItem, { routeId: routeId }, routeId))) }), _jsxs(Dialog, { open: open, onClose: toggleDialog, children: [_jsx(DialogTitle, { children: t('warning.title.deleteActiveTransactions') }), _jsx(DialogContent, { children: _jsx(DialogContentText, { children: t('warning.message.deleteActiveTransactions') }) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: toggleDialog, children: t('button.cancel') }), _jsx(Button, { variant: "contained", onClick: () => deleteRoutes('active'), autoFocus: true, children: t('button.delete') })] })] })] }));
 };

package/pages/ActiveTransactionsPage/index.d.ts

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

package/pages/ActiveTransactionsPage/index.js

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

package/pages/MainPage/MainGasMessage.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { GasMessage } from '../../components/GasMessage';
-import { useSwapRoutes } from '../../hooks';
+import { useRoutes } from '../../hooks';
 export const MainGasMessage = (props) => {
-    const { routes } = useSwapRoutes();
+    const { routes } = useRoutes();
     const currentRoute = routes?.[0];
     return _jsx(GasMessage, { route: currentRoute, ...props });
 };

package/pages/MainPage/MainPage.js

@@ -1,20 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@mui/material';
-import { ActiveSwaps } from '../../components/ActiveSwaps';
+import { ActiveTransactions } from '../../components/ActiveTransactions';
+import { AmountInput } from '../../components/AmountInput';
 import { ContractComponent } from '../../components/ContractComponent';
 import { GasRefuelMessage } from '../../components/GasMessage';
+import { Routes } from '../../components/Routes';
 import { SelectChainAndToken } from '../../components/SelectChainAndToken';
 import { SendToWallet, SendToWalletButton, } from '../../components/SendToWallet';
-import { SwapInput } from '../../components/SwapInput';
-import { SwapRoutes } from '../../components/SwapRoutes';
 import { useExpandableVariant } from '../../hooks';
 import { useWidgetConfig } from '../../providers';
 import { MainGasMessage } from './MainGasMessage';
 import { FormContainer } from './MainPage.style';
-import { MainSwapButton } from './MainSwapButton';
+import { ReviewButton } from './ReviewButton';
 export const MainPage = () => {
     const expandable = useExpandableVariant();
-    const { variant } = useWidgetConfig();
-    const nft = variant === 'nft';
-    return (_jsxs(FormContainer, { disableGutters: true, children: [_jsx(ActiveSwaps, { mx: 3, mt: 1, mb: 1 }), nft ? _jsx(ContractComponent, { mx: 3, mt: 1, mb: 1 }) : null, _jsx(SelectChainAndToken, { mt: 1, mx: 3, mb: 2 }), !nft ? _jsx(SwapInput, { formType: "from", mx: 3, mb: 2 }) : null, !expandable ? _jsx(SwapRoutes, { mx: 3, mb: 2 }) : null, _jsx(SendToWallet, { mx: 3, mb: 2 }), _jsx(GasRefuelMessage, { mx: 3, mb: 2 }), _jsx(MainGasMessage, { mx: 3, mb: 2 }), _jsxs(Box, { display: "flex", mx: 3, mb: 1, children: [_jsx(MainSwapButton, {}), _jsx(SendToWalletButton, {})] })] }));
+    const { subvariant, contractComponent } = useWidgetConfig();
+    const nft = subvariant === 'nft';
+    return (_jsxs(FormContainer, { disableGutters: true, children: [_jsx(ActiveTransactions, { mx: 3, mt: 1, mb: 1 }), nft ? (_jsx(ContractComponent, { mx: 3, mt: 1, mb: 1, children: contractComponent })) : null, _jsx(SelectChainAndToken, { mt: 1, mx: 3, mb: 2 }), !nft ? _jsx(AmountInput, { formType: "from", mx: 3, mb: 2 }) : null, !expandable ? _jsx(Routes, { mx: 3, mb: 2 }) : null, _jsx(SendToWallet, { mx: 3, mb: 2 }), _jsx(GasRefuelMessage, { mx: 3, mb: 2 }), _jsx(MainGasMessage, { mx: 3, mb: 2 }), _jsxs(Box, { display: "flex", mx: 3, mb: 1, children: [_jsx(ReviewButton, {}), _jsx(SendToWalletButton, {})] })] }));
 };

package/pages/MainPage/ReviewButton.d.ts

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

package/pages/MainPage/ReviewButton.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useFormState } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { DefaultTransactionButton } from '../../components/DefaultTransactionButton';
+import { useRoutes } from '../../hooks';
+import { useWidgetConfig } from '../../providers';
+import { useSetExecutableRoute, useSplitSubvariantStore } from '../../stores';
+import { navigationRoutes } from '../../utils';
+export const ReviewButton = () => {
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+    const { isValid, isValidating } = useFormState();
+    const setExecutableRoute = useSetExecutableRoute();
+    const { subvariant } = useWidgetConfig();
+    const splitState = useSplitSubvariantStore((state) => state.state);
+    const { routes } = useRoutes();
+    const currentRoute = routes?.[0];
+    const handleClick = async () => {
+        if (currentRoute) {
+            setExecutableRoute(currentRoute);
+            navigate(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 (_jsx(DefaultTransactionButton, { text: getButtonText(), onClick: handleClick, disabled: currentRoute && (isValidating || !isValid) }));
+};

package/{components/ActiveSwaps/ActiveSwaps.d.ts → pages/RoutesPage/RoutesPage.d.ts}

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

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

@@ -1,34 +1,34 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from 'react';
-import { useHeaderActionStore } from '../../components/Header';
+import { useHeaderStore } from '../../components/Header';
 import { ProgressToNextUpdate } from '../../components/ProgressToNextUpdate';
-import { SwapRouteCard, SwapRouteCardSkeleton, SwapRouteNotFoundCard, } from '../../components/SwapRouteCard';
-import { useNavigateBack, useSwapRoutes } from '../../hooks';
+import { RouteCard, RouteCardSkeleton, RouteNotFoundCard, } from '../../components/RouteCard';
+import { useNavigateBack, useRoutes } from '../../hooks';
 import { useSetExecutableRoute } from '../../stores';
 import { navigationRoutes } from '../../utils';
-import { Stack } from './SwapRoutesPage.style';
-export const SwapRoutesPage = () => {
+import { Stack } from './RoutesPage.style';
+export const RoutesPage = () => {
     const { navigateBack, navigate } = useNavigateBack();
-    const { routes: swapRoutes, isLoading, isFetching, dataUpdatedAt, refetchTime, refetch, } = useSwapRoutes();
+    const { routes, isLoading, isFetching, dataUpdatedAt, refetchTime, refetch } = useRoutes();
     const setExecutableRoute = useSetExecutableRoute();
     const handleRouteClick = (route) => {
         setExecutableRoute(route);
-        navigate(navigationRoutes.swapExecution, {
+        navigate(navigationRoutes.transactionExecution, {
             state: { routeId: route.id },
         });
     };
     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
     }, []);
     useEffect(() => {
-        return useHeaderActionStore
+        return useHeaderStore
             .getState()
             .setAction(_jsx(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 (_jsx(Stack, { direction: "column", spacing: 2, flex: 1, children: routeNotFound ? (_jsx(SwapRouteNotFoundCard, {})) : isLoading ? (Array.from({ length: 3 }).map((_, index) => (_jsx(SwapRouteCardSkeleton, {}, index)))) : (swapRoutes?.map((route, index) => (_jsx(SwapRouteCard, { route: route, onClick: () => handleRouteClick(route), active: index === 0, expanded: swapRoutes?.length <= 2 }, route.id)))) }));
+    const routeNotFound = !routes?.length && !isLoading && !isFetching;
+    return (_jsx(Stack, { direction: "column", spacing: 2, flex: 1, children: routeNotFound ? (_jsx(RouteNotFoundCard, {})) : isLoading ? (Array.from({ length: 3 }).map((_, index) => (_jsx(RouteCardSkeleton, {}, index)))) : (routes?.map((route, index) => (_jsx(RouteCard, { route: route, onClick: () => handleRouteClick(route), active: index === 0, expanded: routes?.length <= 2 }, route.id)))) }));
 };

package/pages/RoutesPage/index.d.ts

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

package/pages/RoutesPage/index.js

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

package/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/pages/SelectEnabledToolsPage/SelectEnabledToolsPage.js

@@ -4,7 +4,7 @@ import CheckBoxOutlineBlankOutlinedIcon from '@mui/icons-material/CheckBoxOutlin
 import CheckBoxOutlinedIcon from '@mui/icons-material/CheckBoxOutlined';
 import IndeterminateCheckBoxOutlinedIcon from '@mui/icons-material/IndeterminateCheckBoxOutlined';
 import { Avatar, Container, IconButton, List, ListItemAvatar, } from '@mui/material';
-import { useHeaderActionStore } from '../../components/Header';
+import { useHeaderStore } from '../../components/Header';
 import { useEffect } from 'react';
 import { shallow } from 'zustand/shallow';
 import { ListItemText } from '../../components/ListItemText';
@@ -41,7 +41,7 @@ export const SelectEnabledToolsPage = ({ type }) => {
                 setTools(type, toolKeys, toolKeys);
             }
         };
-        return useHeaderActionStore.getState().setAction(_jsx(IconButton, { size: "medium", edge: "end", onClick: toggleCheckboxes, children: allToolsSelected ? (_jsx(CheckBoxOutlinedIcon, {})) : enabledTools.length ? (_jsx(IndeterminateCheckBoxOutlinedIcon, {})) : (_jsx(CheckBoxOutlineBlankOutlinedIcon, {})) }));
+        return useHeaderStore.getState().setAction(_jsx(IconButton, { size: "medium", edge: "end", onClick: toggleCheckboxes, children: allToolsSelected ? (_jsx(CheckBoxOutlinedIcon, {})) : enabledTools.length ? (_jsx(IndeterminateCheckBoxOutlinedIcon, {})) : (_jsx(CheckBoxOutlineBlankOutlinedIcon, {})) }));
     }, [enabledTools.length, setTools, tools, type, typeKey]);
     return (_jsx(Container, { disableGutters: true, children: _jsx(List, { sx: {
                 paddingLeft: 1.5,

package/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/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/pages/SelectNativeTokenPage/SelectNativeTokenPage.js

@@ -14,5 +14,5 @@ export const SelectNativeTokenPage = ({ formType, }) => {
     return (_jsx(Container, { disableGutters: true, children: _jsx(List, { sx: {
                 paddingLeft: 1.5,
                 paddingRight: 1.5,
-            }, children: chains?.map((chain) => (_jsxs(ListItemButton, { onClick: () => selectToken(chain.nativeToken.address, chain.id), children: [_jsx(ListItemAvatar, { children: _jsx(TokenAvatar, { token: chain.nativeToken, chain: chain }) }), _jsx(ListItemText, { primary: chain.nativeToken.symbol, secondary: t('swap.onChain', { chainName: chain.name }) })] }, chain.id))) }) }));
+            }, children: chains?.map((chain) => (_jsxs(ListItemButton, { onClick: () => selectToken(chain.nativeToken.address, chain.id), children: [_jsx(ListItemAvatar, { children: _jsx(TokenAvatar, { token: chain.nativeToken, chain: chain }) }), _jsx(ListItemText, { primary: chain.nativeToken.symbol, secondary: t('main.onChain', { chainName: chain.name }) })] }, chain.id))) }) }));
 };

package/pages/SelectTokenPage/SearchTokenInput.js

@@ -5,16 +5,16 @@ import { useEffect } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { Card } from '../../components/Card';
-import { SwapFormKey } from '../../providers';
+import { FormKey } from '../../providers';
 import { Input } from './SearchTokenInput.style';
 export const SearchTokenInput = () => {
     const { t } = useTranslation();
     const { register, setValue } = useFormContext();
     useEffect(() => () => {
-        setValue(SwapFormKey.TokenSearchFilter, '');
+        setValue(FormKey.TokenSearchFilter, '');
     }, [setValue]);
-    return (_jsx(Card, { children: _jsx(FormControl, { fullWidth: true, children: _jsx(Input, { size: "small", placeholder: t(`swap.tokenSearch`), defaultValue: "", endAdornment: _jsx(InputAdornment, { position: "end", children: _jsx(SearchIcon, {}) }), inputProps: {
+    return (_jsx(Card, { children: _jsx(FormControl, { fullWidth: true, children: _jsx(Input, { size: "small", placeholder: t(`main.tokenSearch`), defaultValue: "", endAdornment: _jsx(InputAdornment, { position: "end", children: _jsx(SearchIcon, {}) }), inputProps: {
                     inputMode: 'search',
-                    ...register(SwapFormKey.TokenSearchFilter),
+                    ...register(FormKey.TokenSearchFilter),
                 }, autoComplete: "off" }) }) }));
 };