@xswap-link/sdk 0.3.5 → 0.4.0

package/src/components/Swap/SwapView/ConfirmationView/TxResult/index.tsx

@@ -0,0 +1,84 @@
+import {
+  ArrowDownLongIcon,
+  CloseIcon,
+  ErrorModalStatusIcon,
+  LinkExternalIcon,
+  SuccessModalStatusIcon,
+} from "@src/assets/icons";
+import { useSwapContext, useTxUIWrapper } from "@src/context";
+import { TokenItem } from "./TokenItem";
+
+type Props = {
+  onCloseClick: () => void;
+};
+
+export const TxResult = ({ onCloseClick }: Props) => {
+  const { txError, txExplorerUrl, txMsg } = useTxUIWrapper();
+  const {
+    isExpressDeliveryActive,
+    srcChain,
+    srcToken,
+    dstChain,
+    dstToken,
+    srcValue,
+    dstValue,
+  } = useSwapContext();
+
+  return (
+    <div className="flex flex-col gap-5 text-white justify-center items-center">
+      {txError ? (
+        <>
+          <div
+            className="flex justify-end fill-white cursor-pointer w-full"
+            onClick={onCloseClick}
+          >
+            <CloseIcon className="w-3.5 h-3.5" />
+          </div>
+          <ErrorModalStatusIcon />
+          <div className="text-2xl font-bold">Transaction failed</div>
+          <div className="text-center">{txError}</div>
+        </>
+      ) : (
+        <>
+          <div
+            className="flex justify-end fill-white cursor-pointer w-full"
+            onClick={onCloseClick}
+          >
+            <CloseIcon className="w-3.5 h-3.5" />
+          </div>
+          <SuccessModalStatusIcon />
+          <div className="flex flex-col items-center">
+            <div className="text-2xl font-bold">Transaction success!</div>
+            {!txMsg && srcChain !== dstChain && (
+              <div className="text-sm font-normal opacity-60">
+                {`Approximated time of delivery: ${
+                  isExpressDeliveryActive ? "30 sec" : "30 min"
+                }`}
+              </div>
+            )}
+          </div>
+          {!txMsg && (
+            <div className="flex items-center gap-2">
+              <TokenItem chain={srcChain} token={srcToken} value={srcValue} />
+              <div className="-rotate-90 w-8 fill-white">
+                <ArrowDownLongIcon />
+              </div>
+              <TokenItem chain={dstChain} token={dstToken} value={dstValue} />
+            </div>
+          )}
+          <a
+            href={txExplorerUrl}
+            target="_blank"
+            rel="noreferrer"
+            className="flex gap-4 items-center"
+          >
+            <p className="text-x_blue_300 underline">
+              View details on Explorer
+            </p>
+            <LinkExternalIcon />
+          </a>
+        </>
+      )}
+    </div>
+  );
+};

package/src/components/Swap/SwapView/ConfirmationView/index.tsx

@@ -0,0 +1,17 @@
+import { useTxUIWrapper } from "@src/context";
+import { TxStatus } from "@src/models";
+import { TxOverview } from "./TxOverview";
+import { TxResult } from "./TxResult";
+
+type Props = {
+  onCloseClick: () => void;
+};
+export const ConfirmationView = ({ onCloseClick }: Props) => {
+  const { txStatus, txError } = useTxUIWrapper();
+
+  return txStatus === TxStatus.COMPLETED || txError ? (
+    <TxResult onCloseClick={onCloseClick} />
+  ) : (
+    <TxOverview onCloseClick={onCloseClick} />
+  );
+};

package/src/components/Swap/SwapView/FeesPanel/DeliveryInfo/index.tsx

@@ -0,0 +1,25 @@
+import { TimerIcon } from "@src/assets/icons";
+import { useSwapContext } from "@src/context";
+
+export const DeliveryInfo = () => {
+  const { isExpressDeliveryActive } = useSwapContext();
+
+  return (
+    <div className="flex items-center">
+      <div
+        className={`w-4 h-4 mr-1 ${
+          isExpressDeliveryActive ? "fill-x_green_300" : "fill-white opacity-50"
+        } `}
+      >
+        <TimerIcon />
+      </div>
+      <span
+        className={`text-xs font-medium sm:text-sm ${
+          isExpressDeliveryActive ? "text-x_green_300" : "opacity-50"
+        }`}
+      >
+        {isExpressDeliveryActive ? "Fast ~ 30sec " : "Normal ~ 30min"}
+      </span>
+    </div>
+  );
+};

