@xswap-link/sdk 0.2.5 → 0.2.6

package/dist/index.js

@@ -59,7 +59,7 @@ var xswap_config_default = {
 };
 
 // package.json
-var version = "0.2.5";
+var version = "0.2.6";
 
 // src/components/WaitingForInit/index.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -86,19 +86,19 @@ var WaitingForInit = () => {
 
 // src/config/init.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var initIndicatorRoot;
-var xswapRoot;
-var txStatusRoot;
+var xpayRoot;
+var xpayInitIndicatorRoot;
+var xpayTxStatusRoot;
 var initCompleted = false;
 var initDocument = () => {
   if (typeof document === "undefined") {
     throw new Error("Can't render XPay components from server side.");
   }
-  createInitIndicatorRoot();
+  createXPayInitIndicatorRoot();
   Promise.all([
     createStyleElement(),
-    createXSwapRoot(),
-    createTxStatusRoot()
+    createXPayRoot(),
+    createXPayTxStatusRoot()
   ]).then(() => {
     initCompleted = true;
   });
@@ -123,27 +123,28 @@ var createStyleElement = async () => {
   style.textContent = text;
   document.body.appendChild(style);
 };
-var createXSwapRoot = async () => {
+var createXPayRoot = async () => {
   const xswapElement = document.createElement("div");
-  xswapElement.setAttribute("id", "xswap-modal");
+  xswapElement.setAttribute("id", "xpay-root");
+  xswapElement.setAttribute("class", "xpay");
   document.body.appendChild(xswapElement);
-  xswapRoot = (0, import_client.createRoot)(xswapElement);
+  xpayRoot = (0, import_client.createRoot)(xswapElement);
 };
-var createTxStatusRoot = async () => {
+var createXPayTxStatusRoot = async () => {
   const txStatusElement = document.createElement("div");
-  txStatusElement.setAttribute("id", "xswap-tx-status");
-  txStatusElement.setAttribute("class", "xswap-tx-status");
+  txStatusElement.setAttribute("id", "xpay-tx-status");
+  txStatusElement.setAttribute("class", "xpay-tx-status");
   document.body.appendChild(txStatusElement);
-  txStatusRoot = (0, import_client.createRoot)(txStatusElement);
+  xpayTxStatusRoot = (0, import_client.createRoot)(txStatusElement);
 };
-var createInitIndicatorRoot = () => {
+var createXPayInitIndicatorRoot = () => {
   const initIndicatorElement = document.createElement("div");
-  initIndicatorElement.setAttribute("id", "xswap-init-indicator");
+  initIndicatorElement.setAttribute("id", "xpay-init-indicator");
   document.body.appendChild(initIndicatorElement);
-  initIndicatorRoot = (0, import_client.createRoot)(initIndicatorElement);
+  xpayInitIndicatorRoot = (0, import_client.createRoot)(initIndicatorElement);
 };
 var displayInitIndicator = (display) => {
-  display ? initIndicatorRoot.render(/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(WaitingForInit, {})) : initIndicatorRoot.render("");
+  display ? xpayInitIndicatorRoot.render(/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(WaitingForInit, {})) : xpayInitIndicatorRoot.render("");
 };
 
 // src/services/api.ts
@@ -706,7 +707,7 @@ var import_ethers6 = require("ethers");
 // src/components/Alert/index.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var Alert = ({ desc }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "border border-solid border-x_alert rounded-3xl text-x_alert_light text-xs py-0.5 px-2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "xpay-border xpay-border-solid xpay-border-x_alert xpay-rounded-3xl xpay-text-x_alert_light xpay-text-xs xpay-py-0.5 xpay-px-2", children: [
     "\u26A0\uFE0F ",
     desc
   ] });
@@ -878,7 +879,7 @@ var CircularProgressIcon = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     "svg",
     {
-      className: "animate-spin-slow text-white",
+      className: "animate-spin-slow xpay-text-white",
       width: "33",
       height: "33",
       viewBox: "0 0 33 33",
@@ -1193,8 +1194,8 @@ var XSwapLogo = () => {
 // src/components/TxConfigForm/PoweredBy.tsx
 var import_jsx_runtime26 = require("react/jsx-runtime");
 var PoweredBy = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex justify-center items-center gap-2 my-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-x_grey", children: "Powered by" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "xpay-flex xpay-justify-center xpay-items-center xpay-gap-2 xpay-my-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "xpay-text-x_grey", children: "Powered by" }),
     /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(XSwapBadgeIcon, {}),
     /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: "\u2715" }),
     /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ChainlinkCCIPIcon, {})
@@ -1275,13 +1276,13 @@ var HistoryCard = ({ transaction, supportedChains }) => {
   const targetChainData = supportedChains.find(
     (chain) => chain.chainId === transaction.targetChainId
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-col globalBorder rounded-xl bg-[rgb(15,15,15)] text-white text-xs sm:text-sm p-4 gap-3 mb-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex w-full items-center justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "text-sm sm:text-base", children: date }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center", children: [
-        transaction.status === "IN_PROGRESS" && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "text-[rgb(250,200,100)]", children: "In progress" }) }),
-        transaction.status === "DONE" && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "text-[rgb(100,200,100)]", children: "Done" }) }),
-        transaction.status === "REVERTED" && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "text-[rgb(255,100,100)]", children: "Reverted" }) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-global-border xpay-rounded-xl xpay-bg-[rgb(15,15,15)] xpay-text-white xpay-text-xs sm:xpay-text-sm xpay-p-4 xpay-gap-3 xpay-mb-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "xpay-flex xpay-w-full xpay-items-center xpay-justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "xpay-text-sm sm:xpay-text-base", children: date }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "xpay-flex xpay-items-center", children: [
+        transaction.status === "IN_PROGRESS" && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "xpay-flex xpay-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "xpay-text-[rgb(250,200,100)]", children: "In progress" }) }),
+        transaction.status === "DONE" && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "xpay-flex xpay-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "xpay-text-[rgb(100,200,100)]", children: "Done" }) }),
+        transaction.status === "REVERTED" && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "xpay-flex xpay-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "xpay-text-[rgb(255,100,100)]", children: "Reverted" }) }),
         /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           "a",
           {
@@ -1290,65 +1291,65 @@ var HistoryCard = ({ transaction, supportedChains }) => {
             )?.transactionExplorer}/${transaction.hash}`,
             target: "_blank",
             rel: "noreferrer",
-            className: "ml-2 no-underline",
+            className: "xpay-ml-2 xpay-no-underline",
             "aria-label": "Show the transaction in the chain explorer",
-            children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "w-3.5 h-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ArrowUpRightIcon, {}) })
+            children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "xpay-w-3.5 xpay-h-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ArrowUpRightIcon, {}) })
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex justify-between flex-wrap gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "xpay-flex xpay-justify-between xpay-flex-wrap xpay-gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "xpay-flex xpay-items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "xpay-flex xpay-items-center", children: [
           /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             "img",
             {
               src: sourceChainData?.image,
               alt: `${sourceChainData?.name} logo`,
-              className: "w-5 h-5 mr-1"
+              className: "xpay-w-5 xpay-h-5 xpay-mr-1"
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { children: sourceChainData?.displayName })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "w-3.5 h-3.5 my-0 mx-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ArrowRightIcon, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "xpay-w-3.5 xpay-h-3.5 xpay-my-0 xpay-mx-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ArrowRightIcon, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "xpay-flex xpay-items-center", children: [
           /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             "img",
             {
               src: targetChainData?.image,
               alt: `${targetChainData?.name} logo`,
-              className: "w-5 h-5 mr-1"
+              className: "xpay-w-5 xpay-h-5 xpay-mr-1"
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { children: targetChainData?.displayName })
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex items-center mb-2 last:mb-0", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center flex-wrap", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "xpay-flex xpay-items-center xpay-mb-2 last:xpay-mb-0", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "xpay-flex xpay-items-center xpay-flex-wrap", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "xpay-flex xpay-items-center", children: [
           Number(transferredAmount) < MINIMUM_DISPLAYED_TOKEN_AMOUNT ? `<${MINIMUM_DISPLAYED_TOKEN_AMOUNT}` : transferredAmount,
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "ml-1", children: tokenData?.symbol }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "xpay-ml-1", children: tokenData?.symbol }),
           tokenData?.image ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             "img",
             {
               src: tokenData?.image,
               alt: tokenData?.name || "",
-              className: "w-5 h-5 ml-1"
+              className: "xpay-w-5 xpay-h-5 xpay-ml-1"
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex items-center justify-center w-5 h-5 text-[10px] ml-1 rounded-full bg-[#272e40] text-[#e0e7fa]", children: tokenData?.symbol.substring(0, 1) })
+          ) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "xpay-flex xpay-items-center xpay-justify-center xpay-w-5 xpay-h-5 xpay-text-[10px] xpay-ml-1 xpay-rounded-full xpay-bg-[#272e40] xpay-text-[#e0e7fa]", children: tokenData?.symbol.substring(0, 1) })
         ] }),
         transaction.tokenOutAddress && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "w-3.5 h-3.5 my-0 mx-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ArrowRightIcon, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "xpay-w-3.5 xpay-h-3.5 xpay-my-0 xpay-mx-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ArrowRightIcon, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "xpay-flex xpay-items-center", children: [
             Number(receivedAmount) < 1e-4 ? "<0.0001" : receivedAmount,
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "ml-1", children: tokenOutData?.symbol }),
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "xpay-ml-1", children: tokenOutData?.symbol }),
             tokenOutData?.image ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               "img",
               {
                 src: tokenOutData?.image,
                 alt: tokenOutData?.name || "",
-                className: "w-5 h-5 ml-1"
+                className: "xpay-w-5 xpay-h-5 xpay-ml-1"
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex items-center justify-center w-5 h-5 text-[10px] ml-1 rounded-full bg-[#272e40] text-[#e0e7fa]", children: tokenData?.symbol.substring(0, 1) })
+            ) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "xpay-flex xpay-items-center xpay-justify-center xpay-w-5 xpay-h-5 xpay-text-[10px] xpay-ml-1 xpay-rounded-full xpay-bg-[#272e40] xpay-text-[#e0e7fa]", children: tokenData?.symbol.substring(0, 1) })
           ] })
         ] })
       ] }) })
@@ -1429,10 +1430,10 @@ var History = ({ signer, supportedChains }) => {
     return () => clearInterval(timer);
   }, [signer, fetchHistory, getHistory, historyLoadedOnce]);
   if (!signer)
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex items-center justify-center w-full h-[30vh]", children: "Connect a wallet to browse history" });
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex items-center justify-center w-full", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "w-full h-96 overflow-scroll overflow-x-hidden", children: [
-    fetchedHistory?.length === 0 && historyLoadedOnce && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "w-full text-center py-4 px-0 text-[rgb(158,158,158)]", children: "Your history is empty..." }),
-    !fetchedHistory && !historyLoadedOnce && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex w-full h-full items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CircularProgressIcon, {}) }),
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "xpay-flex xpay-items-center xpay-justify-center xpay-w-full xpay-h-[30vh]", children: "Connect a wallet to browse history" });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "xpay-flex xpay-items-center xpay-justify-center xpay-w-full", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "xpay-w-full xpay-h-96 xpay-overflow-scroll xpay-overflow-x-hidden", children: [
+    fetchedHistory?.length === 0 && historyLoadedOnce && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "xpay-w-full xpay-text-center xpay-py-4 xpay-px-0 xpay-text-[rgb(158,158,158)]", children: "Your history is empty..." }),
+    !fetchedHistory && !historyLoadedOnce && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "xpay-flex xpay-w-full xpay-h-full xpay-items-center xpay-justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CircularProgressIcon, {}) }),
     fetchedHistory?.map((transaction, index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       HistoryCard,
       {
@@ -1453,26 +1454,26 @@ var TopBar = ({
   historyTabShown,
   onClose
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex w-full justify-between items-center mx-auto p-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "rounded-lg text-[rgba(255,255,255,0.6)] text-xs sm:text-base whitespace-nowrap", children: signer ? `Connected wallet: ${shortAddress(signer)}` : `Wallet disconnected` }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex gap-2 justify-center items-center", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "xpay-flex xpay-w-full xpay-justify-between xpay-items-center xpay-mx-auto xpay-p-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "xpay-rounded-lg xpay-text-[rgba(255,255,255,0.6)] xpay-text-xs sm:xpay-text-base xpay-whitespace-nowrap", children: signer ? `Connected wallet: ${shortAddress(signer)}` : `Wallet disconnected` }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "xpay-flex xpay-gap-2 xpay-justify-center xpay-items-center", children: [
       !historyTabShown && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         "div",
         {
           onClick: () => setSettingsShown(true),
-          className: "flex items-center text-xs gap-1 cursor-pointer",
-          children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "w-7 h-7 rounded-full bg-gradient-to-r from-x_blue_light to-x_blue_dark flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SettingsIcon, {}) })
+          className: "xpay-flex xpay-items-center xpay-text-xs xpay-gap-1 xpay-cursor-pointer",
+          children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "xpay-w-7 xpay-h-7 xpay-rounded-full xpay-bg-gradient-to-r xpay-from-x_blue_light xpay-to-x_blue_dark xpay-flex xpay-items-center xpay-justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SettingsIcon, {}) })
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         "div",
         {
           onClick: () => setHistoryTabShown((x) => !x),
-          className: "flex items-center text-sm gap-1 cursor-pointer",
-          children: !historyTabShown ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "w-7 h-7 rounded-full bg-gradient-to-r from-x_blue_light to-x_blue_dark flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(HistoryIcon, {}) }) }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { children: "Back" })
+          className: "xpay-flex xpay-items-center xpay-text-sm xpay-gap-1 xpay-cursor-pointer",
+          children: !historyTabShown ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "xpay-w-7 xpay-h-7 xpay-rounded-full xpay-bg-gradient-to-r xpay-from-x_blue_light xpay-to-x_blue_dark xpay-flex xpay-items-center xpay-justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(HistoryIcon, {}) }) }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { children: "Back" })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "cursor-pointer text-white", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CloseIcon, {}) })
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "xpay-cursor-pointer xpay-text-white", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CloseIcon, {}) })
     ] })
   ] });
 };
@@ -1496,53 +1497,53 @@ var Settings = ({
       );
     }
   }, [slippageActivePresetIndex, usingSlippageInput]);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "absolute w-[310px] right-0 top-[46px] z-10 bg-black border border-solid border-[rgba(54,129,198,1)] p-4 rounded-xl", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-col gap-4 justify-between", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "text-base", children: "Settings" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "xpay-absolute xpay-w-[310px] xpay-right-0 xpay-top-[46px] xpay-z-10 xpay-bg-black xpay-border xpay-border-solid xpay-border-[rgba(54,129,198,1)] xpay-p-4 xpay-rounded-xl", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-gap-4 xpay-justify-between", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "xpay-flex xpay-justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "xpay-text-base", children: "Settings" }),
       /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         "div",
         {
-          className: "cursor-pointer",
+          className: "xpay-cursor-pointer",
           onClick: () => setSettingsShown(false),
           children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CloseIcon, {})
         }
       )
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex gap-2 items-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "text-sm text-[rgba(255,255,255,0.6)]", children: "Express delivery" }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "xpay-flex xpay-gap-2 xpay-items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "xpay-text-sm xpay-text-[rgba(255,255,255,0.6)]", children: "Express delivery" }),
         /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
           "span",
           {
-            className: "inline-flex w-14 h-9 p-3 relative align-middle box-border overflow-hidden cursor-pointer",
+            className: "xpay-inline-flex xpay-w-14 xpay-h-9 xpay-p-3 xpay-relative xpay-align-middle xpay-box-border xpay-overflow-hidden xpay-cursor-pointer",
             onClick: () => {
               setExpressChecked((x) => !x);
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "h-full, w-full rounded-lg bg-[rgba(255,255,255,0.3)]" }),
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "xpay-h-full, xpay-w-full xpay-rounded-lg xpay-bg-[rgba(255,255,255,0.3)]" }),
               /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                 "span",
                 {
-                  className: `transition-all w-5 h-5 rounded-full absolute translate-y-[-4px] 
-          ${expressChecked ? "translate-x-[12px] bg-x_blue" : "bg-white"} `
+                  className: `xpay-transition-all xpay-w-5 xpay-h-5 xpay-rounded-full xpay-absolute xpay-translate-y-[-4px] 
+          ${expressChecked ? "xpay-translate-x-[12px] xpay-bg-x_blue" : "xpay-bg-white"} `
                 }
               )
             ]
           }
         ) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex gap-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "min-w-[26px] min-h-[26px] text-[#ffa726]", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(InfoIcon, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "text-xs text-left", children: "Express delivery is a special feature of XSwap that reduces transaction time across chains to around 30 seconds. It is currently available for swaps below a value of $ 1000 USD." })
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "xpay-flex xpay-gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "xpay-min-w-[26px] xpay-min-h-[26px] xpay-text-[#ffa726]", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(InfoIcon, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "xpay-text-xs xpay-text-left", children: "Express delivery is a special feature of XSwap that reduces transaction time across chains to around 30 seconds. It is currently available for swaps below a value of $ 1000 USD." })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-col gap-2 ", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: " text-[rgba(255,255,255,0.6)] text-sm", children: "Slippage" }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex items-center bg-[rgba(15,15,15,1)] p-1 globalBorder rounded-xl", children: SLIPPAGE_PRESETS.map((preset, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "xpay-text-[rgba(255,255,255,0.6)] xpay-text-sm", children: "Slippage" }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "xpay-flex xpay-gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "xpay-flex xpay-items-center xpay-bg-[rgba(15,15,15,1)] p-1 xpay-global-border xpay-rounded-xl", children: SLIPPAGE_PRESETS.map((preset, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           "div",
           {
-            className: `transition-all cursor-pointer block rounded-lg p-2 border-none text-sm leading-[10px] ${index === slippageActivePresetIndex && !usingSlippageInput ? "text-white" : "text-[rgba(255,255,255,0.2)]"} ${index === slippageActivePresetIndex && !usingSlippageInput ? "bg-gradient-to-r from-[#3681c6] to-[#2b4a9d]" : ""}`,
+            className: `xpay-transition-all xpay-cursor-pointer xpay-block xpay-rounded-lg xpay-p-2 xpay-border-none xpay-text-sm xpay-leading-[10px] ${index === slippageActivePresetIndex && !usingSlippageInput ? "xpay-text-white" : "xpay-text-[rgba(255,255,255,0.2)]"} ${index === slippageActivePresetIndex && !usingSlippageInput ? "xpay-bg-gradient-to-r xpay-from-[#3681c6] xpay-to-[#2b4a9d]" : ""}`,
             onClick: () => {
               setUsingSlippageInput(false);
               setSlippageActivePresetIndex(index);
@@ -1551,11 +1552,11 @@ var Settings = ({
           },
           index
         )) }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "bg-[rgba(39,39,39,1)] p-2 border border-solid border-[rgba(82,82,82,1)] rounded-xl text-white flex items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "xpay-bg-[rgba(39,39,39,1)] xpay-p-2 xpay-border xpay-border-solid xpay-border-[rgba(82,82,82,1)] xpay-rounded-xl xpay-text-white xpay-flex xpay-items-center", children: [
           /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             "input",
             {
-              className: "text-white border-none bg-[rgba(39,39,39,1)] w-10 placeholder:text-[rgba(255,255,255,0.2)] focus:outline-none text-sm leading-none",
+              className: "xpay-text-white xpay-border-none xpay-bg-[rgba(39,39,39,1)] xpay-w-10 placeholder:xpay-text-[rgba(255,255,255,0.2)] focus:xpay-outline-none xpay-text-sm xpay-leading-none",
               placeholder: "1.5",
               value: usingSlippageInput ? slippage : "",
               onChange: (e) => {
@@ -1574,9 +1575,9 @@ var Settings = ({
           /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PercentageIcon, {})
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex gap-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "min-w-[26px] min-h-[26px] text-[#ffa726]", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(InfoIcon, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "text-xs text-left", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "xpay-flex xpay-gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "xpay-min-w-[26px] xpay-min-h-[26px] xpay-text-[#ffa726]", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(InfoIcon, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "xpay-text-xs xpay-text-left", children: [
           "Slippage is the price variation you are willing to accept in the event that the price of the trade changes while it is processing.",
           /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("br", {}),
           " ",
@@ -1605,12 +1606,12 @@ var FeesDetails = ({
   const isExpressDeliveryPossible = (0, import_react5.useMemo)(() => {
     return expressChecked && !exceedsExpressDeliveryLimit;
   }, [expressChecked, exceedsExpressDeliveryLimit]);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col gap-3 globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-2 sm:p-4 mb-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex w-full items-center justify-between text-xs sm:text-sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center gap-1 font-medium text-white opacity-60", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-gap-3 xpay-global-border xpay-rounded-lg xpay-bg-[rgba(15,15,15,1)] xpay-p-2 sm:xpay-p-4 xpay-mb-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "xpay-flex xpay-w-full xpay-items-center xpay-justify-between xpay-text-xs sm:xpay-text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "xpay-flex xpay-items-center xpay-gap-1 xpay-font-medium xpay-text-white xpay-opacity-60", children: [
         /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CoinsIcon, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "mr-1", children: "Fees:" }),
-        isGettingRoute ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Skeleton, { width: "w-20", height: "h-4" }) : ` ${weiToHumanReadable({
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "xpay-mr-1", children: "Fees:" }),
+        isGettingRoute ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Skeleton, { width: "xpay-w-20", height: "xpay-h-4" }) : ` ${weiToHumanReadable({
           amount: safeBigNumberFrom(
             route?.xSwapFees.xSwapFee.nativeFee || "0"
           ).add(safeBigNumberFrom(route?.xSwapFees.ccipFee || "0")).add(
@@ -1620,11 +1621,11 @@ var FeesDetails = ({
           precisionFractionalPlaces: 5
         })} ${paymentToken?.symbol}`
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex gap-1 items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "xpay-flex xpay-gap-1 xpay-items-center", children: [
         route?.xSwapFees.expressDeliveryFee && !isGettingRoute && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
           "div",
           {
-            className: `flex gap-1 items-center font-medium ${isExpressDeliveryPossible ? "text-x_green" : "text-white opacity-60"}`,
+            className: `xpay-flex xpay-gap-1 xpay-items-center xpay-font-medium ${isExpressDeliveryPossible ? "xpay-text-x_green" : "xpay-text-white xpay-opacity-60"}`,
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TimerIcon, {}),
               isExpressDeliveryPossible ? "Fast ~ 30sec " : "Normal ~ 30min"
@@ -1635,39 +1636,39 @@ var FeesDetails = ({
           "div",
           {
             onClick: () => setFeesDetailsShown((x) => !x),
-            className: "font-medium text-white opacity-60 cursor-pointer flex items-center w-[15px] h-[9px]",
+            className: "xpay-font-medium xpay-text-white xpay-opacity-60 xpay-cursor-pointer xpay-flex xpay-items-center xpay-w-[15px] xpay-h-[9px]",
             children: feesDetailsShown ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ChevronUpIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ChevronDownIcon, {})
           }
         )
       ] })
     ] }),
