@xswap-link/sdk 0.2.5 → 0.3.0

package/dist/index.mjs

@@ -23,7 +23,7 @@ var xswap_config_default = {
 };
 
 // package.json
-var version = "0.2.5";
+var version = "0.3.0";
 
 // src/components/WaitingForInit/index.tsx
 import { jsx } from "react/jsx-runtime";
@@ -50,33 +50,37 @@ var WaitingForInit = () => {
 
 // src/config/init.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
-var initIndicatorRoot;
-var xswapRoot;
-var txStatusRoot;
-var initCompleted = false;
+var xpayRoot = null;
+var xpayInitIndicatorRoot = null;
+var xpayTxStatusRoot = null;
+var xPayInitCompleted = false;
+var isServer = typeof window === "undefined";
 var initDocument = () => {
-  if (typeof document === "undefined") {
-    throw new Error("Can't render XPay components from server side.");
+  if (isServer) {
+    return;
   }
-  createInitIndicatorRoot();
+  createXPayInitIndicatorRoot();
   Promise.all([
     createStyleElement(),
-    createXSwapRoot(),
-    createTxStatusRoot()
+    createXPayRoot(),
+    createXPayTxStatusRoot()
   ]).then(() => {
-    initCompleted = true;
+    xPayInitCompleted = true;
   });
 };
 var waitForInitialization = async () => {
-  if (!initCompleted) {
+  if (!xPayInitCompleted) {
     displayInitIndicator(true);
-    while (!initCompleted) {
+    while (!xPayInitCompleted) {
       await new Promise((resolve) => setTimeout(resolve, 10));
     }
     displayInitIndicator(false);
   }
 };
 var createStyleElement = async () => {
+  if (isServer) {
+    return;
+  }
   const css = await fetch(
     `${xswap_config_default.apiUrl}/sdk/css?${new URLSearchParams({
       data: JSON.stringify({ version })
@@ -87,27 +91,40 @@ var createStyleElement = async () => {
   style.textContent = text;
   document.body.appendChild(style);
 };
-var createXSwapRoot = async () => {
+var createXPayRoot = async () => {
+  if (isServer) {
+    return;
+  }
   const xswapElement = document.createElement("div");
-  xswapElement.setAttribute("id", "xswap-modal");
+  xswapElement.setAttribute("id", "xpay-root");
+  xswapElement.setAttribute("class", "xpay");
   document.body.appendChild(xswapElement);
-  xswapRoot = createRoot(xswapElement);
+  xpayRoot = createRoot(xswapElement);
 };
-var createTxStatusRoot = async () => {
+var createXPayTxStatusRoot = async () => {
+  if (isServer) {
+    return;
+  }
   const txStatusElement = document.createElement("div");
-  txStatusElement.setAttribute("id", "xswap-tx-status");
-  txStatusElement.setAttribute("class", "xswap-tx-status");
+  txStatusElement.setAttribute("id", "xpay-tx-status");
+  txStatusElement.setAttribute("class", "xpay-tx-status");
   document.body.appendChild(txStatusElement);
-  txStatusRoot = createRoot(txStatusElement);
+  xpayTxStatusRoot = createRoot(txStatusElement);
 };
-var createInitIndicatorRoot = () => {
+var createXPayInitIndicatorRoot = () => {
+  if (isServer) {
+    return;
+  }
   const initIndicatorElement = document.createElement("div");
-  initIndicatorElement.setAttribute("id", "xswap-init-indicator");
+  initIndicatorElement.setAttribute("id", "xpay-init-indicator");
   document.body.appendChild(initIndicatorElement);
-  initIndicatorRoot = createRoot(initIndicatorElement);
+  xpayInitIndicatorRoot = createRoot(initIndicatorElement);
 };
 var displayInitIndicator = (display) => {
-  display ? initIndicatorRoot.render(/* @__PURE__ */ jsx2(WaitingForInit, {})) : initIndicatorRoot.render("");
+  if (isServer || !xpayInitIndicatorRoot) {
+    return;
+  }
+  display ? xpayInitIndicatorRoot.render(/* @__PURE__ */ jsx2(WaitingForInit, {})) : xpayInitIndicatorRoot.render(null);
 };
 
 // src/services/api.ts
@@ -162,7 +179,7 @@ async function getTxStatus(payload) {
 }
 
 // src/services/integrations/customCalls/staking.ts
-import { ethers as ethers2 } from "ethers";
+import { ethers as ethers3 } from "ethers";
 
 // src/models/Addresses.ts
 var ContractName = /* @__PURE__ */ ((ContractName2) => {
@@ -534,13 +551,12 @@ var NUMBER_INPUT_REGEX = /^[0-9]*[.,]?[0-9]*$/;
 var SLIPPAGE_PRESETS = [0.5, 1.5, 3];
 var DELIVERY_TIME = 30 * 1e3 * 60;
 var EXPRESS_DELIVERY_TIME = 30 * 1e3;
-var EXPRESS_DELIVERY_LIMIT = 1e3;
 var BALANCES_CHUNK_SIZE = 500;
-var ROUTE_TIMEOUT_MS = 5e3;
+var ROUTE_TIMEOUT_MS = 1e4;
 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 = 1e4;
+var TX_RECEIPT_STATUS_LIFETIME = 6e4;
 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)"
@@ -552,6 +568,17 @@ 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),
@@ -638,6 +665,60 @@ var isETHAddressValid = (address) => {
   return /^0x[a-fA-F0-9]{40}$/.test(address);
 };
 
+// src/utils/parseWeb3Error.ts
+import { ethers as ethers2 } from "ethers";
+function parseWeb3Error(error) {
+  const errorMessage = typeof error === "string" ? error : error?.message || "An unknown error occurred";
+  if (errorMessage.includes("User denied transaction signature") || errorMessage.includes("User rejected the request")) {
+    return "Transaction was cancelled.";
+  }
+  if (errorMessage.includes("insufficient funds")) {
+    return "Insufficient funds to complete the transaction.";
+  }
+  if (errorMessage.includes("gas price too low")) {
+    return "Gas price is too low. Please increase the gas price and try again.";
+  }
+  if (errorMessage.includes("nonce too low")) {
+    return "Transaction nonce is too low. Please reset your account in MetaMask and try again.";
+  }
+  if (errorMessage.includes("execution reverted")) {
+    const revertReason = errorMessage.match(/reason: (.+?)(?:, method|$)/)?.[1];
+    return revertReason ? `Transaction failed: ${revertReason}` : "Transaction failed during contract execution.";
+  }
+  if (errorMessage.includes("exceeds block gas limit")) {
+    return "Transaction exceeded gas limit. Please try again with a higher gas limit.";
+  }
+  if (errorMessage.includes("network error") || errorMessage.includes("connection error")) {
+    return "Network error. Please check your internet connection and try again.";
+  }
+  if (errorMessage.includes("MetaMask Tx Signature:")) {
+    return "MetaMask error: " + errorMessage.split("MetaMask Tx Signature:")[1].trim();
+  }
+  if (error.code) {
+    switch (error.code) {
+      case ethers2.errors.INVALID_ARGUMENT:
+        return "Invalid argument provided to the transaction.";
+      case ethers2.errors.MISSING_ARGUMENT:
+        return "Missing required argument for the transaction.";
+      case ethers2.errors.UNEXPECTED_ARGUMENT:
+        return "Unexpected argument provided to the transaction.";
+      case ethers2.errors.CALL_EXCEPTION:
+        return "Contract call failed. The transaction might have been reverted.";
+      case ethers2.errors.INSUFFICIENT_FUNDS:
+        return "Insufficient funds to complete the transaction.";
+      case ethers2.errors.NONCE_EXPIRED:
+        return "Transaction nonce has expired. Please try again.";
+      case ethers2.errors.REPLACEMENT_UNDERPRICED:
+        return "Replacement transaction underpriced. Please increase the gas price.";
+      case ethers2.errors.UNPREDICTABLE_GAS_LIMIT:
+        return "Unable to estimate gas limit. The transaction might fail.";
+      default:
+        return "An error occurred: " + error.message;
+    }
+  }
+  return "An error occurred while processing the transaction. Please try again.";
+}
+
 // src/utils/index.ts
 import { format } from "date-fns";
 var deepMergeObjects = (obj1, obj2) => {
@@ -665,19 +746,19 @@ var getDate = (blockTimestamp) => {
 };
 
 // src/services/integrations/monitoring.ts
-import { ethers as ethers5 } from "ethers";
+import { ethers as ethers6 } from "ethers";
 
 // src/components/Alert/index.tsx
 import { jsxs } from "react/jsx-runtime";
 var Alert = ({ desc }) => {
-  return /* @__PURE__ */ jsxs("div", { className: "border border-solid border-x_alert rounded-3xl text-x_alert_light text-xs py-0.5 px-2", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "xpay-border xpay-border-solid xpay-border-x_alert xpay-rounded-3xl xpay-text-x_alert_light xpay-text-xs xpay-py-0.5 xpay-px-2", children: [
     "\u26A0\uFE0F ",
     desc
   ] });
 };
 
 // src/components/TxConfigForm/index.tsx
-import { useMemo as useMemo8 } from "react";
+import { useMemo as useMemo8, useState as useState10 } from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { WagmiProvider } from "wagmi";
 
@@ -842,7 +923,7 @@ var CircularProgressIcon = () => {
   return /* @__PURE__ */ jsxs2(
     "svg",
     {
-      className: "animate-spin-slow text-white",
+      className: "animate-spin-slow xpay-text-white",
       width: "33",
       height: "33",
       viewBox: "0 0 33 33",
@@ -1154,21 +1235,129 @@ var XSwapLogo = () => {
   );
 };
 
+// src/components/icons/SignIcon.tsx
+import { jsx as jsx25 } from "react/jsx-runtime";
+var SignIcon = () => {
+  return /* @__PURE__ */ jsx25(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx25(
+        "path",
+        {
+          d: "M4 21V16.75L17.175 3.6C17.375 3.4 17.6 3.25 17.85 3.15C18.1 3.05 18.35 3 18.6 3C18.8667 3 19.1208 3.05 19.3625 3.15C19.6042 3.25 19.8167 3.4 20 3.6L21.4 5C21.6 5.18333 21.75 5.39583 21.85 5.6375C21.95 5.87917 22 6.13333 22 6.4C22 6.65 21.95 6.9 21.85 7.15C21.75 7.4 21.6 7.625 21.4 7.825L8.25 21H4ZM6 19H7.4L17.225 9.2L16.525 8.475L15.8 7.775L6 17.6V19ZM16.525 8.475L15.8 7.775L17.225 9.2L16.525 8.475ZM14 21C15.2333 21 16.375 20.6917 17.425 20.075C18.475 19.4583 19 18.6 19 17.5C19 16.9 18.8417 16.3833 18.525 15.95C18.2083 15.5167 17.7833 15.1417 17.25 14.825L15.775 16.3C16.1583 16.4667 16.4583 16.65 16.675 16.85C16.8917 17.05 17 17.2667 17 17.5C17 17.8833 16.6958 18.2292 16.0875 18.5375C15.4792 18.8458 14.7833 19 14 19C13.7167 19 13.4792 19.0958 13.2875 19.2875C13.0958 19.4792 13 19.7167 13 20C13 20.2833 13.0958 20.5208 13.2875 20.7125C13.4792 20.9042 13.7167 21 14 21ZM4.575 13.35L6.075 11.85C5.74167 11.7167 5.47917 11.5792 5.2875 11.4375C5.09583 11.2958 5 11.15 5 11C5 10.8 5.15 10.6 5.45 10.4C5.75 10.2 6.38333 9.89167 7.35 9.475C8.81667 8.84167 9.79167 8.26667 10.275 7.75C10.7583 7.23333 11 6.65 11 6C11 5.08333 10.6333 4.35417 9.9 3.8125C9.16667 3.27083 8.2 3 7 3C6.25 3 5.57917 3.13333 4.9875 3.4C4.39583 3.66667 3.94167 3.99167 3.625 4.375C3.44167 4.59167 3.36667 4.83333 3.4 5.1C3.43333 5.36667 3.55833 5.58333 3.775 5.75C3.99167 5.93333 4.23333 6.00833 4.5 5.975C4.76667 5.94167 4.99167 5.83333 5.175 5.65C5.40833 5.41667 5.66667 5.25 5.95 5.15C6.23333 5.05 6.58333 5 7 5C7.68333 5 8.1875 5.1 8.5125 5.3C8.8375 5.5 9 5.73333 9 6C9 6.23333 8.85417 6.44583 8.5625 6.6375C8.27083 6.82917 7.6 7.16667 6.55 7.65C5.21667 8.23333 4.29167 8.7625 3.775 9.2375C3.25833 9.7125 3 10.3 3 11C3 11.5333 3.14167 11.9875 3.425 12.3625C3.70833 12.7375 4.09167 13.0667 4.575 13.35Z",
+          fill: "white",
+          fillOpacity: "0.5"
+        }
+      )
+    }
+  );
+};
+
+// src/components/icons/SuccessIcon.tsx
+import { jsx as jsx26, jsxs as jsxs6 } from "react/jsx-runtime";
+var SuccessIcon = () => {
+  return /* @__PURE__ */ jsxs6(
+    "svg",
+    {
+      width: "86",
+      height: "85",
+      viewBox: "0 0 86 85",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx26(
+          "path",
+          {
+            d: "M38.0416 58.7916L63.0103 33.8228L58.052 28.8645L38.0416 48.8749L27.9478 38.7812L22.9895 43.7395L38.0416 58.7916ZM42.9999 77.9166C38.1006 77.9166 33.4964 76.9869 29.1874 75.1275C24.8784 73.2681 21.1301 70.7447 17.9426 67.5572C14.7551 64.3697 12.2317 60.6214 10.3723 56.3124C8.51294 52.0034 7.58325 47.3992 7.58325 42.4999C7.58325 37.6006 8.51294 32.9964 10.3723 28.6874C12.2317 24.3784 14.7551 20.6301 17.9426 17.4426C21.1301 14.2551 24.8784 11.7317 29.1874 9.87231C33.4964 8.01294 38.1006 7.08325 42.9999 7.08325C47.8992 7.08325 52.5034 8.01294 56.8124 9.87231C61.1214 11.7317 64.8697 14.2551 68.0572 17.4426C71.2447 20.6301 73.7681 24.3784 75.6275 28.6874C77.4869 32.9964 78.4166 37.6006 78.4166 42.4999C78.4166 47.3992 77.4869 52.0034 75.6275 56.3124C73.7681 60.6214 71.2447 64.3697 68.0572 67.5572C64.8697 70.7447 61.1214 73.2681 56.8124 75.1275C52.5034 76.9869 47.8992 77.9166 42.9999 77.9166ZM42.9999 70.8332C50.9096 70.8332 57.6093 68.0885 63.0989 62.5989C68.5885 57.1093 71.3332 50.4096 71.3332 42.4999C71.3332 34.5902 68.5885 27.8905 63.0989 22.401C57.6093 16.9114 50.9096 14.1666 42.9999 14.1666C35.0902 14.1666 28.3905 16.9114 22.901 22.401C17.4114 27.8905 14.6666 34.5902 14.6666 42.4999C14.6666 50.4096 17.4114 57.1093 22.901 62.5989C28.3905 68.0885 35.0902 70.8332 42.9999 70.8332Z",
+            fill: "url(#paint0_linear_1287_1610)"
+          }
+        ),
+        /* @__PURE__ */ jsx26("defs", { children: /* @__PURE__ */ jsxs6(
+          "linearGradient",
+          {
+            id: "paint0_linear_1287_1610",
+            x1: "7.58325",
+            y1: "7.08325",
+            x2: "82.2668",
+            y2: "11.4066",
+            gradientUnits: "userSpaceOnUse",
+            children: [
+              /* @__PURE__ */ jsx26("stop", { stopColor: "#4CAF50" }),
+              /* @__PURE__ */ jsx26("stop", { offset: "1", stopColor: "#2E7D32" })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+};
+
+// src/components/icons/ErrorIcon.tsx
+import { jsx as jsx27, jsxs as jsxs7 } from "react/jsx-runtime";
+var ErrorIcon = () => {
+  return /* @__PURE__ */ jsxs7(
+    "svg",
+    {
+      width: "81",
+      height: "80",
+      viewBox: "0 0 81 80",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx27("g", { id: "error_FILL0_wght400_GRAD0_opsz24 1", children: /* @__PURE__ */ jsx27(
+          "path",
+          {
+            id: "Vector",
+            d: "M40.5001 56.6667C41.4445 56.6667 42.2362 56.3473 42.8751 55.7084C43.514 55.0695 43.8334 54.2779 43.8334 53.3334C43.8334 52.389 43.514 51.5973 42.8751 50.9584C42.2362 50.3195 41.4445 50.0001 40.5001 50.0001C39.5556 50.0001 38.764 50.3195 38.1251 50.9584C37.4862 51.5973 37.1667 52.389 37.1667 53.3334C37.1667 54.2779 37.4862 55.0695 38.1251 55.7084C38.764 56.3473 39.5556 56.6667 40.5001 56.6667ZM37.1667 43.3334H43.8334V23.3334H37.1667V43.3334ZM40.5001 73.3334C35.889 73.3334 31.5556 72.4584 27.5001 70.7084C23.4445 68.9584 19.9167 66.5834 16.9167 63.5834C13.9167 60.5834 11.5417 57.0556 9.79175 53.0001C8.04175 48.9445 7.16675 44.6112 7.16675 40.0001C7.16675 35.389 8.04175 31.0556 9.79175 27.0001C11.5417 22.9445 13.9167 19.4167 16.9167 16.4167C19.9167 13.4167 23.4445 11.0417 27.5001 9.29175C31.5556 7.54175 35.889 6.66675 40.5001 6.66675C45.1112 6.66675 49.4445 7.54175 53.5001 9.29175C57.5556 11.0417 61.0834 13.4167 64.0834 16.4167C67.0834 19.4167 69.4584 22.9445 71.2084 27.0001C72.9584 31.0556 73.8334 35.389 73.8334 40.0001C73.8334 44.6112 72.9584 48.9445 71.2084 53.0001C69.4584 57.0556 67.0834 60.5834 64.0834 63.5834C61.0834 66.5834 57.5556 68.9584 53.5001 70.7084C49.4445 72.4584 45.1112 73.3334 40.5001 73.3334ZM40.5001 66.6667C47.9445 66.6667 54.2501 64.0834 59.4167 58.9167C64.5834 53.7501 67.1667 47.4445 67.1667 40.0001C67.1667 32.5556 64.5834 26.2501 59.4167 21.0834C54.2501 15.9167 47.9445 13.3334 40.5001 13.3334C33.0556 13.3334 26.7501 15.9167 21.5834 21.0834C16.4167 26.2501 13.8334 32.5556 13.8334 40.0001C13.8334 47.4445 16.4167 53.7501 21.5834 58.9167C26.7501 64.0834 33.0556 66.6667 40.5001 66.6667Z",
+            fill: "url(#paint0_linear_230_166)"
+          }
+        ) }),
+        /* @__PURE__ */ jsx27("defs", { children: /* @__PURE__ */ jsxs7(
+          "linearGradient",
+          {
+            id: "paint0_linear_230_166",
+            x1: "7.16675",
+            y1: "6.66675",
+            x2: "77.4571",
+            y2: "10.7358",
+            gradientUnits: "userSpaceOnUse",
+            children: [
+              /* @__PURE__ */ jsx27("stop", { stopColor: "#F44336" }),
+              /* @__PURE__ */ jsx27("stop", { offset: "1", stopColor: "#C62828" })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+};
+
 // src/components/TxConfigForm/PoweredBy.tsx
-import { jsx as jsx25, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs8 } from "react/jsx-runtime";
 var PoweredBy = () => {
-  return /* @__PURE__ */ jsxs6("div", { className: "flex justify-center items-center gap-2 my-3", children: [
-    /* @__PURE__ */ jsx25("span", { className: "text-x_grey", children: "Powered by" }),
-    /* @__PURE__ */ jsx25(XSwapBadgeIcon, {}),
-    /* @__PURE__ */ jsx25("span", { children: "\u2715" }),
-    /* @__PURE__ */ jsx25(ChainlinkCCIPIcon, {})
+  return /* @__PURE__ */ jsxs8("div", { className: "xpay-flex xpay-justify-center xpay-items-center xpay-gap-2 xpay-my-3", children: [
+    /* @__PURE__ */ jsx28("span", { className: "xpay-text-x_grey", children: "Powered by" }),
+    /* @__PURE__ */ jsx28(XSwapBadgeIcon, {}),
+    /* @__PURE__ */ jsx28("span", { children: "\u2715" }),
+    /* @__PURE__ */ jsx28(ChainlinkCCIPIcon, {})
   ] });
 };
 
 // src/components/TxConfigForm/Form.tsx
-import { useEffect as useEffect7, useState as useState8 } from "react";
-import { ethers as ethers3 } from "ethers";
-import { useAccount, useSwitchChain } from "wagmi";
+import {
+  useCallback as useCallback3,
+  useEffect as useEffect8,
+  useMemo as useMemo7,
+  useRef as useRef3,
+  useState as useState9
+} from "react";
+import { ethers as ethers4 } from "ethers";
+import { useAccount, useSendTransaction, useSwitchChain } from "wagmi";
 
 // src/hooks/useDebounce.tsx
 import { useEffect, useRef, useState } from "react";
@@ -1193,7 +1382,7 @@ import BigNumberJS2 from "bignumber.js";
 
 // src/components/TxConfigForm/HistoryCard.tsx
 import { useCallback, useMemo } from "react";
-import { Fragment, jsx as jsx26, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx29, jsxs as jsxs9 } from "react/jsx-runtime";
 var HistoryCard = ({ transaction, supportedChains }) => {
   const date = getDate(transaction.timestamp);
   const supportedTokens = useMemo(() => {
@@ -1239,14 +1428,14 @@ var HistoryCard = ({ transaction, supportedChains }) => {
   const targetChainData = supportedChains.find(
     (chain) => chain.chainId === transaction.targetChainId
   );
-  return /* @__PURE__ */ jsxs7("div", { className: "flex flex-col globalBorder rounded-xl bg-[rgb(15,15,15)] text-white text-xs sm:text-sm p-4 gap-3 mb-2", children: [
-    /* @__PURE__ */ jsxs7("div", { className: "flex w-full items-center justify-between", children: [
-      /* @__PURE__ */ jsx26("div", { className: "text-sm sm:text-base", children: date }),
-      /* @__PURE__ */ jsxs7("div", { className: "flex items-center", children: [
-        transaction.status === "IN_PROGRESS" && /* @__PURE__ */ jsx26("div", { className: "flex items-center", children: /* @__PURE__ */ jsx26("div", { className: "text-[rgb(250,200,100)]", children: "In progress" }) }),
-        transaction.status === "DONE" && /* @__PURE__ */ jsx26("div", { className: "flex items-center", children: /* @__PURE__ */ jsx26("div", { className: "text-[rgb(100,200,100)]", children: "Done" }) }),
-        transaction.status === "REVERTED" && /* @__PURE__ */ jsx26("div", { className: "flex items-center", children: /* @__PURE__ */ jsx26("div", { className: "text-[rgb(255,100,100)]", children: "Reverted" }) }),
-        /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsxs9("div", { className: "xpay-flex xpay-flex-col xpay-global-border xpay-rounded-xl xpay-bg-[rgb(15,15,15)] xpay-text-white xpay-text-xs sm:xpay-text-sm xpay-p-4 xpay-gap-3 xpay-mb-2", children: [
+    /* @__PURE__ */ jsxs9("div", { className: "xpay-flex xpay-w-full xpay-items-center xpay-justify-between", children: [
+      /* @__PURE__ */ jsx29("div", { className: "xpay-text-sm sm:xpay-text-base", children: date }),
+      /* @__PURE__ */ jsxs9("div", { className: "xpay-flex xpay-items-center", children: [
+        transaction.status === "IN_PROGRESS" && /* @__PURE__ */ jsx29("div", { className: "xpay-flex xpay-items-center", children: /* @__PURE__ */ jsx29("div", { className: "xpay-text-[rgb(250,200,100)]", children: "In progress" }) }),
+        transaction.status === "DONE" && /* @__PURE__ */ jsx29("div", { className: "xpay-flex xpay-items-center", children: /* @__PURE__ */ jsx29("div", { className: "xpay-text-[rgb(100,200,100)]", children: "Done" }) }),
+        transaction.status === "REVERTED" && /* @__PURE__ */ jsx29("div", { className: "xpay-flex xpay-items-center", children: /* @__PURE__ */ jsx29("div", { className: "xpay-text-[rgb(255,100,100)]", children: "Reverted" }) }),
+        /* @__PURE__ */ jsx29(
           "a",
           {
             href: `${supportedChains.find(
@@ -1254,65 +1443,65 @@ var HistoryCard = ({ transaction, supportedChains }) => {
             )?.transactionExplorer}/${transaction.hash}`,
             target: "_blank",
             rel: "noreferrer",
-            className: "ml-2 no-underline",
+            className: "xpay-ml-2 xpay-no-underline visited:xpay-text-white hover:xpay-text-white",
             "aria-label": "Show the transaction in the chain explorer",
-            children: /* @__PURE__ */ jsx26("div", { className: "w-3.5 h-3.5", children: /* @__PURE__ */ jsx26(ArrowUpRightIcon, {}) })
+            children: /* @__PURE__ */ jsx29("div", { className: "xpay-w-3.5 xpay-h-3.5", children: /* @__PURE__ */ jsx29(ArrowUpRightIcon, {}) })
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs7("div", { className: "flex justify-between flex-wrap gap-2", children: [
-      /* @__PURE__ */ jsxs7("div", { className: "flex items-center", children: [
-        /* @__PURE__ */ jsxs7("div", { className: "flex items-center", children: [
-          /* @__PURE__ */ jsx26(
+    /* @__PURE__ */ jsxs9("div", { className: "xpay-flex xpay-justify-between xpay-flex-wrap xpay-gap-2", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "xpay-flex xpay-items-center", children: [
+        /* @__PURE__ */ jsxs9("div", { className: "xpay-flex xpay-items-center", children: [
+          /* @__PURE__ */ jsx29(
             "img",
             {
               src: sourceChainData?.image,
               alt: `${sourceChainData?.name} logo`,
-              className: "w-5 h-5 mr-1"
+              className: "xpay-w-5 xpay-h-5 xpay-mr-1"
             }
           ),
-          /* @__PURE__ */ jsx26("div", { children: sourceChainData?.displayName })
+          /* @__PURE__ */ jsx29("div", { children: sourceChainData?.displayName })
         ] }),
-        /* @__PURE__ */ jsx26("div", { className: "w-3.5 h-3.5 my-0 mx-1.5", children: /* @__PURE__ */ jsx26(ArrowRightIcon, {}) }),
-        /* @__PURE__ */ jsxs7("div", { className: "flex items-center", children: [
-          /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsx29("div", { className: "xpay-w-3.5 xpay-h-3.5 xpay-my-0 xpay-mx-1.5", children: /* @__PURE__ */ jsx29(ArrowRightIcon, {}) }),
+        /* @__PURE__ */ jsxs9("div", { className: "xpay-flex xpay-items-center", children: [
+          /* @__PURE__ */ jsx29(
             "img",
             {
               src: targetChainData?.image,
               alt: `${targetChainData?.name} logo`,
-              className: "w-5 h-5 mr-1"
+              className: "xpay-w-5 xpay-h-5 xpay-mr-1"
             }
           ),
-          /* @__PURE__ */ jsx26("div", { children: targetChainData?.displayName })
+          /* @__PURE__ */ jsx29("div", { children: targetChainData?.displayName })
         ] })
       ] }),
-      /* @__PURE__ */ jsx26("div", { className: "flex items-center mb-2 last:mb-0", children: /* @__PURE__ */ jsxs7("div", { className: "flex items-center flex-wrap", children: [
-        /* @__PURE__ */ jsxs7("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ jsx29("div", { className: "xpay-flex xpay-items-center xpay-mb-2 last:xpay-mb-0", children: /* @__PURE__ */ jsxs9("div", { className: "xpay-flex xpay-items-center xpay-flex-wrap", children: [
+        /* @__PURE__ */ jsxs9("div", { className: "xpay-flex xpay-items-center", children: [
           Number(transferredAmount) < MINIMUM_DISPLAYED_TOKEN_AMOUNT ? `<${MINIMUM_DISPLAYED_TOKEN_AMOUNT}` : transferredAmount,
-          /* @__PURE__ */ jsx26("div", { className: "ml-1", children: tokenData?.symbol }),
-          tokenData?.image ? /* @__PURE__ */ jsx26(
+          /* @__PURE__ */ jsx29("div", { className: "xpay-ml-1", children: tokenData?.symbol }),
+          tokenData?.image ? /* @__PURE__ */ jsx29(
             "img",
             {
               src: tokenData?.image,
               alt: tokenData?.name || "",
-              className: "w-5 h-5 ml-1"
+              className: "xpay-w-5 xpay-h-5 xpay-ml-1"
             }
-          ) : /* @__PURE__ */ jsx26("div", { className: "flex items-center justify-center w-5 h-5 text-[10px] ml-1 rounded-full bg-[#272e40] text-[#e0e7fa]", children: tokenData?.symbol.substring(0, 1) })
+          ) : /* @__PURE__ */ jsx29("div", { className: "xpay-flex xpay-items-center xpay-justify-center xpay-w-5 xpay-h-5 xpay-text-[10px] xpay-ml-1 xpay-rounded-full xpay-bg-[#272e40] xpay-text-[#e0e7fa]", children: tokenData?.symbol.substring(0, 1) })
         ] }),
-        transaction.tokenOutAddress && /* @__PURE__ */ jsxs7(Fragment, { children: [
-          /* @__PURE__ */ jsx26("div", { className: "w-3.5 h-3.5 my-0 mx-1.5", children: /* @__PURE__ */ jsx26(ArrowRightIcon, {}) }),
-          /* @__PURE__ */ jsxs7("div", { className: "flex items-center", children: [
+        transaction.tokenOutAddress && /* @__PURE__ */ jsxs9(Fragment, { children: [
+          /* @__PURE__ */ jsx29("div", { className: "xpay-w-3.5 xpay-h-3.5 xpay-my-0 xpay-mx-1.5", children: /* @__PURE__ */ jsx29(ArrowRightIcon, {}) }),
+          /* @__PURE__ */ jsxs9("div", { className: "xpay-flex xpay-items-center", children: [
             Number(receivedAmount) < 1e-4 ? "<0.0001" : receivedAmount,
-            /* @__PURE__ */ jsx26("div", { className: "ml-1", children: tokenOutData?.symbol }),
-            tokenOutData?.image ? /* @__PURE__ */ jsx26(
+            /* @__PURE__ */ jsx29("div", { className: "xpay-ml-1", children: tokenOutData?.symbol }),
+            tokenOutData?.image ? /* @__PURE__ */ jsx29(
               "img",
               {
                 src: tokenOutData?.image,
                 alt: tokenOutData?.name || "",
-                className: "w-5 h-5 ml-1"
+                className: "xpay-w-5 xpay-h-5 xpay-ml-1"
               }
-            ) : /* @__PURE__ */ jsx26("div", { className: "flex items-center justify-center w-5 h-5 text-[10px] ml-1 rounded-full bg-[#272e40] text-[#e0e7fa]", children: tokenData?.symbol.substring(0, 1) })
+            ) : /* @__PURE__ */ jsx29("div", { className: "xpay-flex xpay-items-center xpay-justify-center xpay-w-5 xpay-h-5 xpay-text-[10px] xpay-ml-1 xpay-rounded-full xpay-bg-[#272e40] xpay-text-[#e0e7fa]", children: tokenData?.symbol.substring(0, 1) })
           ] })
         ] })
       ] }) })
@@ -1321,7 +1510,7 @@ var HistoryCard = ({ transaction, supportedChains }) => {
 };
 
 // src/components/TxConfigForm/History.tsx
-import { jsx as jsx27, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs10 } from "react/jsx-runtime";
 var History = ({ signer, supportedChains }) => {
   const [fetchedHistory, setFetchedHistory] = useState2();
   const [historyLoadedOnce, setHistoryLoadedOnce] = useState2(false);
@@ -1393,11 +1582,11 @@ var History = ({ signer, supportedChains }) => {
     return () => clearInterval(timer);
   }, [signer, fetchHistory, getHistory, historyLoadedOnce]);
   if (!signer)
-    return /* @__PURE__ */ jsx27("div", { className: "flex items-center justify-center w-full h-[30vh]", children: "Connect a wallet to browse history" });
-  return /* @__PURE__ */ jsx27("div", { className: "flex items-center justify-center w-full", children: /* @__PURE__ */ jsxs8("div", { className: "w-full h-96 overflow-scroll overflow-x-hidden", children: [
-    fetchedHistory?.length === 0 && historyLoadedOnce && /* @__PURE__ */ jsx27("div", { className: "w-full text-center py-4 px-0 text-[rgb(158,158,158)]", children: "Your history is empty..." }),
-    !fetchedHistory && !historyLoadedOnce && /* @__PURE__ */ jsx27("div", { className: "flex w-full h-full items-center justify-center", children: /* @__PURE__ */ jsx27(CircularProgressIcon, {}) }),
-    fetchedHistory?.map((transaction, index) => /* @__PURE__ */ jsx27(
+    return /* @__PURE__ */ jsx30("div", { className: "xpay-flex xpay-items-center xpay-justify-center xpay-w-full xpay-h-[30vh]", children: "Connect a wallet to browse history" });
+  return /* @__PURE__ */ jsx30("div", { className: "xpay-flex xpay-items-center xpay-justify-center xpay-w-full", children: /* @__PURE__ */ jsxs10("div", { className: "xpay-w-full xpay-h-96 xpay-overflow-scroll xpay-overflow-x-hidden", children: [
+    fetchedHistory?.length === 0 && historyLoadedOnce && /* @__PURE__ */ jsx30("div", { className: "xpay-w-full xpay-text-center xpay-py-4 xpay-px-0 xpay-text-[rgb(158,158,158)]", children: "Your history is empty..." }),
+    !fetchedHistory && !historyLoadedOnce && /* @__PURE__ */ jsx30("div", { className: "xpay-flex xpay-w-full xpay-h-full xpay-items-center xpay-justify-center", children: /* @__PURE__ */ jsx30(CircularProgressIcon, {}) }),
+    fetchedHistory?.map((transaction, index) => /* @__PURE__ */ jsx30(
       HistoryCard,
       {
         transaction,
@@ -1409,7 +1598,7 @@ var History = ({ signer, supportedChains }) => {
 };
 
 // src/components/TxConfigForm/TopBar.tsx
-import { Fragment as Fragment2, jsx as jsx28, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx31, jsxs as jsxs11 } from "react/jsx-runtime";
 var TopBar = ({
   signer,
   setSettingsShown,
@@ -1417,33 +1606,33 @@ var TopBar = ({
   historyTabShown,
   onClose
 }) => {
-  return /* @__PURE__ */ jsxs9("div", { className: "flex w-full justify-between items-center mx-auto p-2", children: [
-    /* @__PURE__ */ jsx28("div", { className: "rounded-lg text-[rgba(255,255,255,0.6)] text-xs sm:text-base whitespace-nowrap", children: signer ? `Connected wallet: ${shortAddress(signer)}` : `Wallet disconnected` }),
-    /* @__PURE__ */ jsxs9("div", { className: "flex gap-2 justify-center items-center", children: [
-      !historyTabShown && /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsxs11("div", { className: "xpay-flex xpay-w-full xpay-justify-between xpay-items-center xpay-mx-auto xpay-p-2", children: [
+    /* @__PURE__ */ jsx31("div", { className: "xpay-rounded-lg xpay-text-[rgba(255,255,255,0.6)] xpay-text-xs sm:xpay-text-base xpay-whitespace-nowrap", children: signer ? `Connected wallet: ${shortAddress(signer)}` : `Wallet disconnected` }),
+    /* @__PURE__ */ jsxs11("div", { className: "xpay-flex xpay-gap-2 xpay-justify-center xpay-items-center", children: [
+      !historyTabShown && /* @__PURE__ */ jsx31(
         "div",
         {
           onClick: () => setSettingsShown(true),
-          className: "flex items-center text-xs gap-1 cursor-pointer",
-          children: /* @__PURE__ */ jsx28("div", { className: "w-7 h-7 rounded-full bg-gradient-to-r from-x_blue_light to-x_blue_dark flex items-center justify-center", children: /* @__PURE__ */ jsx28(SettingsIcon, {}) })
+          className: "xpay-flex xpay-items-center xpay-text-xs xpay-gap-1 xpay-cursor-pointer",
+          children: /* @__PURE__ */ jsx31("div", { className: "xpay-w-7 xpay-h-7 xpay-rounded-full xpay-bg-gradient-to-r xpay-from-x_blue_light xpay-to-x_blue_dark xpay-flex xpay-items-center xpay-justify-center", children: /* @__PURE__ */ jsx31(SettingsIcon, {}) })
         }
       ),
-      /* @__PURE__ */ jsx28(
+      /* @__PURE__ */ jsx31(
         "div",
         {
           onClick: () => setHistoryTabShown((x) => !x),
-          className: "flex items-center text-sm gap-1 cursor-pointer",
-          children: !historyTabShown ? /* @__PURE__ */ jsx28(Fragment2, { children: /* @__PURE__ */ jsx28("div", { className: "w-7 h-7 rounded-full bg-gradient-to-r from-x_blue_light to-x_blue_dark flex items-center justify-center", children: /* @__PURE__ */ jsx28(HistoryIcon, {}) }) }) : /* @__PURE__ */ jsx28("div", { children: "Back" })
+          className: "xpay-flex xpay-items-center xpay-text-sm xpay-gap-1 xpay-cursor-pointer",
+          children: !historyTabShown ? /* @__PURE__ */ jsx31(Fragment2, { children: /* @__PURE__ */ jsx31("div", { className: "xpay-w-7 xpay-h-7 xpay-rounded-full xpay-bg-gradient-to-r xpay-from-x_blue_light xpay-to-x_blue_dark xpay-flex xpay-items-center xpay-justify-center", children: /* @__PURE__ */ jsx31(HistoryIcon, {}) }) }) : /* @__PURE__ */ jsx31("div", { children: "Back" })
         }
       ),
-      /* @__PURE__ */ jsx28("div", { className: "cursor-pointer text-white", onClick: onClose, children: /* @__PURE__ */ jsx28(CloseIcon, {}) })
+      /* @__PURE__ */ jsx31("div", { className: "xpay-cursor-pointer xpay-text-white", onClick: onClose, children: /* @__PURE__ */ jsx31(CloseIcon, {}) })
     ] })
   ] });
 };
 
 // src/components/TxConfigForm/Settings.tsx
 import { useState as useState3, useEffect as useEffect3 } from "react";
-import { jsx as jsx29, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs12 } from "react/jsx-runtime";
 var Settings = ({
   setSlippage,
   setSettingsShown,
@@ -1460,53 +1649,53 @@ var Settings = ({
       );
     }
   }, [slippageActivePresetIndex, usingSlippageInput]);
-  return /* @__PURE__ */ jsx29("div", { className: "absolute w-[310px] right-0 top-[46px] z-10 bg-black border border-solid border-[rgba(54,129,198,1)] p-4 rounded-xl", children: /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-4 justify-between", children: [
-    /* @__PURE__ */ jsxs10("div", { className: "flex justify-between", children: [
-      /* @__PURE__ */ jsx29("div", { className: "text-base", children: "Settings" }),
-      /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx32("div", { className: "xpay-absolute xpay-w-[310px] xpay-right-0 xpay-top-[46px] xpay-z-10 xpay-bg-black xpay-border xpay-border-solid xpay-border-[rgba(54,129,198,1)] xpay-p-4 xpay-rounded-xl", children: /* @__PURE__ */ jsxs12("div", { className: "xpay-flex xpay-flex-col xpay-gap-4 xpay-justify-between", children: [
+    /* @__PURE__ */ jsxs12("div", { className: "xpay-flex xpay-justify-between", children: [
+      /* @__PURE__ */ jsx32("div", { className: "xpay-text-base", children: "Settings" }),
+      /* @__PURE__ */ jsx32(
         "div",
         {
-          className: "cursor-pointer",
+          className: "xpay-cursor-pointer",
           onClick: () => setSettingsShown(false),
-          children: /* @__PURE__ */ jsx29(CloseIcon, {})
+          children: /* @__PURE__ */ jsx32(CloseIcon, {})
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs10("div", { children: [
-      /* @__PURE__ */ jsxs10("div", { className: "flex gap-2 items-center", children: [
-        /* @__PURE__ */ jsx29("div", { className: "text-sm text-[rgba(255,255,255,0.6)]", children: "Express delivery" }),
-        /* @__PURE__ */ jsx29("div", { children: /* @__PURE__ */ jsxs10(
+    /* @__PURE__ */ jsxs12("div", { children: [
+      /* @__PURE__ */ jsxs12("div", { className: "xpay-flex xpay-gap-2 xpay-items-center", children: [
+        /* @__PURE__ */ jsx32("div", { className: "xpay-text-sm xpay-text-[rgba(255,255,255,0.6)]", children: "Express delivery" }),
+        /* @__PURE__ */ jsx32("div", { children: /* @__PURE__ */ jsxs12(
           "span",
           {
-            className: "inline-flex w-14 h-9 p-3 relative align-middle box-border overflow-hidden cursor-pointer",
+            className: "xpay-inline-flex xpay-w-14 xpay-h-9 xpay-p-3 xpay-relative xpay-align-middle xpay-box-border xpay-overflow-hidden xpay-cursor-pointer",
             onClick: () => {
               setExpressChecked((x) => !x);
             },
             children: [
-              /* @__PURE__ */ jsx29("span", { className: "h-full, w-full rounded-lg bg-[rgba(255,255,255,0.3)]" }),
-              /* @__PURE__ */ jsx29(
+              /* @__PURE__ */ jsx32("span", { className: "xpay-h-full, xpay-w-full xpay-rounded-lg xpay-bg-[rgba(255,255,255,0.3)]" }),
+              /* @__PURE__ */ jsx32(
                 "span",
                 {
-                  className: `transition-all w-5 h-5 rounded-full absolute translate-y-[-4px] 
-          ${expressChecked ? "translate-x-[12px] bg-x_blue" : "bg-white"} `
+                  className: `xpay-transition-all xpay-w-5 xpay-h-5 xpay-rounded-full xpay-absolute xpay-translate-y-[-4px] 
+          ${expressChecked ? "xpay-translate-x-[12px] xpay-bg-x_blue" : "xpay-bg-white"} `
                 }
               )
             ]
           }
         ) })
       ] }),
-      /* @__PURE__ */ jsxs10("div", { className: "flex gap-4", children: [
-        /* @__PURE__ */ jsx29("div", { className: "min-w-[26px] min-h-[26px] text-[#ffa726]", children: /* @__PURE__ */ jsx29(InfoIcon, {}) }),
-        /* @__PURE__ */ jsx29("div", { className: "text-xs text-left", children: "Express delivery is a special feature of XSwap that reduces transaction time across chains to around 30 seconds. It is currently available for swaps below a value of $ 1000 USD." })
+      /* @__PURE__ */ jsxs12("div", { className: "xpay-flex xpay-gap-4", children: [
+        /* @__PURE__ */ jsx32("div", { className: "xpay-min-w-[26px] xpay-min-h-[26px] xpay-text-[#ffa726]", children: /* @__PURE__ */ jsx32(InfoIcon, {}) }),
+        /* @__PURE__ */ jsx32("div", { className: "xpay-text-xs xpay-text-left", children: "Express delivery is a special feature of XSwap that reduces transaction time across chains to around 30 seconds. It is currently available for swaps below a value of $ 1000 USD." })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-2 ", children: [
-      /* @__PURE__ */ jsx29("div", { className: " text-[rgba(255,255,255,0.6)] text-sm", children: "Slippage" }),
-      /* @__PURE__ */ jsxs10("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsx29("div", { className: "flex items-center bg-[rgba(15,15,15,1)] p-1 globalBorder rounded-xl", children: SLIPPAGE_PRESETS.map((preset, index) => /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsxs12("div", { className: "xpay-flex xpay-flex-col xpay-gap-2", children: [
+      /* @__PURE__ */ jsx32("div", { className: "xpay-text-[rgba(255,255,255,0.6)] xpay-text-sm", children: "Slippage" }),
+      /* @__PURE__ */ jsxs12("div", { className: "xpay-flex xpay-gap-2", children: [
+        /* @__PURE__ */ jsx32("div", { className: "xpay-flex xpay-items-center xpay-bg-[rgba(15,15,15,1)] p-1 xpay-global-border xpay-rounded-xl", children: SLIPPAGE_PRESETS.map((preset, index) => /* @__PURE__ */ jsx32(
           "div",
           {
-            className: `transition-all cursor-pointer block rounded-lg p-2 border-none text-sm leading-[10px] ${index === slippageActivePresetIndex && !usingSlippageInput ? "text-white" : "text-[rgba(255,255,255,0.2)]"} ${index === slippageActivePresetIndex && !usingSlippageInput ? "bg-gradient-to-r from-[#3681c6] to-[#2b4a9d]" : ""}`,
+            className: `xpay-transition-all xpay-cursor-pointer xpay-block xpay-rounded-lg xpay-p-2 xpay-border-none xpay-text-sm xpay-leading-[10px] ${index === slippageActivePresetIndex && !usingSlippageInput ? "xpay-text-white" : "xpay-text-[rgba(255,255,255,0.2)]"} ${index === slippageActivePresetIndex && !usingSlippageInput ? "xpay-bg-gradient-to-r xpay-from-[#3681c6] xpay-to-[#2b4a9d]" : ""}`,
             onClick: () => {
               setUsingSlippageInput(false);
               setSlippageActivePresetIndex(index);
@@ -1515,11 +1704,11 @@ var Settings = ({
           },
           index
         )) }),
-        /* @__PURE__ */ jsxs10("div", { className: "bg-[rgba(39,39,39,1)] p-2 border border-solid border-[rgba(82,82,82,1)] rounded-xl text-white flex items-center", children: [
-          /* @__PURE__ */ jsx29(
+        /* @__PURE__ */ jsxs12("div", { className: "xpay-bg-[rgba(39,39,39,1)] xpay-p-2 xpay-border xpay-border-solid xpay-border-[rgba(82,82,82,1)] xpay-rounded-xl xpay-text-white xpay-flex xpay-items-center", children: [
+          /* @__PURE__ */ jsx32(
             "input",
             {
-              className: "text-white border-none bg-[rgba(39,39,39,1)] w-10 placeholder:text-[rgba(255,255,255,0.2)] focus:outline-none text-sm leading-none",
+              className: "xpay-text-white xpay-border-none xpay-bg-[rgba(39,39,39,1)] xpay-w-10 placeholder:xpay-text-[rgba(255,255,255,0.2)] focus:xpay-outline-none xpay-text-sm xpay-leading-none",
               placeholder: "1.5",
               value: usingSlippageInput ? slippage : "",
               onChange: (e) => {
@@ -1535,16 +1724,16 @@ var Settings = ({
               }
             }
           ),
-          /* @__PURE__ */ jsx29(PercentageIcon, {})
+          /* @__PURE__ */ jsx32(PercentageIcon, {})
         ] })
       ] }),
-      /* @__PURE__ */ jsxs10("div", { className: "flex gap-4", children: [
-        /* @__PURE__ */ jsx29("div", { className: "min-w-[26px] min-h-[26px] text-[#ffa726]", children: /* @__PURE__ */ jsx29(InfoIcon, {}) }),
-        /* @__PURE__ */ jsxs10("div", { className: "text-xs text-left", children: [
+      /* @__PURE__ */ jsxs12("div", { className: "xpay-flex xpay-gap-4", children: [
+        /* @__PURE__ */ jsx32("div", { className: "xpay-min-w-[26px] xpay-min-h-[26px] xpay-text-[#ffa726]", children: /* @__PURE__ */ jsx32(InfoIcon, {}) }),
+        /* @__PURE__ */ jsxs12("div", { className: "xpay-text-xs xpay-text-left", children: [
           "Slippage is the price variation you are willing to accept in the event that the price of the trade changes while it is processing.",
-          /* @__PURE__ */ jsx29("br", {}),
+          /* @__PURE__ */ jsx32("br", {}),
           " ",
-          /* @__PURE__ */ jsx29("br", {}),
+          /* @__PURE__ */ jsx32("br", {}),
           "If the trade fails due to too-low slippage, you will receive USDC on the destination chain."
         ] })
       ] })
@@ -1553,28 +1742,23 @@ var Settings = ({
 };
 
 // src/components/TxConfigForm/FeesDetails.tsx
-import { useMemo as useMemo2 } from "react";
-import { jsx as jsx30, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs13 } from "react/jsx-runtime";
 var FeesDetails = ({
   isGettingRoute,
   route,
   paymentToken,
   dstToken,
-  expressChecked,
-  exceedsExpressDeliveryLimit,
   slippage,
   feesDetailsShown,
+  isExpressDelivery,
   setFeesDetailsShown
 }) => {
-  const isExpressDeliveryPossible = useMemo2(() => {
-    return expressChecked && !exceedsExpressDeliveryLimit;
-  }, [expressChecked, exceedsExpressDeliveryLimit]);
-  return /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-3 globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-2 sm:p-4 mb-1", children: [
-    /* @__PURE__ */ jsxs11("div", { className: "flex w-full items-center justify-between text-xs sm:text-sm", children: [
-      /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-1 font-medium text-white opacity-60", children: [
-        /* @__PURE__ */ jsx30(CoinsIcon, {}),
-        /* @__PURE__ */ jsx30("div", { className: "mr-1", children: "Fees:" }),
-        isGettingRoute ? /* @__PURE__ */ jsx30(Skeleton, { width: "w-20", height: "h-4" }) : ` ${weiToHumanReadable({
+  return /* @__PURE__ */ jsxs13("div", { className: "xpay-flex xpay-flex-col xpay-gap-3 xpay-global-border xpay-rounded-lg xpay-bg-[rgba(15,15,15,1)] xpay-p-2 sm:xpay-p-4 ", children: [
+    /* @__PURE__ */ jsxs13("div", { className: "xpay-flex xpay-w-full xpay-items-center xpay-justify-between xpay-text-xs sm:xpay-text-sm", children: [
+      /* @__PURE__ */ jsxs13("div", { className: "xpay-flex xpay-items-center xpay-gap-1 xpay-font-medium xpay-text-white xpay-opacity-60", children: [
+        /* @__PURE__ */ jsx33(CoinsIcon, {}),
+        /* @__PURE__ */ jsx33("div", { className: "xpay-mr-1", children: "Fees:" }),
+        isGettingRoute ? /* @__PURE__ */ jsx33(Skeleton, { width: "xpay-w-20", height: "xpay-h-4" }) : ` ${weiToHumanReadable({
           amount: safeBigNumberFrom(
             route?.xSwapFees.xSwapFee.nativeFee || "0"
           ).add(safeBigNumberFrom(route?.xSwapFees.ccipFee || "0")).add(
@@ -1584,54 +1768,54 @@ var FeesDetails = ({
           precisionFractionalPlaces: 5
         })} ${paymentToken?.symbol}`
       ] }),
-      /* @__PURE__ */ jsxs11("div", { className: "flex gap-1 items-center", children: [
-        route?.xSwapFees.expressDeliveryFee && !isGettingRoute && /* @__PURE__ */ jsxs11(
+      /* @__PURE__ */ jsxs13("div", { className: "xpay-flex xpay-gap-1 xpay-items-center", children: [
+        route?.xSwapFees.expressDeliveryFee && !isGettingRoute && /* @__PURE__ */ jsxs13(
           "div",
           {
-            className: `flex gap-1 items-center font-medium ${isExpressDeliveryPossible ? "text-x_green" : "text-white opacity-60"}`,
+            className: `xpay-flex xpay-gap-1 xpay-items-center xpay-font-medium ${isExpressDelivery ? "xpay-text-x_green" : "xpay-text-white xpay-opacity-60"}`,
             children: [
-              /* @__PURE__ */ jsx30(TimerIcon, {}),
-              isExpressDeliveryPossible ? "Fast ~ 30sec " : "Normal ~ 30min"
+              /* @__PURE__ */ jsx33(TimerIcon, {}),
+              isExpressDelivery ? "Fast ~ 30sec " : "Normal ~ 30min"
             ]
           }
         ),
-        /* @__PURE__ */ jsx30(
+        /* @__PURE__ */ jsx33(
           "div",
           {
             onClick: () => setFeesDetailsShown((x) => !x),
-            className: "font-medium text-white opacity-60 cursor-pointer flex items-center w-[15px] h-[9px]",
-            children: feesDetailsShown ? /* @__PURE__ */ jsx30(ChevronUpIcon, {}) : /* @__PURE__ */ jsx30(ChevronDownIcon, {})
+            className: "xpay-font-medium xpay-text-white xpay-opacity-60 xpay-cursor-pointer xpay-flex xpay-items-center xpay-w-[15px] xpay-h-[9px]",
+            children: feesDetailsShown ? /* @__PURE__ */ jsx33(ChevronUpIcon, {}) : /* @__PURE__ */ jsx33(ChevronDownIcon, {})
           }
         )
       ] })
     ] }),
-    feesDetailsShown && /* @__PURE__ */ jsxs11("div", { className: "flex w-full items-center justify-between gap-2", children: [
-      /* @__PURE__ */ jsxs11("div", { className: "flex flex-col text-[10px] gap-1", children: [
-        /* @__PURE__ */ jsxs11("div", { className: "flex justify-between font-medium text-white opacity-60 gap-1", children: [
-          /* @__PURE__ */ jsx30("div", { children: "CCIP Fee:" }),
-          /* @__PURE__ */ jsx30("div", { className: "whitespace-nowrap", children: ` ${weiToHumanReadable({
+    feesDetailsShown && /* @__PURE__ */ jsxs13("div", { className: "xpay-flex xpay-w-full xpay-items-center xpay-justify-between xpay-gap-2", children: [
+      /* @__PURE__ */ jsxs13("div", { className: "xpay-flex xpay-flex-col xpay-text-[10px] xpay-gap-1", children: [
+        /* @__PURE__ */ jsxs13("div", { className: "xpay-flex xpay-justify-between xpay-font-medium xpay-text-white xpay-opacity-60 xpay-gap-1", children: [
+          /* @__PURE__ */ jsx33("div", { children: "CCIP Fee:" }),
+          /* @__PURE__ */ jsx33("div", { className: "xpay-whitespace-nowrap", children: ` ${weiToHumanReadable({
             amount: route?.xSwapFees.ccipFee || "0",
             decimals: 18,
             precisionFractionalPlaces: 5
           })} ${paymentToken?.symbol}` })
         ] }),
-        /* @__PURE__ */ jsxs11("div", { className: "flex justify-between font-medium text-white opacity-60 gap-1", children: [
-          /* @__PURE__ */ jsx30("div", { children: "Native Fee:" }),
-          /* @__PURE__ */ jsx30("div", { className: "whitespace-nowrap", children: ` ${weiToHumanReadable({
+        /* @__PURE__ */ jsxs13("div", { className: "xpay-flex xpay-justify-between xpay-font-medium xpay-text-white xpay-opacity-60 xpay-gap-1", children: [
+          /* @__PURE__ */ jsx33("div", { children: "Native Fee:" }),
+          /* @__PURE__ */ jsx33("div", { className: "xpay-whitespace-nowrap", children: ` ${weiToHumanReadable({
             amount: route?.xSwapFees.xSwapFee.nativeFee || "0",
             decimals: 18,
             precisionFractionalPlaces: 5
           })} ${paymentToken?.symbol}` })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs11("div", { className: "flex flex-col text-[10px] gap-1", children: [
-        /* @__PURE__ */ jsxs11("div", { className: "flex justify-between font-medium text-white opacity-60 gap-1", children: [
-          /* @__PURE__ */ jsx30("div", { children: "Slippage:" }),
-          /* @__PURE__ */ jsx30("div", { className: "whitespace-nowrap", children: `${slippage}%` })
+      /* @__PURE__ */ jsxs13("div", { className: "xpay-flex xpay-flex-col xpay-text-[10px] xpay-gap-1", children: [
+        /* @__PURE__ */ jsxs13("div", { className: "xpay-flex xpay-justify-between xpay-font-medium xpay-text-white xpay-opacity-60 xpay-gap-1", children: [
+          /* @__PURE__ */ jsx33("div", { children: "Slippage:" }),
+          /* @__PURE__ */ jsx33("div", { className: "xpay-whitespace-nowrap", children: `${slippage}%` })
         ] }),
-        /* @__PURE__ */ jsxs11("div", { className: "flex justify-between font-medium text-white opacity-60 gap-1", children: [
-          /* @__PURE__ */ jsx30("div", { children: "Min amount out:" }),
-          /* @__PURE__ */ jsxs11("div", { className: "whitespace-nowrap", children: [
+        /* @__PURE__ */ jsxs13("div", { className: "xpay-flex xpay-justify-between xpay-font-medium xpay-text-white xpay-opacity-60 xpay-gap-1", children: [
+          /* @__PURE__ */ jsx33("div", { children: "Min amount out:" }),
+          /* @__PURE__ */ jsxs13("div", { className: "xpay-whitespace-nowrap", children: [
             weiToHumanReadable({
               amount: route?.minAmountOut || "0",
               decimals: dstToken?.decimals || 18,
@@ -1647,48 +1831,41 @@ var FeesDetails = ({
 };
 
 // src/components/TxConfigForm/Summary.tsx
-import { useEffect as useEffect5, useMemo as useMemo4, useState as useState5 } from "react";
+import { useEffect as useEffect5, useMemo as useMemo2, useState as useState5 } from "react";
 
 // src/components/TxConfigForm/UsdPrice.tsx
 import { useEffect as useEffect4, useState as useState4 } from "react";
-import { Fragment as Fragment3, jsx as jsx31 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx34 } from "react/jsx-runtime";
 var UsdPrice = ({
   prices,
   token,
   amount = "0",
-  loading = false,
-  type,
-  setExceedsExpressDeliveryLimit
+  loading = false
 }) => {
   const [usdPrice, setUsdPrice] = useState4("0.00");
   useEffect4(() => {
     if (token && prices && prices[token.address]) {
-      const newUsdPrice = (Number(amount) * Number(prices[token.address])).toFixed(2);
-      if (type === "src" && setExceedsExpressDeliveryLimit) {
-        setExceedsExpressDeliveryLimit(
-          Number(newUsdPrice) > EXPRESS_DELIVERY_LIMIT
-        );
-      }
+      const newUsdPrice = (Number(amount) * Number(prices[token.address.toLowerCase()])).toFixed(2);
       setUsdPrice(newUsdPrice);
     }
   }, [token, prices, amount]);
-  return /* @__PURE__ */ jsx31("div", { className: "opacity-60 py-4", children: loading ? /* @__PURE__ */ jsx31(Skeleton, { width: "w-12", height: "h-4" }) : token ? prices && prices[token.address] ? /* @__PURE__ */ jsx31("div", { children: `$${usdPrice}` }) : /* @__PURE__ */ jsx31(Alert, { desc: "Unknown price" }) : /* @__PURE__ */ jsx31(Fragment3, { children: "$0.00" }) });
+  return /* @__PURE__ */ jsx34("div", { className: "xpay-opacity-60", children: loading ? /* @__PURE__ */ jsx34(Skeleton, { width: "xpay-w-12", height: "xpay-h-4" }) : token ? prices && prices[token.address] ? /* @__PURE__ */ jsx34("div", { children: `$${usdPrice}` }) : /* @__PURE__ */ jsx34(Alert, { desc: "Unknown price" }) : /* @__PURE__ */ jsx34(Fragment3, { children: "$0.00" }) });
 };
 
 // src/components/UnknownTokenLogo/UnknownTokenLogo.tsx
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var UnknownTokenLogo = ({ tokenName, className }) => {
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx35(
     "div",
     {
-      className: `w-5 h-5 rounded-full bg-white shadow-sm flex items-center justify-center text-black ${className}`,
+      className: `xpay-w-5 xpay-h-5 xpay-rounded-full xpay-bg-white xpay-shadow-sm xpay-flex xpay-items-center xpay-justify-center xpay-text-black ${className}`,
       children: tokenName.substring(0, 1)
     }
   );
 };
 
 // src/components/TxConfigForm/Summary.tsx
-import { jsx as jsx33, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs14 } from "react/jsx-runtime";
 var Summary = ({
   isGettingRoute,
   route,
@@ -1696,11 +1873,11 @@ var Summary = ({
   dstChain
 }) => {
   const [prices, setPrices] = useState5();
-  const amountReadable = useMemo4(
+  const amountReadable = useMemo2(
     () => weiToHumanReadable({
       amount: route?.estAmountOut || "0",
       decimals: dstToken?.decimals || 18,
-      precisionFractionalPlaces: 5
+      precisionFractionalPlaces: 8
     }),
     [route, dstToken]
   );
@@ -1711,67 +1888,63 @@ var Summary = ({
       );
     }
   }, [dstChain]);
-  return /* @__PURE__ */ jsxs12("div", { className: "flex flex-col globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4 relative", children: [
-    /* @__PURE__ */ jsxs12("div", { className: "flex justify-between", children: [
-      /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsx33("p", { className: "text-[rgba(255,255,255,0.6)] text-sm", children: "You receive" }),
-        isGettingRoute ? /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsxs14("div", { className: "xpay-flex xpay-flex-col xpay-global-border xpay-rounded-lg xpay-bg-[rgba(15,15,15,1)] xpay-p-4 xpay-relative", children: [
+    /* @__PURE__ */ jsxs14("div", { className: "xpay-flex xpay-justify-between", children: [
+      /* @__PURE__ */ jsxs14("div", { className: "xpay-flex xpay-flex-col xpay-gap-1", children: [
+        /* @__PURE__ */ jsx36("p", { className: "xpay-text-[rgba(255,255,255,0.6)] xpay-text-sm", children: "You receive" }),
+        isGettingRoute ? /* @__PURE__ */ jsx36(
           Skeleton,
           {
-            width: "w-[100px]",
-            height: "h-[36px]",
-            other: "sm:w-[190px]"
+            width: "xpay-w-[100px]",
+            height: "xpay-h-[36px]",
+            other: "sm:xpay-w-[190px]"
           }
-        ) : /* @__PURE__ */ jsx33("div", { className: "flex gap-2 items-center text-white text-xl sm:text-3xl", children: amountReadable })
+        ) : /* @__PURE__ */ jsx36("div", { className: "xpay-flex xpay-gap-2 xpay-items-center xpay-text-white xpay-text-xl sm:xpay-text-3xl", children: amountReadable })
       ] }),
-      /* @__PURE__ */ jsxs12("div", { className: "flex flex-col items-end gap-1 text-sm", children: [
-        /* @__PURE__ */ jsxs12("div", { className: "flex justify-center items-center gap-1", children: [
-          /* @__PURE__ */ jsx33("div", { className: "w-5 h-5", children: dstToken?.image ? /* @__PURE__ */ jsx33(
+      /* @__PURE__ */ jsxs14("div", { className: "xpay-flex xpay-flex-col xpay-items-end xpay-gap-1 xpay-text-sm", children: [
+        /* @__PURE__ */ jsxs14("div", { className: "xpay-flex xpay-justify-center xpay-items-center xpay-gap-1", children: [
+          /* @__PURE__ */ jsx36("div", { className: "xpay-w-5 xpay-h-5", children: dstToken?.image ? /* @__PURE__ */ jsx36(
             "img",
             {
-              className: "w-5 h-5",
+              className: "xpay-w-5 xpay-h-5",
               src: dstToken?.image,
               alt: dstToken?.name
             }
-          ) : /* @__PURE__ */ jsx33(
-            UnknownTokenLogo,
-            {
-              tokenName: "?",
-              className: "token-select__generated-logo"
-            }
-          ) }),
-          /* @__PURE__ */ jsx33("p", { className: "text-base sm:text-xl", children: dstToken?.name })
+          ) : /* @__PURE__ */ jsx36(UnknownTokenLogo, { tokenName: "?" }) }),
+          /* @__PURE__ */ jsx36("p", { className: "xpay-text-base sm:xpay-text-xl", children: dstToken?.name })
         ] }),
-        /* @__PURE__ */ jsxs12("div", { className: "flex justify-center items-center gap-1", children: [
-          /* @__PURE__ */ jsx33("p", { className: "text-[rgba(255,255,255,0.6)] text-right", children: "on " }),
-          /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-1 text-white", children: [
-            /* @__PURE__ */ jsx33("div", { className: "w-4 h-4", children: /* @__PURE__ */ jsx33("img", { src: dstChain?.image, alt: dstChain?.name }) }),
-            /* @__PURE__ */ jsx33("div", { children: dstChain?.displayName })
+        /* @__PURE__ */ jsxs14("div", { className: "xpay-flex xpay-justify-center xpay-items-center xpay-gap-1", children: [
+          /* @__PURE__ */ jsxs14("p", { className: "xpay-text-[rgba(255,255,255,0.6)] xpay-text-right", children: [
+            "on",
+            " "
+          ] }),
+          /* @__PURE__ */ jsxs14("div", { className: "xpay-flex xpay-items-center xpay-gap-1 xpay-text-white", children: [
+            /* @__PURE__ */ jsx36("div", { className: "xpay-w-4 xpay-h-4", children: /* @__PURE__ */ jsx36("img", { src: dstChain?.image, alt: dstChain?.name }) }),
+            /* @__PURE__ */ jsx36("div", { children: dstChain?.displayName })
           ] })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx33(
+    /* @__PURE__ */ jsx36("div", { className: "xpay-pt-2", children: /* @__PURE__ */ jsx36(
       UsdPrice,
       {
         prices,
         token: dstToken,
         amount: amountReadable,
-        loading: isGettingRoute,
-        type: "dst"
+        loading: isGettingRoute
       }
-    ),
-    /* @__PURE__ */ jsx33("div", { className: "absolute right-[50%] top-0 translate-x-1/2 translate-y-[-60%] globalBorder rounded-xl p-[5px] bg-[rgba(15,15,15,1)]", children: /* @__PURE__ */ jsx33("div", { className: " flex items-center justify-center rounded-lg  w-8 h-8 bg-gradient-to-l from-[rgba(54,129,198,1)] to-[rgba(43,74,157,1)] ", children: /* @__PURE__ */ jsx33(ArrowDownIcon, {}) }) })
+    ) }),
+    /* @__PURE__ */ jsx36("div", { className: "xpay-absolute xpay-right-[50%] xpay-top-0 xpay-translate-x-1/2 xpay-translate-y-[-60%] xpay-global-border xpay-rounded-xl p-[5px] xpay-bg-[rgba(15,15,15,1)]", children: /* @__PURE__ */ jsx36("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__ */ jsx36(ArrowDownIcon, {}) }) })
   ] });
 };
 
 // src/components/TxConfigForm/SwapPanel.tsx
-import { useState as useState7, useEffect as useEffect6, useRef as useRef2, useMemo as useMemo7 } from "react";
+import { useState as useState7, useEffect as useEffect6, useRef as useRef2, useMemo as useMemo5 } from "react";
 
 // src/components/TxConfigForm/TokenPicker.tsx
-import { useState as useState6, useMemo as useMemo5 } from "react";
+import { useState as useState6, useMemo as useMemo3 } from "react";
 import { createPortal } from "react-dom";
-import { Fragment as Fragment4, jsx as jsx34, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx37, jsxs as jsxs15 } from "react/jsx-runtime";
 var TokenPicker = ({
   onCloseClick,
   tokens,
@@ -1781,7 +1954,6 @@ var TokenPicker = ({
   balances
 }) => {
   const [searchValue, setSearchValue] = useState6("");
-  const modalRoot = document.querySelector("#xswap-modal");
   const onBackdropClick = (e) => {
     e.stopPropagation();
     e.nativeEvent.stopImmediatePropagation();
@@ -1789,7 +1961,7 @@ var TokenPicker = ({
       onCloseClick();
     }
   };
-  const filteredTokens = useMemo5(() => {
+  const filteredTokens = useMemo3(() => {
     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()
@@ -1797,91 +1969,92 @@ var TokenPicker = ({
       (a, b) => a.priority < b.priority ? 1 : balances && balances[a.address] && balances[b.address] && balances[a.address]?.lte(balances[b.address] || "0") ? 1 : -1
     );
   }, [searchValue, tokens]);
-  return modalRoot ? createPortal(
-    /* @__PURE__ */ jsx34(
+  const xpayRoot2 = document.querySelector("#xpay-root");
+  return xpayRoot2 ? createPortal(
+    /* @__PURE__ */ jsx37(
       "div",
       {
         onClick: onBackdropClick,
-        className: "box-border fixed h-full w-full z-[999] top-0 left-0 bg-[rgba(0,0,0,0.8)] flex items-center justify-center p-5",
-        children: /* @__PURE__ */ jsxs13("div", { className: "relative bg-black rounded-3xl p-6 max-h-[70%] flex flex-col text-base text-white w-[452px] h-[70%] border border-solid border-[rgba(255,255,255,0.2)]", children: [
-          /* @__PURE__ */ jsx34(
+        className: "xpay-box-border xpay-fixed xpay-h-full xpay-w-full xpay-z-[999] xpay-top-0 xpay-left-0 xpay-bg-[rgba(0,0,0,0.8)] xpay-flex xpay-items-center xpay-justify-center xpay-p-5",
+        children: /* @__PURE__ */ jsxs15("div", { className: "xpay-relative xpay-bg-black xpay-rounded-3xl xpay-p-6 xpay-max-h-[70%] xpay-flex xpay-flex-col xpay-text-base xpay-text-white xpay-w-[452px] xpay-h-[70%] xpay-border xpay-border-solid xpay-border-[rgba(255,255,255,0.2)]", children: [
+          /* @__PURE__ */ jsx37(
             "div",
             {
               onClick: onCloseClick,
-              className: "absolute top-4 right-4 cursor-pointer",
-              children: /* @__PURE__ */ jsx34(CloseIcon, {})
+              className: "xpay-absolute xpay-top-4 xpay-right-4 xpay-cursor-pointer",
+              children: /* @__PURE__ */ jsx37(CloseIcon, {})
             }
           ),
-          /* @__PURE__ */ jsx34("p", { className: "text-base mb-4", children: "Pick a token" }),
-          /* @__PURE__ */ jsxs13("div", { className: "flex items-center border border-solid border-[rgba(255,255,255,0.1)] rounded-lg py-0 px-3 gap-2 bg-[rgba(15,15,15,1)]", children: [
-            /* @__PURE__ */ jsx34("div", { className: "w-6 h-6", children: /* @__PURE__ */ jsx34(SearchIcon, {}) }),
-            /* @__PURE__ */ jsx34(
+          /* @__PURE__ */ jsx37("p", { className: "xpay-text-base xpay-mb-4", children: "Pick a token" }),
+          /* @__PURE__ */ jsxs15("div", { className: "xpay-flex xpay-items-center xpay-border xpay-border-solid xpay-border-[rgba(255,255,255,0.1)] xpay-rounded-lg xpay-py-0 xpay-px-3 xpay-gap-2 xpay-bg-[rgba(15,15,15,1)]", children: [
+            /* @__PURE__ */ jsx37("div", { className: "xpay-w-6 xpay-h-6", children: /* @__PURE__ */ jsx37(SearchIcon, {}) }),
+            /* @__PURE__ */ jsx37(
               "input",
               {
                 placeholder: "Search name or paste address",
                 value: searchValue,
                 onChange: (e) => setSearchValue(e.target.value),
-                className: "relative h-[41px] leading-[41px] font-normal z-[1] w-full text-white bg-transparent border-none outline-none placeholder:text-sm"
+                className: "xpay-relative xpay-h-[41px] xpay-leading-[41px] xpay-font-normal xpay-z-[1] xpay-w-full xpay-text-white xpay-bg-transparent xpay-border-none xpay-outline-none placeholder:xpay-text-sm"
               }
             )
           ] }),
-          /* @__PURE__ */ jsx34("div", { className: "my-4 mx-0 flex flex-wrap gap-3", children: tokens?.filter((token) => token?.quickPick).map((token) => /* @__PURE__ */ jsxs13(
+          /* @__PURE__ */ jsx37("div", { className: "xpay-my-4 xpay-mx-0 xpay-flex xpay-flex-wrap xpay-gap-3", children: tokens?.filter((token) => token?.quickPick).map((token) => /* @__PURE__ */ jsxs15(
             "div",
             {
-              className: `flex gap-2 py-1 px-2 items-center bg-[rgb(15,15,15)] rounded-2xl border border-solid border-[rgba(255,255,255,0.1)] hover:bg-[rgb(25,25,25)] hover:cursor-pointer ${token.address === selectedToken?.address ? "bg-[rgb(35, 35, 35)]" : ""}`,
+              className: `xpay-flex xpay-gap-2 xpay-py-1 xpay-px-2 xpay-items-center xpay-bg-[rgb(15,15,15)] xpay-rounded-2xl xpay-border xpay-border-solid xpay-border-[rgba(255,255,255,0.1)] hover:xpay-bg-[rgb(25,25,25)] hover:xpay-cursor-pointer ${token.address === selectedToken?.address ? "xpay-bg-[rgb(35, 35, 35)]" : ""}`,
               onClick: () => {
                 setSelectedToken(token);
                 onCloseClick();
               },
               children: [
-                /* @__PURE__ */ jsx34("img", { src: token.image, alt: token.name, className: "w-5" }),
-                /* @__PURE__ */ jsx34("div", { className: "text-sm", children: token.symbol })
+                /* @__PURE__ */ jsx37(
+                  "img",
+                  {
+                    src: token.image,
+                    alt: token.name,
+                    className: "xpay-w-5"
+                  }
+                ),
+                /* @__PURE__ */ jsx37("div", { className: "xpay-text-sm", children: token.symbol })
               ]
             },
             token.address
           )) }),
-          /* @__PURE__ */ jsx34("div", { className: "h-[2px] my-0 mx-[-24px] w-[100%+48px] px-12 bg-[rgba(255,255,255,0.1)]" }),
-          /* @__PURE__ */ jsx34("div", { className: "overflow-y-scroll h-full mx-[-24px] w-[100%+48px] flex flex-col", children: filteredTokens && filteredTokens.length > 0 ? filteredTokens.map((token, index) => /* @__PURE__ */ jsxs13(
+          /* @__PURE__ */ jsx37("div", { className: "xpay-h-[2px] xpay-my-0 xpay-mx-[-24px] xpay-w-[100%+48px] xpay-px-12 xpay-bg-[rgba(255,255,255,0.1)]" }),
+          /* @__PURE__ */ jsx37("div", { className: "xpay-overflow-y-scroll xpay-h-full xpay-mx-[-24px] xpay-w-[100%+48px] xpay-flex xpay-flex-col", children: filteredTokens && filteredTokens.length > 0 ? filteredTokens.map((token, index) => /* @__PURE__ */ jsxs15(
             "div",
             {
-              className: `flex gap-3 py-2 px-[24px] w-full items-center hover:bg-[rgb(25,25,25)] hover:cursor-pointer ${token.address === selectedToken?.address ? "bg-[rgb(35,35,35)]" : ""}`,
+              className: `xpay-flex xpay-gap-3 xpay-py-2 xpay-px-[24px] xpay-w-full xpay-items-center hover:xpay-bg-[rgb(25,25,25)] hover:xpay-cursor-pointer ${token.address === selectedToken?.address ? "xpay-bg-[rgb(35,35,35)]" : ""}`,
               onClick: () => {
                 setSelectedToken(token);
                 onCloseClick();
               },
               children: [
-                token.image ? /* @__PURE__ */ jsx34(
-                  "img",
-                  {
-                    src: token.image,
-                    alt: token.name,
-                    className: "token-picker__all__logo"
-                  }
-                ) : /* @__PURE__ */ jsx34("div", { className: "flex items-center justify-center w-9 h-9 text-[15px] ml-1 rounded-full bg-[#272e40] text-[#e0e7fa]", children: token?.symbol.substring(0, 1) }),
-                /* @__PURE__ */ jsxs13("div", { className: "flex justify-between items-center gap-1 overflow-hidden grow", children: [
-                  /* @__PURE__ */ jsxs13("div", { className: "flex flex-col leading-[16px]", children: [
-                    /* @__PURE__ */ jsx34("div", { className: "overflow-hidden whitespace-nowrap text-ellipsis text-[15px]", children: token.name }),
-                    /* @__PURE__ */ jsx34("div", { className: "text-[#888] text-[11px]", children: token.symbol })
+                token.image ? /* @__PURE__ */ jsx37("img", { src: token.image, alt: token.name }) : /* @__PURE__ */ jsx37("div", { className: "xpay-flex xpay-items-center xpay-justify-center xpay-w-9 xpay-h-9 xpay-text-[15px] xpay-ml-1 xpay-rounded-full xpay-bg-[#272e40] xpay-text-[#e0e7fa]", children: token?.symbol.substring(0, 1) }),
+                /* @__PURE__ */ jsxs15("div", { className: "xpay-flex xpay-justify-between xpay-items-center xpay-gap-1 xpay-overflow-hidden xpay-grow", children: [
+                  /* @__PURE__ */ jsxs15("div", { className: "xpay-flex xpay-flex-col xpay-leading-[16px]", children: [
+                    /* @__PURE__ */ jsx37("div", { className: "xpay-overflow-hidden xpay-whitespace-nowrap xpay-text-ellipsis xpay-text-[15px]", children: token.name }),
+                    /* @__PURE__ */ jsx37("div", { className: "xpay-text-[#888] xpay-text-[11px]", children: token.symbol })
                   ] }),
-                  signer && /* @__PURE__ */ jsx34(Fragment4, { children: balances && balances[token.address] && token.decimals ? /* @__PURE__ */ jsx34("div", { className: "text-xs", children: weiToHumanReadable({
+                  signer && /* @__PURE__ */ jsx37(Fragment4, { children: balances && balances[token.address] && token.decimals ? /* @__PURE__ */ jsx37("div", { className: "xpay-text-xs", children: weiToHumanReadable({
                     amount: balances[token.address]?.toString() || "0",
                     decimals: token.decimals,
                     precisionFractionalPlaces: 4
-                  }) }) : /* @__PURE__ */ jsx34(Skeleton, { width: "w-12", height: "h-3" }) })
+                  }) }) : /* @__PURE__ */ jsx37(Skeleton, { width: "xpay-w-12", height: "xpay-h-3" }) })
                 ] })
               ]
             },
             `${index}_${token.address}`
-          )) : /* @__PURE__ */ jsx34("div", { className: "mt-4 flex justify-center", children: /* @__PURE__ */ jsx34("p", { className: "text-sm text-white", children: "No tokens found." }) }) })
+          )) : /* @__PURE__ */ jsx37("div", { className: "xpay-mt-4 xpay-flex xpay-justify-center", children: /* @__PURE__ */ jsx37("p", { className: "xpay-text-sm xpay-text-white", children: "No tokens found." }) }) })
         ] })
       }
     ),
-    modalRoot
+    xpayRoot2
   ) : null;
 };
 
 // src/components/TxConfigForm/ChainListElement.tsx
-import { jsx as jsx35, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs16 } from "react/jsx-runtime";
 var ChainListElement = ({
   chain,
   setSrcChain,
@@ -1889,31 +2062,31 @@ var ChainListElement = ({
   index,
   length
 }) => {
-  return /* @__PURE__ */ jsxs14("div", { children: [
-    /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs16("div", { children: [
+    /* @__PURE__ */ jsxs16(
       "li",
       {
-        className: "bg-transparent border-none flex gap-1 items-center cursor-pointer py-2 w-full",
+        className: "xpay-bg-transparent xpay-border-none xpay-flex xpay-gap-1 xpay-items-center xpay-cursor-pointer xpay-py-2 xpay-w-full",
         onClick: () => {
           setSrcChain(chain);
           setChainListShown(false);
         },
         children: [
-          /* @__PURE__ */ jsx35("img", { width: 12, height: 12, src: chain.image, alt: chain.displayName }),
+          /* @__PURE__ */ jsx38("img", { width: 12, height: 12, src: chain.image, alt: chain.displayName }),
           chain.displayName
         ]
       }
     ),
-    index !== length - 1 && /* @__PURE__ */ jsx35("div", { className: "h-px mx-2 bg-[rgba(255,255,255,0.15)]" })
+    index !== length - 1 && /* @__PURE__ */ jsx38("div", { className: "xpay-h-px xpay-mx-2 xpay-bg-[rgba(255,255,255,0.15)]" })
   ] }, `${chain.ecosystem}-${chain.chainId}`);
 };
 
 // src/components/TxConfigForm/BalanceComponent.tsx
-import { useMemo as useMemo6 } from "react";
+import { useMemo as useMemo4 } from "react";
 import BigNumber3 from "bignumber.js";
-import { Fragment as Fragment5, jsx as jsx36, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx39, jsxs as jsxs17 } from "react/jsx-runtime";
 var BalanceComponent = ({ srcToken, balances }) => {
-  const balanceText = useMemo6(() => {
+  const balanceText = useMemo4(() => {
     if (!balances || !srcToken) return "0";
     if (balances[srcToken.address]?.toString() === "0") return "0";
     const fullHumanReadable = weiToHumanReadable({
@@ -1931,7 +2104,7 @@ var BalanceComponent = ({ srcToken, balances }) => {
       precisionFractionalPlaces: 5
     });
   }, [srcToken, balances]);
-  return /* @__PURE__ */ jsxs15(Fragment5, { children: [
+  return /* @__PURE__ */ jsxs17(Fragment5, { children: [
     "Balance:",
     " ",
     srcToken && balances ? weiToHumanReadable({
@@ -1939,12 +2112,12 @@ var BalanceComponent = ({ srcToken, balances }) => {
       decimals: srcToken.decimals,
       precisionFractionalPlaces: 4
     }) : 0,
-    /* @__PURE__ */ jsx36("span", { className: "bg-gradient-to-r from-x_blue_light to-x_blue_dark bg-clip-text text-transparent", children: "Max" })
+    /* @__PURE__ */ jsx39("span", { className: "xpay-bg-gradient-to-r xpay-from-x_blue_light xpay-to-x_blue_dark xpay-bg-clip-text xpay-text-transparent", children: "Max" })
   ] });
 };
 
 // src/components/TxConfigForm/SwapPanel.tsx
-import { jsx as jsx37, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs18 } from "react/jsx-runtime";
 var SwapPanel = ({
   amount,
   setAmount,
@@ -1955,8 +2128,7 @@ var SwapPanel = ({
   signer,
   balances,
   prices,
-  supportedChains,
-  setExceedsExpressDeliveryLimit
+  supportedChains
 }) => {
   const [chainListShown, setChainListShown] = useState7(false);
   const [tokenListShown, setTokenListShown] = useState7(false);
@@ -1986,18 +2158,18 @@ var SwapPanel = ({
       return () => document.removeEventListener("mousedown", handleClickOutside);
     }
   }, [chainListShown]);
-  const chainListOptions = useMemo7(
+  const chainListOptions = useMemo5(
     () => supportedChains.filter((chain) => chain.chainId !== srcChain?.chainId),
     [supportedChains, srcChain]
   );
-  return /* @__PURE__ */ jsxs16("div", { className: "flex justify-between globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4", children: [
-    /* @__PURE__ */ jsxs16("div", { className: "flex flex-col justify-between gap-2 overflow-hidden w-1/2", children: [
-      /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsx37("p", { className: "text-white opacity-60 text-xs sm:text-sm font-medium", children: "You pay" }),
-        /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsxs18("div", { className: "xpay-flex xpay-justify-between xpay-global-border xpay-rounded-lg xpay-bg-[rgba(15,15,15,1)] xpay-p-4", children: [
+    /* @__PURE__ */ jsxs18("div", { className: "xpay-flex xpay-flex-col xpay-justify-between xpay-gap-2 xpay-overflow-hidden xpay-w-1/2", children: [
+      /* @__PURE__ */ jsxs18("div", { className: "xpay-flex xpay-flex-col xpay-gap-1", children: [
+        /* @__PURE__ */ jsx40("p", { className: "xpay-text-white xpay-opacity-60 xpay-text-xs sm:xpay-text-sm xpay-font-medium", children: "You pay" }),
+        /* @__PURE__ */ jsx40(
           "input",
           {
-            className: "p-0 border-none outline-none bg-transparent text-2xl overflow-ellipsis",
+            className: "xpay-p-0 xpay-border-none xpay-outline-none xpay-bg-transparent xpay-text-2xl xpay-overflow-ellipsis",
             value: amount,
             onChange: (e) => {
               if (e.target.value === ".") return;
@@ -2013,28 +2185,26 @@ var SwapPanel = ({
           }
         )
       ] }),
-      /* @__PURE__ */ jsx37("div", { className: "flex items-center text-sm text-[rgba(255,255,255,0.6)]", children: /* @__PURE__ */ jsx37(
+      /* @__PURE__ */ jsx40("div", { className: "xpay-flex xpay-items-center xpay-text-sm xpay-text-[rgba(255,255,255,0.6)]", children: /* @__PURE__ */ jsx40(
         UsdPrice,
         {
           prices,
           token: srcToken,
           amount,
-          loading: false,
-          type: "src",
-          setExceedsExpressDeliveryLimit
+          loading: false
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsxs16("div", { className: "flex flex-col relative items-end gap-2.5 w-1/2 text-xs", children: [
-      /* @__PURE__ */ jsxs16(
+    /* @__PURE__ */ jsxs18("div", { className: "xpay-flex xpay-flex-col xpay-relative xpay-items-end xpay-gap-2.5 xpay-w-1/2 xpay-text-xs", children: [
+      /* @__PURE__ */ jsxs18(
         "div",
         {
-          className: "flex gap-2 items-center p-2 max-w-full cursor-pointer bg-black text-white globalBorder rounded-3xl whitespace-nowrap",
+          className: "xpay-flex xpay-gap-2 xpay-items-center xpay-p-2 xpay-max-w-full xpay-cursor-pointer xpay-bg-black xpay-text-white xpay-global-border xpay-rounded-3xl xpay-whitespace-nowrap",
           onClick: () => {
             setTokenListShown((state) => !state);
           },
           children: [
-            /* @__PURE__ */ jsx37(
+            /* @__PURE__ */ jsx40(
               "img",
               {
                 height: 16,
@@ -2043,12 +2213,12 @@ var SwapPanel = ({
                 alt: srcToken?.name
               }
             ),
-            /* @__PURE__ */ jsx37("div", { children: srcToken?.symbol }),
-            /* @__PURE__ */ jsx37(DownArrowIcon, {})
+            /* @__PURE__ */ jsx40("div", { children: srcToken?.symbol }),
+            /* @__PURE__ */ jsx40(DownArrowIcon, {})
           ]
         }
       ),
-      tokenListShown && /* @__PURE__ */ jsx37(
+      tokenListShown && /* @__PURE__ */ jsx40(
         TokenPicker,
         {
           onCloseClick: () => setTokenListShown(false),
@@ -2059,22 +2229,22 @@ var SwapPanel = ({
           balances
         }
       ),
-      /* @__PURE__ */ jsx37(
+      /* @__PURE__ */ jsx40(
         "div",
         {
           onClick: handleMaxClick,
-          className: "flex gap-1 items-center font-medium text-white opacity-60 py-0.5 cursor-pointer",
-          children: signer && /* @__PURE__ */ jsx37(BalanceComponent, { balances, srcToken })
+          className: "xpay-flex xpay-gap-1 xpay-items-center xpay-font-medium xpay-text-white xpay-opacity-60 xpay-py-0.5 xpay-cursor-pointer",
+          children: signer && /* @__PURE__ */ jsx40(BalanceComponent, { balances, srcToken })
         }
       ),
-      /* @__PURE__ */ jsxs16(
+      /* @__PURE__ */ jsxs18(
         "div",
         {
           ref: buttonRef,
-          className: "bg-black globalBorder rounded-2xl whitespace-nowrap flex items-center p-2 cursor-pointer gap-2",
+          className: "xpay-bg-black xpay-global-border xpay-rounded-2xl xpay-whitespace-nowrap xpay-flex xpay-items-center xpay-p-2 xpay-cursor-pointer xpay-gap-2",
           onClick: () => setChainListShown((prev) => !prev),
           children: [
-            /* @__PURE__ */ jsx37(
+            /* @__PURE__ */ jsx40(
               "img",
               {
                 width: "16",
@@ -2083,17 +2253,17 @@ var SwapPanel = ({
                 alt: srcChain?.name
               }
             ),
-            /* @__PURE__ */ jsx37("div", { children: srcChain?.displayName }),
-            /* @__PURE__ */ jsx37(DownArrowIcon, {})
+            /* @__PURE__ */ jsx40("div", { children: srcChain?.displayName }),
+            /* @__PURE__ */ jsx40(DownArrowIcon, {})
           ]
         }
       ),
-      chainListShown && /* @__PURE__ */ jsx37(
+      chainListShown && /* @__PURE__ */ jsx40(
         "ul",
         {
           ref: listRef,
-          className: "bg-black globalBorder rounded-lg whitespace-nowrap z-1 right-0 top-10 px-2 max-w-full max-h-[40vh] overflow-auto absolute text-sm z-20",
-          children: chainListOptions.map((chain, index) => /* @__PURE__ */ jsx37(
+          className: "xpay-bg-black xpay-global-border xpay-rounded-lg xpay-whitespace-nowrap xpay-z-1 xpay-right-0 xpay-top-10 xpay-px-2 xpay-max-w-full xpay-max-h-[40vh] xpay-overflow-auto xpay-absolute xpay-text-sm xpay-z-20",
+          children: chainListOptions.map((chain, index) => /* @__PURE__ */ jsx40(
             ChainListElement,
             {
               index,
@@ -2101,7 +2271,8 @@ var SwapPanel = ({
               setSrcChain,
               setChainListShown,
               chain
-            }
+            },
+            chain.chainId
           ))
         }
       )
@@ -2110,30 +2281,30 @@ var SwapPanel = ({
 };
 
 // src/components/TxConfigForm/ErrorField.tsx
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var ErrorField = ({ error }) => {
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx41(
     "div",
     {
-      className: `flex justify-center mb-1 items-center w-full rounded-2xl bg-x_error_background border border-solid ${error.length > 0 ? "border-x_error_border" : "border-transparent"}`,
+      className: `xpay-flex xpay-justify-center xpay-mb-1 xpay-items-center xpay-w-full xpay-rounded-2xl xpay-bg-x_error_background xpay-border xpay-border-solid ${error.length > 0 ? "xpay-border-x_error_border" : "xpay-border-transparent"}`,
       children: error
     }
   );
 };
 
 // src/components/TxConfigForm/Description.tsx
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 var Description = ({ description }) => {
-  return /* @__PURE__ */ jsx39("div", { className: "flex flex-col items-start rounded-lg px-4 py-2", children: /* @__PURE__ */ jsx39("div", { className: "w-full flex gap-4 items-start justify-between text-xl", children: description }) });
+  return /* @__PURE__ */ jsx42("div", { className: "xpay-flex xpay-flex-col xpay-gap-3 xpay-global-border xpay-rounded-lg xpay-bg-[rgba(15,15,15,1)] xpay-p-2 sm:xpay-p-4 ", children: /* @__PURE__ */ jsx42("div", { className: "xpay-flex xpay-w-full xpay-items-center xpay-justify-between xpay-text-xs sm:xpay-text-sm", children: /* @__PURE__ */ jsx42("div", { className: "xpay-flex xpay-items-center xpay-gap-1 xpay-font-medium xpay-text-white xpay-opacity-60", children: description }) }) });
 };
 
 // src/components/TxConfigForm/Button.tsx
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 var Button = ({ children, onClick, type, disabled }) => {
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx43(
     "button",
     {
-      className: "text-white border-none rounded-2xl text-xl py-4 cursor-pointer w-full bg-gradient-to-r from-[#3681c6] to-[#2b4a9d] disabled:opacity-25",
+      className: "xpay-text-white xpay-border-none xpay-rounded-2xl xpay-text-xl xpay-py-4 xpay-cursor-pointer xpay-w-full xpay-bg-gradient-to-r xpay-from-[#3681c6] xpay-to-[#2b4a9d] disabled:xpay-opacity-25",
       onClick,
       type,
       disabled,
@@ -2143,7 +2314,108 @@ var Button = ({ children, onClick, type, disabled }) => {
 };
 
 // src/components/TxConfigForm/Form.tsx
-import { jsx as jsx41, jsxs as jsxs17 } from "react/jsx-runtime";
+import { getChainId, waitForTransactionReceipt } from "wagmi/actions";
+
+// src/components/TxConfigForm/ConfirmationAmount.tsx
+import { useEffect as useEffect7, useMemo as useMemo6, useState as useState8 } from "react";
+import { jsx as jsx44, jsxs as jsxs19 } from "react/jsx-runtime";
+var ConfirmationAmount = ({
+  amount,
+  token,
+  chain,
+  type
+}) => {
+  const [prices, setPrices] = useState8();
+  const amountReadable = useMemo6(() => {
+    return weiToHumanReadable({
+      amount: amount || "0",
+      decimals: token?.decimals || 18,
+      precisionFractionalPlaces: 8
+    });
+  }, [amount, token]);
+  useEffect7(() => {
+    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(
+        "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(
+        UsdPrice,
+        {
+          prices,
+          token,
+          amount: amountReadable,
+          loading: false
+        }
+      )
+    ] }),
+    /* @__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__ */ jsx44("div", { className: "xpay-w-10 xpay-h-10", children: token?.image ? /* @__PURE__ */ jsx44(
+        "img",
+        {
+          className: "xpay-w-10 xpay-h-10",
+          src: token?.image,
+          alt: token?.name
+        }
+      ) : /* @__PURE__ */ jsx44(
+        UnknownTokenLogo,
+        {
+          tokenName: "?",
+          className: "xpay-w-10 xpay-h-10"
+        }
+      ) })
+    ] })
+  ] }) });
+};
+
+// 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",
+    {
+      "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",
+          {
+            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/Form.tsx
+import { Fragment as Fragment6, jsx as jsx46, jsxs as jsxs21 } from "react/jsx-runtime";
 var Form = ({
   integratorId,
   dstChainId,
@@ -2151,34 +2423,54 @@ var Form = ({
   customContractCalls,
   desc,
   supportedChains,
+  retrunTransactions,
+  dstDisplayTokenAddr,
+  wagmiConfig,
   onSubmit,
-  onClose
+  onClose,
+  setBackdropClickDisabled
 }) => {
-  const [signer, setSigner] = useState8();
-  const [dstChain, setDstChain] = useState8();
-  const [dstToken, setDstToken] = 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 [exceedsExpressDeliveryLimit, setExceedsExpressDeliveryLimit] = useState8(false);
+  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 { sendTransaction } = useSendTransaction({ config: wagmiConfig });
   const debouncedAmount = useDebounce(amount, 1e3);
   const account = useAccount();
   const { switchChainAsync } = useSwitchChain();
-  useEffect7(() => {
+  useEffect8(() => {
     setSigner(account.address);
   }, [account.address]);
-  useEffect7(() => {
+  useEffect8(() => {
     const defaultChain = supportedChains.find(
       ({ chainId }) => chainId === account.chainId?.toString()
     );
@@ -2188,10 +2480,10 @@ var Form = ({
       )
     );
   }, [account.chainId]);
-  useEffect7(() => {
+  useEffect8(() => {
     setDstChain(supportedChains.find((chain) => chain.chainId === dstChainId));
   }, [supportedChains, dstChainId]);
-  useEffect7(() => {
+  useEffect8(() => {
     (async () => {
       if (!dstChain) {
         return;
@@ -2206,43 +2498,61 @@ var Form = ({
         );
       }
       setDstToken(dstTokenResult);
+      if (dstDisplayTokenAddr) {
+        let dstDisplayTokenResult = dstChain?.tokens.find(
+          (token) => token.address.toLowerCase() === dstDisplayTokenAddr.toLowerCase()
+        );
+        if (!dstDisplayTokenResult) {
+          dstDisplayTokenResult = await getCustomTokenData(
+            dstChain,
+            dstDisplayTokenAddr.toLowerCase()
+          );
+        }
+        setDstDisplayToken(dstDisplayTokenResult);
+      }
     })();
   }, [dstChain]);
-  useEffect7(() => {
-    if (integratorId && srcChain && srcToken && dstChain && debouncedAmount && paymentToken && slippage) {
-      setFormError("");
-      const timeout = setTimeout(() => {
-        setFormError("Getting Route is taking longer than usually");
-      }, ROUTE_TIMEOUT_MS);
-      setIsGettingRoute(true);
-      setFeesDetailsShown(false);
-      if (!srcToken.decimals)
-        throw new Error(
-          `Configuration error: selected token ($${srcToken.symbol} ${srcToken.name}) has unknown decimals param.`
-        );
-      getRoute({
-        integratorId,
-        fromAmount: ethers3.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 && !exceedsExpressDeliveryLimit,
-        customContractCalls
-      }).then((response) => {
-        setRoute(response);
-        setFormError("");
-      }).catch((err) => {
-        setFormError(err.message);
-      }).finally(() => {
-        setIsGettingRoute(false);
-        clearTimeout(timeout);
-      });
+  useEffect8(() => {
+    if (!(integratorId && srcChain && srcToken && dstChain && debouncedAmount && paymentToken && signer && slippage)) {
+      return;
     }
+    setFormError("");
+    const timeout = setTimeout(() => {
+      setFormError("Getting Route is taking longer than usually");
+    }, ROUTE_TIMEOUT_MS);
+    setIsGettingRoute(true);
+    setFeesDetailsShown(false);
+    if (!srcToken.decimals)
+      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;
+      }
+      setRoute(response);
+      setFormError("");
+    }).catch((err) => {
+      setFormError(err.message);
+    }).finally(() => {
+      setIsGettingRoute(false);
+      clearTimeout(timeout);
+    });
   }, [
     signer,
     srcChain,
@@ -2252,125 +2562,546 @@ var Form = ({
     slippage,
     expressChecked
   ]);
-  useEffect7(() => {
+  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(() => {
     if (srcChain) {
       setPaymentToken(
         srcChain.tokens.find(
-          (token) => token.address.toLowerCase() === ethers3.constants.AddressZero.toLowerCase()
+          (token) => token.address.toLowerCase() === ethers4.constants.AddressZero.toLowerCase()
         )
       );
     }
   }, [srcChain]);
-  useEffect7(() => {
+  useEffect8(() => {
     setAmount("");
     setFormError("");
+    setIsGettingRoute(false);
+    setRoute(void 0);
+    const nonce = Date.now();
+    currentRouteRequestNonce.current = nonce;
   }, [srcToken]);
-  useEffect7(() => {
+  useEffect8(() => {
     setSrcToken(srcChain?.tokens[0]);
+    setAmount("");
+    setIsGettingRoute(false);
+    setRoute(void 0);
+    const nonce = Date.now();
+    currentRouteRequestNonce.current = nonce;
   }, [srcChain]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (srcChain) {
       getPrices({ chainId: srcChain.chainId, currency: "USD" }).then(
         (prices2) => setPrices(prices2)
       );
     }
   }, [srcChain]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (srcChain && signer) {
       getBalances(srcChain, signer).then((balances2) => setBalances(balances2));
     }
   }, [srcChain, signer]);
+  useEffect8(() => {
+    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;
+    }
+    setExecutingTransactions(true);
+    setBackdropClickDisabled(true);
+    setTransactionError(null);
+    if (route.transactions.approve && !isAllowanceOk) {
+      setApproveTxDone(false);
+      const { to, data } = route.transactions.approve;
+      await sendTransaction(
+        {
+          to,
+          data
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        },
+        {
+          onSuccess: async (hash) => {
+            setApproveTxLoading(true);
+            const chainId = getChainId(wagmiConfig);
+            await waitForTransactionReceipt(wagmiConfig, {
+              chainId,
+              hash
+            });
+            setApproveTxLoading(false);
+            setApproveTxDone(true);
+            swap(route);
+          },
+          onError: (error) => {
+            setTransactionError(`Approval failed: ${error.message}`);
+            setApproveTxLoading(false);
+            setBackdropClickDisabled(false);
+          }
+        }
+      );
+    } else {
+      await swap(route);
+    }
+  }, [
+    route,
+    signer,
+    srcChain,
+    srcToken,
+    debouncedAmount,
+    paymentToken,
+    slippage,
+    expressChecked,
+    amount,
+    srcTokenAllowance
+  ]);
+  const swap = useCallback3(
+    async (route2) => {
+      const { to, value, data } = route2.transactions.swap;
+      await sendTransaction(
+        {
+          to,
+          value: BigInt(value),
+          data
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        },
+        {
+          onSuccess: async (hash) => {
+            setTxLoading(true);
+            const chainId = getChainId(wagmiConfig);
+            await waitForTransactionReceipt(wagmiConfig, {
+              chainId,
+              hash
+            });
+            setTxLoading(false);
+            if (srcChain?.chainId !== dstChain?.chainId) {
+              renderTxStatus(chainId.toString(), hash);
+            }
+            setTransactionSuccessHash(hash);
+          },
+          onError: (error) => {
+            setBackdropClickDisabled(false);
+            setTransactionError(`Transaction failed: ${error.message}`);
+          }
+        }
+      );
+    },
+    [
+      route,
+      signer,
+      srcChain,
+      srcToken,
+      debouncedAmount,
+      paymentToken,
+      slippage,
+      expressChecked
+    ]
+  );
   const handleSubmit = (event) => {
     event.preventDefault();
-    if (route) onSubmit(route);
+    if (!route) {
+      return;
+    }
+    if (retrunTransactions) {
+      onSubmit(route);
+      return;
+    }
+    triggerTx();
   };
   const handleSwitchChain = async () => {
     await switchChainAsync({ chainId: Number(srcChain?.chainId) });
   };
-  return /* @__PURE__ */ jsxs17(
-    "form",
-    {
-      className: "flex flex-col gap-2 z-10 my-0 p-2 md:p-4 rounded-3xl overflow-hidden font-light sm:w-x_desktop",
-      onSubmit: handleSubmit,
-      children: [
-        /* @__PURE__ */ jsx41(
-          TopBar,
+  const swapButton = useMemo7(() => {
+    let disabled = false;
+    if (transactionError) {
+      return {
+        text: transactionError,
+        fn: () => {
+        },
+        disabled: true
+      };
+    }
+    if (!signer) {
+      return {
+        text: "Connect wallet",
+        fn: () => {
+        },
+        disabled
+      };
+    }
+    if (signer && srcChain && srcChain.chainId !== account.chainId?.toString()) {
+      return {
+        text: "Switch chain",
+        fn: handleSwitchChain,
+        disabled
+      };
+    }
+    if (!amount) {
+      return {
+        text: `Enter token amount`,
+        fn: () => {
+        },
+        disabled: true
+      };
+    }
+    if (amount && balances && srcToken && srcToken.decimals && balances[srcToken?.address] !== void 0 && !ethers4.utils.parseUnits(amount, srcToken.decimals).lt(balances[srcToken?.address] || "0")) {
+      return {
+        text: "Insufficient balance",
+        fn: () => {
+        },
+        disabled: true
+      };
+    }
+    if (!route) {
+      return {
+        text: `Loading route`,
+        fn: () => {
+        },
+        disabled: true
+      };
+    }
+    if (isAllowanceLoading) {
+      return {
+        text: `Checking allowance`,
+        fn: () => {
+        },
+        disabled: true
+      };
+    }
+    return {
+      text: "Submit",
+      fn: () => {
+      },
+      disabled
+    };
+  }, [
+    account,
+    srcToken,
+    srcChain,
+    isAllowanceOk,
+    amount,
+    balances,
+    signer,
+    transactionError,
+    route,
+    isAllowanceLoading
+  ]);
+  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;
+  }, [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",
           {
-            signer,
-            historyTabShown,
-            setHistoryTabShown,
-            setSettingsShown,
-            onClose
+            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, {}) })
+            ]
           }
-        ),
-        settingsShown && /* @__PURE__ */ jsx41(
-          Settings,
+        ) })
+      ] })
+    ] })
+  ) : (
+    // 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",
           {
-            expressChecked,
-            setExpressChecked,
-            setSettingsShown,
-            slippage,
-            setSlippage
+            className: "xpay-cursor-pointer xpay-text-white",
+            onClick: onClose,
+            children: /* @__PURE__ */ jsx46(CloseIcon, {})
           }
-        ),
-        historyTabShown ? /* @__PURE__ */ jsx41(History, { signer, supportedChains }) : /* @__PURE__ */ jsxs17("div", { className: "flex flex-col gap-2", children: [
-          desc && /* @__PURE__ */ jsx41(Description, { description: desc }),
-          /* @__PURE__ */ jsx41(
-            SwapPanel,
+        ) })
+      ] }),
+      /* @__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(
+      "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(
+            TopBar,
             {
-              amount,
-              setAmount,
-              srcToken,
-              setSrcToken,
-              srcChain,
               signer,
-              balances,
-              prices,
-              supportedChains,
-              setSrcChain,
-              setExceedsExpressDeliveryLimit
+              historyTabShown,
+              setHistoryTabShown,
+              setSettingsShown,
+              onClose
             }
           ),
-          /* @__PURE__ */ jsx41(
-            Summary,
+          settingsShown && /* @__PURE__ */ jsx46(
+            Settings,
             {
-              isGettingRoute,
-              route,
-              dstToken,
-              dstChain
-            }
-          ),
-          /* @__PURE__ */ jsx41(
-            FeesDetails,
-            {
-              route,
-              isGettingRoute,
-              paymentToken,
-              dstToken,
               expressChecked,
-              exceedsExpressDeliveryLimit,
+              setExpressChecked,
+              setSettingsShown,
               slippage,
-              feesDetailsShown,
-              setFeesDetailsShown
+              setSlippage
             }
           ),
-          formError.length > 0 && /* @__PURE__ */ jsx41(ErrorField, { error: formError }),
-          signer && srcChain && srcChain.chainId !== account.chainId?.toString() ? /* @__PURE__ */ jsx41(Button, { type: "button", onClick: handleSwitchChain, children: "Switch chain" }) : /* @__PURE__ */ jsx41(
-            Button,
-            {
-              type: "submit",
-              disabled: !signer || !route || isGettingRoute,
-              children: "Submit"
-            }
-          )
-        ] })
-      ]
-    }
-  );
+          historyTabShown ? /* @__PURE__ */ jsx46(History, { signer, supportedChains }) : /* @__PURE__ */ jsxs21("div", { className: "xpay-flex xpay-flex-col xpay-gap-2", children: [
+            /* @__PURE__ */ jsx46(
+              SwapPanel,
+              {
+                amount,
+                setAmount,
+                srcToken,
+                setSrcToken,
+                srcChain,
+                signer,
+                balances,
+                prices,
+                supportedChains,
+                setSrcChain
+              }
+            ),
+            /* @__PURE__ */ jsx46(
+              Summary,
+              {
+                isGettingRoute,
+                route,
+                dstToken: dstDisplayToken ? dstDisplayToken : dstToken,
+                dstChain
+              }
+            ),
+            desc && /* @__PURE__ */ jsx46(Description, { description: desc }),
+            /* @__PURE__ */ jsx46(
+              FeesDetails,
+              {
+                route,
+                isGettingRoute,
+                paymentToken,
+                dstToken,
+                slippage,
+                feesDetailsShown,
+                setFeesDetailsShown,
+                isExpressDelivery
+              }
+            ),
+            formError.length > 0 && /* @__PURE__ */ jsx46(ErrorField, { error: formError }),
+            /* @__PURE__ */ jsx46(
+              Button,
+              {
+                type: "submit",
+                disabled: swapButton.disabled,
+                onClick: swapButton.fn,
+                children: swapButton.text
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ) });
 };
 
 // src/components/TxConfigForm/index.tsx
-import { jsx as jsx42, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs22 } from "react/jsx-runtime";
 var TxConfigForm = ({
   integratorId,
   dstChainId,
@@ -2378,13 +3109,16 @@ var TxConfigForm = ({
   customContractCalls,
   desc,
   supportedChains,
+  retrunTransactions,
+  dstDisplayTokenAddr,
   onSubmit,
   onClose
 }) => {
+  const [backdropClickDisabled, setBackdropClickDisabled] = useState10(false);
   const onBackdropClick = (e) => {
     e.stopPropagation();
     e.nativeEvent.stopImmediatePropagation();
-    if (e.target === e.currentTarget) {
+    if (e.target === e.currentTarget && !backdropClickDisabled) {
       onClose();
     }
   };
@@ -2393,13 +3127,13 @@ var TxConfigForm = ({
     () => getWagmiConfig(supportedChains),
     supportedChains
   );
-  return /* @__PURE__ */ jsx42(WagmiProvider, { config: wagmiConfig, children: /* @__PURE__ */ jsx42(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx47(WagmiProvider, { config: wagmiConfig, children: /* @__PURE__ */ jsx47(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx47(
     "div",
     {
-      className: "top-0 left-0 right-0 bottom-0 bg-[rgba(0,0,0,0.8)] fixed flex items-center justify-center z-10",
-      onClick: onBackdropClick,
-      children: /* @__PURE__ */ jsxs18("div", { className: "relative bg-black rounded-3xl overflow-auto text-white border-2 border-solid border-[rgba(255,255,255,0.1)]", children: [
-        /* @__PURE__ */ jsx42(
+      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(
           Form,
           {
             integratorId,
@@ -2408,11 +3142,15 @@ var TxConfigForm = ({
             customContractCalls,
             desc,
             supportedChains,
+            wagmiConfig,
+            retrunTransactions: !!retrunTransactions,
+            dstDisplayTokenAddr,
             onSubmit,
-            onClose
+            onClose,
+            setBackdropClickDisabled: (disabled) => setBackdropClickDisabled(disabled)
           }
         ),
-        /* @__PURE__ */ jsx42(PoweredBy, {})
+        /* @__PURE__ */ jsx47(PoweredBy, {})
       ] })
     }
   ) }) });
@@ -2423,13 +3161,21 @@ var openTxConfigForm = async ({
   dstTokenAddr,
   customContractCalls,
   desc,
-  supportedChains
+  supportedChains,
+  retrunTransactions,
+  dstDisplayTokenAddr
 }) => {
   try {
+    if (xpayRoot === null) {
+      throw new Error("XPay was incorrectly initialised");
+    }
     return await new Promise(async (resolve) => {
       await waitForInitialization();
-      xswapRoot.render(
-        /* @__PURE__ */ jsx42(
+      if (xpayRoot === null) {
+        throw new Error("XPay was incorrectly initialised");
+      }
+      xpayRoot.render(
+        /* @__PURE__ */ jsx47(
           TxConfigForm,
           {
             integratorId,
@@ -2438,12 +3184,20 @@ var openTxConfigForm = async ({
             customContractCalls,
             desc,
             supportedChains,
+            retrunTransactions,
+            dstDisplayTokenAddr,
             onSubmit: (route) => {
-              resolve(route);
-              xswapRoot.render("");
+              if (retrunTransactions) {
+                resolve(route);
+              }
+              if (xpayRoot) {
+                xpayRoot.render("");
+              }
             },
             onClose: () => {
-              xswapRoot.render("");
+              if (xpayRoot) {
+                xpayRoot.render("");
+              }
             }
           }
         )
@@ -2455,8 +3209,8 @@ var openTxConfigForm = async ({
 };
 
 // src/components/TxStatusButton/index.tsx
-import { useMemo as useMemo9, useState as useState9 } from "react";
-import { Fragment as Fragment6, jsx as jsx43, jsxs as jsxs19 } from "react/jsx-runtime";
+import { useMemo as useMemo9, useState as useState11 } from "react";
+import { Fragment as Fragment7, jsx as jsx48, jsxs as jsxs23 } from "react/jsx-runtime";
 var TxStatusButton = ({ transaction }) => {
   const {
     srcChain: fromChain,
@@ -2469,84 +3223,92 @@ var TxStatusButton = ({ transaction }) => {
     isDone,
     explorer
   } = transaction;
-  const [isWide, setIsWide] = useState9(false);
+  const [isWide, setIsWide] = useState11(false);
   const background = useMemo9(
-    () => isDone ? "bg-[rgba(2,2,2,1)] bg-gradient-to-r from-[rgba(76,175,80,0.2)] to-[rgba(46,125,50,0.2)]" : "bg-[rgba(2,2,2,1)] bg-gradient-to-r from-[rgba(54,129,198,0.2)] to-[rgba(43,74,157,0.2)]",
+    () => 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(
-    () => isDone ? "border border-solid border-x_green_dark" : "border border-solid border-x_blue_dark",
+    () => isDone ? "xpay-border xpay-border-solid xpay-border-x_green_dark" : "xpay-border xpay-border-solid xpay-border-x_blue_dark",
     [isDone]
   );
-  return /* @__PURE__ */ jsxs19("div", { className: "flex gap-2", onClick: () => setIsWide((x) => !x), children: [
-    isWide && /* @__PURE__ */ jsxs19(
-      "div",
-      {
-        className: `flex items-center min-w-60 sm:w-[520px] text-white h-14 px-4 text-sm gap-3 rounded-xl ${background} ${border}`,
-        children: [
-          /* @__PURE__ */ jsxs19("div", { className: "flex justify-between flex-col gap-2 sm:gap-5 sm:flex-row w-full", children: [
-            /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx43(
-                "img",
-                {
-                  className: "w-5 h-5",
-                  src: fromChainImage,
-                  alt: "source chain"
-                }
-              ),
-              /* @__PURE__ */ jsx43("div", { children: fromChain }),
-              /* @__PURE__ */ jsx43("div", { className: "w-3.5 h-3.5", children: /* @__PURE__ */ jsx43(ArrowRightIcon, {}) }),
-              /* @__PURE__ */ jsx43("img", { className: "w-5 h-5", src: toChainImage, alt: "to chain" }),
-              /* @__PURE__ */ jsx43("div", { children: toChain })
-            ] }),
-            /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx43("div", { children: "Sent" }),
-              /* @__PURE__ */ jsx43("div", { children: fromAmount }),
-              /* @__PURE__ */ jsx43("div", { children: fromToken }),
-              fromTokenImage ? /* @__PURE__ */ jsx43(
-                "img",
-                {
-                  className: "w-5 h-5",
-                  src: fromTokenImage,
-                  alt: "source token"
-                }
-              ) : /* @__PURE__ */ jsx43(
-                UnknownTokenLogo,
+  return /* @__PURE__ */ jsxs23(
+    "div",
+    {
+      className: "xpay-flex xpay-gap-2",
+      onClick: () => setIsWide((x) => !x),
+      children: [
+        isWide && /* @__PURE__ */ jsxs23(
+          "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(
+                    "img",
+                    {
+                      className: "xpay-w-5 xpay-h-5",
+                      src: fromChainImage,
+                      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(
+                    "img",
+                    {
+                      className: "xpay-w-5 xpay-h-5",
+                      src: toChainImage,
+                      alt: "to chain"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx48("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(
+                    "img",
+                    {
+                      className: "xpay-w-5 xpay-h-5",
+                      src: fromTokenImage,
+                      alt: "source token"
+                    }
+                  ) : /* @__PURE__ */ jsx48(UnknownTokenLogo, { tokenName: "?" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx48(
+                "a",
                 {
-                  tokenName: "?",
-                  className: "token-select__generated-logo"
+                  href: explorer,
+                  target: "_blank",
+                  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, {}) })
                 }
               )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx48(
+          "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" }) })
+              ] }) })
             ] })
-          ] }),
-          /* @__PURE__ */ jsx43(
-            "a",
-            {
-              href: explorer,
-              target: "_blank",
-              rel: "noreferrer",
-              className: "no-underline cursor-pointer",
-              "aria-label": "Show the transaction in the chain explorer",
-              children: /* @__PURE__ */ jsx43("div", { className: "w-3.5 h-3.5", children: /* @__PURE__ */ jsx43(ArrowUpRightIcon, {}) })
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx43(
-      "div",
-      {
-        className: `text-white rounded-xl cursor-pointer ${background} ${border}`,
-        children: /* @__PURE__ */ jsxs19("div", { className: "flex gap-2 items-center h-14 w-20 justify-center", children: [
-          /* @__PURE__ */ jsx43(ArrowLeftIcon, {}),
-          /* @__PURE__ */ jsx43("div", { className: "relative flex items-center justify-center w-9 h-9", children: isDone ? /* @__PURE__ */ jsx43("div", { className: "text-x_green w-5 h-5", children: /* @__PURE__ */ jsx43(CheckIcon, {}) }) : /* @__PURE__ */ jsxs19(Fragment6, { children: [
-            /* @__PURE__ */ jsx43("div", { className: "w-5 h-5", children: /* @__PURE__ */ jsx43(XSwapLogo, {}) }),
-            /* @__PURE__ */ jsx43("div", { className: "absolute flex items-center justify-center top-0 left-0 right-0 bottom-0 text-white", children: /* @__PURE__ */ jsx43(CircularProgressIcon, {}) })
-          ] }) })
-        ] })
-      }
-    )
-  ] });
+          }
+        )
+      ]
+    }
+  );
 };
 var renderedTransactions = [];
 var addTransactionToRenderedTransactions = (transaction) => {
@@ -2568,27 +3330,37 @@ var updateTransactionDoneInRenderedTransactions = (txHash) => {
   }
 };
 var renderTxStatusButtons = () => {
-  const buttons = renderedTransactions.map((item) => /* @__PURE__ */ jsx43(TxStatusButton, { transaction: item }, item.txHash));
-  txStatusRoot.render(buttons);
+  const buttons = renderedTransactions.map((item) => /* @__PURE__ */ jsx48(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 })
+  );
 };
 
 // src/components/Skeleton/index.tsx
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx49 } from "react/jsx-runtime";
 var Skeleton = ({ width, height }) => {
-  return /* @__PURE__ */ jsx44("div", { className: `bg-current rounded animate-pulse ${width} ${height}` });
+  return /* @__PURE__ */ jsx49(
+    "div",
+    {
+      className: `xpay-bg-gray-700 xpay-rounded xpay-animate-pulse ${width} ${height}`
+    }
+  );
 };
 
 // src/services/integrations/monitoring.ts
 import retry from "async-retry";
 
 // src/services/blockchain.ts
-import { ethers as ethers4 } from "ethers";
+import { ethers as ethers5 } from "ethers";
 var getCustomTokenData = async (chain, tokenAddress) => {
   const rpcUrl = chain.publicRpcUrls[0];
-  const customTokenContract = new ethers4.Contract(
+  const customTokenContract = new ethers5.Contract(
     tokenAddress.toLowerCase(),
     ERC20Abi,
-    ethers4.getDefaultProvider(rpcUrl)
+    ethers5.getDefaultProvider(rpcUrl)
   );
   try {
     const query = async (contract, method, args = []) => {
@@ -2627,7 +3399,7 @@ var renderTxStatus = async (txChainId, txHash) => {
     ({ web3Environment, swapSupported }) => web3Environment === "mainnet" /* MAINNET */ && swapSupported
   );
   const messageSentEvent = txReceipt.logs?.find((log) => {
-    return log.topics[0] === ethers5.utils.id(MSG_SENT_EVENT_SIG);
+    return log.topics[0] === ethers6.utils.id(MSG_SENT_EVENT_SIG);
   });
   if (!messageSentEvent) {
     throw new Error(
@@ -2635,7 +3407,7 @@ var renderTxStatus = async (txChainId, txHash) => {
     );
   }
   const messageId = messageSentEvent?.topics[1];
-  const iface = new ethers5.utils.Interface(MSG_SENT_EVENT_ABI);
+  const iface = new ethers6.utils.Interface(MSG_SENT_EVENT_ABI);
   const decodedMessageSentEvent = iface.parseLog(messageSentEvent);
   if (!decodedMessageSentEvent) {
     throw new Error(
@@ -2685,16 +3457,16 @@ var renderTxStatus = async (txChainId, txHash) => {
   if (!xSwapRouterOnDestinationAddress) {
     throw new Error(`Unknown destination XSwapRouter!`);
   }
-  const xSwapRouterOnDestination = new ethers5.Contract(
+  const xSwapRouterOnDestination = new ethers6.Contract(
     xSwapRouterOnDestinationAddress,
     MSG_RECEIVED_EVENT_ABI,
-    ethers5.getDefaultProvider(
+    ethers6.getDefaultProvider(
       supportedChains.find((chain) => chain.chainId === dstChainId)?.publicRpcUrls[0]
     )
   );
   const msgReceivedEventFilter = {
     address: xSwapRouterOnDestinationAddress,
-    topics: [ethers5.utils.id(MSG_RECEIVED_EVENT_SIG), messageId]
+    topics: [ethers6.utils.id(MSG_RECEIVED_EVENT_SIG), messageId]
   };
   const onSuccess = async () => {
     updateTransactionDoneInRenderedTransactions(txHash);
@@ -2710,6 +3482,14 @@ var renderTxStatus = async (txChainId, txHash) => {
       onSuccess();
     }
   });
+  setTimeout(
+    () => getTxStatus({ transferId: messageId }).then((response) => {
+      if (response.status === "DONE") {
+        onSuccess();
+      }
+    }),
+    30 * 60 * 1e3
+  );
   xSwapRouterOnDestination.once(msgReceivedEventFilter, () => onSuccess());
 };
 var getTxReceipt = async (txChainId, txHash) => {
@@ -2717,7 +3497,7 @@ var getTxReceipt = async (txChainId, txHash) => {
     const chain = (await getChains()).find(
       (chain2) => chain2.chainId === txChainId
     );
-    const provider = new ethers5.providers.JsonRpcProvider(
+    const provider = new ethers6.providers.JsonRpcProvider(
       chain?.publicRpcUrls[0]
     );
     return await retry(async () => {
@@ -2740,7 +3520,9 @@ var openTransactionModal = async ({
   dstChain,
   dstToken,
   customContractCalls = [],
-  desc
+  desc,
+  retrunTransactions,
+  dstDisplayToken
 }) => {
   const supportedChains = (await getChains()).filter(
     ({ web3Environment, swapSupported }) => web3Environment === "mainnet" /* MAINNET */ && swapSupported
@@ -2752,9 +3534,13 @@ var openTransactionModal = async ({
     dstTokenAddr: dstToken,
     customContractCalls,
     desc,
-    supportedChains
+    supportedChains,
+    retrunTransactions,
+    dstDisplayTokenAddr: dstDisplayToken
   });
-  return route.transactions;
+  if (retrunTransactions) {
+    return route.transactions;
+  }
 };
 var validateSwapTxData = (supportedChains, dstChain, dstToken) => {
   const supportedDstChain = supportedChains.find(
@@ -2765,7 +3551,7 @@ var validateSwapTxData = (supportedChains, dstChain, dstToken) => {
   }
   if (!isETHAddressValid(dstToken)) {
     throw new Error(
-      `Provided token address ${dstToken} on chain ${dstChain} is not correct`
+      `Provided token address ${dstToken} on chain ${dstChain} is invalid`
     );
   }
 };