@xswap-link/sdk 0.3.5 → 0.4.0

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

@@ -1,149 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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>
-  );
-};

package/src/components/TxConfigForm/Description.tsx

@@ -1,17 +0,0 @@
-import React, { FC } from "react";
-
-interface Props {
-  description: string;
-}
-
-export const Description: FC<Props> = ({ description }) => {
-  return (
-    <div className="xpay-flex xpay-flex-col xpay-gap-3 xpay-global-border xpay-rounded-lg xpay-bg-[rgba(15,15,15,1)] xpay-p-2 sm:xpay-p-4 ">
-      <div className="xpay-flex xpay-w-full xpay-items-center xpay-justify-between xpay-text-xs sm:xpay-text-sm">
-        <div className="xpay-flex xpay-items-center xpay-gap-1 xpay-font-medium xpay-text-white xpay-opacity-60">
-          {description}
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/components/TxConfigForm/ErrorField.tsx

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

package/src/components/TxConfigForm/FeesDetails.tsx

@@ -1,117 +0,0 @@
-import { FC, useMemo } 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;
-  isGettingRoute: boolean;
-  paymentToken: Token | undefined;
-  dstToken: Token | undefined;
-  slippage: string | undefined;
-  feesDetailsShown: boolean;
-  isExpressDelivery: boolean;
-  setFeesDetailsShown: React.Dispatch<React.SetStateAction<boolean>>;
-}
-
-export const FeesDetails: FC<Props> = ({
-  isGettingRoute,
-  route,
-  paymentToken,
-  dstToken,
-  slippage,
-  feesDetailsShown,
-  isExpressDelivery,
-  setFeesDetailsShown,
-}) => {
-  return (
-    <div className="xpay-flex xpay-flex-col xpay-gap-3 xpay-global-border xpay-rounded-lg xpay-bg-[rgba(15,15,15,1)] xpay-p-2 sm:xpay-p-4 ">
-      <div className="xpay-flex xpay-w-full xpay-items-center xpay-justify-between xpay-text-xs sm:xpay-text-sm">
-        <div className="xpay-flex xpay-items-center xpay-gap-1 xpay-font-medium xpay-text-white xpay-opacity-60">
-          <CoinsIcon />
-          <div className="xpay-mr-1">Fees:</div>
-          {isGettingRoute ? (
-            <Skeleton width="xpay-w-20" height="xpay-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="xpay-flex xpay-gap-1 xpay-items-center">
-          {route?.xSwapFees.expressDeliveryFee && !isGettingRoute && (
-            <div
-              className={`xpay-flex xpay-gap-1 xpay-items-center xpay-font-medium ${
-                isExpressDelivery
-                  ? "xpay-text-x_green"
-                  : "xpay-text-white xpay-opacity-60"
-              }`}
-            >
-              <TimerIcon />
-              {isExpressDelivery ? "Fast ~ 30sec " : "Normal ~ 30min"}
-            </div>
-          )}
-          <div
-            onClick={() => setFeesDetailsShown((x) => !x)}
-            className="xpay-font-medium xpay-text-white xpay-opacity-60 xpay-cursor-pointer xpay-flex xpay-items-center xpay-w-[15px] xpay-h-[9px]"
-          >
-            {feesDetailsShown ? <ChevronUpIcon /> : <ChevronDownIcon />}
-          </div>
-        </div>
-      </div>
-      {feesDetailsShown && (
-        <div className="xpay-flex xpay-w-full xpay-items-center xpay-justify-between xpay-gap-2">
-          <div className="xpay-flex xpay-flex-col xpay-text-[10px] xpay-gap-1">
-            <div className="xpay-flex xpay-justify-between xpay-font-medium xpay-text-white xpay-opacity-60 xpay-gap-1">
-              <div>CCIP Fee:</div>
-              <div className="xpay-whitespace-nowrap">
-                {` ${weiToHumanReadable({
-                  amount: route?.xSwapFees.ccipFee || "0",
-                  decimals: 18,
-                  precisionFractionalPlaces: 5,
-                })} ${paymentToken?.symbol}`}
-              </div>
-            </div>
-            <div className="xpay-flex xpay-justify-between xpay-font-medium xpay-text-white xpay-opacity-60 xpay-gap-1">
-              <div>Native Fee:</div>
-              <div className="xpay-whitespace-nowrap">
-                {` ${weiToHumanReadable({
-                  amount: route?.xSwapFees.xSwapFee.nativeFee || "0",
-                  decimals: 18,
-                  precisionFractionalPlaces: 5,
-                })} ${paymentToken?.symbol}`}
-              </div>
-            </div>
-          </div>
-          <div className="xpay-flex xpay-flex-col xpay-text-[10px] xpay-gap-1">
-            <div className="xpay-flex xpay-justify-between xpay-font-medium xpay-text-white xpay-opacity-60 xpay-gap-1">
-              <div>Slippage:</div>
-              <div className="xpay-whitespace-nowrap">{`${slippage}%`}</div>
-            </div>
-            <div className="xpay-flex xpay-justify-between xpay-font-medium xpay-text-white xpay-opacity-60 xpay-gap-1">
-              <div>Min amount out:</div>
-              <div className="xpay-whitespace-nowrap">
-                {weiToHumanReadable({
-                  amount: route?.minAmountOut || "0",
-                  decimals: dstToken?.decimals || 18,
-                  precisionFractionalPlaces: 5,
-                })}{" "}
-                {dstToken?.symbol}
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};