-    feesDetailsShown && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex w-full items-center justify-between gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col text-[10px] gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex justify-between font-medium text-white opacity-60 gap-1", children: [
+    feesDetailsShown && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "xpay-flex xpay-w-full xpay-items-center xpay-justify-between xpay-gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-text-[10px] xpay-gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "xpay-flex xpay-justify-between xpay-font-medium xpay-text-white xpay-opacity-60 xpay-gap-1", children: [
           /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { children: "CCIP Fee:" }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "whitespace-nowrap", children: ` ${weiToHumanReadable({
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "xpay-whitespace-nowrap", children: ` ${weiToHumanReadable({
             amount: route?.xSwapFees.ccipFee || "0",
             decimals: 18,
             precisionFractionalPlaces: 5
           })} ${paymentToken?.symbol}` })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex justify-between font-medium text-white opacity-60 gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "xpay-flex xpay-justify-between xpay-font-medium xpay-text-white xpay-opacity-60 xpay-gap-1", children: [
           /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { children: "Native Fee:" }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "whitespace-nowrap", children: ` ${weiToHumanReadable({
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "xpay-whitespace-nowrap", children: ` ${weiToHumanReadable({
             amount: route?.xSwapFees.xSwapFee.nativeFee || "0",
             decimals: 18,
             precisionFractionalPlaces: 5
           })} ${paymentToken?.symbol}` })
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col text-[10px] gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex justify-between font-medium text-white opacity-60 gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-text-[10px] xpay-gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "xpay-flex xpay-justify-between xpay-font-medium xpay-text-white xpay-opacity-60 xpay-gap-1", children: [
           /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { children: "Slippage:" }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "whitespace-nowrap", children: `${slippage}%` })
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "xpay-whitespace-nowrap", children: `${slippage}%` })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex justify-between font-medium text-white opacity-60 gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "xpay-flex xpay-justify-between xpay-font-medium xpay-text-white xpay-opacity-60 xpay-gap-1", children: [
           /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { children: "Min amount out:" }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "whitespace-nowrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "xpay-whitespace-nowrap", children: [
             weiToHumanReadable({
               amount: route?.minAmountOut || "0",
               decimals: dstToken?.decimals || 18,
@@ -1708,7 +1709,7 @@ var UsdPrice = ({
       setUsdPrice(newUsdPrice);
     }
   }, [token, prices, amount]);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "opacity-60 py-4", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Skeleton, { width: "w-12", height: "h-4" }) : token ? prices && prices[token.address] ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { children: `$${usdPrice}` }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Alert, { desc: "Unknown price" }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children: "$0.00" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "xpay-opacity-60 xpay-py-4", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Skeleton, { width: "xpay-w-12", height: "xpay-h-4" }) : token ? prices && prices[token.address] ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { children: `$${usdPrice}` }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Alert, { desc: "Unknown price" }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children: "$0.00" }) });
 };
 
 // src/components/UnknownTokenLogo/UnknownTokenLogo.tsx