package/src/components/Swap/SwapView/FeesPanel/Fee/index.tsx

@@ -0,0 +1,18 @@
+import { Skeleton } from "@src/components";
+import { useSwapContext } from "@src/context";
+
+type Props = {
+  name: string;
+  value: string;
+};
+export const Fee = ({ name, value }: Props) => {
+  const { isFetchingRoute } = useSwapContext();
+  return (
+    <div className="flex gap-x-1 justify-between text-xs font-medium">
+      <div className="opacity-60">{name}</div>
+      <div>
+        {isFetchingRoute ? <Skeleton className="w-[60px] h-full" /> : value}
+      </div>
+    </div>
+  );
+};

package/src/components/Swap/SwapView/FeesPanel/Fees/index.tsx

@@ -0,0 +1,71 @@
+import { useSwapContext } from "@src/context";
+import { weiToHumanReadable } from "@src/utils";
+import { FC } from "react";
+import { Fee } from "../Fee";
+
+export const Fees: FC = () => {
+  const { route, slippage, feeToken, dstToken, expressDelivery } =
+    useSwapContext();
+
+  const fees = [
+    {
+      name: "CCIP Fee: ",
+      value: `${
+        weiToHumanReadable({
+          amount: route?.xSwapFees.ccipFee || "0",
+          decimals: feeToken?.decimals || 18,
+          precisionFractionalPlaces: 5,
+        }) || 0
+      } ${feeToken?.symbol}`,
+    },
+    {
+      name: "Native Fee: ",
+      value: `${
+        weiToHumanReadable({
+          amount: route?.xSwapFees.xSwapFee.nativeFee || "0",
+          decimals: feeToken?.decimals || 18,
+          precisionFractionalPlaces: 5,
+        }) || 0
+      } ${feeToken?.symbol}`,
+    },
+    ...(expressDelivery
+      ? [
+          {
+            name: "Express delivery Fee: ",
+            value: `${
+              weiToHumanReadable({
+                amount: route?.xSwapFees.expressDeliveryFee || "0",
+                decimals: feeToken?.decimals || 18,
+                precisionFractionalPlaces: 5,
+              }) || 0
+            } ${feeToken?.symbol}`,
+          },
+        ]
+      : []),
+    { name: "Slippage: ", value: `${slippage}%` },
+    {
+      name: "Min out: ",
+      value: `${
+        weiToHumanReadable({
+          amount: route?.minAmountOut || "0",
+          decimals: dstToken?.decimals || 18,
+          precisionFractionalPlaces: 5,
+        }) || 0
+      } ${dstToken?.symbol}`,
+    },
+  ];
+
+  return (
+    <div className="border-t border-solid border-white border-opacity-10 pt-3 mt-3">
+      <div
+        className={`flex flex-col gap-y-2 gap-x-10 sm:grid ${
+          fees.length === 4 ? "sm:grid-rows-2" : "sm:grid-rows-3"
+        } sm:grid-flow-col`}
+      >
+        {fees.map(({ name, value }) => (
+          <Fee key={name} name={name} value={value} />
+        ))}
+      </div>
+    </div>
+  );
+};

package/src/components/Swap/SwapView/FeesPanel/index.tsx

