@xswap-link/sdk 0.2.4 → 0.2.6

package/src/components/TxConfigForm/Settings.tsx

@@ -30,42 +30,46 @@ export const Settings: FC<Props> = ({
   }, [slippageActivePresetIndex, usingSlippageInput]);
 
   return (
-    <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">
-      <div className="flex flex-col gap-4 justify-between">
-        <div className="flex justify-between">
-          <div className="text-base">Settings</div>
+    <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">
+      <div className="xpay-flex xpay-flex-col xpay-gap-4 xpay-justify-between">
+        <div className="xpay-flex xpay-justify-between">
+          <div className="xpay-text-base">Settings</div>
           <div
-            className="cursor-pointer"
+            className="xpay-cursor-pointer"
             onClick={() => setSettingsShown(false)}
           >
             <CloseIcon />
           </div>
         </div>
         <div>
-          <div className="flex gap-2 items-center">
-            <div className="text-sm text-[rgba(255,255,255,0.6)]">
+          <div className="xpay-flex xpay-gap-2 xpay-items-center">
+            <div className="xpay-text-sm xpay-text-[rgba(255,255,255,0.6)]">
               Express delivery
             </div>
             <div>
               <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);
                 }}
               >
-                <span className="h-full, w-full rounded-lg bg-[rgba(255,255,255,0.3)]"></span>
+                <span className="xpay-h-full, xpay-w-full xpay-rounded-lg xpay-bg-[rgba(255,255,255,0.3)]"></span>
                 <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"
