@xswap-link/sdk 0.3.5 → 0.4.0

package/src/components/Swap/SwapView/SwapPanel/ChainPanel/index.tsx

@@ -0,0 +1,74 @@
+import { ArrowDownIcon } from "@src/assets/icons";
+import { useSwapContext } from "@src/context";
+import { useModal } from "@src/context/ModalProvider";
+import { Chain } from "@src/models";
+import { useEffect, useMemo } from "react";
+import { useAccount } from "wagmi";
+import { SwapPanelType } from "../../../SwapView";
+import { ChainPicker } from "./ChainPicker";
+
+type Props = {
+  chain: Chain | undefined;
+  type: SwapPanelType;
+};
+
+export const ChainPanel = ({ chain, type }: Props) => {
+  const { supportedChains, srcChain, setSrcChain, setDstChain } =
+    useSwapContext();
+
+  const { chainId } = useAccount();
+
+  // select chain from user wallet
+  useEffect(() => {
+    if (!chainId) return;
+
+    const userChainFromWallet = supportedChains.find(
+      (chain) => chain.chainId === String(chainId),
+    );
+    if (
+      !userChainFromWallet ||
+      srcChain?.chainId === userChainFromWallet.chainId
+    )
+      return;
+
+    setSrcChain(userChainFromWallet);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [chainId]);
+
+  const pickerDisabled = useMemo(() => type === "destination", [type]);
+
+  const { openModal } = useModal();
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() =>
+          openModal(
+            <ChainPicker
+              type={type}
+              supportedChains={supportedChains}
+              setSrcChain={setSrcChain}
+              setDstChain={setDstChain}
+            />,
+          )
+        }
+        disabled={pickerDisabled}
+      >
+        <div className="flex justify-between items-center p-4 gap-8">
+          <div className="flex flex-col font-medium items-start">
+            <p className="text-xs opacity-60">
+              {type === "source" ? "From:" : "To:"}
+            </p>
+            <p className={`${chain ? "" : "opacity-60"}`}>
+              {chain ? chain.displayName : "Select"}
+            </p>
+          </div>
+          <div className={`w-4 h-2 fill-white ${pickerDisabled && "hidden"}`}>
+            <ArrowDownIcon />
+          </div>
+        </div>
+      </button>
+    </>
+  );
+};

package/src/components/Swap/SwapView/SwapPanel/MaxPanel/index.tsx

@@ -0,0 +1,35 @@
+import { useSwapContext } from "@src/context";
+import { weiToHumanReadable } from "@src/utils";
+import { SwapPanelType } from "../../index";
+
+type Props = {
+  type: SwapPanelType;
+};
+export const MaxPanel = ({ type }: Props) => {
+  const { srcToken, srcTokenBalanceWei, srcTokenBalanceInfo, setSrcValue } =
+    useSwapContext();
+
+  return (
+    <button
+      type="button"
+      className={`flex items-center w-16 justify-center p-4 gap-8 ${
+        !srcTokenBalanceInfo && "opacity-60"
+      } ${
+        type === "source" &&
+        "border-l border-solid border-white border-opacity-10"
+      }`}
+      disabled={!srcTokenBalanceInfo}
+      onClick={() =>
+        setSrcValue(
+          weiToHumanReadable({
+            amount: srcTokenBalanceWei,
+            decimals: srcToken?.decimals || 18,
+            precisionFractionalPlaces: srcToken?.decimals || 18,
+          }),
+        )
+      }
+    >
+      {type === "source" && <p className={`border-b border-solid`}>Max</p>}
+    </button>
+  );
+};

package/src/components/Swap/SwapView/SwapPanel/TokenPanel/TokenPicker/QuickPickTokenItem/index.tsx

