@xswap-link/sdk 0.3.3 → 0.3.5

package/dist/index.js

@@ -59,7 +59,7 @@ var xswap_config_default = {
 };
 
 // package.json
-var version = "0.3.3";
+var version = "0.3.5";
 
 // src/components/WaitingForInit/index.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -181,10 +181,11 @@ async function _sendRequest(urlPath, options) {
   }
   return response.json();
 }
-async function getRoute(payload) {
+async function getRoute(payload, abortSignal) {
   return _sendRequest("/route", {
     method: "POST",
-    body: JSON.stringify(payload)
+    body: JSON.stringify(payload),
+    signal: abortSignal
   });
 }
 async function getChains(ecosystem) {
@@ -593,6 +594,7 @@ var MINIMUM_DISPLAYED_TOKEN_AMOUNT = 1e-4;
 var DEFAULT_SOURCE_CHAIN_ID = "1";
 var CCIP_EXPLORER = "https://ccip.chain.link/";
 var TX_RECEIPT_STATUS_LIFETIME = 6e4;
+var DEFAULT_REQUEST_ABORT_MSG = "Request deprecated";
 var MSG_SENT_EVENT_SIG = "MessageSent(bytes32,uint64,address,bytes,address,uint256,uint256,address,uint256)";
 var MSG_SENT_EVENT_ABI = [
   "event MessageSent(bytes32 indexed messageId, uint64 indexed destinationChainSelector, address indexed sender, bytes data, address token, uint256 tokenAmount, uint256 valueForInstantCcipRecieve, address transferedToken, uint256 transferedTokenAmount)"
@@ -604,17 +606,6 @@ var MSG_RECEIVED_EVENT_ABI = [
 
 // src/utils/contracts.ts
 var IERC20 = new import_ethers.ethers.utils.Interface(ERC20Abi);
-var getAllowanceOf = async (token, wallet, spender, rpcUrl) => {
-  const provider = import_ethers.ethers.getDefaultProvider(rpcUrl);
-  if (token === import_ethers.ethers.constants.AddressZero) {
-    return import_ethers.ethers.constants.MaxUint256.toString();
-  }
-  const contract = new import_ethers.ethers.Contract(token, ERC20Abi, provider);
-  return import_ethers.ethers.utils.formatUnits(
-    await contract.allowance(wallet, spender),
-    await contract.decimals()
-  );
-};
 var getBalances = async (chain, wallet) => {
   return {
     ...await getNativeBalance(chain, wallet),
@@ -782,7 +773,7 @@ var getDate = (blockTimestamp) => {
 };
 
 // src/services/integrations/monitoring.ts
-var import_ethers7 = require("ethers");
+var import_ethers8 = require("ethers");
 
 // src/components/Alert/index.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
@@ -1389,36 +1380,19 @@ var PoweredBy = () => {
 
 // src/components/TxConfigForm/Form.tsx
 var import_react11 = require("react");
-var import_ethers5 = require("ethers");
+var import_ethers6 = require("ethers");
 var import_wagmi2 = require("wagmi");
 
-// src/hooks/useDebounce.tsx
-var import_react = require("react");
-var useDebounce = (value, delay) => {
-  const timeoutRef = (0, import_react.useRef)(null);
-  (0, import_react.useEffect)(() => {
-    if (timeoutRef.current) clearTimeout(timeoutRef.current);
-    timeoutRef.current = setTimeout(() => {
-      setValue(value);
-    }, delay);
-    return () => {
-      if (timeoutRef.current) clearTimeout(timeoutRef.current);
-    };
-  }, [value, delay]);
-  const [debouncedValue, setValue] = (0, import_react.useState)(value);
-  return debouncedValue;
-};
-
 // src/components/TxConfigForm/History.tsx
-var import_react3 = require("react");
+var import_react2 = require("react");
 var import_bignumber2 = __toESM(require("bignumber.js"));
 
 // src/components/TxConfigForm/HistoryCard.tsx
-var import_react2 = require("react");
+var import_react = require("react");
 var import_jsx_runtime30 = require("react/jsx-runtime");
 var HistoryCard = ({ transaction, supportedChains }) => {
   const date = getDate(transaction.timestamp);
-  const supportedTokens = (0, import_react2.useMemo)(() => {
+  const supportedTokens = (0, import_react.useMemo)(() => {
     const customTokens = JSON.parse(
       localStorage.getItem("custom-tokens") || "{}"
     );
@@ -1431,7 +1405,7 @@ var HistoryCard = ({ transaction, supportedChains }) => {
     });
     return deepMergeObjects(chainIdToTokenAddressToData, customTokens);
   }, [supportedChains]);
-  const findTokenDataByAddressAndChain = (0, import_react2.useCallback)(
+  const findTokenDataByAddressAndChain = (0, import_react.useCallback)(
     (tokenAddress, chainId) => {
       return supportedTokens[chainId]?.[tokenAddress];
     },
@@ -1545,9 +1519,9 @@ var HistoryCard = ({ transaction, supportedChains }) => {
 // src/components/TxConfigForm/History.tsx
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var History = ({ signer, supportedChains }) => {
-  const [fetchedHistory, setFetchedHistory] = (0, import_react3.useState)();
-  const [historyLoadedOnce, setHistoryLoadedOnce] = (0, import_react3.useState)(false);
-  const fetchHistory = (0, import_react3.useCallback)(async () => {
+  const [fetchedHistory, setFetchedHistory] = (0, import_react2.useState)();
+  const [historyLoadedOnce, setHistoryLoadedOnce] = (0, import_react2.useState)(false);
+  const fetchHistory = (0, import_react2.useCallback)(async () => {
     if (signer) {
       const downloadedHistory = await getHistory({ walletAddress: signer });
       const fetchedTransactions = [];
@@ -1607,7 +1581,7 @@ var History = ({ signer, supportedChains }) => {
       }
     }
   }, [signer, getHistory]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (!historyLoadedOnce) fetchHistory();
     const timer = setInterval(() => {
       fetchHistory();
@@ -1664,7 +1638,7 @@ var TopBar = ({
 };
 
 // src/components/TxConfigForm/Settings.tsx
-var import_react4 = require("react");
+var import_react3 = require("react");
 var import_jsx_runtime33 = require("react/jsx-runtime");
 var Settings = ({
   setSlippage,
@@ -1673,9 +1647,9 @@ var Settings = ({
   expressChecked,
   setExpressChecked
 }) => {
-  const [slippageActivePresetIndex, setSlippageActivePresetIndex] = (0, import_react4.useState)(1);
-  const [usingSlippageInput, setUsingSlippageInput] = (0, import_react4.useState)(false);
-  (0, import_react4.useEffect)(() => {
+  const [slippageActivePresetIndex, setSlippageActivePresetIndex] = (0, import_react3.useState)(1);
+  const [usingSlippageInput, setUsingSlippageInput] = (0, import_react3.useState)(false);
+  (0, import_react3.useEffect)(() => {
     if (!usingSlippageInput) {
       setSlippage(
         SLIPPAGE_PRESETS[slippageActivePresetIndex]?.toString() || "1.5"
@@ -1864,10 +1838,10 @@ var FeesDetails = ({
 };
 
 // src/components/TxConfigForm/Summary.tsx
-var import_react6 = require("react");
+var import_react5 = require("react");
 
 // src/components/TxConfigForm/UsdPrice.tsx
-var import_react5 = require("react");
+var import_react4 = require("react");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var UsdPrice = ({
   prices,
@@ -1875,8 +1849,8 @@ var UsdPrice = ({
   amount = "0",
   loading = false
 }) => {
-  const [usdPrice, setUsdPrice] = (0, import_react5.useState)("0.00");
-  (0, import_react5.useEffect)(() => {
+  const [usdPrice, setUsdPrice] = (0, import_react4.useState)("0.00");
+  (0, import_react4.useEffect)(() => {
     if (token && prices && prices[token.address]) {
       const newUsdPrice = (Number(amount) * Number(prices[token.address.toLowerCase()])).toFixed(2);
       setUsdPrice(newUsdPrice);
@@ -1905,8 +1879,8 @@ var Summary = ({
   dstToken,
   dstChain
 }) => {
-  const [prices, setPrices] = (0, import_react6.useState)();
-  const amountReadable = (0, import_react6.useMemo)(
+  const [prices, setPrices] = (0, import_react5.useState)();
+  const amountReadable = (0, import_react5.useMemo)(
     () => weiToHumanReadable({
       amount: route?.estAmountOut || "0",
       decimals: dstToken?.decimals || 18,
@@ -1914,7 +1888,7 @@ var Summary = ({
     }),
     [route, dstToken]
   );
-  (0, import_react6.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (dstChain) {
       getPrices({ chainId: dstChain.chainId, currency: "USD" }).then(
         (prices2) => setPrices(prices2)
@@ -1972,10 +1946,10 @@ var Summary = ({
 };
 
 // src/components/TxConfigForm/SwapPanel.tsx
-var import_react9 = require("react");
+var import_react8 = require("react");
 
 // src/components/TxConfigForm/TokenPicker.tsx
-var import_react7 = require("react");
+var import_react6 = require("react");
 var import_react_dom = require("react-dom");
 var import_jsx_runtime38 = require("react/jsx-runtime");
 var TokenPicker = ({
@@ -1986,7 +1960,7 @@ var TokenPicker = ({
   signer,
   balances
 }) => {
-  const [searchValue, setSearchValue] = (0, import_react7.useState)("");
+  const [searchValue, setSearchValue] = (0, import_react6.useState)("");
   const onBackdropClick = (e) => {
     e.stopPropagation();
     e.nativeEvent.stopImmediatePropagation();
@@ -1994,7 +1968,7 @@ var TokenPicker = ({
       onCloseClick();
     }
   };
-  const filteredTokens = (0, import_react7.useMemo)(() => {
+  const filteredTokens = (0, import_react6.useMemo)(() => {
     const isMatch = (value, searchValue2) => value.toLowerCase().indexOf(searchValue2.toLowerCase()) > -1;
     return tokens?.filter(
       (token) => isMatch(token.symbol, searchValue) || isMatch(token.name, searchValue) || token.address === searchValue.toLowerCase()
@@ -2116,10 +2090,10 @@ var ChainListElement = ({
 
 // src/components/TxConfigForm/BalanceComponent.tsx
 var import_bignumber3 = __toESM(require("bignumber.js"));
-var import_react8 = require("react");
+var import_react7 = require("react");
 var import_jsx_runtime40 = require("react/jsx-runtime");
 var BalanceComponent = ({ srcToken, balances }) => {
-  const balanceText = (0, import_react8.useMemo)(() => {
+  const balanceText = (0, import_react7.useMemo)(() => {
     if (!balances || !srcToken) return "0";
     if (balances[srcToken.address]?.toString() === "0") return "0";
     const fullHumanReadable = weiToHumanReadable({
@@ -2163,10 +2137,10 @@ var SwapPanel = ({
   prices,
   supportedChains
 }) => {
-  const [chainListShown, setChainListShown] = (0, import_react9.useState)(false);
-  const [tokenListShown, setTokenListShown] = (0, import_react9.useState)(false);
-  const listRef = (0, import_react9.useRef)(null);
-  const buttonRef = (0, import_react9.useRef)(null);
+  const [chainListShown, setChainListShown] = (0, import_react8.useState)(false);
+  const [tokenListShown, setTokenListShown] = (0, import_react8.useState)(false);
+  const listRef = (0, import_react8.useRef)(null);
+  const buttonRef = (0, import_react8.useRef)(null);
   const handleClickOutside = (event) => {
     if (listRef.current && buttonRef.current) {
       const listElement = listRef.current;
@@ -2185,13 +2159,13 @@ var SwapPanel = ({
         })
       );
   };
-  (0, import_react9.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (chainListShown) {
       document.addEventListener("mousedown", handleClickOutside);
       return () => document.removeEventListener("mousedown", handleClickOutside);
     }
   }, [chainListShown]);
-  const chainListOptions = (0, import_react9.useMemo)(
+  const chainListOptions = (0, import_react8.useMemo)(
     () => supportedChains.filter((chain) => chain.chainId !== srcChain?.chainId),
     [supportedChains, srcChain]
   );
@@ -2349,41 +2323,75 @@ var Button = ({ children, onClick, type, disabled }) => {
 // src/components/TxConfigForm/Form.tsx
 var import_actions = require("wagmi/actions");
 
-// src/components/TxConfigForm/ConfirmationAmount.tsx
-var import_react10 = require("react");
+// src/components/TxConfigForm/ConfirmationView/index.tsx
+var import_ethers5 = require("ethers");
+
+// src/components/Spinner/index.tsx
 var import_jsx_runtime45 = require("react/jsx-runtime");
+var Spinner = ({ width, height }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { role: "status", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+    "svg",
+    {
+      "aria-hidden": "true",
+      className: `xpay-w-${width} xpay-h-${height} xpay-text-gray-200 xpay-animate-spin dark:xpay-text-gray-600 xpay-fill-[rgba(54,129,198,1)]`,
+      viewBox: "0 0 100 101",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          "path",
+          {
+            d: "M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          "path",
+          {
+            d: "M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z",
+            fill: "currentFill"
+          }
+        )
+      ]
+    }
+  ) });
+};
+
+// src/components/TxConfigForm/ConfirmationAmount.tsx
+var import_react9 = require("react");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var ConfirmationAmount = ({
   amount,
   token,
   chain,
   type
 }) => {
-  const [prices, setPrices] = (0, import_react10.useState)();
-  const amountReadable = (0, import_react10.useMemo)(() => {
+  const [prices, setPrices] = (0, import_react9.useState)();
+  const amountReadable = (0, import_react9.useMemo)(() => {
     return weiToHumanReadable({
       amount: amount || "0",
       decimals: token?.decimals || 18,
       precisionFractionalPlaces: 8
     });
   }, [amount, token]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (chain) {
       getPrices({ chainId: chain.chainId, currency: "USD" }).then(
         (prices2) => setPrices(prices2)
       );
     }
   }, [chain]);
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "xpay-flex xpay-flex-col xpay-globalBorder xpay-rounded-xl xpay-bg-gradient-to-r xpay-from-x_blue_300_20 xpay-to-x_blue_400_20 xpay-p-4 xpay-relative", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "xpay-flex xpay-justify-between", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "xpay-text-white xpay-opacity-60 xpay-text-xs sm:xpay-text-sm xpay-font-medium", children: type === "src" ? "You pay" : "You receive" }),
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "xpay-flex xpay-flex-col xpay-globalBorder xpay-rounded-xl xpay-bg-gradient-to-r xpay-from-x_blue_300_20 xpay-to-x_blue_400_20 xpay-p-4 xpay-relative", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "xpay-flex xpay-justify-between", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { className: "xpay-text-white xpay-opacity-60 xpay-text-xs sm:xpay-text-sm xpay-font-medium", children: type === "src" ? "You pay" : "You receive" }),
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
         "div",
         {
           className: `xpay-flex xpay-gap-2 xpay-items-center  xpay-text-xl sm:xpay-text-3xl ${type === "dst" ? "xpay-text-[rgba(54,129,198,1)]" : "xpay-text-white"}`,
           children: amountReadable
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
         UsdPrice,
         {
           prices,
@@ -2393,19 +2401,19 @@ var ConfirmationAmount = ({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "xpay-flex  xpay-gap-2 xpay-text-sm xpay-justify-center xpay-items-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-justify-center xpay-items-end xpay-gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "xpay-text-base sm:xpay-text-xl", children: token?.name }),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "xpay-flex xpay-justify-center xpay-items-center xpay-gap-1", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "xpay-text-[rgba(255,255,255,0.6)] xpay-text-xs xpay-text-right", children: chain?.displayName }) })
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "xpay-flex  xpay-gap-2 xpay-text-sm xpay-justify-center xpay-items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-justify-center xpay-items-end xpay-gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { className: "xpay-text-base sm:xpay-text-xl", children: token?.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "xpay-flex xpay-justify-center xpay-items-center xpay-gap-1", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { className: "xpay-text-[rgba(255,255,255,0.6)] xpay-text-xs xpay-text-right", children: chain?.displayName }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "xpay-w-10 xpay-h-10", children: token?.image ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "xpay-w-10 xpay-h-10", children: token?.image ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
         "img",
         {
           className: "xpay-w-10 xpay-h-10",
           src: token?.image,
           alt: token?.name
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
         UnknownTokenLogo,
         {
           tokenName: "?",
@@ -2416,42 +2424,227 @@ var ConfirmationAmount = ({
   ] }) });
 };
 
-// src/components/Spinner/index.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
-var Spinner = ({ width, height }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { role: "status", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
-    "svg",
+// src/components/TxConfigForm/ConfirmationView/ErrorView.tsx
+var import_jsx_runtime47 = require("react/jsx-runtime");
+var ErrorView = ({ txError, onClose }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "xpay-flex xpay-w-full xpay-justify-end xpay-items-center xpay-mx-auto xpay-p-2", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "xpay-cursor-pointer xpay-text-white", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(CloseIcon, {}) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-w-full xpay-justify-center xpay-items-center xpay-mx-auto xpay-p-2 xpay-gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ErrorIcon, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "xpay-flex xpay-flex-col", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "xpay-text-2xl xpay-font-bold xpay-leading-8 xpay-text-center xpay-text-white", children: "Transaction error!" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "xpay-text-sm xpay-text-center xpay-text-white xpay-opacity-50", children: parseWeb3Error(txError) }) })
+      ] })
+    ] })
+  ] });
+};
+
+// src/components/TxConfigForm/ConfirmationView/SuccessView.tsx
+var import_react10 = require("react");
+var import_jsx_runtime48 = require("react/jsx-runtime");
+var SuccessView = ({
+  onClose,
+  srcChain,
+  dstChain,
+  isExpressDelivery,
+  srcToken,
+  amount,
+  dstDisplayToken,
+  dstToken,
+  route,
+  txSuccessHash,
+  supportedChains
+}) => {
+  const dstTokenToDisplay = (0, import_react10.useMemo)(() => {
+    return dstDisplayToken ? dstDisplayToken : dstToken;
+  }, [dstDisplayToken, dstToken]);
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "xpay-flex xpay-w-full xpay-justify-end xpay-items-center xpay-mx-auto xpay-p-2", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "xpay-cursor-pointer xpay-text-white", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(CloseIcon, {}) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-w-full xpay-justify-center xpay-items-center xpay-mx-auto xpay-p-2 xpay-gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SuccessIcon, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "xpay-flex xpay-flex-col", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "xpay-text-2xl xpay-font-bold xpay-leading-8 xpay-text-center xpay-text-white", children: "Transaction success!" }) }),
+        srcChain?.chainId !== dstChain?.chainId ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("p", { className: "xpay-text-sm xpay-text-center xpay-text-white xpay-opacity-50", children: [
+          "Approximated time of delivery:",
+          " ",
+          isExpressDelivery ? "30 seconds" : "30 minutes"
+        ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_jsx_runtime48.Fragment, {})
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "xpay-flex xpay-gap-4 xpay-items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "xpay-flex xpay-gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "xpay-w-10 xpay-h-10", children: srcToken?.image ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+            "img",
+            {
+              className: "xpay-w-10 xpay-h-10",
+              src: srcToken?.image,
+              alt: srcToken?.name
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+            UnknownTokenLogo,
+            {
+              tokenName: "?",
+              className: "xpay-w-10 xpay-h-10"
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-items-start", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "xpay-flex", children: `${amount} ${srcToken?.symbol}` }),
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "xpay-text-sm xpay-text-center xpay-text-white xpay-opacity-50", children: srcChain?.displayName })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "xpay-w-3.5 xpay-h-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ArrowRightIcon, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "xpay-flex xpay-gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "xpay-w-10 xpay-h-10", children: dstTokenToDisplay?.image ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+            "img",
+            {
+              className: "xpay-w-10 xpay-h-10",
+              src: dstTokenToDisplay?.image,
+              alt: dstTokenToDisplay?.name
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+            UnknownTokenLogo,
+            {
+              tokenName: "?",
+              className: "xpay-w-10 xpay-h-10"
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-items-start", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "xpay-flex", children: [
+              weiToHumanReadable({
+                amount: route?.estAmountOut || "0",
+                decimals: dstTokenToDisplay?.decimals || 18,
+                precisionFractionalPlaces: 4
+              }),
+              " ",
+              dstTokenToDisplay?.symbol
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "xpay-text-sm xpay-text-center xpay-text-white xpay-opacity-50", children: dstChain?.displayName })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+        "a",
+        {
+          href: srcChain?.chainId !== dstChain?.chainId ? `${CCIP_EXPLORER}/tx/${txSuccessHash}` : `${supportedChains.find(
+            (chain) => chain.chainId === srcChain?.chainId
+          )?.transactionExplorer}/${txSuccessHash}`,
+          target: "_blank",
+          rel: "noreferrer",
+          className: "xpay-flex xpay-items-center xpay-gap-2 xpay-font-bold xpay-no-underline xpay-cursor-pointer xpay-text-center",
+          "aria-label": "Show the transaction in the chain explorer",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "xpay-bg-gradient-to-r xpay-from-x_blue_light xpay-to-x_blue_dark xpay-bg-clip-text xpay-text-transparent xpay-underline", children: "View details on Explorer" }),
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "xpay-w-3.5 xpay-h-3.5 xpay-bg-gradient-to-r xpay-text-x_blue_dark", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ArrowUpRightIcon, {}) })
+          ]
+        }
+      ) })
+    ] })
+  ] });
+};
+
+// src/components/TxConfigForm/ConfirmationView/index.tsx
+var import_jsx_runtime49 = require("react/jsx-runtime");
+var ConfirmationView = ({
+  txError,
+  onClose,
+  txSuccessHash,
+  srcChain,
+  dstChain,
+  isExpressDelivery,
+  srcToken,
+  amount,
+  dstDisplayToken,
+  dstToken,
+  route,
+  supportedChains,
+  approveTxLoading,
+  approveTxDone,
+  txLoading
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "xpay-flex xpay-flex-col xpay-gap-2 xpay-z-10 xpay-my-0 xpay-p-2 md:xpay-p-4 xpay-rounded-3xl xpay-overflow-hidden xpay-font-light sm:xpay-w-x_desktop xpay-w-screen", children: txError ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ErrorView, { txError, onClose }) : txSuccessHash ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    SuccessView,
     {
-      "aria-hidden": "true",
-      className: `xpay-w-${width} xpay-h-${height} xpay-text-gray-200 xpay-animate-spin dark:xpay-text-gray-600 xpay-fill-[rgba(54,129,198,1)]`,
-      viewBox: "0 0 100 101",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-          "path",
-          {
-            d: "M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-          "path",
+      onClose,
+      isExpressDelivery,
+      amount,
+      supportedChains,
+      txSuccessHash,
+      srcChain,
+      dstChain,
+      srcToken,
+      dstDisplayToken,
+      dstToken,
+      route
+    }
+  ) : (
+    // Tx Confirmation modal
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "xpay-flex xpay-w-full xpay-justify-between xpay-items-center xpay-mx-auto xpay-p-2 xpay-font-light ", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: "xpay-text-white xpay-text-xl", children: "Confirmation" }),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "xpay-flex xpay-w-full xpay-justify-end xpay-items-center xpay-mx-auto xpay-p-2", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+          "div",
           {
-            d: "M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z",
-            fill: "currentFill"
+            className: "xpay-cursor-pointer xpay-text-white",
+            onClick: onClose,
+            children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(CloseIcon, {})
           }
-        )
-      ]
-    }
+        ) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "xpay-flex xpay-flex-col xpay-gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        ConfirmationAmount,
+        {
+          amount: import_ethers5.ethers.utils.parseUnits(amount, srcToken?.decimals).toString(),
+          chain: srcChain,
+          token: srcToken,
+          type: "src"
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "xpay-flex xpay-justify-center  xpay-globalBorder xpay-rounded-xl xpay-p-[5px] xpay--mt-7 xpay--mb-6 ", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "xpay-flex xpay-items-center xpay-justify-center xpay-rounded-lg  xpay-w-8 xpay-h-8 xpay-bg-gradient-to-l xpay-from-[rgba(54,129,198,1)] xpay-to-[rgba(43,74,157,1)] ", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ArrowDownIcon, {}) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "xpay-flex xpay-flex-col xpay-gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        ConfirmationAmount,
+        {
+          amount: route?.estAmountOut || "0",
+          chain: dstChain,
+          token: dstDisplayToken ? dstDisplayToken : dstToken,
+          type: "dst"
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-globalBorder xpay-p-4 xpay-justify-center xpay-rounded-xl xpay-bg-[rgba(15,15,15,1)] xpay-relative", children: [
+        route?.transactions.approve && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "xpay-flex xpay-justify-between xpay-items-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "xpay-flex xpay-items-center xpay-gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(SignIcon, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: "xpay-opacity-50", children: approveTxLoading ? "Wait for approval confirmation" : "Approve token spending" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "xpay-flex xpay-items-center", children: [
+              approveTxLoading && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Spinner, { width: "5", height: "5" }),
+              approveTxDone && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "xpay-text-x_green xpay-w-5 xpay-h-5", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(CheckIcon, {}) })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "xpay-w-px xpay-h-6 xpay-mt-1 xpay-mb-1 xpay-ml-2.5 xpay-bg-white xpay-opacity-50" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "xpay-flex xpay-justify-between xpay-items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "xpay-flex xpay-items-center xpay-gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(SignIcon, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: "xpay-opacity-50", children: txLoading ? "Wait for transaction confirmation" : "Confirm transaction" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "xpay-flex xpay-items-center", children: txLoading && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Spinner, { width: "5", height: "5" }) })
+        ] })
+      ] })
+    ] })
   ) });
 };
 
+// src/components/TxConfigForm/ConnectWalletPrompt.tsx
+var import_jsx_runtime50 = require("react/jsx-runtime");
+var ConnectWalletPrompt = ({ onClose }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-gap-2 xpay-z-10 xpay-my-0 xpay-p-2 md:xpay-p-4 xpay-rounded-3xl xpay-overflow-hidden xpay-font-light sm:xpay-w-x_desktop xpay-w-screen", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "xpay-flex xpay-w-full xpay-justify-end xpay-items-center xpay-mx-auto xpay-p-2", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "xpay-cursor-pointer xpay-text-white", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(CloseIcon, {}) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("p", { className: "xpay-text-xl xpay-font-bold xpay-leading-8 xpay-text-center xpay-text-white", children: "Please connect the wallet first." })
+  ] });
+};
+
 // src/components/TxConfigForm/Form.tsx
-var import_jsx_runtime47 = (
-  // Connect wallet modal
-  require("react/jsx-runtime")
-);
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var Form = ({
   integratorId,
   dstChainId,
@@ -2459,7 +2652,7 @@ var Form = ({
   customContractCalls,
   desc,
   supportedChains,
-  retrunTransactions,
+  returnTransactions,
   dstDisplayTokenAddr,
   wagmiConfig,
   onSubmit,
@@ -2490,17 +2683,8 @@ var Form = ({
   const [approveTxLoading, setApproveTxLoading] = (0, import_react11.useState)(false);
   const [approveTxDone, setApproveTxDone] = (0, import_react11.useState)(false);
   const [transactionError, setTransactionError] = (0, import_react11.useState)(null);
-  const currentRouteRequestNonce = (0, import_react11.useRef)(0);
-  const prevAllowanceValuesRef = (0, import_react11.useRef)({
-    srcChainId: srcChain?.chainId,
-    srcTokenAddress: srcToken?.address,
-    routeTo: import_ethers5.ethers.constants.AddressZero
-  });
-  const currentAllowanceRequestNonce = (0, import_react11.useRef)(0);
-  const [isAllowanceLoading, setIsAllowanceLoading] = (0, import_react11.useState)(false);
-  const [srcTokenAllowance, setSrcTokenAllowance] = (0, import_react11.useState)("0");
+  const routeAbortController = (0, import_react11.useRef)(null);
   const { sendTransaction } = (0, import_wagmi2.useSendTransaction)({ config: wagmiConfig });
-  const debouncedAmount = useDebounce(amount, 1e3);
   const account = (0, import_wagmi2.useAccount)();
   const { switchChainAsync } = (0, import_wagmi2.useSwitchChain)();
   (0, import_react11.useEffect)(() => {
@@ -2549,7 +2733,7 @@ var Form = ({
     })();
   }, [dstChain]);
   (0, import_react11.useEffect)(() => {
-    if (!(integratorId && srcChain && srcToken && dstChain && debouncedAmount && paymentToken && signer && slippage)) {
+    if (!(integratorId && srcChain && srcToken && dstChain && amount && paymentToken && signer && slippage)) {
       return;
     }
     setFormError("");
@@ -2562,84 +2746,52 @@ var Form = ({
       throw new Error(
         `Configuration error: selected token ($${srcToken.symbol} ${srcToken.name}) has unknown decimals param.`
       );
-    const nonce = Date.now();
-    currentRouteRequestNonce.current = nonce;
-    getRoute({
-      integratorId,
-      fromAmount: import_ethers5.ethers.utils.parseUnits(debouncedAmount, srcToken.decimals).toString(),
-      fromAddress: signer || ADDRESSES[srcChain.chainId].FeeCollector,
-      fromChain: srcChain.chainId,
-      fromToken: srcToken.address,
-      toAddress: signer || ADDRESSES[dstChain.chainId].FeeCollector,
-      toChain: dstChainId,
-      toToken: dstTokenAddr,
-      paymentToken: paymentToken.address,
-      slippage: Number(slippage),
-      expressDelivery: expressChecked,
-      customContractCalls
-    }).then((response) => {
-      if (nonce !== currentRouteRequestNonce.current) {
-        return;
-      }
+    if (routeAbortController.current) {
+      routeAbortController.current.abort(DEFAULT_REQUEST_ABORT_MSG);
+    }
+    routeAbortController.current = new AbortController();
+    getRoute(
+      {
+        integratorId,
+        fromAmount: import_ethers6.ethers.utils.parseUnits(amount, srcToken.decimals).toString(),
+        fromAddress: signer || ADDRESSES[srcChain.chainId].FeeCollector,
+        fromChain: srcChain.chainId,
+        fromToken: srcToken.address,
+        toAddress: signer || ADDRESSES[dstChain.chainId].FeeCollector,
+        toChain: dstChainId,
+        toToken: dstTokenAddr,
+        paymentToken: paymentToken.address,
+        slippage: Number(slippage),
+        expressDelivery: expressChecked,
+        customContractCalls
+      },
+      routeAbortController.current.signal
+    ).then((response) => {
       setRoute(response);
       setFormError("");
+      setIsGettingRoute(false);
+      routeAbortController.current = null;
     }).catch((err) => {
-      setFormError(err.message);
+      if (err !== DEFAULT_REQUEST_ABORT_MSG) {
+        setFormError(err.message);
+      }
     }).finally(() => {
-      setIsGettingRoute(false);
       clearTimeout(timeout);
     });
   }, [
+    amount,
     signer,
     srcChain,
     srcToken,
-    debouncedAmount,
     paymentToken,
     slippage,
     expressChecked
   ]);
-  (0, import_react11.useEffect)(() => {
-    (async () => {
-      if (!signer || !srcToken?.address || !srcChain?.publicRpcUrls[0] || srcToken?.address === import_ethers5.ethers.constants.AddressZero) {
-        return;
-      }
-      if (route && route.transactions.swap?.to) {
-        const {
-          srcChainId: prevFromChainId,
-          srcTokenAddress: prevFromTokenAddress,
-          routeTo: prevRouteTo
-        } = prevAllowanceValuesRef.current;
-        const hasChanges = srcChain?.chainId !== prevFromChainId || srcToken?.address !== prevFromTokenAddress || route.transactions.swap?.to !== prevRouteTo;
-        if (!hasChanges) {
-          return;
-        }
-        prevAllowanceValuesRef.current = {
-          srcChainId: srcChain?.chainId,
-          srcTokenAddress: srcToken?.address,
-          routeTo: route.transactions.swap?.to
-        };
-        const nonce = Date.now();
-        currentAllowanceRequestNonce.current = nonce;
-        setIsAllowanceLoading(true);
-        const allowanceResponse = await getAllowanceOf(
-          srcToken?.address,
-          signer,
-          route.transactions.swap.to,
-          srcChain?.publicRpcUrls[0]
-        );
-        if (nonce !== currentAllowanceRequestNonce.current) {
-          return;
-        }
-        setSrcTokenAllowance(allowanceResponse);
-        setIsAllowanceLoading(false);
-      }
-    })();
-  }, [srcChain, srcToken?.address, signer, setSrcTokenAllowance, route]);
   (0, import_react11.useEffect)(() => {
     if (srcChain) {
       setPaymentToken(
         srcChain.tokens.find(
-          (token) => token.address.toLowerCase() === import_ethers5.ethers.constants.AddressZero.toLowerCase()
+          (token) => token.address.toLowerCase() === import_ethers6.ethers.constants.AddressZero.toLowerCase()
         )
       );
     }
@@ -2649,16 +2801,12 @@ var Form = ({
     setFormError("");
     setIsGettingRoute(false);
     setRoute(void 0);
-    const nonce = Date.now();
-    currentRouteRequestNonce.current = nonce;
   }, [srcToken]);
   (0, import_react11.useEffect)(() => {
     setSrcToken(srcChain?.tokens[0]);
     setAmount("");
     setIsGettingRoute(false);
     setRoute(void 0);
-    const nonce = Date.now();
-    currentRouteRequestNonce.current = nonce;
   }, [srcChain]);
   (0, import_react11.useEffect)(() => {
     if (srcChain) {
@@ -2675,9 +2823,6 @@ var Form = ({
   (0, import_react11.useEffect)(() => {
     setBackdropClickDisabled(executingTransactions);
   }, [executingTransactions]);
-  const isAllowanceOk = (0, import_react11.useMemo)(() => {
-    return srcToken?.address === import_ethers5.ethers.constants.AddressZero || Number(srcTokenAllowance) >= Number(amount);
-  }, [srcToken, amount, srcTokenAllowance]);
   const triggerTx = (0, import_react11.useCallback)(async () => {
     if (!route) {
       return;
@@ -2685,10 +2830,10 @@ var Form = ({
     setExecutingTransactions(true);
     setBackdropClickDisabled(true);
     setTransactionError(null);
-    if (route.transactions.approve && !isAllowanceOk) {
+    if (route.transactions.approve) {
       setApproveTxDone(false);
       const { to, data } = route.transactions.approve;
-      await sendTransaction(
+      sendTransaction(
         {
           to,
           data
@@ -2704,7 +2849,7 @@ var Form = ({
             });
             setApproveTxLoading(false);
             setApproveTxDone(true);
-            swap(route);
+            await swap(route);
           },
           onError: (error) => {
             setTransactionError(`Approval failed: ${error.message}`);
@@ -2721,17 +2866,15 @@ var Form = ({
     signer,
     srcChain,
     srcToken,
-    debouncedAmount,
     paymentToken,
     slippage,
     expressChecked,
-    amount,
-    srcTokenAllowance
+    amount
   ]);
   const swap = (0, import_react11.useCallback)(
     async (route2) => {
       const { to, value, data } = route2.transactions.swap;
-      await sendTransaction(
+      sendTransaction(
         {
           to,
           value: BigInt(value),
@@ -2759,23 +2902,14 @@ var Form = ({
         }
       );
     },
-    [
-      route,
-      signer,
-      srcChain,
-      srcToken,
-      debouncedAmount,
-      paymentToken,
-      slippage,
-      expressChecked
-    ]
+    [route, signer, srcChain, srcToken, paymentToken, slippage, expressChecked]
   );
   const handleSubmit = (event) => {
     event.preventDefault();
     if (!route) {
       return;
     }
-    if (retrunTransactions) {
+    if (returnTransactions) {
       onSubmit(route);
       return;
     }
@@ -2785,7 +2919,6 @@ var Form = ({
     await switchChainAsync({ chainId: Number(srcChain?.chainId) });
   };
   const swapButton = (0, import_react11.useMemo)(() => {
-    let disabled = false;
     if (transactionError) {
       return {
         text: transactionError,
@@ -2799,14 +2932,14 @@ var Form = ({
         text: "Connect wallet",
         fn: () => {
         },
-        disabled
+        disabled: false
       };
     }
     if (signer && srcChain && srcChain.chainId !== account.chainId?.toString()) {
       return {
         text: "Switch chain",
         fn: handleSwitchChain,
-        disabled
+        disabled: false
       };
     }
     if (!amount) {
@@ -2817,7 +2950,7 @@ var Form = ({
         disabled: true
       };
     }
-    if (amount && balances && srcToken && srcToken.decimals && balances[srcToken?.address] !== void 0 && !import_ethers5.ethers.utils.parseUnits(amount, srcToken.decimals).lt(balances[srcToken?.address] || "0")) {
+    if (amount && balances && srcToken && srcToken.decimals && balances[srcToken?.address] !== void 0 && !import_ethers6.ethers.utils.parseUnits(amount, srcToken.decimals).lt(balances[srcToken?.address] || "0")) {
       return {
         text: "Insufficient balance",
         fn: () => {
@@ -2833,231 +2966,54 @@ var Form = ({
         disabled: true
       };
     }
-    if (isAllowanceLoading) {
-      return {
-        text: `Checking allowance`,
-        fn: () => {
-        },
-        disabled: true
-      };
-    }
     return {
       text: "Submit",
       fn: () => {
       },
-      disabled
+      disabled: false
     };
   }, [
     account,
     srcToken,
     srcChain,
-    isAllowanceOk,
     amount,
     balances,
     signer,
     transactionError,
-    route,
-    isAllowanceLoading
+    route
   ]);
   const isExpressDelivery = (0, import_react11.useMemo)(() => {
-    let expressDeliveryFee;
-    if (!route?.xSwapFees || !route?.xSwapFees.expressDeliveryFee) {
-      expressDeliveryFee = safeBigNumberFrom("0");
-    } else {
-      expressDeliveryFee = safeBigNumberFrom(
-        route?.xSwapFees.expressDeliveryFee
-      );
-    }
-    if (expressDeliveryFee.gt("0")) {
-      return true;
-    }
-    return false;
+    const expressDeliveryFee = !route?.xSwapFees || !route?.xSwapFees.expressDeliveryFee ? safeBigNumberFrom("0") : safeBigNumberFrom(route?.xSwapFees.expressDeliveryFee);
+    return expressDeliveryFee.gt("0");
   }, [route]);
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_jsx_runtime47.Fragment, { children: !signer ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-gap-2 xpay-z-10 xpay-my-0 xpay-p-2 md:xpay-p-4 xpay-rounded-3xl xpay-overflow-hidden xpay-font-light sm:xpay-w-x_desktop xpay-w-screen", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "xpay-flex xpay-w-full xpay-justify-end xpay-items-center xpay-mx-auto xpay-p-2", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-      "div",
-      {
-        className: "xpay-cursor-pointer xpay-text-white",
-        onClick: onClose,
-        children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(CloseIcon, {})
-      }
-    ) }),
-    " ",
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "xpay-text-xl xpay-font-bold xpay-leading-8 xpay-text-center xpay-text-white", children: "Please connect the wallet first." })
-  ] }) : executingTransactions ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "xpay-flex xpay-flex-col xpay-gap-2 xpay-z-10 xpay-my-0 xpay-p-2 md:xpay-p-4 xpay-rounded-3xl xpay-overflow-hidden xpay-font-light sm:xpay-w-x_desktop xpay-w-screen", children: transactionError ? (
-    // Tx Error modal
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "xpay-flex xpay-w-full xpay-justify-end xpay-items-center xpay-mx-auto xpay-p-2", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-        "div",
-        {
-          className: "xpay-cursor-pointer xpay-text-white",
-          onClick: onClose,
-          children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(CloseIcon, {})
-        }
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-w-full xpay-justify-center xpay-items-center xpay-mx-auto xpay-p-2 xpay-gap-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ErrorIcon, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "xpay-flex xpay-flex-col", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "xpay-text-2xl xpay-font-bold xpay-leading-8 xpay-text-center xpay-text-white", children: "Transaction error!" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "xpay-text-sm xpay-text-center xpay-text-white xpay-opacity-50", children: parseWeb3Error(transactionError) }) })
-        ] })
-      ] })
-    ] })
-  ) : transactionSuccessHash ? (
-    // Tx Success modal
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "xpay-flex xpay-w-full xpay-justify-end xpay-items-center xpay-mx-auto xpay-p-2", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-        "div",
-        {
-          className: "xpay-cursor-pointer xpay-text-white",
-          onClick: onClose,
-          children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(CloseIcon, {})
-        }
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-w-full xpay-justify-center xpay-items-center xpay-mx-auto xpay-p-2 xpay-gap-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SuccessIcon, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "xpay-flex xpay-flex-col", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "xpay-text-2xl xpay-font-bold xpay-leading-8 xpay-text-center xpay-text-white", children: "Transaction success!" }) }),
-          srcChain?.chainId !== dstChain?.chainId ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("p", { className: "xpay-text-sm xpay-text-center xpay-text-white xpay-opacity-50", children: [
-            "Approximated time of delivery:",
-            " ",
-            isExpressDelivery ? "30 seconds" : "30 minutes"
-          ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_jsx_runtime47.Fragment, {})
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "xpay-flex xpay-gap-4 xpay-items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "xpay-flex xpay-gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "xpay-w-10 xpay-h-10", children: srcToken?.image ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-              "img",
-              {
-                className: "xpay-w-10 xpay-h-10",
-                src: srcToken?.image,
-                alt: srcToken?.name
-              }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-              UnknownTokenLogo,
-              {
-                tokenName: "?",
-                className: "xpay-w-10 xpay-h-10"
-              }
-            ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-items-start", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "xpay-flex", children: `${debouncedAmount} ${srcToken?.symbol}` }),
-              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "xpay-text-sm xpay-text-center xpay-text-white xpay-opacity-50", children: srcChain?.displayName })
-            ] })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "xpay-w-3.5 xpay-h-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ArrowRightIcon, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "xpay-flex xpay-gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "xpay-w-10 xpay-h-10", children: (dstDisplayToken ? dstDisplayToken : dstToken)?.image ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-              "img",
-              {
-                className: "xpay-w-10 xpay-h-10",
-                src: (dstDisplayToken ? dstDisplayToken : dstToken)?.image,
-                alt: (dstDisplayToken ? dstDisplayToken : dstToken)?.name
-              }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-              UnknownTokenLogo,
-              {
-                tokenName: "?",
-                className: "xpay-w-10 xpay-h-10"
-              }
-            ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-items-start", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "xpay-flex", children: [
-                weiToHumanReadable({
-                  amount: route?.estAmountOut || "0",
-                  decimals: (dstDisplayToken ? dstDisplayToken : dstToken)?.decimals || 18,
-                  precisionFractionalPlaces: 4
-                }),
-                " ",
-                (dstDisplayToken ? dstDisplayToken : dstToken)?.symbol
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "xpay-text-sm xpay-text-center xpay-text-white xpay-opacity-50", children: dstChain?.displayName })
-            ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
-          "a",
-          {
-            href: srcChain?.chainId !== dstChain?.chainId ? `${CCIP_EXPLORER}/tx/${transactionSuccessHash}` : `${supportedChains.find(
-              (chain) => chain.chainId === srcChain?.chainId
-            )?.transactionExplorer}/${transactionSuccessHash}`,
-            target: "_blank",
-            rel: "noreferrer",
-            className: "xpay-flex xpay-items-center xpay-gap-2 xpay-font-bold xpay-no-underline xpay-cursor-pointer xpay-text-center",
-            "aria-label": "Show the transaction in the chain explorer",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "xpay-bg-gradient-to-r xpay-from-x_blue_light xpay-to-x_blue_dark xpay-bg-clip-text xpay-text-transparent xpay-underline", children: "View details on Explorer" }),
-              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "xpay-w-3.5 xpay-h-3.5 xpay-bg-gradient-to-r xpay-text-x_blue_dark", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ArrowUpRightIcon, {}) })
-            ]
-          }
-        ) })
-      ] })
-    ] })
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx_runtime51.Fragment, { children: !signer ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ConnectWalletPrompt, { onClose }) : executingTransactions ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+    ConfirmationView,
+    {
+      txError: transactionError,
+      onClose,
+      txSuccessHash: transactionSuccessHash,
+      srcChain,
+      dstChain,
+      isExpressDelivery,
+      srcToken,
+      amount,
+      dstDisplayToken,
+      dstToken,
+      route,
+      supportedChains,
+      approveTxLoading,
+      approveTxDone,
+      txLoading
+    }
   ) : (
-    // Tx Confirmation modal
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "xpay-flex xpay-w-full xpay-justify-between xpay-items-center xpay-mx-auto xpay-p-2 xpay-font-light ", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "xpay-text-white xpay-text-xl", children: "Confirmation" }),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "xpay-flex xpay-w-full xpay-justify-end xpay-items-center xpay-mx-auto xpay-p-2", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-          "div",
-          {
-            className: "xpay-cursor-pointer xpay-text-white",
-            onClick: onClose,
-            children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(CloseIcon, {})
-          }
-        ) })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "xpay-flex xpay-flex-col xpay-gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-        ConfirmationAmount,
-        {
-          amount: import_ethers5.ethers.utils.parseUnits(debouncedAmount, srcToken?.decimals).toString(),
-          chain: srcChain,
-          token: srcToken,
-          type: "src"
-        }
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "xpay-flex xpay-justify-center  xpay-globalBorder xpay-rounded-xl xpay-p-[5px] xpay--mt-7 xpay--mb-6 ", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "xpay-flex xpay-items-center xpay-justify-center xpay-rounded-lg  xpay-w-8 xpay-h-8 xpay-bg-gradient-to-l xpay-from-[rgba(54,129,198,1)] xpay-to-[rgba(43,74,157,1)] ", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ArrowDownIcon, {}) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "xpay-flex xpay-flex-col xpay-gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-        ConfirmationAmount,
-        {
-          amount: route?.estAmountOut || "0",
-          chain: dstChain,
-          token: dstDisplayToken ? dstDisplayToken : dstToken,
-          type: "dst"
-        }
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-globalBorder xpay-p-4 xpay-justify-center xpay-rounded-xl xpay-bg-[rgba(15,15,15,1)] xpay-relative", children: [
-        route?.transactions.approve && !isAllowanceOk && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "xpay-flex xpay-justify-between xpay-items-center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "xpay-flex xpay-items-center xpay-gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SignIcon, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "xpay-opacity-50", children: approveTxLoading ? "Wait for approval confirmation" : "Approve token spending" })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "xpay-flex xpay-items-center", children: [
-              approveTxLoading && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Spinner, { width: "5", height: "5" }),
-              approveTxDone && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "xpay-text-x_green xpay-w-5 xpay-h-5", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(CheckIcon, {}) })
-            ] })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "xpay-w-px xpay-h-6 xpay-mt-1 xpay-mb-1 xpay-ml-2.5 xpay-bg-white xpay-opacity-50" })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "xpay-flex xpay-justify-between xpay-items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "xpay-flex xpay-items-center xpay-gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SignIcon, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "xpay-opacity-50", children: txLoading ? "Wait for transaction confirmation" : "Confirm transaction" })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "xpay-flex xpay-items-center", children: txLoading && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Spinner, { width: "5", height: "5" }) })
-        ] })
-      ] })
-    ] })
-  ) }) : (
     // XPay form
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
       "form",
       {
         className: "xpay-flex xpay-flex-col xpay-gap-2 xpay-z-10 xpay-my-0 p-2 md:xpay-p-4 xpay-rounded-3xl xpay-overflow-hidden xpay-font-light sm:xpay-w-x_desktop",
         onSubmit: handleSubmit,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
             TopBar,
             {
               signer,
@@ -3067,7 +3023,7 @@ var Form = ({
               onClose
             }
           ),
-          settingsShown && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          settingsShown && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
             Settings,
             {
               expressChecked,
@@ -3077,8 +3033,8 @@ var Form = ({
               setSlippage
             }
           ),
-          historyTabShown ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(History, { signer, supportedChains }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          historyTabShown ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(History, { signer, supportedChains }) : /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
               SwapPanel,
               {
                 amount,
@@ -3093,7 +3049,7 @@ var Form = ({
                 setSrcChain
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
               Summary,
               {
                 isGettingRoute,
@@ -3102,8 +3058,8 @@ var Form = ({
                 dstChain
               }
             ),
-            desc && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Description, { description: desc }),
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+            desc && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Description, { description: desc }),
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
               FeesDetails,
               {
                 route,
@@ -3116,8 +3072,8 @@ var Form = ({
                 isExpressDelivery
               }
             ),
-            formError.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ErrorField, { error: formError }),
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+            formError.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ErrorField, { error: formError }),
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
               Button,
               {
                 type: "submit",
@@ -3134,7 +3090,7 @@ var Form = ({
 };
 
 // src/components/TxConfigForm/index.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var TxConfigForm = ({
   integratorId,
   dstChainId,
@@ -3142,7 +3098,7 @@ var TxConfigForm = ({
   customContractCalls,
   desc,
   supportedChains,
-  retrunTransactions,
+  returnTransactions,
   dstDisplayTokenAddr,
   onSubmit,
   onClose
@@ -3160,13 +3116,13 @@ var TxConfigForm = ({
     () => getWagmiConfig(supportedChains),
     supportedChains
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_wagmi3.WagmiProvider, { config: wagmiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react_query.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_wagmi3.WagmiProvider, { config: wagmiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_react_query.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     "div",
     {
       className: "xpay-top-0 xpay-left-0 xpay-right-0 xpay-bottom-0 xpay-bg-[rgba(0,0,0,0.8)] xpay-fixed xpay-flex xpay-items-center xpay-justify-center xpay-z-10",
       onMouseDown: onBackdropClick,
-      children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "xpay-relative xpay-bg-black xpay-rounded-3xl xpay-overflow-auto xpay-text-white xpay-border-2 xpay-border-solid xpay-border-[rgba(255,255,255,0.1)]", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "xpay-relative xpay-bg-black xpay-rounded-3xl xpay-overflow-auto xpay-text-white xpay-border-2 xpay-border-solid xpay-border-[rgba(255,255,255,0.1)]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
           Form,
           {
             integratorId,
@@ -3176,14 +3132,14 @@ var TxConfigForm = ({
             desc,
             supportedChains,
             wagmiConfig,
-            retrunTransactions: !!retrunTransactions,
+            returnTransactions: !!returnTransactions,
             dstDisplayTokenAddr,
             onSubmit,
             onClose,
             setBackdropClickDisabled: (disabled) => setBackdropClickDisabled(disabled)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(PoweredBy, {})
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(PoweredBy, {})
       ] })
     }
   ) }) });
@@ -3195,7 +3151,7 @@ var openTxConfigForm = async ({
   customContractCalls,
   desc,
   supportedChains,
-  retrunTransactions,
+  returnTransactions,
   dstDisplayTokenAddr
 }) => {
   try {
@@ -3208,7 +3164,7 @@ var openTxConfigForm = async ({
         throw new Error("XPay was incorrectly initialised");
       }
       xpayRoot.render(
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
           TxConfigForm,
           {
             integratorId,
@@ -3217,10 +3173,10 @@ var openTxConfigForm = async ({
             customContractCalls,
             desc,
             supportedChains,
-            retrunTransactions,
+            returnTransactions,
             dstDisplayTokenAddr,
             onSubmit: (route) => {
-              if (retrunTransactions) {
+              if (returnTransactions) {
                 resolve(route);
               }
               if (xpayRoot) {
@@ -3243,7 +3199,7 @@ var openTxConfigForm = async ({
 
 // src/components/TxStatusButton/index.tsx
 var import_react13 = require("react");
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var TxStatusButton = ({ transaction }) => {
   const {
     srcChain: fromChain,
@@ -3265,20 +3221,20 @@ var TxStatusButton = ({ transaction }) => {
     () => isDone ? "xpay-border xpay-border-solid xpay-border-x_green_dark" : "xpay-border xpay-border-solid xpay-border-x_blue_dark",
     [isDone]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
     "div",
     {
       className: "xpay-flex xpay-gap-2",
       onClick: () => setIsWide((x) => !x),
       children: [
-        isWide && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+        isWide && /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
           "div",
           {
             className: `xpay-flex xpay-items-center xpay-min-w-60 sm:xpay-w-[520px] xpay-text-white xpay-h-14 xpay-px-4 xpay-text-sm xpay-gap-3 xpay-rounded-xl ${background} ${border}`,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "xpay-flex xpay-justify-between xpay-flex-col xpay-gap-2 sm:xpay-gap-5 sm:xpay-flex-row xpay-w-full", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "xpay-flex xpay-items-center xpay-gap-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "xpay-flex xpay-justify-between xpay-flex-col xpay-gap-2 sm:xpay-gap-5 sm:xpay-flex-row xpay-w-full", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "xpay-flex xpay-items-center xpay-gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                     "img",
                     {
                       className: "xpay-w-5 xpay-h-5",
@@ -3286,9 +3242,9 @@ var TxStatusButton = ({ transaction }) => {
                       alt: "source chain"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { children: fromChain }),
-                  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "xpay-w-3.5 xpay-h-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ArrowRightIcon, {}) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { children: fromChain }),
+                  /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "xpay-w-3.5 xpay-h-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ArrowRightIcon, {}) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                     "img",
                     {
                       className: "xpay-w-5 xpay-h-5",
@@ -3296,23 +3252,23 @@ var TxStatusButton = ({ transaction }) => {
                       alt: "to chain"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { children: toChain })
+                  /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { children: toChain })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "xpay-flex xpay-items-center xpay-gap-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { children: "Sent" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { children: fromAmount }),
-                  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { children: fromToken }),
-                  fromTokenImage ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "xpay-flex xpay-items-center xpay-gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { children: "Sent" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { children: fromAmount }),
+                  /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { children: fromToken }),
+                  fromTokenImage ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                     "img",
                     {
                       className: "xpay-w-5 xpay-h-5",
                       src: fromTokenImage,
                       alt: "source token"
                     }
-                  ) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(UnknownTokenLogo, { tokenName: "?" })
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(UnknownTokenLogo, { tokenName: "?" })
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                 "a",
                 {
                   href: explorer,
@@ -3320,21 +3276,21 @@ var TxStatusButton = ({ transaction }) => {
                   rel: "noreferrer",
                   className: "xpay-no-underline xpay-cursor-pointer",
                   "aria-label": "Show the transaction in the chain explorer",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "xpay-w-3.5 xpay-h-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ArrowUpRightIcon, {}) })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "xpay-w-3.5 xpay-h-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ArrowUpRightIcon, {}) })
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
           "div",
           {
             className: `xpay-text-white xpay-rounded-xl xpay-cursor-pointer ${background} ${border}`,
-            children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "xpay-flex xpay-gap-2 xpay-items-center xpay-h-14 xpay-w-20 xpay-justify-center", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ArrowLeftIcon, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "xpay-relative xpay-flex xpay-items-center xpay-justify-center xpay-w-9 xpay-h-9", children: isDone ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "xpay-text-x_green xpay-w-5 xpay-h-5", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(CheckIcon, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "xpay-w-5 xpay-h-5", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(XSwapLogo, {}) }),
-                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "xpay-absolute xpay-flex xpay-items-center xpay-justify-center xpay-top-0 xpay-left-0 xpay-right-0 xpay-bottom-0 xpay-text-white", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Spinner, { width: "10", height: "10" }) })
+            children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "xpay-flex xpay-gap-2 xpay-items-center xpay-h-14 xpay-w-20 xpay-justify-center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ArrowLeftIcon, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "xpay-relative xpay-flex xpay-items-center xpay-justify-center xpay-w-9 xpay-h-9", children: isDone ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "xpay-text-x_green xpay-w-5 xpay-h-5", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(CheckIcon, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "xpay-w-5 xpay-h-5", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(XSwapLogo, {}) }),
+                /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "xpay-absolute xpay-flex xpay-items-center xpay-justify-center xpay-top-0 xpay-left-0 xpay-right-0 xpay-bottom-0 xpay-text-white", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Spinner, { width: "10", height: "10" }) })
               ] }) })
             ] })
           }
@@ -3363,19 +3319,19 @@ var updateTransactionDoneInRenderedTransactions = (txHash) => {
   }
 };
 var renderTxStatusButtons = () => {
-  const buttons = renderedTransactions.map((item) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(TxStatusButton, { transaction: item }, item.txHash));
+  const buttons = renderedTransactions.map((item) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(TxStatusButton, { transaction: item }, item.txHash));
   if (xpayTxStatusRoot === null) {
     throw new Error("XPay was incorrectly initialised");
   }
   xpayTxStatusRoot.render(
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "xpay-fixed xpay-bottom-5 xpay-right-2 xpay-flex xpay-flex-col xpay-gap-3 xpay-pl-9 xpay-items-end xpay-w-full xpay-z-50", children: buttons })
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "xpay-fixed xpay-bottom-5 xpay-right-2 xpay-flex xpay-flex-col xpay-gap-3 xpay-pl-9 xpay-items-end xpay-w-full xpay-z-50", children: buttons })
   );
 };
 
 // src/components/Skeleton/index.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var Skeleton = ({ width, height }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     "div",
     {
       className: `xpay-bg-gray-700 xpay-rounded xpay-animate-pulse ${width} ${height}`
@@ -3387,13 +3343,13 @@ var Skeleton = ({ width, height }) => {
 var import_async_retry = __toESM(require("async-retry"));
 
 // src/services/blockchain.ts
-var import_ethers6 = require("ethers");
+var import_ethers7 = require("ethers");
 var getCustomTokenData = async (chain, tokenAddress) => {
   const rpcUrl = chain.publicRpcUrls[0];
-  const customTokenContract = new import_ethers6.ethers.Contract(
+  const customTokenContract = new import_ethers7.ethers.Contract(
     tokenAddress.toLowerCase(),
     ERC20Abi,
-    import_ethers6.ethers.getDefaultProvider(rpcUrl)
+    import_ethers7.ethers.getDefaultProvider(rpcUrl)
   );
   try {
     const query = async (contract, method, args = []) => {
@@ -3432,7 +3388,7 @@ var renderTxStatus = async (txChainId, txHash) => {
     ({ web3Environment, swapSupported }) => web3Environment === "mainnet" /* MAINNET */ && swapSupported
   );
   const messageSentEvent = txReceipt.logs?.find((log) => {
-    return log.topics[0] === import_ethers7.ethers.utils.id(MSG_SENT_EVENT_SIG);
+    return log.topics[0] === import_ethers8.ethers.utils.id(MSG_SENT_EVENT_SIG);
   });
   if (!messageSentEvent) {
     throw new Error(
@@ -3440,7 +3396,7 @@ var renderTxStatus = async (txChainId, txHash) => {
     );
   }
   const messageId = messageSentEvent?.topics[1];
-  const iface = new import_ethers7.ethers.utils.Interface(MSG_SENT_EVENT_ABI);
+  const iface = new import_ethers8.ethers.utils.Interface(MSG_SENT_EVENT_ABI);
   const decodedMessageSentEvent = iface.parseLog(messageSentEvent);
   if (!decodedMessageSentEvent) {
     throw new Error(
@@ -3490,16 +3446,16 @@ var renderTxStatus = async (txChainId, txHash) => {
   if (!xSwapRouterOnDestinationAddress) {
     throw new Error(`Unknown destination XSwapRouter!`);
   }
-  const xSwapRouterOnDestination = new import_ethers7.ethers.Contract(
+  const xSwapRouterOnDestination = new import_ethers8.ethers.Contract(
     xSwapRouterOnDestinationAddress,
     MSG_RECEIVED_EVENT_ABI,
-    import_ethers7.ethers.getDefaultProvider(
+    import_ethers8.ethers.getDefaultProvider(
       supportedChains.find((chain) => chain.chainId === dstChainId)?.publicRpcUrls[0]
     )
   );
   const msgReceivedEventFilter = {
     address: xSwapRouterOnDestinationAddress,
-    topics: [import_ethers7.ethers.utils.id(MSG_RECEIVED_EVENT_SIG), messageId]
+    topics: [import_ethers8.ethers.utils.id(MSG_RECEIVED_EVENT_SIG), messageId]
   };
   const onSuccess = async () => {
     updateTransactionDoneInRenderedTransactions(txHash);
@@ -3530,7 +3486,7 @@ var getTxReceipt = async (txChainId, txHash) => {
     const chain = (await getChains()).find(
       (chain2) => chain2.chainId === txChainId
     );
-    const provider = new import_ethers7.ethers.providers.JsonRpcProvider(
+    const provider = new import_ethers8.ethers.providers.JsonRpcProvider(
       chain?.publicRpcUrls[0]
     );
     return await (0, import_async_retry.default)(async () => {
@@ -3554,7 +3510,7 @@ var openTransactionModal = async ({
   dstToken,
   customContractCalls = [],
   desc,
-  retrunTransactions,
+  returnTransactions,
   dstDisplayToken
 }) => {
   const supportedChains = (await getChains()).filter(
@@ -3568,10 +3524,10 @@ var openTransactionModal = async ({
     customContractCalls,
     desc,
     supportedChains,
-    retrunTransactions,
+    returnTransactions,
     dstDisplayTokenAddr: dstDisplayToken
   });
-  if (retrunTransactions) {
+  if (returnTransactions) {
     return route.transactions;
   }
 };