@@ -1717,7 +1718,7 @@ var UnknownTokenLogo = ({ tokenName, className }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     "div",
     {
-      className: `w-5 h-5 rounded-full bg-white shadow-sm flex items-center justify-center text-black ${className}`,
+      className: `xpay-w-5 xpay-h-5 xpay-rounded-full xpay-bg-white xpay-shadow-sm xpay-flex xpay-items-center xpay-justify-center xpay-text-black ${className}`,
       children: tokenName.substring(0, 1)
     }
   );
@@ -1747,41 +1748,38 @@ var Summary = ({
       );
     }
   }, [dstChain]);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4 relative", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-[rgba(255,255,255,0.6)] text-sm", children: "You receive" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-global-border xpay-rounded-lg xpay-bg-[rgba(15,15,15,1)] xpay-p-4 xpay-relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "xpay-flex xpay-justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "xpay-text-[rgba(255,255,255,0.6)] xpay-text-sm", children: "You receive" }),
         isGettingRoute ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           Skeleton,
           {
-            width: "w-[100px]",
-            height: "h-[36px]",
-            other: "sm:w-[190px]"
+            width: "xpay-w-[100px]",
+            height: "xpay-h-[36px]",
+            other: "sm:xpay-w-[190px]"
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex gap-2 items-center text-white text-xl sm:text-3xl", children: amountReadable })
+        ) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "xpay-flex xpay-gap-2 xpay-items-center xpay-text-white xpay-text-xl sm:xpay-text-3xl", children: amountReadable })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col items-end gap-1 text-sm", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex justify-center items-center gap-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "w-5 h-5", children: dstToken?.image ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-items-end xpay-gap-1 xpay-text-sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "xpay-flex xpay-justify-center xpay-items-center xpay-gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "xpay-w-5 xpay-h-5", children: dstToken?.image ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             "img",
             {
-              className: "w-5 h-5",
+              className: "xpay-w-5 xpay-h-5",
               src: dstToken?.image,
               alt: dstToken?.name
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-            UnknownTokenLogo,
-            {
-              tokenName: "?",
-              className: "token-select__generated-logo"
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-base sm:text-xl", children: dstToken?.name })
+          ) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(UnknownTokenLogo, { tokenName: "?" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "xpay-text-base sm:xpay-text-xl", children: dstToken?.name })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex justify-center items-center gap-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-[rgba(255,255,255,0.6)] text-right", children: "on " }),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-1 text-white", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "w-4 h-4", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("img", { src: dstChain?.image, alt: dstChain?.name }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "xpay-flex xpay-justify-center xpay-items-center xpay-gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("p", { className: "xpay-text-[rgba(255,255,255,0.6)] xpay-text-right", children: [
+            "on",
+            " "
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "xpay-flex xpay-items-center xpay-gap-1 xpay-text-white", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "xpay-w-4 xpay-h-4", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("img", { src: dstChain?.image, alt: dstChain?.name }) }),
             /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { children: dstChain?.displayName })
           ] })
         ] })