@@ -0,0 +1,40 @@
+import { TokenLogo } from "@src/components";
+import { useSwapContext } from "@src/context";
+import { TokenOption } from "@src/models";
+import { useMemo } from "react";
+
+type Props = {
+  token: TokenOption;
+  selectedTokenAddress: string | undefined;
+  onClick: () => void;
+};
+export const QuickPickTokenItem = ({
+  token,
+  selectedTokenAddress,
+  onClick,
+}: Props) => {
+  const { supportedChains } = useSwapContext();
+
+  const chain = useMemo(
+    () => supportedChains.find(({ chainId }) => chainId === token.chainId),
+    [supportedChains, token],
+  );
+
+  return (
+    <button
+      type="button"
+      className={`flex gap-2 py-2 pr-[14px] pl-2 items-center border border-solid border-white border-opacity-10 rounded-3xl text-start hover:bg-white hover:bg-opacity-10 ${
+        token.address === selectedTokenAddress
+          ? "bg-white !bg-opacity-10"
+          : "bg-x_gray_500"
+      }`}
+      onClick={onClick}
+    >
+      <TokenLogo token={token} className="w-6" generatedLogoClassName="w-6" />
+      <div className="flex flex-col gap-1 text-xs font-medium !leading-3">
+        <div>{token.symbol}</div>
+        <div className="opacity-60">{chain?.displayName}</div>
+      </div>
+    </button>
+  );
+};

package/src/components/Swap/SwapView/SwapPanel/TokenPanel/TokenPicker/TokenItem/index.tsx

