@xswap-link/sdk 0.2.5 → 0.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xswap-link/sdk",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "JavaScript SDK for XSwap platform",
   "homepage": "https://github.com/xswap-link/xswap-sdk",
   "repository": {

package/src/components/Alert/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 export const Alert = ({ desc }: { desc: string }) => {
   return (
-    <div className="border border-solid border-x_alert rounded-3xl text-x_alert_light text-xs py-0.5 px-2">
+    <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">
       ⚠️ {desc}
     </div>
   );

package/src/components/Skeleton/index.tsx

@@ -8,6 +8,8 @@ type Props = {
 
 export const Skeleton = ({ width, height }: Props) => {
   return (
-    <div className={`bg-current rounded animate-pulse ${width} ${height}`} />
+    <div
+      className={`xpay-bg-current xpay-rounded xpay-animate-pulse ${width} ${height}`}
+    />
   );
 };

package/src/components/TxConfigForm/BalanceComponent.tsx

@@ -43,7 +43,7 @@ export const BalanceComponent: FC<Props> = ({ srcToken, balances }) => {
             precisionFractionalPlaces: 4,
           })
         : 0}
-      <span className="bg-gradient-to-r from-x_blue_light to-x_blue_dark bg-clip-text text-transparent">
+      <span className="xpay-bg-gradient-to-r xpay-from-x_blue_light xpay-to-x_blue_dark xpay-bg-clip-text xpay-text-transparent">
         Max
       </span>
     </>

package/src/components/TxConfigForm/Button.tsx

@@ -9,7 +9,7 @@ interface Props {
 export const Button: FC<Props> = ({ children, onClick, type, disabled }) => {
   return (
     <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={onClick}
       type={type}
       disabled={disabled}

package/src/components/TxConfigForm/ChainListElement.tsx

@@ -19,7 +19,7 @@ export const ChainListElement: FC<Props> = ({
   return (
     <div key={`${chain.ecosystem}-${chain.chainId}`}>
       <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);
@@ -29,7 +29,7 @@ export const ChainListElement: FC<Props> = ({
         {chain.displayName}
       </li>
       {index !== length - 1 && (
-        <div className="h-px mx-2 bg-[rgba(255,255,255,0.15)]"></div>
+        <div className="xpay-h-px xpay-mx-2 xpay-bg-[rgba(255,255,255,0.15)]"></div>
       )}
     </div>
   );

package/src/components/TxConfigForm/Description.tsx

@@ -6,8 +6,8 @@ interface Props {
 
 export const Description: FC<Props> = ({ description }) => {
   return (
-    <div className="flex flex-col items-start rounded-lg px-4 py-2">
-      <div className="w-full flex gap-4 items-start justify-between text-xl">
+    <div className="xpay-flex xpay-flex-col xpay-items-start xpay-rounded-lg xpay-px-4 xpay-py-2">
+      <div className="xpay-w-full xpay-flex xpay-gap-4 xpay-items-start xpay-justify-between xpay-text-xl">
         {description}
       </div>
     </div>

package/src/components/TxConfigForm/ErrorField.tsx

@@ -7,8 +7,10 @@ interface Props {
 export const ErrorField: FC<Props> = ({ error }) => {
   return (
     <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"
       }`}
     >
       {error}

package/src/components/TxConfigForm/FeesDetails.tsx

@@ -32,13 +32,13 @@ export const FeesDetails: FC<Props> = ({
   }, [expressChecked, exceedsExpressDeliveryLimit]);
 
   return (
-    <div className="flex flex-col gap-3 globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-2 sm:p-4 mb-1">
-      <div className="flex w-full items-center justify-between text-xs sm:text-sm">
-        <div className="flex items-center gap-1 font-medium text-white opacity-60">
+    <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">
+      <div className="xpay-flex xpay-w-full xpay-items-center xpay-justify-between xpay-text-xs sm:xpay-text-sm">
+        <div className="xpay-flex xpay-items-center xpay-gap-1 xpay-font-medium xpay-text-white xpay-opacity-60">
           <CoinsIcon />
-          <div className="mr-1">Fees:</div>
+          <div className="xpay-mr-1">Fees:</div>
           {isGettingRoute ? (
-            <Skeleton width="w-20" height="h-4" />
+            <Skeleton width="xpay-w-20" height="xpay-h-4" />
           ) : (
             ` ${weiToHumanReadable({
               amount: safeBigNumberFrom(
@@ -54,13 +54,13 @@ export const FeesDetails: FC<Props> = ({
             })} ${paymentToken?.symbol}`
           )}
         </div>
-        <div className="flex gap-1 items-center">
+        <div className="xpay-flex xpay-gap-1 xpay-items-center">
           {route?.xSwapFees.expressDeliveryFee && !isGettingRoute && (
             <div
-              className={`flex gap-1 items-center font-medium ${
+              className={`xpay-flex xpay-gap-1 xpay-items-center xpay-font-medium ${
                 isExpressDeliveryPossible
-                  ? "text-x_green"
-                  : "text-white opacity-60"
+                  ? "xpay-text-x_green"
+                  : "xpay-text-white xpay-opacity-60"
               }`}
             >
               <TimerIcon />
@@ -69,18 +69,18 @@ export const FeesDetails: FC<Props> = ({
           )}
           <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]"
           >
             {feesDetailsShown ? <ChevronUpIcon /> : <ChevronDownIcon />}
           </div>
         </div>
       </div>
       {feesDetailsShown && (
-        <div className="flex w-full items-center justify-between gap-2">
-          <div className="flex flex-col text-[10px] gap-1">
-            <div className="flex justify-between font-medium text-white opacity-60 gap-1">
+        <div className="xpay-flex xpay-w-full xpay-items-center xpay-justify-between xpay-gap-2">
+          <div className="xpay-flex xpay-flex-col xpay-text-[10px] xpay-gap-1">
+            <div className="xpay-flex xpay-justify-between xpay-font-medium xpay-text-white xpay-opacity-60 xpay-gap-1">
               <div>CCIP Fee:</div>
-              <div className="whitespace-nowrap">
+              <div className="xpay-whitespace-nowrap">
                 {` ${weiToHumanReadable({
                   amount: route?.xSwapFees.ccipFee || "0",
                   decimals: 18,
@@ -88,9 +88,9 @@ export const FeesDetails: FC<Props> = ({
                 })} ${paymentToken?.symbol}`}
               </div>
             </div>
-            <div className="flex justify-between font-medium text-white opacity-60 gap-1">
+            <div className="xpay-flex xpay-justify-between xpay-font-medium xpay-text-white xpay-opacity-60 xpay-gap-1">
               <div>Native Fee:</div>
-              <div className="whitespace-nowrap">
+              <div className="xpay-whitespace-nowrap">
                 {` ${weiToHumanReadable({
                   amount: route?.xSwapFees.xSwapFee.nativeFee || "0",
                   decimals: 18,
@@ -99,14 +99,14 @@ export const FeesDetails: FC<Props> = ({
               </div>
             </div>
           </div>
-          <div className="flex flex-col text-[10px] gap-1">
-            <div className="flex justify-between font-medium text-white opacity-60 gap-1">
+          <div className="xpay-flex xpay-flex-col xpay-text-[10px] xpay-gap-1">
+            <div className="xpay-flex xpay-justify-between xpay-font-medium xpay-text-white xpay-opacity-60 xpay-gap-1">
               <div>Slippage:</div>
-              <div className="whitespace-nowrap">{`${slippage}%`}</div>
+              <div className="xpay-whitespace-nowrap">{`${slippage}%`}</div>
             </div>
-            <div className="flex justify-between font-medium text-white opacity-60 gap-1">
+            <div className="xpay-flex xpay-justify-between xpay-font-medium xpay-text-white xpay-opacity-60 xpay-gap-1">
               <div>Min amount out:</div>
-              <div className="whitespace-nowrap">
+              <div className="xpay-whitespace-nowrap">
                 {weiToHumanReadable({
                   amount: route?.minAmountOut || "0",
                   decimals: dstToken?.decimals || 18,

package/src/components/TxConfigForm/Form.tsx

@@ -202,7 +202,7 @@ export const Form = ({
 
   return (
     <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}
     >
       <TopBar
@@ -224,7 +224,7 @@ export const Form = ({
       {historyTabShown ? (
         <History signer={signer} supportedChains={supportedChains} />
       ) : (
-        <div className="flex flex-col gap-2">
+        <div className="xpay-flex xpay-flex-col xpay-gap-2">
           {desc && <Description description={desc} />}
           <SwapPanel
             amount={amount}

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"
             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

@@ -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>
@@ -93,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>