@@ -1797,7 +1795,7 @@ var Summary = ({
         type: "dst"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "absolute right-[50%] top-0 translate-x-1/2 translate-y-[-60%] globalBorder rounded-xl p-[5px] bg-[rgba(15,15,15,1)]", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: " flex items-center justify-center rounded-lg  w-8 h-8 bg-gradient-to-l from-[rgba(54,129,198,1)] to-[rgba(43,74,157,1)] ", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ArrowDownIcon, {}) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "xpay-absolute xpay-right-[50%] xpay-top-0 xpay-translate-x-1/2 xpay-translate-y-[-60%] xpay-global-border xpay-rounded-xl p-[5px] xpay-bg-[rgba(15,15,15,1)]", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "xpay-flex xpay-items-center xpay-justify-center xpay-rounded-lg xpay-w-8 xpay-h-8 xpay-bg-gradient-to-l xpay-from-[rgba(54,129,198,1)] xpay-to-[rgba(43,74,157,1)] ", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ArrowDownIcon, {}) }) })
   ] });
 };
 
@@ -1817,7 +1815,6 @@ var TokenPicker = ({
   balances
 }) => {
   const [searchValue, setSearchValue] = (0, import_react8.useState)("");
-  const modalRoot = document.querySelector("#xswap-modal");
   const onBackdropClick = (e) => {
     e.stopPropagation();
     e.nativeEvent.stopImmediatePropagation();
@@ -1833,86 +1830,87 @@ var TokenPicker = ({
       (a, b) => a.priority < b.priority ? 1 : balances && balances[a.address] && balances[b.address] && balances[a.address]?.lte(balances[b.address] || "0") ? 1 : -1
     );
   }, [searchValue, tokens]);
-  return modalRoot ? (0, import_react_dom.createPortal)(
+  const xpayRoot2 = document.querySelector("#xpay-root");
+  return xpayRoot2 ? (0, import_react_dom.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       "div",
       {
         onClick: onBackdropClick,
-        className: "box-border fixed h-full w-full z-[999] top-0 left-0 bg-[rgba(0,0,0,0.8)] flex items-center justify-center p-5",
-        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "relative bg-black rounded-3xl p-6 max-h-[70%] flex flex-col text-base text-white w-[452px] h-[70%] border border-solid border-[rgba(255,255,255,0.2)]", children: [
+        className: "xpay-box-border xpay-fixed xpay-h-full xpay-w-full xpay-z-[999] xpay-top-0 xpay-left-0 xpay-bg-[rgba(0,0,0,0.8)] xpay-flex xpay-items-center xpay-justify-center xpay-p-5",
+        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "xpay-relative xpay-bg-black xpay-rounded-3xl xpay-p-6 xpay-max-h-[70%] xpay-flex xpay-flex-col xpay-text-base xpay-text-white xpay-w-[452px] xpay-h-[70%] xpay-border xpay-border-solid xpay-border-[rgba(255,255,255,0.2)]", children: [
           /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             "div",
             {
               onClick: onCloseClick,
-              className: "absolute top-4 right-4 cursor-pointer",
+              className: "xpay-absolute xpay-top-4 xpay-right-4 xpay-cursor-pointer",
               children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CloseIcon, {})
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-base mb-4", children: "Pick a token" }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-center border border-solid border-[rgba(255,255,255,0.1)] rounded-lg py-0 px-3 gap-2 bg-[rgba(15,15,15,1)]", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "w-6 h-6", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SearchIcon, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "xpay-text-base xpay-mb-4", children: "Pick a token" }),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "xpay-flex xpay-items-center xpay-border xpay-border-solid xpay-border-[rgba(255,255,255,0.1)] xpay-rounded-lg xpay-py-0 xpay-px-3 xpay-gap-2 xpay-bg-[rgba(15,15,15,1)]", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "xpay-w-6 xpay-h-6", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SearchIcon, {}) }),
             /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
               "input",
               {
                 placeholder: "Search name or paste address",
                 value: searchValue,
                 onChange: (e) => setSearchValue(e.target.value),
-                className: "relative h-[41px] leading-[41px] font-normal z-[1] w-full text-white bg-transparent border-none outline-none placeholder:text-sm"
+                className: "xpay-relative xpay-h-[41px] xpay-leading-[41px] xpay-font-normal xpay-z-[1] xpay-w-full xpay-text-white xpay-bg-transparent xpay-border-none xpay-outline-none placeholder:xpay-text-sm"
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "my-4 mx-0 flex flex-wrap gap-3", children: tokens?.filter((token) => token?.quickPick).map((token) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "xpay-my-4 xpay-mx-0 xpay-flex xpay-flex-wrap xpay-gap-3", children: tokens?.filter((token) => token?.quickPick).map((token) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
             "div",
             {
-              className: `flex gap-2 py-1 px-2 items-center bg-[rgb(15,15,15)] rounded-2xl border border-solid border-[rgba(255,255,255,0.1)] hover:bg-[rgb(25,25,25)] hover:cursor-pointer ${token.address === selectedToken?.address ? "bg-[rgb(35, 35, 35)]" : ""}`,
+              className: `xpay-flex xpay-gap-2 xpay-py-1 xpay-px-2 xpay-items-center xpay-bg-[rgb(15,15,15)] xpay-rounded-2xl xpay-border xpay-border-solid xpay-border-[rgba(255,255,255,0.1)] hover:xpay-bg-[rgb(25,25,25)] hover:xpay-cursor-pointer ${token.address === selectedToken?.address ? "xpay-bg-[rgb(35, 35, 35)]" : ""}`,
               onClick: () => {
                 setSelectedToken(token);
                 onCloseClick();
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("img", { src: token.image, alt: token.name, className: "w-5" }),
-                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "text-sm", children: token.symbol })
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                  "img",
+                  {
+                    src: token.image,
+                    alt: token.name,
+                    className: "xpay-w-5"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "xpay-text-sm", children: token.symbol })
               ]
             },
             token.address
           )) }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "h-[2px] my-0 mx-[-24px] w-[100%+48px] px-12 bg-[rgba(255,255,255,0.1)]" }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "overflow-y-scroll h-full mx-[-24px] w-[100%+48px] flex flex-col", children: filteredTokens && filteredTokens.length > 0 ? filteredTokens.map((token, index) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "xpay-h-[2px] xpay-my-0 xpay-mx-[-24px] xpay-w-[100%+48px] xpay-px-12 xpay-bg-[rgba(255,255,255,0.1)]" }),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "xpay-overflow-y-scroll xpay-h-full xpay-mx-[-24px] xpay-w-[100%+48px] xpay-flex xpay-flex-col", children: filteredTokens && filteredTokens.length > 0 ? filteredTokens.map((token, index) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
             "div",
             {
-              className: `flex gap-3 py-2 px-[24px] w-full items-center hover:bg-[rgb(25,25,25)] hover:cursor-pointer ${token.address === selectedToken?.address ? "bg-[rgb(35,35,35)]" : ""}`,
+              className: `xpay-flex xpay-gap-3 xpay-py-2 xpay-px-[24px] xpay-w-full xpay-items-center hover:xpay-bg-[rgb(25,25,25)] hover:xpay-cursor-pointer ${token.address === selectedToken?.address ? "xpay-bg-[rgb(35,35,35)]" : ""}`,
               onClick: () => {
                 setSelectedToken(token);
                 onCloseClick();
               },
               children: [
-                token.image ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-                  "img",
-                  {
-                    src: token.image,
-                    alt: token.name,
-                    className: "token-picker__all__logo"
-                  }
-                ) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex items-center justify-center w-9 h-9 text-[15px] ml-1 rounded-full bg-[#272e40] text-[#e0e7fa]", children: token?.symbol.substring(0, 1) }),
-                /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex justify-between items-center gap-1 overflow-hidden grow", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col leading-[16px]", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "overflow-hidden whitespace-nowrap text-ellipsis text-[15px]", children: token.name }),
-                    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "text-[#888] text-[11px]", children: token.symbol })
+                token.image ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("img", { src: token.image, alt: token.name }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "xpay-flex xpay-items-center xpay-justify-center xpay-w-9 xpay-h-9 xpay-text-[15px] xpay-ml-1 xpay-rounded-full xpay-bg-[#272e40] xpay-text-[#e0e7fa]", children: token?.symbol.substring(0, 1) }),
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "xpay-flex xpay-justify-between xpay-items-center xpay-gap-1 xpay-overflow-hidden xpay-grow", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-leading-[16px]", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "xpay-overflow-hidden xpay-whitespace-nowrap xpay-text-ellipsis xpay-text-[15px]", children: token.name }),
+                    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "xpay-text-[#888] xpay-text-[11px]", children: token.symbol })
                   ] }),
