@xswap-link/sdk 0.3.5 → 0.4.0

package/src/components/TxConfigForm/HistoryCard.tsx

@@ -1,182 +0,0 @@
-import { FC, useCallback, useMemo } from "react";
-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 {
-  transaction: Transaction;
-  supportedChains: Chain[];
-}
-
-export const HistoryCard: FC<Props> = ({ transaction, supportedChains }) => {
-  const date = getDate(transaction.timestamp);
-
-  const supportedTokens: Record<string, Record<string, Token>> = useMemo(() => {
-    const customTokens = JSON.parse(
-      localStorage.getItem("custom-tokens") || "{}",
-    );
-
-    const chainIdToTokenAddressToData: Record<
-      string,
-      Record<string, Token>
-    > = {};
-
-    supportedChains.forEach((chain) => {
-      chainIdToTokenAddressToData[chain.chainId] = {};
-      chain.tokens.forEach((token) => {
-        chainIdToTokenAddressToData[chain.chainId]![token.address] = token;
-      });
-    });
-    return deepMergeObjects(chainIdToTokenAddressToData, customTokens);
-  }, [supportedChains]);
-
-  const findTokenDataByAddressAndChain = useCallback(
-    (tokenAddress: string, chainId: string): Token | undefined => {
-      return supportedTokens[chainId]?.[tokenAddress];
-    },
-    [supportedTokens],
-  );
-
-  const tokenData = findTokenDataByAddressAndChain(
-    transaction.tokenAddress.toLowerCase(),
-    transaction.sourceChainId,
-  );
-  const tokenOutData = transaction.tokenOutAddress
-    ? findTokenDataByAddressAndChain(
-        transaction.tokenOutAddress?.toLowerCase(),
-        transaction.targetChainId,
-      )
-    : undefined;
-  const transferredAmount = weiToHumanReadable({
-    amount: transaction.amountWei,
-    decimals: tokenData?.decimals || 18,
-    precisionFractionalPlaces: 4,
-  });
-  const receivedAmount = weiToHumanReadable({
-    amount: transaction?.tokenOutAmount || "0",
-    decimals: tokenOutData?.decimals || 18,
-    precisionFractionalPlaces: 4,
-  });
-
-  const sourceChainData = supportedChains.find(
-    (chain) => chain.chainId === transaction.sourceChainId,
-  );
-
-  const targetChainData = supportedChains.find(
-    (chain) => chain.chainId === transaction.targetChainId,
-  );
-
-  return (
-    <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="xpay-flex xpay-items-center">
-              <div className="xpay-text-[rgb(250,200,100)]">In progress</div>
-            </div>
-          )}
-
-          {transaction.status === "DONE" && (
-            <div className="xpay-flex xpay-items-center">
-              <div className="xpay-text-[rgb(100,200,100)]">Done</div>
-            </div>
-          )}
-
-          {transaction.status === "REVERTED" && (
-            <div className="xpay-flex xpay-items-center">
-              <div className="xpay-text-[rgb(255,100,100)]">Reverted</div>
-            </div>
-          )}
-
-          <a
-            href={`${
-              supportedChains.find(
-                (chain) => chain.chainId === transaction.sourceChainId,
-              )?.transactionExplorer
-            }/${transaction.hash}`}
-            target="_blank"
-            rel="noreferrer"
-            className="xpay-ml-2 xpay-no-underline visited:xpay-text-white hover:xpay-text-white"
-            aria-label="Show the transaction in the chain explorer"
-          >
-            <div className="xpay-w-3.5 xpay-h-3.5">
-              <ArrowUpRightIcon />
-            </div>
-          </a>
-        </div>
-      </div>
-      <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="xpay-w-5 xpay-h-5 xpay-mr-1"
-            />
-            <div>{sourceChainData?.displayName}</div>
-          </div>
-
-          <div className="xpay-w-3.5 xpay-h-3.5 xpay-my-0 xpay-mx-1.5">
-            <ArrowRightIcon />
-          </div>
-
-          <div className="xpay-flex xpay-items-center">
-            <img
-              src={targetChainData?.image}
-              alt={`${targetChainData?.name} logo`}
-              className="xpay-w-5 xpay-h-5 xpay-mr-1"
-            />
-            <div>{targetChainData?.displayName}</div>
-          </div>
-        </div>
-
-        <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="xpay-ml-1">{tokenData?.symbol}</div>
-              {tokenData?.image ? (
-                <img
-                  src={tokenData?.image}
-                  alt={tokenData?.name || ""}
-                  className="xpay-w-5 xpay-h-5 xpay-ml-1"
-                />
-              ) : (
-                <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="xpay-w-3.5 xpay-h-3.5 xpay-my-0 xpay-mx-1.5">
-                  <ArrowRightIcon />
-                </div>
-                <div className="xpay-flex xpay-items-center">
-                  {Number(receivedAmount) < 0.0001 ? "<0.0001" : receivedAmount}
-                  <div className="xpay-ml-1">{tokenOutData?.symbol}</div>
-
-                  {tokenOutData?.image ? (
-                    <img
-                      src={tokenOutData?.image}
-                      alt={tokenOutData?.name || ""}
-                      className="xpay-w-5 xpay-h-5 xpay-ml-1"
-                    />
-                  ) : (
-                    <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>
-              </>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/components/TxConfigForm/PoweredBy.tsx

@@ -1,12 +0,0 @@
-import { ChainlinkCCIPIcon, XSwapBadgeIcon } from "@src/components/icons";
-
-export const PoweredBy = () => {
-  return (
-    <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 />
-    </div>
-  );
-};

package/src/components/TxConfigForm/Settings.tsx

@@ -1,143 +0,0 @@
-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="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="xpay-cursor-pointer"
-            onClick={() => setSettingsShown(false)}
-          >
-            <CloseIcon />
-          </div>
-        </div>
-        <div>
-          <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="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="xpay-h-full, xpay-w-full xpay-rounded-lg xpay-bg-[rgba(255,255,255,0.3)]"></span>
-                <span
-                  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="xpay-flex xpay-gap-4">
-            <div className="xpay-min-w-[26px] xpay-min-h-[26px] xpay-text-[#ffa726]">
-              <InfoIcon />
-            </div>
-            <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.
-            </div>
-          </div>
-        </div>
-
-        <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={`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
-                      ? "xpay-text-white"
-                      : "xpay-text-[rgba(255,255,255,0.2)]"
-                  } ${
-                    index === slippageActivePresetIndex && !usingSlippageInput
-                      ? "xpay-bg-gradient-to-r xpay-from-[#3681c6] xpay-to-[#2b4a9d]"
-                      : ""
-                  }`}
-                  onClick={() => {
-                    setUsingSlippageInput(false);
-                    setSlippageActivePresetIndex(index);
-                  }}
-                >
-                  {`${preset.toFixed(1)}%`}
-                </div>
-              ))}
-            </div>
-            <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="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) => {
-                  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="xpay-flex xpay-gap-4">
-            <div className="xpay-min-w-[26px] xpay-min-h-[26px] xpay-text-[#ffa726]">
-              <InfoIcon />
-            </div>
-            <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 />
-              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

@@ -1,105 +0,0 @@
-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;
-  route: Route | undefined;
-  dstToken: Token | undefined;
-  dstChain: Chain | undefined;
-}
-
-export const Summary: FC<Props> = ({
-  isGettingRoute,
-  route,
-  dstToken,
-  dstChain,
-}) => {
-  const [prices, setPrices] = useState<TokenPrices>();
-
-  const amountReadable = useMemo(
-    () =>
-      weiToHumanReadable({
-        amount: route?.estAmountOut || "0",
-        decimals: dstToken?.decimals || 18,
-        precisionFractionalPlaces: 8,
-      }),
-    [route, dstToken],
-  );
-
-  useEffect(() => {
-    if (dstChain) {
-      getPrices({ chainId: dstChain.chainId, currency: "USD" }).then((prices) =>
-        setPrices(prices),
-      );
-    }
-  }, [dstChain]);
-
-  return (
-    <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="xpay-w-[100px]"
-              height="xpay-h-[36px]"
-              other="sm:xpay-w-[190px]"
-            />
-          ) : (
-            <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="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="xpay-w-5 xpay-h-5"
-                  src={dstToken?.image}
-                  alt={dstToken?.name}
-                />
-              ) : (
-                <UnknownTokenLogo tokenName={"?"} />
-              )}
-            </div>
-            <p className="xpay-text-base sm:xpay-text-xl">{dstToken?.name}</p>
-          </div>
-          <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>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div className="xpay-pt-2">
-        <UsdPrice
-          prices={prices}
-          token={dstToken}
-          amount={amountReadable}
-          loading={isGettingRoute}
-        />
-      </div>
-      <div className="xpay-absolute xpay-right-[50%] xpay-top-0 xpay-translate-x-1/2 xpay-translate-y-[-60%] xpay-global-border xpay-rounded-xl p-[5px] xpay-bg-[rgba(15,15,15,1)]">
-        <div className="xpay-flex xpay-items-center xpay-justify-center xpay-rounded-lg xpay-w-8 xpay-h-8 xpay-bg-gradient-to-l xpay-from-[rgba(54,129,198,1)] xpay-to-[rgba(43,74,157,1)] ">
-          <ArrowDownIcon />
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/components/TxConfigForm/SwapPanel.tsx

