@xswap-link/sdk 0.2.4 → 0.2.6

package/dist/index.js

@@ -35,8 +35,9 @@ __export(src_exports, {
   Environment: () => Environment,
   Web3Environment: () => Web3Environment,
   XSwapCallType: () => XSwapCallType,
-  getSwapTx: () => getSwapTx,
-  monitorTransactionStatus: () => monitorTransactionStatus
+  default: () => src_default,
+  openTransactionModal: () => openTransactionModal,
+  renderTxStatus: () => renderTxStatus
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -58,7 +59,7 @@ var xswap_config_default = {
 };
 
 // package.json
-var version = "0.2.4";
+var version = "0.2.6";
 
 // src/components/WaitingForInit/index.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -85,19 +86,19 @@ var WaitingForInit = () => {
 
 // src/config/init.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var initIndicatorRoot;
-var xswapRoot;
-var txStatusRoot;
+var xpayRoot;
+var xpayInitIndicatorRoot;
+var xpayTxStatusRoot;
 var initCompleted = false;
 var initDocument = () => {
   if (typeof document === "undefined") {
     throw new Error("Can't render XPay components from server side.");
   }
-  createInitIndicatorRoot();
+  createXPayInitIndicatorRoot();
   Promise.all([
     createStyleElement(),
-    createXswapRoot(),
-    createTxStatusRoot()
+    createXPayRoot(),
+    createXPayTxStatusRoot()
   ]).then(() => {
     initCompleted = true;
   });
@@ -122,68 +123,30 @@ var createStyleElement = async () => {
   style.textContent = text;
   document.body.appendChild(style);
 };
-var createXswapRoot = async () => {
+var createXPayRoot = async () => {
   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 () => {
   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 = () => {
   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("");
+  display ? xpayInitIndicatorRoot.render(/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(WaitingForInit, {})) : xpayInitIndicatorRoot.render("");
 };
 
-// src/models/Addresses.ts
-var ContractName = /* @__PURE__ */ ((ContractName2) => {
-  ContractName2["BatchQuery"] = "BatchQuery";
-  ContractName2["FeeCollector"] = "FeeCollector";
-  ContractName2["XSwapRouter"] = "XSwapRouter";
-  return ContractName2;
-})(ContractName || {});
-
-// src/models/Ecosystem.ts
-var Ecosystem = /* @__PURE__ */ ((Ecosystem2) => {
-  Ecosystem2["EVM"] = "evm";
-  return Ecosystem2;
-})(Ecosystem || {});
-
-// src/models/Environment.ts
-var Environment = /* @__PURE__ */ ((Environment2) => {
-  Environment2["PROD"] = "production";
-  Environment2["DEV"] = "develop";
-  Environment2["LOCAL"] = "local";
-  return Environment2;
-})(Environment || {});
-
-// src/models/Web3Environment.ts
-var Web3Environment = /* @__PURE__ */ ((Web3Environment2) => {
-  Web3Environment2["DEVNET"] = "devnet";
-  Web3Environment2["TESTNET"] = "testnet";
-  Web3Environment2["MAINNET"] = "mainnet";
-  return Web3Environment2;
-})(Web3Environment || {});
-
-// src/models/XSwapCallType.ts
-var XSwapCallType = /* @__PURE__ */ ((XSwapCallType2) => {
-  XSwapCallType2[XSwapCallType2["DEFAULT"] = 0] = "DEFAULT";
-  XSwapCallType2[XSwapCallType2["FULL_TOKEN_BALANCE"] = 1] = "FULL_TOKEN_BALANCE";
-  XSwapCallType2[XSwapCallType2["FULL_NATIVE_BALANCE"] = 2] = "FULL_NATIVE_BALANCE";
-  XSwapCallType2[XSwapCallType2["COLLECT_TOKEN_BALANCE"] = 3] = "COLLECT_TOKEN_BALANCE";
-  return XSwapCallType2;
-})(XSwapCallType || {});
-
 // src/services/api.ts
 async function _sendRequest(urlPath, options) {
   const response = await fetch(`${xswap_config_default.apiUrl}${urlPath}`, {
@@ -226,10 +189,57 @@ async function getPrices(payload) {
     })}`
   );
 }
+async function getTxStatus(payload) {
+  return await _sendRequest(
+    `/getTxStatus?${new URLSearchParams({
+      data: JSON.stringify(payload)
+      // todo remove once gcp starts working
+    })}`
+  );
+}
 
 // src/services/integrations/customCalls/staking.ts
 var import_ethers3 = require("ethers");
 
+// src/models/Addresses.ts
+var ContractName = /* @__PURE__ */ ((ContractName2) => {
+  ContractName2["BatchQuery"] = "BatchQuery";
+  ContractName2["FeeCollector"] = "FeeCollector";
+  ContractName2["XSwapRouter"] = "XSwapRouter";
+  return ContractName2;
+})(ContractName || {});
+
+// src/models/Ecosystem.ts
+var Ecosystem = /* @__PURE__ */ ((Ecosystem2) => {
+  Ecosystem2["EVM"] = "evm";
+  return Ecosystem2;
+})(Ecosystem || {});
+
+// src/models/Environment.ts
+var Environment = /* @__PURE__ */ ((Environment2) => {
+  Environment2["PROD"] = "production";
+  Environment2["DEV"] = "develop";
+  Environment2["LOCAL"] = "local";
+  return Environment2;
+})(Environment || {});
+
+// src/models/Web3Environment.ts
+var Web3Environment = /* @__PURE__ */ ((Web3Environment2) => {
+  Web3Environment2["DEVNET"] = "devnet";
+  Web3Environment2["TESTNET"] = "testnet";
+  Web3Environment2["MAINNET"] = "mainnet";
+  return Web3Environment2;
+})(Web3Environment || {});
+
+// src/models/XSwapCallType.ts
+var XSwapCallType = /* @__PURE__ */ ((XSwapCallType2) => {
+  XSwapCallType2[XSwapCallType2["DEFAULT"] = 0] = "DEFAULT";
+  XSwapCallType2[XSwapCallType2["FULL_TOKEN_BALANCE"] = 1] = "FULL_TOKEN_BALANCE";
+  XSwapCallType2[XSwapCallType2["FULL_NATIVE_BALANCE"] = 2] = "FULL_NATIVE_BALANCE";
+  XSwapCallType2[XSwapCallType2["COLLECT_TOKEN_BALANCE"] = 3] = "COLLECT_TOKEN_BALANCE";
+  return XSwapCallType2;
+})(XSwapCallType || {});
+
 // src/utils/contracts.ts
 var import_ethers = require("ethers");
 
@@ -661,6 +671,9 @@ var shortAddress = (address) => {
     address.length
   )}`;
 };
+var isETHAddressValid = (address) => {
+  return /^0x[a-fA-F0-9]{40}$/.test(address);
+};
 
 // src/utils/index.ts
 var import_date_fns = require("date-fns");
@@ -689,19 +702,19 @@ var getDate = (blockTimestamp) => {
 };
 
 // src/services/integrations/monitoring.ts
-var import_ethers5 = require("ethers");
+var import_ethers6 = 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
   ] });
 };
 
 // src/components/TxConfigForm/index.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_react_query = require("@tanstack/react-query");
 var import_wagmi3 = require("wagmi");
 
@@ -866,7 +879,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",
@@ -1181,8 +1194,8 @@ var XSwapLogo = () => {
 // src/components/TxConfigForm/PoweredBy.tsx
 var import_jsx_runtime26 = 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" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "xpay-flex xpay-justify-center xpay-items-center xpay-gap-2 xpay-my-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "xpay-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, {})
@@ -1190,7 +1203,7 @@ var PoweredBy = () => {
 };
 
 // src/components/TxConfigForm/Form.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_ethers4 = require("ethers");
 var import_wagmi2 = require("wagmi");
 
@@ -1263,13 +1276,13 @@ 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" }) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime27.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_runtime27.jsxs)("div", { className: "xpay-flex xpay-w-full xpay-items-center xpay-justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "xpay-text-sm sm:xpay-text-base", children: date }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "xpay-flex xpay-items-center", children: [
+        transaction.status === "IN_PROGRESS" && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "xpay-flex xpay-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "xpay-text-[rgb(250,200,100)]", children: "In progress" }) }),
+        transaction.status === "DONE" && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "xpay-flex xpay-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "xpay-text-[rgb(100,200,100)]", children: "Done" }) }),
+        transaction.status === "REVERTED" && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "xpay-flex xpay-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "xpay-text-[rgb(255,100,100)]", children: "Reverted" }) }),
         /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           "a",
           {
@@ -1278,65 +1291,65 @@ var HistoryCard = ({ transaction, supportedChains }) => {
             )?.transactionExplorer}/${transaction.hash}`,
             target: "_blank",
             rel: "noreferrer",
-            className: "ml-2 no-underline",
+            className: "xpay-ml-2 xpay-no-underline",
             "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_runtime27.jsx)("div", { className: "xpay-w-3.5 xpay-h-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime27.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.jsxs)("div", { className: "xpay-flex xpay-justify-between xpay-flex-wrap xpay-gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "xpay-flex xpay-items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "xpay-flex xpay-items-center", children: [
           /* @__PURE__ */ (0, import_jsx_runtime27.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_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)("div", { className: "xpay-w-3.5 xpay-h-3.5 xpay-my-0 xpay-mx-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ArrowRightIcon, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "xpay-flex xpay-items-center", children: [
           /* @__PURE__ */ (0, import_jsx_runtime27.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_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_runtime27.jsx)("div", { className: "xpay-flex xpay-items-center xpay-mb-2 last:xpay-mb-0", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "xpay-flex xpay-items-center xpay-flex-wrap", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.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 }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "xpay-ml-1", children: tokenData?.symbol }),
           tokenData?.image ? /* @__PURE__ */ (0, import_jsx_runtime27.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_runtime27.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: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "xpay-w-3.5 xpay-h-3.5 xpay-my-0 xpay-mx-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ArrowRightIcon, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.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 }),
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "xpay-ml-1", children: tokenOutData?.symbol }),
             tokenOutData?.image ? /* @__PURE__ */ (0, import_jsx_runtime27.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_runtime27.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) })
           ] })
         ] })
       ] }) })
@@ -1355,15 +1368,35 @@ var History = ({ signer, supportedChains }) => {
       const fetchedTransactions = [];
       if (downloadedHistory) {
         for (const entry of downloadedHistory.history) {
+          let status = "IN_PROGRESS";
           if (!entry.source) {
             continue;
           }
-          let status;
-          if (entry.failed) status = "REVERTED";
+          if (entry.failed) {
+            status = "REVERTED";
+          }
           if (!!entry.target) {
             status = "DONE";
-          } else {
-            status = "IN_PROGRESS";
+          }
+          if (entry.transferType === "SINGLE_CHAIN") {
+            if (!entry.target) {
+              continue;
+            }
+            const blockTimestampMs2 = new Date(entry.target.blockTime).getTime();
+            const estimatedDeliveryTimestamp2 = blockTimestampMs2 / 1e3;
+            fetchedTransactions.push({
+              hash: entry.target.transactionHash,
+              timestamp: blockTimestampMs2 / 1e3,
+              sourceChainId: entry.target.blockchainId,
+              targetChainId: entry.target.blockchainId,
+              amountWei: entry.source.tokenAmount,
+              tokenAddress: entry.source.tokenAddress,
+              tokenOutAddress: entry.target?.tokenAmount,
+              tokenOutAmount: entry.target?.tokenAmount,
+              estimatedDeliveryTimestamp: estimatedDeliveryTimestamp2,
+              status
+            });
+            continue;
           }
           const blockTimestampMs = new Date(entry.source.blockTime).getTime();
           const estimatedDeliveryTimestamp = new import_bignumber2.default(
@@ -1397,10 +1430,10 @@ 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, {}) }),
+    return /* @__PURE__ */ (0, import_jsx_runtime28.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_runtime28.jsx)("div", { className: "xpay-flex xpay-items-center xpay-justify-center xpay-w-full", children: /* @__PURE__ */ (0, import_jsx_runtime28.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_runtime28.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_runtime28.jsx)("div", { className: "xpay-flex xpay-w-full xpay-h-full xpay-items-center xpay-justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CircularProgressIcon, {}) }),
     fetchedHistory?.map((transaction, index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       HistoryCard,
       {
@@ -1421,26 +1454,26 @@ 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: [
+  return /* @__PURE__ */ (0, import_jsx_runtime29.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_runtime29.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_runtime29.jsxs)("div", { className: "xpay-flex xpay-gap-2 xpay-justify-center xpay-items-center", children: [
       !historyTabShown && /* @__PURE__ */ (0, import_jsx_runtime29.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_runtime29.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_runtime29.jsx)(SettingsIcon, {}) })
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime29.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_runtime29.jsx)(import_jsx_runtime29.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime29.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_runtime29.jsx)(HistoryIcon, {}) }) }) : /* @__PURE__ */ (0, import_jsx_runtime29.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_runtime29.jsx)("div", { className: "xpay-cursor-pointer xpay-text-white", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CloseIcon, {}) })
     ] })
   ] });
 };
@@ -1464,53 +1497,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" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime30.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_runtime30.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-gap-4 xpay-justify-between", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "xpay-flex xpay-justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "xpay-text-base", children: "Settings" }),
       /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         "div",
         {
-          className: "cursor-pointer",
+          className: "xpay-cursor-pointer",
           onClick: () => setSettingsShown(false),
           children: /* @__PURE__ */ (0, import_jsx_runtime30.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.jsxs)("div", { className: "xpay-flex xpay-gap-2 xpay-items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "xpay-text-sm xpay-text-[rgba(255,255,255,0.6)]", children: "Express delivery" }),
         /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime30.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)("span", { className: "xpay-h-full, xpay-w-full xpay-rounded-lg xpay-bg-[rgba(255,255,255,0.3)]" }),
               /* @__PURE__ */ (0, import_jsx_runtime30.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_runtime30.jsxs)("div", { className: "xpay-flex xpay-gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "xpay-min-w-[26px] xpay-min-h-[26px] xpay-text-[#ffa726]", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(InfoIcon, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.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_runtime30.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "xpay-text-[rgba(255,255,255,0.6)] xpay-text-sm", children: "Slippage" }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "xpay-flex xpay-gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.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_runtime30.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);
@@ -1519,11 +1552,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.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_runtime30.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) => {
@@ -1542,9 +1575,9 @@ var Settings = ({
           /* @__PURE__ */ (0, import_jsx_runtime30.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_runtime30.jsxs)("div", { className: "xpay-flex xpay-gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "xpay-min-w-[26px] xpay-min-h-[26px] xpay-text-[#ffa726]", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(InfoIcon, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.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", {}),
           " ",
@@ -1557,6 +1590,7 @@ var Settings = ({
 };
 
 // src/components/TxConfigForm/FeesDetails.tsx
+var import_react5 = require("react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var FeesDetails = ({
   isGettingRoute,
@@ -1569,12 +1603,15 @@ var FeesDetails = ({
   feesDetailsShown,
   setFeesDetailsShown
 }) => {
-  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: [
+  const isExpressDeliveryPossible = (0, import_react5.useMemo)(() => {
+    return expressChecked && !exceedsExpressDeliveryLimit;
+  }, [expressChecked, exceedsExpressDeliveryLimit]);
+  return /* @__PURE__ */ (0, import_jsx_runtime31.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 xpay-mb-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.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_runtime31.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_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({
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "xpay-mr-1", children: "Fees:" }),
+        isGettingRoute ? /* @__PURE__ */ (0, import_jsx_runtime31.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(
@@ -1584,14 +1621,14 @@ var FeesDetails = ({
           precisionFractionalPlaces: 5
         })} ${paymentToken?.symbol}`
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex gap-1 items-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "xpay-flex xpay-gap-1 xpay-items-center", children: [
+        route?.xSwapFees.expressDeliveryFee && !isGettingRoute && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
           "div",
           {
-            className: `flex gap-1 items-center font-medium ${expressChecked && !exceedsExpressDeliveryLimit ? "text-x_green" : "text-white opacity-60"}`,
+            className: `xpay-flex xpay-gap-1 xpay-items-center xpay-font-medium ${isExpressDeliveryPossible ? "xpay-text-x_green" : "xpay-text-white xpay-opacity-60"}`,
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TimerIcon, {}),
-              expressChecked && !exceedsExpressDeliveryLimit ? "Fast ~ 30sec " : "Normal ~ 30min"
+              isExpressDeliveryPossible ? "Fast ~ 30sec " : "Normal ~ 30min"
             ]
           }
         ),
@@ -1599,39 +1636,39 @@ var FeesDetails = ({
           "div",
           {
             onClick: () => setFeesDetailsShown((x) => !x),
-            className: "font-medium text-white opacity-60 cursor-pointer flex items-center w-[15px] h-[9px]",
+            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_runtime31.jsx)(ChevronUpIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime31.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: [
+    feesDetailsShown && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "xpay-flex xpay-w-full xpay-items-center xpay-justify-between xpay-gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-text-[10px] xpay-gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.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_runtime31.jsx)("div", { children: "CCIP Fee:" }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "whitespace-nowrap", children: ` ${weiToHumanReadable({
+          /* @__PURE__ */ (0, import_jsx_runtime31.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.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_runtime31.jsx)("div", { children: "Native Fee:" }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "whitespace-nowrap", children: ` ${weiToHumanReadable({
+          /* @__PURE__ */ (0, import_jsx_runtime31.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.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-text-[10px] xpay-gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.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_runtime31.jsx)("div", { children: "Slippage:" }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "whitespace-nowrap", children: `${slippage}%` })
+          /* @__PURE__ */ (0, import_jsx_runtime31.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.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_runtime31.jsx)("div", { children: "Min amount out:" }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "whitespace-nowrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "xpay-whitespace-nowrap", children: [
             weiToHumanReadable({
               amount: route?.minAmountOut || "0",
               decimals: dstToken?.decimals || 18,
@@ -1647,10 +1684,10 @@ var FeesDetails = ({
 };
 
 // src/components/TxConfigForm/Summary.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 
 // src/components/TxConfigForm/UsdPrice.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_jsx_runtime32 = require("react/jsx-runtime");
 var UsdPrice = ({
   prices,
@@ -1660,8 +1697,8 @@ var UsdPrice = ({
   type,
   setExceedsExpressDeliveryLimit
 }) => {
-  const [usdPrice, setUsdPrice] = (0, import_react5.useState)("0.00");
-  (0, import_react5.useEffect)(() => {
+  const [usdPrice, setUsdPrice] = (0, import_react6.useState)("0.00");
+  (0, import_react6.useEffect)(() => {
     if (token && prices && prices[token.address]) {
       const newUsdPrice = (Number(amount) * Number(prices[token.address])).toFixed(2);
       if (type === "src" && setExceedsExpressDeliveryLimit) {
@@ -1672,19 +1709,31 @@ var UsdPrice = ({
       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_runtime32.jsx)("div", { className: "xpay-opacity-60 xpay-py-4", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Skeleton, { width: "xpay-w-12", height: "xpay-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" }) });
 };
 
-// src/components/TxConfigForm/Summary.tsx
+// src/components/UnknownTokenLogo/UnknownTokenLogo.tsx
 var import_jsx_runtime33 = require("react/jsx-runtime");
+var UnknownTokenLogo = ({ tokenName, className }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    "div",
+    {
+      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 Summary = ({
   isGettingRoute,
   route,
   dstToken,
   dstChain
 }) => {
-  const [prices, setPrices] = (0, import_react6.useState)();
-  const amountReadable = (0, import_react6.useMemo)(
+  const [prices, setPrices] = (0, import_react7.useState)();
+  const amountReadable = (0, import_react7.useMemo)(
     () => weiToHumanReadable({
       amount: route?.estAmountOut || "0",
       decimals: dstToken?.decimals || 18,
@@ -1692,41 +1741,51 @@ var Summary = ({
     }),
     [route, dstToken]
   );
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (dstChain) {
       getPrices({ chainId: dstChain.chainId, currency: "USD" }).then(
         (prices2) => setPrices(prices2)
       );
     }
   }, [dstChain]);
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-col globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4 relative", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-[rgba(255,255,255,0.6)] text-sm", children: "You receive" }),
-        isGettingRoute ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.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_runtime34.jsxs)("div", { className: "xpay-flex xpay-justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "xpay-text-[rgba(255,255,255,0.6)] xpay-text-sm", children: "You receive" }),
+        isGettingRoute ? /* @__PURE__ */ (0, import_jsx_runtime34.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_runtime33.jsx)("div", { className: "flex gap-2 items-center text-white text-xl sm:text-3xl", children: amountReadable })
+        ) : /* @__PURE__ */ (0, import_jsx_runtime34.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_runtime33.jsxs)("div", { className: "flex flex-col items-end gap-1 text-sm", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex justify-center items-center gap-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "w-4 sm:w-6 h-4 sm:h-6", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("img", { src: dstToken?.image, alt: dstToken?.name }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-base sm:text-xl", children: dstToken?.symbol })
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-items-end xpay-gap-1 xpay-text-sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "xpay-flex xpay-justify-center xpay-items-center xpay-gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "xpay-w-5 xpay-h-5", children: dstToken?.image ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            "img",
+            {
+              className: "xpay-w-5 xpay-h-5",
+              src: dstToken?.image,
+              alt: dstToken?.name
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(UnknownTokenLogo, { tokenName: "?" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "xpay-text-base sm:xpay-text-xl", children: dstToken?.name })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex justify-center items-center gap-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-[rgba(255,255,255,0.6)] text-right", children: "on " }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center gap-1 text-white", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "w-4 h-4", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("img", { src: dstChain?.image, alt: dstChain?.name }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { children: dstChain?.displayName })
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "xpay-flex xpay-justify-center xpay-items-center xpay-gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("p", { className: "xpay-text-[rgba(255,255,255,0.6)] xpay-text-right", children: [
+            "on",
+            " "
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "xpay-flex xpay-items-center xpay-gap-1 xpay-text-white", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "xpay-w-4 xpay-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_runtime33.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       UsdPrice,
       {
         prices,
@@ -1736,17 +1795,17 @@ var Summary = ({
         type: "dst"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime33.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_runtime33.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_runtime33.jsx)(ArrowDownIcon, {}) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime34.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_runtime34.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_runtime34.jsx)(ArrowDownIcon, {}) }) })
   ] });
 };
 
 // src/components/TxConfigForm/SwapPanel.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/components/TxConfigForm/TokenPicker.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_react_dom = require("react-dom");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var TokenPicker = ({
   onCloseClick,
   tokens,
@@ -1755,8 +1814,7 @@ var TokenPicker = ({
   signer,
   balances
 }) => {
-  const [searchValue, setSearchValue] = (0, import_react7.useState)("");
-  const modalRoot = document.querySelector("#xswap-modal");
+  const [searchValue, setSearchValue] = (0, import_react8.useState)("");
   const onBackdropClick = (e) => {
     e.stopPropagation();
     e.nativeEvent.stopImmediatePropagation();
@@ -1764,7 +1822,7 @@ var TokenPicker = ({
       onCloseClick();
     }
   };
-  const filteredTokens = (0, import_react7.useMemo)(() => {
+  const filteredTokens = (0, import_react8.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()
@@ -1772,91 +1830,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_runtime34.jsx)(
+  const xpayRoot2 = document.querySelector("#xpay-root");
+  return xpayRoot2 ? (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime35.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_runtime34.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_runtime34.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_runtime35.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_runtime35.jsx)(
             "div",
             {
               onClick: onCloseClick,
-              className: "absolute top-4 right-4 cursor-pointer",
-              children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CloseIcon, {})
+              className: "xpay-absolute xpay-top-4 xpay-right-4 xpay-cursor-pointer",
+              children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CloseIcon, {})
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-base mb-4", children: "Pick a token" }),
-          /* @__PURE__ */ (0, import_jsx_runtime34.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_runtime34.jsx)("div", { className: "w-6 h-6", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SearchIcon, {}) }),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "xpay-text-base xpay-mb-4", children: "Pick a token" }),
+          /* @__PURE__ */ (0, import_jsx_runtime35.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_runtime35.jsx)("div", { className: "xpay-w-6 xpay-h-6", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SearchIcon, {}) }),
+            /* @__PURE__ */ (0, import_jsx_runtime35.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_runtime34.jsx)("div", { className: "my-4 mx-0 flex flex-wrap gap-3", children: tokens?.filter((token) => token?.quickPick).map((token) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime35.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_runtime35.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_runtime34.jsx)("img", { src: token.image, alt: token.name, className: "w-5" }),
-                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "text-sm", children: token.symbol })
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                  "img",
+                  {
+                    src: token.image,
+                    alt: token.name,
+                    className: "xpay-w-5"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "xpay-text-sm", children: token.symbol })
               ]
             },
             token.address
           )) }),
-          /* @__PURE__ */ (0, import_jsx_runtime34.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_runtime34.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_runtime34.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime35.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_runtime35.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_runtime35.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_runtime34.jsx)(
-                  "img",
-                  {
-                    src: token.image,
-                    alt: token.name,
-                    className: "token-picker__all__logo"
-                  }
-                ) : /* @__PURE__ */ (0, import_jsx_runtime34.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_runtime34.jsxs)("div", { className: "flex justify-between items-center gap-1 overflow-hidden grow", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col leading-[16px]", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "overflow-hidden whitespace-nowrap text-ellipsis text-[15px]", children: token.name }),
-                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "text-[#888] text-[11px]", children: token.symbol })
+                token.image ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("img", { src: token.image, alt: token.name }) : /* @__PURE__ */ (0, import_jsx_runtime35.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_runtime35.jsxs)("div", { className: "xpay-flex xpay-justify-between xpay-items-center xpay-gap-1 xpay-overflow-hidden xpay-grow", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-leading-[16px]", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "xpay-overflow-hidden xpay-whitespace-nowrap xpay-text-ellipsis xpay-text-[15px]", children: token.name }),
+                    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "xpay-text-[#888] xpay-text-[11px]", children: token.symbol })
                   ] }),
-                  signer && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_jsx_runtime34.Fragment, { children: balances && balances[token.address] && token.decimals ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "text-xs", children: weiToHumanReadable({
+                  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: "xpay-text-xs", children: weiToHumanReadable({
                     amount: balances[token.address]?.toString() || "0",
                     decimals: token.decimals,
                     precisionFractionalPlaces: 4
-                  }) }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Skeleton, { width: "w-12", height: "h-3" }) })
+                  }) }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Skeleton, { width: "xpay-w-12", height: "xpay-h-3" }) })
                 ] })
               ]
             },
             `${index}_${token.address}`
-          )) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "mt-4 flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-sm text-white", children: "No tokens found." }) }) })
+          )) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "xpay-mt-4 xpay-flex xpay-justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "xpay-text-sm xpay-text-white", children: "No tokens found." }) }) })
         ] })
       }
     ),
-    modalRoot
+    xpayRoot2
   ) : null;
 };
 
 // src/components/TxConfigForm/ChainListElement.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var ChainListElement = ({
   chain,
   setSrcChain,
@@ -1864,31 +1923,31 @@ var ChainListElement = ({
   index,
   length
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.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_runtime35.jsx)("img", { width: 12, height: 12, src: chain.image, alt: chain.displayName }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("img", { width: 12, height: 12, src: chain.image, alt: chain.displayName }),
           chain.displayName
         ]
       }
     ),
-    index !== length - 1 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "h-px mx-2 bg-[rgba(255,255,255,0.15)]" })
+    index !== length - 1 && /* @__PURE__ */ (0, import_jsx_runtime36.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_react8 = require("react");
+var import_react9 = require("react");
 var import_bignumber3 = __toESM(require("bignumber.js"));
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var BalanceComponent = ({ srcToken, balances }) => {
-  const balanceText = (0, import_react8.useMemo)(() => {
+  const balanceText = (0, import_react9.useMemo)(() => {
     if (!balances || !srcToken) return "0";
     if (balances[srcToken.address]?.toString() === "0") return "0";
     const fullHumanReadable = weiToHumanReadable({
@@ -1906,7 +1965,7 @@ var BalanceComponent = ({ srcToken, balances }) => {
       precisionFractionalPlaces: 5
     });
   }, [srcToken, balances]);
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
     "Balance:",
     " ",
     srcToken && balances ? weiToHumanReadable({
@@ -1914,12 +1973,12 @@ var BalanceComponent = ({ srcToken, balances }) => {
       decimals: srcToken.decimals,
       precisionFractionalPlaces: 4
     }) : 0,
-    /* @__PURE__ */ (0, import_jsx_runtime36.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_runtime37.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_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var SwapPanel = ({
   amount,
   setAmount,
@@ -1933,10 +1992,10 @@ var SwapPanel = ({
   supportedChains,
   setExceedsExpressDeliveryLimit
 }) => {
-  const [chainListShown, setChainListShown] = (0, import_react9.useState)(false);
-  const [tokenListShown, setTokenListShown] = (0, import_react9.useState)(false);
-  const listRef = (0, import_react9.useRef)(null);
-  const buttonRef = (0, import_react9.useRef)(null);
+  const [chainListShown, setChainListShown] = (0, import_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 handleClickOutside = (event) => {
     if (listRef.current && buttonRef.current) {
       const listElement = listRef.current;
@@ -1951,28 +2010,28 @@ var SwapPanel = ({
         weiToHumanReadable({
           amount: balances[srcToken.address]?.toString() || "0",
           decimals: srcToken.decimals,
-          precisionFractionalPlaces: 4
+          precisionFractionalPlaces: srcToken.decimals
         })
       );
   };
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (chainListShown) {
       document.addEventListener("mousedown", handleClickOutside);
       return () => document.removeEventListener("mousedown", handleClickOutside);
     }
   }, [chainListShown]);
-  const chainListOptions = (0, import_react9.useMemo)(
+  const chainListOptions = (0, import_react10.useMemo)(
     () => supportedChains.filter((chain) => chain.chainId !== srcChain?.chainId),
     [supportedChains, srcChain]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex justify-between globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex flex-col justify-between gap-2 overflow-hidden w-1/2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "text-white opacity-60 text-xs sm:text-sm font-medium", children: "You pay" }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.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_runtime38.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_runtime38.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.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_runtime38.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;
@@ -1988,7 +2047,7 @@ var SwapPanel = ({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex items-center text-sm text-[rgba(255,255,255,0.6)]", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "xpay-flex xpay-items-center xpay-text-sm xpay-text-[rgba(255,255,255,0.6)]", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         UsdPrice,
         {
           prices,
@@ -2000,16 +2059,16 @@ var SwapPanel = ({
         }
       ) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex flex-col relative items-end gap-2.5 w-1/2 text-xs", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime38.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_runtime38.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_runtime37.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
               "img",
               {
                 height: 16,
@@ -2018,12 +2077,12 @@ var SwapPanel = ({
                 alt: srcToken?.name
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { children: srcToken?.symbol }),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DownArrowIcon, {})
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { children: srcToken?.symbol }),
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DownArrowIcon, {})
           ]
         }
       ),
-      tokenListShown && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      tokenListShown && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         TokenPicker,
         {
           onCloseClick: () => setTokenListShown(false),
@@ -2034,22 +2093,22 @@ var SwapPanel = ({
           balances
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime38.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_runtime37.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_runtime38.jsx)(BalanceComponent, { balances, srcToken })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime38.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_runtime37.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
               "img",
               {
                 width: "16",
@@ -2058,17 +2117,17 @@ var SwapPanel = ({
                 alt: srcChain?.name
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { children: srcChain?.displayName }),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DownArrowIcon, {})
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { children: srcChain?.displayName }),
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DownArrowIcon, {})
           ]
         }
       ),
-      chainListShown && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      chainListShown && /* @__PURE__ */ (0, import_jsx_runtime38.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_runtime37.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_runtime38.jsx)(
             ChainListElement,
             {
               index,
@@ -2085,30 +2144,30 @@ var SwapPanel = ({
 };
 
 // src/components/TxConfigForm/ErrorField.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var ErrorField = ({ error }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.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_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var Description = ({ description }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "flex flex-col items-start rounded-lg px-4 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "w-full flex gap-4 items-start justify-between text-xl", children: description }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "xpay-flex xpay-flex-col xpay-items-start xpay-rounded-lg xpay-px-4 xpay-py-2", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "xpay-w-full xpay-flex xpay-gap-4 xpay-items-start xpay-justify-between xpay-text-xl", children: description }) });
 };
 
 // src/components/TxConfigForm/Button.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var Button = ({ children, onClick, type, disabled }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.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,
@@ -2118,8 +2177,9 @@ var Button = ({ children, onClick, type, disabled }) => {
 };
 
 // src/components/TxConfigForm/Form.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var Form = ({
+  integratorId,
   dstChainId,
   dstTokenAddr,
   customContractCalls,
@@ -2128,31 +2188,31 @@ var Form = ({
   onSubmit,
   onClose
 }) => {
-  const [signer, setSigner] = (0, import_react10.useState)();
-  const [dstChain, setDstChain] = (0, import_react10.useState)();
-  const [dstToken, setDstToken] = (0, import_react10.useState)();
-  const [srcChain, setSrcChain] = (0, import_react10.useState)();
-  const [srcToken, setSrcToken] = (0, import_react10.useState)();
-  const [amount, setAmount] = (0, import_react10.useState)("");
-  const [paymentToken, setPaymentToken] = (0, import_react10.useState)();
-  const [route, setRoute] = (0, import_react10.useState)();
-  const [expressChecked, setExpressChecked] = (0, import_react10.useState)(true);
-  const [historyTabShown, setHistoryTabShown] = (0, import_react10.useState)(false);
-  const [isGettingRoute, setIsGettingRoute] = (0, import_react10.useState)(false);
-  const [prices, setPrices] = (0, import_react10.useState)();
-  const [balances, setBalances] = (0, import_react10.useState)();
-  const [settingsShown, setSettingsShown] = (0, import_react10.useState)(false);
-  const [formError, setFormError] = (0, import_react10.useState)("");
-  const [slippage, setSlippage] = (0, import_react10.useState)("1.5");
-  const [feesDetailsShown, setFeesDetailsShown] = (0, import_react10.useState)(false);
-  const [exceedsExpressDeliveryLimit, setExceedsExpressDeliveryLimit] = (0, import_react10.useState)(false);
+  const [signer, setSigner] = (0, import_react11.useState)();
+  const [dstChain, setDstChain] = (0, import_react11.useState)();
+  const [dstToken, setDstToken] = (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)("");
+  const [paymentToken, setPaymentToken] = (0, import_react11.useState)();
+  const [route, setRoute] = (0, import_react11.useState)();
+  const [expressChecked, setExpressChecked] = (0, import_react11.useState)(true);
+  const [historyTabShown, setHistoryTabShown] = (0, import_react11.useState)(false);
+  const [isGettingRoute, setIsGettingRoute] = (0, import_react11.useState)(false);
+  const [prices, setPrices] = (0, import_react11.useState)();
+  const [balances, setBalances] = (0, import_react11.useState)();
+  const [settingsShown, setSettingsShown] = (0, import_react11.useState)(false);
+  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 debouncedAmount = useDebounce(amount, 1e3);
   const account = (0, import_wagmi2.useAccount)();
   const { switchChainAsync } = (0, import_wagmi2.useSwitchChain)();
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     setSigner(account.address);
   }, [account.address]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     const defaultChain = supportedChains.find(
       ({ chainId }) => chainId === account.chainId?.toString()
     );
@@ -2162,18 +2222,28 @@ var Form = ({
       )
     );
   }, [account.chainId]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     setDstChain(supportedChains.find((chain) => chain.chainId === dstChainId));
   }, [supportedChains, dstChainId]);
-  (0, import_react10.useEffect)(() => {
-    setDstToken(
-      dstChain?.tokens.find(
+  (0, import_react11.useEffect)(() => {
+    (async () => {
+      if (!dstChain) {
+        return;
+      }
+      let dstTokenResult = dstChain?.tokens.find(
         (token) => token.address.toLowerCase() === dstTokenAddr.toLowerCase()
-      )
-    );
+      );
+      if (!dstTokenResult) {
+        dstTokenResult = await getCustomTokenData(
+          dstChain,
+          dstTokenAddr.toLowerCase()
+        );
+      }
+      setDstToken(dstTokenResult);
+    })();
   }, [dstChain]);
-  (0, import_react10.useEffect)(() => {
-    if (srcChain && srcToken && dstChain && debouncedAmount && paymentToken && slippage) {
+  (0, import_react11.useEffect)(() => {
+    if (integratorId && srcChain && srcToken && dstChain && debouncedAmount && paymentToken && slippage) {
       setFormError("");
       const timeout = setTimeout(() => {
         setFormError("Getting Route is taking longer than usually");
@@ -2185,6 +2255,7 @@ var Form = ({
           `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,
@@ -2215,7 +2286,7 @@ var Form = ({
     slippage,
     expressChecked
   ]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (srcChain) {
       setPaymentToken(
         srcChain.tokens.find(
@@ -2224,21 +2295,21 @@ var Form = ({
       );
     }
   }, [srcChain]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     setAmount("");
     setFormError("");
   }, [srcToken]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     setSrcToken(srcChain?.tokens[0]);
   }, [srcChain]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (srcChain) {
       getPrices({ chainId: srcChain.chainId, currency: "USD" }).then(
         (prices2) => setPrices(prices2)
       );
     }
   }, [srcChain]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (srcChain && signer) {
       getBalances(srcChain, signer).then((balances2) => setBalances(balances2));
     }
@@ -2250,13 +2321,13 @@ var Form = ({
   const handleSwitchChain = async () => {
     await switchChainAsync({ chainId: Number(srcChain?.chainId) });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+  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",
+      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",
       onSubmit: handleSubmit,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           TopBar,
           {
             signer,
@@ -2266,7 +2337,7 @@ var Form = ({
             onClose
           }
         ),
-        settingsShown && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        settingsShown && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           Settings,
           {
             expressChecked,
@@ -2276,9 +2347,9 @@ var Form = ({
             setSlippage
           }
         ),
-        historyTabShown ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(History, { signer, supportedChains }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex flex-col gap-2", children: [
-          desc && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Description, { description: desc }),
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        historyTabShown ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(History, { signer, supportedChains }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-gap-2", children: [
+          desc && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Description, { description: desc }),
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
             SwapPanel,
             {
               amount,
@@ -2294,7 +2365,7 @@ var Form = ({
               setExceedsExpressDeliveryLimit
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
             Summary,
             {
               isGettingRoute,
@@ -2303,7 +2374,7 @@ var Form = ({
               dstChain
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
             FeesDetails,
             {
               route,
@@ -2317,8 +2388,8 @@ var Form = ({
               setFeesDetailsShown
             }
           ),
-          formError.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ErrorField, { error: formError }),
-          signer && srcChain && srcChain.chainId !== account.chainId?.toString() ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Button, { type: "button", onClick: handleSwitchChain, children: "Switch chain" }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          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",
@@ -2333,8 +2404,9 @@ var Form = ({
 };
 
 // src/components/TxConfigForm/index.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var TxConfigForm = ({
+  integratorId,
   dstChainId,
   dstTokenAddr,
   customContractCalls,
@@ -2351,19 +2423,20 @@ var TxConfigForm = ({
     }
   };
   const queryClient = new import_react_query.QueryClient();
-  const wagmiConfig = (0, import_react11.useMemo)(
+  const wagmiConfig = (0, import_react12.useMemo)(
     () => getWagmiConfig(supportedChains),
     supportedChains
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_wagmi3.WagmiProvider, { config: wagmiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_query.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  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)(
     "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",
+      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",
       onClick: onBackdropClick,
-      children: /* @__PURE__ */ (0, import_jsx_runtime42.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_runtime42.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime43.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_runtime43.jsx)(
           Form,
           {
+            integratorId,
             dstChainId,
             dstTokenAddr,
             customContractCalls,
@@ -2373,12 +2446,13 @@ var TxConfigForm = ({
             onClose
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PoweredBy, {})
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PoweredBy, {})
       ] })
     }
   ) }) });
 };
 var openTxConfigForm = async ({
+  integratorId,
   dstChainId,
   dstTokenAddr,
   customContractCalls,
@@ -2388,10 +2462,11 @@ var openTxConfigForm = async ({
   try {
     return await new Promise(async (resolve) => {
       await waitForInitialization();
-      xswapRoot.render(
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      xpayRoot.render(
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           TxConfigForm,
           {
+            integratorId,
             dstChainId,
             dstTokenAddr,
             customContractCalls,
@@ -2399,10 +2474,10 @@ var openTxConfigForm = async ({
             supportedChains,
             onSubmit: (route) => {
               resolve(route);
-              xswapRoot.render("");
+              xpayRoot.render("");
             },
             onClose: () => {
-              xswapRoot.render("");
+              xpayRoot.render("");
             }
           }
         )
@@ -2414,93 +2489,106 @@ var openTxConfigForm = async ({
 };
 
 // src/components/TxStatusButton/index.tsx
-var import_react12 = require("react");
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_react13 = require("react");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var TxStatusButton = ({ transaction }) => {
   const {
-    fromChain,
-    fromChainImage,
-    fromToken,
-    fromTokenImage,
-    fromAmount,
-    toChain,
-    toChainImage,
+    srcChain: fromChain,
+    srcChainImage: fromChainImage,
+    srcToken: fromToken,
+    srcTokenImage: fromTokenImage,
+    srcAmount: fromAmount,
+    dstChain: toChain,
+    dstChainImage: toChainImage,
     isDone,
-    txHash,
     explorer
   } = transaction;
-  const [isWide, setIsWide] = (0, import_react12.useState)(false);
-  const background = (0, import_react12.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)]",
+  const [isWide, setIsWide] = (0, import_react13.useState)(false);
+  const background = (0, import_react13.useMemo)(
+    () => 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_react12.useMemo)(
-    () => isDone ? "border border-solid border-x_green_dark" : "border border-solid border-x_blue_dark",
+  const border = (0, import_react13.useMemo)(
+    () => 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_runtime43.jsxs)("div", { className: "flex gap-2", onClick: () => setIsWide((x) => !x), children: [
-    isWide && /* @__PURE__ */ (0, import_jsx_runtime43.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_runtime43.jsxs)("div", { className: "flex justify-between flex-col gap-2 sm:gap-5 sm:flex-row w-full", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-                "img",
-                {
-                  className: "w-5 h-5",
-                  src: fromChainImage,
-                  alt: "source chain"
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { children: fromChain }),
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "w-3.5 h-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ArrowRightIcon, {}) }),
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("img", { className: "w-5 h-5", src: toChainImage, alt: "to chain" }),
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { children: toChain })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { children: "Sent" }),
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { children: fromAmount }),
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { children: fromToken }),
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-                "img",
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+    "div",
+    {
+      className: "xpay-flex xpay-gap-2",
+      onClick: () => setIsWide((x) => !x),
+      children: [
+        isWide && /* @__PURE__ */ (0, import_jsx_runtime44.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_runtime44.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_runtime44.jsxs)("div", { className: "xpay-flex xpay-items-center xpay-gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                    "img",
+                    {
+                      className: "xpay-w-5 xpay-h-5",
+                      src: fromChainImage,
+                      alt: "source chain"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { children: fromChain }),
+                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "xpay-w-3.5 xpay-h-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ArrowRightIcon, {}) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                    "img",
+                    {
+                      className: "xpay-w-5 xpay-h-5",
+                      src: toChainImage,
+                      alt: "to chain"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { children: toChain })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "xpay-flex xpay-items-center xpay-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: "xpay-w-5 xpay-h-5",
+                      src: fromTokenImage,
+                      alt: "source token"
+                    }
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(UnknownTokenLogo, { tokenName: "?" })
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                "a",
                 {
-                  className: "w-5 h-5",
-                  src: fromTokenImage,
-                  alt: "source token"
+                  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_runtime44.jsx)("div", { className: "xpay-w-3.5 xpay-h-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ArrowUpRightIcon, {}) })
                 }
               )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          "div",
+          {
+            className: `xpay-text-white xpay-rounded-xl xpay-cursor-pointer ${background} ${border}`,
+            children: /* @__PURE__ */ (0, import_jsx_runtime44.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_runtime44.jsx)(ArrowLeftIcon, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime44.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_runtime44.jsx)("div", { className: "xpay-text-x_green xpay-w-5 xpay-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: "xpay-w-5 xpay-h-5", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(XSwapLogo, {}) }),
+                /* @__PURE__ */ (0, import_jsx_runtime44.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_runtime44.jsx)(CircularProgressIcon, {}) })
+              ] }) })
             ] })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime43.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_runtime43.jsx)("div", { className: "w-3.5 h-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ArrowUpRightIcon, {}) })
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-      "div",
-      {
-        className: `text-white rounded-xl cursor-pointer ${background} ${border}`,
-        children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex gap-2 items-center h-14 w-20 justify-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ArrowLeftIcon, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "relative flex items-center justify-center w-9 h-9", children: isDone ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "text-x_green w-5 h-5", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(CheckIcon, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "w-5 h-5", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(XSwapLogo, {}) }),
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "absolute flex items-center justify-center top-0 left-0 right-0 bottom-0 text-white", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(CircularProgressIcon, {}) })
-          ] }) })
-        ] })
-      }
-    )
-  ] });
+          }
+        )
+      ]
+    }
+  );
 };
 var renderedTransactions = [];
 var addTransactionToRenderedTransactions = (transaction) => {
@@ -2522,25 +2610,71 @@ var updateTransactionDoneInRenderedTransactions = (txHash) => {
   }
 };
 var renderTxStatusButtons = () => {
-  const buttons = renderedTransactions.map((item) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TxStatusButton, { transaction: item }, item.txHash));
-  txStatusRoot.render(buttons);
+  const buttons = renderedTransactions.map((item) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(TxStatusButton, { transaction: item }, item.txHash));
+  xpayTxStatusRoot.render(buttons);
 };
 
 // src/components/Skeleton/index.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var Skeleton = ({ width, height }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: `bg-current rounded animate-pulse ${width} ${height}` });
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    "div",
+    {
+      className: `xpay-bg-current xpay-rounded xpay-animate-pulse ${width} ${height}`
+    }
+  );
 };
 
 // src/services/integrations/monitoring.ts
 var import_async_retry = __toESM(require("async-retry"));