-                  signer && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_jsx_runtime35.Fragment, { children: balances && balances[token.address] && token.decimals ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "text-xs", children: weiToHumanReadable({
+                  signer && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_jsx_runtime35.Fragment, { children: balances && balances[token.address] && token.decimals ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "xpay-text-xs", children: weiToHumanReadable({
                     amount: balances[token.address]?.toString() || "0",
                     decimals: token.decimals,
                     precisionFractionalPlaces: 4
-                  }) }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Skeleton, { width: "w-12", height: "h-3" }) })
+                  }) }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Skeleton, { width: "xpay-w-12", height: "xpay-h-3" }) })
                 ] })
               ]
             },
             `${index}_${token.address}`
-          )) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "mt-4 flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-sm text-white", children: "No tokens found." }) }) })
+          )) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "xpay-mt-4 xpay-flex xpay-justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "xpay-text-sm xpay-text-white", children: "No tokens found." }) }) })
         ] })
       }
     ),
-    modalRoot
+    xpayRoot2
   ) : null;
 };
 
@@ -1929,7 +1927,7 @@ var ChainListElement = ({
     /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
       "li",
       {
-        className: "bg-transparent border-none flex gap-1 items-center cursor-pointer py-2 w-full",
+        className: "xpay-bg-transparent xpay-border-none xpay-flex xpay-gap-1 xpay-items-center xpay-cursor-pointer xpay-py-2 xpay-w-full",
         onClick: () => {
           setSrcChain(chain);
           setChainListShown(false);
@@ -1940,7 +1938,7 @@ var ChainListElement = ({
         ]
       }
     ),
-    index !== length - 1 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "h-px mx-2 bg-[rgba(255,255,255,0.15)]" })
+    index !== length - 1 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "xpay-h-px xpay-mx-2 xpay-bg-[rgba(255,255,255,0.15)]" })
   ] }, `${chain.ecosystem}-${chain.chainId}`);
 };
 
@@ -1975,7 +1973,7 @@ var BalanceComponent = ({ srcToken, balances }) => {
       decimals: srcToken.decimals,
       precisionFractionalPlaces: 4
     }) : 0,
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "bg-gradient-to-r from-x_blue_light to-x_blue_dark bg-clip-text text-transparent", children: "Max" })
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "xpay-bg-gradient-to-r xpay-from-x_blue_light xpay-to-x_blue_dark xpay-bg-clip-text xpay-text-transparent", children: "Max" })
   ] });
 };
 
