@xswap-link/sdk 0.0.13 → 0.1.1

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

@@ -0,0 +1,171 @@
+import React, { MouseEvent, FC, useState, useMemo } from "react";
+import { createPortal } from "react-dom";
+import { CloseIcon, SearchIcon } from "../icons";
+import { Token, TokenBalances } from "@src/models";
+import { weiToHumanReadable } from "@src/utils";
+import { Skeleton } from "@src/components";
+
+interface Props {
+  onCloseClick: () => void;
+  tokens: Token[] | undefined;
+  selectedToken: Token | undefined;
+  setSelectedToken: (token: Token) => void;
+  signer: string | undefined;
+  balances: TokenBalances | undefined;
+}
+
+export const TokenPicker: FC<Props> = ({
+  onCloseClick,
+  tokens,
+  selectedToken,
+  setSelectedToken,
+  signer,
+  balances,
+}) => {
+  const [searchValue, setSearchValue] = useState("");
+
+  const modalRoot = document.querySelector(".xswap");
+
+  const onBackdropClick = (e: MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+    e.nativeEvent.stopImmediatePropagation();
+    if (e.target === e.currentTarget) {
+      onCloseClick();
+    }
+  };
+
+  const filteredTokens = useMemo(() => {
+    const isMatch = (value: string, searchValue: string) =>
+      value.toLowerCase().indexOf(searchValue.toLowerCase()) > -1;
+    return tokens?.filter(
+      (token) =>
+        isMatch(token.symbol, searchValue) ||
+        isMatch(token.name, searchValue) ||
+        token.address === searchValue.toLowerCase(),
+    );
+  }, [searchValue, tokens]);
+
+  return modalRoot
+    ? createPortal(
+        <div
+          onClick={onBackdropClick}
+          className="box-border fixed h-full w-full z-[999] top-0 left-0 bg-[rgba(0,0,0,0.8)] flex items-center justify-center p-5"
+        >
+          <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">
+                <SearchIcon />
+              </div>
+              <input
+                placeholder="Search name or paste address"
+                value={searchValue}
+                onChange={(e) => setSearchValue(e.target.value)}
+                className="relative h-[41px] leading-[41px] font-normal z-[1] w-full text-white bg-transparent border-none outline-none placeholder:text-sm"
+              />
+            </div>
+            <div className="my-4 mx-0 flex flex-wrap gap-3">
+              {tokens
+                ?.filter((token) => token?.quickPick)
+                .map((token) => (
+                  <div
+                    key={token.address}
+                    className={`flex gap-2 py-1 px-2 items-center bg-[rgb(15,15,15)] rounded-2xl border border-solid border-[rgba(255,255,255,0.1)] hover:bg-[rgb(25,25,25)] hover:cursor-pointer ${
+                      token.address === selectedToken?.address
+                        ? "bg-[rgb(35, 35, 35)]"
+                        : ""
+                    }`}
+                    onClick={() => {
+                      setSelectedToken(token);
+                      onCloseClick();
+                    }}
+                  >
+                    <img src={token.image} alt={token.name} className="w-5" />
+                    <div className="text-sm">{token.symbol}</div>
+                  </div>
+                ))}
+            </div>
+            <div className="h-[2px] my-0 mx-[-24px] w-[100%+48px] px-12 bg-[rgba(255,255,255,0.1)]" />
+            <div className="overflow-y-scroll h-full mx-[-24px] w-[100%+48px] flex flex-col">
+              {filteredTokens && filteredTokens.length > 0 ? (
+                filteredTokens
+                  .sort((a, b) =>
+                    balances &&
+                    balances[a.address] &&
+                    balances[b.address] &&
+                    balances[a.address]?.lte(balances[b.address] || "0")
+                      ? 1
+                      : -1,
+                  )
+                  .map((token, index) => (
+                    <div
+                      key={`${index}_${token.address}`}
+                      className={`flex gap-3 py-2 px-[24px] w-full items-center hover:bg-[rgb(25,25,25)] hover:cursor-pointer ${
+                        token.address === selectedToken?.address
+                          ? "bg-[rgb(35,35,35)]"
+                          : ""
+                      }`}
+                      onClick={() => {
+                        setSelectedToken(token);
+                        onCloseClick();
+                      }}
+                    >
+                      {token.image ? (
+                        <img
+                          src={token.image}
+                          alt={token.name}
+                          className="token-picker__all__logo"
+                        />
+                      ) : (
+                        <div className="flex items-center justify-center w-9 h-9 text-[15px] ml-1 rounded-full bg-[#272e40] text-[#e0e7fa]">
+                          {token?.symbol.substring(0, 1)}
+                        </div>
+                      )}
+                      <div className="flex justify-between items-center gap-1 overflow-hidden grow">
+                        <div className="flex flex-col leading-[16px]">
+                          <div className="overflow-hidden whitespace-nowrap text-ellipsis text-[15px]">
+                            {token.name}
+                          </div>
+                          <div className="text-[#888] text-[11px]">
+                            {token.symbol}
+                          </div>
+                        </div>
+                        {signer && (
+                          <>
+                            {balances &&
+                            balances[token.address] &&
+                            token.decimals ? (
+                              <div className="text-xs">
+                                {weiToHumanReadable({
+                                  amount:
+                                    balances[token.address]?.toString() || "0",
+                                  decimals: token.decimals,
+                                  precisionFractionalPlaces: 4,
+                                })}
+                              </div>
+                            ) : (
+                              <Skeleton w="w-12" h="h-3" />
+                            )}
+                          </>
+                        )}
+                      </div>
+                    </div>
+                  ))
+              ) : (
+                <div className="mt-4 flex justify-center">
+                  <p className="text-sm text-white">No tokens found.</p>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>,
+        modalRoot,
+      )
+    : null;
+};

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);
+}