@@ -0,0 +1,67 @@
+import { ArrowDownIcon, TokensIcon } from "@src/assets/icons";
+import { Skeleton } from "@src/components";
+import { useSwapContext } from "@src/context";
+import { safeBigNumberFrom, weiToHumanReadable } from "@src/utils";
+import { useMemo, useState } from "react";
+import { DeliveryInfo } from "./DeliveryInfo";
+import { Fees } from "./Fees";
+
+export const FeesPanel = () => {
+  const [expanded, setExpanded] = useState(false);
+
+  const { route, feeToken, isFetchingRoute, srcChain, dstChain } =
+    useSwapContext();
+
+  const totalFee = useMemo(() => {
+    if (!route) {
+      return "0";
+    }
+    const totalWei = safeBigNumberFrom(route.xSwapFees.ccipFee || "0")
+      .add(safeBigNumberFrom(route.xSwapFees.xSwapFee.nativeFee || "0"))
+      .add(safeBigNumberFrom(route.xSwapFees.expressDeliveryFee || "0"))
+      .toString();
+
+    return weiToHumanReadable({
+      amount: totalWei,
+      decimals: feeToken?.decimals || 18,
+      precisionFractionalPlaces: 5,
+    });
+  }, [feeToken?.decimals, route]);
+
+  return (
+    <div className="flex flex-col x-border rounded-xl py-2 px-4 bg-x_gray_500">
+      <button
+        aria-label={`${expanded ? "Collapse" : "Expand"} fees panel`}
+        type="button"
+        onClick={() => setExpanded((e) => !e)}
+      >
+        <div className="flex justify-between">
+          <div className="flex gap-2 items-center text-xs font-medium sm:text-sm">
+            <TokensIcon />
+            <p className="opacity-60">Fee: </p>
+            {isFetchingRoute ? (
+              <Skeleton className="w-[100px] h-full" />
+            ) : (
+              <p className="opacity-60">{`${totalFee} ${feeToken?.symbol}`}</p>
+            )}
+          </div>
+          <div className="flex gap-2 items-center">
+            {route &&
+              !isFetchingRoute &&
+              srcChain?.chainId !== dstChain?.chainId && <DeliveryInfo />}
+            {expanded ? (
+              <div className="w-4 h-2 rotate-180">
+                <ArrowDownIcon />
+              </div>
+            ) : (
+              <div className="w-4 h-2">
+                <ArrowDownIcon />
+              </div>
+            )}
+          </div>
+        </div>
+        {expanded && <Fees />}
+      </button>
+    </div>
+  );
+};

package/src/components/Swap/SwapView/SwapButton/index.tsx

@@ -0,0 +1,154 @@
+import { useSwapContext, useTxUIWrapper } from "@src/context";
+import { TxStatus } from "@src/models";
+import { safeBigNumberFrom } from "@src/utils";
+import { useCallback, useMemo } from "react";
+import { useAccount, useSwitchChain } from "wagmi";
+
+type Button = {
+  text: string;
+  fn: () => void;
+  disabled: boolean;
+};
+
+export const SwapButton = () => {
+  const { address, chainId } = useAccount();
+  const { switchChainAsync } = useSwitchChain();
+
+  const {
+    error,
+    srcChain,
+    dstChain,
+    srcToken,
+    dstToken,
+    srcValueWei,
+    srcTokenBalanceWei,
+    isFetchingRoute,
+  } = useSwapContext();
+
+  const { setTxStatus, setTxMsg, setTxModalOpen } = useTxUIWrapper();
+
+  const srcChainId = useMemo(() => srcChain?.chainId, [srcChain?.chainId]);
+  const dstChainId = useMemo(() => dstChain?.chainId, [dstChain?.chainId]);
+  const srcTokenAddress = useMemo(() => srcToken?.address, [srcToken?.address]);
+  const dstTokenAddress = useMemo(() => dstToken?.address, [dstToken?.address]);
+
+  const showSwapConfirmationView = useCallback(() => {
+    setTxStatus(TxStatus.SWAP_INIT);
+    setTxMsg("");
+    setTxModalOpen(true);
+  }, [setTxModalOpen, setTxMsg, setTxStatus]);
+
+  const button: Button = useMemo(() => {
+    const disabled = false;
+
+    if (!srcChainId || !dstChainId || !srcTokenAddress || !dstTokenAddress) {
+      return {
+        text: "Loading XPay...",
+        fn: () => {},
+        disabled: true,
+      };
+    }
+
+    if (error) {
+      return {
+        text: error,
+        fn: () => {},
+        disabled: true,
+      };
+    }
+
+    if (!address) {
+      return {
+        text: "Connect wallet first",
+        fn: () => {},
+        disabled: true,
+      };
+    }
+
+    if (srcChainId === dstChainId && srcTokenAddress === dstTokenAddress) {
+      return {
+        text: "Change token",
+        fn: () => {},
+        disabled: true,
+      };
+    }
+
+    if (chainId?.toString() !== srcChainId) {
+      return {
+        text: "Change chain",
+        fn: async () => await switchChainAsync({ chainId: Number(srcChainId) }),
+        disabled,
+      };
+    }
+
+    if (
+      srcValueWei &&
+      srcTokenBalanceWei &&
+      safeBigNumberFrom(srcValueWei).gt(safeBigNumberFrom(srcTokenBalanceWei))
+    ) {
+      return {
+        text: "Insufficient balance",
+        fn: () => {},
+        disabled: true,
+      };
+    }
+
+    if (!srcTokenAddress || !dstTokenAddress) {
+      return {
+        text: `Select token`,
+        fn: () => {},
+        disabled: true,
+      };
+    }
+
+    if (safeBigNumberFrom(srcValueWei || "0").lte(safeBigNumberFrom("0"))) {
+      return {
+        text: `Enter token amount`,
+        fn: () => {},
+        disabled: true,
+      };
+    }
+
+    if (isFetchingRoute) {
+      return {
+        text: `Fetching route`,
+        fn: () => {},
+        disabled: true,
+      };
+    }
+
+    return {
+      text: "Swap",
+      fn: async () => {
+        showSwapConfirmationView();
+      },
+      disabled: false,
+    };
+  }, [
+    dstChainId,
+    dstTokenAddress,
+    error,
+    address,
+    chainId,
+    isFetchingRoute,
+    showSwapConfirmationView,
+    srcChainId,
+    srcTokenAddress,
+    srcTokenBalanceWei,
+    srcValueWei,
+    switchChainAsync,
+  ]);
+
+  return (
+    <button
+      type="button"
+      disabled={button.disabled}
+      onClick={button.fn}
+      className={`text-white border-none text-xl w-full py-5 cursor-pointer bg-gradient-to-r from-x_blue_300 to-x_blue_400 rounded-2xl ${
+        button.disabled && "bg-none bg-x_gray_500"
+      }`}
+    >
+      {button.text}
+    </button>
+  );
+};