@@ -2026,14 +2024,14 @@ var SwapPanel = ({
     () => supportedChains.filter((chain) => chain.chainId !== srcChain?.chainId),
     [supportedChains, srcChain]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex justify-between globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex flex-col justify-between gap-2 overflow-hidden w-1/2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "text-white opacity-60 text-xs sm:text-sm font-medium", children: "You pay" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "xpay-flex xpay-justify-between xpay-global-border xpay-rounded-lg xpay-bg-[rgba(15,15,15,1)] xpay-p-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-justify-between xpay-gap-2 xpay-overflow-hidden xpay-w-1/2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "xpay-text-white xpay-opacity-60 xpay-text-xs sm:xpay-text-sm xpay-font-medium", children: "You pay" }),
         /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           "input",
           {
-            className: "p-0 border-none outline-none bg-transparent text-2xl overflow-ellipsis",
+            className: "xpay-p-0 xpay-border-none xpay-outline-none xpay-bg-transparent xpay-text-2xl xpay-overflow-ellipsis",
             value: amount,
             onChange: (e) => {
               if (e.target.value === ".") return;
@@ -2049,7 +2047,7 @@ var SwapPanel = ({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "flex items-center text-sm text-[rgba(255,255,255,0.6)]", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "xpay-flex xpay-items-center xpay-text-sm xpay-text-[rgba(255,255,255,0.6)]", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         UsdPrice,
         {
           prices,
@@ -2061,11 +2059,11 @@ var SwapPanel = ({
         }
       ) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex flex-col relative items-end gap-2.5 w-1/2 text-xs", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-relative xpay-items-end xpay-gap-2.5 xpay-w-1/2 xpay-text-xs", children: [
       /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
         "div",
         {
-          className: "flex gap-2 items-center p-2 max-w-full cursor-pointer bg-black text-white globalBorder rounded-3xl whitespace-nowrap",
+          className: "xpay-flex xpay-gap-2 xpay-items-center xpay-p-2 xpay-max-w-full xpay-cursor-pointer xpay-bg-black xpay-text-white xpay-global-border xpay-rounded-3xl xpay-whitespace-nowrap",
           onClick: () => {
             setTokenListShown((state) => !state);
           },
@@ -2099,7 +2097,7 @@ var SwapPanel = ({
         "div",
         {
           onClick: handleMaxClick,
-          className: "flex gap-1 items-center font-medium text-white opacity-60 py-0.5 cursor-pointer",
+          className: "xpay-flex xpay-gap-1 xpay-items-center xpay-font-medium xpay-text-white xpay-opacity-60 xpay-py-0.5 xpay-cursor-pointer",
           children: signer && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(BalanceComponent, { balances, srcToken })
         }
       ),
@@ -2107,7 +2105,7 @@ var SwapPanel = ({
         "div",
         {
           ref: buttonRef,
-          className: "bg-black globalBorder rounded-2xl whitespace-nowrap flex items-center p-2 cursor-pointer gap-2",
+          className: "xpay-bg-black xpay-global-border xpay-rounded-2xl xpay-whitespace-nowrap xpay-flex xpay-items-center xpay-p-2 xpay-cursor-pointer xpay-gap-2",
           onClick: () => setChainListShown((prev) => !prev),
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
@@ -2128,7 +2126,7 @@ var SwapPanel = ({
         "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",
+          className: "xpay-bg-black xpay-global-border xpay-rounded-lg xpay-whitespace-nowrap xpay-z-1 xpay-right-0 xpay-top-10 xpay-px-2 xpay-max-w-full xpay-max-h-[40vh] xpay-overflow-auto xpay-absolute xpay-text-sm xpay-z-20",
           children: chainListOptions.map((chain, index) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             ChainListElement,
             {
@@ -2151,7 +2149,7 @@ var ErrorField = ({ error }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "div",
     {
-      className: `flex justify-center mb-1 items-center w-full rounded-2xl bg-x_error_background border border-solid ${error.length > 0 ? "border-x_error_border" : "border-transparent"}`,
+      className: `xpay-flex xpay-justify-center xpay-mb-1 xpay-items-center xpay-w-full xpay-rounded-2xl xpay-bg-x_error_background xpay-border xpay-border-solid ${error.length > 0 ? "xpay-border-x_error_border" : "xpay-border-transparent"}`,
       children: error
     }
   );
@@ -2160,7 +2158,7 @@ var ErrorField = ({ error }) => {
 // src/components/TxConfigForm/Description.tsx
 var import_jsx_runtime40 = require("react/jsx-runtime");
 var Description = ({ description }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex flex-col items-start rounded-lg px-4 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "w-full flex gap-4 items-start justify-between text-xl", children: description }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "xpay-flex xpay-flex-col xpay-items-start xpay-rounded-lg xpay-px-4 xpay-py-2", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "xpay-w-full xpay-flex xpay-gap-4 xpay-items-start xpay-justify-between xpay-text-xl", children: description }) });
 };
 
 // src/components/TxConfigForm/Button.tsx
@@ -2169,7 +2167,7 @@ var Button = ({ children, onClick, type, disabled }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     "button",
     {
-      className: "text-white border-none rounded-2xl text-xl py-4 cursor-pointer w-full bg-gradient-to-r from-[#3681c6] to-[#2b4a9d] disabled:opacity-25",
+      className: "xpay-text-white xpay-border-none xpay-rounded-2xl xpay-text-xl xpay-py-4 xpay-cursor-pointer xpay-w-full xpay-bg-gradient-to-r xpay-from-[#3681c6] xpay-to-[#2b4a9d] disabled:xpay-opacity-25",
       onClick,
       type,
       disabled,
@@ -2326,7 +2324,7 @@ var Form = ({
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
     "form",
     {
-      className: "flex flex-col gap-2 z-10 my-0 p-2 md:p-4 rounded-3xl overflow-hidden font-light sm:w-x_desktop",
+      className: "xpay-flex xpay-flex-col xpay-gap-2 xpay-z-10 xpay-my-0 xpay-p-2 md:xpay-p-4 xpay-rounded-3xl xpay-overflow-hidden xpay-font-light sm:xpay-w-x_desktop",
       onSubmit: handleSubmit,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
@@ -2349,7 +2347,7 @@ var Form = ({
             setSlippage
           }
         ),
-        historyTabShown ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(History, { signer, supportedChains }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-col gap-2", children: [
+        historyTabShown ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(History, { signer, supportedChains }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "xpay-flex xpay-flex-col xpay-gap-2", children: [
           desc && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Description, { description: desc }),
           /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
             SwapPanel,
@@ -2432,9 +2430,9 @@ var TxConfigForm = ({
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_wagmi3.WagmiProvider, { config: wagmiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_query.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     "div",
     {
-      className: "top-0 left-0 right-0 bottom-0 bg-[rgba(0,0,0,0.8)] fixed flex items-center justify-center z-10",
+      className: "xpay-top-0 xpay-left-0 xpay-right-0 xpay-bottom-0 xpay-bg-[rgba(0,0,0,0.8)] xpay-fixed xpay-flex xpay-items-center xpay-justify-center xpay-z-10",
       onClick: onBackdropClick,
-      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "relative bg-black rounded-3xl overflow-auto text-white border-2 border-solid border-[rgba(255,255,255,0.1)]", children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "xpay-relative xpay-bg-black xpay-rounded-3xl xpay-overflow-auto xpay-text-white xpay-border-2 xpay-border-solid xpay-border-[rgba(255,255,255,0.1)]", children: [
         /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           Form,
           {
@@ -2464,7 +2462,7 @@ var openTxConfigForm = async ({
   try {
     return await new Promise(async (resolve) => {
       await waitForInitialization();
-      xswapRoot.render(
+      xpayRoot.render(
         /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           TxConfigForm,
           {
@@ -2476,10 +2474,10 @@ var openTxConfigForm = async ({
             supportedChains,
             onSubmit: (route) => {
               resolve(route);
-              xswapRoot.render("");
+              xpayRoot.render("");
             },
             onClose: () => {
-              xswapRoot.render("");
+              xpayRoot.render("");
             }
           }
         )
@@ -2507,82 +2505,90 @@ var TxStatusButton = ({ transaction }) => {
   } = transaction;
   const [isWide, setIsWide] = (0, import_react13.useState)(false);
   const background = (0, import_react13.useMemo)(
-    () => isDone ? "bg-[rgba(2,2,2,1)] bg-gradient-to-r from-[rgba(76,175,80,0.2)] to-[rgba(46,125,50,0.2)]" : "bg-[rgba(2,2,2,1)] bg-gradient-to-r from-[rgba(54,129,198,0.2)] to-[rgba(43,74,157,0.2)]",
+    () => isDone ? "xpay-bg-[rgba(2,2,2,1)] xpay-bg-gradient-to-r xpay-from-[rgba(76,175,80,0.2)] xpay-to-[rgba(46,125,50,0.2)]" : "xpay-bg-[rgba(2,2,2,1)] xpay-bg-gradient-to-r xpay-from-[rgba(54,129,198,0.2)] xpay-to-[rgba(43,74,157,0.2)]",
     [isDone]
   );
   const border = (0, import_react13.useMemo)(
-    () => isDone ? "border border-solid border-x_green_dark" : "border border-solid border-x_blue_dark",
+    () => isDone ? "xpay-border xpay-border-solid xpay-border-x_green_dark" : "xpay-border xpay-border-solid xpay-border-x_blue_dark",
     [isDone]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex gap-2", onClick: () => setIsWide((x) => !x), children: [
-    isWide && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
-      "div",
-      {
-        className: `flex items-center min-w-60 sm:w-[520px] text-white h-14 px-4 text-sm gap-3 rounded-xl ${background} ${border}`,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex justify-between flex-col gap-2 sm:gap-5 sm:flex-row w-full", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex items-center gap-2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+    "div",
+    {
+      className: "xpay-flex xpay-gap-2",
+      onClick: () => setIsWide((x) => !x),
+      children: [
+        isWide && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+          "div",
+          {
+            className: `xpay-flex xpay-items-center xpay-min-w-60 sm:xpay-w-[520px] xpay-text-white xpay-h-14 xpay-px-4 xpay-text-sm xpay-gap-3 xpay-rounded-xl ${background} ${border}`,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "xpay-flex xpay-justify-between xpay-flex-col xpay-gap-2 sm:xpay-gap-5 sm:xpay-flex-row xpay-w-full", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "xpay-flex xpay-items-center xpay-gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                    "img",
+                    {
+                      className: "xpay-w-5 xpay-h-5",
+                      src: fromChainImage,
+                      alt: "source chain"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { children: fromChain }),
+                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "xpay-w-3.5 xpay-h-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ArrowRightIcon, {}) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                    "img",
+                    {
+                      className: "xpay-w-5 xpay-h-5",
+                      src: toChainImage,
+                      alt: "to chain"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { children: toChain })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "xpay-flex xpay-items-center xpay-gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { children: "Sent" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { children: fromAmount }),
+                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { children: fromToken }),
+                  fromTokenImage ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                    "img",
+                    {
+                      className: "xpay-w-5 xpay-h-5",
+                      src: fromTokenImage,
+                      alt: "source token"
+                    }
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(UnknownTokenLogo, { tokenName: "?" })
+                ] })
+              ] }),
               /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                "img",
-                {
-                  className: "w-5 h-5",
-                  src: fromChainImage,
-                  alt: "source chain"
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { children: fromChain }),
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "w-3.5 h-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ArrowRightIcon, {}) }),
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("img", { className: "w-5 h-5", src: toChainImage, alt: "to chain" }),
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { children: toChain })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { children: "Sent" }),
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { children: fromAmount }),
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { children: fromToken }),
-              fromTokenImage ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                "img",
-                {
-                  className: "w-5 h-5",
-                  src: fromTokenImage,
-                  alt: "source token"
-                }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                UnknownTokenLogo,
+                "a",
                 {
-                  tokenName: "?",
-                  className: "token-select__generated-logo"
+                  href: explorer,
+                  target: "_blank",
+                  rel: "noreferrer",
+                  className: "xpay-no-underline xpay-cursor-pointer",
+                  "aria-label": "Show the transaction in the chain explorer",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "xpay-w-3.5 xpay-h-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ArrowUpRightIcon, {}) })
                 }
               )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          "div",
+          {
+            className: `xpay-text-white xpay-rounded-xl xpay-cursor-pointer ${background} ${border}`,
+            children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "xpay-flex xpay-gap-2 xpay-items-center xpay-h-14 xpay-w-20 xpay-justify-center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ArrowLeftIcon, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "xpay-relative xpay-flex xpay-items-center xpay-justify-center xpay-w-9 xpay-h-9", children: isDone ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "xpay-text-x_green xpay-w-5 xpay-h-5", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(CheckIcon, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "xpay-w-5 xpay-h-5", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(XSwapLogo, {}) }),
+                /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "xpay-absolute xpay-flex xpay-items-center xpay-justify-center xpay-top-0 xpay-left-0 xpay-right-0 xpay-bottom-0 xpay-text-white", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(CircularProgressIcon, {}) })
+              ] }) })
             ] })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-            "a",
-            {
-              href: explorer,
-              target: "_blank",
-              rel: "noreferrer",
-              className: "no-underline cursor-pointer",
-              "aria-label": "Show the transaction in the chain explorer",
-              children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "w-3.5 h-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ArrowUpRightIcon, {}) })
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-      "div",
-      {
-        className: `text-white rounded-xl cursor-pointer ${background} ${border}`,
-        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex gap-2 items-center h-14 w-20 justify-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ArrowLeftIcon, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "relative flex items-center justify-center w-9 h-9", children: isDone ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "text-x_green w-5 h-5", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(CheckIcon, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "w-5 h-5", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(XSwapLogo, {}) }),
-            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "absolute flex items-center justify-center top-0 left-0 right-0 bottom-0 text-white", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(CircularProgressIcon, {}) })
-          ] }) })
-        ] })
-      }
-    )
-  ] });
+          }
+        )
+      ]
+    }
+  );
 };
 var renderedTransactions = [];
 var addTransactionToRenderedTransactions = (transaction) => {
@@ -2605,13 +2611,18 @@ var updateTransactionDoneInRenderedTransactions = (txHash) => {
 };
 var renderTxStatusButtons = () => {
   const buttons = renderedTransactions.map((item) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(TxStatusButton, { transaction: item }, item.txHash));
-  txStatusRoot.render(buttons);
+  xpayTxStatusRoot.render(buttons);
 };
 
 // src/components/Skeleton/index.tsx
 var import_jsx_runtime45 = require("react/jsx-runtime");
 var Skeleton = ({ width, height }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: `bg-current rounded animate-pulse ${width} ${height}` });
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    "div",
+    {
+      className: `xpay-bg-current xpay-rounded xpay-animate-pulse ${width} ${height}`
+    }
+  );
 };
 
 // src/services/integrations/monitoring.ts