@xswap-link/sdk 0.2.5 → 0.3.0

package/dist/index.js

@@ -59,7 +59,7 @@ var xswap_config_default = {
 };
 
 // package.json
-var version = "0.2.5";
+var version = "0.3.0";
 
 // src/components/WaitingForInit/index.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -86,33 +86,37 @@ var WaitingForInit = () => {
 
 // src/config/init.tsx
 var import_jsx_runtime2 = require("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 })
@@ -123,27 +127,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 = (0, import_client.createRoot)(xswapElement);
+  xpayRoot = (0, import_client.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 = (0, import_client.createRoot)(txStatusElement);
+  xpayTxStatusRoot = (0, import_client.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 = (0, import_client.createRoot)(initIndicatorElement);
+  xpayInitIndicatorRoot = (0, import_client.createRoot)(initIndicatorElement);
 };
 var displayInitIndicator = (display) => {
-  display ? initIndicatorRoot.render(/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(WaitingForInit, {})) : initIndicatorRoot.render("");
+  if (isServer || !xpayInitIndicatorRoot) {
+    return;
+  }
+  display ? xpayInitIndicatorRoot.render(/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(WaitingForInit, {})) : xpayInitIndicatorRoot.render(null);
 };
 
 // src/services/api.ts
@@ -198,7 +215,7 @@ async function getTxStatus(payload) {
 }
 
 // src/services/integrations/customCalls/staking.ts
-var import_ethers3 = require("ethers");
+var import_ethers4 = require("ethers");
 
 // src/models/Addresses.ts
 var ContractName = /* @__PURE__ */ ((ContractName2) => {
@@ -570,13 +587,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)"
@@ -588,6 +604,17 @@ var MSG_RECEIVED_EVENT_ABI = [
 
 // src/utils/contracts.ts
 var IERC20 = new import_ethers.ethers.utils.Interface(ERC20Abi);
+var getAllowanceOf = async (token, wallet, spender, rpcUrl) => {
+  const provider = import_ethers.ethers.getDefaultProvider(rpcUrl);
+  if (token === import_ethers.ethers.constants.AddressZero) {
+    return import_ethers.ethers.constants.MaxUint256.toString();
+  }
+  const contract = new import_ethers.ethers.Contract(token, ERC20Abi, provider);
+  return import_ethers.ethers.utils.formatUnits(
+    await contract.allowance(wallet, spender),
+    await contract.decimals()
+  );
+};
 var getBalances = async (chain, wallet) => {
   return {
     ...await getNativeBalance(chain, wallet),
@@ -674,6 +701,60 @@ var isETHAddressValid = (address) => {
   return /^0x[a-fA-F0-9]{40}$/.test(address);
 };
 
+// src/utils/parseWeb3Error.ts
+var import_ethers3 = require("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 import_ethers3.ethers.errors.INVALID_ARGUMENT:
+        return "Invalid argument provided to the transaction.";
+      case import_ethers3.ethers.errors.MISSING_ARGUMENT:
+        return "Missing required argument for the transaction.";
+      case import_ethers3.ethers.errors.UNEXPECTED_ARGUMENT:
+        return "Unexpected argument provided to the transaction.";
+      case import_ethers3.ethers.errors.CALL_EXCEPTION:
+        return "Contract call failed. The transaction might have been reverted.";
+      case import_ethers3.ethers.errors.INSUFFICIENT_FUNDS:
+        return "Insufficient funds to complete the transaction.";
+      case import_ethers3.ethers.errors.NONCE_EXPIRED:
+        return "Transaction nonce has expired. Please try again.";
+      case import_ethers3.ethers.errors.REPLACEMENT_UNDERPRICED:
+        return "Replacement transaction underpriced. Please increase the gas price.";
+      case import_ethers3.ethers.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
 var import_date_fns = require("date-fns");
 var deepMergeObjects = (obj1, obj2) => {
@@ -701,12 +782,12 @@ var getDate = (blockTimestamp) => {
 };
 
 // src/services/integrations/monitoring.ts
-var import_ethers6 = require("ethers");
+var import_ethers7 = require("ethers");
 
 // src/components/Alert/index.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var Alert = ({ desc }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.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__ */ (0, import_jsx_runtime3.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
   ] });
@@ -878,7 +959,7 @@ var CircularProgressIcon = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     "svg",
     {
-      className: "animate-spin-slow text-white",
+      className: "animate-spin-slow xpay-text-white",
       width: "33",
       height: "33",
       viewBox: "0 0 33 33",
@@ -1190,20 +1271,122 @@ var XSwapLogo = () => {
   );
 };
 
-// src/components/TxConfigForm/PoweredBy.tsx
+// src/components/icons/SignIcon.tsx
 var import_jsx_runtime26 = require("react/jsx-runtime");
+var SignIcon = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        "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
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var SuccessIcon = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+    "svg",
+    {
+      width: "86",
+      height: "85",
+      viewBox: "0 0 86 85",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          "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__ */ (0, import_jsx_runtime27.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+          "linearGradient",
+          {
+            id: "paint0_linear_1287_1610",
+            x1: "7.58325",
+            y1: "7.08325",
+            x2: "82.2668",
+            y2: "11.4066",
+            gradientUnits: "userSpaceOnUse",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("stop", { stopColor: "#4CAF50" }),
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("stop", { offset: "1", stopColor: "#2E7D32" })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+};
+
+// src/components/icons/ErrorIcon.tsx
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var ErrorIcon = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    "svg",
+    {
+      width: "81",
+      height: "80",
+      viewBox: "0 0 81 80",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("g", { id: "error_FILL0_wght400_GRAD0_opsz24 1", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          "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__ */ (0, import_jsx_runtime28.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+          "linearGradient",
+          {
+            id: "paint0_linear_230_166",
+            x1: "7.16675",
+            y1: "6.66675",
+            x2: "77.4571",
+            y2: "10.7358",
+            gradientUnits: "userSpaceOnUse",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("stop", { stopColor: "#F44336" }),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("stop", { offset: "1", stopColor: "#C62828" })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+};
+
+// src/components/TxConfigForm/PoweredBy.tsx
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var PoweredBy = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex justify-center items-center gap-2 my-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-x_grey", children: "Powered by" }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(XSwapBadgeIcon, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: "\u2715" }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ChainlinkCCIPIcon, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "xpay-flex xpay-justify-center xpay-items-center xpay-gap-2 xpay-my-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "xpay-text-x_grey", children: "Powered by" }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(XSwapBadgeIcon, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { children: "\u2715" }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ChainlinkCCIPIcon, {})
   ] });
 };
 
 // src/components/TxConfigForm/Form.tsx
 var import_react11 = require("react");
-var import_ethers4 = require("ethers");
+var import_ethers5 = require("ethers");
 var import_wagmi2 = require("wagmi");
 
 // src/hooks/useDebounce.tsx
@@ -1229,7 +1412,7 @@ var import_bignumber2 = __toESM(require("bignumber.js"));
 
 // src/components/TxConfigForm/HistoryCard.tsx
 var import_react2 = require("react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var HistoryCard = ({ transaction, supportedChains }) => {
   const date = getDate(transaction.timestamp);
   const supportedTokens = (0, import_react2.useMemo)(() => {
@@ -1275,14 +1458,14 @@ var HistoryCard = ({ transaction, supportedChains }) => {
   const targetChainData = supportedChains.find(
     (chain) => chain.chainId === transaction.targetChainId
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("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__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex w-full items-center justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "text-sm sm:text-base", children: date }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center", children: [
-        transaction.status === "IN_PROGRESS" && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "text-[rgb(250,200,100)]", children: "In progress" }) }),
-        transaction.status === "DONE" && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "text-[rgb(100,200,100)]", children: "Done" }) }),
-        transaction.status === "REVERTED" && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "text-[rgb(255,100,100)]", children: "Reverted" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("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__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "xpay-flex xpay-w-full xpay-items-center xpay-justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "xpay-text-sm sm:xpay-text-base", children: date }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "xpay-flex xpay-items-center", children: [
+        transaction.status === "IN_PROGRESS" && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "xpay-flex xpay-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "xpay-text-[rgb(250,200,100)]", children: "In progress" }) }),
+        transaction.status === "DONE" && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "xpay-flex xpay-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "xpay-text-[rgb(100,200,100)]", children: "Done" }) }),
+        transaction.status === "REVERTED" && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "xpay-flex xpay-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "xpay-text-[rgb(255,100,100)]", children: "Reverted" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           "a",
           {
             href: `${supportedChains.find(
@@ -1290,65 +1473,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__ */ (0, import_jsx_runtime27.jsx)("div", { className: "w-3.5 h-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ArrowUpRightIcon, {}) })
+            children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "xpay-w-3.5 xpay-h-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ArrowUpRightIcon, {}) })
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex justify-between flex-wrap gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "xpay-flex xpay-justify-between xpay-flex-wrap xpay-gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "xpay-flex xpay-items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "xpay-flex xpay-items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             "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__ */ (0, import_jsx_runtime27.jsx)("div", { children: sourceChainData?.displayName })
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { children: sourceChainData?.displayName })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "w-3.5 h-3.5 my-0 mx-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ArrowRightIcon, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "xpay-w-3.5 xpay-h-3.5 xpay-my-0 xpay-mx-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ArrowRightIcon, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "xpay-flex xpay-items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             "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__ */ (0, import_jsx_runtime27.jsx)("div", { children: targetChainData?.displayName })
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { children: targetChainData?.displayName })
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex items-center mb-2 last:mb-0", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center flex-wrap", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "xpay-flex xpay-items-center xpay-mb-2 last:xpay-mb-0", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "xpay-flex xpay-items-center xpay-flex-wrap", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "xpay-flex xpay-items-center", children: [
           Number(transferredAmount) < MINIMUM_DISPLAYED_TOKEN_AMOUNT ? `<${MINIMUM_DISPLAYED_TOKEN_AMOUNT}` : transferredAmount,
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "ml-1", children: tokenData?.symbol }),
-          tokenData?.image ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "xpay-ml-1", children: tokenData?.symbol }),
+          tokenData?.image ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             "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__ */ (0, import_jsx_runtime27.jsx)("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__ */ (0, import_jsx_runtime30.jsx)("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__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "w-3.5 h-3.5 my-0 mx-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ArrowRightIcon, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center", children: [
+        transaction.tokenOutAddress && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "xpay-w-3.5 xpay-h-3.5 xpay-my-0 xpay-mx-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ArrowRightIcon, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "xpay-flex xpay-items-center", children: [
             Number(receivedAmount) < 1e-4 ? "<0.0001" : receivedAmount,
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "ml-1", children: tokenOutData?.symbol }),
-            tokenOutData?.image ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "xpay-ml-1", children: tokenOutData?.symbol }),
+            tokenOutData?.image ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
               "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__ */ (0, import_jsx_runtime27.jsx)("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__ */ (0, import_jsx_runtime30.jsx)("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) })
           ] })
         ] })
       ] }) })
@@ -1357,7 +1540,7 @@ var HistoryCard = ({ transaction, supportedChains }) => {
 };
 
 // src/components/TxConfigForm/History.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var History = ({ signer, supportedChains }) => {
   const [fetchedHistory, setFetchedHistory] = (0, import_react3.useState)();
   const [historyLoadedOnce, setHistoryLoadedOnce] = (0, import_react3.useState)(false);
@@ -1429,11 +1612,11 @@ var History = ({ signer, supportedChains }) => {
     return () => clearInterval(timer);
   }, [signer, fetchHistory, getHistory, historyLoadedOnce]);
   if (!signer)
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex items-center justify-center w-full h-[30vh]", children: "Connect a wallet to browse history" });
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex items-center justify-center w-full", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "w-full h-96 overflow-scroll overflow-x-hidden", children: [
-    fetchedHistory?.length === 0 && historyLoadedOnce && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "w-full text-center py-4 px-0 text-[rgb(158,158,158)]", children: "Your history is empty..." }),
-    !fetchedHistory && !historyLoadedOnce && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex w-full h-full items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CircularProgressIcon, {}) }),
-    fetchedHistory?.map((transaction, index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("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__ */ (0, import_jsx_runtime31.jsx)("div", { className: "xpay-flex xpay-items-center xpay-justify-center xpay-w-full", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "xpay-w-full xpay-h-96 xpay-overflow-scroll xpay-overflow-x-hidden", children: [
+    fetchedHistory?.length === 0 && historyLoadedOnce && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("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__ */ (0, import_jsx_runtime31.jsx)("div", { className: "xpay-flex xpay-w-full xpay-h-full xpay-items-center xpay-justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CircularProgressIcon, {}) }),
+    fetchedHistory?.map((transaction, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       HistoryCard,
       {
         transaction,
@@ -1445,7 +1628,7 @@ var History = ({ signer, supportedChains }) => {
 };
 
 // src/components/TxConfigForm/TopBar.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var TopBar = ({
   signer,
   setSettingsShown,
@@ -1453,33 +1636,33 @@ var TopBar = ({
   historyTabShown,
   onClose
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex w-full justify-between items-center mx-auto p-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("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__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex gap-2 justify-center items-center", children: [
-      !historyTabShown && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "xpay-flex xpay-w-full xpay-justify-between xpay-items-center xpay-mx-auto xpay-p-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("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__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "xpay-flex xpay-gap-2 xpay-justify-center xpay-items-center", children: [
+      !historyTabShown && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         "div",
         {
           onClick: () => setSettingsShown(true),
-          className: "flex items-center text-xs gap-1 cursor-pointer",
-          children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("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__ */ (0, import_jsx_runtime29.jsx)(SettingsIcon, {}) })
+          className: "xpay-flex xpay-items-center xpay-text-xs xpay-gap-1 xpay-cursor-pointer",
+          children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("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__ */ (0, import_jsx_runtime32.jsx)(SettingsIcon, {}) })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         "div",
         {
           onClick: () => setHistoryTabShown((x) => !x),
-          className: "flex items-center text-sm gap-1 cursor-pointer",
-          children: !historyTabShown ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("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__ */ (0, import_jsx_runtime29.jsx)(HistoryIcon, {}) }) }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { children: "Back" })
+          className: "xpay-flex xpay-items-center xpay-text-sm xpay-gap-1 xpay-cursor-pointer",
+          children: !historyTabShown ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("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__ */ (0, import_jsx_runtime32.jsx)(HistoryIcon, {}) }) }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { children: "Back" })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "cursor-pointer text-white", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CloseIcon, {}) })
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "xpay-cursor-pointer xpay-text-white", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CloseIcon, {}) })
     ] })
   ] });
 };
 
 // src/components/TxConfigForm/Settings.tsx
 var import_react4 = require("react");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var Settings = ({
   setSlippage,
   setSettingsShown,
@@ -1496,53 +1679,53 @@ var Settings = ({
       );
     }
   }, [slippageActivePresetIndex, usingSlippageInput]);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("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__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-col gap-4 justify-between", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "text-base", children: "Settings" }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("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__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-gap-4 xpay-justify-between", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "xpay-flex xpay-justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "xpay-text-base", children: "Settings" }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         "div",
         {
-          className: "cursor-pointer",
+          className: "xpay-cursor-pointer",
           onClick: () => setSettingsShown(false),
-          children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CloseIcon, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CloseIcon, {})
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex gap-2 items-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "text-sm text-[rgba(255,255,255,0.6)]", children: "Express delivery" }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "xpay-flex xpay-gap-2 xpay-items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "xpay-text-sm xpay-text-[rgba(255,255,255,0.6)]", children: "Express delivery" }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
           "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__ */ (0, import_jsx_runtime30.jsx)("span", { className: "h-full, w-full rounded-lg bg-[rgba(255,255,255,0.3)]" }),
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "xpay-h-full, xpay-w-full xpay-rounded-lg xpay-bg-[rgba(255,255,255,0.3)]" }),
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                 "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__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex gap-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "min-w-[26px] min-h-[26px] text-[#ffa726]", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(InfoIcon, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("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__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "xpay-flex xpay-gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "xpay-min-w-[26px] xpay-min-h-[26px] xpay-text-[#ffa726]", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(InfoIcon, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("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__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-col gap-2 ", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: " text-[rgba(255,255,255,0.6)] text-sm", children: "Slippage" }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex items-center bg-[rgba(15,15,15,1)] p-1 globalBorder rounded-xl", children: SLIPPAGE_PRESETS.map((preset, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "xpay-text-[rgba(255,255,255,0.6)] xpay-text-sm", children: "Slippage" }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "xpay-flex xpay-gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("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__ */ (0, import_jsx_runtime33.jsx)(
           "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);
@@ -1551,11 +1734,11 @@ var Settings = ({
           },
           index
         )) }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("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__ */ (0, import_jsx_runtime30.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("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__ */ (0, import_jsx_runtime33.jsx)(
             "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) => {
@@ -1571,16 +1754,16 @@ var Settings = ({
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PercentageIcon, {})
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(PercentageIcon, {})
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex gap-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "min-w-[26px] min-h-[26px] text-[#ffa726]", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(InfoIcon, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "text-xs text-left", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "xpay-flex xpay-gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "xpay-min-w-[26px] xpay-min-h-[26px] xpay-text-[#ffa726]", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(InfoIcon, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("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__ */ (0, import_jsx_runtime30.jsx)("br", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("br", {}),
           " ",
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("br", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("br", {}),
           "If the trade fails due to too-low slippage, you will receive USDC on the destination chain."
         ] })
       ] })
@@ -1589,28 +1772,23 @@ var Settings = ({
 };
 
 // src/components/TxConfigForm/FeesDetails.tsx
-var import_react5 = require("react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var FeesDetails = ({
   isGettingRoute,
   route,
   paymentToken,
   dstToken,
-  expressChecked,
-  exceedsExpressDeliveryLimit,
   slippage,
   feesDetailsShown,
+  isExpressDelivery,
   setFeesDetailsShown
 }) => {
-  const isExpressDeliveryPossible = (0, import_react5.useMemo)(() => {
-    return expressChecked && !exceedsExpressDeliveryLimit;
-  }, [expressChecked, exceedsExpressDeliveryLimit]);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("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__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex w-full items-center justify-between text-xs sm:text-sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center gap-1 font-medium text-white opacity-60", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CoinsIcon, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "mr-1", children: "Fees:" }),
-        isGettingRoute ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Skeleton, { width: "w-20", height: "h-4" }) : ` ${weiToHumanReadable({
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("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__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "xpay-flex xpay-w-full xpay-items-center xpay-justify-between xpay-text-xs sm:xpay-text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "xpay-flex xpay-items-center xpay-gap-1 xpay-font-medium xpay-text-white xpay-opacity-60", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CoinsIcon, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "xpay-mr-1", children: "Fees:" }),
+        isGettingRoute ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Skeleton, { width: "xpay-w-20", height: "xpay-h-4" }) : ` ${weiToHumanReadable({
           amount: safeBigNumberFrom(
             route?.xSwapFees.xSwapFee.nativeFee || "0"
           ).add(safeBigNumberFrom(route?.xSwapFees.ccipFee || "0")).add(
@@ -1620,54 +1798,54 @@ var FeesDetails = ({
           precisionFractionalPlaces: 5
         })} ${paymentToken?.symbol}`
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex gap-1 items-center", children: [
-        route?.xSwapFees.expressDeliveryFee && !isGettingRoute && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "xpay-flex xpay-gap-1 xpay-items-center", children: [
+        route?.xSwapFees.expressDeliveryFee && !isGettingRoute && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
           "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__ */ (0, import_jsx_runtime31.jsx)(TimerIcon, {}),
-              isExpressDeliveryPossible ? "Fast ~ 30sec " : "Normal ~ 30min"
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TimerIcon, {}),
+              isExpressDelivery ? "Fast ~ 30sec " : "Normal ~ 30min"
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           "div",
           {
             onClick: () => setFeesDetailsShown((x) => !x),
-            className: "font-medium text-white opacity-60 cursor-pointer flex items-center w-[15px] h-[9px]",
-            children: feesDetailsShown ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ChevronUpIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(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__ */ (0, import_jsx_runtime34.jsx)(ChevronUpIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChevronDownIcon, {})
           }
         )
       ] })
     ] }),