package/src/components/Swap/SwapView/SwapPanel/AmountPanel/Balance/index.tsx

@@ -0,0 +1,23 @@
+import { Skeleton } from "@src/components";
+import { useSwapContext } from "@src/context";
+
+export const Balance = () => {
+  const { srcTokenBalanceInfo, isFetchingBalance } = useSwapContext();
+
+  return (
+    <div className="flex flex-col items-end">
+      <p className="text-xs font-medium opacity-60">Balance:</p>
+      {isFetchingBalance ? (
+        <Skeleton className="w-[50px] h-[16px]" />
+      ) : (
+        <p
+          className={`text-xs font-medium ${
+            !srcTokenBalanceInfo && "opacity-60"
+          }`}
+        >
+          {srcTokenBalanceInfo || "-"}
+        </p>
+      )}
+    </div>
+  );
+};

package/src/components/Swap/SwapView/SwapPanel/AmountPanel/index.tsx

@@ -0,0 +1,56 @@
+import { SafeInput, Skeleton } from "@src/components";
+import { NUMBER_INPUT_REGEX } from "@src/constants";
+import { useSwapContext } from "@src/context";
+import { useMemo } from "react";
+import { SwapPanelType } from "../../../SwapView";
+import { Balance } from "./Balance";
+
+type Props = {
+  type: SwapPanelType;
+};
+
+export const AmountPanel = ({ type }: Props) => {
+  const {
+    srcValue,
+    srcValueUsd,
+    dstValue,
+    dstValueUsd,
+    setSrcValue,
+    isFetchingRoute,
+  } = useSwapContext();
+
+  const valueUsd = useMemo(
+    () => (type === "source" ? srcValueUsd : dstValueUsd),
+    [dstValueUsd, srcValueUsd, type],
+  );
+
+  return (
+    <div className="flex justify-between items-center w-full p-4 gap-8 overflow-hidden">
+      <div className="flex flex-col font-medium w-full overflow-hidden">
+        {type === "source" ? (
+          <>
+            <SafeInput
+              id="swap-amount-input"
+              className={`bg-transparent border-none p-0 text-xl outline-0`}
+              regex={NUMBER_INPUT_REGEX}
+              value={srcValue}
+              onChange={(value) => setSrcValue(value)}
+            />
+            <div className={`text-sx opacity-60`}>{`$${valueUsd || 0}`}</div>
+          </>
+        ) : isFetchingRoute ? (
+          <div className="flex flex-col gap-1">
+            <Skeleton className="w-[150px] h-[30px]" />
+            <Skeleton className="w-[100px] h-[20px]" />
+          </div>
+        ) : (
+          <>
+            <div className={`text-xl text-x_blue_300`}>{dstValue || 0}</div>
+            <div className={`text-sx opacity-60`}>{`$${valueUsd || 0}`}</div>
+          </>
+        )}
+      </div>
+      {type === "source" && <Balance />}
+    </div>
+  );
+};

package/src/components/Swap/SwapView/SwapPanel/ChainPanel/ChainPicker/ChainItem/index.tsx