package/src/components/global.css

@@ -0,0 +1,34 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.xswap {
+  /* Works on Firefox */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: #252525 #000;
+  }
+
+  /* Works on Chrome, Edge, and Safari */
+  *::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  *::-webkit-scrollbar-track {
+    background: #000;
+    border-radius: 4px;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    background-color: #252525;
+    border-radius: 4px;
+  }
+
+  button {
+    @apply text-white border-none rounded-2xl text-xl py-4 cursor-pointer w-full bg-gradient-to-r from-[#3681c6] to-[#2b4a9d] disabled:opacity-25;
+  }
+
+  .globalBorder {
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+}

package/src/components/icons/ArrowDownIcon.tsx

@@ -0,0 +1,16 @@
+export const ArrowDownIcon = () => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 2.45932L12 12.8957L15.8625 9.15023L18 11.1866L10.5 18.4593L3 11.1866L5.1375 9.15023L9 12.8957L9 2.45932L12 2.45932Z"
+        fill="white"
+      />
+    </svg>
+  );
+};

package/src/components/icons/ArrowRightIcon.tsx

@@ -0,0 +1,11 @@
+export const ArrowRightIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 448 512"
+      fill="currentColor"
+    >
+      <path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z" />
+    </svg>
+  );
+};

package/src/components/icons/ArrowUpRightIcon.tsx

@@ -0,0 +1,11 @@
+export const ArrowUpRightIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512"
+      fill="currentColor"
+    >
+      <path d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z" />
+    </svg>
+  );
+};

package/src/components/icons/ChainlinkCCIPIcon.tsx

@@ -0,0 +1,23 @@
+export const ChainlinkCCIPIcon = () => {
+  return (
+    <svg
+      version="1.2"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 67 27"
+      width="67"
+      height="27"
+    >
+      <title>chainlink-CCIP</title>
+      <defs>
+        <image
+          width="67"
+          height="27"
+          id="imgiVBORw0KGgoAAA"
+          href="data:image/png;base64,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"
+        />
+      </defs>
+      <style></style>
+      <use id="Background" href="#imgiVBORw0KGgoAAA" x="0" y="0" />
+    </svg>
+  );
+};

package/src/components/icons/CheckIcon.tsx

@@ -0,0 +1,11 @@
+export const CheckIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 448 512"
+      fill="currentColor"
+    >
+      <path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" />
+    </svg>
+  );
+};

package/src/components/icons/ChevronDownIcon.tsx

@@ -0,0 +1,15 @@
+export const ChevronDownIcon = () => {
+  return (
+    <svg
+      width="12"
+      height="12"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512"
+    >
+      <path
+        fill="currentColor"
+        d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"
+      ></path>
+    </svg>
+  );
+};