@xswap-link/sdk 0.0.13 → 0.1.1

package/nodemon.json

@@ -0,0 +1,5 @@
+{
+  "watch": ["src"],
+  "ext": "ts,tsx,css,js",
+  "exec": "npm run build"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xswap-link/sdk",
-  "version": "0.0.13",
+  "version": "0.1.1",
   "description": "JavaScript SDK for XSwap platform",
   "homepage": "https://github.com/xswap-link/xswap-sdk",
   "repository": {
@@ -20,8 +20,16 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@ethersproject/providers": "^5.7.2",
+    "@tanstack/react-query": "^5.35.5",
+    "@types/react": "18.2.0",
+    "@types/react-dom": "18.2.0",
     "bignumber.js": "4.0.4",
-    "ethers": "^5.7.2"
+    "date-fns": "^3.6.0",
+    "ethers": "^5.7.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "viem": "2.x",
+    "wagmi": "^2.8.5"
   },
   "devDependencies": {
     "@changesets/cli": "^2.27.1",
@@ -33,13 +41,22 @@
     "jest": "^29.7.0",
     "jest-fetch": "^1.1.1",
     "jest-fetch-mock": "^3.0.3",
+    "nodemon": "^3.1.0",
+    "tailwindcss": "^3.4.3",
     "ts-jest": "^29.1.2",
     "ts-node": "^10.9.2",
     "tsup": "^8.0.2",
     "typescript": "^5.3.3"
   },
+  "peerDependencies": {
+    "@types/react": ">=16 || <=18",
+    "@types/react-dom": ">=16 || <=18",
+    "react": ">=16 || <=18",
+    "react-dom": ">=16 || <=18"
+  },
   "scripts": {
-    "build": "tsup index.ts --format cjs,esm --dts",
+    "build": "tsup src/index.ts --format cjs,esm --dts",
+    "watch": "nodemon",
     "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/BalanceComponent.tsx

@@ -0,0 +1,51 @@
+import { FC, useMemo } from "react";
+import { Token, TokenBalances } from "@src/models";
+import { weiToHumanReadable } from "@src/utils";
+import BigNumber from "bignumber.js";
+import { MINIMUM_DISPLAYED_TOKEN_AMOUNT } from "@src/constants";
+
+interface Props {
+  srcToken: Token | undefined;
+  balances: TokenBalances | undefined;
+}
+
+export const BalanceComponent: FC<Props> = ({ srcToken, balances }) => {
+  const balanceText = useMemo(() => {
+    if (!balances || !srcToken) return "0";
+    if (balances[srcToken.address]?.toString() === "0") return "0";
+    const fullHumanReadable = weiToHumanReadable({
+      amount: balances[srcToken.address]?.toString() || "0",
+      decimals: srcToken.decimals,
+      precisionFractionalPlaces: srcToken.decimals,
+    });
+
+    if (
+      new BigNumber(fullHumanReadable).lt(
+        MINIMUM_DISPLAYED_TOKEN_AMOUNT.toString(),
+      )
+    )
+      return `<${MINIMUM_DISPLAYED_TOKEN_AMOUNT}`;
+
+    return weiToHumanReadable({
+      amount: balances[srcToken.address]?.toString() || "0",
+      decimals: srcToken.decimals,
+      precisionFractionalPlaces: 5,
+    });
+  }, [srcToken, balances]);
+
+  return (
+    <>
+      Balance:{" "}
+      {srcToken && balances
+        ? weiToHumanReadable({
+            amount: balances[srcToken.address]?.toString() || "0",
+            decimals: srcToken.decimals,
+            precisionFractionalPlaces: 4,
+          })
+        : 0}
+      <span className="bg-gradient-to-r from-x_blue_light to-x_blue_dark bg-clip-text text-transparent">
+        Max
+      </span>
+    </>
+  );
+};

package/src/components/TxConfigForm/ChainListElement.tsx

@@ -0,0 +1,36 @@
+import { FC } from "react";
+import { Chain } from "@src/models";
+
+interface Props {
+  chain: Chain;
+  index: number;
+  length: number;
+  setSrcChain: (chain: Chain) => void;
+  setChainListShown: (x: boolean) => void;
+}
+
+export const ChainListElement: FC<Props> = ({
+  chain,
+  setSrcChain,
+  setChainListShown,
+  index,
+  length,
+}) => {
+  return (
+    <div key={`${chain.ecosystem}-${chain.chainId}`}>
+      <li
+        className="bg-transparent border-none flex gap-1 items-center cursor-pointer py-2 w-full"
+        onClick={() => {
+          setSrcChain(chain);
+          setChainListShown(false);
+        }}
+      >
+        <img width={12} height={12} src={chain.image} alt={chain.displayName} />
+        {chain.displayName}
+      </li>
+      {index !== length - 1 && (
+        <div className="h-px mx-2 bg-[rgba(255,255,255,0.15)]"></div>
+      )}
+    </div>
+  );
+};

package/src/components/TxConfigForm/Description.tsx

@@ -0,0 +1,15 @@
+import React, { FC } from "react";
+
+interface Props {
+  description: string;
+}
+
+export const Description: FC<Props> = ({ description }) => {
+  return (
+    <div className="flex flex-col items-start rounded-lg px-4 py-2">
+      <div className="w-full flex gap-4 items-start justify-between text-xl">
+        {description}
+      </div>
+    </div>
+  );
+};

package/src/components/TxConfigForm/ErrorField.tsx

@@ -0,0 +1,17 @@
+import React, { FC } from "react";
+
+interface Props {
+  error: string;
+}
+
+export const ErrorField: FC<Props> = ({ error }) => {
+  return (
+    <div
+      className={`flex justify-center mb-1 items-center w-full rounded-2xl bg-x_error_background border border-solid ${
+        error.length > 0 ? "border-x_error_border" : "border-transparent"
+      }`}
+    >
+      {error}
+    </div>
+  );
+};

package/src/components/TxConfigForm/FeesDetails.tsx

@@ -0,0 +1,105 @@
+import { FC } from "react";
+import { CoinsIcon, TimerIcon, ChevronUpIcon, ChevronDownIcon } from "../icons";
+import { safeBigNumberFrom, weiToHumanReadable } from "@src/utils";
+import { Route, Token } from "@src/models";
+
+interface Props {
+  route: Route | undefined;
+  isGettingRoute: boolean;
+  paymentToken: Token | undefined;
+  dstToken: Token | undefined;
+  expressChecked: boolean;
+  slippage: string | undefined;
+  feesDetailsShown: boolean;
+  setFeesDetailsShown: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export const FeesDetails: FC<Props> = ({
+  isGettingRoute,
+  route,
+  paymentToken,
+  dstToken,
+  expressChecked,
+  slippage,
+  feesDetailsShown,
+  setFeesDetailsShown,
+}) => {
+  return (
+    <div className="flex flex-col gap-3 globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4 mb-1">
+      <div className="flex w-full items-center justify-between">
+        <div className="flex items-center gap-1 text-sm 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 className="flex gap-1">
+          <div
+            className={`flex gap-1 text-xs font-medium ${
+              expressChecked ? "text-x_green" : "text-white opacity-60"
+            }`}
+          >
+            <TimerIcon />
+            {expressChecked ? "Fast ~ 30sec " : "Normal ~ 30min"}
+          </div>
+          <div
+            onClick={() => setFeesDetailsShown((x) => !x)}
+            className="text-xs font-medium text-white opacity-60 cursor-pointer flex items-center"
+          >
+            {feesDetailsShown ? <ChevronUpIcon /> : <ChevronDownIcon />}
+          </div>
+        </div>
+      </div>
+      {feesDetailsShown && (
+        <div className="flex w-full items-center justify-between ">
+          <div className="flex flex-col text-[10px] gap-1">
+            <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] gap-1">
+            <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>
+  );
+};

package/src/components/TxConfigForm/Form.tsx

@@ -0,0 +1,250 @@
+import "@src/global.css";
+import React, { FormEvent, useEffect, useState } from "react";
+import { ethers } from "ethers";
+import { useAccount, useSwitchChain } from "wagmi";
+import { Chain, Route, Token, TokenBalances, TokenPrices } from "@src/models";
+import { getPrices, getRoute } from "@src/services";
+import { getBalances } from "@src/utils";
+import { ROUTE_TIMEOUT_MS } from "@src/constants";
+import { TxConfigFormProps } from "@src/components";
+import { useDebounce } from "@src/hooks";
+import { ADDRESSES } from "@src/contracts";
+import { History } from "./History";
+import { TopBar } from "./TopBar";
+import { Settings } from "./Settings";
+import { FeesDetails } from "./FeesDetails";
+import { Summary } from "./Summary";
+import { SwapPanel } from "./SwapPanel";
+import { ErrorField } from "./ErrorField";
+import { Description } from "./Description";
+
+export const Form = ({
+  dstChainId,
+  dstTokenAddr,
+  customContractCalls,
+  desc,
+  supportedChains,
+  onSubmit,
+}: TxConfigFormProps & {
+  onSubmit: (route: Route) => void;
+}) => {
+  const [signer, setSigner] = useState<string | undefined>();
+  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 [route, setRoute] = useState<Route>();
+  const [expressChecked, setExpressChecked] = useState(true);
+  const [historyTabShown, setHistoryTabShown] = useState(false);
+  const [isGettingRoute, setIsGettingRoute] = useState(false);
+  const [prices, setPrices] = useState<TokenPrices>();
+  const [balances, setBalances] = useState<TokenBalances>();
+  const [settingsShown, setSettingsShown] = useState(false);
+  const [formError, setFormError] = useState("");
+  const [slippage, setSlippage] = useState<string>("1.5");
+  const [feesDetailsShown, setFeesDetailsShown] = useState(false);
+
+  const debouncedAmount = useDebounce(amount, 1000);
+  const account = useAccount();
+  const { switchChainAsync } = useSwitchChain();
+
+  useEffect(() => {
+    setSigner(account.address);
+  }, [account.address]);
+
+  useEffect(() => {
+    if (
+      supportedChains.some(
+        ({ chainId }) => chainId === account.chainId?.toString(),
+      )
+    ) {
+      setSrcChain(
+        supportedChains.find(
+          ({ chainId }) => chainId === account.chainId?.toString(),
+        ),
+      );
+    }
+  }, [account.chainId]);
+
+  useEffect(() => {
+    setDstChain(supportedChains.find((chain) => chain.chainId === dstChainId));
+  }, [supportedChains, dstChainId]);
+
+  useEffect(() => {
+    setDstToken(
+      dstChain?.tokens.find(
+        (token) => token.address.toLowerCase() === dstTokenAddr.toLowerCase(),
+      ),
+    );
+  }, [dstChain]);
+
+  useEffect(() => {
+    if (
+      srcChain &&
+      srcToken &&
+      dstChain &&
+      debouncedAmount &&
+      paymentToken &&
+      slippage
+    ) {
+      setFormError("");
+      const timeout = setTimeout(() => {
+        setFormError("Getting Route is taking longer than usually");
+      }, ROUTE_TIMEOUT_MS);
+      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: Number(slippage),
+        expressDelivery: expressChecked,
+        customContractCalls,
+      })
+        .then((response) => {
+          setRoute(response);
+          setFormError("");
+        })
+        .catch((err) => {
+          setFormError(err.message);
+        })
+        .finally(() => {
+          setIsGettingRoute(false);
+          clearTimeout(timeout);
+        });
+    }
+  }, [
+    signer,
+    srcChain,
+    srcToken,
+    debouncedAmount,
+    paymentToken,
+    slippage,
+    expressChecked,
+  ]);
+
+  useEffect(() => {
+    if (srcChain) {
+      setPaymentToken(
+        srcChain.tokens.find(
+          (token) =>
+            token.address.toLowerCase() ===
+            ethers.constants.AddressZero.toLowerCase(),
+        ),
+      );
+    }
+  }, [srcChain]);
+
+  useEffect(() => {
+    setAmount("");
+    setFormError("");
+  }, [srcToken]);
+
+  useEffect(() => {
+    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);
+  };
+
+  const handleSwitchChain = async () => {
+    await switchChainAsync({ chainId: Number(srcChain?.chainId) });
+  };
+
+  return (
+    <form
+      className="flex flex-col gap-2 z-10 my-0 mx-auto p-4 rounded-3xl overflow-hidden font-light w-[360px] sm:w-[600px]"
+      onSubmit={handleSubmit}
+    >
+      <TopBar
+        signer={signer}
+        historyTabShown={historyTabShown}
+        setHistoryTabShown={setHistoryTabShown}
+        setSettingsShown={setSettingsShown}
+      />
+      {settingsShown && (
+        <Settings
+          expressChecked={expressChecked}
+          setExpressChecked={setExpressChecked}
+          setSettingsShown={setSettingsShown}
+          slippage={slippage}
+          setSlippage={setSlippage}
+        />
+      )}
+      {historyTabShown ? (
+        signer && <History signer={signer} supportedChains={supportedChains} />
+      ) : (
+        <div className="flex flex-col gap-2">
+          {desc && <Description description={desc} />}
+          <SwapPanel
+            amount={amount}
+            setAmount={setAmount}
+            srcToken={srcToken}
+            setSrcToken={setSrcToken}
+            srcChain={srcChain}
+            signer={signer}
+            balances={balances}
+            prices={prices}
+            supportedChains={supportedChains}
+            setSrcChain={setSrcChain}
+          />
+          <Summary
+            isGettingRoute={isGettingRoute}
+            amount={amount}
+            route={route}
+            dstToken={dstToken}
+            dstChain={dstChain}
+          />
+          <FeesDetails
+            route={route}
+            isGettingRoute={isGettingRoute}
+            paymentToken={paymentToken}
+            dstToken={dstToken}
+            expressChecked={expressChecked}
+            slippage={slippage}
+            feesDetailsShown={feesDetailsShown}
+            setFeesDetailsShown={setFeesDetailsShown}
+          />
+          {formError.length > 0 && <ErrorField error={formError} />}
+          {srcChain && srcChain.chainId !== account.chainId?.toString() ? (
+            <button type="button" onClick={handleSwitchChain}>
+              Switch chain
+            </button>
+          ) : (
+            <button
+              type="submit"
+              disabled={!signer || !route || isGettingRoute}
+            >
+              Submit
+            </button>
+          )}
+        </div>
+      )}
+    </form>
+  );
+};