@xswap-link/sdk 0.3.3 → 0.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xswap-link/sdk",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "description": "JavaScript SDK for XSwap platform",
   "homepage": "https://github.com/xswap-link/xswap-sdk",
   "repository": {
@@ -72,7 +72,7 @@
   },
   "scripts": {
     "build": "tsup src/index.ts --format cjs,esm --dts && pnpm build:cdn",
-    "build:cdn": "tsup src/index.ts --format iife --minify --global-name XPay",
+    "build:cdn": "tsup src/index.ts --format iife --minify --global-name XPay --env.NODE_ENV production",
     "watch": "pnpm build && nodemon",
     "release": "pnpm build && changeset publish",
     "lint": "tsc && eslint . --ext .ts",

package/src/components/TxConfigForm/ConfirmationView/ErrorView.tsx

@@ -0,0 +1,38 @@
+import { CloseIcon, ErrorIcon } from "@src/components/icons";
+import { parseWeb3Error } from "@src/utils";
+import React from "react";
+
+type Props = {
+  txError: string | null;
+  onClose: () => void;
+};
+export const ErrorView = ({ txError, onClose }: Props) => {
+  return (
+    <div>
+      <div className="xpay-flex xpay-w-full xpay-justify-end xpay-items-center xpay-mx-auto xpay-p-2">
+        <div className="xpay-cursor-pointer xpay-text-white" onClick={onClose}>
+          <CloseIcon />
+        </div>
+      </div>
+
+      <div className="xpay-flex xpay-flex-col xpay-w-full xpay-justify-center xpay-items-center xpay-mx-auto xpay-p-2 xpay-gap-4">
+        <div>
+          <ErrorIcon />
+        </div>
+
+        <div className="xpay-flex xpay-flex-col">
+          <div>
+            <p className="xpay-text-2xl xpay-font-bold xpay-leading-8 xpay-text-center xpay-text-white">
+              Transaction error!
+            </p>
+          </div>
+          <div>
+            <p className="xpay-text-sm xpay-text-center xpay-text-white xpay-opacity-50">
+              {parseWeb3Error(txError)}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/TxConfigForm/ConfirmationView/SuccessView.tsx

@@ -0,0 +1,159 @@
+import {
+  ArrowRightIcon,
+  ArrowUpRightIcon,
+  CloseIcon,
+  SuccessIcon,
+} from "@src/components/icons";
+import { UnknownTokenLogo } from "@src/components/UnknownTokenLogo/UnknownTokenLogo";
+import { weiToHumanReadable } from "@src/utils";
+import { CCIP_EXPLORER } from "@src/constants";
+import React, { useMemo } from "react";
+import { Chain, Route, Token } from "@src/models";
+
+type Props = {
+  onClose: () => void;
+  txSuccessHash?: string;
+  srcChain?: Chain;
+  dstChain?: Chain;
+  isExpressDelivery: boolean;
+  srcToken?: Token;
+  amount: string;
+  dstDisplayToken?: Token;
+  dstToken?: Token;
+  route?: Route;
+  supportedChains: Chain[];
+};
+export const SuccessView = ({
+  onClose,
+  srcChain,
+  dstChain,
+  isExpressDelivery,
+  srcToken,
+  amount,
+  dstDisplayToken,
+  dstToken,
+  route,
+  txSuccessHash,
+  supportedChains,
+}: Props) => {
+  const dstTokenToDisplay = useMemo(() => {
+    return dstDisplayToken ? dstDisplayToken : dstToken;
+  }, [dstDisplayToken, dstToken]);
+
+  return (
+    <div>
+      <div className="xpay-flex xpay-w-full xpay-justify-end xpay-items-center xpay-mx-auto xpay-p-2">
+        <div className="xpay-cursor-pointer xpay-text-white" onClick={onClose}>
+          <CloseIcon />
+        </div>
+      </div>
+
+      <div className="xpay-flex xpay-flex-col xpay-w-full xpay-justify-center xpay-items-center xpay-mx-auto xpay-p-2 xpay-gap-4">
+        <div>
+          <SuccessIcon />
+        </div>
+        <div className="xpay-flex xpay-flex-col">
+          <div>
+            <p className="xpay-text-2xl xpay-font-bold xpay-leading-8 xpay-text-center xpay-text-white">
+              Transaction success!
+            </p>
+          </div>
+          {srcChain?.chainId !== dstChain?.chainId ? (
+            <div>
+              <p className="xpay-text-sm xpay-text-center xpay-text-white xpay-opacity-50">
+                Approximated time of delivery:{" "}
+                {isExpressDelivery ? "30 seconds" : "30 minutes"}
+              </p>
+            </div>
+          ) : (
+            <></>
+          )}
+        </div>
+
+        <div className="xpay-flex xpay-gap-4 xpay-items-center">
+          <div className="xpay-flex xpay-gap-2">
+            <div className="xpay-w-10 xpay-h-10">
+              {srcToken?.image ? (
+                <img
+                  className="xpay-w-10 xpay-h-10"
+                  src={srcToken?.image}
+                  alt={srcToken?.name}
+                />
+              ) : (
+                <UnknownTokenLogo
+                  tokenName={"?"}
+                  className="xpay-w-10 xpay-h-10"
+                />
+              )}
+            </div>
+            <div className="xpay-flex xpay-flex-col xpay-items-start">
+              <div className="xpay-flex">{`${amount} ${srcToken?.symbol}`}</div>
+              <div className="xpay-text-sm xpay-text-center xpay-text-white xpay-opacity-50">
+                {srcChain?.displayName}
+              </div>
+            </div>
+          </div>
+
+          <div className="xpay-w-3.5 xpay-h-3.5">
+            <ArrowRightIcon />
+          </div>
+
+          <div className="xpay-flex xpay-gap-2">
+            <div className="xpay-w-10 xpay-h-10">
+              {dstTokenToDisplay?.image ? (
+                <img
+                  className="xpay-w-10 xpay-h-10"
+                  src={dstTokenToDisplay?.image}
+                  alt={dstTokenToDisplay?.name}
+                />
+              ) : (
+                <UnknownTokenLogo
+                  tokenName={"?"}
+                  className="xpay-w-10 xpay-h-10"
+                />
+              )}
+            </div>
+            <div className="xpay-flex xpay-flex-col xpay-items-start">
+              <div className="xpay-flex">
+                {weiToHumanReadable({
+                  amount: route?.estAmountOut || "0",
+                  decimals: dstTokenToDisplay?.decimals || 18,
+                  precisionFractionalPlaces: 4,
+                })}{" "}
+                {dstTokenToDisplay?.symbol}
+              </div>
+              <div className="xpay-text-sm xpay-text-center xpay-text-white xpay-opacity-50">
+                {dstChain?.displayName}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <a
+            href={
+              srcChain?.chainId !== dstChain?.chainId
+                ? `${CCIP_EXPLORER}/tx/${txSuccessHash}`
+                : `${
+                    supportedChains.find(
+                      (chain) => chain.chainId === srcChain?.chainId,
+                    )?.transactionExplorer
+                  }/${txSuccessHash}`
+            }
+            target="_blank"
+            rel="noreferrer"
+            className="xpay-flex xpay-items-center xpay-gap-2 xpay-font-bold xpay-no-underline xpay-cursor-pointer xpay-text-center"
+            aria-label="Show the transaction in the chain explorer"
+          >
+            <p className="xpay-bg-gradient-to-r xpay-from-x_blue_light xpay-to-x_blue_dark xpay-bg-clip-text xpay-text-transparent xpay-underline">
+              View details on Explorer
+            </p>
+            <div className="xpay-w-3.5 xpay-h-3.5 xpay-bg-gradient-to-r xpay-text-x_blue_dark">
+              <ArrowUpRightIcon />
+            </div>
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/TxConfigForm/ConfirmationView/index.tsx

@@ -0,0 +1,149 @@
+import { ethers } from "ethers";
+import React, { FC } from "react";
+import {
+  ArrowDownIcon,
+  CheckIcon,
+  CloseIcon,
+  SignIcon,
+} from "@src/components/icons";
+import { Spinner } from "@src/components/Spinner";
+import { ConfirmationAmount } from "../ConfirmationAmount";
+import { Chain, Route, Token } from "@src/models";
+import { ErrorView } from "./ErrorView";
+import { SuccessView } from "./SuccessView";
+
+interface Props {
+  txError: string | null;
+  onClose: () => void;
+  txSuccessHash?: string;
+  srcChain?: Chain;
+  dstChain?: Chain;
+  isExpressDelivery: boolean;
+  srcToken?: Token;
+  amount: string;
+  dstDisplayToken?: Token;
+  dstToken?: Token;
+  route?: Route;
+  supportedChains: Chain[];
+  approveTxLoading: boolean;
+  approveTxDone: boolean;
+  txLoading: boolean;
+}
+export const ConfirmationView: FC<Props> = ({
+  txError,
+  onClose,
+  txSuccessHash,
+  srcChain,
+  dstChain,
+  isExpressDelivery,
+  srcToken,
+  amount,
+  dstDisplayToken,
+  dstToken,
+  route,
+  supportedChains,
+  approveTxLoading,
+  approveTxDone,
+  txLoading,
+}) => {
+  return (
+    <div className="xpay-flex xpay-flex-col xpay-gap-2 xpay-z-10 xpay-my-0 xpay-p-2 md:xpay-p-4 xpay-rounded-3xl xpay-overflow-hidden xpay-font-light sm:xpay-w-x_desktop xpay-w-screen">
+      {txError ? (
+        <ErrorView txError={txError} onClose={onClose} />
+      ) : txSuccessHash ? (
+        <SuccessView
+          onClose={onClose}
+          isExpressDelivery={isExpressDelivery}
+          amount={amount}
+          supportedChains={supportedChains}
+          txSuccessHash={txSuccessHash}
+          srcChain={srcChain}
+          dstChain={dstChain}
+          srcToken={srcToken}
+          dstDisplayToken={dstDisplayToken}
+          dstToken={dstToken}
+          route={route}
+        />
+      ) : (
+        // Tx Confirmation modal
+        <>
+          <div className="xpay-flex xpay-w-full xpay-justify-between xpay-items-center xpay-mx-auto xpay-p-2 xpay-font-light ">
+            <p className="xpay-text-white xpay-text-xl">Confirmation</p>
+            <div className="xpay-flex xpay-w-full xpay-justify-end xpay-items-center xpay-mx-auto xpay-p-2">
+              <div
+                className="xpay-cursor-pointer xpay-text-white"
+                onClick={onClose}
+              >
+                <CloseIcon />
+              </div>
+            </div>
+          </div>
+
+          <div className="xpay-flex xpay-flex-col xpay-gap-2">
+            <ConfirmationAmount
+              amount={ethers.utils
+                .parseUnits(amount, srcToken?.decimals)
+                .toString()}
+              chain={srcChain}
+              token={srcToken}
+              type="src"
+            />
+          </div>
+
+          <div className="xpay-flex xpay-justify-center  xpay-globalBorder xpay-rounded-xl xpay-p-[5px] xpay--mt-7 xpay--mb-6 ">
+            <div className="xpay-flex xpay-items-center xpay-justify-center xpay-rounded-lg  xpay-w-8 xpay-h-8 xpay-bg-gradient-to-l xpay-from-[rgba(54,129,198,1)] xpay-to-[rgba(43,74,157,1)] ">
+              <ArrowDownIcon />
+            </div>
+          </div>
+
+          <div className="xpay-flex xpay-flex-col xpay-gap-2">
+            <ConfirmationAmount
+              amount={route?.estAmountOut || "0"}
+              chain={dstChain}
+              token={dstDisplayToken ? dstDisplayToken : dstToken}
+              type="dst"
+            />
+          </div>
+          <div className="xpay-flex xpay-flex-col xpay-globalBorder xpay-p-4 xpay-justify-center xpay-rounded-xl xpay-bg-[rgba(15,15,15,1)] xpay-relative">
+            {route?.transactions.approve && (
+              <>
+                <div className="xpay-flex xpay-justify-between xpay-items-center">
+                  <div className="xpay-flex xpay-items-center xpay-gap-2">
+                    <SignIcon />
+                    <p className="xpay-opacity-50">
+                      {approveTxLoading
+                        ? "Wait for approval confirmation"
+                        : "Approve token spending"}
+                    </p>
+                  </div>
+                  <div className="xpay-flex xpay-items-center">
+                    {approveTxLoading && <Spinner width="5" height="5" />}
+                    {approveTxDone && (
+                      <div className="xpay-text-x_green xpay-w-5 xpay-h-5">
+                        <CheckIcon />
+                      </div>
+                    )}
+                  </div>
+                </div>
+                <div className="xpay-w-px xpay-h-6 xpay-mt-1 xpay-mb-1 xpay-ml-2.5 xpay-bg-white xpay-opacity-50"></div>
+              </>
+            )}
+            <div className="xpay-flex xpay-justify-between xpay-items-center">
+              <div className="xpay-flex xpay-items-center xpay-gap-2">
+                <SignIcon />
+                <p className="xpay-opacity-50">
+                  {txLoading
+                    ? "Wait for transaction confirmation"
+                    : "Confirm transaction"}
+                </p>
+              </div>
+              <div className="xpay-flex xpay-items-center">
+                {txLoading && <Spinner width="5" height="5" />}
+              </div>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+};

package/src/components/TxConfigForm/ConnectWalletPrompt.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { FC } from "react";
+import { CloseIcon } from "../icons";
+
+type Props = {
+  onClose: () => void;
+};
+export const ConnectWalletPrompt: FC<Props> = ({ onClose }) => {
+  return (
+    <div className="xpay-flex xpay-flex-col xpay-gap-2 xpay-z-10 xpay-my-0 xpay-p-2 md:xpay-p-4 xpay-rounded-3xl xpay-overflow-hidden xpay-font-light sm:xpay-w-x_desktop xpay-w-screen">
+      <div className="xpay-flex xpay-w-full xpay-justify-end xpay-items-center xpay-mx-auto xpay-p-2">
+        <div className="xpay-cursor-pointer xpay-text-white" onClick={onClose}>
+          <CloseIcon />
+        </div>
+      </div>
+      <p className="xpay-text-xl xpay-font-bold xpay-leading-8 xpay-text-center xpay-text-white">
+        Please connect the wallet first.
+      </p>
+    </div>
+  );
+};