@xswap-link/sdk 0.1.0 → 0.1.1

package/src/components/TxConfigForm/History.tsx

@@ -1,7 +1,7 @@
 import { Transaction, TransactionStatus, Chain } from "@src/models";
 import React, { FC, useCallback, useEffect, useState } from "react";
 import { getHistory } from "@src/services";
-import { FALLBACK_CROSSCHAIN_ESTIMATION_TIME } from "@src/constants";
+import { DELIVERY_TIME, EXPRESS_DELIVERY_TIME } from "@src/constants";
 import BigNumberJS from "bignumber.js";
 import { HistoryCard } from "./HistoryCard";
 import { CircularProgressIcon } from "../icons";
@@ -45,23 +45,17 @@ export const History: FC<Props> = ({ signer, supportedChains }) => {
         } else {
           status = "IN_PROGRESS";
         }
-        const timestampMs = new Date(entry.source?.blockTime).getTime();
 
-        let estimatedDeliveryTimestamp = FALLBACK_CROSSCHAIN_ESTIMATION_TIME;
-
-        if (new BigNumberJS(entry.source.valueForInstantCcipRecieve).gt(0)) {
-          estimatedDeliveryTimestamp = timestampMs + 30 * 1000;
-        } else {
-          const blockchainEstimate = timestampMs + 30 * 1000 * 60;
-
-          if (blockchainEstimate) {
-            estimatedDeliveryTimestamp = blockchainEstimate;
-          }
-        }
+        const blockTimestampMs = new Date(entry.source.blockTime).getTime();
+        const estimatedDeliveryTimestamp = new BigNumberJS(
+          entry.source.valueForInstantCcipRecieve,
+        ).gt(0)
+          ? blockTimestampMs + EXPRESS_DELIVERY_TIME
+          : blockTimestampMs + DELIVERY_TIME;
 
         fetchedTransactions.push({
           hash: entry.source.transactionHash,
-          timestamp: timestampMs / 1000,
+          timestamp: blockTimestampMs / 1000,
           sourceChainId: entry.source.blockchainId,
           targetChainId: entry.source.targetBlockchainId,
           amountWei: entry.source.tokenAmount,
@@ -136,24 +130,26 @@ export const History: FC<Props> = ({ signer, supportedChains }) => {
   }, [signer, fetchHistory, getHistory, historyLoadedOnce]);
 
   return (
-    <div className="w-full h-[50vh] overflow-scroll overflow-x-hidden">
-      {mappedHistory?.length === 0 && historyLoadedOnce && (
-        <div className="w-full text-center py-4 px-0 text-[rgb(158,158,158)]">
-          Your history is empty...
-        </div>
-      )}
-      {!mappedHistory && !historyLoadedOnce && (
-        <div className="flex w-full h-full items-center justify-center">
-          <CircularProgressIcon />
-        </div>
-      )}
-      {mappedHistory?.map((transaction, index) => (
-        <HistoryCard
-          key={index}
-          transaction={transaction}
-          supportedChains={supportedChains}
-        />
-      ))}
+    <div className="flex items-center justify-center w-full">
+      <div className="w-full h-[50vh] overflow-scroll overflow-x-hidden">
+        {mappedHistory?.length === 0 && historyLoadedOnce && (
+          <div className="w-full text-center py-4 px-0 text-[rgb(158,158,158)]">
+            Your history is empty...
+          </div>
+        )}
+        {!mappedHistory && !historyLoadedOnce && (
+          <div className="flex w-full h-full items-center justify-center">
+            <CircularProgressIcon />
+          </div>
+        )}
+        {mappedHistory?.map((transaction, index) => (
+          <HistoryCard
+            key={index}
+            transaction={transaction}
+            supportedChains={supportedChains}
+          />
+        ))}
+      </div>
     </div>
   );
 };

package/src/components/TxConfigForm/Settings.tsx

