@xswap-link/sdk 0.0.12 → 0.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xswap-link/sdk",
-  "version": "0.0.12",
+  "version": "0.1.0",
   "description": "JavaScript SDK for XSwap platform",
   "homepage": "https://github.com/xswap-link/xswap-sdk",
   "repository": {
@@ -21,25 +21,31 @@
   "dependencies": {
     "@ethersproject/providers": "^5.7.2",
     "bignumber.js": "4.0.4",
+    "date-fns": "^3.6.0",
     "ethers": "^5.7.2"
   },
   "devDependencies": {
     "@changesets/cli": "^2.27.1",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.11.17",
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
     "@typescript-eslint/eslint-plugin": "^7.1.0",
     "@typescript-eslint/parser": "^7.1.0",
     "eslint": "^8.57.0",
     "jest": "^29.7.0",
     "jest-fetch": "^1.1.1",
     "jest-fetch-mock": "^3.0.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tailwindcss": "^3.4.3",
     "ts-jest": "^29.1.2",
     "ts-node": "^10.9.2",
     "tsup": "^8.0.2",
     "typescript": "^5.3.3"
   },
   "scripts": {
-    "build": "tsup index.ts --format cjs,esm --dts",
+    "build": "tsup src/index.ts --format cjs,esm --dts",
     "release": "pnpm run build && changeset publish",
     "lint": "tsc && eslint . --ext .ts",
     "test": "jest"

package/postcss.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require("tailwindcss")()],
+};

package/src/components/Alert/index.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export const Alert = ({ desc }: { desc: string }) => {
+  return (
+    <div className="border border-solid border-x_alert rounded-3xl text-x_alert_light text-xs py-0.5 px-2">
+      ⚠️ {desc}
+    </div>
+  );
+};

package/src/components/Skeleton/index.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+
+export const Skeleton = ({ w, h }: Style) => {
+  return <div className={`bg-current rounded animate-pulse ${w} ${h}`} />;
+};
+
+type Style = {
+  w: string;
+  h: string;
+};

package/src/components/TxConfigForm/Form.tsx

