@xswap-link/sdk 0.2.5 → 0.3.0

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

@@ -1,15 +1,12 @@
 import { Alert, Skeleton } from "@src/components";
 import { Token, TokenPrices } from "@src/models";
-import { FC, useEffect, useMemo, useState } from "react";
-import { EXPRESS_DELIVERY_LIMIT } from "@src/constants";
+import { FC, useEffect, useState } from "react";
 
 type Props = {
   prices: TokenPrices | undefined;
   token: Token | undefined;
   amount: string | undefined;
   loading: boolean;
-  type: "src" | "dst";
-  setExceedsExpressDeliveryLimit?: (exceeds: boolean) => void;
 };
 
 export const UsdPrice: FC<Props> = ({
@@ -17,29 +14,22 @@ export const UsdPrice: FC<Props> = ({
   token,
   amount = "0",
   loading = false,
-  type,
-  setExceedsExpressDeliveryLimit,
 }) => {
   const [usdPrice, setUsdPrice] = useState<string>("0.00");
 
   useEffect(() => {
     if (token && prices && prices[token.address]) {
       const newUsdPrice = (
-        Number(amount) * Number(prices[token.address])
+        Number(amount) * Number(prices[token.address.toLowerCase()])
       ).toFixed(2);
-      if (type === "src" && setExceedsExpressDeliveryLimit) {
-        setExceedsExpressDeliveryLimit(
-          Number(newUsdPrice) > EXPRESS_DELIVERY_LIMIT,
-        );
-      }
       setUsdPrice(newUsdPrice);
     }
   }, [token, prices, amount]);
 
   return (
-    <div className="opacity-60 py-4">
+    <div className="xpay-opacity-60">
       {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

@@ -1,8 +1,8 @@
 import "@src/global.css";
-import { MouseEvent, useMemo } from "react";
+import { MouseEvent, useMemo, useState } 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";
@@ -14,6 +14,8 @@ export type TxConfigFormProps = {
   customContractCalls: ContractCall[];
   desc?: string;
   supportedChains: Chain[];
+  retrunTransactions?: boolean;
+  dstDisplayTokenAddr?: string;
 };
 
 const TxConfigForm = ({
@@ -23,16 +25,19 @@ const TxConfigForm = ({
   customContractCalls,
   desc,
   supportedChains,
+  retrunTransactions,
+  dstDisplayTokenAddr,
   onSubmit,
   onClose,
 }: TxConfigFormProps & {
   onSubmit: (route: Route) => void;
   onClose: () => void;
 }) => {
+  const [backdropClickDisabled, setBackdropClickDisabled] = useState(false);
   const onBackdropClick = (e: MouseEvent) => {
     e.stopPropagation();
     e.nativeEvent.stopImmediatePropagation();
-    if (e.target === e.currentTarget) {
+    if (e.target === e.currentTarget && !backdropClickDisabled) {
       onClose();
     }
   };
@@ -47,10 +52,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"
-          onClick={onBackdropClick}
+          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"
+          onMouseDown={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}
@@ -58,8 +63,14 @@ const TxConfigForm = ({
               customContractCalls={customContractCalls}
               desc={desc}
               supportedChains={supportedChains}
+              wagmiConfig={wagmiConfig}
+              retrunTransactions={!!retrunTransactions}
+              dstDisplayTokenAddr={dstDisplayTokenAddr}
               onSubmit={onSubmit}
               onClose={onClose}
+              setBackdropClickDisabled={(disabled: boolean) =>
+                setBackdropClickDisabled(disabled)
+              }
             />
             <PoweredBy />
           </div>
@@ -76,11 +87,19 @@ export const openTxConfigForm = async ({
   customContractCalls,
   desc,
   supportedChains,
+  retrunTransactions,
+  dstDisplayTokenAddr,
 }: TxConfigFormProps): Promise<Route> => {
   try {
+    if (xpayRoot === null) {
+      throw new Error("XPay was incorrectly initialised");
+    }
     return await new Promise(async (resolve) => {
       await waitForInitialization();
-      xswapRoot.render(
+      if (xpayRoot === null) {
+        throw new Error("XPay was incorrectly initialised");
+      }
+      xpayRoot.render(
         <TxConfigForm
           integratorId={integratorId}
           dstChainId={dstChainId}
@@ -88,12 +107,20 @@ export const openTxConfigForm = async ({
           customContractCalls={customContractCalls}
           desc={desc}
           supportedChains={supportedChains}
+          retrunTransactions={retrunTransactions}
+          dstDisplayTokenAddr={dstDisplayTokenAddr}
           onSubmit={(route) => {
-            resolve(route);
-            xswapRoot.render("");
+            if (retrunTransactions) {
+              resolve(route);
+            }
+            if (xpayRoot) {
+              xpayRoot.render("");
+            }
           }}
           onClose={() => {
-            xswapRoot.render("");
+            if (xpayRoot) {
+              xpayRoot.render("");
+            }
           }}
         />,
       );

package/src/components/TxStatusButton/index.tsx

@@ -8,8 +8,9 @@ import {
   XSwapLogo,
 } from "../icons";
 import { MonitoredTransaction } from "@src/models";
-import { txStatusRoot } from "@src/config";
+import { xpayTxStatusRoot } from "@src/config";
 import { UnknownTokenLogo } from "../UnknownTokenLogo/UnknownTokenLogo";
+import { Spinner } from "../Spinner";
 
 interface Props {
   transaction: MonitoredTransaction;
@@ -32,56 +33,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,32 +94,32 @@ 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">
-                  <CircularProgressIcon />
+                <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">
+                  <Spinner width="10" height="10" />
                 </div>
               </>
             )}
@@ -154,5 +159,14 @@ export const renderTxStatusButtons = () => {
   const buttons = renderedTransactions.map((item) => (
     <TxStatusButton key={item.txHash} transaction={item} />
   ));
-  txStatusRoot.render(buttons);
+
+  if (xpayTxStatusRoot === null) {
+    throw new Error("XPay was incorrectly initialised");
+  }
+
+  xpayTxStatusRoot.render(
+    <div className="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">
+      {buttons}
+    </div>,
+  );
 };

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/components/icons/ErrorIcon.tsx

@@ -0,0 +1,32 @@
+export const ErrorIcon = () => {
+  return (
+    <svg
+      width="81"
+      height="80"
+      viewBox="0 0 81 80"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g id="error_FILL0_wght400_GRAD0_opsz24 1">
+        <path
+          id="Vector"
+          d="M40.5001 56.6667C41.4445 56.6667 42.2362 56.3473 42.8751 55.7084C43.514 55.0695 43.8334 54.2779 43.8334 53.3334C43.8334 52.389 43.514 51.5973 42.8751 50.9584C42.2362 50.3195 41.4445 50.0001 40.5001 50.0001C39.5556 50.0001 38.764 50.3195 38.1251 50.9584C37.4862 51.5973 37.1667 52.389 37.1667 53.3334C37.1667 54.2779 37.4862 55.0695 38.1251 55.7084C38.764 56.3473 39.5556 56.6667 40.5001 56.6667ZM37.1667 43.3334H43.8334V23.3334H37.1667V43.3334ZM40.5001 73.3334C35.889 73.3334 31.5556 72.4584 27.5001 70.7084C23.4445 68.9584 19.9167 66.5834 16.9167 63.5834C13.9167 60.5834 11.5417 57.0556 9.79175 53.0001C8.04175 48.9445 7.16675 44.6112 7.16675 40.0001C7.16675 35.389 8.04175 31.0556 9.79175 27.0001C11.5417 22.9445 13.9167 19.4167 16.9167 16.4167C19.9167 13.4167 23.4445 11.0417 27.5001 9.29175C31.5556 7.54175 35.889 6.66675 40.5001 6.66675C45.1112 6.66675 49.4445 7.54175 53.5001 9.29175C57.5556 11.0417 61.0834 13.4167 64.0834 16.4167C67.0834 19.4167 69.4584 22.9445 71.2084 27.0001C72.9584 31.0556 73.8334 35.389 73.8334 40.0001C73.8334 44.6112 72.9584 48.9445 71.2084 53.0001C69.4584 57.0556 67.0834 60.5834 64.0834 63.5834C61.0834 66.5834 57.5556 68.9584 53.5001 70.7084C49.4445 72.4584 45.1112 73.3334 40.5001 73.3334ZM40.5001 66.6667C47.9445 66.6667 54.2501 64.0834 59.4167 58.9167C64.5834 53.7501 67.1667 47.4445 67.1667 40.0001C67.1667 32.5556 64.5834 26.2501 59.4167 21.0834C54.2501 15.9167 47.9445 13.3334 40.5001 13.3334C33.0556 13.3334 26.7501 15.9167 21.5834 21.0834C16.4167 26.2501 13.8334 32.5556 13.8334 40.0001C13.8334 47.4445 16.4167 53.7501 21.5834 58.9167C26.7501 64.0834 33.0556 66.6667 40.5001 66.6667Z"
+          fill="url(#paint0_linear_230_166)"
+        />
+      </g>
+      <defs>
+        <linearGradient
+          id="paint0_linear_230_166"
+          x1="7.16675"
+          y1="6.66675"
+          x2="77.4571"
+          y2="10.7358"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#F44336" />
+          <stop offset="1" stopColor="#C62828" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};

package/src/components/icons/SignIcon.tsx

@@ -0,0 +1,17 @@
+export const SignIcon = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M4 21V16.75L17.175 3.6C17.375 3.4 17.6 3.25 17.85 3.15C18.1 3.05 18.35 3 18.6 3C18.8667 3 19.1208 3.05 19.3625 3.15C19.6042 3.25 19.8167 3.4 20 3.6L21.4 5C21.6 5.18333 21.75 5.39583 21.85 5.6375C21.95 5.87917 22 6.13333 22 6.4C22 6.65 21.95 6.9 21.85 7.15C21.75 7.4 21.6 7.625 21.4 7.825L8.25 21H4ZM6 19H7.4L17.225 9.2L16.525 8.475L15.8 7.775L6 17.6V19ZM16.525 8.475L15.8 7.775L17.225 9.2L16.525 8.475ZM14 21C15.2333 21 16.375 20.6917 17.425 20.075C18.475 19.4583 19 18.6 19 17.5C19 16.9 18.8417 16.3833 18.525 15.95C18.2083 15.5167 17.7833 15.1417 17.25 14.825L15.775 16.3C16.1583 16.4667 16.4583 16.65 16.675 16.85C16.8917 17.05 17 17.2667 17 17.5C17 17.8833 16.6958 18.2292 16.0875 18.5375C15.4792 18.8458 14.7833 19 14 19C13.7167 19 13.4792 19.0958 13.2875 19.2875C13.0958 19.4792 13 19.7167 13 20C13 20.2833 13.0958 20.5208 13.2875 20.7125C13.4792 20.9042 13.7167 21 14 21ZM4.575 13.35L6.075 11.85C5.74167 11.7167 5.47917 11.5792 5.2875 11.4375C5.09583 11.2958 5 11.15 5 11C5 10.8 5.15 10.6 5.45 10.4C5.75 10.2 6.38333 9.89167 7.35 9.475C8.81667 8.84167 9.79167 8.26667 10.275 7.75C10.7583 7.23333 11 6.65 11 6C11 5.08333 10.6333 4.35417 9.9 3.8125C9.16667 3.27083 8.2 3 7 3C6.25 3 5.57917 3.13333 4.9875 3.4C4.39583 3.66667 3.94167 3.99167 3.625 4.375C3.44167 4.59167 3.36667 4.83333 3.4 5.1C3.43333 5.36667 3.55833 5.58333 3.775 5.75C3.99167 5.93333 4.23333 6.00833 4.5 5.975C4.76667 5.94167 4.99167 5.83333 5.175 5.65C5.40833 5.41667 5.66667 5.25 5.95 5.15C6.23333 5.05 6.58333 5 7 5C7.68333 5 8.1875 5.1 8.5125 5.3C8.8375 5.5 9 5.73333 9 6C9 6.23333 8.85417 6.44583 8.5625 6.6375C8.27083 6.82917 7.6 7.16667 6.55 7.65C5.21667 8.23333 4.29167 8.7625 3.775 9.2375C3.25833 9.7125 3 10.3 3 11C3 11.5333 3.14167 11.9875 3.425 12.3625C3.70833 12.7375 4.09167 13.0667 4.575 13.35Z"
+        fill="white"
+        fillOpacity="0.5"
+      />
+    </svg>
+  );
+};

package/src/components/icons/SuccessIcon.tsx

@@ -0,0 +1,29 @@
+export const SuccessIcon = () => {
+  return (
+    <svg
+      width="86"
+      height="85"
+      viewBox="0 0 86 85"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M38.0416 58.7916L63.0103 33.8228L58.052 28.8645L38.0416 48.8749L27.9478 38.7812L22.9895 43.7395L38.0416 58.7916ZM42.9999 77.9166C38.1006 77.9166 33.4964 76.9869 29.1874 75.1275C24.8784 73.2681 21.1301 70.7447 17.9426 67.5572C14.7551 64.3697 12.2317 60.6214 10.3723 56.3124C8.51294 52.0034 7.58325 47.3992 7.58325 42.4999C7.58325 37.6006 8.51294 32.9964 10.3723 28.6874C12.2317 24.3784 14.7551 20.6301 17.9426 17.4426C21.1301 14.2551 24.8784 11.7317 29.1874 9.87231C33.4964 8.01294 38.1006 7.08325 42.9999 7.08325C47.8992 7.08325 52.5034 8.01294 56.8124 9.87231C61.1214 11.7317 64.8697 14.2551 68.0572 17.4426C71.2447 20.6301 73.7681 24.3784 75.6275 28.6874C77.4869 32.9964 78.4166 37.6006 78.4166 42.4999C78.4166 47.3992 77.4869 52.0034 75.6275 56.3124C73.7681 60.6214 71.2447 64.3697 68.0572 67.5572C64.8697 70.7447 61.1214 73.2681 56.8124 75.1275C52.5034 76.9869 47.8992 77.9166 42.9999 77.9166ZM42.9999 70.8332C50.9096 70.8332 57.6093 68.0885 63.0989 62.5989C68.5885 57.1093 71.3332 50.4096 71.3332 42.4999C71.3332 34.5902 68.5885 27.8905 63.0989 22.401C57.6093 16.9114 50.9096 14.1666 42.9999 14.1666C35.0902 14.1666 28.3905 16.9114 22.901 22.401C17.4114 27.8905 14.6666 34.5902 14.6666 42.4999C14.6666 50.4096 17.4114 57.1093 22.901 62.5989C28.3905 68.0885 35.0902 70.8332 42.9999 70.8332Z"
+        fill="url(#paint0_linear_1287_1610)"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_1287_1610"
+          x1="7.58325"
+          y1="7.08325"
+          x2="82.2668"
+          y2="11.4066"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#4CAF50" />
+          <stop offset="1" stopColor="#2E7D32" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};