@@ -0,0 +1,70 @@
+import { DotGreenIcon, HelpIcon } from "@src/assets/icons";
+import { Tooltip } from "@src/components";
+import { useSwapContext } from "@src/context";
+import { Chain } from "@src/models";
+import { useMemo, useRef } from "react";
+import { SwapPanelType } from "../../../../../SwapView";
+
+type Props = {
+  chain: Chain;
+  type: SwapPanelType;
+  disabledChain?: string;
+  onClick: (chainId: string) => void;
+};
+export const ChainItem = ({ chain, type, disabledChain, onClick }: Props) => {
+  // todo check useModal, we could improve this part to have the react state here, right now this line throws an error
+  // const { address, chainId } = useAccount();
+
+  const tooltipTriggerRef = useRef<SVGSVGElement>(null);
+
+  const { srcChain, dstChain } = useSwapContext();
+  const currentChainId = useMemo(
+    () => (type === "source" ? srcChain?.chainId : dstChain?.chainId),
+    [dstChain, srcChain, type],
+  );
+
+  const connected = false; //address && chainId?.toString() === chain.chainId;
+
+  return (
+    <div
+      onClick={() => {
+        if (chain.chainId === disabledChain) {
+          return;
+        }
+        onClick(chain.chainId);
+      }}
+      className={`flex justify-between gap-3 mt-2 mb-2 cursor-pointer p-4  border border-solid border-white border-opacity-0 hover:selected-chain-item ${
+        currentChainId === chain.chainId && "selected-chain-item"
+      } ${
+        chain.chainId === disabledChain && "disabled-chain-item cursor-default"
+      }`}
+    >
+      <div className="flex gap-3 items-center w-full">
+        <img src={chain.image} alt={chain.name} className="w-[34px] h-[34px]" />
+        <p>{chain.displayName}</p>
+      </div>
+
+      {connected && (
+        <div className="flex items-center gap-1">
+          <DotGreenIcon />
+          <div className="text-x_green_300">connected</div>
+        </div>
+      )}
+      {chain.chainId === disabledChain && (
+        <div className="flex items-center gap-1">
+          <Tooltip
+            text="Transfers between same chain not available"
+            position="BOTTOM"
+            triggerRef={tooltipTriggerRef}
+            id="transfers-between-same-chains-tooltip"
+          />
+
+          <HelpIcon
+            ref={tooltipTriggerRef}
+            className="cursor-help fill-x_blue_300 w-[18px] h-[18px]"
+          />
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/Swap/SwapView/SwapPanel/ChainPanel/ChainPicker/index.tsx

@@ -0,0 +1,62 @@
+import { CloseIcon } from "@src/assets/icons";
+import { useModal } from "@src/context/ModalProvider";
+import { Chain, Web3Environment } from "@src/models";
+import { useMemo } from "react";
+import { Virtuoso } from "react-virtuoso";
+import { SwapPanelType } from "../../../../SwapView";
+import { ChainItem } from "./ChainItem";
+
+type Props = {
+  type: SwapPanelType;
+  supportedChains: Chain[];
+  setSrcChain: (chain: Chain | undefined) => void;
+  setDstChain: (chain: Chain | undefined) => void;
+};
+export const ChainPicker = ({
+  type,
+  supportedChains,
+  setSrcChain,
+  setDstChain,
+}: Props) => {
+  const { closeModal } = useModal();
+
+  const filteredChains = useMemo(() => {
+    return supportedChains.filter(
+      ({ web3Environment, swapSupported }) =>
+        web3Environment === Web3Environment.MAINNET && swapSupported,
+    );
+  }, [supportedChains]);
+
+  const select = (selectedChainId: string) => {
+    const chain = supportedChains.find(
+      ({ chainId }) => chainId === selectedChainId,
+    );
+    type === "source" ? setSrcChain(chain) : setDstChain(chain);
+    closeModal();
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex justify-between">
+        <div className="text-base/4 mb-4">{`Pick ${type} chain`}</div>
+        <div className="w-4 h-4 fill-white cursor-pointer" onClick={closeModal}>
+          <CloseIcon />
+        </div>
+      </div>
+      <div className="horizontal-separator" />
+      <div className="h-full pt-4">
+        {filteredChains.length ? (
+          <Virtuoso
+            style={{ height: "400px" }}
+            data={filteredChains}
+            itemContent={(_, chain) => (
+              <ChainItem chain={chain} type={type} onClick={select} />
+            )}
+          />
+        ) : (
+          <div className="flex justify-center mt-4">"No chain found."</div>
+        )}
+      </div>
+    </div>
+  );
+};