@xswap-link/sdk 0.2.4 → 0.2.6

package/dist/index.mjs

@@ -23,7 +23,7 @@ var xswap_config_default = {
 };
 
 // package.json
-var version = "0.2.4";
+var version = "0.2.6";
 
 // src/components/WaitingForInit/index.tsx
 import { jsx } from "react/jsx-runtime";
@@ -50,19 +50,19 @@ var WaitingForInit = () => {
 
 // src/config/init.tsx
 import { jsx as jsx2 } from "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;
   });
@@ -87,68 +87,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 = createRoot(xswapElement);
+  xpayRoot = 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 = createRoot(txStatusElement);
+  xpayTxStatusRoot = 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 = createRoot(initIndicatorElement);
+  xpayInitIndicatorRoot = createRoot(initIndicatorElement);
 };
 var displayInitIndicator = (display) => {
-  display ? initIndicatorRoot.render(/* @__PURE__ */ jsx2(WaitingForInit, {})) : initIndicatorRoot.render("");
+  display ? xpayInitIndicatorRoot.render(/* @__PURE__ */ jsx2(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}`, {
@@ -191,10 +153,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
 import { ethers as ethers2 } from "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
 import { ethers } from "ethers";
 
@@ -626,6 +635,9 @@ var shortAddress = (address) => {
     address.length
   )}`;
 };
+var isETHAddressValid = (address) => {
+  return /^0x[a-fA-F0-9]{40}$/.test(address);
+};
 
 // src/utils/index.ts
 import { format } from "date-fns";
@@ -654,19 +666,19 @@ var getDate = (blockTimestamp) => {
 };
 
 // src/services/integrations/monitoring.ts
-import { ethers as ethers4 } from "ethers";
+import { ethers as ethers5 } from "ethers";
 
 // src/components/Alert/index.tsx
 import { jsxs } from "react/jsx-runtime";
 var Alert = ({ desc }) => {
-  return /* @__PURE__ */ jsxs("div", { className: "border border-solid border-x_alert rounded-3xl text-x_alert_light text-xs py-0.5 px-2", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "xpay-border xpay-border-solid xpay-border-x_alert xpay-rounded-3xl xpay-text-x_alert_light xpay-text-xs xpay-py-0.5 xpay-px-2", children: [
     "\u26A0\uFE0F ",
     desc
   ] });
 };
 
 // src/components/TxConfigForm/index.tsx
-import { useMemo as useMemo7 } from "react";
+import { useMemo as useMemo8 } from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { WagmiProvider } from "wagmi";
 
@@ -831,7 +843,7 @@ var CircularProgressIcon = () => {
   return /* @__PURE__ */ jsxs2(
     "svg",
     {
-      className: "animate-spin-slow text-white",
+      className: "animate-spin-slow xpay-text-white",
       width: "33",
       height: "33",
       viewBox: "0 0 33 33",
@@ -1146,8 +1158,8 @@ var XSwapLogo = () => {
 // src/components/TxConfigForm/PoweredBy.tsx
 import { jsx as jsx25, jsxs as jsxs6 } from "react/jsx-runtime";
 var PoweredBy = () => {
-  return /* @__PURE__ */ jsxs6("div", { className: "flex justify-center items-center gap-2 my-3", children: [
-    /* @__PURE__ */ jsx25("span", { className: "text-x_grey", children: "Powered by" }),
+  return /* @__PURE__ */ jsxs6("div", { className: "xpay-flex xpay-justify-center xpay-items-center xpay-gap-2 xpay-my-3", children: [
+    /* @__PURE__ */ jsx25("span", { className: "xpay-text-x_grey", children: "Powered by" }),
     /* @__PURE__ */ jsx25(XSwapBadgeIcon, {}),
     /* @__PURE__ */ jsx25("span", { children: "\u2715" }),
     /* @__PURE__ */ jsx25(ChainlinkCCIPIcon, {})
@@ -1228,13 +1240,13 @@ var HistoryCard = ({ transaction, supportedChains }) => {
   const targetChainData = supportedChains.find(
     (chain) => chain.chainId === transaction.targetChainId
   );
-  return /* @__PURE__ */ jsxs7("div", { className: "flex flex-col globalBorder rounded-xl bg-[rgb(15,15,15)] text-white text-xs sm:text-sm p-4 gap-3 mb-2", children: [
-    /* @__PURE__ */ jsxs7("div", { className: "flex w-full items-center justify-between", children: [
-      /* @__PURE__ */ jsx26("div", { className: "text-sm sm:text-base", children: date }),
-      /* @__PURE__ */ jsxs7("div", { className: "flex items-center", children: [
-        transaction.status === "IN_PROGRESS" && /* @__PURE__ */ jsx26("div", { className: "flex items-center", children: /* @__PURE__ */ jsx26("div", { className: "text-[rgb(250,200,100)]", children: "In progress" }) }),
-        transaction.status === "DONE" && /* @__PURE__ */ jsx26("div", { className: "flex items-center", children: /* @__PURE__ */ jsx26("div", { className: "text-[rgb(100,200,100)]", children: "Done" }) }),
-        transaction.status === "REVERTED" && /* @__PURE__ */ jsx26("div", { className: "flex items-center", children: /* @__PURE__ */ jsx26("div", { className: "text-[rgb(255,100,100)]", children: "Reverted" }) }),
+  return /* @__PURE__ */ jsxs7("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__ */ jsxs7("div", { className: "xpay-flex xpay-w-full xpay-items-center xpay-justify-between", children: [
+      /* @__PURE__ */ jsx26("div", { className: "xpay-text-sm sm:xpay-text-base", children: date }),
+      /* @__PURE__ */ jsxs7("div", { className: "xpay-flex xpay-items-center", children: [
+        transaction.status === "IN_PROGRESS" && /* @__PURE__ */ jsx26("div", { className: "xpay-flex xpay-items-center", children: /* @__PURE__ */ jsx26("div", { className: "xpay-text-[rgb(250,200,100)]", children: "In progress" }) }),
+        transaction.status === "DONE" && /* @__PURE__ */ jsx26("div", { className: "xpay-flex xpay-items-center", children: /* @__PURE__ */ jsx26("div", { className: "xpay-text-[rgb(100,200,100)]", children: "Done" }) }),
+        transaction.status === "REVERTED" && /* @__PURE__ */ jsx26("div", { className: "xpay-flex xpay-items-center", children: /* @__PURE__ */ jsx26("div", { className: "xpay-text-[rgb(255,100,100)]", children: "Reverted" }) }),
         /* @__PURE__ */ jsx26(
           "a",
           {
@@ -1243,65 +1255,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__ */ jsx26("div", { className: "w-3.5 h-3.5", children: /* @__PURE__ */ jsx26(ArrowUpRightIcon, {}) })
+            children: /* @__PURE__ */ jsx26("div", { className: "xpay-w-3.5 xpay-h-3.5", children: /* @__PURE__ */ jsx26(ArrowUpRightIcon, {}) })
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs7("div", { className: "flex justify-between flex-wrap gap-2", children: [
-      /* @__PURE__ */ jsxs7("div", { className: "flex items-center", children: [
-        /* @__PURE__ */ jsxs7("div", { className: "flex items-center", children: [
+    /* @__PURE__ */ jsxs7("div", { className: "xpay-flex xpay-justify-between xpay-flex-wrap xpay-gap-2", children: [
+      /* @__PURE__ */ jsxs7("div", { className: "xpay-flex xpay-items-center", children: [
+        /* @__PURE__ */ jsxs7("div", { className: "xpay-flex xpay-items-center", children: [
           /* @__PURE__ */ jsx26(
             "img",
             {
               src: sourceChainData?.image,
               alt: `${sourceChainData?.name} logo`,
-              className: "w-5 h-5 mr-1"
+              className: "xpay-w-5 xpay-h-5 xpay-mr-1"
             }
           ),
           /* @__PURE__ */ jsx26("div", { children: sourceChainData?.displayName })
         ] }),
-        /* @__PURE__ */ jsx26("div", { className: "w-3.5 h-3.5 my-0 mx-1.5", children: /* @__PURE__ */ jsx26(ArrowRightIcon, {}) }),
-        /* @__PURE__ */ jsxs7("div", { className: "flex items-center", children: [
+        /* @__PURE__ */ jsx26("div", { className: "xpay-w-3.5 xpay-h-3.5 xpay-my-0 xpay-mx-1.5", children: /* @__PURE__ */ jsx26(ArrowRightIcon, {}) }),
+        /* @__PURE__ */ jsxs7("div", { className: "xpay-flex xpay-items-center", children: [
           /* @__PURE__ */ jsx26(
             "img",
             {
               src: targetChainData?.image,
               alt: `${targetChainData?.name} logo`,
-              className: "w-5 h-5 mr-1"
+              className: "xpay-w-5 xpay-h-5 xpay-mr-1"
             }
           ),
           /* @__PURE__ */ jsx26("div", { children: targetChainData?.displayName })
         ] })
       ] }),
-      /* @__PURE__ */ jsx26("div", { className: "flex items-center mb-2 last:mb-0", children: /* @__PURE__ */ jsxs7("div", { className: "flex items-center flex-wrap", children: [
-        /* @__PURE__ */ jsxs7("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ jsx26("div", { className: "xpay-flex xpay-items-center xpay-mb-2 last:xpay-mb-0", children: /* @__PURE__ */ jsxs7("div", { className: "xpay-flex xpay-items-center xpay-flex-wrap", children: [
+        /* @__PURE__ */ jsxs7("div", { className: "xpay-flex xpay-items-center", children: [
           Number(transferredAmount) < MINIMUM_DISPLAYED_TOKEN_AMOUNT ? `<${MINIMUM_DISPLAYED_TOKEN_AMOUNT}` : transferredAmount,
-          /* @__PURE__ */ jsx26("div", { className: "ml-1", children: tokenData?.symbol }),
+          /* @__PURE__ */ jsx26("div", { className: "xpay-ml-1", children: tokenData?.symbol }),
           tokenData?.image ? /* @__PURE__ */ jsx26(
             "img",
             {
               src: tokenData?.image,
               alt: tokenData?.name || "",
-              className: "w-5 h-5 ml-1"
+              className: "xpay-w-5 xpay-h-5 xpay-ml-1"
             }
-          ) : /* @__PURE__ */ jsx26("div", { className: "flex items-center justify-center w-5 h-5 text-[10px] ml-1 rounded-full bg-[#272e40] text-[#e0e7fa]", children: tokenData?.symbol.substring(0, 1) })
+          ) : /* @__PURE__ */ jsx26("div", { className: "xpay-flex xpay-items-center xpay-justify-center xpay-w-5 xpay-h-5 xpay-text-[10px] xpay-ml-1 xpay-rounded-full xpay-bg-[#272e40] xpay-text-[#e0e7fa]", children: tokenData?.symbol.substring(0, 1) })
         ] }),
         transaction.tokenOutAddress && /* @__PURE__ */ jsxs7(Fragment, { children: [
-          /* @__PURE__ */ jsx26("div", { className: "w-3.5 h-3.5 my-0 mx-1.5", children: /* @__PURE__ */ jsx26(ArrowRightIcon, {}) }),
-          /* @__PURE__ */ jsxs7("div", { className: "flex items-center", children: [
+          /* @__PURE__ */ jsx26("div", { className: "xpay-w-3.5 xpay-h-3.5 xpay-my-0 xpay-mx-1.5", children: /* @__PURE__ */ jsx26(ArrowRightIcon, {}) }),
+          /* @__PURE__ */ jsxs7("div", { className: "xpay-flex xpay-items-center", children: [
             Number(receivedAmount) < 1e-4 ? "<0.0001" : receivedAmount,
-            /* @__PURE__ */ jsx26("div", { className: "ml-1", children: tokenOutData?.symbol }),
+            /* @__PURE__ */ jsx26("div", { className: "xpay-ml-1", children: tokenOutData?.symbol }),
             tokenOutData?.image ? /* @__PURE__ */ jsx26(
               "img",
               {
                 src: tokenOutData?.image,
                 alt: tokenOutData?.name || "",
-                className: "w-5 h-5 ml-1"
+                className: "xpay-w-5 xpay-h-5 xpay-ml-1"
               }
-            ) : /* @__PURE__ */ jsx26("div", { className: "flex items-center justify-center w-5 h-5 text-[10px] ml-1 rounded-full bg-[#272e40] text-[#e0e7fa]", children: tokenData?.symbol.substring(0, 1) })
+            ) : /* @__PURE__ */ jsx26("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) })
           ] })
         ] })
       ] }) })
@@ -1320,15 +1332,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 BigNumberJS2(
@@ -1362,10 +1394,10 @@ var History = ({ signer, supportedChains }) => {
     return () => clearInterval(timer);
   }, [signer, fetchHistory, getHistory, historyLoadedOnce]);
   if (!signer)
-    return /* @__PURE__ */ jsx27("div", { className: "flex items-center justify-center w-full h-[30vh]", children: "Connect a wallet to browse history" });
-  return /* @__PURE__ */ jsx27("div", { className: "flex items-center justify-center w-full", children: /* @__PURE__ */ jsxs8("div", { className: "w-full h-96 overflow-scroll overflow-x-hidden", children: [
-    fetchedHistory?.length === 0 && historyLoadedOnce && /* @__PURE__ */ jsx27("div", { className: "w-full text-center py-4 px-0 text-[rgb(158,158,158)]", children: "Your history is empty..." }),
-    !fetchedHistory && !historyLoadedOnce && /* @__PURE__ */ jsx27("div", { className: "flex w-full h-full items-center justify-center", children: /* @__PURE__ */ jsx27(CircularProgressIcon, {}) }),
+    return /* @__PURE__ */ jsx27("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__ */ jsx27("div", { className: "xpay-flex xpay-items-center xpay-justify-center xpay-w-full", children: /* @__PURE__ */ jsxs8("div", { className: "xpay-w-full xpay-h-96 xpay-overflow-scroll xpay-overflow-x-hidden", children: [
+    fetchedHistory?.length === 0 && historyLoadedOnce && /* @__PURE__ */ jsx27("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__ */ jsx27("div", { className: "xpay-flex xpay-w-full xpay-h-full xpay-items-center xpay-justify-center", children: /* @__PURE__ */ jsx27(CircularProgressIcon, {}) }),
     fetchedHistory?.map((transaction, index) => /* @__PURE__ */ jsx27(
       HistoryCard,
       {
@@ -1386,26 +1418,26 @@ var TopBar = ({
   historyTabShown,
   onClose
 }) => {
-  return /* @__PURE__ */ jsxs9("div", { className: "flex w-full justify-between items-center mx-auto p-2", children: [
-    /* @__PURE__ */ jsx28("div", { className: "rounded-lg text-[rgba(255,255,255,0.6)] text-xs sm:text-base whitespace-nowrap", children: signer ? `Connected wallet: ${shortAddress(signer)}` : `Wallet disconnected` }),
-    /* @__PURE__ */ jsxs9("div", { className: "flex gap-2 justify-center items-center", children: [
+  return /* @__PURE__ */ jsxs9("div", { className: "xpay-flex xpay-w-full xpay-justify-between xpay-items-center xpay-mx-auto xpay-p-2", children: [
+    /* @__PURE__ */ jsx28("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__ */ jsxs9("div", { className: "xpay-flex xpay-gap-2 xpay-justify-center xpay-items-center", children: [
       !historyTabShown && /* @__PURE__ */ jsx28(
         "div",
         {
           onClick: () => setSettingsShown(true),
-          className: "flex items-center text-xs gap-1 cursor-pointer",
-          children: /* @__PURE__ */ jsx28("div", { className: "w-7 h-7 rounded-full bg-gradient-to-r from-x_blue_light to-x_blue_dark flex items-center justify-center", children: /* @__PURE__ */ jsx28(SettingsIcon, {}) })
+          className: "xpay-flex xpay-items-center xpay-text-xs xpay-gap-1 xpay-cursor-pointer",
+          children: /* @__PURE__ */ jsx28("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__ */ jsx28(SettingsIcon, {}) })
         }
       ),
       /* @__PURE__ */ jsx28(
         "div",
         {
           onClick: () => setHistoryTabShown((x) => !x),
-          className: "flex items-center text-sm gap-1 cursor-pointer",
-          children: !historyTabShown ? /* @__PURE__ */ jsx28(Fragment2, { children: /* @__PURE__ */ jsx28("div", { className: "w-7 h-7 rounded-full bg-gradient-to-r from-x_blue_light to-x_blue_dark flex items-center justify-center", children: /* @__PURE__ */ jsx28(HistoryIcon, {}) }) }) : /* @__PURE__ */ jsx28("div", { children: "Back" })
+          className: "xpay-flex xpay-items-center xpay-text-sm xpay-gap-1 xpay-cursor-pointer",
+          children: !historyTabShown ? /* @__PURE__ */ jsx28(Fragment2, { children: /* @__PURE__ */ jsx28("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__ */ jsx28(HistoryIcon, {}) }) }) : /* @__PURE__ */ jsx28("div", { children: "Back" })
         }
       ),
-      /* @__PURE__ */ jsx28("div", { className: "cursor-pointer text-white", onClick: onClose, children: /* @__PURE__ */ jsx28(CloseIcon, {}) })
+      /* @__PURE__ */ jsx28("div", { className: "xpay-cursor-pointer xpay-text-white", onClick: onClose, children: /* @__PURE__ */ jsx28(CloseIcon, {}) })
     ] })
   ] });
 };
@@ -1429,53 +1461,53 @@ var Settings = ({
       );
     }
   }, [slippageActivePresetIndex, usingSlippageInput]);
-  return /* @__PURE__ */ jsx29("div", { className: "absolute w-[310px] right-0 top-[46px] z-10 bg-black border border-solid border-[rgba(54,129,198,1)] p-4 rounded-xl", children: /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-4 justify-between", children: [
-    /* @__PURE__ */ jsxs10("div", { className: "flex justify-between", children: [
-      /* @__PURE__ */ jsx29("div", { className: "text-base", children: "Settings" }),
+  return /* @__PURE__ */ jsx29("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__ */ jsxs10("div", { className: "xpay-flex xpay-flex-col xpay-gap-4 xpay-justify-between", children: [
+    /* @__PURE__ */ jsxs10("div", { className: "xpay-flex xpay-justify-between", children: [
+      /* @__PURE__ */ jsx29("div", { className: "xpay-text-base", children: "Settings" }),
       /* @__PURE__ */ jsx29(
         "div",
         {
-          className: "cursor-pointer",
+          className: "xpay-cursor-pointer",
           onClick: () => setSettingsShown(false),
           children: /* @__PURE__ */ jsx29(CloseIcon, {})
         }
       )
     ] }),
     /* @__PURE__ */ jsxs10("div", { children: [
-      /* @__PURE__ */ jsxs10("div", { className: "flex gap-2 items-center", children: [
-        /* @__PURE__ */ jsx29("div", { className: "text-sm text-[rgba(255,255,255,0.6)]", children: "Express delivery" }),
+      /* @__PURE__ */ jsxs10("div", { className: "xpay-flex xpay-gap-2 xpay-items-center", children: [
+        /* @__PURE__ */ jsx29("div", { className: "xpay-text-sm xpay-text-[rgba(255,255,255,0.6)]", children: "Express delivery" }),
         /* @__PURE__ */ jsx29("div", { children: /* @__PURE__ */ jsxs10(
           "span",
           {
-            className: "inline-flex w-14 h-9 p-3 relative align-middle box-border overflow-hidden cursor-pointer",
+            className: "xpay-inline-flex xpay-w-14 xpay-h-9 xpay-p-3 xpay-relative xpay-align-middle xpay-box-border xpay-overflow-hidden xpay-cursor-pointer",
             onClick: () => {
               setExpressChecked((x) => !x);
             },
             children: [
-              /* @__PURE__ */ jsx29("span", { className: "h-full, w-full rounded-lg bg-[rgba(255,255,255,0.3)]" }),
+              /* @__PURE__ */ jsx29("span", { className: "xpay-h-full, xpay-w-full xpay-rounded-lg xpay-bg-[rgba(255,255,255,0.3)]" }),
               /* @__PURE__ */ jsx29(
                 "span",
                 {
-                  className: `transition-all w-5 h-5 rounded-full absolute translate-y-[-4px] 
-          ${expressChecked ? "translate-x-[12px] bg-x_blue" : "bg-white"} `
+                  className: `xpay-transition-all xpay-w-5 xpay-h-5 xpay-rounded-full xpay-absolute xpay-translate-y-[-4px] 
+          ${expressChecked ? "xpay-translate-x-[12px] xpay-bg-x_blue" : "xpay-bg-white"} `
                 }
               )
             ]
           }
         ) })
       ] }),
-      /* @__PURE__ */ jsxs10("div", { className: "flex gap-4", children: [
-        /* @__PURE__ */ jsx29("div", { className: "min-w-[26px] min-h-[26px] text-[#ffa726]", children: /* @__PURE__ */ jsx29(InfoIcon, {}) }),
-        /* @__PURE__ */ jsx29("div", { className: "text-xs text-left", children: "Express delivery is a special feature of XSwap that reduces transaction time across chains to around 30 seconds. It is currently available for swaps below a value of $ 1000 USD." })
+      /* @__PURE__ */ jsxs10("div", { className: "xpay-flex xpay-gap-4", children: [
+        /* @__PURE__ */ jsx29("div", { className: "xpay-min-w-[26px] xpay-min-h-[26px] xpay-text-[#ffa726]", children: /* @__PURE__ */ jsx29(InfoIcon, {}) }),
+        /* @__PURE__ */ jsx29("div", { className: "xpay-text-xs xpay-text-left", children: "Express delivery is a special feature of XSwap that reduces transaction time across chains to around 30 seconds. It is currently available for swaps below a value of $ 1000 USD." })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-2 ", children: [
-      /* @__PURE__ */ jsx29("div", { className: " text-[rgba(255,255,255,0.6)] text-sm", children: "Slippage" }),
-      /* @__PURE__ */ jsxs10("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsx29("div", { className: "flex items-center bg-[rgba(15,15,15,1)] p-1 globalBorder rounded-xl", children: SLIPPAGE_PRESETS.map((preset, index) => /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsxs10("div", { className: "xpay-flex xpay-flex-col xpay-gap-2", children: [
+      /* @__PURE__ */ jsx29("div", { className: "xpay-text-[rgba(255,255,255,0.6)] xpay-text-sm", children: "Slippage" }),
+      /* @__PURE__ */ jsxs10("div", { className: "xpay-flex xpay-gap-2", children: [
+        /* @__PURE__ */ jsx29("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__ */ jsx29(
           "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);
@@ -1484,11 +1516,11 @@ var Settings = ({
           },
           index
         )) }),
-        /* @__PURE__ */ jsxs10("div", { className: "bg-[rgba(39,39,39,1)] p-2 border border-solid border-[rgba(82,82,82,1)] rounded-xl text-white flex items-center", children: [
+        /* @__PURE__ */ jsxs10("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__ */ jsx29(
             "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) => {
@@ -1507,9 +1539,9 @@ var Settings = ({
           /* @__PURE__ */ jsx29(PercentageIcon, {})
         ] })
       ] }),
-      /* @__PURE__ */ jsxs10("div", { className: "flex gap-4", children: [
-        /* @__PURE__ */ jsx29("div", { className: "min-w-[26px] min-h-[26px] text-[#ffa726]", children: /* @__PURE__ */ jsx29(InfoIcon, {}) }),
-        /* @__PURE__ */ jsxs10("div", { className: "text-xs text-left", children: [
+      /* @__PURE__ */ jsxs10("div", { className: "xpay-flex xpay-gap-4", children: [
+        /* @__PURE__ */ jsx29("div", { className: "xpay-min-w-[26px] xpay-min-h-[26px] xpay-text-[#ffa726]", children: /* @__PURE__ */ jsx29(InfoIcon, {}) }),
+        /* @__PURE__ */ jsxs10("div", { className: "xpay-text-xs xpay-text-left", children: [
           "Slippage is the price variation you are willing to accept in the event that the price of the trade changes while it is processing.",
           /* @__PURE__ */ jsx29("br", {}),
           " ",
@@ -1522,6 +1554,7 @@ var Settings = ({
 };
 
 // src/components/TxConfigForm/FeesDetails.tsx
+import { useMemo as useMemo2 } from "react";
 import { jsx as jsx30, jsxs as jsxs11 } from "react/jsx-runtime";
 var FeesDetails = ({
   isGettingRoute,
@@ -1534,12 +1567,15 @@ var FeesDetails = ({
   feesDetailsShown,
   setFeesDetailsShown
 }) => {
-  return /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-3 globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-2 sm:p-4 mb-1", children: [
-    /* @__PURE__ */ jsxs11("div", { className: "flex w-full items-center justify-between text-xs sm:text-sm", children: [
-      /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-1 font-medium text-white opacity-60", children: [
+  const isExpressDeliveryPossible = useMemo2(() => {
+    return expressChecked && !exceedsExpressDeliveryLimit;
+  }, [expressChecked, exceedsExpressDeliveryLimit]);
+  return /* @__PURE__ */ jsxs11("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__ */ jsxs11("div", { className: "xpay-flex xpay-w-full xpay-items-center xpay-justify-between xpay-text-xs sm:xpay-text-sm", children: [
+      /* @__PURE__ */ jsxs11("div", { className: "xpay-flex xpay-items-center xpay-gap-1 xpay-font-medium xpay-text-white xpay-opacity-60", children: [
         /* @__PURE__ */ jsx30(CoinsIcon, {}),
-        /* @__PURE__ */ jsx30("div", { className: "mr-1", children: "Fees:" }),
-        isGettingRoute ? /* @__PURE__ */ jsx30(Skeleton, { width: "w-20", height: "h-4" }) : ` ${weiToHumanReadable({
+        /* @__PURE__ */ jsx30("div", { className: "xpay-mr-1", children: "Fees:" }),
+        isGettingRoute ? /* @__PURE__ */ jsx30(Skeleton, { width: "xpay-w-20", height: "xpay-h-4" }) : ` ${weiToHumanReadable({
           amount: safeBigNumberFrom(
             route?.xSwapFees.xSwapFee.nativeFee || "0"
           ).add(safeBigNumberFrom(route?.xSwapFees.ccipFee || "0")).add(
@@ -1549,14 +1585,14 @@ var FeesDetails = ({
           precisionFractionalPlaces: 5
         })} ${paymentToken?.symbol}`
       ] }),
-      /* @__PURE__ */ jsxs11("div", { className: "flex gap-1 items-center", children: [
-        /* @__PURE__ */ jsxs11(
+      /* @__PURE__ */ jsxs11("div", { className: "xpay-flex xpay-gap-1 xpay-items-center", children: [
+        route?.xSwapFees.expressDeliveryFee && !isGettingRoute && /* @__PURE__ */ jsxs11(
           "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__ */ jsx30(TimerIcon, {}),
-              expressChecked && !exceedsExpressDeliveryLimit ? "Fast ~ 30sec " : "Normal ~ 30min"
+              isExpressDeliveryPossible ? "Fast ~ 30sec " : "Normal ~ 30min"
             ]
           }
         ),
@@ -1564,39 +1600,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__ */ jsx30(ChevronUpIcon, {}) : /* @__PURE__ */ jsx30(ChevronDownIcon, {})
           }
         )
       ] })
     ] }),
-    feesDetailsShown && /* @__PURE__ */ jsxs11("div", { className: "flex w-full items-center justify-between gap-2", children: [
-      /* @__PURE__ */ jsxs11("div", { className: "flex flex-col text-[10px] gap-1", children: [
-        /* @__PURE__ */ jsxs11("div", { className: "flex justify-between font-medium text-white opacity-60 gap-1", children: [
+    feesDetailsShown && /* @__PURE__ */ jsxs11("div", { className: "xpay-flex xpay-w-full xpay-items-center xpay-justify-between xpay-gap-2", children: [
+      /* @__PURE__ */ jsxs11("div", { className: "xpay-flex xpay-flex-col xpay-text-[10px] xpay-gap-1", children: [
+        /* @__PURE__ */ jsxs11("div", { className: "xpay-flex xpay-justify-between xpay-font-medium xpay-text-white xpay-opacity-60 xpay-gap-1", children: [
           /* @__PURE__ */ jsx30("div", { children: "CCIP Fee:" }),
-          /* @__PURE__ */ jsx30("div", { className: "whitespace-nowrap", children: ` ${weiToHumanReadable({
+          /* @__PURE__ */ jsx30("div", { className: "xpay-whitespace-nowrap", children: ` ${weiToHumanReadable({
             amount: route?.xSwapFees.ccipFee || "0",
             decimals: 18,
             precisionFractionalPlaces: 5
           })} ${paymentToken?.symbol}` })
         ] }),
-        /* @__PURE__ */ jsxs11("div", { className: "flex justify-between font-medium text-white opacity-60 gap-1", children: [
+        /* @__PURE__ */ jsxs11("div", { className: "xpay-flex xpay-justify-between xpay-font-medium xpay-text-white xpay-opacity-60 xpay-gap-1", children: [
           /* @__PURE__ */ jsx30("div", { children: "Native Fee:" }),
-          /* @__PURE__ */ jsx30("div", { className: "whitespace-nowrap", children: ` ${weiToHumanReadable({
+          /* @__PURE__ */ jsx30("div", { className: "xpay-whitespace-nowrap", children: ` ${weiToHumanReadable({
             amount: route?.xSwapFees.xSwapFee.nativeFee || "0",
             decimals: 18,
             precisionFractionalPlaces: 5
           })} ${paymentToken?.symbol}` })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs11("div", { className: "flex flex-col text-[10px] gap-1", children: [
-        /* @__PURE__ */ jsxs11("div", { className: "flex justify-between font-medium text-white opacity-60 gap-1", children: [
+      /* @__PURE__ */ jsxs11("div", { className: "xpay-flex xpay-flex-col xpay-text-[10px] xpay-gap-1", children: [
+        /* @__PURE__ */ jsxs11("div", { className: "xpay-flex xpay-justify-between xpay-font-medium xpay-text-white xpay-opacity-60 xpay-gap-1", children: [
           /* @__PURE__ */ jsx30("div", { children: "Slippage:" }),
-          /* @__PURE__ */ jsx30("div", { className: "whitespace-nowrap", children: `${slippage}%` })
+          /* @__PURE__ */ jsx30("div", { className: "xpay-whitespace-nowrap", children: `${slippage}%` })
         ] }),
-        /* @__PURE__ */ jsxs11("div", { className: "flex justify-between font-medium text-white opacity-60 gap-1", children: [
+        /* @__PURE__ */ jsxs11("div", { className: "xpay-flex xpay-justify-between xpay-font-medium xpay-text-white xpay-opacity-60 xpay-gap-1", children: [
           /* @__PURE__ */ jsx30("div", { children: "Min amount out:" }),
-          /* @__PURE__ */ jsxs11("div", { className: "whitespace-nowrap", children: [
+          /* @__PURE__ */ jsxs11("div", { className: "xpay-whitespace-nowrap", children: [
             weiToHumanReadable({
               amount: route?.minAmountOut || "0",
               decimals: dstToken?.decimals || 18,
@@ -1612,7 +1648,7 @@ var FeesDetails = ({
 };
 
 // src/components/TxConfigForm/Summary.tsx
-import { useEffect as useEffect5, useMemo as useMemo3, useState as useState5 } from "react";
+import { useEffect as useEffect5, useMemo as useMemo4, useState as useState5 } from "react";
 
 // src/components/TxConfigForm/UsdPrice.tsx
 import { useEffect as useEffect4, useState as useState4 } from "react";
@@ -1637,11 +1673,23 @@ var UsdPrice = ({
       setUsdPrice(newUsdPrice);
     }
   }, [token, prices, amount]);
-  return /* @__PURE__ */ jsx31("div", { className: "opacity-60 py-4", children: loading ? /* @__PURE__ */ jsx31(Skeleton, { width: "w-12", height: "h-4" }) : token ? prices && prices[token.address] ? /* @__PURE__ */ jsx31("div", { children: `$${usdPrice}` }) : /* @__PURE__ */ jsx31(Alert, { desc: "Unknown price" }) : /* @__PURE__ */ jsx31(Fragment3, { children: "$0.00" }) });
+  return /* @__PURE__ */ jsx31("div", { className: "xpay-opacity-60 xpay-py-4", children: loading ? /* @__PURE__ */ jsx31(Skeleton, { width: "xpay-w-12", height: "xpay-h-4" }) : token ? prices && prices[token.address] ? /* @__PURE__ */ jsx31("div", { children: `$${usdPrice}` }) : /* @__PURE__ */ jsx31(Alert, { desc: "Unknown price" }) : /* @__PURE__ */ jsx31(Fragment3, { children: "$0.00" }) });
+};
+
+// src/components/UnknownTokenLogo/UnknownTokenLogo.tsx
+import { jsx as jsx32 } from "react/jsx-runtime";
+var UnknownTokenLogo = ({ tokenName, className }) => {
+  return /* @__PURE__ */ jsx32(
+    "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
-import { jsx as jsx32, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs12 } from "react/jsx-runtime";
 var Summary = ({
   isGettingRoute,
   route,
@@ -1649,7 +1697,7 @@ var Summary = ({
   dstChain
 }) => {
   const [prices, setPrices] = useState5();
-  const amountReadable = useMemo3(
+  const amountReadable = useMemo4(
     () => weiToHumanReadable({
       amount: route?.estAmountOut || "0",
       decimals: dstToken?.decimals || 18,
@@ -1664,34 +1712,44 @@ var Summary = ({
       );
     }
   }, [dstChain]);
-  return /* @__PURE__ */ jsxs12("div", { className: "flex flex-col globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4 relative", children: [
-    /* @__PURE__ */ jsxs12("div", { className: "flex justify-between", children: [
-      /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsx32("p", { className: "text-[rgba(255,255,255,0.6)] text-sm", children: "You receive" }),
-        isGettingRoute ? /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsxs12("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__ */ jsxs12("div", { className: "xpay-flex xpay-justify-between", children: [
+      /* @__PURE__ */ jsxs12("div", { className: "xpay-flex xpay-flex-col xpay-gap-1", children: [
+        /* @__PURE__ */ jsx33("p", { className: "xpay-text-[rgba(255,255,255,0.6)] xpay-text-sm", children: "You receive" }),
+        isGettingRoute ? /* @__PURE__ */ jsx33(
           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__ */ jsx32("div", { className: "flex gap-2 items-center text-white text-xl sm:text-3xl", children: amountReadable })
+        ) : /* @__PURE__ */ jsx33("div", { className: "xpay-flex xpay-gap-2 xpay-items-center xpay-text-white xpay-text-xl sm:xpay-text-3xl", children: amountReadable })
       ] }),
-      /* @__PURE__ */ jsxs12("div", { className: "flex flex-col items-end gap-1 text-sm", children: [
-        /* @__PURE__ */ jsxs12("div", { className: "flex justify-center items-center gap-1", children: [
-          /* @__PURE__ */ jsx32("div", { className: "w-4 sm:w-6 h-4 sm:h-6", children: /* @__PURE__ */ jsx32("img", { src: dstToken?.image, alt: dstToken?.name }) }),
-          /* @__PURE__ */ jsx32("p", { className: "text-base sm:text-xl", children: dstToken?.symbol })
+      /* @__PURE__ */ jsxs12("div", { className: "xpay-flex xpay-flex-col xpay-items-end xpay-gap-1 xpay-text-sm", children: [
+        /* @__PURE__ */ jsxs12("div", { className: "xpay-flex xpay-justify-center xpay-items-center xpay-gap-1", children: [
+          /* @__PURE__ */ jsx33("div", { className: "xpay-w-5 xpay-h-5", children: dstToken?.image ? /* @__PURE__ */ jsx33(
+            "img",
+            {
+              className: "xpay-w-5 xpay-h-5",
+              src: dstToken?.image,
+              alt: dstToken?.name
+            }
+          ) : /* @__PURE__ */ jsx33(UnknownTokenLogo, { tokenName: "?" }) }),
+          /* @__PURE__ */ jsx33("p", { className: "xpay-text-base sm:xpay-text-xl", children: dstToken?.name })
         ] }),
-        /* @__PURE__ */ jsxs12("div", { className: "flex justify-center items-center gap-1", children: [
-          /* @__PURE__ */ jsx32("p", { className: "text-[rgba(255,255,255,0.6)] text-right", children: "on " }),
-          /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-1 text-white", children: [
-            /* @__PURE__ */ jsx32("div", { className: "w-4 h-4", children: /* @__PURE__ */ jsx32("img", { src: dstChain?.image, alt: dstChain?.name }) }),
-            /* @__PURE__ */ jsx32("div", { children: dstChain?.displayName })
+        /* @__PURE__ */ jsxs12("div", { className: "xpay-flex xpay-justify-center xpay-items-center xpay-gap-1", children: [
+          /* @__PURE__ */ jsxs12("p", { className: "xpay-text-[rgba(255,255,255,0.6)] xpay-text-right", children: [
+            "on",
+            " "
+          ] }),
+          /* @__PURE__ */ jsxs12("div", { className: "xpay-flex xpay-items-center xpay-gap-1 xpay-text-white", children: [
+            /* @__PURE__ */ jsx33("div", { className: "xpay-w-4 xpay-h-4", children: /* @__PURE__ */ jsx33("img", { src: dstChain?.image, alt: dstChain?.name }) }),
+            /* @__PURE__ */ jsx33("div", { children: dstChain?.displayName })
           ] })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsx33(
       UsdPrice,
       {
         prices,
@@ -1701,17 +1759,17 @@ var Summary = ({
         type: "dst"
       }
     ),
-    /* @__PURE__ */ jsx32("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__ */ jsx32("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__ */ jsx32(ArrowDownIcon, {}) }) })
+    /* @__PURE__ */ jsx33("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__ */ jsx33("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__ */ jsx33(ArrowDownIcon, {}) }) })
   ] });
 };
 
 // src/components/TxConfigForm/SwapPanel.tsx
-import { useState as useState7, useEffect as useEffect6, useRef as useRef2, useMemo as useMemo6 } from "react";
+import { useState as useState7, useEffect as useEffect6, useRef as useRef2, useMemo as useMemo7 } from "react";
 
 // src/components/TxConfigForm/TokenPicker.tsx
-import { useState as useState6, useMemo as useMemo4 } from "react";
+import { useState as useState6, useMemo as useMemo5 } from "react";
 import { createPortal } from "react-dom";
-import { Fragment as Fragment4, jsx as jsx33, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx34, jsxs as jsxs13 } from "react/jsx-runtime";
 var TokenPicker = ({
   onCloseClick,
   tokens,
@@ -1721,7 +1779,6 @@ var TokenPicker = ({
   balances
 }) => {
   const [searchValue, setSearchValue] = useState6("");
-  const modalRoot = document.querySelector("#xswap-modal");
   const onBackdropClick = (e) => {
     e.stopPropagation();
     e.nativeEvent.stopImmediatePropagation();
@@ -1729,7 +1786,7 @@ var TokenPicker = ({
       onCloseClick();
     }
   };
-  const filteredTokens = useMemo4(() => {
+  const filteredTokens = useMemo5(() => {
     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()
@@ -1737,91 +1794,92 @@ var TokenPicker = ({
       (a, b) => a.priority < b.priority ? 1 : balances && balances[a.address] && balances[b.address] && balances[a.address]?.lte(balances[b.address] || "0") ? 1 : -1
     );
   }, [searchValue, tokens]);
-  return modalRoot ? createPortal(
-    /* @__PURE__ */ jsx33(
+  const xpayRoot2 = document.querySelector("#xpay-root");
+  return xpayRoot2 ? createPortal(
+    /* @__PURE__ */ jsx34(
       "div",
       {
         onClick: onBackdropClick,
-        className: "box-border fixed h-full w-full z-[999] top-0 left-0 bg-[rgba(0,0,0,0.8)] flex items-center justify-center p-5",
-        children: /* @__PURE__ */ jsxs13("div", { className: "relative bg-black rounded-3xl p-6 max-h-[70%] flex flex-col text-base text-white w-[452px] h-[70%] border border-solid border-[rgba(255,255,255,0.2)]", children: [
-          /* @__PURE__ */ jsx33(
+        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__ */ jsxs13("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__ */ jsx34(
             "div",
             {
               onClick: onCloseClick,
-              className: "absolute top-4 right-4 cursor-pointer",
-              children: /* @__PURE__ */ jsx33(CloseIcon, {})
+              className: "xpay-absolute xpay-top-4 xpay-right-4 xpay-cursor-pointer",
+              children: /* @__PURE__ */ jsx34(CloseIcon, {})
             }
           ),
-          /* @__PURE__ */ jsx33("p", { className: "text-base mb-4", children: "Pick a token" }),
-          /* @__PURE__ */ jsxs13("div", { className: "flex items-center border border-solid border-[rgba(255,255,255,0.1)] rounded-lg py-0 px-3 gap-2 bg-[rgba(15,15,15,1)]", children: [
-            /* @__PURE__ */ jsx33("div", { className: "w-6 h-6", children: /* @__PURE__ */ jsx33(SearchIcon, {}) }),
-            /* @__PURE__ */ jsx33(
+          /* @__PURE__ */ jsx34("p", { className: "xpay-text-base xpay-mb-4", children: "Pick a token" }),
+          /* @__PURE__ */ jsxs13("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__ */ jsx34("div", { className: "xpay-w-6 xpay-h-6", children: /* @__PURE__ */ jsx34(SearchIcon, {}) }),
+            /* @__PURE__ */ jsx34(
               "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__ */ jsx33("div", { className: "my-4 mx-0 flex flex-wrap gap-3", children: tokens?.filter((token) => token?.quickPick).map((token) => /* @__PURE__ */ jsxs13(
+          /* @__PURE__ */ jsx34("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__ */ jsxs13(
             "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__ */ jsx33("img", { src: token.image, alt: token.name, className: "w-5" }),
-                /* @__PURE__ */ jsx33("div", { className: "text-sm", children: token.symbol })
+                /* @__PURE__ */ jsx34(
+                  "img",
+                  {
+                    src: token.image,
+                    alt: token.name,
+                    className: "xpay-w-5"
+                  }
+                ),
+                /* @__PURE__ */ jsx34("div", { className: "xpay-text-sm", children: token.symbol })
               ]
             },
             token.address
           )) }),
-          /* @__PURE__ */ jsx33("div", { className: "h-[2px] my-0 mx-[-24px] w-[100%+48px] px-12 bg-[rgba(255,255,255,0.1)]" }),
-          /* @__PURE__ */ jsx33("div", { className: "overflow-y-scroll h-full mx-[-24px] w-[100%+48px] flex flex-col", children: filteredTokens && filteredTokens.length > 0 ? filteredTokens.map((token, index) => /* @__PURE__ */ jsxs13(
+          /* @__PURE__ */ jsx34("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__ */ jsx34("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__ */ jsxs13(
             "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__ */ jsx33(
-                  "img",
-                  {
-                    src: token.image,
-                    alt: token.name,
-                    className: "token-picker__all__logo"
-                  }
-                ) : /* @__PURE__ */ jsx33("div", { className: "flex items-center justify-center w-9 h-9 text-[15px] ml-1 rounded-full bg-[#272e40] text-[#e0e7fa]", children: token?.symbol.substring(0, 1) }),
-                /* @__PURE__ */ jsxs13("div", { className: "flex justify-between items-center gap-1 overflow-hidden grow", children: [
-                  /* @__PURE__ */ jsxs13("div", { className: "flex flex-col leading-[16px]", children: [
-                    /* @__PURE__ */ jsx33("div", { className: "overflow-hidden whitespace-nowrap text-ellipsis text-[15px]", children: token.name }),
-                    /* @__PURE__ */ jsx33("div", { className: "text-[#888] text-[11px]", children: token.symbol })
+                token.image ? /* @__PURE__ */ jsx34("img", { src: token.image, alt: token.name }) : /* @__PURE__ */ jsx34("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__ */ jsxs13("div", { className: "xpay-flex xpay-justify-between xpay-items-center xpay-gap-1 xpay-overflow-hidden xpay-grow", children: [
+                  /* @__PURE__ */ jsxs13("div", { className: "xpay-flex xpay-flex-col xpay-leading-[16px]", children: [
+                    /* @__PURE__ */ jsx34("div", { className: "xpay-overflow-hidden xpay-whitespace-nowrap xpay-text-ellipsis xpay-text-[15px]", children: token.name }),
+                    /* @__PURE__ */ jsx34("div", { className: "xpay-text-[#888] xpay-text-[11px]", children: token.symbol })
                   ] }),
-                  signer && /* @__PURE__ */ jsx33(Fragment4, { children: balances && balances[token.address] && token.decimals ? /* @__PURE__ */ jsx33("div", { className: "text-xs", children: weiToHumanReadable({
+                  signer && /* @__PURE__ */ jsx34(Fragment4, { children: balances && balances[token.address] && token.decimals ? /* @__PURE__ */ jsx34("div", { className: "xpay-text-xs", children: weiToHumanReadable({
                     amount: balances[token.address]?.toString() || "0",
                     decimals: token.decimals,
                     precisionFractionalPlaces: 4
-                  }) }) : /* @__PURE__ */ jsx33(Skeleton, { width: "w-12", height: "h-3" }) })
+                  }) }) : /* @__PURE__ */ jsx34(Skeleton, { width: "xpay-w-12", height: "xpay-h-3" }) })
                 ] })
               ]
             },
             `${index}_${token.address}`
-          )) : /* @__PURE__ */ jsx33("div", { className: "mt-4 flex justify-center", children: /* @__PURE__ */ jsx33("p", { className: "text-sm text-white", children: "No tokens found." }) }) })
+          )) : /* @__PURE__ */ jsx34("div", { className: "xpay-mt-4 xpay-flex xpay-justify-center", children: /* @__PURE__ */ jsx34("p", { className: "xpay-text-sm xpay-text-white", children: "No tokens found." }) }) })
         ] })
       }
     ),
-    modalRoot
+    xpayRoot2
   ) : null;
 };
 
 // src/components/TxConfigForm/ChainListElement.tsx
-import { jsx as jsx34, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs14 } from "react/jsx-runtime";
 var ChainListElement = ({
   chain,
   setSrcChain,
@@ -1833,27 +1891,27 @@ var ChainListElement = ({
     /* @__PURE__ */ jsxs14(
       "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__ */ jsx34("img", { width: 12, height: 12, src: chain.image, alt: chain.displayName }),
+          /* @__PURE__ */ jsx35("img", { width: 12, height: 12, src: chain.image, alt: chain.displayName }),
           chain.displayName
         ]
       }
     ),
-    index !== length - 1 && /* @__PURE__ */ jsx34("div", { className: "h-px mx-2 bg-[rgba(255,255,255,0.15)]" })
+    index !== length - 1 && /* @__PURE__ */ jsx35("div", { className: "xpay-h-px xpay-mx-2 xpay-bg-[rgba(255,255,255,0.15)]" })
   ] }, `${chain.ecosystem}-${chain.chainId}`);
 };
 
 // src/components/TxConfigForm/BalanceComponent.tsx
-import { useMemo as useMemo5 } from "react";
+import { useMemo as useMemo6 } from "react";
 import BigNumber3 from "bignumber.js";
-import { Fragment as Fragment5, jsx as jsx35, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx36, jsxs as jsxs15 } from "react/jsx-runtime";
 var BalanceComponent = ({ srcToken, balances }) => {
-  const balanceText = useMemo5(() => {
+  const balanceText = useMemo6(() => {
     if (!balances || !srcToken) return "0";
     if (balances[srcToken.address]?.toString() === "0") return "0";
     const fullHumanReadable = weiToHumanReadable({
@@ -1879,12 +1937,12 @@ var BalanceComponent = ({ srcToken, balances }) => {
       decimals: srcToken.decimals,
       precisionFractionalPlaces: 4
     }) : 0,
-    /* @__PURE__ */ jsx35("span", { className: "bg-gradient-to-r from-x_blue_light to-x_blue_dark bg-clip-text text-transparent", children: "Max" })
+    /* @__PURE__ */ jsx36("span", { className: "xpay-bg-gradient-to-r xpay-from-x_blue_light xpay-to-x_blue_dark xpay-bg-clip-text xpay-text-transparent", children: "Max" })
   ] });
 };
 
 // src/components/TxConfigForm/SwapPanel.tsx
-import { jsx as jsx36, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs16 } from "react/jsx-runtime";
 var SwapPanel = ({
   amount,
   setAmount,
@@ -1916,7 +1974,7 @@ var SwapPanel = ({
         weiToHumanReadable({
           amount: balances[srcToken.address]?.toString() || "0",
           decimals: srcToken.decimals,
-          precisionFractionalPlaces: 4
+          precisionFractionalPlaces: srcToken.decimals
         })
       );
   };
@@ -1926,18 +1984,18 @@ var SwapPanel = ({
       return () => document.removeEventListener("mousedown", handleClickOutside);
     }
   }, [chainListShown]);
-  const chainListOptions = useMemo6(
+  const chainListOptions = useMemo7(
     () => supportedChains.filter((chain) => chain.chainId !== srcChain?.chainId),
     [supportedChains, srcChain]
   );
-  return /* @__PURE__ */ jsxs16("div", { className: "flex justify-between globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4", children: [
-    /* @__PURE__ */ jsxs16("div", { className: "flex flex-col justify-between gap-2 overflow-hidden w-1/2", children: [
-      /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsx36("p", { className: "text-white opacity-60 text-xs sm:text-sm font-medium", children: "You pay" }),
-        /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsxs16("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__ */ jsxs16("div", { className: "xpay-flex xpay-flex-col xpay-justify-between xpay-gap-2 xpay-overflow-hidden xpay-w-1/2", children: [
+      /* @__PURE__ */ jsxs16("div", { className: "xpay-flex xpay-flex-col xpay-gap-1", children: [
+        /* @__PURE__ */ jsx37("p", { className: "xpay-text-white xpay-opacity-60 xpay-text-xs sm:xpay-text-sm xpay-font-medium", children: "You pay" }),
+        /* @__PURE__ */ jsx37(
           "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;
@@ -1953,7 +2011,7 @@ var SwapPanel = ({
           }
         )
       ] }),
-      /* @__PURE__ */ jsx36("div", { className: "flex items-center text-sm text-[rgba(255,255,255,0.6)]", children: /* @__PURE__ */ jsx36(
+      /* @__PURE__ */ jsx37("div", { className: "xpay-flex xpay-items-center xpay-text-sm xpay-text-[rgba(255,255,255,0.6)]", children: /* @__PURE__ */ jsx37(
         UsdPrice,
         {
           prices,
@@ -1965,16 +2023,16 @@ var SwapPanel = ({
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsxs16("div", { className: "flex flex-col relative items-end gap-2.5 w-1/2 text-xs", children: [
+    /* @__PURE__ */ jsxs16("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__ */ jsxs16(
         "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__ */ jsx36(
+            /* @__PURE__ */ jsx37(
               "img",
               {
                 height: 16,
@@ -1983,12 +2041,12 @@ var SwapPanel = ({
                 alt: srcToken?.name
               }
             ),
-            /* @__PURE__ */ jsx36("div", { children: srcToken?.symbol }),
-            /* @__PURE__ */ jsx36(DownArrowIcon, {})
+            /* @__PURE__ */ jsx37("div", { children: srcToken?.symbol }),
+            /* @__PURE__ */ jsx37(DownArrowIcon, {})
           ]
         }
       ),
-      tokenListShown && /* @__PURE__ */ jsx36(
+      tokenListShown && /* @__PURE__ */ jsx37(
         TokenPicker,
         {
           onCloseClick: () => setTokenListShown(false),
@@ -1999,22 +2057,22 @@ var SwapPanel = ({
           balances
         }
       ),
-      /* @__PURE__ */ jsx36(
+      /* @__PURE__ */ jsx37(
         "div",
         {
           onClick: handleMaxClick,
-          className: "flex gap-1 items-center font-medium text-white opacity-60 py-0.5 cursor-pointer",
-          children: signer && /* @__PURE__ */ jsx36(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__ */ jsx37(BalanceComponent, { balances, srcToken })
         }
       ),
       /* @__PURE__ */ jsxs16(
         "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__ */ jsx36(
+            /* @__PURE__ */ jsx37(
               "img",
               {
                 width: "16",
@@ -2023,17 +2081,17 @@ var SwapPanel = ({
                 alt: srcChain?.name
               }
             ),
-            /* @__PURE__ */ jsx36("div", { children: srcChain?.displayName }),
-            /* @__PURE__ */ jsx36(DownArrowIcon, {})
+            /* @__PURE__ */ jsx37("div", { children: srcChain?.displayName }),
+            /* @__PURE__ */ jsx37(DownArrowIcon, {})
           ]
         }
       ),
-      chainListShown && /* @__PURE__ */ jsx36(
+      chainListShown && /* @__PURE__ */ jsx37(
         "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__ */ jsx36(
+          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__ */ jsx37(
             ChainListElement,
             {
               index,
@@ -2050,30 +2108,30 @@ var SwapPanel = ({
 };
 
 // src/components/TxConfigForm/ErrorField.tsx
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 var ErrorField = ({ error }) => {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     "div",
     {
-      className: `flex justify-center mb-1 items-center w-full rounded-2xl bg-x_error_background border border-solid ${error.length > 0 ? "border-x_error_border" : "border-transparent"}`,
+      className: `xpay-flex xpay-justify-center xpay-mb-1 xpay-items-center xpay-w-full xpay-rounded-2xl xpay-bg-x_error_background xpay-border xpay-border-solid ${error.length > 0 ? "xpay-border-x_error_border" : "xpay-border-transparent"}`,
       children: error
     }
   );
 };
 
 // src/components/TxConfigForm/Description.tsx
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var Description = ({ description }) => {
-  return /* @__PURE__ */ jsx38("div", { className: "flex flex-col items-start rounded-lg px-4 py-2", children: /* @__PURE__ */ jsx38("div", { className: "w-full flex gap-4 items-start justify-between text-xl", children: description }) });
+  return /* @__PURE__ */ jsx39("div", { className: "xpay-flex xpay-flex-col xpay-items-start xpay-rounded-lg xpay-px-4 xpay-py-2", children: /* @__PURE__ */ jsx39("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
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var Button = ({ children, onClick, type, disabled }) => {
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40(
     "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,
@@ -2083,8 +2141,9 @@ var Button = ({ children, onClick, type, disabled }) => {
 };
 
 // src/components/TxConfigForm/Form.tsx
-import { jsx as jsx40, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs17 } from "react/jsx-runtime";
 var Form = ({
+  integratorId,
   dstChainId,
   dstTokenAddr,
   customContractCalls,
@@ -2131,14 +2190,24 @@ var Form = ({
     setDstChain(supportedChains.find((chain) => chain.chainId === dstChainId));
   }, [supportedChains, dstChainId]);
   useEffect7(() => {
-    setDstToken(
-      dstChain?.tokens.find(
+    (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]);
   useEffect7(() => {
-    if (srcChain && srcToken && dstChain && debouncedAmount && paymentToken && slippage) {
+    if (integratorId && srcChain && srcToken && dstChain && debouncedAmount && paymentToken && slippage) {
       setFormError("");
       const timeout = setTimeout(() => {
         setFormError("Getting Route is taking longer than usually");
@@ -2150,6 +2219,7 @@ var Form = ({
           `Configuration error: selected token ($${srcToken.symbol} ${srcToken.name}) has unknown decimals param.`
         );
       getRoute({
+        integratorId,
         fromAmount: ethers3.utils.parseUnits(debouncedAmount, srcToken.decimals).toString(),
         fromAddress: signer || ADDRESSES[srcChain.chainId].FeeCollector,
         fromChain: srcChain.chainId,
@@ -2218,10 +2288,10 @@ var Form = ({
   return /* @__PURE__ */ jsxs17(
     "form",
     {
-      className: "flex flex-col gap-2 z-10 my-0 p-2 md:p-4 rounded-3xl overflow-hidden font-light sm:w-x_desktop",
+      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__ */ jsx40(
+        /* @__PURE__ */ jsx41(
           TopBar,
           {
             signer,
@@ -2231,7 +2301,7 @@ var Form = ({
             onClose
           }
         ),
-        settingsShown && /* @__PURE__ */ jsx40(
+        settingsShown && /* @__PURE__ */ jsx41(
           Settings,
           {
             expressChecked,
@@ -2241,9 +2311,9 @@ var Form = ({
             setSlippage
           }
         ),
-        historyTabShown ? /* @__PURE__ */ jsx40(History, { signer, supportedChains }) : /* @__PURE__ */ jsxs17("div", { className: "flex flex-col gap-2", children: [
-          desc && /* @__PURE__ */ jsx40(Description, { description: desc }),
-          /* @__PURE__ */ jsx40(
+        historyTabShown ? /* @__PURE__ */ jsx41(History, { signer, supportedChains }) : /* @__PURE__ */ jsxs17("div", { className: "xpay-flex xpay-flex-col xpay-gap-2", children: [
+          desc && /* @__PURE__ */ jsx41(Description, { description: desc }),
+          /* @__PURE__ */ jsx41(
             SwapPanel,
             {
               amount,
@@ -2259,7 +2329,7 @@ var Form = ({
               setExceedsExpressDeliveryLimit
             }
           ),
-          /* @__PURE__ */ jsx40(
+          /* @__PURE__ */ jsx41(
             Summary,
             {
               isGettingRoute,
@@ -2268,7 +2338,7 @@ var Form = ({
               dstChain
             }
           ),
-          /* @__PURE__ */ jsx40(
+          /* @__PURE__ */ jsx41(
             FeesDetails,
             {
               route,
@@ -2282,8 +2352,8 @@ var Form = ({
               setFeesDetailsShown
             }
           ),
-          formError.length > 0 && /* @__PURE__ */ jsx40(ErrorField, { error: formError }),
-          signer && srcChain && srcChain.chainId !== account.chainId?.toString() ? /* @__PURE__ */ jsx40(Button, { type: "button", onClick: handleSwitchChain, children: "Switch chain" }) : /* @__PURE__ */ jsx40(
+          formError.length > 0 && /* @__PURE__ */ jsx41(ErrorField, { error: formError }),
+          signer && srcChain && srcChain.chainId !== account.chainId?.toString() ? /* @__PURE__ */ jsx41(Button, { type: "button", onClick: handleSwitchChain, children: "Switch chain" }) : /* @__PURE__ */ jsx41(
             Button,
             {
               type: "submit",
@@ -2298,8 +2368,9 @@ var Form = ({
 };
 
 // src/components/TxConfigForm/index.tsx
-import { jsx as jsx41, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs18 } from "react/jsx-runtime";
 var TxConfigForm = ({
+  integratorId,
   dstChainId,
   dstTokenAddr,
   customContractCalls,
@@ -2316,19 +2387,20 @@ var TxConfigForm = ({
     }
   };
   const queryClient = new QueryClient();
-  const wagmiConfig = useMemo7(
+  const wagmiConfig = useMemo8(
     () => getWagmiConfig(supportedChains),
     supportedChains
   );
-  return /* @__PURE__ */ jsx41(WagmiProvider, { config: wagmiConfig, children: /* @__PURE__ */ jsx41(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(WagmiProvider, { config: wagmiConfig, children: /* @__PURE__ */ jsx42(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx42(
     "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__ */ jsxs18("div", { className: "relative bg-black rounded-3xl overflow-auto text-white border-2 border-solid border-[rgba(255,255,255,0.1)]", children: [
-        /* @__PURE__ */ jsx41(
+      children: /* @__PURE__ */ jsxs18("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__ */ jsx42(
           Form,
           {
+            integratorId,
             dstChainId,
             dstTokenAddr,
             customContractCalls,
@@ -2338,12 +2410,13 @@ var TxConfigForm = ({
             onClose
           }
         ),
-        /* @__PURE__ */ jsx41(PoweredBy, {})
+        /* @__PURE__ */ jsx42(PoweredBy, {})
       ] })
     }
   ) }) });
 };
 var openTxConfigForm = async ({
+  integratorId,
   dstChainId,
   dstTokenAddr,
   customContractCalls,
@@ -2353,10 +2426,11 @@ var openTxConfigForm = async ({
   try {
     return await new Promise(async (resolve) => {
       await waitForInitialization();
-      xswapRoot.render(
-        /* @__PURE__ */ jsx41(
+      xpayRoot.render(
+        /* @__PURE__ */ jsx42(
           TxConfigForm,
           {
+            integratorId,
             dstChainId,
             dstTokenAddr,
             customContractCalls,
@@ -2364,10 +2438,10 @@ var openTxConfigForm = async ({
             supportedChains,
             onSubmit: (route) => {
               resolve(route);
-              xswapRoot.render("");
+              xpayRoot.render("");
             },
             onClose: () => {
-              xswapRoot.render("");
+              xpayRoot.render("");
             }
           }
         )
@@ -2379,93 +2453,106 @@ var openTxConfigForm = async ({
 };
 
 // src/components/TxStatusButton/index.tsx
-import { useMemo as useMemo8, useState as useState9 } from "react";
-import { Fragment as Fragment6, jsx as jsx42, jsxs as jsxs19 } from "react/jsx-runtime";
+import { useMemo as useMemo9, useState as useState9 } from "react";
+import { Fragment as Fragment6, jsx as jsx43, jsxs as jsxs19 } from "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] = useState9(false);
-  const background = useMemo8(
-    () => 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 background = useMemo9(
+    () => 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 = useMemo8(
-    () => isDone ? "border border-solid border-x_green_dark" : "border border-solid border-x_blue_dark",
+  const border = useMemo9(
+    () => isDone ? "xpay-border xpay-border-solid xpay-border-x_green_dark" : "xpay-border xpay-border-solid xpay-border-x_blue_dark",
     [isDone]
   );
-  return /* @__PURE__ */ jsxs19("div", { className: "flex gap-2", onClick: () => setIsWide((x) => !x), children: [
-    isWide && /* @__PURE__ */ jsxs19(
-      "div",
-      {
-        className: `flex items-center min-w-60 sm:w-[520px] text-white h-14 px-4 text-sm gap-3 rounded-xl ${background} ${border}`,
-        children: [
-          /* @__PURE__ */ jsxs19("div", { className: "flex justify-between flex-col gap-2 sm:gap-5 sm:flex-row w-full", children: [
-            /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx42(
-                "img",
-                {
-                  className: "w-5 h-5",
-                  src: fromChainImage,
-                  alt: "source chain"
-                }
-              ),
-              /* @__PURE__ */ jsx42("div", { children: fromChain }),
-              /* @__PURE__ */ jsx42("div", { className: "w-3.5 h-3.5", children: /* @__PURE__ */ jsx42(ArrowRightIcon, {}) }),
-              /* @__PURE__ */ jsx42("img", { className: "w-5 h-5", src: toChainImage, alt: "to chain" }),
-              /* @__PURE__ */ jsx42("div", { children: toChain })
-            ] }),
-            /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx42("div", { children: "Sent" }),
-              /* @__PURE__ */ jsx42("div", { children: fromAmount }),
-              /* @__PURE__ */ jsx42("div", { children: fromToken }),
-              /* @__PURE__ */ jsx42(
-                "img",
+  return /* @__PURE__ */ jsxs19(
+    "div",
+    {
+      className: "xpay-flex xpay-gap-2",
+      onClick: () => setIsWide((x) => !x),
+      children: [
+        isWide && /* @__PURE__ */ jsxs19(
+          "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__ */ jsxs19("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__ */ jsxs19("div", { className: "xpay-flex xpay-items-center xpay-gap-2", children: [
+                  /* @__PURE__ */ jsx43(
+                    "img",
+                    {
+                      className: "xpay-w-5 xpay-h-5",
+                      src: fromChainImage,
+                      alt: "source chain"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx43("div", { children: fromChain }),
+                  /* @__PURE__ */ jsx43("div", { className: "xpay-w-3.5 xpay-h-3.5", children: /* @__PURE__ */ jsx43(ArrowRightIcon, {}) }),
+                  /* @__PURE__ */ jsx43(
+                    "img",
+                    {
+                      className: "xpay-w-5 xpay-h-5",
+                      src: toChainImage,
+                      alt: "to chain"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx43("div", { children: toChain })
+                ] }),
+                /* @__PURE__ */ jsxs19("div", { className: "xpay-flex xpay-items-center xpay-gap-2", children: [
+                  /* @__PURE__ */ jsx43("div", { children: "Sent" }),
+                  /* @__PURE__ */ jsx43("div", { children: fromAmount }),
+                  /* @__PURE__ */ jsx43("div", { children: fromToken }),
+                  fromTokenImage ? /* @__PURE__ */ jsx43(
+                    "img",
+                    {
+                      className: "xpay-w-5 xpay-h-5",
+                      src: fromTokenImage,
+                      alt: "source token"
+                    }
+                  ) : /* @__PURE__ */ jsx43(UnknownTokenLogo, { tokenName: "?" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx43(
+                "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__ */ jsx43("div", { className: "xpay-w-3.5 xpay-h-3.5", children: /* @__PURE__ */ jsx43(ArrowUpRightIcon, {}) })
                 }
               )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx43(
+          "div",
+          {
+            className: `xpay-text-white xpay-rounded-xl xpay-cursor-pointer ${background} ${border}`,
+            children: /* @__PURE__ */ jsxs19("div", { className: "xpay-flex xpay-gap-2 xpay-items-center xpay-h-14 xpay-w-20 xpay-justify-center", children: [
+              /* @__PURE__ */ jsx43(ArrowLeftIcon, {}),
+              /* @__PURE__ */ jsx43("div", { className: "xpay-relative xpay-flex xpay-items-center xpay-justify-center xpay-w-9 xpay-h-9", children: isDone ? /* @__PURE__ */ jsx43("div", { className: "xpay-text-x_green xpay-w-5 xpay-h-5", children: /* @__PURE__ */ jsx43(CheckIcon, {}) }) : /* @__PURE__ */ jsxs19(Fragment6, { children: [
+                /* @__PURE__ */ jsx43("div", { className: "xpay-w-5 xpay-h-5", children: /* @__PURE__ */ jsx43(XSwapLogo, {}) }),
+                /* @__PURE__ */ jsx43("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__ */ jsx43(CircularProgressIcon, {}) })
+              ] }) })
             ] })
-          ] }),
-          /* @__PURE__ */ jsx42(
-            "a",
-            {
-              href: explorer,
-              target: "_blank",
-              rel: "noreferrer",
-              className: "no-underline cursor-pointer",
-              "aria-label": "Show the transaction in the chain explorer",
-              children: /* @__PURE__ */ jsx42("div", { className: "w-3.5 h-3.5", children: /* @__PURE__ */ jsx42(ArrowUpRightIcon, {}) })
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx42(
-      "div",
-      {
-        className: `text-white rounded-xl cursor-pointer ${background} ${border}`,
-        children: /* @__PURE__ */ jsxs19("div", { className: "flex gap-2 items-center h-14 w-20 justify-center", children: [
-          /* @__PURE__ */ jsx42(ArrowLeftIcon, {}),
-          /* @__PURE__ */ jsx42("div", { className: "relative flex items-center justify-center w-9 h-9", children: isDone ? /* @__PURE__ */ jsx42("div", { className: "text-x_green w-5 h-5", children: /* @__PURE__ */ jsx42(CheckIcon, {}) }) : /* @__PURE__ */ jsxs19(Fragment6, { children: [
-            /* @__PURE__ */ jsx42("div", { className: "w-5 h-5", children: /* @__PURE__ */ jsx42(XSwapLogo, {}) }),
-            /* @__PURE__ */ jsx42("div", { className: "absolute flex items-center justify-center top-0 left-0 right-0 bottom-0 text-white", children: /* @__PURE__ */ jsx42(CircularProgressIcon, {}) })
-          ] }) })
-        ] })
-      }
-    )
-  ] });
+          }
+        )
+      ]
+    }
+  );
 };
 var renderedTransactions = [];
 var addTransactionToRenderedTransactions = (transaction) => {
@@ -2487,25 +2574,71 @@ var updateTransactionDoneInRenderedTransactions = (txHash) => {
   }
 };
 var renderTxStatusButtons = () => {
-  const buttons = renderedTransactions.map((item) => /* @__PURE__ */ jsx42(TxStatusButton, { transaction: item }, item.txHash));
-  txStatusRoot.render(buttons);
+  const buttons = renderedTransactions.map((item) => /* @__PURE__ */ jsx43(TxStatusButton, { transaction: item }, item.txHash));
+  xpayTxStatusRoot.render(buttons);
 };
 
 // src/components/Skeleton/index.tsx
-import { jsx as jsx43 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
 var Skeleton = ({ width, height }) => {
-  return /* @__PURE__ */ jsx43("div", { className: `bg-current rounded animate-pulse ${width} ${height}` });
+  return /* @__PURE__ */ jsx44(
+    "div",
+    {
+      className: `xpay-bg-current xpay-rounded xpay-animate-pulse ${width} ${height}`
+    }
+  );
 };
 
 // src/services/integrations/monitoring.ts
 import retry from "async-retry";
-var monitorTransactionStatus = async (txChainId, txHash) => {
+
+// src/services/blockchain.ts
+import { ethers as ethers4 } from "ethers";
+var getCustomTokenData = async (chain, tokenAddress) => {
+  const rpcUrl = chain.publicRpcUrls[0];
+  const customTokenContract = new ethers4.Contract(
+    tokenAddress.toLowerCase(),
+    ERC20Abi,
+    ethers4.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] === ethers4.utils.id(MSG_SENT_EVENT_SIG);
+    return log.topics[0] === ethers5.utils.id(MSG_SENT_EVENT_SIG);
   });
   if (!messageSentEvent) {
     throw new Error(
@@ -2513,7 +2646,7 @@ var monitorTransactionStatus = async (txChainId, txHash) => {
     );
   }
   const messageId = messageSentEvent?.topics[1];
-  const iface = new ethers4.utils.Interface(MSG_SENT_EVENT_ABI);
+  const iface = new ethers5.utils.Interface(MSG_SENT_EVENT_ABI);
   const decodedMessageSentEvent = iface.parseLog(messageSentEvent);
   if (!decodedMessageSentEvent) {
     throw new Error(
@@ -2523,9 +2656,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()
   );
@@ -2533,19 +2673,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}`
   };
@@ -2555,16 +2696,16 @@ var monitorTransactionStatus = async (txChainId, txHash) => {
   if (!xSwapRouterOnDestinationAddress) {
     throw new Error(`Unknown destination XSwapRouter!`);
   }
-  const xSwapRouterOnDestination = new ethers4.Contract(
+  const xSwapRouterOnDestination = new ethers5.Contract(
     xSwapRouterOnDestinationAddress,
     MSG_RECEIVED_EVENT_ABI,
-    ethers4.getDefaultProvider(
+    ethers5.getDefaultProvider(
       supportedChains.find((chain) => chain.chainId === dstChainId)?.publicRpcUrls[0]
     )
   );
   const msgReceivedEventFilter = {
     address: xSwapRouterOnDestinationAddress,
-    topics: [ethers4.utils.id(MSG_RECEIVED_EVENT_SIG), messageId]
+    topics: [ethers5.utils.id(MSG_RECEIVED_EVENT_SIG), messageId]
   };
   const onSuccess = async () => {
     updateTransactionDoneInRenderedTransactions(txHash);
@@ -2575,6 +2716,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) => {
@@ -2582,7 +2728,7 @@ var getTxReceipt = async (txChainId, txHash) => {
     const chain = (await getChains()).find(
       (chain2) => chain2.chainId === txChainId
     );
-    const provider = new ethers4.providers.JsonRpcProvider(
+    const provider = new ethers5.providers.JsonRpcProvider(
       chain?.publicRpcUrls[0]
     );
     return await retry(async () => {
@@ -2600,7 +2746,8 @@ var getTxReceipt = async (txChainId, txHash) => {
 };
 
 // src/services/integrations/transactions.ts
-var getSwapTx = async ({
+var openTransactionModal = async ({
+  integratorId,
   dstChain,
   dstToken,
   customContractCalls = [],
@@ -2611,6 +2758,7 @@ var getSwapTx = async ({
   );
   validateSwapTxData(supportedChains, dstChain, dstToken);
   const route = await openTxConfigForm({
+    integratorId,
     dstChainId: dstChain,
     dstTokenAddr: dstToken,
     customContractCalls,
@@ -2626,19 +2774,27 @@ 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;
 export {
   ContractName,
   Ecosystem,
   Environment,
   Web3Environment,
   XSwapCallType,
-  getSwapTx,
-  monitorTransactionStatus
+  src_default as default,
+  openTransactionModal,
+  renderTxStatus
 };