@xswap-link/sdk 0.2.2 → 0.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xswap-link/sdk",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "JavaScript SDK for XSwap platform",
   "homepage": "https://github.com/xswap-link/xswap-sdk",
   "repository": {

package/src/components/TxConfigForm/FeesDetails.tsx

@@ -2,6 +2,7 @@ import { FC } from "react";
 import { CoinsIcon, TimerIcon, ChevronUpIcon, ChevronDownIcon } from "../icons";
 import { safeBigNumberFrom, weiToHumanReadable } from "@src/utils";
 import { Route, Token } from "@src/models";
+import { Skeleton } from "@src/components";
 
 interface Props {
   route: Route | undefined;
@@ -9,6 +10,7 @@ interface Props {
   paymentToken: Token | undefined;
   dstToken: Token | undefined;
   expressChecked: boolean;
+  exceedsExpressDeliveryLimit: boolean;
   slippage: string | undefined;
   feesDetailsShown: boolean;
   setFeesDetailsShown: React.Dispatch<React.SetStateAction<boolean>>;
@@ -20,18 +22,19 @@ export const FeesDetails: FC<Props> = ({
   paymentToken,
   dstToken,
   expressChecked,
+  exceedsExpressDeliveryLimit,
   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 text-xs sm:text-sm ">
+    <div className="flex flex-col gap-3 globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-2 sm:p-4 mb-1">
+      <div className="flex w-full items-center justify-between text-xs sm:text-sm">
         <div className="flex items-center gap-1 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" />
+            <Skeleton width="w-20" height="h-4" />
           ) : (
             ` ${weiToHumanReadable({
               amount: safeBigNumberFrom(
@@ -50,11 +53,15 @@ export const FeesDetails: FC<Props> = ({
         <div className="flex gap-1 items-center">
           <div
             className={`flex gap-1 items-center font-medium ${
-              expressChecked ? "text-x_green" : "text-white opacity-60"
+              expressChecked && !exceedsExpressDeliveryLimit
+                ? "text-x_green"
+                : "text-white opacity-60"
             }`}
           >
             <TimerIcon />
-            {expressChecked ? "Fast ~ 30sec " : "Normal ~ 30min"}
+            {expressChecked && !exceedsExpressDeliveryLimit
+              ? "Fast ~ 30sec "
+              : "Normal ~ 30min"}
           </div>
           <div
             onClick={() => setFeesDetailsShown((x) => !x)}
@@ -65,37 +72,44 @@ export const FeesDetails: FC<Props> = ({
         </div>
       </div>
       {feesDetailsShown && (
-        <div className="flex w-full items-center justify-between ">
+        <div className="flex w-full items-center justify-between gap-2">
           <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 className="flex justify-between font-medium text-white opacity-60 gap-1">
+              <div>CCIP Fee:</div>
+              <div className="whitespace-nowrap">
+                {` ${weiToHumanReadable({
+                  amount: route?.xSwapFees.ccipFee || "0",
+                  decimals: 18,
+                  precisionFractionalPlaces: 5,
+                })} ${paymentToken?.symbol}`}
+              </div>
             </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 className="flex justify-between font-medium text-white opacity-60 gap-1">
+              <div>Native Fee:</div>
+              <div className="whitespace-nowrap">
+                {` ${weiToHumanReadable({
+                  amount: route?.xSwapFees.xSwapFee.nativeFee || "0",
+                  decimals: 18,
+                  precisionFractionalPlaces: 5,
+                })} ${paymentToken?.symbol}`}
+              </div>
             </div>
           </div>
           <div className="flex flex-col text-[10px] gap-1">
-            <div className="font-medium text-white opacity-60">
-              Slippage: {`${slippage}%`}
+            <div className="flex justify-between font-medium text-white opacity-60 gap-1">
+              <div>Slippage:</div>
+              <div className="whitespace-nowrap">{`${slippage}%`}</div>
             </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 className="flex justify-between font-medium text-white opacity-60 gap-1">
+              <div>Min amount out:</div>
+              <div className="whitespace-nowrap">
+                {weiToHumanReadable({
+                  amount: route?.minAmountOut || "0",
+                  decimals: dstToken?.decimals || 18,
+                  precisionFractionalPlaces: 5,
+                })}{" "}
+                {dstToken?.symbol}
+              </div>
             </div>
           </div>
         </div>

package/src/components/TxConfigForm/Form.tsx

@@ -27,8 +27,10 @@ export const Form = ({
   desc,
   supportedChains,
   onSubmit,
+  onClose,
 }: TxConfigFormProps & {
   onSubmit: (route: Route) => void;
+  onClose: () => void;
 }) => {
   const [signer, setSigner] = useState<string | undefined>();
   const [dstChain, setDstChain] = useState<Chain>();
@@ -47,6 +49,8 @@ export const Form = ({
   const [formError, setFormError] = useState("");
   const [slippage, setSlippage] = useState<string>("1.5");
   const [feesDetailsShown, setFeesDetailsShown] = useState(false);
+  const [exceedsExpressDeliveryLimit, setExceedsExpressDeliveryLimit] =
+    useState(false);
 
   const debouncedAmount = useDebounce(amount, 1000);
   const account = useAccount();
@@ -111,7 +115,7 @@ export const Form = ({
         toToken: dstTokenAddr,
         paymentToken: paymentToken.address,
         slippage: Number(slippage),
-        expressDelivery: expressChecked,
+        expressDelivery: expressChecked && !exceedsExpressDeliveryLimit,
         customContractCalls,
       })
         .then((response) => {
@@ -182,7 +186,7 @@ export const Form = ({
 
   return (
     <form
-      className="flex flex-col gap-2 z-10 my-0 mx-auto p-4 rounded-3xl overflow-hidden font-light w-x_mobile sm:w-x_desktop"
+      className="flex flex-col gap-2 z-10 my-0 p-2 md:p-4 rounded-3xl overflow-hidden font-light sm:w-x_desktop"
       onSubmit={handleSubmit}
     >
       <TopBar
@@ -190,6 +194,7 @@ export const Form = ({
         historyTabShown={historyTabShown}
         setHistoryTabShown={setHistoryTabShown}
         setSettingsShown={setSettingsShown}
+        onClose={onClose}
       />
       {settingsShown && (
         <Settings
@@ -216,6 +221,7 @@ export const Form = ({
             prices={prices}
             supportedChains={supportedChains}
             setSrcChain={setSrcChain}
+            setExceedsExpressDeliveryLimit={setExceedsExpressDeliveryLimit}
           />
           <Summary
             isGettingRoute={isGettingRoute}
@@ -229,6 +235,7 @@ export const Form = ({
             paymentToken={paymentToken}
             dstToken={dstToken}
             expressChecked={expressChecked}
+            exceedsExpressDeliveryLimit={exceedsExpressDeliveryLimit}
             slippage={slippage}
             feesDetailsShown={feesDetailsShown}
             setFeesDetailsShown={setFeesDetailsShown}

package/src/components/TxConfigForm/Summary.tsx

@@ -53,20 +53,24 @@ export const Summary: FC<Props> = ({
           ) : (
             <div className="flex gap-2 items-center text-white text-xl sm:text-3xl">
               {amountReadable}
-              <div className="w-4 sm:w-6 h-4 sm:h-6">
-                <img src={dstToken?.image} alt={dstToken?.name} />
-              </div>
-              <p className="text-base sm:text-xl">{dstToken?.symbol}</p>
             </div>
           )}
         </div>
-        <div className="flex flex-col gap-1 text-sm">
-          <p className="text-[rgba(255,255,255,0.6)] text-right">on chain:</p>
-          <div className="flex items-center gap-1 text-white">
-            <div className="w-4 h-4">
-              <img src={dstChain?.image} alt={dstChain?.name} />
+        <div className="flex flex-col items-end gap-1 text-sm">
+          <div className="flex justify-center items-center gap-1">
+            <div className="w-4 sm:w-6 h-4 sm:h-6">
+              <img src={dstToken?.image} alt={dstToken?.name} />
+            </div>
+            <p className="text-base sm:text-xl">{dstToken?.symbol}</p>
+          </div>
+          <div className="flex justify-center items-center gap-1">
+            <p className="text-[rgba(255,255,255,0.6)] text-right">on </p>
+            <div className="flex items-center gap-1 text-white">
+              <div className="w-4 h-4">
+                <img src={dstChain?.image} alt={dstChain?.name} />
+              </div>
+              <div>{dstChain?.displayName}</div>
             </div>
-            <div>{dstChain?.displayName}</div>
           </div>
         </div>
       </div>
@@ -75,6 +79,7 @@ export const Summary: FC<Props> = ({
         token={dstToken}
         amount={amountReadable}
         loading={isGettingRoute}
+        type="dst"
       />
       <div className="absolute right-[50%] top-0 translate-x-1/2 translate-y-[-60%] globalBorder rounded-xl p-[5px] bg-[rgba(15,15,15,1)]">
         <div className=" flex items-center justify-center rounded-lg  w-8 h-8 bg-gradient-to-l from-[rgba(54,129,198,1)] to-[rgba(43,74,157,1)] ">

package/src/components/TxConfigForm/SwapPanel.tsx

@@ -19,6 +19,7 @@ interface Props {
   balances: TokenBalances | undefined;
   prices: TokenPrices | undefined;
   supportedChains: Chain[];
+  setExceedsExpressDeliveryLimit: (exceeds: boolean) => void;
 }
 
 export const SwapPanel: FC<Props> = ({
@@ -32,6 +33,7 @@ export const SwapPanel: FC<Props> = ({
   balances,
   prices,
   supportedChains,
+  setExceedsExpressDeliveryLimit,
 }) => {
   const [chainListShown, setChainListShown] = useState(false);
   const [tokenListShown, setTokenListShown] = useState(false);
@@ -109,6 +111,8 @@ export const SwapPanel: FC<Props> = ({
             token={srcToken}
             amount={amount}
             loading={false}
+            type="src"
+            setExceedsExpressDeliveryLimit={setExceedsExpressDeliveryLimit}
           />
         </div>
       </div>

package/src/components/TxConfigForm/TopBar.tsx

@@ -1,12 +1,13 @@
 import { FC } from "react";
 import { shortAddress } from "@src/utils";
-import { SettingsIcon, HistoryIcon } from "../icons";
+import { SettingsIcon, HistoryIcon, CloseIcon } from "../icons";
 
 interface Props {
   signer: string | undefined;
   setSettingsShown: React.Dispatch<React.SetStateAction<boolean>>;
   historyTabShown: boolean;
   setHistoryTabShown: React.Dispatch<React.SetStateAction<boolean>>;
+  onClose: () => void;
 }
 
 export const TopBar: FC<Props> = ({
@@ -14,15 +15,16 @@ export const TopBar: FC<Props> = ({
   setSettingsShown,
   setHistoryTabShown,
   historyTabShown,
+  onClose,
 }) => {
   return (
-    <div className="flex w-full justify-between items-center mx-auto sm:pl-4 pr-8 pt-2">
+    <div className="flex w-full justify-between items-center mx-auto p-2">
       <div className="rounded-lg text-[rgba(255,255,255,0.6)] text-xs sm:text-base whitespace-nowrap">
         {signer
           ? `Connected wallet: ${shortAddress(signer)}`
           : `Wallet disconnected`}
       </div>
-      <div className="flex gap-2">
+      <div className="flex gap-2 justify-center items-center">
         {!historyTabShown && (
           <div
             onClick={() => setSettingsShown(true)}
@@ -47,6 +49,9 @@ export const TopBar: FC<Props> = ({
             <div>Back</div>
           )}
         </div>
+        <div className="cursor-pointer text-white" onClick={onClose}>
+          <CloseIcon />
+        </div>
       </div>
     </div>
   );

package/src/components/TxConfigForm/UsdPrice.tsx

@@ -1,12 +1,15 @@
 import { Alert, Skeleton } from "@src/components";
 import { Token, TokenPrices } from "@src/models";
 import { FC, useEffect, useMemo, useState } from "react";
+import { EXPRESS_DELIVERY_LIMIT } from "@src/constants";
 
 type Props = {
   prices: TokenPrices | undefined;
   token: Token | undefined;
   amount: string | undefined;
   loading: boolean;
+  type: "src" | "dst";
+  setExceedsExpressDeliveryLimit?: (exceeds: boolean) => void;
 };
 
 export const UsdPrice: FC<Props> = ({
@@ -14,12 +17,22 @@ export const UsdPrice: FC<Props> = ({
   token,
   amount = "0",
   loading = false,
+  type,
+  setExceedsExpressDeliveryLimit,
 }) => {
   const [usdPrice, setUsdPrice] = useState<string>("0.00");
 
   useEffect(() => {
     if (token && prices && prices[token.address]) {
-      setUsdPrice((Number(amount) * Number(prices[token.address])).toFixed(2));
+      const newUsdPrice = (
+        Number(amount) * Number(prices[token.address])
+      ).toFixed(2);
+      if (type === "src" && setExceedsExpressDeliveryLimit) {
+        setExceedsExpressDeliveryLimit(
+          Number(newUsdPrice) > EXPRESS_DELIVERY_LIMIT,
+        );
+      }
+      setUsdPrice(newUsdPrice);
     }
   }, [token, prices, amount]);
 

package/src/components/TxConfigForm/index.tsx

@@ -2,9 +2,8 @@ import "@src/global.css";
 import { MouseEvent, useMemo } from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { WagmiProvider } from "wagmi";
-import { getWagmiConfig, xswapRoot } from "@src/config";
+import { getWagmiConfig, waitForInitialization, xswapRoot } from "@src/config";
 import { Chain, ContractCall, Route } from "@src/models";
-import { CloseIcon } from "@src/components/icons/CloseIcon";
 import { PoweredBy } from "@src/components/TxConfigForm/PoweredBy";
 import { Form } from "./Form";
 
@@ -49,7 +48,7 @@ const TxConfigForm = ({
           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)]">
+          <div className="relative bg-black rounded-3xl overflow-auto text-white border-2 border-solid border-[rgba(255,255,255,0.1)]">
             <Form
               dstChainId={dstChainId}
               dstTokenAddr={dstTokenAddr}
@@ -57,13 +56,8 @@ const TxConfigForm = ({
               desc={desc}
               supportedChains={supportedChains}
               onSubmit={onSubmit}
+              onClose={onClose}
             />
-            <div
-              className="absolute top-7 right-4 cursor-pointer text-white"
-              onClick={onClose}
-            >
-              <CloseIcon />
-            </div>
             <PoweredBy />
           </div>
         </div>
@@ -80,7 +74,8 @@ export const openTxConfigForm = async ({
   supportedChains,
 }: TxConfigFormProps): Promise<Route> => {
   try {
-    return await new Promise((resolve) => {
+    return await new Promise(async (resolve) => {
+      await waitForInitialization();
       xswapRoot.render(
         <TxConfigForm
           dstChainId={dstChainId}

package/src/components/WaitingForInit/index.tsx

@@ -0,0 +1,20 @@
+export const WaitingForInit = () => {
+  return (
+    <div
+      style={{
+        zIndex: 10,
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        backgroundColor: "rgba(0,0,0,0.8)",
+        position: "fixed",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      Waiting for XPay initialization ...
+    </div>
+  );
+};

package/src/config/init.tsx

@@ -0,0 +1,75 @@
+import { createRoot, Root } from "react-dom/client";
+import xswapConfig from "../../xswap.config";
+import { version } from "../../package.json";
+import { WaitingForInit } from "@src/components/WaitingForInit";
+
+export let initIndicatorRoot: Root;
+export let xswapRoot: Root;
+export let txStatusRoot: Root;
+
+let initCompleted = false;
+
+export const initDocument = () => {
+  if (typeof document === "undefined") {
+    throw new Error("Can't render XPay components from server side.");
+  }
+  createInitIndicatorRoot();
+
+  Promise.all([
+    createStyleElement(),
+    createXswapRoot(),
+    createTxStatusRoot(),
+  ]).then(() => {
+    initCompleted = true;
+  });
+};
+
+export const waitForInitialization = async () => {
+  if (!initCompleted) {
+    displayInitIndicator(true);
+    while (!initCompleted) {
+      await new Promise((resolve) => setTimeout(resolve, 10));
+    }
+    displayInitIndicator(false);
+  }
+};
+
+const createStyleElement = async () => {
+  const css = await fetch(
+    `${xswapConfig.apiUrl}/sdk/css?${new URLSearchParams({
+      data: JSON.stringify({ version }),
+    })}`,
+  );
+  const text = await css.text();
+  const style = document.createElement("style");
+  style.textContent = text;
+  document.body.appendChild(style);
+};
+
+const createXswapRoot = async () => {
+  const xswapElement = document.createElement("div");
+  xswapElement.setAttribute("id", "xswap-modal");
+  document.body.appendChild(xswapElement);
+  xswapRoot = createRoot(xswapElement);
+};
+
+const createTxStatusRoot = async () => {
+  const txStatusElement = document.createElement("div");
+  txStatusElement.setAttribute("id", "xswap-tx-status");
+  txStatusElement.setAttribute("class", "xswap-tx-status");
+  document.body.appendChild(txStatusElement);
+  txStatusRoot = createRoot(txStatusElement);
+};
+
+const createInitIndicatorRoot = () => {
+  const initIndicatorElement = document.createElement("div");
+  initIndicatorElement.setAttribute("id", "xswap-init-indicator");
+  document.body.appendChild(initIndicatorElement);
+  initIndicatorRoot = createRoot(initIndicatorElement);
+};
+
+const displayInitIndicator = (display: boolean) => {
+  display
+    ? initIndicatorRoot.render(<WaitingForInit />)
+    : initIndicatorRoot.render("");
+};

package/src/constants/index.ts

@@ -5,6 +5,7 @@ export const NUMBER_INPUT_REGEX = /^[0-9]*[.,]?[0-9]*$/;
 export const SLIPPAGE_PRESETS: number[] = [0.5, 1.5, 3.0];
 export const DELIVERY_TIME = 30 * 1000 * 60;
 export const EXPRESS_DELIVERY_TIME = 30 * 1000;
+export const EXPRESS_DELIVERY_LIMIT = 1000; // USD
 export const BALANCES_CHUNK_SIZE = 500;
 export const ROUTE_TIMEOUT_MS = 5000;
 export const MINIMUM_DISPLAYED_TOKEN_AMOUNT = 0.0001;

package/src/models/Route.ts

@@ -1,5 +1,3 @@
-import { TransactionRequest } from "@ethersproject/providers";
-
 export type Route = {
   estAmountOut: string;
   minAmountOut: string;
@@ -13,6 +11,12 @@ export type Transactions = {
   swap: TransactionRequest;
 };
 
+export type TransactionRequest = {
+  to: string;
+  data: string;
+  value: string;
+};
+
 export type XSwapFees = {
   ccipFee?: string;
   xSwapFee: XSwapFee;

package/src/utils/contracts.ts

@@ -1,8 +1,6 @@
 import { BigNumber, BigNumberish, ethers } from "ethers";
-import { TransactionRequest } from "@ethersproject/providers";
-import { safeBigNumberFrom } from "./numbers";
 import { ADDRESSES, BatchQueryAbi, ERC20Abi } from "@src/contracts";
-import { Chain, TokenBalances } from "@src/models";
+import { Chain, TokenBalances, TransactionRequest } from "@src/models";
 import { chunkArray } from "@src/utils";
 import { BALANCES_CHUNK_SIZE } from "@src/constants";
 
@@ -104,7 +102,7 @@ export const generateApproveTxData = (
   return tokenAddress !== ethers.constants.AddressZero
     ? {
         to: tokenAddress,
-        value: safeBigNumberFrom("0"),
+        value: "0",
         data: IERC20.encodeFunctionData("approve", [spender, amount]),
       }
     : undefined;

package/tailwind.config.js

@@ -1,5 +1,5 @@
 /** @type {import("tailwindcss").Config} */
-module.exports = {
+export default {
   content: ["./src/components/**/*.{js,ts,jsx,tsx,mdx}"],
   theme: {
     extend: {
@@ -18,7 +18,7 @@ module.exports = {
       },
       width: {
         x_desktop: "600px",
-        x_mobile: "320px",
+        x_mobile: "360px",
       },
       animation: {
         "spin-slow": "spin 3s linear infinite",

package/src/config/init.ts

@@ -1,31 +0,0 @@
-import { createRoot, Root } from "react-dom/client";
-import xswapConfig from "../../xswap.config";
-import { version } from "../../package.json";
-
-export let xswapRoot: Root;
-export let txStatusRoot: Root;
-
-export const initDocument = () => {
-  if (typeof document === "undefined") {
-    throw new Error("Can't render XPay components from server side.");
-  }
-
-  fetch(`${xswapConfig.apiUrl}/sdk/css?data={"version": "${version}"}`).then(
-    async (css) => {
-      const style = document.createElement("style");
-      style.textContent = await css.text();
-      document.body.appendChild(style);
-    },
-  );
-
-  const xswapElement = document.createElement("div");
-  xswapElement.setAttribute("id", "xswap-modal");
-  document.body.appendChild(xswapElement);
-  xswapRoot = createRoot(xswapElement);
-
-  const txStatusElement = document.createElement("div");
-  txStatusElement.setAttribute("id", "xswap-tx-status");
-  txStatusElement.setAttribute("class", "xswap-tx-status");
-  document.body.appendChild(txStatusElement);
-  txStatusRoot = createRoot(txStatusElement);
-};