@xswap-link/sdk 0.2.5 → 0.2.6

package/src/components/TxConfigForm/SwapPanel.tsx

@@ -83,14 +83,14 @@ export const SwapPanel: FC<Props> = ({
   );
 
   return (
-    <div className="flex justify-between globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4">
-      <div className="flex flex-col justify-between gap-2 overflow-hidden w-1/2">
-        <div className="flex flex-col gap-1">
-          <p className="text-white opacity-60 text-xs sm:text-sm font-medium">
+    <div className="xpay-flex xpay-justify-between xpay-global-border xpay-rounded-lg xpay-bg-[rgba(15,15,15,1)] xpay-p-4">
+      <div className="xpay-flex xpay-flex-col xpay-justify-between xpay-gap-2 xpay-overflow-hidden xpay-w-1/2">
+        <div className="xpay-flex xpay-flex-col xpay-gap-1">
+          <p className="xpay-text-white xpay-opacity-60 xpay-text-xs sm:xpay-text-sm xpay-font-medium">
             You pay
           </p>
           <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;
@@ -105,7 +105,7 @@ export const SwapPanel: FC<Props> = ({
             placeholder="0"
           />
         </div>
-        <div className="flex items-center text-sm text-[rgba(255,255,255,0.6)]">
+        <div className="xpay-flex xpay-items-center xpay-text-sm xpay-text-[rgba(255,255,255,0.6)]">
           <UsdPrice
             prices={prices}
             token={srcToken}
@@ -116,9 +116,9 @@ export const SwapPanel: FC<Props> = ({
           />
         </div>
       </div>
-      <div className="flex flex-col relative items-end gap-2.5 w-1/2 text-xs">
+      <div className="xpay-flex xpay-flex-col xpay-relative xpay-items-end xpay-gap-2.5 xpay-w-1/2 xpay-text-xs">
         <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);
           }}
@@ -145,7 +145,7 @@ export const SwapPanel: FC<Props> = ({
         )}
         <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"
         >
           {signer && (
             <BalanceComponent balances={balances} srcToken={srcToken} />
@@ -153,7 +153,7 @@ export const SwapPanel: FC<Props> = ({
         </div>
         <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)}
         >
           <img
@@ -169,7 +169,7 @@ export const SwapPanel: FC<Props> = ({
         {chainListShown && (
           <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"
           >
             {chainListOptions.map((chain, index) => (
               <ChainListElement

package/src/components/TxConfigForm/TokenPicker.tsx

@@ -24,8 +24,6 @@ export const TokenPicker: FC<Props> = ({
 }) => {
   const [searchValue, setSearchValue] = useState("");
 
-  const modalRoot = document.querySelector("#xswap-modal");
-
   const onBackdropClick = (e: MouseEvent<HTMLDivElement>) => {
     e.stopPropagation();
     e.nativeEvent.stopImmediatePropagation();
@@ -57,40 +55,42 @@ export const TokenPicker: FC<Props> = ({
       );
   }, [searchValue, tokens]);
 
-  return modalRoot
+  const xpayRoot = document.querySelector("#xpay-root");
+
+  return xpayRoot
     ? createPortal(
         <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"
+          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"
         >
-          <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)]">
+          <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)]">
             <div
               onClick={onCloseClick}
-              className="absolute top-4 right-4 cursor-pointer"
+              className="xpay-absolute xpay-top-4 xpay-right-4 xpay-cursor-pointer"
             >
               <CloseIcon />
             </div>
-            <p className="text-base mb-4">Pick a token</p>
-            <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)]">
-              <div className="w-6 h-6">
+            <p className="xpay-text-base xpay-mb-4">Pick a token</p>
+            <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)]">
+              <div className="xpay-w-6 xpay-h-6">
                 <SearchIcon />
               </div>
               <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"
               />
             </div>
-            <div className="my-4 mx-0 flex flex-wrap gap-3">
+            <div className="xpay-my-4 xpay-mx-0 xpay-flex xpay-flex-wrap xpay-gap-3">
               {tokens
                 ?.filter((token) => token?.quickPick)
                 .map((token) => (
                   <div
                     key={token.address}
-                    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 ${
+                    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
-                        ? "bg-[rgb(35, 35, 35)]"
+                        ? "xpay-bg-[rgb(35, 35, 35)]"
                         : ""
                     }`}
                     onClick={() => {
@@ -98,20 +98,24 @@ export const TokenPicker: FC<Props> = ({
                       onCloseClick();
                     }}
                   >
-                    <img src={token.image} alt={token.name} className="w-5" />
-                    <div className="text-sm">{token.symbol}</div>
+                    <img
+                      src={token.image}
+                      alt={token.name}
+                      className="xpay-w-5"
+                    />
+                    <div className="xpay-text-sm">{token.symbol}</div>
                   </div>
                 ))}
             </div>
-            <div className="h-[2px] my-0 mx-[-24px] w-[100%+48px] px-12 bg-[rgba(255,255,255,0.1)]" />
-            <div className="overflow-y-scroll h-full mx-[-24px] w-[100%+48px] flex flex-col">
+            <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)]" />
+            <div className="xpay-overflow-y-scroll xpay-h-full xpay-mx-[-24px] xpay-w-[100%+48px] xpay-flex xpay-flex-col">
               {filteredTokens && filteredTokens.length > 0 ? (
                 filteredTokens.map((token, index) => (
                   <div
                     key={`${index}_${token.address}`}
-                    className={`flex gap-3 py-2 px-[24px] w-full items-center hover:bg-[rgb(25,25,25)] hover:cursor-pointer ${
+                    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
-                        ? "bg-[rgb(35,35,35)]"
+                        ? "xpay-bg-[rgb(35,35,35)]"
                         : ""
                     }`}
                     onClick={() => {
@@ -120,22 +124,18 @@ export const TokenPicker: FC<Props> = ({
                     }}
                   >
                     {token.image ? (
-                      <img
-                        src={token.image}
-                        alt={token.name}
-                        className="token-picker__all__logo"
-                      />
+                      <img src={token.image} alt={token.name} />
                     ) : (
-                      <div className="flex items-center justify-center w-9 h-9 text-[15px] ml-1 rounded-full bg-[#272e40] text-[#e0e7fa]">
+                      <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]">
                         {token?.symbol.substring(0, 1)}
                       </div>
                     )}
-                    <div className="flex justify-between items-center gap-1 overflow-hidden grow">
-                      <div className="flex flex-col leading-[16px]">
-                        <div className="overflow-hidden whitespace-nowrap text-ellipsis text-[15px]">
+                    <div className="xpay-flex xpay-justify-between xpay-items-center xpay-gap-1 xpay-overflow-hidden xpay-grow">
+                      <div className="xpay-flex xpay-flex-col xpay-leading-[16px]">
+                        <div className="xpay-overflow-hidden xpay-whitespace-nowrap xpay-text-ellipsis xpay-text-[15px]">
                           {token.name}
                         </div>
-                        <div className="text-[#888] text-[11px]">
+                        <div className="xpay-text-[#888] xpay-text-[11px]">
                           {token.symbol}
                         </div>
                       </div>
@@ -144,7 +144,7 @@ export const TokenPicker: FC<Props> = ({
                           {balances &&
                           balances[token.address] &&
                           token.decimals ? (
-                            <div className="text-xs">
+                            <div className="xpay-text-xs">
                               {weiToHumanReadable({
                                 amount:
                                   balances[token.address]?.toString() || "0",
@@ -153,7 +153,7 @@ export const TokenPicker: FC<Props> = ({
                               })}
                             </div>
                           ) : (
-                            <Skeleton width="w-12" height="h-3" />
+                            <Skeleton width="xpay-w-12" height="xpay-h-3" />
                           )}
                         </>
                       )}
@@ -161,14 +161,16 @@ export const TokenPicker: FC<Props> = ({
                   </div>
                 ))
               ) : (
-                <div className="mt-4 flex justify-center">
-                  <p className="text-sm text-white">No tokens found.</p>
+                <div className="xpay-mt-4 xpay-flex xpay-justify-center">
+                  <p className="xpay-text-sm xpay-text-white">
+                    No tokens found.
+                  </p>
                 </div>
               )}
             </div>
           </div>
         </div>,
-        modalRoot,
+        xpayRoot,
       )
     : null;
 };

package/src/components/TxConfigForm/TopBar.tsx

@@ -18,30 +18,30 @@ export const TopBar: FC<Props> = ({
   onClose,
 }) => {
   return (
-    <div className="flex w-full justify-between items-center mx-auto p-2">
-      <div className="rounded-lg text-[rgba(255,255,255,0.6)] text-xs sm:text-base whitespace-nowrap">
+    <div className="xpay-flex xpay-w-full xpay-justify-between xpay-items-center xpay-mx-auto xpay-p-2">
+      <div className="xpay-rounded-lg xpay-text-[rgba(255,255,255,0.6)] xpay-text-xs sm:xpay-text-base xpay-whitespace-nowrap">
         {signer
           ? `Connected wallet: ${shortAddress(signer)}`
           : `Wallet disconnected`}
       </div>
-      <div className="flex gap-2 justify-center items-center">
+      <div className="xpay-flex xpay-gap-2 xpay-justify-center xpay-items-center">
         {!historyTabShown && (
           <div
             onClick={() => setSettingsShown(true)}
-            className="flex items-center text-xs gap-1 cursor-pointer"
+            className="xpay-flex xpay-items-center xpay-text-xs xpay-gap-1 xpay-cursor-pointer"
           >
-            <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">
+            <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">
               <SettingsIcon />
             </div>
           </div>
         )}
         <div
           onClick={() => setHistoryTabShown((x) => !x)}
-          className="flex items-center text-sm gap-1 cursor-pointer"
+          className="xpay-flex xpay-items-center xpay-text-sm xpay-gap-1 xpay-cursor-pointer"
         >
           {!historyTabShown ? (
             <>
-              <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">
+              <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">
                 <HistoryIcon />
               </div>
             </>
@@ -49,7 +49,7 @@ export const TopBar: FC<Props> = ({
             <div>Back</div>
           )}
         </div>
-        <div className="cursor-pointer text-white" onClick={onClose}>
+        <div className="xpay-cursor-pointer xpay-text-white" onClick={onClose}>
           <CloseIcon />
         </div>
       </div>

package/src/components/TxConfigForm/UsdPrice.tsx

@@ -37,9 +37,9 @@ export const UsdPrice: FC<Props> = ({
   }, [token, prices, amount]);
 
   return (
-    <div className="opacity-60 py-4">
+    <div className="xpay-opacity-60 xpay-py-4">
       {loading ? (
-        <Skeleton width="w-12" height="h-4" />
+        <Skeleton width="xpay-w-12" height="xpay-h-4" />
       ) : token ? (
         prices && prices[token.address] ? (
           <div>{`$${usdPrice}`}</div>

package/src/components/TxConfigForm/index.tsx

@@ -2,7 +2,7 @@ import "@src/global.css";
 import { MouseEvent, useMemo } from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { WagmiProvider } from "wagmi";
-import { getWagmiConfig, waitForInitialization, xswapRoot } from "@src/config";
+import { getWagmiConfig, waitForInitialization, xpayRoot } from "@src/config";
 import { Chain, ContractCall, Route } from "@src/models";
 import { PoweredBy } from "@src/components/TxConfigForm/PoweredBy";
 import { Form } from "./Form";
@@ -47,10 +47,10 @@ const TxConfigForm = ({
     <WagmiProvider config={wagmiConfig}>
       <QueryClientProvider client={queryClient}>
         <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}
         >
-          <div className="relative bg-black rounded-3xl overflow-auto text-white border-2 border-solid border-[rgba(255,255,255,0.1)]">
+          <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)]">
             <Form
               integratorId={integratorId}
               dstChainId={dstChainId}
@@ -80,7 +80,7 @@ export const openTxConfigForm = async ({
   try {
     return await new Promise(async (resolve) => {
       await waitForInitialization();
-      xswapRoot.render(
+      xpayRoot.render(
         <TxConfigForm
           integratorId={integratorId}
           dstChainId={dstChainId}
@@ -90,10 +90,10 @@ export const openTxConfigForm = async ({
           supportedChains={supportedChains}
           onSubmit={(route) => {
             resolve(route);
-            xswapRoot.render("");
+            xpayRoot.render("");
           }}
           onClose={() => {
-            xswapRoot.render("");
+            xpayRoot.render("");
           }}
         />,
       );

package/src/components/TxStatusButton/index.tsx

@@ -8,7 +8,7 @@ import {
   XSwapLogo,
 } from "../icons";
 import { MonitoredTransaction } from "@src/models";
-import { txStatusRoot } from "@src/config";
+import { xpayTxStatusRoot } from "@src/config";
 import { UnknownTokenLogo } from "../UnknownTokenLogo/UnknownTokenLogo";
 
 interface Props {
@@ -32,56 +32,60 @@ export const TxStatusButton: FC<Props> = ({ transaction }) => {
   const background = 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)]",
+        ? "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 = useMemo(
     () =>
       isDone
-        ? "border border-solid border-x_green_dark"
-        : "border border-solid border-x_blue_dark",
+        ? "xpay-border xpay-border-solid xpay-border-x_green_dark"
+        : "xpay-border xpay-border-solid xpay-border-x_blue_dark",
     [isDone],
   );
 
   return (
-    <div className="flex gap-2" onClick={() => setIsWide((x: boolean) => !x)}>
+    <div
+      className="xpay-flex xpay-gap-2"
+      onClick={() => setIsWide((x: boolean) => !x)}
+    >
       {isWide && (
         <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}`}
+          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}`}
         >
-          <div className="flex justify-between flex-col gap-2 sm:gap-5 sm:flex-row w-full">
-            <div className="flex items-center gap-2">
+          <div className="xpay-flex xpay-justify-between xpay-flex-col xpay-gap-2 sm:xpay-gap-5 sm:xpay-flex-row xpay-w-full">
+            <div className="xpay-flex xpay-items-center xpay-gap-2">
               <img
-                className="w-5 h-5"
+                className="xpay-w-5 xpay-h-5"
                 src={fromChainImage}
                 alt="source chain"
               />
               <div>{fromChain}</div>
-              <div className="w-3.5 h-3.5">
+              <div className="xpay-w-3.5 xpay-h-3.5">
                 <ArrowRightIcon />
               </div>
-              <img className="w-5 h-5" src={toChainImage} alt="to chain" />
+              <img
+                className="xpay-w-5 xpay-h-5"
+                src={toChainImage}
+                alt="to chain"
+              />
               <div>{toChain}</div>
             </div>
 
-            <div className="flex items-center gap-2">
+            <div className="xpay-flex xpay-items-center xpay-gap-2">
               <div>Sent</div>
               <div>{fromAmount}</div>
               <div>{fromToken}</div>
 
               {fromTokenImage ? (
                 <img
-                  className="w-5 h-5"
+                  className="xpay-w-5 xpay-h-5"
                   src={fromTokenImage}
                   alt="source token"
                 />
               ) : (
-                <UnknownTokenLogo
-                  tokenName={"?"}
-                  className="token-select__generated-logo"
-                />
+                <UnknownTokenLogo tokenName={"?"} />
               )}
             </div>
           </div>
@@ -89,31 +93,31 @@ export const TxStatusButton: FC<Props> = ({ transaction }) => {
             href={explorer}
             target="_blank"
             rel="noreferrer"
-            className="no-underline cursor-pointer"
+            className="xpay-no-underline xpay-cursor-pointer"
             aria-label="Show the transaction in the chain explorer"
           >
-            <div className="w-3.5 h-3.5">
+            <div className="xpay-w-3.5 xpay-h-3.5">
               <ArrowUpRightIcon />
             </div>
           </a>
         </div>
       )}
       <div
-        className={`text-white rounded-xl cursor-pointer ${background} ${border}`}
+        className={`xpay-text-white xpay-rounded-xl xpay-cursor-pointer ${background} ${border}`}
       >
-        <div className="flex gap-2 items-center h-14 w-20 justify-center">
+        <div className="xpay-flex xpay-gap-2 xpay-items-center xpay-h-14 xpay-w-20 xpay-justify-center">
           <ArrowLeftIcon />
-          <div className="relative flex items-center justify-center w-9 h-9">
+          <div className="xpay-relative xpay-flex xpay-items-center xpay-justify-center xpay-w-9 xpay-h-9">
             {isDone ? (
-              <div className="text-x_green w-5 h-5">
+              <div className="xpay-text-x_green xpay-w-5 xpay-h-5">
                 <CheckIcon />
               </div>
             ) : (
               <>
-                <div className="w-5 h-5">
+                <div className="xpay-w-5 xpay-h-5">
                   <XSwapLogo />
                 </div>
-                <div className="absolute flex items-center justify-center top-0 left-0 right-0 bottom-0 text-white">
+                <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">
                   <CircularProgressIcon />
                 </div>
               </>
@@ -154,5 +158,5 @@ export const renderTxStatusButtons = () => {
   const buttons = renderedTransactions.map((item) => (
     <TxStatusButton key={item.txHash} transaction={item} />
   ));
-  txStatusRoot.render(buttons);
+  xpayTxStatusRoot.render(buttons);
 };

package/src/components/UnknownTokenLogo/UnknownTokenLogo.tsx

@@ -6,7 +6,7 @@ interface Props {
 export const UnknownTokenLogo = ({ tokenName, className }: Props) => {
   return (
     <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}`}
     >
       {tokenName.substring(0, 1)}
     </div>

package/src/components/global.css

@@ -2,7 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
-.xswap {
+.xpay {
   /* Works on Firefox */
   * {
     scrollbar-width: thin;
@@ -23,12 +23,14 @@
     background-color: #252525;
     border-radius: 4px;
   }
+}
 
-  .globalBorder {
+@layer components {
+  .xpay-global-border {
     border: 1px solid rgba(255, 255, 255, 0.1);
   }
-}
 
-.xswap-tx-status {
-  @apply fixed bottom-5 right-2 flex flex-col gap-3 pl-9 items-end w-full z-50;
+  .xpay-tx-status {
+    @apply xpay-fixed xpay-bottom-5 xpay-right-2 xpay-flex xpay-flex-col xpay-gap-3 xpay-pl-9 xpay-items-end xpay-w-full xpay-z-50;
+  }
 }

package/src/components/icons/CircularProgressIcon.tsx

@@ -1,7 +1,7 @@
 export const CircularProgressIcon = () => {
   return (
     <svg
-      className="animate-spin-slow text-white"
+      className="animate-spin-slow xpay-text-white"
       width="33"
       height="33"
       viewBox="0 0 33 33"

package/src/config/init.tsx

@@ -3,9 +3,9 @@ import xswapConfig from "../../xswap.config";
 import { version } from "../../package.json";
 import { WaitingForInit } from "@src/components/WaitingForInit";
 
-export let initIndicatorRoot: Root;
-export let xswapRoot: Root;
-export let txStatusRoot: Root;
+export let xpayRoot: Root;
+export let xpayInitIndicatorRoot: Root;
+export let xpayTxStatusRoot: Root;
 
 let initCompleted = false;
 
@@ -13,12 +13,12 @@ export const 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;
   });
@@ -46,30 +46,31 @@ const createStyleElement = async () => {
   document.body.appendChild(style);
 };
 
-const createXSwapRoot = async () => {
+const 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);
 };
 
-const createTxStatusRoot = async () => {
+const 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);
 };
 
-const createInitIndicatorRoot = () => {
+const 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);
 };
 
 const displayInitIndicator = (display: boolean) => {
   display
-    ? initIndicatorRoot.render(<WaitingForInit />)
-    : initIndicatorRoot.render("");
+    ? xpayInitIndicatorRoot.render(<WaitingForInit />)
+    : xpayInitIndicatorRoot.render("");
 };

package/tailwind.config.js

@@ -26,4 +26,5 @@ export default {
     },
   },
   plugins: [],
+  prefix: "xpay-",
 };