-var monitorTransactionStatus = async (txChainId, txHash) => {
+
+// src/services/blockchain.ts
+var import_ethers5 = require("ethers");
+var getCustomTokenData = async (chain, tokenAddress) => {
+  const rpcUrl = chain.publicRpcUrls[0];
+  const customTokenContract = new import_ethers5.ethers.Contract(
+    tokenAddress.toLowerCase(),
+    ERC20Abi,
+    import_ethers5.ethers.getDefaultProvider(rpcUrl)
+  );
+  try {
+    const query = async (contract, method, args = []) => {
+      if (contract?.provider) {
+        const response = await contract[method](...args);
+        return response;
+      }
+      return null;
+    };
+    const responses = await Promise.all([
+      query(customTokenContract, "decimals"),
+      query(customTokenContract, "name"),
+      query(customTokenContract, "symbol")
+    ]);
+    const [decimals, name, symbol] = responses;
+    return {
+      address: tokenAddress,
+      symbol,
+      name,
+      decimals,
+      quickPick: false,
+      supported: true,
+      priority: 0
+    };
+  } catch (_) {
+    throw new Error(
+      `Provided token ${tokenAddress} does not exists on chain ${chain.displayName}`
+    );
+  }
+};
+
+// src/services/integrations/monitoring.ts
+var renderTxStatus = async (txChainId, txHash) => {
   const txReceipt = await getTxReceipt(txChainId, txHash);
   const supportedChains = (await getChains()).filter(
     ({ web3Environment, swapSupported }) => web3Environment === "mainnet" /* MAINNET */ && swapSupported
   );
   const messageSentEvent = txReceipt.logs?.find((log) => {
-    return log.topics[0] === import_ethers5.ethers.utils.id(MSG_SENT_EVENT_SIG);
+    return log.topics[0] === import_ethers6.ethers.utils.id(MSG_SENT_EVENT_SIG);
   });
   if (!messageSentEvent) {
     throw new Error(
@@ -2548,7 +2682,7 @@ var monitorTransactionStatus = async (txChainId, txHash) => {
     );
   }
   const messageId = messageSentEvent?.topics[1];
-  const iface = new import_ethers5.ethers.utils.Interface(MSG_SENT_EVENT_ABI);
+  const iface = new import_ethers6.ethers.utils.Interface(MSG_SENT_EVENT_ABI);
   const decodedMessageSentEvent = iface.parseLog(messageSentEvent);
   if (!decodedMessageSentEvent) {
     throw new Error(
@@ -2558,9 +2692,16 @@ var monitorTransactionStatus = async (txChainId, txHash) => {
   const srcChain = supportedChains.find(
     (chain) => chain.chainId === txChainId.toString()
   );
-  const srcToken = srcChain?.tokens.find(
+  if (!srcChain) {
+    throw new Error(`Unknown src chain ${txChainId}`);
+  }
+  const tokenAddress = decodedMessageSentEvent.args?.token.toString();
+  let srcToken = srcChain.tokens.find(
     (token) => token.address === decodedMessageSentEvent.args?.token.toString()
   );
+  if (!srcToken) {
+    srcToken = await getCustomTokenData(srcChain, tokenAddress);
+  }
   const dstChain = supportedChains.find(
     (chain) => chain.ccipChainId === decodedMessageSentEvent.args?.destinationChainSelector?.toString()
   );
@@ -2568,19 +2709,20 @@ var monitorTransactionStatus = async (txChainId, txHash) => {
   if (!dstChainId) {
     throw new Error(`Unknown destination chain!`);
   }
+  const tokenAmount = weiToHumanReadable({
+    amount: decodedMessageSentEvent.args?.tokenAmount.toString(),
+    decimals: srcToken?.decimals || 18,
+    precisionFractionalPlaces: 4
+  });
   const transaction = {
     txHash,
-    fromChain: srcChain?.displayName,
-    fromChainImage: srcChain?.image,
-    toChain: dstChain.displayName,
-    toChainImage: dstChain.image,
-    fromToken: srcToken?.symbol,
-    fromTokenImage: srcToken?.image,
-    fromAmount: weiToHumanReadable({
-      amount: decodedMessageSentEvent.args?.tokenAmount.toString(),
-      decimals: srcToken?.decimals || 18,
-      precisionFractionalPlaces: 4
-    }),
+    srcChain: srcChain.displayName,
+    srcChainImage: srcChain.image,
+    dstChain: dstChain.displayName,
+    dstChainImage: dstChain.image,
+    srcToken: srcToken?.symbol,
+    srcTokenImage: srcToken?.image,
+    srcAmount: tokenAmount === "0" ? "<0.0001" : tokenAmount,
     isDone: false,
     explorer: `${CCIP_EXPLORER}/tx/${txHash}`
   };
@@ -2590,16 +2732,16 @@ var monitorTransactionStatus = async (txChainId, txHash) => {
   if (!xSwapRouterOnDestinationAddress) {
     throw new Error(`Unknown destination XSwapRouter!`);
   }
-  const xSwapRouterOnDestination = new import_ethers5.ethers.Contract(
+  const xSwapRouterOnDestination = new import_ethers6.ethers.Contract(
     xSwapRouterOnDestinationAddress,
     MSG_RECEIVED_EVENT_ABI,
-    import_ethers5.ethers.getDefaultProvider(
+    import_ethers6.ethers.getDefaultProvider(
       supportedChains.find((chain) => chain.chainId === dstChainId)?.publicRpcUrls[0]
     )
   );
   const msgReceivedEventFilter = {
     address: xSwapRouterOnDestinationAddress,
-    topics: [import_ethers5.ethers.utils.id(MSG_RECEIVED_EVENT_SIG), messageId]
+    topics: [import_ethers6.ethers.utils.id(MSG_RECEIVED_EVENT_SIG), messageId]
   };
   const onSuccess = async () => {
     updateTransactionDoneInRenderedTransactions(txHash);
@@ -2610,6 +2752,11 @@ var monitorTransactionStatus = async (txChainId, txHash) => {
     removeTransactionFromRenderedTransactions(txHash);
     renderTxStatusButtons();
   };
+  getTxStatus({ transferId: messageId }).then((response) => {
+    if (response.status === "DONE") {
+      onSuccess();
+    }
+  });
   xSwapRouterOnDestination.once(msgReceivedEventFilter, () => onSuccess());
 };
 var getTxReceipt = async (txChainId, txHash) => {
@@ -2617,7 +2764,7 @@ var getTxReceipt = async (txChainId, txHash) => {
     const chain = (await getChains()).find(
       (chain2) => chain2.chainId === txChainId
     );
-    const provider = new import_ethers5.ethers.providers.JsonRpcProvider(
+    const provider = new import_ethers6.ethers.providers.JsonRpcProvider(
       chain?.publicRpcUrls[0]
     );
     return await (0, import_async_retry.default)(async () => {
@@ -2635,7 +2782,8 @@ var getTxReceipt = async (txChainId, txHash) => {
 };
 
 // src/services/integrations/transactions.ts
-var getSwapTx = async ({
+var openTransactionModal = async ({
+  integratorId,
   dstChain,
   dstToken,
   customContractCalls = [],
@@ -2646,6 +2794,7 @@ var getSwapTx = async ({
   );
   validateSwapTxData(supportedChains, dstChain, dstToken);
   const route = await openTxConfigForm({
+    integratorId,
     dstChainId: dstChain,
     dstTokenAddr: dstToken,
     customContractCalls,
@@ -2661,13 +2810,20 @@ var validateSwapTxData = (supportedChains, dstChain, dstToken) => {
   if (!supportedDstChain) {
     throw new Error(`Provided chain '${dstChain}' is not supported`);
   }
-  if (!supportedDstChain.tokens.some(({ address }) => address === dstToken)) {
-    throw new Error(`Provided token '${dstToken}' is not supported`);
+  if (!isETHAddressValid(dstToken)) {
+    throw new Error(
+      `Provided token address ${dstToken} on chain ${dstChain} is not correct`
+    );
   }
 };
 
 // src/index.ts
 initDocument();
+var XPay = {
+  openTransactionModal,
+  renderTxStatus
+};
+var src_default = XPay;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ContractName,
@@ -2675,6 +2831,6 @@ initDocument();
   Environment,
   Web3Environment,
   XSwapCallType,
-  getSwapTx,
-  monitorTransactionStatus
+  openTransactionModal,
+  renderTxStatus
 });