+          } `}
                 ></span>
               </span>
             </div>
           </div>
-          <div className="flex gap-4">
-            <div className="min-w-[26px] min-h-[26px] text-[#ffa726]">
+          <div className="xpay-flex xpay-gap-4">
+            <div className="xpay-min-w-[26px] xpay-min-h-[26px] xpay-text-[#ffa726]">
               <InfoIcon />
             </div>
-            <div className="text-xs text-left">
+            <div className="xpay-text-xs xpay-text-left">
               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.
@@ -73,20 +77,22 @@ export const Settings: FC<Props> = ({
           </div>
         </div>
 
-        <div className="flex flex-col gap-2 ">
-          <div className=" text-[rgba(255,255,255,0.6)] text-sm">Slippage</div>
-          <div className="flex gap-2">
-            <div className="flex items-center bg-[rgba(15,15,15,1)] p-1 globalBorder rounded-xl">
+        <div className="xpay-flex xpay-flex-col xpay-gap-2">
+          <div className="xpay-text-[rgba(255,255,255,0.6)] xpay-text-sm">
+            Slippage
+          </div>
+          <div className="xpay-flex xpay-gap-2">
+            <div className="xpay-flex xpay-items-center xpay-bg-[rgba(15,15,15,1)] p-1 xpay-global-border xpay-rounded-xl">
               {SLIPPAGE_PRESETS.map((preset, index) => (
                 <div
                   key={index}
-                  className={`transition-all cursor-pointer block rounded-lg p-2 border-none text-sm leading-[10px] ${
+                  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
-                      ? "text-white"
-                      : "text-[rgba(255,255,255,0.2)]"
+                      ? "xpay-text-white"
+                      : "xpay-text-[rgba(255,255,255,0.2)]"
                   } ${
                     index === slippageActivePresetIndex && !usingSlippageInput
-                      ? "bg-gradient-to-r from-[#3681c6] to-[#2b4a9d]"
+                      ? "xpay-bg-gradient-to-r xpay-from-[#3681c6] xpay-to-[#2b4a9d]"
                       : ""
                   }`}
                   onClick={() => {
@@ -98,9 +104,9 @@ export const Settings: FC<Props> = ({
                 </div>
               ))}
             </div>
-            <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">
+            <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">
               <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) => {
@@ -118,11 +124,11 @@ export const Settings: FC<Props> = ({
               <PercentageIcon />
             </div>
           </div>
-          <div className="flex gap-4">
-            <div className="min-w-[26px] min-h-[26px] text-[#ffa726]">
+          <div className="xpay-flex xpay-gap-4">
+            <div className="xpay-min-w-[26px] xpay-min-h-[26px] xpay-text-[#ffa726]">
               <InfoIcon />
             </div>
-            <div className="text-xs text-left">
+            <div className="xpay-text-xs xpay-text-left">
               Slippage is the price variation you are willing to accept in the
               event that the price of the trade changes while it is processing.
               <br /> <br />

package/src/components/TxConfigForm/Summary.tsx

@@ -1,10 +1,11 @@
-import React, { FC, useEffect, useMemo, useState } from "react";
+import { FC, useEffect, useMemo, useState } from "react";
 import { weiToHumanReadable } from "@src/utils";
 import { Chain, Route, Token, TokenPrices } from "@src/models";
 import { ArrowDownIcon } from "../icons";
 import { UsdPrice } from "@src/components/TxConfigForm/UsdPrice";
 import { getPrices } from "@src/services";
 import { Skeleton } from "@src/components";
+import { UnknownTokenLogo } from "../UnknownTokenLogo/UnknownTokenLogo";
 
 interface Props {
   isGettingRoute: boolean;
@@ -40,33 +41,45 @@ export const Summary: FC<Props> = ({
   }, [dstChain]);
 
   return (
-    <div className="flex flex-col globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4 relative">
-      <div className="flex justify-between">
-        <div className="flex flex-col gap-1">
-          <p className="text-[rgba(255,255,255,0.6)] text-sm">You receive</p>
+    <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">
+      <div className="xpay-flex xpay-justify-between">
+        <div className="xpay-flex xpay-flex-col xpay-gap-1">
+          <p className="xpay-text-[rgba(255,255,255,0.6)] xpay-text-sm">
+            You receive
+          </p>
           {isGettingRoute ? (
             <Skeleton
-              width="w-[100px]"
-              height="h-[36px]"
-              other="sm:w-[190px]"
+              width="xpay-w-[100px]"
+              height="xpay-h-[36px]"
+              other="sm:xpay-w-[190px]"
             />
           ) : (
-            <div className="flex gap-2 items-center text-white text-xl sm:text-3xl">
+            <div className="xpay-flex xpay-gap-2 xpay-items-center xpay-text-white xpay-text-xl sm:xpay-text-3xl">
               {amountReadable}
             </div>
           )}
         </div>
-        <div className="flex flex-col items-end gap-1 text-sm">
-          <div className="flex justify-center items-center gap-1">
-            <div className="w-4 sm:w-6 h-4 sm:h-6">
-              <img src={dstToken?.image} alt={dstToken?.name} />
+        <div className="xpay-flex xpay-flex-col xpay-items-end xpay-gap-1 xpay-text-sm">
+          <div className="xpay-flex xpay-justify-center xpay-items-center xpay-gap-1">
+            <div className="xpay-w-5 xpay-h-5">
+              {dstToken?.image ? (
+                <img
+                  className="xpay-w-5 xpay-h-5"
+                  src={dstToken?.image}
+                  alt={dstToken?.name}
+                />
+              ) : (
+                <UnknownTokenLogo tokenName={"?"} />
+              )}
             </div>
-            <p className="text-base sm:text-xl">{dstToken?.symbol}</p>
+            <p className="xpay-text-base sm:xpay-text-xl">{dstToken?.name}</p>
           </div>
-          <div className="flex justify-center items-center gap-1">
-            <p className="text-[rgba(255,255,255,0.6)] text-right">on </p>
-            <div className="flex items-center gap-1 text-white">
-              <div className="w-4 h-4">
+          <div className="xpay-flex xpay-justify-center xpay-items-center xpay-gap-1">
+            <p className="xpay-text-[rgba(255,255,255,0.6)] xpay-text-right">
+              on{" "}
+            </p>
+            <div className="xpay-flex xpay-items-center xpay-gap-1 xpay-text-white">
+              <div className="xpay-w-4 xpay-h-4">
                 <img src={dstChain?.image} alt={dstChain?.name} />
               </div>
               <div>{dstChain?.displayName}</div>
@@ -81,8 +94,8 @@ export const Summary: FC<Props> = ({
         loading={isGettingRoute}
         type="dst"
       />
-      <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)]">
-        <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)] ">
+      <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)]">
+        <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)] ">
           <ArrowDownIcon />
         </div>
       </div>

package/src/components/TxConfigForm/SwapPanel.tsx

@@ -63,7 +63,7 @@ export const SwapPanel: FC<Props> = ({
         weiToHumanReadable({
           amount: balances[srcToken.address]?.toString() || "0",
           decimals: srcToken.decimals,
-          precisionFractionalPlaces: 4,
+          precisionFractionalPlaces: srcToken.decimals,
         }),
       );
   };
@@ -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,12 +2,13 @@ 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";
 
 export type TxConfigFormProps = {
+  integratorId: string;
   dstChainId: string;
   dstTokenAddr: string;
   customContractCalls: ContractCall[];
@@ -16,6 +17,7 @@ export type TxConfigFormProps = {
 };
 
 const TxConfigForm = ({
+  integratorId,
   dstChainId,
   dstTokenAddr,
   customContractCalls,
@@ -45,11 +47,12 @@ 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}
               dstTokenAddr={dstTokenAddr}
               customContractCalls={customContractCalls}
@@ -67,6 +70,7 @@ const TxConfigForm = ({
 };
 
 export const openTxConfigForm = async ({
+  integratorId,
   dstChainId,
   dstTokenAddr,
   customContractCalls,
@@ -76,8 +80,9 @@ export const openTxConfigForm = async ({
   try {
     return await new Promise(async (resolve) => {
       await waitForInitialization();
-      xswapRoot.render(
+      xpayRoot.render(
         <TxConfigForm
+          integratorId={integratorId}
           dstChainId={dstChainId}
           dstTokenAddr={dstTokenAddr}
           customContractCalls={customContractCalls}
@@ -85,10 +90,10 @@ export const openTxConfigForm = async ({
           supportedChains={supportedChains}
           onSubmit={(route) => {
             resolve(route);
-            xswapRoot.render("");
+            xpayRoot.render("");
           }}
           onClose={() => {
-            xswapRoot.render("");
+            xpayRoot.render("");
           }}
         />,
       );