@@ -0,0 +1,62 @@
+import { Skeleton, TokenLogoWithChain } from "@src/components";
+import { useSwapContext } from "@src/context";
+import { TokenOption } from "@src/models";
+import { weiToHumanReadable } from "@src/utils";
+import { ethers } from "ethers";
+import { useMemo } from "react";
+
+type Props = {
+  token: TokenOption;
+  selectedTokenAddress: string | undefined;
+  onClick: () => void;
+};
+export const TokenItem = ({ token, selectedTokenAddress, onClick }: Props) => {
+  const { supportedChains } = useSwapContext();
+
+  const chain = useMemo(
+    () => supportedChains.find(({ chainId }) => chainId === token.chainId),
+    [supportedChains, token],
+  );
+
+  return (
+    <div
+      className={`token-picker-container ${
+        token.address === selectedTokenAddress && "bg-white bg-opacity-10"
+      }`}
+      onClick={onClick}
+    >
+      <TokenLogoWithChain
+        token={token}
+        chain={chain}
+        tokenLogoClassName="w-9"
+        generatedLogoClassName="w-9 min-w-9 h-9 text-[16px]"
+        chainLogoClassName="w-5"
+      />
+      <div className="flex justify-between items-center gap-1 w-full">
+        <div>
+          <div className="text-sm font-medium text-ellipsis">{token.name}</div>
+          <div className="text-xs text-white !text-opacity-60 font-medium">
+            {chain?.displayName}
+          </div>
+        </div>
+        {token.balance && token.decimals ? (
+          <div className="text-xs">
+            {token.balance.eq(0) ||
+            Number(ethers.utils.formatUnits(token.balance, token.decimals)) >
+              0.0001
+              ? weiToHumanReadable({
+                  amount: token.balance.toString(),
+                  decimals: token.decimals,
+                  precisionFractionalPlaces: 4,
+                })
+              : "<0.0001"}
+          </div>
+        ) : (
+          <div>
+            <Skeleton className="w-[48px] h-[12px]" />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/components/Swap/SwapView/SwapPanel/TokenPanel/TokenPicker/index.tsx

@@ -0,0 +1,399 @@
+import { faCheck } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { CloseIcon, CopyIcon, SearchIcon } from "@src/assets/icons";
+import {
+  Button,
+  Spinner,
+  TextInput,
+  TokenLogoWithChain,
+  UnknownTokenLogo,
+} from "@src/components";
+import { SwapPanelType } from "@src/components/Swap/SwapView";
+import { useSwapContext } from "@src/context";
+import { useModal } from "@src/context/ModalProvider";
+import { ERC20Abi } from "@src/contracts";
+import { useEvmContractApi } from "@src/hooks";
+import { Chain, Ecosystem, ImportedTokenData, TokenOption } from "@src/models";
+import { isETHAddressValid, shortAddress } from "@src/utils";
+import { BigNumber, ethers } from "ethers";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { GroupedVirtuoso } from "react-virtuoso";
+import { QuickPickTokenItem } from "./QuickPickTokenItem";
+import { TokenItem } from "./TokenItem";
+
+type Props = {
+  type: SwapPanelType;
+  chain: Chain;
+  tokens: TokenOption[];
+  otherTokens: TokenOption[];
+  selectedTokenAddress?: string;
+  isOpen: boolean;
+  onSelect: (token: TokenOption) => void;
+  setModalOpen: (isModalOpen: boolean) => void;
+};
+export const TokenPicker = ({
+  chain,
+  tokens,
+  otherTokens,
+  selectedTokenAddress,
+  isOpen,
+  onSelect,
+  setModalOpen,
+  type,
+}: Props) => {
+  const [searchValue, setSearchValue] = useState("");
+  const [acceptRisks, setAcceptRisks] = useState(false);
+  const [showImportWarning, setShowImportWarning] = useState(false);
+  const [loadingCustomTokenData, setLoadingCustomTokenData] = useState(false);
+  const [customTokenData, setCustomTokenData] =
+    useState<ImportedTokenData | null>(null);
+  const currentRouteRequestNonce = useRef<number>(0);
+  const tokenSearchRef = useRef<HTMLInputElement | null>(null);
+
+  const { supportedChains, findTokenDataByAddressAndChain } = useSwapContext();
+  const evmContractApi = useEvmContractApi();
+  const { closeModal } = useModal();
+
+  useEffect(() => {
+    setShowImportWarning(false);
+    setAcceptRisks(false);
+  }, [isOpen]);
+
+  const importCustomToken = useCallback(() => {
+    if (customTokenData && isETHAddressValid(searchValue)) {
+      const customTokens = JSON.parse(
+        localStorage.getItem("custom-tokens") || "{}",
+      );
+      const newCustomToken = {
+        address: customTokenData.address,
+        symbol: customTokenData.symbol,
+        name: customTokenData.name,
+        decimals: customTokenData.decimals,
+        quickPick: false,
+        supported: true,
+        priority: 0,
+        chainId: chain.chainId,
+      };
+      customTokens[chain.chainId] = {
+        ...(customTokens[chain.chainId] || {}),
+        [searchValue.toLowerCase()]: newCustomToken,
+      };
+      localStorage.setItem("custom-tokens", JSON.stringify(customTokens));
+      // recalculateSupportedTokens(); TODO?
+      onSelect(newCustomToken);
+      setModalOpen(false);
+    }
+  }, [chain, searchValue, customTokenData, onSelect, setModalOpen]);
+
+  const getCustomTokenData = useCallback(async () => {
+    const nonce = Date.now();
+    currentRouteRequestNonce.current = nonce;
+    const rpcUrl = supportedChains.find(
+      ({ ecosystem, chainId }) =>
+        ecosystem === Ecosystem.EVM && chainId === chain.chainId,
+    )?.publicRpcUrls[0];
+    const customTokenContract = new ethers.Contract(
+      searchValue.toLowerCase(),
+      ERC20Abi,
+      ethers.getDefaultProvider(rpcUrl),
+    );
+    setLoadingCustomTokenData(true);
+    try {
+      const responses = await Promise.all([
+        evmContractApi.query(customTokenContract, "decimals"),
+        evmContractApi.query(customTokenContract, "name"),
+        evmContractApi.query(customTokenContract, "symbol"),
+      ]);
+      if (nonce !== currentRouteRequestNonce.current) {
+        return;
+      }
+      const [decimals, name, symbol] = responses;
+      setCustomTokenData({
+        address: searchValue.toLowerCase(),
+        decimals,
+        name,
+        symbol,
+      });
+    } catch (_) {
+      setCustomTokenData(null);
+    } finally {
+      if (nonce === currentRouteRequestNonce.current) {
+        setLoadingCustomTokenData(false);
+      }
+    }
+  }, [chain, searchValue, evmContractApi, supportedChains]);
+
+  useEffect(() => {
+    if (
+      isETHAddressValid(searchValue) &&
+      !findTokenDataByAddressAndChain(searchValue.toLowerCase(), chain.chainId)
+    ) {
+      getCustomTokenData();
+    } else {
+      setLoadingCustomTokenData(false);
+      setCustomTokenData(null);
+    }
+  }, [searchValue, getCustomTokenData, findTokenDataByAddressAndChain, chain]);
+
+  useEffect(() => {
+    setSearchValue("");
+  }, [isOpen]);
+
+  const isMatch = (value, searchValue) =>
+    value.toLowerCase().indexOf(searchValue.toLowerCase()) > -1;
+
+  const filteredTokens = useMemo(
+    () =>
+      tokens?.filter(
+        (token) =>
+          isMatch(token.symbol, searchValue) ||
+          isMatch(token.name, searchValue) ||
+          token.address === searchValue.toLowerCase(),
+      ),
+    [searchValue, tokens],
+  );
+
+  const otherFilteredTokens = useMemo(
+    () =>
+      otherTokens?.filter(
+        (token) =>
+          isMatch(token.symbol, searchValue) ||
+          isMatch(token.name, searchValue) ||
+          token.address === searchValue.toLowerCase(),
+      ),
+    [searchValue, otherTokens],
+  );
+
+  useEffect(() => {
+    if (isOpen && tokenSearchRef.current) {
+      setTimeout(() => {
+        tokenSearchRef.current?.focus();
+      }, 10); // delay focus a tiny bit to ensure it works
+    }
+  }, [isOpen]);
+
+  const allTokens = useMemo(() => {
+    const filteredTokensSorted = [
+      ...filteredTokens
+        .filter((token) => BigNumber.from(token?.balance || "0").gt(0))
+        .sort((tokenDataA, tokenDataB) => {
+          return tokenDataB.priority - tokenDataA.priority;
+        }),
+      ...filteredTokens
+        .filter((token) => BigNumber.from(token?.balance || "0").eq(0))
+        .sort((tokenDataA, tokenDataB) => {
+          return tokenDataB.priority - tokenDataA.priority;
+        }),
+    ];
+    const otherFilteredTokensSorted = [
+      ...otherFilteredTokens
+        .filter((token) => BigNumber.from(token?.balance || "0").gt(0))
+        .sort((tokenDataA, tokenDataB) => {
+          return tokenDataB.priority - tokenDataA.priority;
+        }),
+      ...otherFilteredTokens
+        .filter((token) => BigNumber.from(token?.balance || "0").eq(0))
+        .sort((tokenDataA, tokenDataB) => {
+          return tokenDataB.priority - tokenDataA.priority;
+        }),
+    ];
+
+    return [...filteredTokensSorted, ...otherFilteredTokensSorted];
+  }, [filteredTokens, otherFilteredTokens]);
+
+  const tokenGroups = [filteredTokens, otherFilteredTokens];
+
+  return showImportWarning ? (
+    <>
+      <div className="flex justify-between">
+        <div className="text-base/4 mb-4">Import token</div>
+        <div className="w-4 h-4 fill-white cursor-pointer" onClick={closeModal}>
+          <CloseIcon />
+        </div>
+      </div>
+      <div className="flex flex-col h-full gap-2">
+        {customTokenData && (
+          <div
+            className={`token-picker-container grow-0 bg-x_gray_500 border border-solid border-white border-opacity-10 rounded-xl py-2 pr-2 pl-4 hover:cursor-pointer`}
+          >
+            <UnknownTokenLogo
+              tokenName={customTokenData.name}
+              className="w-9 h-9 text-[15px]"
+            />
+            <div className="flex justify-between items-center gap-1 overflow-hidden grow">
+              <div className="overflow-hidden whitespace-nowrap text-ellipsis text-sm font-medium">
+                {customTokenData.name}
+              </div>
+              <div className="token-picker__all__symbol">
+                {customTokenData.symbol}
+              </div>
+            </div>
+            <div className="text-sm flex items-center">
+              {shortAddress(searchValue.toLowerCase())}
+              <button
+                type="button"
+                onClick={() =>
+                  navigator.clipboard.writeText(
+                    customTokenData.address.toLowerCase(),
+                  )
+                }
+                aria-label={`Copy ${customTokenData.symbol} token address`}
+                className="flex items-center p-2 fill-white cursor-pointer hover:fill-x_blue_300"
+              >
+                <CopyIcon className="w-5 h-5" />
+              </button>
+            </div>
+          </div>
+        )}
+        <div className="px-2 py-4 rounded-xl border border-x_orange text-sm">
+          Ensure that you have verified the token address and confirmed its
+          correctness
+        </div>
+        <div className=" bg-x_gray_500 border border-solid border-white border-opacity-10 rounded-xl p-2">
+          <div className="text-sm mb-2">
+            Be mindful that anyone can create tokens, even counterfeit versions
+            of existing ones. Certain tokens and their technical specifications
+            might not be compatible with XSwap services. By importing such
+            custom tokens, you acknowledge and consent to the associated risks.
+          </div>
+          <button
+            type="button"
+            onClick={() => setAcceptRisks((state) => !state)}
+            className="flex items-center"
+          >
+            <div className="flex justify-center items-center p-1 w-6 h-6 border-2 border-white rounded-md mr-2">
+              {acceptRisks && (
+                <FontAwesomeIcon icon={faCheck} className="w-4 h-4" />
+              )}
+            </div>
+
+            <div className="font-bold">Accept</div>
+          </button>
+        </div>
+        <div className="flex grow items-end justify-center">
+          <Button
+            type="button"
+            disabled={!acceptRisks}
+            className={`token-picker__import-button w-full ${
+              !acceptRisks ? "!cursor-not-allowed" : ""
+            }`}
+            onClick={importCustomToken}
+          >
+            Import
+          </Button>
+        </div>
+      </div>
+    </>
+  ) : (
+    <>
+      <div className="flex justify-between">
+        <div className="text-base/4 mb-4">{`Pick ${type} token`}</div>
+        <div className="w-4 h-4 fill-white cursor-pointer" onClick={closeModal}>
+          <CloseIcon />
+        </div>
+      </div>
+      <TextInput
+        ref={tokenSearchRef}
+        inputIcon={
+          <div style={{ fill: "#ffffffc0" }}>
+            <SearchIcon />
+          </div>
+        }
+        placeholder="Search name or paste address"
+        value={searchValue}
+        handleChange={setSearchValue}
+      />
+      <div className="flex flex-wrap gap-1 my-4 mx-0">
+        {tokens
+          .filter((token) => token?.quickPick)
+          .map((token) => (
+            <QuickPickTokenItem
+              key={token.address}
+              token={token}
+              selectedTokenAddress={selectedTokenAddress}
+              onClick={() => {
+                onSelect(token);
+                setModalOpen(false);
+              }}
+            />
+          ))}
+      </div>
+      <div className="flex flex-col mx-0 h-full">
+        {loadingCustomTokenData ? (
+          <div className="flex justify-center w-full py-4 px-0">
+            <Spinner className="w-9 h-9" />
+          </div>
+        ) : (
+          <>
+            {customTokenData ? (
+              <div className={`token-picker-container hover:cursor-default`}>
+                <TokenLogoWithChain
+                  token={customTokenData}
+                  chain={chain}
+                  tokenLogoClassName="w-9"
+                  chainLogoClassName="w-5"
+                />
+                <div className="flex justify-between items-center gap-1 overflow-hidden grow">
+                  <div>
+                    <div className="text-sm font-medium text-ellipsis">
+                      {customTokenData.name}
+                    </div>
+                    <div className="text-xs text-white !text-opacity-60 font-medium">
+                      {chain?.displayName}
+                    </div>
+                  </div>
+                  <div className="token-picker__all__symbol">
+                    {customTokenData.symbol}
+                  </div>
+                </div>
+                <div>
+                  <Button
+                    type="button"
+                    className="h-8 py-0 px-4 text-white leading-[14px] rounded-[32px] bg-gradient-to-r from-x_blue_300 to-x_blue_400"
+                    onClick={() => setShowImportWarning(true)}
+                  >
+                    Import
+                  </Button>
+                </div>
+              </div>
+            ) : (
+              <div className="flex flex-col h-full gap-8 w-[calc(100%+32px)] mx-[-16px]">
+                <GroupedVirtuoso
+                  style={{ height: "400px" }}
+                  groupCounts={tokenGroups.map((group) => group?.length)}
+                  groupContent={(index) => (
+                    <div className="py-1 bg-black">
+                      <div className="px-4">
+                        {index === 0
+                          ? `${chain.displayName} network`
+                          : "Other networks"}
+                      </div>
+                      <div className="horizontal-separator" />
+                      {!tokenGroups[index]?.length && (
+                        <div className="text-center py-1">No token found</div>
+                      )}
+                    </div>
+                  )}
+                  itemContent={(index) => {
+                    return (
+                      allTokens[index] && (
+                        <TokenItem
+                          token={allTokens[index]}
+                          selectedTokenAddress={selectedTokenAddress}
+                          onClick={() => {
+                            onSelect(allTokens[index]!);
+                            setModalOpen(false);
+                          }}
+                        />
+                      )
+                    );
+                  }}
+                />
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </>
+  );
+};