-    feesDetailsShown && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex w-full items-center justify-between gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col text-[10px] gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex justify-between font-medium text-white opacity-60 gap-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { children: "CCIP Fee:" }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "whitespace-nowrap", children: ` ${weiToHumanReadable({
+    feesDetailsShown && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "xpay-flex xpay-w-full xpay-items-center xpay-justify-between xpay-gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-text-[10px] xpay-gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "xpay-flex xpay-justify-between xpay-font-medium xpay-text-white xpay-opacity-60 xpay-gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { children: "CCIP Fee:" }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "xpay-whitespace-nowrap", children: ` ${weiToHumanReadable({
             amount: route?.xSwapFees.ccipFee || "0",
             decimals: 18,
             precisionFractionalPlaces: 5
           })} ${paymentToken?.symbol}` })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex justify-between font-medium text-white opacity-60 gap-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { children: "Native Fee:" }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "whitespace-nowrap", children: ` ${weiToHumanReadable({
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "xpay-flex xpay-justify-between xpay-font-medium xpay-text-white xpay-opacity-60 xpay-gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { children: "Native Fee:" }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "xpay-whitespace-nowrap", children: ` ${weiToHumanReadable({
             amount: route?.xSwapFees.xSwapFee.nativeFee || "0",
             decimals: 18,
             precisionFractionalPlaces: 5
           })} ${paymentToken?.symbol}` })
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col text-[10px] gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex justify-between font-medium text-white opacity-60 gap-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { children: "Slippage:" }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "whitespace-nowrap", children: `${slippage}%` })
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-text-[10px] xpay-gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "xpay-flex xpay-justify-between xpay-font-medium xpay-text-white xpay-opacity-60 xpay-gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { children: "Slippage:" }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "xpay-whitespace-nowrap", children: `${slippage}%` })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex justify-between font-medium text-white opacity-60 gap-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { children: "Min amount out:" }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "whitespace-nowrap", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "xpay-flex xpay-justify-between xpay-font-medium xpay-text-white xpay-opacity-60 xpay-gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { children: "Min amount out:" }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "xpay-whitespace-nowrap", children: [
             weiToHumanReadable({
               amount: route?.minAmountOut || "0",
               decimals: dstToken?.decimals || 18,
@@ -1683,131 +1861,120 @@ var FeesDetails = ({
 };
 
 // src/components/TxConfigForm/Summary.tsx
-var import_react7 = require("react");
+var import_react6 = require("react");
 
 // src/components/TxConfigForm/UsdPrice.tsx
-var import_react6 = require("react");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_react5 = require("react");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var UsdPrice = ({
   prices,
   token,
   amount = "0",
-  loading = false,
-  type,
-  setExceedsExpressDeliveryLimit
+  loading = false
 }) => {
-  const [usdPrice, setUsdPrice] = (0, import_react6.useState)("0.00");
-  (0, import_react6.useEffect)(() => {
+  const [usdPrice, setUsdPrice] = (0, import_react5.useState)("0.00");
+  (0, import_react5.useEffect)(() => {
     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__ */ (0, import_jsx_runtime32.jsx)("div", { className: "opacity-60 py-4", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Skeleton, { width: "w-12", height: "h-4" }) : token ? prices && prices[token.address] ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { children: `$${usdPrice}` }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Alert, { desc: "Unknown price" }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children: "$0.00" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "xpay-opacity-60", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Skeleton, { width: "xpay-w-12", height: "xpay-h-4" }) : token ? prices && prices[token.address] ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { children: `$${usdPrice}` }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Alert, { desc: "Unknown price" }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_jsx_runtime35.Fragment, { children: "$0.00" }) });
 };
 
 // src/components/UnknownTokenLogo/UnknownTokenLogo.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var UnknownTokenLogo = ({ tokenName, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     "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
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var Summary = ({
   isGettingRoute,
   route,
   dstToken,
   dstChain
 }) => {
-  const [prices, setPrices] = (0, import_react7.useState)();
-  const amountReadable = (0, import_react7.useMemo)(
+  const [prices, setPrices] = (0, import_react6.useState)();
+  const amountReadable = (0, import_react6.useMemo)(
     () => weiToHumanReadable({
       amount: route?.estAmountOut || "0",
       decimals: dstToken?.decimals || 18,
-      precisionFractionalPlaces: 5
+      precisionFractionalPlaces: 8
     }),
     [route, dstToken]
   );
-  (0, import_react7.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (dstChain) {
       getPrices({ chainId: dstChain.chainId, currency: "USD" }).then(
         (prices2) => setPrices(prices2)
       );
     }
   }, [dstChain]);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4 relative", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-[rgba(255,255,255,0.6)] text-sm", children: "You receive" }),
-        isGettingRoute ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("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__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "xpay-flex xpay-justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "xpay-text-[rgba(255,255,255,0.6)] xpay-text-sm", children: "You receive" }),
+        isGettingRoute ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           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__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex gap-2 items-center text-white text-xl sm:text-3xl", children: amountReadable })
+        ) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "xpay-flex xpay-gap-2 xpay-items-center xpay-text-white xpay-text-xl sm:xpay-text-3xl", children: amountReadable })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col items-end gap-1 text-sm", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex justify-center items-center gap-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "w-5 h-5", children: dstToken?.image ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-items-end xpay-gap-1 xpay-text-sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "xpay-flex xpay-justify-center xpay-items-center xpay-gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "xpay-w-5 xpay-h-5", children: dstToken?.image ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             "img",
             {
-              className: "w-5 h-5",
+              className: "xpay-w-5 xpay-h-5",
               src: dstToken?.image,
               alt: dstToken?.name
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-            UnknownTokenLogo,
-            {
-              tokenName: "?",
-              className: "token-select__generated-logo"
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-base sm:text-xl", children: dstToken?.name })
+          ) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(UnknownTokenLogo, { tokenName: "?" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "xpay-text-base sm:xpay-text-xl", children: dstToken?.name })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex justify-center items-center gap-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-[rgba(255,255,255,0.6)] text-right", children: "on " }),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-1 text-white", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "w-4 h-4", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("img", { src: dstChain?.image, alt: dstChain?.name }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { children: dstChain?.displayName })
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "xpay-flex xpay-justify-center xpay-items-center xpay-gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("p", { className: "xpay-text-[rgba(255,255,255,0.6)] xpay-text-right", children: [
+            "on",
+            " "
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "xpay-flex xpay-items-center xpay-gap-1 xpay-text-white", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "xpay-w-4 xpay-h-4", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("img", { src: dstChain?.image, alt: dstChain?.name }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { children: dstChain?.displayName })
           ] })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "xpay-pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       UsdPrice,
       {
         prices,
         token: dstToken,
         amount: amountReadable,
-        loading: isGettingRoute,
-        type: "dst"
+        loading: isGettingRoute
       }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("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__ */ (0, import_jsx_runtime34.jsx)("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__ */ (0, import_jsx_runtime34.jsx)(ArrowDownIcon, {}) }) })
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("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__ */ (0, import_jsx_runtime37.jsx)("div", { className: "xpay-flex xpay-items-center xpay-justify-center xpay-rounded-lg xpay-w-8 xpay-h-8 xpay-bg-gradient-to-l xpay-from-[rgba(54,129,198,1)] xpay-to-[rgba(43,74,157,1)] ", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ArrowDownIcon, {}) }) })
   ] });
 };
 
 // src/components/TxConfigForm/SwapPanel.tsx
-var import_react10 = require("react");
+var import_react9 = require("react");
 
 // src/components/TxConfigForm/TokenPicker.tsx
-var import_react8 = require("react");
+var import_react7 = require("react");
 var import_react_dom = require("react-dom");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var TokenPicker = ({
   onCloseClick,
   tokens,
@@ -1816,8 +1983,7 @@ var TokenPicker = ({
   signer,
   balances
 }) => {
-  const [searchValue, setSearchValue] = (0, import_react8.useState)("");
-  const modalRoot = document.querySelector("#xswap-modal");
+  const [searchValue, setSearchValue] = (0, import_react7.useState)("");
   const onBackdropClick = (e) => {
     e.stopPropagation();
     e.nativeEvent.stopImmediatePropagation();
@@ -1825,7 +1991,7 @@ var TokenPicker = ({
       onCloseClick();
     }
   };
-  const filteredTokens = (0, import_react8.useMemo)(() => {
+  const filteredTokens = (0, import_react7.useMemo)(() => {
     const isMatch = (value, searchValue2) => value.toLowerCase().indexOf(searchValue2.toLowerCase()) > -1;
     return tokens?.filter(
       (token) => isMatch(token.symbol, searchValue) || isMatch(token.name, searchValue) || token.address === searchValue.toLowerCase()
@@ -1833,91 +1999,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 ? (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  const xpayRoot2 = document.querySelector("#xpay-root");
+  return xpayRoot2 ? (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       "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__ */ (0, import_jsx_runtime35.jsxs)("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__ */ (0, import_jsx_runtime35.jsx)(
+        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__ */ (0, import_jsx_runtime38.jsxs)("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__ */ (0, import_jsx_runtime38.jsx)(
             "div",
             {
               onClick: onCloseClick,
-              className: "absolute top-4 right-4 cursor-pointer",
-              children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CloseIcon, {})
+              className: "xpay-absolute xpay-top-4 xpay-right-4 xpay-cursor-pointer",
+              children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CloseIcon, {})
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-base mb-4", children: "Pick a token" }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("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__ */ (0, import_jsx_runtime35.jsx)("div", { className: "w-6 h-6", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SearchIcon, {}) }),
-            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "xpay-text-base xpay-mb-4", children: "Pick a token" }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("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__ */ (0, import_jsx_runtime38.jsx)("div", { className: "xpay-w-6 xpay-h-6", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SearchIcon, {}) }),
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
               "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__ */ (0, import_jsx_runtime35.jsx)("div", { className: "my-4 mx-0 flex flex-wrap gap-3", children: tokens?.filter((token) => token?.quickPick).map((token) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("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__ */ (0, import_jsx_runtime38.jsxs)(
             "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__ */ (0, import_jsx_runtime35.jsx)("img", { src: token.image, alt: token.name, className: "w-5" }),
-                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "text-sm", children: token.symbol })
+                /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                  "img",
+                  {
+                    src: token.image,
+                    alt: token.name,
+                    className: "xpay-w-5"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "xpay-text-sm", children: token.symbol })
               ]
             },
             token.address
           )) }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "h-[2px] my-0 mx-[-24px] w-[100%+48px] px-12 bg-[rgba(255,255,255,0.1)]" }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("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__ */ (0, import_jsx_runtime35.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("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__ */ (0, import_jsx_runtime38.jsx)("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__ */ (0, import_jsx_runtime38.jsxs)(
             "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__ */ (0, import_jsx_runtime35.jsx)(
-                  "img",
-                  {
-                    src: token.image,
-                    alt: token.name,
-                    className: "token-picker__all__logo"
-                  }
-                ) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("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__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex justify-between items-center gap-1 overflow-hidden grow", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col leading-[16px]", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "overflow-hidden whitespace-nowrap text-ellipsis text-[15px]", children: token.name }),
-                    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "text-[#888] text-[11px]", children: token.symbol })
+                token.image ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("img", { src: token.image, alt: token.name }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("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__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "xpay-flex xpay-justify-between xpay-items-center xpay-gap-1 xpay-overflow-hidden xpay-grow", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-leading-[16px]", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "xpay-overflow-hidden xpay-whitespace-nowrap xpay-text-ellipsis xpay-text-[15px]", children: token.name }),
+                    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "xpay-text-[#888] xpay-text-[11px]", children: token.symbol })
                   ] }),
-                  signer && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_jsx_runtime35.Fragment, { children: balances && balances[token.address] && token.decimals ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "text-xs", children: weiToHumanReadable({
+                  signer && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_jsx_runtime38.Fragment, { children: balances && balances[token.address] && token.decimals ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "xpay-text-xs", children: weiToHumanReadable({
                     amount: balances[token.address]?.toString() || "0",
                     decimals: token.decimals,
                     precisionFractionalPlaces: 4
-                  }) }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Skeleton, { width: "w-12", height: "h-3" }) })
+                  }) }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Skeleton, { width: "xpay-w-12", height: "xpay-h-3" }) })
                 ] })
               ]
             },
             `${index}_${token.address}`
-          )) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "mt-4 flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-sm text-white", children: "No tokens found." }) }) })
+          )) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "xpay-mt-4 xpay-flex xpay-justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "xpay-text-sm xpay-text-white", children: "No tokens found." }) }) })
         ] })
       }
     ),
-    modalRoot
+    xpayRoot2
   ) : null;
 };
 
 // src/components/TxConfigForm/ChainListElement.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var ChainListElement = ({
   chain,
   setSrcChain,
@@ -1925,31 +2092,31 @@ var ChainListElement = ({
   index,
   length
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
       "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__ */ (0, import_jsx_runtime36.jsx)("img", { width: 12, height: 12, src: chain.image, alt: chain.displayName }),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("img", { width: 12, height: 12, src: chain.image, alt: chain.displayName }),
           chain.displayName
         ]
       }
     ),
-    index !== length - 1 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "h-px mx-2 bg-[rgba(255,255,255,0.15)]" })
+    index !== length - 1 && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("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
-var import_react9 = require("react");
+var import_react8 = require("react");
 var import_bignumber3 = __toESM(require("bignumber.js"));
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var BalanceComponent = ({ srcToken, balances }) => {
-  const balanceText = (0, import_react9.useMemo)(() => {
+  const balanceText = (0, import_react8.useMemo)(() => {
     if (!balances || !srcToken) return "0";
     if (balances[srcToken.address]?.toString() === "0") return "0";
     const fullHumanReadable = weiToHumanReadable({
@@ -1967,7 +2134,7 @@ var BalanceComponent = ({ srcToken, balances }) => {
       precisionFractionalPlaces: 5
     });
   }, [srcToken, balances]);
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
     "Balance:",
     " ",
     srcToken && balances ? weiToHumanReadable({
@@ -1975,12 +2142,12 @@ var BalanceComponent = ({ srcToken, balances }) => {
       decimals: srcToken.decimals,
       precisionFractionalPlaces: 4
     }) : 0,
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "bg-gradient-to-r from-x_blue_light to-x_blue_dark bg-clip-text text-transparent", children: "Max" })
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("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
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var SwapPanel = ({
   amount,
   setAmount,
@@ -1991,13 +2158,12 @@ var SwapPanel = ({
   signer,
   balances,
   prices,
-  supportedChains,
-  setExceedsExpressDeliveryLimit
+  supportedChains
 }) => {
-  const [chainListShown, setChainListShown] = (0, import_react10.useState)(false);
-  const [tokenListShown, setTokenListShown] = (0, import_react10.useState)(false);
-  const listRef = (0, import_react10.useRef)(null);
-  const buttonRef = (0, import_react10.useRef)(null);
+  const [chainListShown, setChainListShown] = (0, import_react9.useState)(false);
+  const [tokenListShown, setTokenListShown] = (0, import_react9.useState)(false);
+  const listRef = (0, import_react9.useRef)(null);
+  const buttonRef = (0, import_react9.useRef)(null);
   const handleClickOutside = (event) => {
     if (listRef.current && buttonRef.current) {
       const listElement = listRef.current;
@@ -2016,24 +2182,24 @@ var SwapPanel = ({
         })
       );
   };
-  (0, import_react10.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (chainListShown) {
       document.addEventListener("mousedown", handleClickOutside);
       return () => document.removeEventListener("mousedown", handleClickOutside);
     }
   }, [chainListShown]);
-  const chainListOptions = (0, import_react10.useMemo)(
+  const chainListOptions = (0, import_react9.useMemo)(
     () => supportedChains.filter((chain) => chain.chainId !== srcChain?.chainId),
     [supportedChains, srcChain]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex justify-between globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex flex-col justify-between gap-2 overflow-hidden w-1/2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "text-white opacity-60 text-xs sm:text-sm font-medium", children: "You pay" }),
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("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__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-justify-between xpay-gap-2 xpay-overflow-hidden xpay-w-1/2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "xpay-text-white xpay-opacity-60 xpay-text-xs sm:xpay-text-sm xpay-font-medium", children: "You pay" }),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           "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;
@@ -2049,28 +2215,26 @@ var SwapPanel = ({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "flex items-center text-sm text-[rgba(255,255,255,0.6)]", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "xpay-flex xpay-items-center xpay-text-sm xpay-text-[rgba(255,255,255,0.6)]", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
         UsdPrice,
         {
           prices,
           token: srcToken,
           amount,
-          loading: false,
-          type: "src",
-          setExceedsExpressDeliveryLimit
+          loading: false
         }
       ) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex flex-col relative items-end gap-2.5 w-1/2 text-xs", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("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__ */ (0, import_jsx_runtime41.jsxs)(
         "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__ */ (0, import_jsx_runtime38.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
               "img",
               {
                 height: 16,
@@ -2079,12 +2243,12 @@ var SwapPanel = ({
                 alt: srcToken?.name
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { children: srcToken?.symbol }),
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DownArrowIcon, {})
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { children: srcToken?.symbol }),
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DownArrowIcon, {})
           ]
         }
       ),
-      tokenListShown && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      tokenListShown && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
         TokenPicker,
         {
           onCloseClick: () => setTokenListShown(false),
@@ -2095,22 +2259,22 @@ var SwapPanel = ({
           balances
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
         "div",
         {
           onClick: handleMaxClick,
-          className: "flex gap-1 items-center font-medium text-white opacity-60 py-0.5 cursor-pointer",
-          children: signer && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(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__ */ (0, import_jsx_runtime41.jsx)(BalanceComponent, { balances, srcToken })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
         "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__ */ (0, import_jsx_runtime38.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
               "img",
               {
                 width: "16",
@@ -2119,17 +2283,17 @@ var SwapPanel = ({
                 alt: srcChain?.name
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { children: srcChain?.displayName }),
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DownArrowIcon, {})
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { children: srcChain?.displayName }),
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DownArrowIcon, {})
           ]
         }
       ),
-      chainListShown && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      chainListShown && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
         "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__ */ (0, import_jsx_runtime38.jsx)(
+          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__ */ (0, import_jsx_runtime41.jsx)(
             ChainListElement,
             {
               index,
@@ -2137,7 +2301,8 @@ var SwapPanel = ({
               setSrcChain,
               setChainListShown,
               chain
-            }
+            },
+            chain.chainId
           ))
         }
       )
@@ -2146,30 +2311,30 @@ var SwapPanel = ({
 };
 
 // src/components/TxConfigForm/ErrorField.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var ErrorField = ({ error }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     "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
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var Description = ({ description }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex flex-col items-start rounded-lg px-4 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "w-full flex gap-4 items-start justify-between text-xl", children: description }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("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__ */ (0, import_jsx_runtime43.jsx)("div", { className: "xpay-flex xpay-w-full xpay-items-center xpay-justify-between xpay-text-xs sm:xpay-text-sm", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("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
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var Button = ({ children, onClick, type, disabled }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     "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,
@@ -2179,7 +2344,111 @@ var Button = ({ children, onClick, type, disabled }) => {
 };
 
 // src/components/TxConfigForm/Form.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_actions = require("wagmi/actions");
+
+// src/components/TxConfigForm/ConfirmationAmount.tsx
+var import_react10 = require("react");
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var ConfirmationAmount = ({
+  amount,
+  token,
+  chain,
+  type
+}) => {
+  const [prices, setPrices] = (0, import_react10.useState)();
+  const amountReadable = (0, import_react10.useMemo)(() => {
+    return weiToHumanReadable({
+      amount: amount || "0",
+      decimals: token?.decimals || 18,
+      precisionFractionalPlaces: 8
+    });
+  }, [amount, token]);
+  (0, import_react10.useEffect)(() => {
+    if (chain) {
+      getPrices({ chainId: chain.chainId, currency: "USD" }).then(
+        (prices2) => setPrices(prices2)
+      );
+    }
+  }, [chain]);
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "xpay-flex xpay-flex-col xpay-globalBorder xpay-rounded-xl xpay-bg-gradient-to-r xpay-from-x_blue_300_20 xpay-to-x_blue_400_20 xpay-p-4 xpay-relative", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "xpay-flex xpay-justify-between", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "xpay-text-white xpay-opacity-60 xpay-text-xs sm:xpay-text-sm xpay-font-medium", children: type === "src" ? "You pay" : "You receive" }),
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        "div",
+        {
+          className: `xpay-flex xpay-gap-2 xpay-items-center  xpay-text-xl sm:xpay-text-3xl ${type === "dst" ? "xpay-text-[rgba(54,129,198,1)]" : "xpay-text-white"}`,
+          children: amountReadable
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        UsdPrice,
+        {
+          prices,
+          token,
+          amount: amountReadable,
+          loading: false
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "xpay-flex  xpay-gap-2 xpay-text-sm xpay-justify-center xpay-items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-justify-center xpay-items-end xpay-gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "xpay-text-base sm:xpay-text-xl", children: token?.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "xpay-flex xpay-justify-center xpay-items-center xpay-gap-1", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "xpay-text-[rgba(255,255,255,0.6)] xpay-text-xs xpay-text-right", children: chain?.displayName }) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "xpay-w-10 xpay-h-10", children: token?.image ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        "img",
+        {
+          className: "xpay-w-10 xpay-h-10",
+          src: token?.image,
+          alt: token?.name
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        UnknownTokenLogo,
+        {
+          tokenName: "?",
+          className: "xpay-w-10 xpay-h-10"
+        }
+      ) })
+    ] })
+  ] }) });
+};
+
+// src/components/Spinner/index.tsx
+var import_jsx_runtime46 = require("react/jsx-runtime");
+var Spinner = ({ width, height }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { role: "status", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+    "svg",
+    {
+      "aria-hidden": "true",
+      className: `xpay-w-${width} xpay-h-${height} xpay-text-gray-200 xpay-animate-spin dark:xpay-text-gray-600 xpay-fill-[rgba(54,129,198,1)]`,
+      viewBox: "0 0 100 101",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          "path",
+          {
+            d: "M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          "path",
+          {
+            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
+var import_jsx_runtime47 = (
+  // Connect wallet modal
+  require("react/jsx-runtime")
+);
 var Form = ({
   integratorId,
   dstChainId,
@@ -2187,12 +2456,17 @@ var Form = ({
   customContractCalls,
   desc,
   supportedChains,
+  retrunTransactions,
+  dstDisplayTokenAddr,
+  wagmiConfig,
   onSubmit,
-  onClose
+  onClose,
+  setBackdropClickDisabled
 }) => {
   const [signer, setSigner] = (0, import_react11.useState)();
   const [dstChain, setDstChain] = (0, import_react11.useState)();
   const [dstToken, setDstToken] = (0, import_react11.useState)();
+  const [dstDisplayToken, setDstDisplayToken] = (0, import_react11.useState)();
   const [srcChain, setSrcChain] = (0, import_react11.useState)();
   const [srcToken, setSrcToken] = (0, import_react11.useState)();
   const [amount, setAmount] = (0, import_react11.useState)("");
@@ -2207,7 +2481,22 @@ var Form = ({
   const [formError, setFormError] = (0, import_react11.useState)("");
   const [slippage, setSlippage] = (0, import_react11.useState)("1.5");
   const [feesDetailsShown, setFeesDetailsShown] = (0, import_react11.useState)(false);
-  const [exceedsExpressDeliveryLimit, setExceedsExpressDeliveryLimit] = (0, import_react11.useState)(false);
+  const [executingTransactions, setExecutingTransactions] = (0, import_react11.useState)(false);
+  const [transactionSuccessHash, setTransactionSuccessHash] = (0, import_react11.useState)();
+  const [txLoading, setTxLoading] = (0, import_react11.useState)(false);
+  const [approveTxLoading, setApproveTxLoading] = (0, import_react11.useState)(false);
+  const [approveTxDone, setApproveTxDone] = (0, import_react11.useState)(false);
+  const [transactionError, setTransactionError] = (0, import_react11.useState)(null);
+  const currentRouteRequestNonce = (0, import_react11.useRef)(0);
+  const prevAllowanceValuesRef = (0, import_react11.useRef)({
+    srcChainId: srcChain?.chainId,
+    srcTokenAddress: srcToken?.address,
+    routeTo: import_ethers5.ethers.constants.AddressZero
+  });
+  const currentAllowanceRequestNonce = (0, import_react11.useRef)(0);
+  const [isAllowanceLoading, setIsAllowanceLoading] = (0, import_react11.useState)(false);
+  const [srcTokenAllowance, setSrcTokenAllowance] = (0, import_react11.useState)("0");
+  const { sendTransaction } = (0, import_wagmi2.useSendTransaction)({ config: wagmiConfig });
   const debouncedAmount = useDebounce(amount, 1e3);
   const account = (0, import_wagmi2.useAccount)();
   const { switchChainAsync } = (0, import_wagmi2.useSwitchChain)();
@@ -2242,43 +2531,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]);
   (0, import_react11.useEffect)(() => {
-    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: import_ethers4.ethers.utils.parseUnits(debouncedAmount, srcToken.decimals).toString(),
-        fromAddress: signer || ADDRESSES[srcChain.chainId].FeeCollector,
-        fromChain: srcChain.chainId,
-        fromToken: srcToken.address,
-        toAddress: signer || ADDRESSES[dstChain.chainId].FeeCollector,
-        toChain: dstChainId,
-        toToken: dstTokenAddr,
-        paymentToken: paymentToken.address,
-        slippage: Number(slippage),
-        expressDelivery: expressChecked && !exceedsExpressDeliveryLimit,
-        customContractCalls
-      }).then((response) => {
-        setRoute(response);
-        setFormError("");
-      }).catch((err) => {
-        setFormError(err.message);
-      }).finally(() => {
-        setIsGettingRoute(false);
-        clearTimeout(timeout);
-      });
+    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: import_ethers5.ethers.utils.parseUnits(debouncedAmount, srcToken.decimals).toString(),
+      fromAddress: signer || ADDRESSES[srcChain.chainId].FeeCollector,
+      fromChain: srcChain.chainId,
+      fromToken: srcToken.address,
+      toAddress: signer || ADDRESSES[dstChain.chainId].FeeCollector,
+      toChain: dstChainId,
+      toToken: dstTokenAddr,
+      paymentToken: paymentToken.address,
+      slippage: Number(slippage),
+      expressDelivery: expressChecked,
+      customContractCalls
+    }).then((response) => {
+      if (nonce !== currentRouteRequestNonce.current) {
+        return;
+      }
+      setRoute(response);
+      setFormError("");
+    }).catch((err) => {
+      setFormError(err.message);
+    }).finally(() => {
+      setIsGettingRoute(false);
+      clearTimeout(timeout);
+    });
   }, [
     signer,
     srcChain,
@@ -2288,11 +2595,48 @@ var Form = ({
     slippage,
     expressChecked
   ]);
+  (0, import_react11.useEffect)(() => {
+    (async () => {
+      if (!signer || !srcToken?.address || !srcChain?.publicRpcUrls[0] || srcToken?.address === import_ethers5.ethers.constants.AddressZero) {
+        return;
+      }
+      if (route && route.transactions.swap?.to) {
+        const {
+          srcChainId: prevFromChainId,
+          srcTokenAddress: prevFromTokenAddress,
+          routeTo: prevRouteTo
+        } = prevAllowanceValuesRef.current;
+        const hasChanges = srcChain?.chainId !== prevFromChainId || srcToken?.address !== prevFromTokenAddress || route.transactions.swap?.to !== prevRouteTo;
+        if (!hasChanges) {
+          return;
+        }
+        prevAllowanceValuesRef.current = {
+          srcChainId: srcChain?.chainId,
+          srcTokenAddress: srcToken?.address,
+          routeTo: route.transactions.swap?.to
+        };
+        const nonce = Date.now();
+        currentAllowanceRequestNonce.current = nonce;
+        setIsAllowanceLoading(true);
+        const allowanceResponse = await getAllowanceOf(
+          srcToken?.address,
+          signer,
+          route.transactions.swap.to,
+          srcChain?.publicRpcUrls[0]
+        );
+        if (nonce !== currentAllowanceRequestNonce.current) {
+          return;
+        }
+        setSrcTokenAllowance(allowanceResponse);
+        setIsAllowanceLoading(false);
+      }
+    })();
+  }, [srcChain, srcToken?.address, signer, setSrcTokenAllowance, route]);
   (0, import_react11.useEffect)(() => {
     if (srcChain) {
       setPaymentToken(
         srcChain.tokens.find(
-          (token) => token.address.toLowerCase() === import_ethers4.ethers.constants.AddressZero.toLowerCase()
+          (token) => token.address.toLowerCase() === import_ethers5.ethers.constants.AddressZero.toLowerCase()
         )
       );
     }
@@ -2300,9 +2644,18 @@ var Form = ({
   (0, import_react11.useEffect)(() => {
     setAmount("");
     setFormError("");
+    setIsGettingRoute(false);
+    setRoute(void 0);
+    const nonce = Date.now();
+    currentRouteRequestNonce.current = nonce;
   }, [srcToken]);
   (0, import_react11.useEffect)(() => {
     setSrcToken(srcChain?.tokens[0]);
+    setAmount("");
+    setIsGettingRoute(false);
+    setRoute(void 0);
+    const nonce = Date.now();
+    currentRouteRequestNonce.current = nonce;
   }, [srcChain]);
   (0, import_react11.useEffect)(() => {
     if (srcChain) {
@@ -2316,97 +2669,469 @@ var Form = ({
       getBalances(srcChain, signer).then((balances2) => setBalances(balances2));
     }
   }, [srcChain, signer]);
+  (0, import_react11.useEffect)(() => {
+    setBackdropClickDisabled(executingTransactions);
+  }, [executingTransactions]);
+  const isAllowanceOk = (0, import_react11.useMemo)(() => {
+    return srcToken?.address === import_ethers5.ethers.constants.AddressZero || Number(srcTokenAllowance) >= Number(amount);
+  }, [srcToken, amount, srcTokenAllowance]);
+  const triggerTx = (0, import_react11.useCallback)(async () => {
+    if (!route) {
+      return;
+    }
+    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 = (0, import_actions.getChainId)(wagmiConfig);
+            await (0, import_actions.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 = (0, import_react11.useCallback)(
+    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 = (0, import_actions.getChainId)(wagmiConfig);
+            await (0, import_actions.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__ */ (0, import_jsx_runtime42.jsxs)(
-    "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__ */ (0, import_jsx_runtime42.jsx)(
-          TopBar,
+  const swapButton = (0, import_react11.useMemo)(() => {
+    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 && !import_ethers5.ethers.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 = (0, import_react11.useMemo)(() => {
+    let expressDeliveryFee;
+    if (!route?.xSwapFees || !route?.xSwapFees.expressDeliveryFee) {
+      expressDeliveryFee = safeBigNumberFrom("0");
+    } else {
+      expressDeliveryFee = safeBigNumberFrom(
+        route?.xSwapFees.expressDeliveryFee
+      );
+    }
+    if (expressDeliveryFee.gt("0")) {
+      return true;
+    }
+    return false;
+  }, [route]);
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_jsx_runtime47.Fragment, { children: !signer ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-gap-2 xpay-z-10 xpay-my-0 xpay-p-2 md:xpay-p-4 xpay-rounded-3xl xpay-overflow-hidden xpay-font-light sm:xpay-w-x_desktop xpay-w-screen", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "xpay-flex xpay-w-full xpay-justify-end xpay-items-center xpay-mx-auto xpay-p-2", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      "div",
+      {
+        className: "xpay-cursor-pointer xpay-text-white",
+        onClick: onClose,
+        children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(CloseIcon, {})
+      }
+    ) }),
+    " ",
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "xpay-text-xl xpay-font-bold xpay-leading-8 xpay-text-center xpay-text-white", children: "Please connect the wallet first." })
+  ] }) : executingTransactions ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "xpay-flex xpay-flex-col xpay-gap-2 xpay-z-10 xpay-my-0 xpay-p-2 md:xpay-p-4 xpay-rounded-3xl xpay-overflow-hidden xpay-font-light sm:xpay-w-x_desktop xpay-w-screen", children: transactionError ? (
+    // Tx Error modal
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "xpay-flex xpay-w-full xpay-justify-end xpay-items-center xpay-mx-auto xpay-p-2", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        "div",
+        {
+          className: "xpay-cursor-pointer xpay-text-white",
+          onClick: onClose,
+          children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(CloseIcon, {})
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-w-full xpay-justify-center xpay-items-center xpay-mx-auto xpay-p-2 xpay-gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ErrorIcon, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "xpay-flex xpay-flex-col", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "xpay-text-2xl xpay-font-bold xpay-leading-8 xpay-text-center xpay-text-white", children: "Transaction error!" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "xpay-text-sm xpay-text-center xpay-text-white xpay-opacity-50", children: parseWeb3Error(transactionError) }) })
+        ] })
+      ] })
+    ] })
+  ) : transactionSuccessHash ? (
+    // Tx Success modal
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "xpay-flex xpay-w-full xpay-justify-end xpay-items-center xpay-mx-auto xpay-p-2", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        "div",
+        {
+          className: "xpay-cursor-pointer xpay-text-white",
+          onClick: onClose,
+          children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(CloseIcon, {})
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-w-full xpay-justify-center xpay-items-center xpay-mx-auto xpay-p-2 xpay-gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SuccessIcon, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "xpay-flex xpay-flex-col", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "xpay-text-2xl xpay-font-bold xpay-leading-8 xpay-text-center xpay-text-white", children: "Transaction success!" }) }),
+          srcChain?.chainId !== dstChain?.chainId ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("p", { className: "xpay-text-sm xpay-text-center xpay-text-white xpay-opacity-50", children: [
+            "Approximated time of delivery:",
+            " ",
+            isExpressDelivery ? "30 seconds" : "30 minutes"
+          ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_jsx_runtime47.Fragment, {})
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "xpay-flex xpay-gap-4 xpay-items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "xpay-flex xpay-gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "xpay-w-10 xpay-h-10", children: srcToken?.image ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+              "img",
+              {
+                className: "xpay-w-10 xpay-h-10",
+                src: srcToken?.image,
+                alt: srcToken?.name
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+              UnknownTokenLogo,
+              {
+                tokenName: "?",
+                className: "xpay-w-10 xpay-h-10"
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-items-start", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "xpay-flex", children: `${debouncedAmount} ${srcToken?.symbol}` }),
+              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "xpay-text-sm xpay-text-center xpay-text-white xpay-opacity-50", children: srcChain?.displayName })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "xpay-w-3.5 xpay-h-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ArrowRightIcon, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "xpay-flex xpay-gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "xpay-w-10 xpay-h-10", children: (dstDisplayToken ? dstDisplayToken : dstToken)?.image ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+              "img",
+              {
+                className: "xpay-w-10 xpay-h-10",
+                src: (dstDisplayToken ? dstDisplayToken : dstToken)?.image,
+                alt: (dstDisplayToken ? dstDisplayToken : dstToken)?.name
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+              UnknownTokenLogo,
+              {
+                tokenName: "?",
+                className: "xpay-w-10 xpay-h-10"
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-items-start", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "xpay-flex", children: [
+                weiToHumanReadable({
+                  amount: route?.estAmountOut || "0",
+                  decimals: (dstDisplayToken ? dstDisplayToken : dstToken)?.decimals || 18,
+                  precisionFractionalPlaces: 4
+                }),
+                " ",
+                (dstDisplayToken ? dstDisplayToken : dstToken)?.symbol
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "xpay-text-sm xpay-text-center xpay-text-white xpay-opacity-50", children: dstChain?.displayName })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+          "a",
           {
-            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__ */ (0, import_jsx_runtime47.jsx)("p", { className: "xpay-bg-gradient-to-r xpay-from-x_blue_light xpay-to-x_blue_dark xpay-bg-clip-text xpay-text-transparent xpay-underline", children: "View details on Explorer" }),
+              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "xpay-w-3.5 xpay-h-3.5 xpay-bg-gradient-to-r xpay-text-x_blue_dark", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ArrowUpRightIcon, {}) })
+            ]
           }
-        ),
-        settingsShown && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-          Settings,
+        ) })
+      ] })
+    ] })
+  ) : (
+    // Tx Confirmation modal
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "xpay-flex xpay-w-full xpay-justify-between xpay-items-center xpay-mx-auto xpay-p-2 xpay-font-light ", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "xpay-text-white xpay-text-xl", children: "Confirmation" }),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "xpay-flex xpay-w-full xpay-justify-end xpay-items-center xpay-mx-auto xpay-p-2", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          "div",
           {
-            expressChecked,
-            setExpressChecked,
-            setSettingsShown,
-            slippage,
-            setSlippage
+            className: "xpay-cursor-pointer xpay-text-white",
+            onClick: onClose,
+            children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(CloseIcon, {})
           }
-        ),
-        historyTabShown ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(History, { signer, supportedChains }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-col gap-2", children: [
-          desc && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Description, { description: desc }),
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-            SwapPanel,
+        ) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "xpay-flex xpay-flex-col xpay-gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        ConfirmationAmount,
+        {
+          amount: import_ethers5.ethers.utils.parseUnits(debouncedAmount, srcToken?.decimals).toString(),
+          chain: srcChain,
+          token: srcToken,
+          type: "src"
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "xpay-flex xpay-justify-center  xpay-globalBorder xpay-rounded-xl xpay-p-[5px] xpay--mt-7 xpay--mb-6 ", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "xpay-flex xpay-items-center xpay-justify-center xpay-rounded-lg  xpay-w-8 xpay-h-8 xpay-bg-gradient-to-l xpay-from-[rgba(54,129,198,1)] xpay-to-[rgba(43,74,157,1)] ", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ArrowDownIcon, {}) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "xpay-flex xpay-flex-col xpay-gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        ConfirmationAmount,
+        {
+          amount: route?.estAmountOut || "0",
+          chain: dstChain,
+          token: dstDisplayToken ? dstDisplayToken : dstToken,
+          type: "dst"
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-globalBorder xpay-p-4 xpay-justify-center xpay-rounded-xl xpay-bg-[rgba(15,15,15,1)] xpay-relative", children: [
+        route?.transactions.approve && !isAllowanceOk && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "xpay-flex xpay-justify-between xpay-items-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "xpay-flex xpay-items-center xpay-gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SignIcon, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "xpay-opacity-50", children: approveTxLoading ? "Wait for approval confirmation" : "Approve token spending" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "xpay-flex xpay-items-center", children: [
+              approveTxLoading && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Spinner, { width: "5", height: "5" }),
+              approveTxDone && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "xpay-text-x_green xpay-w-5 xpay-h-5", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(CheckIcon, {}) })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "xpay-w-px xpay-h-6 xpay-mt-1 xpay-mb-1 xpay-ml-2.5 xpay-bg-white xpay-opacity-50" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "xpay-flex xpay-justify-between xpay-items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "xpay-flex xpay-items-center xpay-gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SignIcon, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "xpay-opacity-50", children: txLoading ? "Wait for transaction confirmation" : "Confirm transaction" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "xpay-flex xpay-items-center", children: txLoading && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Spinner, { width: "5", height: "5" }) })
+        ] })
+      ] })
+    ] })
+  ) }) : (
+    // XPay form
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+      "form",
+      {
+        className: "xpay-flex xpay-flex-col xpay-gap-2 xpay-z-10 xpay-my-0 p-2 md:xpay-p-4 xpay-rounded-3xl xpay-overflow-hidden xpay-font-light sm:xpay-w-x_desktop",
+        onSubmit: handleSubmit,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+            TopBar,
             {
-              amount,
-              setAmount,
-              srcToken,
-              setSrcToken,
-              srcChain,
               signer,
-              balances,
-              prices,
-              supportedChains,
-              setSrcChain,
-              setExceedsExpressDeliveryLimit
+              historyTabShown,
+              setHistoryTabShown,
+              setSettingsShown,
+              onClose
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-            Summary,
+          settingsShown && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+            Settings,
             {
-              isGettingRoute,
-              route,
-              dstToken,
-              dstChain
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-            FeesDetails,
-            {
-              route,
-              isGettingRoute,
-              paymentToken,
-              dstToken,
               expressChecked,
-              exceedsExpressDeliveryLimit,
+              setExpressChecked,
+              setSettingsShown,
               slippage,
-              feesDetailsShown,
-              setFeesDetailsShown
+              setSlippage
             }
           ),
-          formError.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ErrorField, { error: formError }),
-          signer && srcChain && srcChain.chainId !== account.chainId?.toString() ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Button, { type: "button", onClick: handleSwitchChain, children: "Switch chain" }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-            Button,
-            {
-              type: "submit",
-              disabled: !signer || !route || isGettingRoute,
-              children: "Submit"
-            }
-          )
-        ] })
-      ]
-    }
-  );
+          historyTabShown ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(History, { signer, supportedChains }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+              SwapPanel,
+              {
+                amount,
+                setAmount,
+                srcToken,
+                setSrcToken,
+                srcChain,
+                signer,
+                balances,
+                prices,
+                supportedChains,
+                setSrcChain
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+              Summary,
+              {
+                isGettingRoute,
+                route,
+                dstToken: dstDisplayToken ? dstDisplayToken : dstToken,
+                dstChain
+              }
+            ),
+            desc && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Description, { description: desc }),
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+              FeesDetails,
+              {
+                route,
+                isGettingRoute,
+                paymentToken,
+                dstToken,
+                slippage,
+                feesDetailsShown,
+                setFeesDetailsShown,
+                isExpressDelivery
+              }
+            ),
+            formError.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ErrorField, { error: formError }),
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+              Button,
+              {
+                type: "submit",
+                disabled: swapButton.disabled,
+                onClick: swapButton.fn,
+                children: swapButton.text
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ) });
 };
 
 // src/components/TxConfigForm/index.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var TxConfigForm = ({
   integratorId,
   dstChainId,
@@ -2414,13 +3139,16 @@ var TxConfigForm = ({
   customContractCalls,
   desc,
   supportedChains,
+  retrunTransactions,
+  dstDisplayTokenAddr,
   onSubmit,
   onClose
 }) => {
+  const [backdropClickDisabled, setBackdropClickDisabled] = (0, import_react12.useState)(false);
   const onBackdropClick = (e) => {
     e.stopPropagation();
     e.nativeEvent.stopImmediatePropagation();
-    if (e.target === e.currentTarget) {
+    if (e.target === e.currentTarget && !backdropClickDisabled) {
       onClose();
     }
   };
@@ -2429,13 +3157,13 @@ var TxConfigForm = ({
     () => getWagmiConfig(supportedChains),
     supportedChains
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_wagmi3.WagmiProvider, { config: wagmiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_query.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_wagmi3.WagmiProvider, { config: wagmiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react_query.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     "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__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "relative bg-black rounded-3xl overflow-auto text-white border-2 border-solid border-[rgba(255,255,255,0.1)]", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      className: "xpay-top-0 xpay-left-0 xpay-right-0 xpay-bottom-0 xpay-bg-[rgba(0,0,0,0.8)] xpay-fixed xpay-flex xpay-items-center xpay-justify-center xpay-z-10",
+      onMouseDown: onBackdropClick,
+      children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "xpay-relative xpay-bg-black xpay-rounded-3xl xpay-overflow-auto xpay-text-white xpay-border-2 xpay-border-solid xpay-border-[rgba(255,255,255,0.1)]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
           Form,
           {
             integratorId,
@@ -2444,11 +3172,15 @@ var TxConfigForm = ({
             customContractCalls,
             desc,
             supportedChains,
+            wagmiConfig,
+            retrunTransactions: !!retrunTransactions,
+            dstDisplayTokenAddr,
             onSubmit,
-            onClose
+            onClose,
+            setBackdropClickDisabled: (disabled) => setBackdropClickDisabled(disabled)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PoweredBy, {})
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(PoweredBy, {})
       ] })
     }
   ) }) });
@@ -2459,13 +3191,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__ */ (0, import_jsx_runtime43.jsx)(
+      if (xpayRoot === null) {
+        throw new Error("XPay was incorrectly initialised");
+      }
+      xpayRoot.render(
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
           TxConfigForm,
           {
             integratorId,
@@ -2474,12 +3214,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("");
+              }
             }
           }
         )
@@ -2492,7 +3240,7 @@ var openTxConfigForm = async ({
 
 // src/components/TxStatusButton/index.tsx
 var import_react13 = require("react");
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var TxStatusButton = ({ transaction }) => {
   const {
     srcChain: fromChain,
@@ -2507,82 +3255,90 @@ var TxStatusButton = ({ transaction }) => {
   } = transaction;
   const [isWide, setIsWide] = (0, import_react13.useState)(false);
   const background = (0, import_react13.useMemo)(
-    () => 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 = (0, import_react13.useMemo)(
-    () => 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__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex gap-2", onClick: () => setIsWide((x) => !x), children: [
-    isWide && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
-      "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__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex justify-between flex-col gap-2 sm:gap-5 sm:flex-row w-full", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                "img",
-                {
-                  className: "w-5 h-5",
-                  src: fromChainImage,
-                  alt: "source chain"
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { children: fromChain }),
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "w-3.5 h-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ArrowRightIcon, {}) }),
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("img", { className: "w-5 h-5", src: toChainImage, alt: "to chain" }),
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { children: toChain })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { children: "Sent" }),
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { children: fromAmount }),
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { children: fromToken }),
-              fromTokenImage ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                "img",
-                {
-                  className: "w-5 h-5",
-                  src: fromTokenImage,
-                  alt: "source token"
-                }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                UnknownTokenLogo,
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+    "div",
+    {
+      className: "xpay-flex xpay-gap-2",
+      onClick: () => setIsWide((x) => !x),
+      children: [
+        isWide && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+          "div",
+          {
+            className: `xpay-flex xpay-items-center xpay-min-w-60 sm:xpay-w-[520px] xpay-text-white xpay-h-14 xpay-px-4 xpay-text-sm xpay-gap-3 xpay-rounded-xl ${background} ${border}`,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "xpay-flex xpay-justify-between xpay-flex-col xpay-gap-2 sm:xpay-gap-5 sm:xpay-flex-row xpay-w-full", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "xpay-flex xpay-items-center xpay-gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                    "img",
+                    {
+                      className: "xpay-w-5 xpay-h-5",
+                      src: fromChainImage,
+                      alt: "source chain"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { children: fromChain }),
+                  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "xpay-w-3.5 xpay-h-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ArrowRightIcon, {}) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                    "img",
+                    {
+                      className: "xpay-w-5 xpay-h-5",
+                      src: toChainImage,
+                      alt: "to chain"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { children: toChain })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "xpay-flex xpay-items-center xpay-gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { children: "Sent" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { children: fromAmount }),
+                  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { children: fromToken }),
+                  fromTokenImage ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                    "img",
+                    {
+                      className: "xpay-w-5 xpay-h-5",
+                      src: fromTokenImage,
+                      alt: "source token"
+                    }
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(UnknownTokenLogo, { tokenName: "?" })
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                "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__ */ (0, import_jsx_runtime49.jsx)("div", { className: "xpay-w-3.5 xpay-h-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ArrowUpRightIcon, {}) })
                 }
               )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+          "div",
+          {
+            className: `xpay-text-white xpay-rounded-xl xpay-cursor-pointer ${background} ${border}`,
+            children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "xpay-flex xpay-gap-2 xpay-items-center xpay-h-14 xpay-w-20 xpay-justify-center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ArrowLeftIcon, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "xpay-relative xpay-flex xpay-items-center xpay-justify-center xpay-w-9 xpay-h-9", children: isDone ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "xpay-text-x_green xpay-w-5 xpay-h-5", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(CheckIcon, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "xpay-w-5 xpay-h-5", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(XSwapLogo, {}) }),
+                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "xpay-absolute xpay-flex xpay-items-center xpay-justify-center xpay-top-0 xpay-left-0 xpay-right-0 xpay-bottom-0 xpay-text-white", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Spinner, { width: "10", height: "10" }) })
+              ] }) })
             ] })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-            "a",
-            {
-              href: explorer,
-              target: "_blank",
-              rel: "noreferrer",
-              className: "no-underline cursor-pointer",
-              "aria-label": "Show the transaction in the chain explorer",
-              children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "w-3.5 h-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ArrowUpRightIcon, {}) })
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-      "div",
-      {
-        className: `text-white rounded-xl cursor-pointer ${background} ${border}`,
-        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex gap-2 items-center h-14 w-20 justify-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ArrowLeftIcon, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "relative flex items-center justify-center w-9 h-9", children: isDone ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "text-x_green w-5 h-5", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(CheckIcon, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "w-5 h-5", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(XSwapLogo, {}) }),
-            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "absolute flex items-center justify-center top-0 left-0 right-0 bottom-0 text-white", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(CircularProgressIcon, {}) })
-          ] }) })
-        ] })
-      }
-    )
-  ] });
+          }
+        )
+      ]
+    }
+  );
 };
 var renderedTransactions = [];
 var addTransactionToRenderedTransactions = (transaction) => {
@@ -2604,27 +3360,37 @@ var updateTransactionDoneInRenderedTransactions = (txHash) => {
   }
 };
 var renderTxStatusButtons = () => {
-  const buttons = renderedTransactions.map((item) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(TxStatusButton, { transaction: item }, item.txHash));
-  txStatusRoot.render(buttons);
+  const buttons = renderedTransactions.map((item) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(TxStatusButton, { transaction: item }, item.txHash));
+  if (xpayTxStatusRoot === null) {
+    throw new Error("XPay was incorrectly initialised");
+  }
+  xpayTxStatusRoot.render(
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "xpay-fixed xpay-bottom-5 xpay-right-2 xpay-flex xpay-flex-col xpay-gap-3 xpay-pl-9 xpay-items-end xpay-w-full xpay-z-50", children: buttons })
+  );
 };
 
 // src/components/Skeleton/index.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var Skeleton = ({ width, height }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: `bg-current rounded animate-pulse ${width} ${height}` });
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    "div",
+    {
+      className: `xpay-bg-gray-700 xpay-rounded xpay-animate-pulse ${width} ${height}`
+    }
+  );
 };
 
 // src/services/integrations/monitoring.ts
 var import_async_retry = __toESM(require("async-retry"));
 
 // src/services/blockchain.ts
-var import_ethers5 = require("ethers");
+var import_ethers6 = require("ethers");
 var getCustomTokenData = async (chain, tokenAddress) => {
   const rpcUrl = chain.publicRpcUrls[0];
-  const customTokenContract = new import_ethers5.ethers.Contract(
+  const customTokenContract = new import_ethers6.ethers.Contract(
     tokenAddress.toLowerCase(),
     ERC20Abi,
-    import_ethers5.ethers.getDefaultProvider(rpcUrl)
+    import_ethers6.ethers.getDefaultProvider(rpcUrl)
   );
   try {
     const query = async (contract, method, args = []) => {
@@ -2663,7 +3429,7 @@ var renderTxStatus = async (txChainId, txHash) => {
     ({ web3Environment, swapSupported }) => web3Environment === "mainnet" /* MAINNET */ && swapSupported
   );
   const messageSentEvent = txReceipt.logs?.find((log) => {
-    return log.topics[0] === import_ethers6.ethers.utils.id(MSG_SENT_EVENT_SIG);
+    return log.topics[0] === import_ethers7.ethers.utils.id(MSG_SENT_EVENT_SIG);
   });
   if (!messageSentEvent) {
     throw new Error(
@@ -2671,7 +3437,7 @@ var renderTxStatus = async (txChainId, txHash) => {
     );
   }
   const messageId = messageSentEvent?.topics[1];
-  const iface = new import_ethers6.ethers.utils.Interface(MSG_SENT_EVENT_ABI);
+  const iface = new import_ethers7.ethers.utils.Interface(MSG_SENT_EVENT_ABI);
   const decodedMessageSentEvent = iface.parseLog(messageSentEvent);
   if (!decodedMessageSentEvent) {
     throw new Error(
@@ -2721,16 +3487,16 @@ var renderTxStatus = async (txChainId, txHash) => {
   if (!xSwapRouterOnDestinationAddress) {
     throw new Error(`Unknown destination XSwapRouter!`);
   }
-  const xSwapRouterOnDestination = new import_ethers6.ethers.Contract(
+  const xSwapRouterOnDestination = new import_ethers7.ethers.Contract(
     xSwapRouterOnDestinationAddress,
     MSG_RECEIVED_EVENT_ABI,
-    import_ethers6.ethers.getDefaultProvider(
+    import_ethers7.ethers.getDefaultProvider(
       supportedChains.find((chain) => chain.chainId === dstChainId)?.publicRpcUrls[0]
     )
   );
   const msgReceivedEventFilter = {
     address: xSwapRouterOnDestinationAddress,
-    topics: [import_ethers6.ethers.utils.id(MSG_RECEIVED_EVENT_SIG), messageId]
+    topics: [import_ethers7.ethers.utils.id(MSG_RECEIVED_EVENT_SIG), messageId]
   };
   const onSuccess = async () => {
     updateTransactionDoneInRenderedTransactions(txHash);
@@ -2746,6 +3512,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) => {
@@ -2753,7 +3527,7 @@ var getTxReceipt = async (txChainId, txHash) => {
     const chain = (await getChains()).find(
       (chain2) => chain2.chainId === txChainId
     );
-    const provider = new import_ethers6.ethers.providers.JsonRpcProvider(
+    const provider = new import_ethers7.ethers.providers.JsonRpcProvider(
       chain?.publicRpcUrls[0]
     );
     return await (0, import_async_retry.default)(async () => {
@@ -2776,7 +3550,9 @@ var openTransactionModal = async ({
   dstChain,
   dstToken,
   customContractCalls = [],
-  desc
+  desc,
+  retrunTransactions,
+  dstDisplayToken
 }) => {
   const supportedChains = (await getChains()).filter(
     ({ web3Environment, swapSupported }) => web3Environment === "mainnet" /* MAINNET */ && swapSupported
@@ -2788,9 +3564,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(
@@ -2801,7 +3581,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`
     );
   }
 };