@xswap-link/sdk 0.1.0 → 0.1.2

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.1.0",
+  "version": "0.1.2",
   "description": "JavaScript SDK for XSwap platform",
   "homepage": "https://github.com/xswap-link/xswap-sdk",
   "repository": {
@@ -20,32 +20,43 @@
   "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",
     "date-fns": "^3.6.0",
-    "ethers": "^5.7.2"
+    "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",
     "@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",
+    "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 src/index.ts --format cjs,esm --dts",
+    "watch": "nodemon",
     "release": "pnpm run build && changeset publish",
     "lint": "tsc && eslint . --ext .ts",
     "test": "jest"

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