@xswap-link/sdk 0.2.3 → 0.2.5

package/package.json

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

package/src/components/TxConfigForm/FeesDetails.tsx

@@ -1,7 +1,8 @@
-import { FC } from "react";
+import { FC, useMemo } from "react";
 import { CoinsIcon, TimerIcon, ChevronUpIcon, ChevronDownIcon } from "../icons";
 import { safeBigNumberFrom, weiToHumanReadable } from "@src/utils";
 import { Route, Token } from "@src/models";
+import { Skeleton } from "@src/components";
 
 interface Props {
   route: Route | undefined;
@@ -9,6 +10,7 @@ interface Props {
   paymentToken: Token | undefined;
   dstToken: Token | undefined;
   expressChecked: boolean;
+  exceedsExpressDeliveryLimit: boolean;
   slippage: string | undefined;
   feesDetailsShown: boolean;
   setFeesDetailsShown: React.Dispatch<React.SetStateAction<boolean>>;
@@ -20,18 +22,23 @@ export const FeesDetails: FC<Props> = ({
   paymentToken,
   dstToken,
   expressChecked,
+  exceedsExpressDeliveryLimit,
   slippage,
   feesDetailsShown,
   setFeesDetailsShown,
 }) => {
+  const isExpressDeliveryPossible = useMemo(() => {
+    return expressChecked && !exceedsExpressDeliveryLimit;
+  }, [expressChecked, exceedsExpressDeliveryLimit]);
+
   return (
-    <div className="flex flex-col gap-3 globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4 mb-1">
-      <div className="flex w-full items-center justify-between text-xs sm:text-sm ">
+    <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">
           <CoinsIcon />
           <div className="mr-1">Fees:</div>
           {isGettingRoute ? (
-            <div className="bg-current rounded animate-pulse w-20 h-4" />
+            <Skeleton width="w-20" height="h-4" />
           ) : (
             ` ${weiToHumanReadable({
               amount: safeBigNumberFrom(
@@ -48,14 +55,18 @@ export const FeesDetails: FC<Props> = ({
           )}
         </div>
         <div className="flex gap-1 items-center">
-          <div
-            className={`flex gap-1 items-center font-medium ${
-              expressChecked ? "text-x_green" : "text-white opacity-60"
-            }`}
-          >
-            <TimerIcon />
-            {expressChecked ? "Fast ~ 30sec " : "Normal ~ 30min"}
-          </div>
+          {route?.xSwapFees.expressDeliveryFee && !isGettingRoute && (
+            <div
+              className={`flex gap-1 items-center font-medium ${
+                isExpressDeliveryPossible
+                  ? "text-x_green"
+                  : "text-white opacity-60"
+              }`}
+            >
+              <TimerIcon />
+              {isExpressDeliveryPossible ? "Fast ~ 30sec " : "Normal ~ 30min"}
+            </div>
+          )}
           <div
             onClick={() => setFeesDetailsShown((x) => !x)}
             className="font-medium text-white opacity-60 cursor-pointer flex items-center w-[15px] h-[9px]"
@@ -65,37 +76,44 @@ export const FeesDetails: FC<Props> = ({
         </div>
       </div>
       {feesDetailsShown && (
-        <div className="flex w-full items-center justify-between ">
+        <div className="flex w-full items-center justify-between gap-2">
           <div className="flex flex-col text-[10px] gap-1">
-            <div className="font-medium text-white opacity-60">
-              CCIP Fee:
-              {` ${weiToHumanReadable({
-                amount: route?.xSwapFees.ccipFee || "0",
-                decimals: 18,
-                precisionFractionalPlaces: 5,
-              })} ${paymentToken?.symbol}`}
+            <div className="flex justify-between font-medium text-white opacity-60 gap-1">
+              <div>CCIP Fee:</div>
+              <div className="whitespace-nowrap">
+                {` ${weiToHumanReadable({
+                  amount: route?.xSwapFees.ccipFee || "0",
+                  decimals: 18,
+                  precisionFractionalPlaces: 5,
+                })} ${paymentToken?.symbol}`}
+              </div>
             </div>
-            <div className="font-medium text-white opacity-60">
-              Native Fee:
-              {` ${weiToHumanReadable({
-                amount: route?.xSwapFees.xSwapFee.nativeFee || "0",
-                decimals: 18,
-                precisionFractionalPlaces: 5,
-              })} ${paymentToken?.symbol}`}
+            <div className="flex justify-between font-medium text-white opacity-60 gap-1">
+              <div>Native Fee:</div>
+              <div className="whitespace-nowrap">
+                {` ${weiToHumanReadable({
+                  amount: route?.xSwapFees.xSwapFee.nativeFee || "0",
+                  decimals: 18,
+                  precisionFractionalPlaces: 5,
+                })} ${paymentToken?.symbol}`}
+              </div>
             </div>
           </div>
           <div className="flex flex-col text-[10px] gap-1">
-            <div className="font-medium text-white opacity-60">
-              Slippage: {`${slippage}%`}
+            <div className="flex justify-between font-medium text-white opacity-60 gap-1">
+              <div>Slippage:</div>
+              <div className="whitespace-nowrap">{`${slippage}%`}</div>
             </div>
-            <div className="font-medium text-white opacity-60">
-              Min amount out:{" "}
-              {weiToHumanReadable({
-                amount: route?.minAmountOut || "0",
-                decimals: dstToken?.decimals || 18,
-                precisionFractionalPlaces: 5,
-              })}{" "}
-              {dstToken?.symbol}
+            <div className="flex justify-between font-medium text-white opacity-60 gap-1">
+              <div>Min amount out:</div>
+              <div className="whitespace-nowrap">
+                {weiToHumanReadable({
+                  amount: route?.minAmountOut || "0",
+                  decimals: dstToken?.decimals || 18,
+                  precisionFractionalPlaces: 5,
+                })}{" "}
+                {dstToken?.symbol}
+              </div>
             </div>
           </div>
         </div>

package/src/components/TxConfigForm/Form.tsx

@@ -3,7 +3,7 @@ import React, { FormEvent, useEffect, useState } from "react";
 import { ethers } from "ethers";
 import { useAccount, useSwitchChain } from "wagmi";
 import { Chain, Route, Token, TokenBalances, TokenPrices } from "@src/models";
-import { getPrices, getRoute } from "@src/services";
+import { getCustomTokenData, getPrices, getRoute } from "@src/services";
 import { getBalances } from "@src/utils";
 import { ROUTE_TIMEOUT_MS } from "@src/constants";
 import { TxConfigFormProps } from "@src/components";
@@ -21,14 +21,17 @@ import { DEFAULT_SOURCE_CHAIN_ID } from "@src/constants";
 import { Button } from "./Button";
 
 export const Form = ({
+  integratorId,
   dstChainId,
   dstTokenAddr,
   customContractCalls,
   desc,
   supportedChains,
   onSubmit,
+  onClose,
 }: TxConfigFormProps & {
   onSubmit: (route: Route) => void;
+  onClose: () => void;
 }) => {
   const [signer, setSigner] = useState<string | undefined>();
   const [dstChain, setDstChain] = useState<Chain>();
@@ -47,6 +50,8 @@ export const Form = ({
   const [formError, setFormError] = useState("");
   const [slippage, setSlippage] = useState<string>("1.5");
   const [feesDetailsShown, setFeesDetailsShown] = useState(false);
+  const [exceedsExpressDeliveryLimit, setExceedsExpressDeliveryLimit] =
+    useState(false);
 
   const debouncedAmount = useDebounce(amount, 1000);
   const account = useAccount();
@@ -73,15 +78,29 @@ export const Form = ({
   }, [supportedChains, dstChainId]);
 
   useEffect(() => {
-    setDstToken(
-      dstChain?.tokens.find(
+    (async () => {
+      if (!dstChain) {
+        return;
+      }
+
+      let dstTokenResult = dstChain?.tokens.find(
         (token) => token.address.toLowerCase() === dstTokenAddr.toLowerCase(),
-      ),
-    );
+      );
+
+      if (!dstTokenResult) {
+        dstTokenResult = await getCustomTokenData(
+          dstChain,
+          dstTokenAddr.toLowerCase(),
+        );
+      }
+
+      setDstToken(dstTokenResult);
+    })();
   }, [dstChain]);
 
   useEffect(() => {
     if (
+      integratorId &&
       srcChain &&
       srcToken &&
       dstChain &&
@@ -100,6 +119,7 @@ export const Form = ({
           `Configuration error: selected token ($${srcToken.symbol} ${srcToken.name}) has unknown decimals param.`,
         );
       getRoute({
+        integratorId,
         fromAmount: ethers.utils
           .parseUnits(debouncedAmount, srcToken.decimals)
           .toString(),
@@ -111,7 +131,7 @@ export const Form = ({
         toToken: dstTokenAddr,
         paymentToken: paymentToken.address,
         slippage: Number(slippage),
-        expressDelivery: expressChecked,
+        expressDelivery: expressChecked && !exceedsExpressDeliveryLimit,
         customContractCalls,
       })
         .then((response) => {
@@ -182,7 +202,7 @@ export const Form = ({
 
   return (
     <form
-      className="flex flex-col gap-2 z-10 my-0 mx-auto p-4 rounded-3xl overflow-hidden font-light w-x_mobile sm:w-x_desktop"
+      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"
       onSubmit={handleSubmit}
     >
       <TopBar
@@ -190,6 +210,7 @@ export const Form = ({
         historyTabShown={historyTabShown}
         setHistoryTabShown={setHistoryTabShown}
         setSettingsShown={setSettingsShown}
+        onClose={onClose}
       />
       {settingsShown && (
         <Settings
@@ -216,6 +237,7 @@ export const Form = ({
             prices={prices}
             supportedChains={supportedChains}
             setSrcChain={setSrcChain}
+            setExceedsExpressDeliveryLimit={setExceedsExpressDeliveryLimit}
           />
           <Summary
             isGettingRoute={isGettingRoute}
@@ -229,6 +251,7 @@ export const Form = ({
             paymentToken={paymentToken}
             dstToken={dstToken}
             expressChecked={expressChecked}
+            exceedsExpressDeliveryLimit={exceedsExpressDeliveryLimit}
             slippage={slippage}
             feesDetailsShown={feesDetailsShown}
             setFeesDetailsShown={setFeesDetailsShown}

package/src/components/TxConfigForm/History.tsx

@@ -21,15 +21,42 @@ export const History: FC<Props> = ({ signer, supportedChains }) => {
       const fetchedTransactions: Transaction[] = [];
       if (downloadedHistory) {
         for (const entry of downloadedHistory.history) {
+          let status: TransactionStatus = "IN_PROGRESS";
+
+          // single chain tx
           if (!entry.source) {
             continue;
           }
-          let status: TransactionStatus;
-          if (entry.failed) status = "REVERTED";
+
+          if (entry.failed) {
+            status = "REVERTED";
+          }
           if (!!entry.target) {
             status = "DONE";
-          } else {
-            status = "IN_PROGRESS";
+          }
+
+          if (entry.transferType === "SINGLE_CHAIN") {
+            if (!entry.target) {
+              continue;
+            }
+
+            const blockTimestampMs = new Date(entry.target.blockTime).getTime();
+            const estimatedDeliveryTimestamp = blockTimestampMs / 1000;
+
+            fetchedTransactions.push({
+              hash: entry.target.transactionHash,
+              timestamp: blockTimestampMs / 1000,
+              sourceChainId: entry.target.blockchainId,
+              targetChainId: entry.target.blockchainId,
+              amountWei: entry.source.tokenAmount,
+              tokenAddress: entry.source.tokenAddress,
+              tokenOutAddress: entry.target?.tokenAmount,
+              tokenOutAmount: entry.target?.tokenAmount,
+              estimatedDeliveryTimestamp,
+              status,
+            });
+
+            continue;
           }
 
           const blockTimestampMs = new Date(entry.source.blockTime).getTime();

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;
@@ -53,20 +54,35 @@ export const Summary: FC<Props> = ({
           ) : (
             <div className="flex gap-2 items-center text-white text-xl sm:text-3xl">
               {amountReadable}
-              <div className="w-4 sm:w-6 h-4 sm:h-6">
-                <img src={dstToken?.image} alt={dstToken?.name} />
-              </div>
-              <p className="text-base sm:text-xl">{dstToken?.symbol}</p>
             </div>
           )}
         </div>
-        <div className="flex flex-col gap-1 text-sm">
-          <p className="text-[rgba(255,255,255,0.6)] text-right">on chain:</p>
-          <div className="flex items-center gap-1 text-white">
-            <div className="w-4 h-4">
-              <img src={dstChain?.image} alt={dstChain?.name} />
+        <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">
+              {dstToken?.image ? (
+                <img
+                  className="w-5 h-5"
+                  src={dstToken?.image}
+                  alt={dstToken?.name}
+                />
+              ) : (
+                <UnknownTokenLogo
+                  tokenName={"?"}
+                  className="token-select__generated-logo"
+                />
+              )}
+            </div>
+            <p className="text-base sm: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">
+                <img src={dstChain?.image} alt={dstChain?.name} />
+              </div>
+              <div>{dstChain?.displayName}</div>
             </div>
-            <div>{dstChain?.displayName}</div>
           </div>
         </div>
       </div>
@@ -75,6 +91,7 @@ export const Summary: FC<Props> = ({
         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)] ">

package/src/components/TxConfigForm/SwapPanel.tsx

@@ -19,6 +19,7 @@ interface Props {
   balances: TokenBalances | undefined;
   prices: TokenPrices | undefined;
   supportedChains: Chain[];
+  setExceedsExpressDeliveryLimit: (exceeds: boolean) => void;
 }
 
 export const SwapPanel: FC<Props> = ({
@@ -32,6 +33,7 @@ export const SwapPanel: FC<Props> = ({
   balances,
   prices,
   supportedChains,
+  setExceedsExpressDeliveryLimit,
 }) => {
   const [chainListShown, setChainListShown] = useState(false);
   const [tokenListShown, setTokenListShown] = useState(false);
@@ -61,7 +63,7 @@ export const SwapPanel: FC<Props> = ({
         weiToHumanReadable({
           amount: balances[srcToken.address]?.toString() || "0",
           decimals: srcToken.decimals,
-          precisionFractionalPlaces: 4,
+          precisionFractionalPlaces: srcToken.decimals,
         }),
       );
   };
@@ -109,6 +111,8 @@ export const SwapPanel: FC<Props> = ({
             token={srcToken}
             amount={amount}
             loading={false}
+            type="src"
+            setExceedsExpressDeliveryLimit={setExceedsExpressDeliveryLimit}
           />
         </div>
       </div>

package/src/components/TxConfigForm/TopBar.tsx

@@ -1,12 +1,13 @@
 import { FC } from "react";
 import { shortAddress } from "@src/utils";
-import { SettingsIcon, HistoryIcon } from "../icons";
+import { SettingsIcon, HistoryIcon, CloseIcon } from "../icons";
 
 interface Props {
   signer: string | undefined;
   setSettingsShown: React.Dispatch<React.SetStateAction<boolean>>;
   historyTabShown: boolean;
   setHistoryTabShown: React.Dispatch<React.SetStateAction<boolean>>;
+  onClose: () => void;
 }
 
 export const TopBar: FC<Props> = ({
@@ -14,15 +15,16 @@ export const TopBar: FC<Props> = ({
   setSettingsShown,
   setHistoryTabShown,
   historyTabShown,
+  onClose,
 }) => {
   return (
-    <div className="flex w-full justify-between items-center mx-auto sm:pl-4 pr-8 pt-2">
+    <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">
         {signer
           ? `Connected wallet: ${shortAddress(signer)}`
           : `Wallet disconnected`}
       </div>
-      <div className="flex gap-2">
+      <div className="flex gap-2 justify-center items-center">
         {!historyTabShown && (
           <div
             onClick={() => setSettingsShown(true)}
@@ -47,6 +49,9 @@ export const TopBar: FC<Props> = ({
             <div>Back</div>
           )}
         </div>
+        <div className="cursor-pointer text-white" onClick={onClose}>
+          <CloseIcon />
+        </div>
       </div>
     </div>
   );

package/src/components/TxConfigForm/UsdPrice.tsx

@@ -1,12 +1,15 @@
 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";
 
 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> = ({
@@ -14,12 +17,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]) {
-      setUsdPrice((Number(amount) * Number(prices[token.address])).toFixed(2));
+      const newUsdPrice = (
+        Number(amount) * Number(prices[token.address])
+      ).toFixed(2);
+      if (type === "src" && setExceedsExpressDeliveryLimit) {
+        setExceedsExpressDeliveryLimit(
+          Number(newUsdPrice) > EXPRESS_DELIVERY_LIMIT,
+        );
+      }
+      setUsdPrice(newUsdPrice);
     }
   }, [token, prices, amount]);
 

package/src/components/TxConfigForm/index.tsx

@@ -2,13 +2,13 @@ import "@src/global.css";
 import { MouseEvent, useMemo } from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { WagmiProvider } from "wagmi";
-import { getWagmiConfig, xswapRoot } from "@src/config";
+import { getWagmiConfig, waitForInitialization, xswapRoot } from "@src/config";
 import { Chain, ContractCall, Route } from "@src/models";
-import { CloseIcon } from "@src/components/icons/CloseIcon";
 import { PoweredBy } from "@src/components/TxConfigForm/PoweredBy";
 import { Form } from "./Form";
 
 export type TxConfigFormProps = {
+  integratorId: string;
   dstChainId: string;
   dstTokenAddr: string;
   customContractCalls: ContractCall[];
@@ -17,6 +17,7 @@ export type TxConfigFormProps = {
 };
 
 const TxConfigForm = ({
+  integratorId,
   dstChainId,
   dstTokenAddr,
   customContractCalls,
@@ -49,21 +50,17 @@ const TxConfigForm = ({
           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}
         >
-          <div className="relative bg-black rounded-3xl w-lg overflow-auto text-white border-2 border-solid border-[rgba(255,255,255,0.1)]">
+          <div className="relative bg-black rounded-3xl overflow-auto text-white border-2 border-solid border-[rgba(255,255,255,0.1)]">
             <Form
+              integratorId={integratorId}
               dstChainId={dstChainId}
               dstTokenAddr={dstTokenAddr}
               customContractCalls={customContractCalls}
               desc={desc}
               supportedChains={supportedChains}
               onSubmit={onSubmit}
+              onClose={onClose}
             />
-            <div
-              className="absolute top-7 right-4 cursor-pointer text-white"
-              onClick={onClose}
-            >
-              <CloseIcon />
-            </div>
             <PoweredBy />
           </div>
         </div>
@@ -73,6 +70,7 @@ const TxConfigForm = ({
 };
 
 export const openTxConfigForm = async ({
+  integratorId,
   dstChainId,
   dstTokenAddr,
   customContractCalls,
@@ -80,9 +78,11 @@ export const openTxConfigForm = async ({
   supportedChains,
 }: TxConfigFormProps): Promise<Route> => {
   try {
-    return await new Promise((resolve) => {
+    return await new Promise(async (resolve) => {
+      await waitForInitialization();
       xswapRoot.render(
         <TxConfigForm
+          integratorId={integratorId}
           dstChainId={dstChainId}
           dstTokenAddr={dstTokenAddr}
           customContractCalls={customContractCalls}

package/src/components/TxStatusButton/index.tsx

@@ -9,6 +9,7 @@ import {
 } from "../icons";
 import { MonitoredTransaction } from "@src/models";
 import { txStatusRoot } from "@src/config";
+import { UnknownTokenLogo } from "../UnknownTokenLogo/UnknownTokenLogo";
 
 interface Props {
   transaction: MonitoredTransaction;
@@ -16,15 +17,14 @@ interface Props {
 
 export const TxStatusButton: FC<Props> = ({ transaction }) => {
   const {
-    fromChain,
-    fromChainImage,
-    fromToken,
-    fromTokenImage,
-    fromAmount,
-    toChain,
-    toChainImage,
+    srcChain: fromChain,
+    srcChainImage: fromChainImage,
+    srcToken: fromToken,
+    srcTokenImage: fromTokenImage,
+    srcAmount: fromAmount,
+    dstChain: toChain,
+    dstChainImage: toChainImage,
     isDone,
-    txHash,
     explorer,
   } = transaction;
   const [isWide, setIsWide] = useState(false);
@@ -70,11 +70,19 @@ export const TxStatusButton: FC<Props> = ({ transaction }) => {
               <div>Sent</div>
               <div>{fromAmount}</div>
               <div>{fromToken}</div>
-              <img
-                className="w-5 h-5"
-                src={fromTokenImage}
-                alt="source token"
-              />
+
+              {fromTokenImage ? (
+                <img
+                  className="w-5 h-5"
+                  src={fromTokenImage}
+                  alt="source token"
+                />
+              ) : (
+                <UnknownTokenLogo
+                  tokenName={"?"}
+                  className="token-select__generated-logo"
+                />
+              )}
             </div>
           </div>
           <a

package/src/components/UnknownTokenLogo/UnknownTokenLogo.tsx

@@ -0,0 +1,14 @@
+interface Props {
+  tokenName: string;
+  className?: string;
+}
+
+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}`}
+    >
+      {tokenName.substring(0, 1)}
+    </div>
+  );
+};

package/src/components/WaitingForInit/index.tsx

@@ -0,0 +1,20 @@
+export const WaitingForInit = () => {
+  return (
+    <div
+      style={{
+        zIndex: 10,
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        backgroundColor: "rgba(0,0,0,0.8)",
+        position: "fixed",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      Waiting for XPay initialization ...
+    </div>
+  );
+};

package/src/components/global.css

@@ -30,5 +30,5 @@
 }
 
 .xswap-tx-status {
-  @apply absolute bottom-5 right-2 flex flex-col gap-3 pl-9 items-end w-full z-50;
+  @apply fixed bottom-5 right-2 flex flex-col gap-3 pl-9 items-end w-full z-50;
 }