@xswap-link/sdk 0.3.2 → 0.3.4

package/dist/index.mjs

@@ -23,7 +23,7 @@ var xswap_config_default = {
 };
 
 // package.json
-var version = "0.3.2";
+var version = "0.3.4";
 
 // src/components/WaitingForInit/index.tsx
 import { jsx } from "react/jsx-runtime";
@@ -145,10 +145,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) {
@@ -557,6 +558,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)"
@@ -568,17 +570,6 @@ var MSG_RECEIVED_EVENT_ABI = [
 
 // src/utils/contracts.ts
 var IERC20 = new ethers.utils.Interface(ERC20Abi);
-var getAllowanceOf = async (token, wallet, spender, rpcUrl) => {
-  const provider = ethers.getDefaultProvider(rpcUrl);
-  if (token === ethers.constants.AddressZero) {
-    return ethers.constants.MaxUint256.toString();
-  }
-  const contract = new ethers.Contract(token, ERC20Abi, provider);
-  return ethers.utils.formatUnits(
-    await contract.allowance(wallet, spender),
-    await contract.decimals()
-  );
-};
 var getBalances = async (chain, wallet) => {
   return {
     ...await getNativeBalance(chain, wallet),
@@ -631,7 +622,7 @@ var getErc20Balances = async (chain, wallet) => {
 };
 
 // src/utils/numbers.ts
-import { BigNumber as BigNumberJS } from "bignumber.js";
+import BigNumberJS from "bignumber.js";
 import { BigNumber as BigNumber2, utils } from "ethers";
 var safeBigNumberFrom = (value) => {
   BigNumberJS.config({ DECIMAL_PLACES: 0 });
@@ -746,7 +737,7 @@ var getDate = (blockTimestamp) => {
 };
 
 // src/services/integrations/monitoring.ts
-import { ethers as ethers6 } from "ethers";
+import { ethers as ethers7 } from "ethers";
 
 // src/components/Alert/index.tsx
 import { jsxs } from "react/jsx-runtime";
@@ -758,7 +749,7 @@ var Alert = ({ desc }) => {
 };
 
 // src/components/TxConfigForm/index.tsx
-import { useMemo as useMemo8, useState as useState10 } from "react";
+import { useMemo as useMemo9, useState as useState9 } from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { WagmiProvider } from "wagmi";
 
@@ -1354,33 +1345,16 @@ var PoweredBy = () => {
 // src/components/TxConfigForm/Form.tsx
 import {
   useCallback as useCallback3,
-  useEffect as useEffect8,
-  useMemo as useMemo7,
-  useRef as useRef3,
-  useState as useState9
+  useEffect as useEffect7,
+  useMemo as useMemo8,
+  useRef as useRef2,
+  useState as useState8
 } from "react";
-import { ethers as ethers4 } from "ethers";
+import { ethers as ethers5 } from "ethers";
 import { useAccount, useSendTransaction, useSwitchChain } from "wagmi";
 
-// src/hooks/useDebounce.tsx
-import { useEffect, useRef, useState } from "react";
-var useDebounce = (value, delay) => {
-  const timeoutRef = useRef(null);
-  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] = useState(value);
-  return debouncedValue;
-};
-
 // src/components/TxConfigForm/History.tsx
-import { useCallback as useCallback2, useEffect as useEffect2, useState as useState2 } from "react";
+import { useCallback as useCallback2, useEffect, useState } from "react";
 import BigNumberJS2 from "bignumber.js";
 
 // src/components/TxConfigForm/HistoryCard.tsx
@@ -1515,8 +1489,8 @@ var HistoryCard = ({ transaction, supportedChains }) => {
 // src/components/TxConfigForm/History.tsx
 import { jsx as jsx30, jsxs as jsxs10 } from "react/jsx-runtime";
 var History = ({ signer, supportedChains }) => {
-  const [fetchedHistory, setFetchedHistory] = useState2();
-  const [historyLoadedOnce, setHistoryLoadedOnce] = useState2(false);
+  const [fetchedHistory, setFetchedHistory] = useState();
+  const [historyLoadedOnce, setHistoryLoadedOnce] = useState(false);
   const fetchHistory = useCallback2(async () => {
     if (signer) {
       const downloadedHistory = await getHistory({ walletAddress: signer });
@@ -1577,7 +1551,7 @@ var History = ({ signer, supportedChains }) => {
       }
     }
   }, [signer, getHistory]);
-  useEffect2(() => {
+  useEffect(() => {
     if (!historyLoadedOnce) fetchHistory();
     const timer = setInterval(() => {
       fetchHistory();
@@ -1634,7 +1608,7 @@ var TopBar = ({
 };
 
 // src/components/TxConfigForm/Settings.tsx
-import { useState as useState3, useEffect as useEffect3 } from "react";
+import { useState as useState2, useEffect as useEffect2 } from "react";
 import { jsx as jsx32, jsxs as jsxs12 } from "react/jsx-runtime";
 var Settings = ({
   setSlippage,
@@ -1643,9 +1617,9 @@ var Settings = ({
   expressChecked,
   setExpressChecked
 }) => {
-  const [slippageActivePresetIndex, setSlippageActivePresetIndex] = useState3(1);
-  const [usingSlippageInput, setUsingSlippageInput] = useState3(false);
-  useEffect3(() => {
+  const [slippageActivePresetIndex, setSlippageActivePresetIndex] = useState2(1);
+  const [usingSlippageInput, setUsingSlippageInput] = useState2(false);
+  useEffect2(() => {
     if (!usingSlippageInput) {
       setSlippage(
         SLIPPAGE_PRESETS[slippageActivePresetIndex]?.toString() || "1.5"
@@ -1834,10 +1808,10 @@ var FeesDetails = ({
 };
 
 // src/components/TxConfigForm/Summary.tsx
-import { useEffect as useEffect5, useMemo as useMemo2, useState as useState5 } from "react";
+import { useEffect as useEffect4, useMemo as useMemo2, useState as useState4 } from "react";
 
 // src/components/TxConfigForm/UsdPrice.tsx
-import { useEffect as useEffect4, useState as useState4 } from "react";
+import { useEffect as useEffect3, useState as useState3 } from "react";
 import { Fragment as Fragment3, jsx as jsx34 } from "react/jsx-runtime";
 var UsdPrice = ({
   prices,
@@ -1845,8 +1819,8 @@ var UsdPrice = ({
   amount = "0",
   loading = false
 }) => {
-  const [usdPrice, setUsdPrice] = useState4("0.00");
-  useEffect4(() => {
+  const [usdPrice, setUsdPrice] = useState3("0.00");
+  useEffect3(() => {
     if (token && prices && prices[token.address]) {
       const newUsdPrice = (Number(amount) * Number(prices[token.address.toLowerCase()])).toFixed(2);
       setUsdPrice(newUsdPrice);
@@ -1875,7 +1849,7 @@ var Summary = ({
   dstToken,
   dstChain
 }) => {
-  const [prices, setPrices] = useState5();
+  const [prices, setPrices] = useState4();
   const amountReadable = useMemo2(
     () => weiToHumanReadable({
       amount: route?.estAmountOut || "0",
@@ -1884,7 +1858,7 @@ var Summary = ({
     }),
     [route, dstToken]
   );
-  useEffect5(() => {
+  useEffect4(() => {
     if (dstChain) {
       getPrices({ chainId: dstChain.chainId, currency: "USD" }).then(
         (prices2) => setPrices(prices2)
@@ -1942,10 +1916,10 @@ var Summary = ({
 };
 
 // src/components/TxConfigForm/SwapPanel.tsx
-import { useState as useState7, useEffect as useEffect6, useRef as useRef2, useMemo as useMemo5 } from "react";
+import { useState as useState6, useEffect as useEffect5, useRef, useMemo as useMemo5 } from "react";
 
 // src/components/TxConfigForm/TokenPicker.tsx
-import { useState as useState6, useMemo as useMemo3 } from "react";
+import { useState as useState5, useMemo as useMemo3 } from "react";
 import { createPortal } from "react-dom";
 import { Fragment as Fragment4, jsx as jsx37, jsxs as jsxs15 } from "react/jsx-runtime";
 var TokenPicker = ({
@@ -1956,7 +1930,7 @@ var TokenPicker = ({
   signer,
   balances
 }) => {
-  const [searchValue, setSearchValue] = useState6("");
+  const [searchValue, setSearchValue] = useState5("");
   const onBackdropClick = (e) => {
     e.stopPropagation();
     e.nativeEvent.stopImmediatePropagation();
@@ -2085,8 +2059,8 @@ var ChainListElement = ({
 };
 
 // src/components/TxConfigForm/BalanceComponent.tsx
-import { useMemo as useMemo4 } from "react";
 import BigNumber3 from "bignumber.js";
+import { useMemo as useMemo4 } from "react";
 import { Fragment as Fragment5, jsx as jsx39, jsxs as jsxs17 } from "react/jsx-runtime";
 var BalanceComponent = ({ srcToken, balances }) => {
   const balanceText = useMemo4(() => {
@@ -2133,10 +2107,10 @@ var SwapPanel = ({
   prices,
   supportedChains
 }) => {
-  const [chainListShown, setChainListShown] = useState7(false);
-  const [tokenListShown, setTokenListShown] = useState7(false);
-  const listRef = useRef2(null);
-  const buttonRef = useRef2(null);
+  const [chainListShown, setChainListShown] = useState6(false);
+  const [tokenListShown, setTokenListShown] = useState6(false);
+  const listRef = useRef(null);
+  const buttonRef = useRef(null);
   const handleClickOutside = (event) => {
     if (listRef.current && buttonRef.current) {
       const listElement = listRef.current;
@@ -2155,7 +2129,7 @@ var SwapPanel = ({
         })
       );
   };
-  useEffect6(() => {
+  useEffect5(() => {
     if (chainListShown) {
       document.addEventListener("mousedown", handleClickOutside);
       return () => document.removeEventListener("mousedown", handleClickOutside);
@@ -2319,16 +2293,50 @@ var Button = ({ children, onClick, type, disabled }) => {
 // src/components/TxConfigForm/Form.tsx
 import { getChainId, waitForTransactionReceipt } from "wagmi/actions";
 
-// src/components/TxConfigForm/ConfirmationAmount.tsx
-import { useEffect as useEffect7, useMemo as useMemo6, useState as useState8 } from "react";
+// src/components/TxConfigForm/ConfirmationView/index.tsx
+import { ethers as ethers4 } from "ethers";
+
+// src/components/Spinner/index.tsx
 import { jsx as jsx44, jsxs as jsxs19 } from "react/jsx-runtime";
+var Spinner = ({ width, height }) => {
+  return /* @__PURE__ */ jsx44("div", { role: "status", children: /* @__PURE__ */ jsxs19(
+    "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__ */ jsx44(
+          "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__ */ jsx44(
+          "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
+import { useEffect as useEffect6, useMemo as useMemo6, useState as useState7 } from "react";
+import { jsx as jsx45, jsxs as jsxs20 } from "react/jsx-runtime";
 var ConfirmationAmount = ({
   amount,
   token,
   chain,
   type
 }) => {
-  const [prices, setPrices] = useState8();
+  const [prices, setPrices] = useState7();
   const amountReadable = useMemo6(() => {
     return weiToHumanReadable({
       amount: amount || "0",
@@ -2336,24 +2344,24 @@ var ConfirmationAmount = ({
       precisionFractionalPlaces: 8
     });
   }, [amount, token]);
-  useEffect7(() => {
+  useEffect6(() => {
     if (chain) {
       getPrices({ chainId: chain.chainId, currency: "USD" }).then(
         (prices2) => setPrices(prices2)
       );
     }
   }, [chain]);
-  return /* @__PURE__ */ jsx44("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__ */ jsxs19("div", { className: "xpay-flex xpay-justify-between", children: [
-    /* @__PURE__ */ jsxs19("div", { className: "xpay-flex xpay-flex-col xpay-gap-1", children: [
-      /* @__PURE__ */ jsx44("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__ */ jsx44(
+  return /* @__PURE__ */ jsx45("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__ */ jsxs20("div", { className: "xpay-flex xpay-justify-between", children: [
+    /* @__PURE__ */ jsxs20("div", { className: "xpay-flex xpay-flex-col xpay-gap-1", children: [
+      /* @__PURE__ */ jsx45("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__ */ jsx45(
         "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__ */ jsx44(
+      /* @__PURE__ */ jsx45(
         UsdPrice,
         {
           prices,
@@ -2363,19 +2371,19 @@ var ConfirmationAmount = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs19("div", { className: "xpay-flex  xpay-gap-2 xpay-text-sm xpay-justify-center xpay-items-center", children: [
-      /* @__PURE__ */ jsxs19("div", { className: "xpay-flex xpay-flex-col xpay-justify-center xpay-items-end xpay-gap-1", children: [
-        /* @__PURE__ */ jsx44("p", { className: "xpay-text-base sm:xpay-text-xl", children: token?.name }),
-        /* @__PURE__ */ jsx44("div", { className: "xpay-flex xpay-justify-center xpay-items-center xpay-gap-1", children: /* @__PURE__ */ jsx44("p", { className: "xpay-text-[rgba(255,255,255,0.6)] xpay-text-xs xpay-text-right", children: chain?.displayName }) })
+    /* @__PURE__ */ jsxs20("div", { className: "xpay-flex  xpay-gap-2 xpay-text-sm xpay-justify-center xpay-items-center", children: [
+      /* @__PURE__ */ jsxs20("div", { className: "xpay-flex xpay-flex-col xpay-justify-center xpay-items-end xpay-gap-1", children: [
+        /* @__PURE__ */ jsx45("p", { className: "xpay-text-base sm:xpay-text-xl", children: token?.name }),
+        /* @__PURE__ */ jsx45("div", { className: "xpay-flex xpay-justify-center xpay-items-center xpay-gap-1", children: /* @__PURE__ */ jsx45("p", { className: "xpay-text-[rgba(255,255,255,0.6)] xpay-text-xs xpay-text-right", children: chain?.displayName }) })
       ] }),
-      /* @__PURE__ */ jsx44("div", { className: "xpay-w-10 xpay-h-10", children: token?.image ? /* @__PURE__ */ jsx44(
+      /* @__PURE__ */ jsx45("div", { className: "xpay-w-10 xpay-h-10", children: token?.image ? /* @__PURE__ */ jsx45(
         "img",
         {
           className: "xpay-w-10 xpay-h-10",
           src: token?.image,
           alt: token?.name
         }
-      ) : /* @__PURE__ */ jsx44(
+      ) : /* @__PURE__ */ jsx45(
         UnknownTokenLogo,
         {
           tokenName: "?",
@@ -2386,39 +2394,227 @@ var ConfirmationAmount = ({
   ] }) });
 };
 
-// src/components/Spinner/index.tsx
-import { jsx as jsx45, jsxs as jsxs20 } from "react/jsx-runtime";
-var Spinner = ({ width, height }) => {
-  return /* @__PURE__ */ jsx45("div", { role: "status", children: /* @__PURE__ */ jsxs20(
-    "svg",
+// src/components/TxConfigForm/ConfirmationView/ErrorView.tsx
+import { jsx as jsx46, jsxs as jsxs21 } from "react/jsx-runtime";
+var ErrorView = ({ txError, onClose }) => {
+  return /* @__PURE__ */ jsxs21("div", { children: [
+    /* @__PURE__ */ jsx46("div", { className: "xpay-flex xpay-w-full xpay-justify-end xpay-items-center xpay-mx-auto xpay-p-2", children: /* @__PURE__ */ jsx46("div", { className: "xpay-cursor-pointer xpay-text-white", onClick: onClose, children: /* @__PURE__ */ jsx46(CloseIcon, {}) }) }),
+    /* @__PURE__ */ jsxs21("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__ */ jsx46("div", { children: /* @__PURE__ */ jsx46(ErrorIcon, {}) }),
+      /* @__PURE__ */ jsxs21("div", { className: "xpay-flex xpay-flex-col", children: [
+        /* @__PURE__ */ jsx46("div", { children: /* @__PURE__ */ jsx46("p", { className: "xpay-text-2xl xpay-font-bold xpay-leading-8 xpay-text-center xpay-text-white", children: "Transaction error!" }) }),
+        /* @__PURE__ */ jsx46("div", { children: /* @__PURE__ */ jsx46("p", { className: "xpay-text-sm xpay-text-center xpay-text-white xpay-opacity-50", children: parseWeb3Error(txError) }) })
+      ] })
+    ] })
+  ] });
+};
+
+// src/components/TxConfigForm/ConfirmationView/SuccessView.tsx
+import { useMemo as useMemo7 } from "react";
+import { Fragment as Fragment6, jsx as jsx47, jsxs as jsxs22 } from "react/jsx-runtime";
+var SuccessView = ({
+  onClose,
+  srcChain,
+  dstChain,
+  isExpressDelivery,
+  srcToken,
+  amount,
+  dstDisplayToken,
+  dstToken,
+  route,
+  txSuccessHash,
+  supportedChains
+}) => {
+  const dstTokenToDisplay = useMemo7(() => {
+    return dstDisplayToken ? dstDisplayToken : dstToken;
+  }, [dstDisplayToken, dstToken]);
+  return /* @__PURE__ */ jsxs22("div", { children: [
+    /* @__PURE__ */ jsx47("div", { className: "xpay-flex xpay-w-full xpay-justify-end xpay-items-center xpay-mx-auto xpay-p-2", children: /* @__PURE__ */ jsx47("div", { className: "xpay-cursor-pointer xpay-text-white", onClick: onClose, children: /* @__PURE__ */ jsx47(CloseIcon, {}) }) }),
+    /* @__PURE__ */ jsxs22("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__ */ jsx47("div", { children: /* @__PURE__ */ jsx47(SuccessIcon, {}) }),
+      /* @__PURE__ */ jsxs22("div", { className: "xpay-flex xpay-flex-col", children: [
+        /* @__PURE__ */ jsx47("div", { children: /* @__PURE__ */ jsx47("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__ */ jsx47("div", { children: /* @__PURE__ */ jsxs22("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__ */ jsx47(Fragment6, {})
+      ] }),
+      /* @__PURE__ */ jsxs22("div", { className: "xpay-flex xpay-gap-4 xpay-items-center", children: [
+        /* @__PURE__ */ jsxs22("div", { className: "xpay-flex xpay-gap-2", children: [
+          /* @__PURE__ */ jsx47("div", { className: "xpay-w-10 xpay-h-10", children: srcToken?.image ? /* @__PURE__ */ jsx47(
+            "img",
+            {
+              className: "xpay-w-10 xpay-h-10",
+              src: srcToken?.image,
+              alt: srcToken?.name
+            }
+          ) : /* @__PURE__ */ jsx47(
+            UnknownTokenLogo,
+            {
+              tokenName: "?",
+              className: "xpay-w-10 xpay-h-10"
+            }
+          ) }),
+          /* @__PURE__ */ jsxs22("div", { className: "xpay-flex xpay-flex-col xpay-items-start", children: [
+            /* @__PURE__ */ jsx47("div", { className: "xpay-flex", children: `${amount} ${srcToken?.symbol}` }),
+            /* @__PURE__ */ jsx47("div", { className: "xpay-text-sm xpay-text-center xpay-text-white xpay-opacity-50", children: srcChain?.displayName })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx47("div", { className: "xpay-w-3.5 xpay-h-3.5", children: /* @__PURE__ */ jsx47(ArrowRightIcon, {}) }),
+        /* @__PURE__ */ jsxs22("div", { className: "xpay-flex xpay-gap-2", children: [
+          /* @__PURE__ */ jsx47("div", { className: "xpay-w-10 xpay-h-10", children: dstTokenToDisplay?.image ? /* @__PURE__ */ jsx47(
+            "img",
+            {
+              className: "xpay-w-10 xpay-h-10",
+              src: dstTokenToDisplay?.image,
+              alt: dstTokenToDisplay?.name
+            }
+          ) : /* @__PURE__ */ jsx47(
+            UnknownTokenLogo,
+            {
+              tokenName: "?",
+              className: "xpay-w-10 xpay-h-10"
+            }
+          ) }),
+          /* @__PURE__ */ jsxs22("div", { className: "xpay-flex xpay-flex-col xpay-items-start", children: [
+            /* @__PURE__ */ jsxs22("div", { className: "xpay-flex", children: [
+              weiToHumanReadable({
+                amount: route?.estAmountOut || "0",
+                decimals: dstTokenToDisplay?.decimals || 18,
+                precisionFractionalPlaces: 4
+              }),
+              " ",
+              dstTokenToDisplay?.symbol
+            ] }),
+            /* @__PURE__ */ jsx47("div", { className: "xpay-text-sm xpay-text-center xpay-text-white xpay-opacity-50", children: dstChain?.displayName })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx47("div", { children: /* @__PURE__ */ jsxs22(
+        "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__ */ jsx47("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__ */ jsx47("div", { className: "xpay-w-3.5 xpay-h-3.5 xpay-bg-gradient-to-r xpay-text-x_blue_dark", children: /* @__PURE__ */ jsx47(ArrowUpRightIcon, {}) })
+          ]
+        }
+      ) })
+    ] })
+  ] });
+};
+
+// src/components/TxConfigForm/ConfirmationView/index.tsx
+import { Fragment as Fragment7, jsx as jsx48, jsxs as jsxs23 } from "react/jsx-runtime";
+var ConfirmationView = ({
+  txError,
+  onClose,
+  txSuccessHash,
+  srcChain,
+  dstChain,
+  isExpressDelivery,
+  srcToken,
+  amount,
+  dstDisplayToken,
+  dstToken,
+  route,
+  supportedChains,
+  approveTxLoading,
+  approveTxDone,
+  txLoading
+}) => {
+  return /* @__PURE__ */ jsx48("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__ */ jsx48(ErrorView, { txError, onClose }) : txSuccessHash ? /* @__PURE__ */ jsx48(
+    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__ */ jsx45(
-          "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__ */ jsx45(
-          "path",
+      onClose,
+      isExpressDelivery,
+      amount,
+      supportedChains,
+      txSuccessHash,
+      srcChain,
+      dstChain,
+      srcToken,
+      dstDisplayToken,
+      dstToken,
+      route
+    }
+  ) : (
+    // Tx Confirmation modal
+    /* @__PURE__ */ jsxs23(Fragment7, { children: [
+      /* @__PURE__ */ jsxs23("div", { className: "xpay-flex xpay-w-full xpay-justify-between xpay-items-center xpay-mx-auto xpay-p-2 xpay-font-light ", children: [
+        /* @__PURE__ */ jsx48("p", { className: "xpay-text-white xpay-text-xl", children: "Confirmation" }),
+        /* @__PURE__ */ jsx48("div", { className: "xpay-flex xpay-w-full xpay-justify-end xpay-items-center xpay-mx-auto xpay-p-2", children: /* @__PURE__ */ jsx48(
+          "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__ */ jsx48(CloseIcon, {})
           }
-        )
-      ]
-    }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsx48("div", { className: "xpay-flex xpay-flex-col xpay-gap-2", children: /* @__PURE__ */ jsx48(
+        ConfirmationAmount,
+        {
+          amount: ethers4.utils.parseUnits(amount, srcToken?.decimals).toString(),
+          chain: srcChain,
+          token: srcToken,
+          type: "src"
+        }
+      ) }),
+      /* @__PURE__ */ jsx48("div", { className: "xpay-flex xpay-justify-center  xpay-globalBorder xpay-rounded-xl xpay-p-[5px] xpay--mt-7 xpay--mb-6 ", children: /* @__PURE__ */ jsx48("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__ */ jsx48(ArrowDownIcon, {}) }) }),
+      /* @__PURE__ */ jsx48("div", { className: "xpay-flex xpay-flex-col xpay-gap-2", children: /* @__PURE__ */ jsx48(
+        ConfirmationAmount,
+        {
+          amount: route?.estAmountOut || "0",
+          chain: dstChain,
+          token: dstDisplayToken ? dstDisplayToken : dstToken,
+          type: "dst"
+        }
+      ) }),
+      /* @__PURE__ */ jsxs23("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__ */ jsxs23(Fragment7, { children: [
+          /* @__PURE__ */ jsxs23("div", { className: "xpay-flex xpay-justify-between xpay-items-center", children: [
+            /* @__PURE__ */ jsxs23("div", { className: "xpay-flex xpay-items-center xpay-gap-2", children: [
+              /* @__PURE__ */ jsx48(SignIcon, {}),
+              /* @__PURE__ */ jsx48("p", { className: "xpay-opacity-50", children: approveTxLoading ? "Wait for approval confirmation" : "Approve token spending" })
+            ] }),
+            /* @__PURE__ */ jsxs23("div", { className: "xpay-flex xpay-items-center", children: [
+              approveTxLoading && /* @__PURE__ */ jsx48(Spinner, { width: "5", height: "5" }),
+              approveTxDone && /* @__PURE__ */ jsx48("div", { className: "xpay-text-x_green xpay-w-5 xpay-h-5", children: /* @__PURE__ */ jsx48(CheckIcon, {}) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx48("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__ */ jsxs23("div", { className: "xpay-flex xpay-justify-between xpay-items-center", children: [
+          /* @__PURE__ */ jsxs23("div", { className: "xpay-flex xpay-items-center xpay-gap-2", children: [
+            /* @__PURE__ */ jsx48(SignIcon, {}),
+            /* @__PURE__ */ jsx48("p", { className: "xpay-opacity-50", children: txLoading ? "Wait for transaction confirmation" : "Confirm transaction" })
+          ] }),
+          /* @__PURE__ */ jsx48("div", { className: "xpay-flex xpay-items-center", children: txLoading && /* @__PURE__ */ jsx48(Spinner, { width: "5", height: "5" }) })
+        ] })
+      ] })
+    ] })
   ) });
 };
 
+// src/components/TxConfigForm/ConnectWalletPrompt.tsx
+import { jsx as jsx49, jsxs as jsxs24 } from "react/jsx-runtime";
+var ConnectWalletPrompt = ({ onClose }) => {
+  return /* @__PURE__ */ jsxs24("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__ */ jsx49("div", { className: "xpay-flex xpay-w-full xpay-justify-end xpay-items-center xpay-mx-auto xpay-p-2", children: /* @__PURE__ */ jsx49("div", { className: "xpay-cursor-pointer xpay-text-white", onClick: onClose, children: /* @__PURE__ */ jsx49(CloseIcon, {}) }) }),
+    /* @__PURE__ */ jsx49("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
-import { Fragment as Fragment6, jsx as jsx46, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx50, jsxs as jsxs25 } from "react/jsx-runtime";
 var Form = ({
   integratorId,
   dstChainId,
@@ -2426,54 +2622,45 @@ var Form = ({
   customContractCalls,
   desc,
   supportedChains,
-  retrunTransactions,
+  returnTransactions,
   dstDisplayTokenAddr,
   wagmiConfig,
   onSubmit,
   onClose,
   setBackdropClickDisabled
 }) => {
-  const [signer, setSigner] = useState9();
-  const [dstChain, setDstChain] = useState9();
-  const [dstToken, setDstToken] = useState9();
-  const [dstDisplayToken, setDstDisplayToken] = useState9();
-  const [srcChain, setSrcChain] = useState9();
-  const [srcToken, setSrcToken] = useState9();
-  const [amount, setAmount] = useState9("");
-  const [paymentToken, setPaymentToken] = useState9();
-  const [route, setRoute] = useState9();
-  const [expressChecked, setExpressChecked] = useState9(true);
-  const [historyTabShown, setHistoryTabShown] = useState9(false);
-  const [isGettingRoute, setIsGettingRoute] = useState9(false);
-  const [prices, setPrices] = useState9();
-  const [balances, setBalances] = useState9();
-  const [settingsShown, setSettingsShown] = useState9(false);
-  const [formError, setFormError] = useState9("");
-  const [slippage, setSlippage] = useState9("1.5");
-  const [feesDetailsShown, setFeesDetailsShown] = useState9(false);
-  const [executingTransactions, setExecutingTransactions] = useState9(false);
-  const [transactionSuccessHash, setTransactionSuccessHash] = useState9();
-  const [txLoading, setTxLoading] = useState9(false);
-  const [approveTxLoading, setApproveTxLoading] = useState9(false);
-  const [approveTxDone, setApproveTxDone] = useState9(false);
-  const [transactionError, setTransactionError] = useState9(null);
-  const currentRouteRequestNonce = useRef3(0);
-  const prevAllowanceValuesRef = useRef3({
-    srcChainId: srcChain?.chainId,
-    srcTokenAddress: srcToken?.address,
-    routeTo: ethers4.constants.AddressZero
-  });
-  const currentAllowanceRequestNonce = useRef3(0);
-  const [isAllowanceLoading, setIsAllowanceLoading] = useState9(false);
-  const [srcTokenAllowance, setSrcTokenAllowance] = useState9("0");
+  const [signer, setSigner] = useState8();
+  const [dstChain, setDstChain] = useState8();
+  const [dstToken, setDstToken] = useState8();
+  const [dstDisplayToken, setDstDisplayToken] = useState8();
+  const [srcChain, setSrcChain] = useState8();
+  const [srcToken, setSrcToken] = useState8();
+  const [amount, setAmount] = useState8("");
+  const [paymentToken, setPaymentToken] = useState8();
+  const [route, setRoute] = useState8();
+  const [expressChecked, setExpressChecked] = useState8(true);
+  const [historyTabShown, setHistoryTabShown] = useState8(false);
+  const [isGettingRoute, setIsGettingRoute] = useState8(false);
+  const [prices, setPrices] = useState8();
+  const [balances, setBalances] = useState8();
+  const [settingsShown, setSettingsShown] = useState8(false);
+  const [formError, setFormError] = useState8("");
+  const [slippage, setSlippage] = useState8("1.5");
+  const [feesDetailsShown, setFeesDetailsShown] = useState8(false);
+  const [executingTransactions, setExecutingTransactions] = useState8(false);
+  const [transactionSuccessHash, setTransactionSuccessHash] = useState8();
+  const [txLoading, setTxLoading] = useState8(false);
+  const [approveTxLoading, setApproveTxLoading] = useState8(false);
+  const [approveTxDone, setApproveTxDone] = useState8(false);
+  const [transactionError, setTransactionError] = useState8(null);
+  const routeAbortController = useRef2(null);
   const { sendTransaction } = useSendTransaction({ config: wagmiConfig });
-  const debouncedAmount = useDebounce(amount, 1e3);
   const account = useAccount();
   const { switchChainAsync } = useSwitchChain();
-  useEffect8(() => {
+  useEffect7(() => {
     setSigner(account.address);
   }, [account.address]);
-  useEffect8(() => {
+  useEffect7(() => {
     const defaultChain = supportedChains.find(
       ({ chainId }) => chainId === account.chainId?.toString()
     );
@@ -2483,10 +2670,10 @@ var Form = ({
       )
     );
   }, [account.chainId]);
-  useEffect8(() => {
+  useEffect7(() => {
     setDstChain(supportedChains.find((chain) => chain.chainId === dstChainId));
   }, [supportedChains, dstChainId]);
-  useEffect8(() => {
+  useEffect7(() => {
     (async () => {
       if (!dstChain) {
         return;
@@ -2515,8 +2702,8 @@ var Form = ({
       }
     })();
   }, [dstChain]);
-  useEffect8(() => {
-    if (!(integratorId && srcChain && srcToken && dstChain && debouncedAmount && paymentToken && signer && slippage)) {
+  useEffect7(() => {
+    if (!(integratorId && srcChain && srcToken && dstChain && amount && paymentToken && signer && slippage)) {
       return;
     }
     setFormError("");
@@ -2529,122 +2716,83 @@ 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: ethers4.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: ethers5.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
   ]);
-  useEffect8(() => {
-    (async () => {
-      if (!signer || !srcToken?.address || !srcChain?.publicRpcUrls[0] || srcToken?.address === ethers4.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]);
-  useEffect8(() => {
+  useEffect7(() => {
     if (srcChain) {
       setPaymentToken(
         srcChain.tokens.find(
-          (token) => token.address.toLowerCase() === ethers4.constants.AddressZero.toLowerCase()
+          (token) => token.address.toLowerCase() === ethers5.constants.AddressZero.toLowerCase()
         )
       );
     }
   }, [srcChain]);
-  useEffect8(() => {
+  useEffect7(() => {
     setAmount("");
     setFormError("");
     setIsGettingRoute(false);
     setRoute(void 0);
-    const nonce = Date.now();
-    currentRouteRequestNonce.current = nonce;
   }, [srcToken]);
-  useEffect8(() => {
+  useEffect7(() => {
     setSrcToken(srcChain?.tokens[0]);
     setAmount("");
     setIsGettingRoute(false);
     setRoute(void 0);
-    const nonce = Date.now();
-    currentRouteRequestNonce.current = nonce;
   }, [srcChain]);
-  useEffect8(() => {
+  useEffect7(() => {
     if (srcChain) {
       getPrices({ chainId: srcChain.chainId, currency: "USD" }).then(
         (prices2) => setPrices(prices2)
       );
     }
   }, [srcChain]);
-  useEffect8(() => {
+  useEffect7(() => {
     if (srcChain && signer) {
       getBalances(srcChain, signer).then((balances2) => setBalances(balances2));
     }
   }, [srcChain, signer]);
-  useEffect8(() => {
+  useEffect7(() => {
     setBackdropClickDisabled(executingTransactions);
   }, [executingTransactions]);
-  const isAllowanceOk = useMemo7(() => {
-    return srcToken?.address === ethers4.constants.AddressZero || Number(srcTokenAllowance) >= Number(amount);
-  }, [srcToken, amount, srcTokenAllowance]);
   const triggerTx = useCallback3(async () => {
     if (!route) {
       return;
@@ -2652,10 +2800,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
@@ -2671,7 +2819,7 @@ var Form = ({
             });
             setApproveTxLoading(false);
             setApproveTxDone(true);
-            swap(route);
+            await swap(route);
           },
           onError: (error) => {
             setTransactionError(`Approval failed: ${error.message}`);
@@ -2688,17 +2836,15 @@ var Form = ({
     signer,
     srcChain,
     srcToken,
-    debouncedAmount,
     paymentToken,
     slippage,
     expressChecked,
-    amount,
-    srcTokenAllowance
+    amount
   ]);
   const swap = useCallback3(
     async (route2) => {
       const { to, value, data } = route2.transactions.swap;
-      await sendTransaction(
+      sendTransaction(
         {
           to,
           value: BigInt(value),
@@ -2726,23 +2872,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;
     }
@@ -2751,8 +2888,7 @@ var Form = ({
   const handleSwitchChain = async () => {
     await switchChainAsync({ chainId: Number(srcChain?.chainId) });
   };
-  const swapButton = useMemo7(() => {
-    let disabled = false;
+  const swapButton = useMemo8(() => {
     if (transactionError) {
       return {
         text: transactionError,
@@ -2766,14 +2902,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) {
@@ -2784,7 +2920,7 @@ var Form = ({
         disabled: true
       };
     }
-    if (amount && balances && srcToken && srcToken.decimals && balances[srcToken?.address] !== void 0 && !ethers4.utils.parseUnits(amount, srcToken.decimals).lt(balances[srcToken?.address] || "0")) {
+    if (amount && balances && srcToken && srcToken.decimals && balances[srcToken?.address] !== void 0 && !ethers5.utils.parseUnits(amount, srcToken.decimals).lt(balances[srcToken?.address] || "0")) {
       return {
         text: "Insufficient balance",
         fn: () => {
@@ -2800,234 +2936,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 = useMemo7(() => {
-    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 isExpressDelivery = useMemo8(() => {
+    const expressDeliveryFee = !route?.xSwapFees || !route?.xSwapFees.expressDeliveryFee ? safeBigNumberFrom("0") : safeBigNumberFrom(route?.xSwapFees.expressDeliveryFee);
+    return expressDeliveryFee.gt("0");
   }, [route]);
-  return /* @__PURE__ */ jsx46(Fragment6, { children: !signer ? (
-    // Connect wallet modal
-    /* @__PURE__ */ jsxs21("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__ */ jsx46("div", { className: "xpay-flex xpay-w-full xpay-justify-end xpay-items-center xpay-mx-auto xpay-p-2", children: /* @__PURE__ */ jsx46(
-        "div",
-        {
-          className: "xpay-cursor-pointer xpay-text-white",
-          onClick: onClose,
-          children: /* @__PURE__ */ jsx46(CloseIcon, {})
-        }
-      ) }),
-      " ",
-      /* @__PURE__ */ jsx46("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__ */ jsx46("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__ */ jsxs21("div", { children: [
-      /* @__PURE__ */ jsx46("div", { className: "xpay-flex xpay-w-full xpay-justify-end xpay-items-center xpay-mx-auto xpay-p-2", children: /* @__PURE__ */ jsx46(
-        "div",
-        {
-          className: "xpay-cursor-pointer xpay-text-white",
-          onClick: onClose,
-          children: /* @__PURE__ */ jsx46(CloseIcon, {})
-        }
-      ) }),
-      /* @__PURE__ */ jsxs21("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__ */ jsx46("div", { children: /* @__PURE__ */ jsx46(ErrorIcon, {}) }),
-        /* @__PURE__ */ jsxs21("div", { className: "xpay-flex xpay-flex-col", children: [
-          /* @__PURE__ */ jsx46("div", { children: /* @__PURE__ */ jsx46("p", { className: "xpay-text-2xl xpay-font-bold xpay-leading-8 xpay-text-center xpay-text-white", children: "Transaction error!" }) }),
-          /* @__PURE__ */ jsx46("div", { children: /* @__PURE__ */ jsx46("p", { className: "xpay-text-sm xpay-text-center xpay-text-white xpay-opacity-50", children: parseWeb3Error(transactionError) }) })
-        ] })
-      ] })
-    ] })
-  ) : transactionSuccessHash ? (
-    // Tx Success modal
-    /* @__PURE__ */ jsxs21("div", { children: [
-      /* @__PURE__ */ jsx46("div", { className: "xpay-flex xpay-w-full xpay-justify-end xpay-items-center xpay-mx-auto xpay-p-2", children: /* @__PURE__ */ jsx46(
-        "div",
-        {
-          className: "xpay-cursor-pointer xpay-text-white",
-          onClick: onClose,
-          children: /* @__PURE__ */ jsx46(CloseIcon, {})
-        }
-      ) }),
-      /* @__PURE__ */ jsxs21("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__ */ jsx46("div", { children: /* @__PURE__ */ jsx46(SuccessIcon, {}) }),
-        /* @__PURE__ */ jsxs21("div", { className: "xpay-flex xpay-flex-col", children: [
-          /* @__PURE__ */ jsx46("div", { children: /* @__PURE__ */ jsx46("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__ */ jsx46("div", { children: /* @__PURE__ */ jsxs21("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__ */ jsx46(Fragment6, {})
-        ] }),
-        /* @__PURE__ */ jsxs21("div", { className: "xpay-flex xpay-gap-4 xpay-items-center", children: [
-          /* @__PURE__ */ jsxs21("div", { className: "xpay-flex xpay-gap-2", children: [
-            /* @__PURE__ */ jsx46("div", { className: "xpay-w-10 xpay-h-10", children: srcToken?.image ? /* @__PURE__ */ jsx46(
-              "img",
-              {
-                className: "xpay-w-10 xpay-h-10",
-                src: srcToken?.image,
-                alt: srcToken?.name
-              }
-            ) : /* @__PURE__ */ jsx46(
-              UnknownTokenLogo,
-              {
-                tokenName: "?",
-                className: "xpay-w-10 xpay-h-10"
-              }
-            ) }),
-            /* @__PURE__ */ jsxs21("div", { className: "xpay-flex xpay-flex-col xpay-items-start", children: [
-              /* @__PURE__ */ jsx46("div", { className: "xpay-flex", children: `${debouncedAmount} ${srcToken?.symbol}` }),
-              /* @__PURE__ */ jsx46("div", { className: "xpay-text-sm xpay-text-center xpay-text-white xpay-opacity-50", children: srcChain?.displayName })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx46("div", { className: "xpay-w-3.5 xpay-h-3.5", children: /* @__PURE__ */ jsx46(ArrowRightIcon, {}) }),
-          /* @__PURE__ */ jsxs21("div", { className: "xpay-flex xpay-gap-2", children: [
-            /* @__PURE__ */ jsx46("div", { className: "xpay-w-10 xpay-h-10", children: (dstDisplayToken ? dstDisplayToken : dstToken)?.image ? /* @__PURE__ */ jsx46(
-              "img",
-              {
-                className: "xpay-w-10 xpay-h-10",
-                src: (dstDisplayToken ? dstDisplayToken : dstToken)?.image,
-                alt: (dstDisplayToken ? dstDisplayToken : dstToken)?.name
-              }
-            ) : /* @__PURE__ */ jsx46(
-              UnknownTokenLogo,
-              {
-                tokenName: "?",
-                className: "xpay-w-10 xpay-h-10"
-              }
-            ) }),
-            /* @__PURE__ */ jsxs21("div", { className: "xpay-flex xpay-flex-col xpay-items-start", children: [
-              /* @__PURE__ */ jsxs21("div", { className: "xpay-flex", children: [
-                weiToHumanReadable({
-                  amount: route?.estAmountOut || "0",
-                  decimals: (dstDisplayToken ? dstDisplayToken : dstToken)?.decimals || 18,
-                  precisionFractionalPlaces: 4
-                }),
-                " ",
-                (dstDisplayToken ? dstDisplayToken : dstToken)?.symbol
-              ] }),
-              /* @__PURE__ */ jsx46("div", { className: "xpay-text-sm xpay-text-center xpay-text-white xpay-opacity-50", children: dstChain?.displayName })
-            ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx46("div", { children: /* @__PURE__ */ jsxs21(
-          "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__ */ jsx46("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__ */ jsx46("div", { className: "xpay-w-3.5 xpay-h-3.5 xpay-bg-gradient-to-r xpay-text-x_blue_dark", children: /* @__PURE__ */ jsx46(ArrowUpRightIcon, {}) })
-            ]
-          }
-        ) })
-      ] })
-    ] })
+  return /* @__PURE__ */ jsx50(Fragment8, { children: !signer ? /* @__PURE__ */ jsx50(ConnectWalletPrompt, { onClose }) : executingTransactions ? /* @__PURE__ */ jsx50(
+    ConfirmationView,
+    {
+      txError: transactionError,
+      onClose,
+      txSuccessHash: transactionSuccessHash,
+      srcChain,
+      dstChain,
+      isExpressDelivery,
+      srcToken,
+      amount,
+      dstDisplayToken,
+      dstToken,
+      route,
+      supportedChains,
+      approveTxLoading,
+      approveTxDone,
+      txLoading
+    }
   ) : (
-    // Tx Confirmation modal
-    /* @__PURE__ */ jsxs21(Fragment6, { children: [
-      /* @__PURE__ */ jsxs21("div", { className: "xpay-flex xpay-w-full xpay-justify-between xpay-items-center xpay-mx-auto xpay-p-2 xpay-font-light ", children: [
-        /* @__PURE__ */ jsx46("p", { className: "xpay-text-white xpay-text-xl", children: "Confirmation" }),
-        /* @__PURE__ */ jsx46("div", { className: "xpay-flex xpay-w-full xpay-justify-end xpay-items-center xpay-mx-auto xpay-p-2", children: /* @__PURE__ */ jsx46(
-          "div",
-          {
-            className: "xpay-cursor-pointer xpay-text-white",
-            onClick: onClose,
-            children: /* @__PURE__ */ jsx46(CloseIcon, {})
-          }
-        ) })
-      ] }),
-      /* @__PURE__ */ jsx46("div", { className: "xpay-flex xpay-flex-col xpay-gap-2", children: /* @__PURE__ */ jsx46(
-        ConfirmationAmount,
-        {
-          amount: ethers4.utils.parseUnits(debouncedAmount, srcToken?.decimals).toString(),
-          chain: srcChain,
-          token: srcToken,
-          type: "src"
-        }
-      ) }),
-      /* @__PURE__ */ jsx46("div", { className: "xpay-flex xpay-justify-center  xpay-globalBorder xpay-rounded-xl xpay-p-[5px] xpay--mt-7 xpay--mb-6 ", children: /* @__PURE__ */ jsx46("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__ */ jsx46(ArrowDownIcon, {}) }) }),
-      /* @__PURE__ */ jsx46("div", { className: "xpay-flex xpay-flex-col xpay-gap-2", children: /* @__PURE__ */ jsx46(
-        ConfirmationAmount,
-        {
-          amount: route?.estAmountOut || "0",
-          chain: dstChain,
-          token: dstDisplayToken ? dstDisplayToken : dstToken,
-          type: "dst"
-        }
-      ) }),
-      /* @__PURE__ */ jsxs21("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__ */ jsxs21(Fragment6, { children: [
-          /* @__PURE__ */ jsxs21("div", { className: "xpay-flex xpay-justify-between xpay-items-center", children: [
-            /* @__PURE__ */ jsxs21("div", { className: "xpay-flex xpay-items-center xpay-gap-2", children: [
-              /* @__PURE__ */ jsx46(SignIcon, {}),
-              /* @__PURE__ */ jsx46("p", { className: "xpay-opacity-50", children: approveTxLoading ? "Wait for approval confirmation" : "Approve token spending" })
-            ] }),
-            /* @__PURE__ */ jsxs21("div", { className: "xpay-flex xpay-items-center", children: [
-              approveTxLoading && /* @__PURE__ */ jsx46(Spinner, { width: "5", height: "5" }),
-              approveTxDone && /* @__PURE__ */ jsx46("div", { className: "xpay-text-x_green xpay-w-5 xpay-h-5", children: /* @__PURE__ */ jsx46(CheckIcon, {}) })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx46("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__ */ jsxs21("div", { className: "xpay-flex xpay-justify-between xpay-items-center", children: [
-          /* @__PURE__ */ jsxs21("div", { className: "xpay-flex xpay-items-center xpay-gap-2", children: [
-            /* @__PURE__ */ jsx46(SignIcon, {}),
-            /* @__PURE__ */ jsx46("p", { className: "xpay-opacity-50", children: txLoading ? "Wait for transaction confirmation" : "Confirm transaction" })
-          ] }),
-          /* @__PURE__ */ jsx46("div", { className: "xpay-flex xpay-items-center", children: txLoading && /* @__PURE__ */ jsx46(Spinner, { width: "5", height: "5" }) })
-        ] })
-      ] })
-    ] })
-  ) }) : (
     // XPay form
-    /* @__PURE__ */ jsxs21(
+    /* @__PURE__ */ jsxs25(
       "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__ */ jsx46(
+          /* @__PURE__ */ jsx50(
             TopBar,
             {
               signer,
@@ -3037,7 +2993,7 @@ var Form = ({
               onClose
             }
           ),
-          settingsShown && /* @__PURE__ */ jsx46(
+          settingsShown && /* @__PURE__ */ jsx50(
             Settings,
             {
               expressChecked,
@@ -3047,8 +3003,8 @@ var Form = ({
               setSlippage
             }
           ),
-          historyTabShown ? /* @__PURE__ */ jsx46(History, { signer, supportedChains }) : /* @__PURE__ */ jsxs21("div", { className: "xpay-flex xpay-flex-col xpay-gap-2", children: [
-            /* @__PURE__ */ jsx46(
+          historyTabShown ? /* @__PURE__ */ jsx50(History, { signer, supportedChains }) : /* @__PURE__ */ jsxs25("div", { className: "xpay-flex xpay-flex-col xpay-gap-2", children: [
+            /* @__PURE__ */ jsx50(
               SwapPanel,
               {
                 amount,
@@ -3063,7 +3019,7 @@ var Form = ({
                 setSrcChain
               }
             ),
-            /* @__PURE__ */ jsx46(
+            /* @__PURE__ */ jsx50(
               Summary,
               {
                 isGettingRoute,
@@ -3072,8 +3028,8 @@ var Form = ({
                 dstChain
               }
             ),
-            desc && /* @__PURE__ */ jsx46(Description, { description: desc }),
-            /* @__PURE__ */ jsx46(
+            desc && /* @__PURE__ */ jsx50(Description, { description: desc }),
+            /* @__PURE__ */ jsx50(
               FeesDetails,
               {
                 route,
@@ -3086,8 +3042,8 @@ var Form = ({
                 isExpressDelivery
               }
             ),
-            formError.length > 0 && /* @__PURE__ */ jsx46(ErrorField, { error: formError }),
-            /* @__PURE__ */ jsx46(
+            formError.length > 0 && /* @__PURE__ */ jsx50(ErrorField, { error: formError }),
+            /* @__PURE__ */ jsx50(
               Button,
               {
                 type: "submit",
@@ -3104,7 +3060,7 @@ var Form = ({
 };
 
 // src/components/TxConfigForm/index.tsx
-import { jsx as jsx47, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs26 } from "react/jsx-runtime";
 var TxConfigForm = ({
   integratorId,
   dstChainId,
@@ -3112,12 +3068,12 @@ var TxConfigForm = ({
   customContractCalls,
   desc,
   supportedChains,
-  retrunTransactions,
+  returnTransactions,
   dstDisplayTokenAddr,
   onSubmit,
   onClose
 }) => {
-  const [backdropClickDisabled, setBackdropClickDisabled] = useState10(false);
+  const [backdropClickDisabled, setBackdropClickDisabled] = useState9(false);
   const onBackdropClick = (e) => {
     e.stopPropagation();
     e.nativeEvent.stopImmediatePropagation();
@@ -3126,17 +3082,17 @@ var TxConfigForm = ({
     }
   };
   const queryClient = new QueryClient();
-  const wagmiConfig = useMemo8(
+  const wagmiConfig = useMemo9(
     () => getWagmiConfig(supportedChains),
     supportedChains
   );
-  return /* @__PURE__ */ jsx47(WagmiProvider, { config: wagmiConfig, children: /* @__PURE__ */ jsx47(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx51(WagmiProvider, { config: wagmiConfig, children: /* @__PURE__ */ jsx51(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx51(
     "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__ */ jsxs22("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__ */ jsx47(
+      children: /* @__PURE__ */ jsxs26("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__ */ jsx51(
           Form,
           {
             integratorId,
@@ -3146,14 +3102,14 @@ var TxConfigForm = ({
             desc,
             supportedChains,
             wagmiConfig,
-            retrunTransactions: !!retrunTransactions,
+            returnTransactions: !!returnTransactions,
             dstDisplayTokenAddr,
             onSubmit,
             onClose,
             setBackdropClickDisabled: (disabled) => setBackdropClickDisabled(disabled)
           }
         ),
-        /* @__PURE__ */ jsx47(PoweredBy, {})
+        /* @__PURE__ */ jsx51(PoweredBy, {})
       ] })
     }
   ) }) });
@@ -3165,7 +3121,7 @@ var openTxConfigForm = async ({
   customContractCalls,
   desc,
   supportedChains,
-  retrunTransactions,
+  returnTransactions,
   dstDisplayTokenAddr
 }) => {
   try {
@@ -3178,7 +3134,7 @@ var openTxConfigForm = async ({
         throw new Error("XPay was incorrectly initialised");
       }
       xpayRoot.render(
-        /* @__PURE__ */ jsx47(
+        /* @__PURE__ */ jsx51(
           TxConfigForm,
           {
             integratorId,
@@ -3187,10 +3143,10 @@ var openTxConfigForm = async ({
             customContractCalls,
             desc,
             supportedChains,
-            retrunTransactions,
+            returnTransactions,
             dstDisplayTokenAddr,
             onSubmit: (route) => {
-              if (retrunTransactions) {
+              if (returnTransactions) {
                 resolve(route);
               }
               if (xpayRoot) {
@@ -3212,8 +3168,8 @@ var openTxConfigForm = async ({
 };
 
 // src/components/TxStatusButton/index.tsx
-import { useMemo as useMemo9, useState as useState11 } from "react";
-import { Fragment as Fragment7, jsx as jsx48, jsxs as jsxs23 } from "react/jsx-runtime";
+import { useMemo as useMemo10, useState as useState10 } from "react";
+import { Fragment as Fragment9, jsx as jsx52, jsxs as jsxs27 } from "react/jsx-runtime";
 var TxStatusButton = ({ transaction }) => {
   const {
     srcChain: fromChain,
@@ -3226,29 +3182,29 @@ var TxStatusButton = ({ transaction }) => {
     isDone,
     explorer
   } = transaction;
-  const [isWide, setIsWide] = useState11(false);
-  const background = useMemo9(
+  const [isWide, setIsWide] = useState10(false);
+  const background = useMemo10(
     () => isDone ? "xpay-bg-[rgba(2,2,2,1)] xpay-bg-gradient-to-r xpay-from-[rgba(76,175,80,0.2)] xpay-to-[rgba(46,125,50,0.2)]" : "xpay-bg-[rgba(2,2,2,1)] xpay-bg-gradient-to-r xpay-from-[rgba(54,129,198,0.2)] xpay-to-[rgba(43,74,157,0.2)]",
     [isDone]
   );
-  const border = useMemo9(
+  const border = useMemo10(
     () => isDone ? "xpay-border xpay-border-solid xpay-border-x_green_dark" : "xpay-border xpay-border-solid xpay-border-x_blue_dark",
     [isDone]
   );
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs27(
     "div",
     {
       className: "xpay-flex xpay-gap-2",
       onClick: () => setIsWide((x) => !x),
       children: [
-        isWide && /* @__PURE__ */ jsxs23(
+        isWide && /* @__PURE__ */ jsxs27(
           "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__ */ jsxs23("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__ */ jsxs23("div", { className: "xpay-flex xpay-items-center xpay-gap-2", children: [
-                  /* @__PURE__ */ jsx48(
+              /* @__PURE__ */ jsxs27("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__ */ jsxs27("div", { className: "xpay-flex xpay-items-center xpay-gap-2", children: [
+                  /* @__PURE__ */ jsx52(
                     "img",
                     {
                       className: "xpay-w-5 xpay-h-5",
@@ -3256,9 +3212,9 @@ var TxStatusButton = ({ transaction }) => {
                       alt: "source chain"
                     }
                   ),
-                  /* @__PURE__ */ jsx48("div", { children: fromChain }),
-                  /* @__PURE__ */ jsx48("div", { className: "xpay-w-3.5 xpay-h-3.5", children: /* @__PURE__ */ jsx48(ArrowRightIcon, {}) }),
-                  /* @__PURE__ */ jsx48(
+                  /* @__PURE__ */ jsx52("div", { children: fromChain }),
+                  /* @__PURE__ */ jsx52("div", { className: "xpay-w-3.5 xpay-h-3.5", children: /* @__PURE__ */ jsx52(ArrowRightIcon, {}) }),
+                  /* @__PURE__ */ jsx52(
                     "img",
                     {
                       className: "xpay-w-5 xpay-h-5",
@@ -3266,23 +3222,23 @@ var TxStatusButton = ({ transaction }) => {
                       alt: "to chain"
                     }
                   ),
-                  /* @__PURE__ */ jsx48("div", { children: toChain })
+                  /* @__PURE__ */ jsx52("div", { children: toChain })
                 ] }),
-                /* @__PURE__ */ jsxs23("div", { className: "xpay-flex xpay-items-center xpay-gap-2", children: [
-                  /* @__PURE__ */ jsx48("div", { children: "Sent" }),
-                  /* @__PURE__ */ jsx48("div", { children: fromAmount }),
-                  /* @__PURE__ */ jsx48("div", { children: fromToken }),
-                  fromTokenImage ? /* @__PURE__ */ jsx48(
+                /* @__PURE__ */ jsxs27("div", { className: "xpay-flex xpay-items-center xpay-gap-2", children: [
+                  /* @__PURE__ */ jsx52("div", { children: "Sent" }),
+                  /* @__PURE__ */ jsx52("div", { children: fromAmount }),
+                  /* @__PURE__ */ jsx52("div", { children: fromToken }),
+                  fromTokenImage ? /* @__PURE__ */ jsx52(
                     "img",
                     {
                       className: "xpay-w-5 xpay-h-5",
                       src: fromTokenImage,
                       alt: "source token"
                     }
-                  ) : /* @__PURE__ */ jsx48(UnknownTokenLogo, { tokenName: "?" })
+                  ) : /* @__PURE__ */ jsx52(UnknownTokenLogo, { tokenName: "?" })
                 ] })
               ] }),
-              /* @__PURE__ */ jsx48(
+              /* @__PURE__ */ jsx52(
                 "a",
                 {
                   href: explorer,
@@ -3290,21 +3246,21 @@ var TxStatusButton = ({ transaction }) => {
                   rel: "noreferrer",
                   className: "xpay-no-underline xpay-cursor-pointer",
                   "aria-label": "Show the transaction in the chain explorer",
-                  children: /* @__PURE__ */ jsx48("div", { className: "xpay-w-3.5 xpay-h-3.5", children: /* @__PURE__ */ jsx48(ArrowUpRightIcon, {}) })
+                  children: /* @__PURE__ */ jsx52("div", { className: "xpay-w-3.5 xpay-h-3.5", children: /* @__PURE__ */ jsx52(ArrowUpRightIcon, {}) })
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ jsx48(
+        /* @__PURE__ */ jsx52(
           "div",
           {
             className: `xpay-text-white xpay-rounded-xl xpay-cursor-pointer ${background} ${border}`,
-            children: /* @__PURE__ */ jsxs23("div", { className: "xpay-flex xpay-gap-2 xpay-items-center xpay-h-14 xpay-w-20 xpay-justify-center", children: [
-              /* @__PURE__ */ jsx48(ArrowLeftIcon, {}),
-              /* @__PURE__ */ jsx48("div", { className: "xpay-relative xpay-flex xpay-items-center xpay-justify-center xpay-w-9 xpay-h-9", children: isDone ? /* @__PURE__ */ jsx48("div", { className: "xpay-text-x_green xpay-w-5 xpay-h-5", children: /* @__PURE__ */ jsx48(CheckIcon, {}) }) : /* @__PURE__ */ jsxs23(Fragment7, { children: [
-                /* @__PURE__ */ jsx48("div", { className: "xpay-w-5 xpay-h-5", children: /* @__PURE__ */ jsx48(XSwapLogo, {}) }),
-                /* @__PURE__ */ jsx48("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__ */ jsx48(Spinner, { width: "10", height: "10" }) })
+            children: /* @__PURE__ */ jsxs27("div", { className: "xpay-flex xpay-gap-2 xpay-items-center xpay-h-14 xpay-w-20 xpay-justify-center", children: [
+              /* @__PURE__ */ jsx52(ArrowLeftIcon, {}),
+              /* @__PURE__ */ jsx52("div", { className: "xpay-relative xpay-flex xpay-items-center xpay-justify-center xpay-w-9 xpay-h-9", children: isDone ? /* @__PURE__ */ jsx52("div", { className: "xpay-text-x_green xpay-w-5 xpay-h-5", children: /* @__PURE__ */ jsx52(CheckIcon, {}) }) : /* @__PURE__ */ jsxs27(Fragment9, { children: [
+                /* @__PURE__ */ jsx52("div", { className: "xpay-w-5 xpay-h-5", children: /* @__PURE__ */ jsx52(XSwapLogo, {}) }),
+                /* @__PURE__ */ jsx52("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__ */ jsx52(Spinner, { width: "10", height: "10" }) })
               ] }) })
             ] })
           }
@@ -3333,19 +3289,19 @@ var updateTransactionDoneInRenderedTransactions = (txHash) => {
   }
 };
 var renderTxStatusButtons = () => {
-  const buttons = renderedTransactions.map((item) => /* @__PURE__ */ jsx48(TxStatusButton, { transaction: item }, item.txHash));
+  const buttons = renderedTransactions.map((item) => /* @__PURE__ */ jsx52(TxStatusButton, { transaction: item }, item.txHash));
   if (xpayTxStatusRoot === null) {
     throw new Error("XPay was incorrectly initialised");
   }
   xpayTxStatusRoot.render(
-    /* @__PURE__ */ jsx48("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__ */ jsx52("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
-import { jsx as jsx49 } from "react/jsx-runtime";
+import { jsx as jsx53 } from "react/jsx-runtime";
 var Skeleton = ({ width, height }) => {
-  return /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx53(
     "div",
     {
       className: `xpay-bg-gray-700 xpay-rounded xpay-animate-pulse ${width} ${height}`
@@ -3357,13 +3313,13 @@ var Skeleton = ({ width, height }) => {
 import retry from "async-retry";
 
 // src/services/blockchain.ts
-import { ethers as ethers5 } from "ethers";
+import { ethers as ethers6 } from "ethers";
 var getCustomTokenData = async (chain, tokenAddress) => {
   const rpcUrl = chain.publicRpcUrls[0];
-  const customTokenContract = new ethers5.Contract(
+  const customTokenContract = new ethers6.Contract(
     tokenAddress.toLowerCase(),
     ERC20Abi,
-    ethers5.getDefaultProvider(rpcUrl)
+    ethers6.getDefaultProvider(rpcUrl)
   );
   try {
     const query = async (contract, method, args = []) => {
@@ -3402,7 +3358,7 @@ var renderTxStatus = async (txChainId, txHash) => {
     ({ web3Environment, swapSupported }) => web3Environment === "mainnet" /* MAINNET */ && swapSupported
   );
   const messageSentEvent = txReceipt.logs?.find((log) => {
-    return log.topics[0] === ethers6.utils.id(MSG_SENT_EVENT_SIG);
+    return log.topics[0] === ethers7.utils.id(MSG_SENT_EVENT_SIG);
   });
   if (!messageSentEvent) {
     throw new Error(
@@ -3410,7 +3366,7 @@ var renderTxStatus = async (txChainId, txHash) => {
     );
   }
   const messageId = messageSentEvent?.topics[1];
-  const iface = new ethers6.utils.Interface(MSG_SENT_EVENT_ABI);
+  const iface = new ethers7.utils.Interface(MSG_SENT_EVENT_ABI);
   const decodedMessageSentEvent = iface.parseLog(messageSentEvent);
   if (!decodedMessageSentEvent) {
     throw new Error(
@@ -3460,16 +3416,16 @@ var renderTxStatus = async (txChainId, txHash) => {
   if (!xSwapRouterOnDestinationAddress) {
     throw new Error(`Unknown destination XSwapRouter!`);
   }
-  const xSwapRouterOnDestination = new ethers6.Contract(
+  const xSwapRouterOnDestination = new ethers7.Contract(
     xSwapRouterOnDestinationAddress,
     MSG_RECEIVED_EVENT_ABI,
-    ethers6.getDefaultProvider(
+    ethers7.getDefaultProvider(
       supportedChains.find((chain) => chain.chainId === dstChainId)?.publicRpcUrls[0]
     )
   );
   const msgReceivedEventFilter = {
     address: xSwapRouterOnDestinationAddress,
-    topics: [ethers6.utils.id(MSG_RECEIVED_EVENT_SIG), messageId]
+    topics: [ethers7.utils.id(MSG_RECEIVED_EVENT_SIG), messageId]
   };
   const onSuccess = async () => {
     updateTransactionDoneInRenderedTransactions(txHash);
@@ -3500,7 +3456,7 @@ var getTxReceipt = async (txChainId, txHash) => {
     const chain = (await getChains()).find(
       (chain2) => chain2.chainId === txChainId
     );
-    const provider = new ethers6.providers.JsonRpcProvider(
+    const provider = new ethers7.providers.JsonRpcProvider(
       chain?.publicRpcUrls[0]
     );
     return await retry(async () => {
@@ -3524,7 +3480,7 @@ var openTransactionModal = async ({
   dstToken,
   customContractCalls = [],
   desc,
-  retrunTransactions,
+  returnTransactions,
   dstDisplayToken
 }) => {
   const supportedChains = (await getChains()).filter(
@@ -3538,10 +3494,10 @@ var openTransactionModal = async ({
     customContractCalls,
     desc,
     supportedChains,
-    retrunTransactions,
+    returnTransactions,
     dstDisplayTokenAddr: dstDisplayToken
   });
-  if (retrunTransactions) {
+  if (returnTransactions) {
     return route.transactions;
   }
 };