@xswap-link/sdk 0.2.5 → 0.3.0

package/src/components/TxConfigForm/History.tsx

@@ -100,21 +100,21 @@ export const History: FC<Props> = ({ signer, supportedChains }) => {
 
   if (!signer)
     return (
-      <div className="flex items-center justify-center w-full h-[30vh]">
+      <div className="xpay-flex xpay-items-center xpay-justify-center xpay-w-full xpay-h-[30vh]">
         Connect a wallet to browse history
       </div>
     );
 
   return (
-    <div className="flex items-center justify-center w-full">
-      <div className="w-full h-96 overflow-scroll overflow-x-hidden">
+    <div className="xpay-flex xpay-items-center xpay-justify-center xpay-w-full">
+      <div className="xpay-w-full xpay-h-96 xpay-overflow-scroll xpay-overflow-x-hidden">
         {fetchedHistory?.length === 0 && historyLoadedOnce && (
-          <div className="w-full text-center py-4 px-0 text-[rgb(158,158,158)]">
+          <div className="xpay-w-full xpay-text-center xpay-py-4 xpay-px-0 xpay-text-[rgb(158,158,158)]">
             Your history is empty...
           </div>
         )}
         {!fetchedHistory && !historyLoadedOnce && (
-          <div className="flex w-full h-full items-center justify-center">
+          <div className="xpay-flex xpay-w-full xpay-h-full xpay-items-center xpay-justify-center">
             <CircularProgressIcon />
           </div>
         )}

package/src/components/TxConfigForm/HistoryCard.tsx

@@ -1,14 +1,7 @@
 import { FC, useCallback, useMemo } from "react";
-import { getDate } from "@src/utils";
-import { Transaction, Chain, Token } from "@src/models";
-import { deepMergeObjects, weiToHumanReadable } from "@src/utils";
-import {
-  ArrowRightIcon,
-  ArrowUpRightIcon,
-  CheckIcon,
-  HourGlassIcon,
-  XMarkIcon,
-} from "@src/components/icons";
+import { deepMergeObjects, getDate, weiToHumanReadable } from "@src/utils";
+import { Chain, Token, Transaction } from "@src/models";
+import { ArrowRightIcon, ArrowUpRightIcon } from "@src/components/icons";
 import { MINIMUM_DISPLAYED_TOKEN_AMOUNT } from "@src/constants";
 
 interface Props {
@@ -75,25 +68,25 @@ export const HistoryCard: FC<Props> = ({ transaction, supportedChains }) => {
   );
 
   return (
-    <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">
-      <div className="flex w-full items-center justify-between">
-        <div className="text-sm sm:text-base">{date}</div>
-        <div className="flex items-center">
+    <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">
+      <div className="xpay-flex xpay-w-full xpay-items-center xpay-justify-between">
+        <div className="xpay-text-sm sm:xpay-text-base">{date}</div>
+        <div className="xpay-flex xpay-items-center">
           {transaction.status === "IN_PROGRESS" && (
-            <div className="flex items-center">
-              <div className="text-[rgb(250,200,100)]">In progress</div>
+            <div className="xpay-flex xpay-items-center">
+              <div className="xpay-text-[rgb(250,200,100)]">In progress</div>
             </div>
           )}
 
           {transaction.status === "DONE" && (
-            <div className="flex items-center">
-              <div className="text-[rgb(100,200,100)]">Done</div>
+            <div className="xpay-flex xpay-items-center">
+              <div className="xpay-text-[rgb(100,200,100)]">Done</div>
             </div>
           )}
 
           {transaction.status === "REVERTED" && (
-            <div className="flex items-center">
-              <div className="text-[rgb(255,100,100)]">Reverted</div>
+            <div className="xpay-flex xpay-items-center">
+              <div className="xpay-text-[rgb(255,100,100)]">Reverted</div>
             </div>
           )}
 
@@ -105,76 +98,76 @@ export const HistoryCard: FC<Props> = ({ transaction, supportedChains }) => {
             }/${transaction.hash}`}
             target="_blank"
             rel="noreferrer"
-            className="ml-2 no-underline"
+            className="xpay-ml-2 xpay-no-underline visited:xpay-text-white hover:xpay-text-white"
             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>
-      <div className="flex justify-between flex-wrap gap-2">
-        <div className="flex items-center">
-          <div className="flex items-center">
+      <div className="xpay-flex xpay-justify-between xpay-flex-wrap xpay-gap-2">
+        <div className="xpay-flex xpay-items-center">
+          <div className="xpay-flex xpay-items-center">
             <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"
             />
             <div>{sourceChainData?.displayName}</div>
           </div>
 
-          <div className="w-3.5 h-3.5 my-0 mx-1.5">
+          <div className="xpay-w-3.5 xpay-h-3.5 xpay-my-0 xpay-mx-1.5">
             <ArrowRightIcon />
           </div>
 
-          <div className="flex items-center">
+          <div className="xpay-flex xpay-items-center">
             <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"
             />
             <div>{targetChainData?.displayName}</div>
           </div>
         </div>
 
-        <div className="flex items-center mb-2 last:mb-0">
-          <div className="flex items-center flex-wrap">
-            <div className="flex items-center">
+        <div className="xpay-flex xpay-items-center xpay-mb-2 last:xpay-mb-0">
+          <div className="xpay-flex xpay-items-center xpay-flex-wrap">
+            <div className="xpay-flex xpay-items-center">
               {Number(transferredAmount) < MINIMUM_DISPLAYED_TOKEN_AMOUNT
                 ? `<${MINIMUM_DISPLAYED_TOKEN_AMOUNT}`
                 : transferredAmount}
-              <div className="ml-1">{tokenData?.symbol}</div>
+              <div className="xpay-ml-1">{tokenData?.symbol}</div>
               {tokenData?.image ? (
                 <img
                   src={tokenData?.image}
                   alt={tokenData?.name || ""}
-                  className="w-5 h-5 ml-1"
+                  className="xpay-w-5 xpay-h-5 xpay-ml-1"
                 />
               ) : (
-                <div className="flex items-center justify-center w-5 h-5 text-[10px] ml-1 rounded-full bg-[#272e40] text-[#e0e7fa]">
+                <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]">
                   {tokenData?.symbol.substring(0, 1)}
                 </div>
               )}
             </div>
             {transaction.tokenOutAddress && (
               <>
-                <div className="w-3.5 h-3.5 my-0 mx-1.5">
+                <div className="xpay-w-3.5 xpay-h-3.5 xpay-my-0 xpay-mx-1.5">
                   <ArrowRightIcon />
                 </div>
-                <div className="flex items-center">
+                <div className="xpay-flex xpay-items-center">
                   {Number(receivedAmount) < 0.0001 ? "<0.0001" : receivedAmount}
-                  <div className="ml-1">{tokenOutData?.symbol}</div>
+                  <div className="xpay-ml-1">{tokenOutData?.symbol}</div>
 
                   {tokenOutData?.image ? (
                     <img
                       src={tokenOutData?.image}
                       alt={tokenOutData?.name || ""}
-                      className="w-5 h-5 ml-1"
+                      className="xpay-w-5 xpay-h-5 xpay-ml-1"
                     />
                   ) : (
-                    <div className="flex items-center justify-center w-5 h-5 text-[10px] ml-1 rounded-full bg-[#272e40] text-[#e0e7fa]">
+                    <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]">
                       {tokenData?.symbol.substring(0, 1)}
                     </div>
                   )}

package/src/components/TxConfigForm/PoweredBy.tsx

@@ -2,8 +2,8 @@ import { ChainlinkCCIPIcon, XSwapBadgeIcon } from "@src/components/icons";
 
 export const PoweredBy = () => {
   return (
-    <div className="flex justify-center items-center gap-2 my-3">
-      <span className="text-x_grey">Powered by</span>
+    <div className="xpay-flex xpay-justify-center xpay-items-center xpay-gap-2 xpay-my-3">
+      <span className="xpay-text-x_grey">Powered by</span>
       <XSwapBadgeIcon />
       <span>✕</span>
       <ChainlinkCCIPIcon />

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

@@ -27,7 +27,7 @@ export const Summary: FC<Props> = ({
       weiToHumanReadable({
         amount: route?.estAmountOut || "0",
         decimals: dstToken?.decimals || 18,
-        precisionFractionalPlaces: 5,
+        precisionFractionalPlaces: 8,
       }),
     [route, dstToken],
   );
@@ -41,44 +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-5 h-5">
+        <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="w-5 h-5"
+                  className="xpay-w-5 xpay-h-5"
                   src={dstToken?.image}
                   alt={dstToken?.name}
                 />
               ) : (
-                <UnknownTokenLogo
-                  tokenName={"?"}
-                  className="token-select__generated-logo"
-                />
+                <UnknownTokenLogo tokenName={"?"} />
               )}
             </div>
-            <p className="text-base sm:text-xl">{dstToken?.name}</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>
@@ -86,15 +87,16 @@ export const Summary: FC<Props> = ({
           </div>
         </div>
       </div>
-      <UsdPrice
-        prices={prices}
-        token={dstToken}
-        amount={amountReadable}
-        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-pt-2">
+        <UsdPrice
+          prices={prices}
+          token={dstToken}
+          amount={amountReadable}
+          loading={isGettingRoute}
+        />
+      </div>
+      <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

@@ -19,7 +19,6 @@ interface Props {
   balances: TokenBalances | undefined;
   prices: TokenPrices | undefined;
   supportedChains: Chain[];
-  setExceedsExpressDeliveryLimit: (exceeds: boolean) => void;
 }
 
 export const SwapPanel: FC<Props> = ({
@@ -33,7 +32,6 @@ export const SwapPanel: FC<Props> = ({
   balances,
   prices,
   supportedChains,
-  setExceedsExpressDeliveryLimit,
 }) => {
   const [chainListShown, setChainListShown] = useState(false);
   const [tokenListShown, setTokenListShown] = useState(false);
@@ -83,14 +81,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,20 +103,18 @@ 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}
             amount={amount}
             loading={false}
-            type="src"
-            setExceedsExpressDeliveryLimit={setExceedsExpressDeliveryLimit}
           />
         </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 +141,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 +149,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 +165,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
@@ -178,6 +174,7 @@ export const SwapPanel: FC<Props> = ({
                 setSrcChain={setSrcChain}
                 setChainListShown={setChainListShown}
                 chain={chain}
+                key={chain.chainId}
               />
             ))}
           </ul>