@@ -1,185 +0,0 @@
-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 { ChainListElement } from "./ChainListElement";
-import { BalanceComponent } from "./BalanceComponent";
-import { UsdPrice } from "@src/components/TxConfigForm/UsdPrice";
-
-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: srcToken.decimals,
-        }),
-      );
-  };
-
-  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="xpay-flex xpay-justify-between xpay-global-border xpay-rounded-lg xpay-bg-[rgba(15,15,15,1)] xpay-p-4">
-      <div className="xpay-flex xpay-flex-col xpay-justify-between xpay-gap-2 xpay-overflow-hidden xpay-w-1/2">
-        <div className="xpay-flex xpay-flex-col xpay-gap-1">
-          <p className="xpay-text-white xpay-opacity-60 xpay-text-xs sm:xpay-text-sm xpay-font-medium">
-            You pay
-          </p>
-          <input
-            className="xpay-p-0 xpay-border-none xpay-outline-none xpay-bg-transparent xpay-text-2xl xpay-overflow-ellipsis"
-            value={amount}
-            onChange={(e) => {
-              if (e.target.value === ".") return;
-              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="xpay-flex xpay-items-center xpay-text-sm xpay-text-[rgba(255,255,255,0.6)]">
-          <UsdPrice
-            prices={prices}
-            token={srcToken}
-            amount={amount}
-            loading={false}
-          />
-        </div>
-      </div>
-      <div className="xpay-flex xpay-flex-col xpay-relative xpay-items-end xpay-gap-2.5 xpay-w-1/2 xpay-text-xs">
-        <div
-          className="xpay-flex xpay-gap-2 xpay-items-center xpay-p-2 xpay-max-w-full xpay-cursor-pointer xpay-bg-black xpay-text-white xpay-global-border xpay-rounded-3xl xpay-whitespace-nowrap"
-          onClick={() => {
-            setTokenListShown((state) => !state);
-          }}
-        >
-          <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
-          onClick={handleMaxClick}
-          className="xpay-flex xpay-gap-1 xpay-items-center xpay-font-medium xpay-text-white xpay-opacity-60 xpay-py-0.5 xpay-cursor-pointer"
-        >
-          {signer && (
-            <BalanceComponent balances={balances} srcToken={srcToken} />
-          )}
-        </div>
-        <div
-          ref={buttonRef}
-          className="xpay-bg-black xpay-global-border xpay-rounded-2xl xpay-whitespace-nowrap xpay-flex xpay-items-center xpay-p-2 xpay-cursor-pointer xpay-gap-2"
-          onClick={() => setChainListShown((prev) => !prev)}
-        >
-          <img
-            width="16"
-            height="16"
-            src={srcChain?.image}
-            alt={srcChain?.name}
-          />
-          <div>{srcChain?.displayName}</div>
-          <DownArrowIcon />
-        </div>
-
-        {chainListShown && (
-          <ul
-            ref={listRef}
-            className="xpay-bg-black xpay-global-border xpay-rounded-lg xpay-whitespace-nowrap xpay-z-1 xpay-right-0 xpay-top-10 xpay-px-2 xpay-max-w-full xpay-max-h-[40vh] xpay-overflow-auto xpay-absolute xpay-text-sm xpay-z-20"
-          >
-            {chainListOptions.map((chain, index) => (
-              <ChainListElement
-                index={index}
-                length={supportedChains.length}
-                setSrcChain={setSrcChain}
-                setChainListShown={setChainListShown}
-                chain={chain}
-                key={chain.chainId}
-              />
-            ))}
-          </ul>
-        )}
-      </div>
-    </div>
-  );
-};