@@ -0,0 +1,567 @@
+import "@src/global.css";
+import React, { FC, FormEvent, useEffect, useState } from "react";
+import { ethers } from "ethers";
+import {
+  Chain,
+  ContractCall,
+  Route,
+  Token,
+  TokenBalances,
+  TokenPrices,
+} from "@src/models";
+import { getPrices, getRoute } from "@src/services";
+import {
+  getBalances,
+  safeBigNumberFrom,
+  shortAddress,
+  weiToHumanReadable,
+} from "@src/utils";
+import {
+  ChevronDownIcon,
+  ChevronUpIcon,
+  CoinsIcon,
+  DownArrowIcon,
+  HistoryIcon,
+  PercentageIcon,
+} from "@src/components/icons";
+import { SLIPPAGE_PRESETS, NUMBER_INPUT_REGEX } from "@src/constants";
+import { History } from "./History";
+import { Alert } from "@src/components";
+import { useDebounce } from "@src/hooks";
+import { TokenPicker } from "./TokenPicker";
+import { Skeleton } from "@src/components/Skeleton";
+import { ADDRESSES } from "@src/contracts";
+
+interface Props {
+  dstChainId: string;
+  dstTokenAddr: string;
+  customContractCalls: ContractCall[];
+  desc: string;
+  supportedChains: Chain[];
+  onSubmit: (route: Route) => void;
+}
+
+export const Form: FC<Props> = ({
+  dstChainId,
+  dstTokenAddr,
+  customContractCalls,
+  desc,
+  supportedChains,
+  onSubmit,
+}) => {
+  const [signer, setSigner] = useState<string>("");
+  const [dstChain, setDstChain] = useState<Chain>();
+  const [dstToken, setDstToken] = useState<Token>();
+  const [srcChain, setSrcChain] = useState<Chain>();
+  const [srcToken, setSrcToken] = useState<Token>();
+  const [amount, setAmount] = useState<string>("");
+  const [paymentToken, setPaymentToken] = useState<Token>();
+  const [slippage, setSlippage] = useState<number>();
+  const [slippageActivePresetIndex, setSlippageActivePresetIndex] = useState(1);
+  const [usingSlippageInput, setUsingSlippageInput] = useState(false);
+  const [chainListShown, setChainListShown] = useState(false);
+  const [tokenListShown, setTokenListShown] = useState(false);
+  const [route, setRoute] = useState<Route>();
+  const [expressChecked, setExpressChecked] = useState(true);
+  const [feesDetailsShown, setFeesDetailsShown] = useState(false);
+  const [historyTabShown, setHistoryTabShown] = useState(false);
+  const [isGettingRoute, setIsGettingRoute] = useState(false);
+  const [prices, setPrices] = useState<TokenPrices>();
+  const [balances, setBalances] = useState<TokenBalances>();
+
+  const debouncedAmount = useDebounce(amount, 1000);
+  const { ethereum } = window;
+
+  useEffect(() => {
+    setDstChain(supportedChains.find((chain) => chain.chainId === dstChainId));
+  }, [supportedChains]);
+
+  useEffect(() => {
+    setDstToken(
+      dstChain?.tokens.find(
+        (token) => token.address.toLowerCase() === dstTokenAddr.toLowerCase(),
+      ),
+    );
+  }, [dstChain]);
+
+  useEffect(() => {
+    if (!usingSlippageInput) {
+      setSlippage(SLIPPAGE_PRESETS[slippageActivePresetIndex]);
+    }
+  }, [slippageActivePresetIndex, usingSlippageInput]);
+
+  useEffect(() => {
+    if (
+      srcChain &&
+      srcToken &&
+      dstChain &&
+      debouncedAmount &&
+      paymentToken &&
+      slippage
+    ) {
+      setIsGettingRoute(true);
+      setFeesDetailsShown(false);
+      getRoute({
+        fromAmount: ethers.utils
+          .parseUnits(debouncedAmount, srcToken?.decimals)
+          .toString(),
+        fromAddress: signer || ADDRESSES[srcChain.chainId]!.FeeCollector,
+        fromChain: srcChain.chainId,
+        fromToken: srcToken.address,
+        toAddress: signer || ADDRESSES[dstChain.chainId]!.FeeCollector,
+        toChain: dstChainId,
+        toToken: dstTokenAddr,
+        paymentToken: paymentToken.address,
+        slippage,
+        expressDelivery: expressChecked,
+        customContractCalls,
+      })
+        .then((response) => setRoute(response))
+        .finally(() => setIsGettingRoute(false));
+    }
+  }, [
+    signer,
+    srcChain,
+    srcToken,
+    debouncedAmount,
+    paymentToken,
+    slippage,
+    expressChecked,
+  ]);
+
+  useEffect(() => {
+    if (ethereum) {
+      ethereum
+        .request({ method: "eth_accounts" })
+        .then((accounts: string[]) => {
+          if (accounts[0]) {
+            setSigner(accounts[0]);
+          }
+        });
+
+      ethereum.on("accountsChanged", (accounts: string[]) => {
+        if (accounts[0]) {
+          setSigner(accounts[0]);
+        }
+      });
+      return () => ethereum.removeListener("accountsChanged", () => {});
+    }
+  }, [ethereum]);
+
+  useEffect(() => {
+    if (
+      ethereum &&
+      ethereum.request &&
+      supportedChains &&
+      supportedChains.length > 0
+    ) {
+      ethereum.request({ method: "eth_chainId" }).then((chainId: string) => {
+        setSrcChain(
+          supportedChains.find(
+            (chain) => chain.chainId === parseInt(chainId, 16).toString(),
+          ),
+        );
+      });
+
+      ethereum.on("chainChanged", (chainId: string) => {
+        setSrcChain(
+          supportedChains.find(
+            (chain) => chain.chainId === parseInt(chainId, 16).toString(),
+          ),
+        );
+      });
+
+      return () => ethereum.removeListener("chainChanged", () => {});
+    }
+  }, [ethereum, supportedChains]);
+
+  useEffect(() => {
+    if (srcChain) {
+      setPaymentToken(
+        srcChain.tokens.find(
+          (token) =>
+            token.address.toLowerCase() ===
+            ethers.constants.AddressZero.toLowerCase(),
+        ),
+      );
+    }
+  }, [srcChain]);
+
+  useEffect(() => {
+    if (srcChain && !srcToken) {
+      setSrcToken(srcChain?.tokens[0]);
+    }
+  }, [srcChain]);
+
+  useEffect(() => {
+    if (srcChain) {
+      getPrices({ chainId: srcChain.chainId, currency: "USD" }).then((prices) =>
+        setPrices(prices),
+      );
+    }
+  }, [srcChain]);
+
+  useEffect(() => {
+    if (srcChain && signer) {
+      getBalances(srcChain, signer).then((balances) => setBalances(balances));
+    }
+  }, [srcChain, signer]);
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (route) {
+      onSubmit(route);
+    } else {
+      // TODO error handling (cannot submit if no values)
+    }
+  };
+
+  return (
+    <form
+      className="flex flex-col gap-2 z-10 my-0 mx-auto p-2 rounded-3xl overflow-hidden w-96 sm:w-[482px] min-h-[562px]"
+      onSubmit={handleSubmit}
+    >
+      <div className="flex w-4/5 justify-between mx-auto">
+        <div className="rounded-lg text-[rgba(255,255,255,0.6)] py-1 px-2 text-sm whitespace-nowrap globalBorder">
+          {signer
+            ? `Connected wallet: ${shortAddress(signer)}`
+            : `Disconnected`}
+        </div>
+        {signer && (
+          <div
+            onClick={() => setHistoryTabShown((x) => !x)}
+            className="flex items-center text-xs gap-1 cursor-pointer"
+          >
+            {!historyTabShown ? (
+              <>
+                <HistoryIcon />
+                <div>History</div>
+              </>
+            ) : (
+              <div>Back</div>
+            )}
+          </div>
+        )}
+      </div>
+      {historyTabShown ? (
+        <div className="flex items-center justify-center w-full">
+          <History signer={signer} supportedChains={supportedChains} />
+        </div>
+      ) : (
+        <div className="flex flex-col gap-2">
+          {desc && (
+            <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">
+                {desc}
+              </div>
+            </div>
+          )}
+          <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 overflow-hidden w-1/2">
+                <input
+                  className="p-0 border-none bg-transparent text-2xl overflow-ellipsis"
+                  value={amount}
+                  onChange={(e) => {
+                    if (e.target.value === ".") return;
+                    if (NUMBER_INPUT_REGEX.test(e.target.value)) {
+                      setIsGettingRoute(true);
+                      setFeesDetailsShown(false);
+                      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">
+                <div
+                  className="flex gap-2 items-center p-2 max-w-full cursor-pointer bg-black text-white text-xs globalBorder rounded-3xl whitespace-nowrap"
+                  onClick={() => {
+                    setTokenListShown((state) => !state);
+                  }}
+                >
+                  <img
+                    height={16}
+                    width={16}
+                    src={srcToken?.image}
+                    style={{ marginRight: "4px" }}
+                    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 className="flex gap-2 items-center text-xs font-medium text-white opacity-60 py-0.5 px-2">
+                  {signer && (
+                    <>
+                      Balance:{" "}
+                      {srcToken && balances ? (
+                        weiToHumanReadable({
+                          amount: balances[srcToken.address]?.toString() || "0",
+                          decimals: srcToken.decimals,
+                          precisionFractionalPlaces: 4,
+                        })
+                      ) : (
+                        <Skeleton w="w-12" h="h-3" />
+                      )}
+                    </>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            <div className="flex justify-between items-center w-full text-xs 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
+                className="bg-black globalBorder rounded-2xl whitespace-nowrap flex items-center p-2 cursor-pointer gap-1"
+                onClick={() => setChainListShown((prev) => !prev)}
+              >
+                <img
+                  width={12}
+                  height={12}
+                  src={srcChain?.image}
+                  alt={srcChain?.name}
+                />
+                <div>{srcChain?.displayName}</div>
+                <DownArrowIcon />
+              </div>
+
+              {chainListShown && (
+                <ul 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">
+                  {supportedChains
+                    .filter((chain) => chain.chainId !== srcChain?.chainId)
+                    .map((chain, index) => (
+                      <div key={`${chain.ecosystem}-${chain.chainId}`}>
+                        <li
+                          className="bg-transparent border-none flex gap-1 items-center cursor-pointer py-2 w-full"
+                          key={index}
+                          onClick={() => {
+                            setSrcChain(chain);
+                            setChainListShown(false);
+                          }}
+                        >
+                          <img
+                            width={12}
+                            height={12}
+                            src={chain.image}
+                            alt={chain.displayName}
+                          />
+                          {chain.displayName}
+                        </li>
+                        {index !== supportedChains.length - 1 && (
+                          <div className="h-px mx-2 bg-[rgba(255,255,255,0.15)]"></div>
+                        )}
+                      </div>
+                    ))}
+                </ul>
+              )}
+            </div>
+          </div>
+          <div className="flex flex-col items-start globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4">
+            <div className="flex justify-around sm:justify-start gap-4 items-center w-full text-xs text-[rgba(255,255,255,0.6)]">
+              <div className="flex flex-col items-center sm:flex-row gap-1">
+                You're getting:
+                {isGettingRoute && amount.length > 0 ? (
+                  <div className="bg-current rounded animate-pulse w-[190px] h-7" />
+                ) : (
+                  <div className="flex gap-1">
+                    <div className="text-white text-lg">
+                      {weiToHumanReadable({
+                        amount: route?.estAmountOut || "0",
+                        decimals: dstToken?.decimals || 18,
+                        precisionFractionalPlaces: 5,
+                      })}
+                    </div>
+                    <div className="flex items-center gap-1 text-white">
+                      <div className="w-4 h-4">
+                        <img src={dstToken?.image} alt={dstToken?.name} />
+                      </div>
+                      <div className="text-lg">{dstToken?.symbol}</div>
+                    </div>
+                  </div>
+                )}
+              </div>
+              <div className="flex flex-col sm:flex-row gap-1">
+                on chain:
+                <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>
+          </div>
+          <div className="flex flex-col gap-2 globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4">
+            <div className="flex w-full items-center justify-between">
+              <div className="flex gap-1 text-xs font-medium text-white opacity-60">
+                <CoinsIcon />
+                <div className="mr-1">Fees:</div>
+                {isGettingRoute ? (
+                  <div className="bg-current rounded animate-pulse w-20 h-4" />
+                ) : (
+                  ` ${weiToHumanReadable({
+                    amount: safeBigNumberFrom(
+                      route?.xSwapFees.xSwapFee.nativeFee || "0",
+                    )
+                      .add(safeBigNumberFrom(route?.xSwapFees.ccipFee || "0"))
+                      .add(
+                        safeBigNumberFrom(
+                          route?.xSwapFees.expressDeliveryFee || "0",
+                        ),
+                      )
+                      .toString(),
+                    decimals: 18,
+                    precisionFractionalPlaces: 5,
+                  })} ${paymentToken?.symbol}`
+                )}
+              </div>
+              <div
+                onClick={() => setFeesDetailsShown((x) => !x)}
+                className="text-xs font-medium text-white opacity-60 cursor-pointer"
+              >
+                {feesDetailsShown ? <ChevronUpIcon /> : <ChevronDownIcon />}
+              </div>
+            </div>
+            {feesDetailsShown && (
+              <div className="flex w-full items-center justify-between ">
+                <div className="flex flex-col text-[10px] ">
+                  <div className="font-medium text-white opacity-60">
+                    CCIP Fee:
+                    {` ${weiToHumanReadable({
+                      amount: route?.xSwapFees.ccipFee || "0",
+                      decimals: 18,
+                      precisionFractionalPlaces: 5,
+                    })} ${paymentToken?.symbol}`}
+                  </div>
+                  <div className="font-medium text-white opacity-60">
+                    Native Fee:
+                    {` ${weiToHumanReadable({
+                      amount: route?.xSwapFees.xSwapFee.nativeFee || "0",
+                      decimals: 18,
+                      precisionFractionalPlaces: 5,
+                    })} ${paymentToken?.symbol}`}
+                  </div>
+                </div>
+                <div className="flex flex-col text-[10px] ">
+                  <div className="font-medium text-white opacity-60">
+                    Slippage: {`${slippage}%`}
+                  </div>
+                  <div className="font-medium text-white opacity-60">
+                    Min amount out:{" "}
+                    {weiToHumanReadable({
+                      amount: route?.minAmountOut || "0",
+                      decimals: dstToken?.decimals || 18,
+                      precisionFractionalPlaces: 5,
+                    })}{" "}
+                    {dstToken?.symbol}
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+          <div className="flex justify-between">
+            <div className="flex flex-col gap-2 ">
+              <div className=" text-[rgba(255,255,255,0.6)]">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 ${
+                        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}%`}
+                    </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"
+                    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(Number(e.target.value));
+                        }
+                      } else {
+                        setUsingSlippageInput(false);
+                        setSlippageActivePresetIndex(1);
+                      }
+                    }}
+                  />
+                  <PercentageIcon />
+                </div>
+              </div>
+            </div>
+
+            <div className="flex gap-2 items-center">
+              <div className=" 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>
+          <button disabled={!signer || !route || isGettingRoute}>Submit</button>
+        </div>
+      )}
+    </form>
+  );
+};