@@ -0,0 +1,137 @@
+import { CloseIcon, InfoIcon, PercentageIcon } from "../icons";
+import { SLIPPAGE_PRESETS } from "@src/constants";
+import { FC, useState, useEffect } from "react";
+import { NUMBER_INPUT_REGEX } from "@src/constants";
+
+interface Props {
+  slippage: string;
+  setSlippage: React.Dispatch<React.SetStateAction<string>>;
+  setSettingsShown: React.Dispatch<React.SetStateAction<boolean>>;
+  expressChecked: boolean;
+  setExpressChecked: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export const Settings: FC<Props> = ({
+  setSlippage,
+  setSettingsShown,
+  slippage,
+  expressChecked,
+  setExpressChecked,
+}) => {
+  const [slippageActivePresetIndex, setSlippageActivePresetIndex] = useState(1);
+  const [usingSlippageInput, setUsingSlippageInput] = useState(false);
+
+  useEffect(() => {
+    if (!usingSlippageInput) {
+      setSlippage(
+        SLIPPAGE_PRESETS[slippageActivePresetIndex]?.toString() || "1.5",
+      );
+    }
+  }, [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="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)]">
+              Express delivery
+            </div>
+            <div>
+              <span
+                className="inline-flex w-14 h-9 p-3 relative align-middle box-border overflow-hidden cursor-pointer"
+                onClick={() => {
+                  setExpressChecked((x) => !x);
+                }}
+              >
+                <span className="h-full, w-full rounded-lg 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"} `}
+                ></span>
+              </span>
+            </div>
+          </div>
+          <div className="flex gap-4">
+            <div className="min-w-[26px] min-h-[26px] text-[#ffa726]">
+              <InfoIcon />
+            </div>
+            <div className="text-xs 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.
+            </div>
+          </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">
+              {SLIPPAGE_PRESETS.map((preset, index) => (
+                <div
+                  key={index}
+                  className={`transition-all cursor-pointer block rounded-lg p-2 border-none text-sm leading-[10px] ${
+                    index === slippageActivePresetIndex && !usingSlippageInput
+                      ? "text-white"
+                      : "text-[rgba(255,255,255,0.2)]"
+                  } ${
+                    index === slippageActivePresetIndex && !usingSlippageInput
+                      ? "bg-gradient-to-r from-[#3681c6] to-[#2b4a9d]"
+                      : ""
+                  }`}
+                  onClick={() => {
+                    setUsingSlippageInput(false);
+                    setSlippageActivePresetIndex(index);
+                  }}
+                >
+                  {`${preset.toFixed(1)}%`}
+                </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">
+              <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"
+                placeholder="1.5"
+                value={usingSlippageInput ? slippage : ""}
+                onChange={(e) => {
+                  if (e.target.value.length > 0) {
+                    if (NUMBER_INPUT_REGEX.test(e.target.value)) {
+                      setUsingSlippageInput(true);
+                      setSlippage(e.target.value.replace(/,/g, "."));
+                    }
+                  } else {
+                    setUsingSlippageInput(false);
+                    setSlippageActivePresetIndex(1);
+                  }
+                }}
+              />
+              <PercentageIcon />
+            </div>
+          </div>
+          <div className="flex gap-4">
+            <div className="min-w-[26px] min-h-[26px] text-[#ffa726]">
+              <InfoIcon />
+            </div>
+            <div className="text-xs 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 />
+              If the trade fails due to too-low slippage, you will receive USDC
+              on the destination chain.
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/TxConfigForm/Summary.tsx

@@ -0,0 +1,57 @@
+import { FC } from "react";
+import { weiToHumanReadable } from "@src/utils";
+import { Chain, Route, Token } from "@src/models";
+import { ArrowDownIcon } from "../icons";
+
+interface Props {
+  isGettingRoute: boolean;
+  amount: string;
+  route: Route | undefined;
+  dstToken: Token | undefined;
+  dstChain: Chain | undefined;
+}
+
+export const Summary: FC<Props> = ({
+  isGettingRoute,
+  amount,
+  route,
+  dstToken,
+  dstChain,
+}) => {
+  return (
+    <div className="flex justify-between globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4 relative">
+      <div className="flex flex-col gap-2">
+        <p className="text-[rgba(255,255,255,0.6)] text-sm">You receive</p>
+        {isGettingRoute && amount.length > 0 ? (
+          <div className="bg-current rounded animate-pulse w-[190px] h-7" />
+        ) : (
+          <div className="flex gap-2 items-center text-white text-2xl">
+            {weiToHumanReadable({
+              amount: route?.estAmountOut || "0",
+              decimals: dstToken?.decimals || 18,
+              precisionFractionalPlaces: 5,
+            })}
+            <div className="w-6 h-6">
+              <img src={dstToken?.image} alt={dstToken?.name} />
+            </div>
+            <p>{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 gap-1 text-white">
+          <div className="w-4 h-4">
+            <img src={dstChain?.image} alt={dstChain?.name} />
+          </div>
+          <div>{dstChain?.displayName}</div>
+        </div>
+      </div>
+      <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)] ">
+          <ArrowDownIcon />
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/TxConfigForm/SwapPanel.tsx

@@ -0,0 +1,191 @@
+import { FC, useState, useEffect, useRef, useMemo } from "react";
+import { NUMBER_INPUT_REGEX } from "@src/constants";
+import { DownArrowIcon } from "../icons";
+import { Token, Chain, TokenBalances, TokenPrices } from "@src/models";
+import { TokenPicker } from "./TokenPicker";
+import { weiToHumanReadable } from "@src/utils";
+import { Alert } from "../Alert";
+import { ChainListElement } from "./ChainListElement";
+import { BalanceComponent } from "./BalanceComponent";
+import BigNumber from "bignumber.js";
+
+interface Props {
+  amount: string;
+  setAmount: React.Dispatch<React.SetStateAction<string>>;
+  srcToken: Token | undefined;
+  setSrcToken: React.Dispatch<React.SetStateAction<Token | undefined>>;
+  setSrcChain: React.Dispatch<React.SetStateAction<Chain | undefined>>;
+  srcChain: Chain | undefined;
+  signer: string | undefined;
+  balances: TokenBalances | undefined;
+  prices: TokenPrices | undefined;
+  supportedChains: Chain[];
+}
+
+export const SwapPanel: FC<Props> = ({
+  amount,
+  setAmount,
+  srcToken,
+  setSrcToken,
+  srcChain,
+  setSrcChain,
+  signer,
+  balances,
+  prices,
+  supportedChains,
+}) => {
+  const [chainListShown, setChainListShown] = useState(false);
+  const [tokenListShown, setTokenListShown] = useState(false);
+  const listRef = useRef(null);
+  const buttonRef = useRef(null);
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (listRef.current && buttonRef.current) {
+      const listElement = listRef.current as HTMLElement;
+      const buttonElement = buttonRef.current as HTMLElement;
+      if (
+        !listElement.contains(event.target as Node) &&
+        !buttonElement.contains(event.target as Node)
+      )
+        setChainListShown(false);
+    }
+  };
+
+  const handleMaxClick = () => {
+    if (
+      balances &&
+      srcToken &&
+      balances[srcToken.address] &&
+      balances[srcToken.address]?.toString() !== "0"
+    )
+      setAmount(
+        weiToHumanReadable({
+          amount: balances[srcToken.address]?.toString() || "0",
+          decimals: srcToken.decimals,
+          precisionFractionalPlaces: 4,
+        }),
+      );
+  };
+
+  useEffect(() => {
+    if (chainListShown) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () =>
+        document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [chainListShown]);
+
+  const chainListOptions = useMemo(
+    () =>
+      supportedChains.filter((chain) => chain.chainId !== srcChain?.chainId),
+    [supportedChains, srcChain],
+  );
+
+  return (
+    <div className="flex flex-col items-start globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4">
+      <div className="w-full flex gap-4 items-start justify-between mb-4">
+        <div className="flex flex-col gap-2 overflow-hidden w-1/2">
+          <p className="text-white opacity-60 text-sm font-medium">You pay</p>
+          <input
+            className="p-0 border-none outline-none bg-transparent text-2xl overflow-ellipsis"
+            value={amount}
+            onChange={(e) => {
+              if (e.target.value === ".") return;
+              if (NUMBER_INPUT_REGEX.test(e.target.value)) {
+                setAmount(e.target.value.replace(/,/g, "."));
+              }
+            }}
+            inputMode="decimal"
+            spellCheck="false"
+            autoComplete="off"
+            autoCorrect="off"
+            placeholder="0"
+          />
+        </div>
+        <div className="flex flex-col relative items-end gap-2.5 w-1/2 text-xs">
+          <div
+            ref={buttonRef}
+            className="bg-black globalBorder rounded-2xl whitespace-nowrap flex items-center p-2 cursor-pointer gap-2"
+            onClick={() => setChainListShown((prev) => !prev)}
+          >
+            <img
+              width="16"
+              height="16"
+              src={srcChain?.image}
+              alt={srcChain?.name}
+            />
+            <div>{srcChain?.displayName}</div>
+            <DownArrowIcon />
+          </div>
+
+          {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"
+            >
+              {chainListOptions.map((chain, index) => (
+                <ChainListElement
+                  index={index}
+                  length={supportedChains.length}
+                  setSrcChain={setSrcChain}
+                  setChainListShown={setChainListShown}
+                  chain={chain}
+                />
+              ))}
+            </ul>
+          )}
+          <div
+            className="flex gap-2 items-center p-2 max-w-full cursor-pointer bg-black text-white globalBorder rounded-3xl whitespace-nowrap"
+            onClick={() => {
+              setTokenListShown((state) => !state);
+            }}
+          >
+            <img
+              height={16}
+              width={16}
+              src={srcToken?.image}
+              alt={srcToken?.name}
+            />
+            <div>{srcToken?.symbol}</div>
+            <DownArrowIcon />
+          </div>
+
+          {tokenListShown && (
+            <TokenPicker
+              onCloseClick={() => setTokenListShown(false)}
+              tokens={srcChain?.tokens}
+              signer={signer}
+              selectedToken={srcToken}
+              setSelectedToken={(token) => setSrcToken(token)}
+              balances={balances}
+            />
+          )}
+        </div>
+      </div>
+
+      <div className="flex justify-between items-center w-full text-sm text-[rgba(255,255,255,0.6)] relative">
+        {srcToken ? (
+          prices && prices[srcToken.address] ? (
+            <div>
+              {`$${(Number(amount) * Number(prices[srcToken.address])).toFixed(
+                2,
+              )}`}
+            </div>
+          ) : (
+            <Alert desc="Unknown price" />
+          )
+        ) : (
+          <>$0.00</>
+        )}
+        <div
+          onClick={handleMaxClick}
+          className="flex gap-1 items-center font-medium text-white opacity-60 py-0.5 cursor-pointer"
+        >
+          {signer && (
+            <BalanceComponent balances={balances} srcToken={srcToken} />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/TxConfigForm/TokenPicker.tsx

@@ -1,6 +1,6 @@
 import React, { MouseEvent, FC, useState, useMemo } from "react";
 import { createPortal } from "react-dom";
-import { SearchIcon } from "../icons";
+import { CloseIcon, SearchIcon } from "../icons";
 import { Token, TokenBalances } from "@src/models";
 import { weiToHumanReadable } from "@src/utils";
 import { Skeleton } from "@src/components";
@@ -10,7 +10,7 @@ interface Props {
   tokens: Token[] | undefined;
   selectedToken: Token | undefined;
   setSelectedToken: (token: Token) => void;
-  signer: string;
+  signer: string | undefined;
   balances: TokenBalances | undefined;
 }
 
@@ -52,6 +52,12 @@ export const TokenPicker: FC<Props> = ({
           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"
         >
           <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
+              onClick={onCloseClick}
+              className="absolute top-4 right-4 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">

package/src/components/TxConfigForm/TopBar.tsx

@@ -0,0 +1,53 @@
+import { FC } from "react";
+import { shortAddress } from "@src/utils";
+import { SettingsIcon, HistoryIcon } from "../icons";
+
+interface Props {
+  signer: string | undefined;
+  setSettingsShown: React.Dispatch<React.SetStateAction<boolean>>;
+  historyTabShown: boolean;
+  setHistoryTabShown: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export const TopBar: FC<Props> = ({
+  signer,
+  setSettingsShown,
+  setHistoryTabShown,
+  historyTabShown,
+}) => {
+  return (
+    <div className="flex w-full justify-between mx-auto pl-4 pr-8 pt-2">
+      <div className="rounded-lg text-[rgba(255,255,255,0.6)] text-base whitespace-nowrap">
+        {signer ? `Connected wallet: ${shortAddress(signer)}` : `Disconnected`}
+      </div>
+      <div className="flex gap-2">
+        {!historyTabShown && (
+          <div
+            onClick={() => setSettingsShown(true)}
+            className="flex items-center text-xs gap-1 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">
+              <SettingsIcon />
+            </div>
+          </div>
+        )}
+        {signer && (
+          <div
+            onClick={() => setHistoryTabShown((x) => !x)}
+            className="flex items-center text-sm gap-1 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">
+                  <HistoryIcon />
+                </div>
+              </>
+            ) : (
+              <div>Back</div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/components/TxConfigForm/index.tsx

@@ -0,0 +1,121 @@
+import "@src/global.css";
+import { MouseEvent, useMemo } from "react";
+import { createRoot, Root } from "react-dom/client";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { WagmiProvider } from "wagmi";
+import { getWagmiConfig } from "@src/config";
+import { Chain, ContractCall, Route } from "@src/models";
+import { CloseIcon } from "@src/components/icons/CloseIcon";
+import { Form } from "./Form";
+import { ChainlinkCCIPIcon, XSwapBadgeIcon } from "../icons";
+
+export type TxConfigFormProps = {
+  dstChainId: string;
+  dstTokenAddr: string;
+  customContractCalls: ContractCall[];
+  desc?: string;
+  supportedChains: Chain[];
+};
+
+const TxConfigForm = ({
+  dstChainId,
+  dstTokenAddr,
+  customContractCalls,
+  desc,
+  supportedChains,
+  onSubmit,
+  onClose,
+}: TxConfigFormProps & {
+  onSubmit: (route: Route) => void;
+  onClose: () => void;
+}) => {
+  const onBackdropClick = (e: MouseEvent) => {
+    e.stopPropagation();
+    e.nativeEvent.stopImmediatePropagation();
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+
+  const queryClient = new QueryClient();
+  const wagmiConfig = useMemo(
+    () => getWagmiConfig(supportedChains),
+    supportedChains,
+  );
+
+  return (
+    <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}
+    >
+      <div className="relative bg-black rounded-3xl w-lg overflow-auto text-white border-2 border-solid border-[rgba(255,255,255,0.1)]">
+        <Form
+          dstChainId={dstChainId}
+          dstTokenAddr={dstTokenAddr}
+          customContractCalls={customContractCalls}
+          desc={desc}
+          supportedChains={supportedChains}
+          onSubmit={onSubmit}
+        />
+        <div
+          className="absolute top-7 right-4 cursor-pointer text-white"
+          onClick={onClose}
+        >
+          <CloseIcon />
+        </div>
+
+        <div className="swappage__poweredby">
+          <span>Powered by</span>
+          <XSwapBadgeIcon />
+          <span>✕</span>
+          <ChainlinkCCIPIcon />
+        </div>
+      </div>
+    </div>
+      </QueryClientProvider>
+    </WagmiProvider>
+  );
+};
+
+export const openTxConfigForm = async ({
+  dstChainId,
+  dstTokenAddr,
+  customContractCalls,
+  desc,
+  supportedChains,
+}: TxConfigFormProps): Promise<Route> => {
+  try {
+    return await new Promise((resolve) => {
+      txConfigFormRoot.render(
+        <TxConfigForm
+          dstChainId={dstChainId}
+          dstTokenAddr={dstTokenAddr}
+          customContractCalls={customContractCalls}
+          desc={desc}
+          supportedChains={supportedChains}
+          onSubmit={(route) => {
+            resolve(route);
+            txConfigFormRoot.render("");
+          }}
+          onClose={() => {
+            txConfigFormRoot.render("");
+          }}
+        />,
+      );
+    });
+  } catch (err) {
+    throw new Error(`XSwap component error, ${err}`);
+  }
+};
+
+// skip on server-side integrations
+let txConfigFormRoot: Root;
+if (typeof document !== "undefined") {
+  const xswapElement = document.createElement("div");
+  xswapElement.setAttribute("id", "txConfigFormRoot");
+  xswapElement.classList.add("xswap");
+  document.body.appendChild(xswapElement);
+  txConfigFormRoot = createRoot(xswapElement);
+}