@xswap-link/sdk 0.3.5 → 0.4.0

package/src/components/Swap/SettingsView/Slippage/index.tsx

@@ -0,0 +1,80 @@
+import { SafeInput } from "@src/components";
+import { NUMBER_INPUT_REGEX } from "@src/constants";
+import { useSwapContext } from "@src/context";
+import { useState } from "react";
+
+export const Slippage = () => {
+  const { slippage, setSlippage } = useSwapContext();
+  const [customSlippage, setCustomSlippage] = useState(slippage);
+
+  const onInputChange = (value: string) => {
+    if (value.length === 0) {
+      setCustomSlippage("");
+      setSlippage(defaultPreset);
+    } else {
+      if (value.length >= 5) {
+        value = value.substring(0, 5);
+      }
+      if (Number(value) <= 100) {
+        setCustomSlippage(value);
+        setSlippage(value);
+      }
+    }
+  };
+
+  const defaultPreset = "1.5";
+  const presets = ["0.5", "1.5", "3.0"];
+  return (
+    <div className="flex flex-col gap-5 pt-5 border-t border-solid border-white border-opacity-10">
+      <h1 className="text-sm font-medium">Slippage</h1>
+      <div className="flex items-center gap-2 w-full">
+        <div className="flex items-center bg-x_gray_500 p-1 border border-solid border-white border-opacity-10 rounded-xl gap-2">
+          {presets.map((preset) => (
+            <button
+              key={preset}
+              type="button"
+              onClick={() => onInputChange(preset)}
+              className={`block rounded-lg text-sm bg-transparent text-white h-7 px-1 hover:bg-gradient-to-r hover:from-x_blue_300 hover:to-x_blue_400 hover:opacity-100 ${
+                slippage === preset
+                  ? "bg-gradient-to-r from-x_blue_300 to-x_blue_400 opacity-100"
+                  : "opacity-20"
+              }`}
+            >
+              {`${preset}%`}
+            </button>
+          ))}
+        </div>
+        <div
+          className={`${
+            customSlippage ? "gradient-border-container-blue rounded-xl" : ""
+          }`}
+        >
+          <div
+            className={`bg-x_gray_500 p-1 border border-solid border-white border-opacity-10 rounded-xl`}
+          >
+            <SafeInput
+              id="slippage-input"
+              placeholder="1.5"
+              regex={NUMBER_INPUT_REGEX}
+              value={customSlippage}
+              onChange={onInputChange}
+              className="text-sm leading-none bg-transparent px-0.5 text-white placeholder:text-white/20 focus:outline-none"
+            />{" "}
+            %
+          </div>
+        </div>
+      </div>
+      <div className="text-sm opacity-60">
+        <p>
+          Slippage is the price variation you are willing to accept in the event
+          that the price of the trade changes while it is processing.
+        </p>
+        <br />
+        <p>
+          If the trade fails due to too low slippage, you will receive USDC on
+          the destination chain.
+        </p>
+      </div>
+    </div>
+  );
+};

package/src/components/Swap/SettingsView/index.tsx

@@ -0,0 +1,11 @@
+import { Delivery } from "./Delivery";
+import { Slippage } from "./Slippage";
+
+export const SettingsView = () => {
+  return (
+    <div className="flex flex-col gap-5">
+      <Delivery />
+      <Slippage />
+    </div>
+  );
+};

package/src/components/Swap/SwapView/ConfirmationView/TxOverview/ArrowIcon.tsx

@@ -0,0 +1,13 @@
+import { ArrowDownLongIcon } from "@src/assets/icons";
+
+export const ArrowIcon = () => {
+  return (
+    <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 p-1 border border-solid border-white border-opacity-10 rounded-xl bg-x_gray_500">
+      <div className="relative bg-gradient-to-r from-x_blue_300 to-x_blue_400 w-8 h-8 rounded-xl">
+        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 fill-white">
+          <ArrowDownLongIcon />
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,37 @@
+import { CloseIcon, HelpIcon } from "@src/assets/icons";
+import { Tooltip } from "@src/components/Tooltip/index";
+import { useRef } from "react";
+
+type Props = {
+  onCloseClick: () => void;
+};
+
+export const Header = ({ onCloseClick }: Props) => {
+  const tooltipTriggerRef = useRef<SVGSVGElement>(null);
+
+  return (
+    <div className="flex justify-between items-center text-base font-medium">
+      <div>Confirmation</div>
+      <div className="flex gap-4 items-center">
+        <Tooltip
+          text="To sign the transaction open the wallet you have used to connect with XSwap."
+          position="BOTTOM"
+          triggerRef={tooltipTriggerRef}
+          id="connect-wallet-to-sign-tx-tooltip"
+        />
+
+        <HelpIcon
+          ref={tooltipTriggerRef}
+          className="cursor-help fill-x_blue_300 w-[18px] h-[18px]"
+        />
+
+        <div
+          className="w-4 h-4 fill-white cursor-pointer"
+          onClick={onCloseClick}
+        >
+          <CloseIcon />
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,145 @@
+import {
+  CheckIcon,
+  SignIcon,
+  ThumbUpRoundedIcon,
+  WaitingIcon,
+} from "@src/assets/icons";
+import { useTxUIWrapper } from "@src/context";
+import { TxStatus } from "@src/models";
+import { ReactElement, useMemo } from "react";
+
+type Step = {
+  icon: (className: string) => ReactElement;
+  title: string;
+  state: "none" | "triggered" | "completed";
+  show: boolean;
+};
+
+// TODO item's 'show' logic is a bit complicated/weird. Think about an improvement...
+export const Steps = () => {
+  const { txStatus, txNeedsApproval, txMsg } = useTxUIWrapper();
+
+  const items: Step[] = useMemo(
+    () => [
+      {
+        icon: (className) => (
+          <div className={`fill-white ${className}`}>
+            <SignIcon />
+          </div>
+        ),
+        title: "sign approval transaction",
+        state:
+          txStatus === TxStatus.SIGNING_APPROVAL
+            ? "triggered"
+            : txStatus > TxStatus.SIGNING_APPROVAL
+            ? "completed"
+            : "none",
+        show: txMsg
+          ? txStatus === TxStatus.SIGNING_APPROVAL ||
+            txStatus === TxStatus.CONFIRMING_APPROVAL
+          : txNeedsApproval,
+      },
+      {
+        icon: (className) => (
+          <div className={`fill-white ${className}`}>
+            <ThumbUpRoundedIcon />
+          </div>
+        ),
+        title: "confirming approval transaction...",
+        state:
+          txStatus === TxStatus.CONFIRMING_APPROVAL
+            ? "triggered"
+            : txStatus > TxStatus.CONFIRMING_APPROVAL
+            ? "completed"
+            : "none",
+        show: txMsg
+          ? txStatus === TxStatus.SIGNING_APPROVAL ||
+            txStatus === TxStatus.CONFIRMING_APPROVAL
+          : txNeedsApproval,
+      },
+      {
+        icon: (className) => (
+          <div className={`fill-white ${className}`}>
+            <SignIcon />
+          </div>
+        ),
+        title: "sign transaction",
+        state:
+          txStatus === TxStatus.SIGNING_TX
+            ? "triggered"
+            : txStatus > TxStatus.SIGNING_TX
+            ? "completed"
+            : "none",
+        show: txMsg
+          ? txStatus === TxStatus.SIGNING_TX ||
+            txStatus === TxStatus.CONFIRMING_TX
+          : true,
+      },
+      {
+        icon: (className) => (
+          <div className={`fill-white ${className}`}>
+            <ThumbUpRoundedIcon />
+          </div>
+        ),
+        title: "confirming transaction...",
+        state:
+          txStatus === TxStatus.CONFIRMING_TX
+            ? "triggered"
+            : txStatus > TxStatus.CONFIRMING_TX
+            ? "completed"
+            : "none",
+        show: txMsg
+          ? txStatus === TxStatus.SIGNING_TX ||
+            txStatus === TxStatus.CONFIRMING_TX
+          : true,
+      },
+    ],
+    [txMsg, txNeedsApproval, txStatus],
+  );
+
+  const filteredItems = useMemo(
+    () => items.filter(({ show }) => show),
+    [items],
+  );
+
+  return (
+    <div className="flex flex-col gap-1">
+      {filteredItems.map(({ icon, title, state }, index) => (
+        <div key={title} className="flex flex-col px-4 gap-1">
+          <div className="flex justify-between items-center">
+            <div className="flex items-center gap-2">
+              {icon(
+                `fill-white ${
+                  state === "triggered" ? "fill-x_blue_300" : "opacity-60"
+                }`,
+              )}
+              <div
+                className={`${
+                  state !== "triggered"
+                    ? "opacity-60"
+                    : state === "triggered" && "text-x_blue_300"
+                }`}
+              >
+                {title}
+              </div>
+            </div>
+            <div>
+              {state === "completed" ? (
+                <div className="fill-x_green_400">
+                  <CheckIcon />
+                </div>
+              ) : state === "triggered" ? (
+                <div className="animate-spin-slow fill-x_blue_300">
+                  <WaitingIcon />
+                </div>
+              ) : null}
+            </div>
+          </div>
+          {index !== filteredItems.length - 1 && (
+            <div className="vertical-separator py-3 ml-2" />
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};

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

@@ -0,0 +1,61 @@
+import { TokenLogo } from "@src/components";
+import { useSwapContext } from "@src/context";
+import { SwapPanelType } from "../../../index";
+import { useMemo } from "react";
+
+type Props = {
+  type: SwapPanelType;
+};
+export const SwapPanel = ({ type }: Props) => {
+  const {
+    srcToken,
+    srcChain,
+    dstToken,
+    dstChain,
+    srcValue,
+    srcValueUsd,
+    dstValue,
+    dstValueUsd,
+  } = useSwapContext();
+
+  const token = useMemo(
+    () => (type === "source" ? srcToken : dstToken),
+    [dstToken, srcToken, type],
+  );
+
+  const chain = useMemo(
+    () => (type === "source" ? srcChain : dstChain),
+    [dstChain, srcChain, type],
+  );
+
+  const value = useMemo(
+    () => (type === "source" ? srcValue : dstValue),
+    [dstValue, srcValue, type],
+  );
+
+  const valueUsd = useMemo(
+    () => (type === "source" ? srcValueUsd : dstValueUsd),
+    [dstValueUsd, srcValueUsd, type],
+  );
+
+  return (
+    <div className="flex justify-between bg-gradient-to-r from-x_blue_300_20 to-x_blue_400_20 p-5 rounded-xl">
+      <div className="flex flex-col">
+        <div className="opacity-60 text-sm mb-2">{`You ${
+          type === "source" ? "pay" : "receive"
+        }`}</div>
+        <div className={`${type === "destination" && "text-x_blue_300"}`}>
+          {value}
+        </div>
+        <div className="opacity-60">${valueUsd}</div>
+      </div>
+      <div className="flex items-center gap-3">
+        <div className="flex flex-col text-right">
+          <div>{token?.symbol}</div>
+          <div className="opacity-60">{chain?.displayName}</div>
+        </div>
+        <TokenLogo token={token} className="w-[34px]" />
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,291 @@
+import { Button } from "@src/components";
+import {
+  FALLBACK_CROSSCHAIN_ESTIMATION_TIME,
+  crosschainEstimationTimes,
+} from "@src/constants";
+import { useHistory, useSwapContext, useTxUIWrapper } from "@src/context";
+import {
+  ADDRESSES,
+  CustomXSwapRouterAbi,
+  XSwapRouterAbi,
+} from "@src/contracts";
+import { useEvmContractApi } from "@src/hooks";
+import useNetworks from "@src/hooks/networkManagement/useNetworks";
+import { Ecosystem, Transaction, TxStatus } from "@src/models";
+import { renderTxStatus } from "@src/services";
+import { ContractReceipt, constants, ethers } from "ethers";
+import { useCallback } from "react";
+import { FeesPanel } from "../../FeesPanel";
+import { ArrowIcon } from "./ArrowIcon";
+import { Header } from "./Header";
+import { Steps } from "./Steps";
+import { SwapPanel } from "./SwapPanel";
+
+type Props = {
+  onCloseClick: () => void;
+};
+
+export const TxOverview = ({ onCloseClick }: Props) => {
+  const {
+    supportedChains,
+    srcChain,
+    srcToken,
+    dstChain,
+    dstToken,
+    srcValueWei,
+    dstValueWei,
+    route,
+    refreshBalance,
+  } = useSwapContext();
+
+  const {
+    txStatus,
+    setTxStatus,
+    txMsg,
+    enqueueTransaction,
+    setTxNeedsApproval,
+  } = useTxUIWrapper();
+
+  const { addTransactionToLocalHistory, updateTransactionInLocalHistory } =
+    useHistory();
+
+  const {
+    networks: {
+      evm: { signer },
+    },
+  } = useNetworks();
+
+  const evmContractApi = useEvmContractApi();
+
+  const trackTransaction = useCallback(
+    (txReceipt: ContractReceipt) => {
+      if (!srcChain || !dstChain || !srcToken || !dstToken || !route) {
+        return;
+      }
+
+      const transactionData: Transaction = {
+        hash: txReceipt.transactionHash,
+        timestamp: Date.now() / 1000,
+        sourceChainId: srcChain.chainId,
+        targetChainId: dstChain.chainId,
+        amountWei: srcValueWei,
+        tokenAddress: srcToken.address,
+        tokenOutAddress: dstToken?.address,
+        tokenOutAmount: dstValueWei,
+
+        estimatedDeliveryTimestamp:
+          Number(route.xSwapFees.expressDeliveryFee || "0") > 0 // express delivery fee TODO
+            ? (Date.now() / 1000) * 1000 + 30 * 1000
+            : (Date.now() / 1000) * 1000 +
+                crosschainEstimationTimes?.[srcChain?.chainId]?.[
+                  dstChain?.chainId
+                ] || FALLBACK_CROSSCHAIN_ESTIMATION_TIME,
+        status: "IN_PROGRESS",
+      };
+      if (srcChain.chainId === dstChain.chainId) {
+        // single chain swap
+        transactionData.estimatedDeliveryTimestamp = transactionData.timestamp;
+        transactionData.status = "DONE";
+      } else {
+        // cross-chain swap - listening for destination chain event
+        const messageSentEventSignature =
+          "MessageSent(bytes32,uint64,address,bytes,address,uint256,uint256,address,uint256)"; // TODO think of getting this signature in a different way becase its easy to forgot about it when we will change event on smartcontract
+        const messageReceivedEventSignature =
+          "MessageReceived(bytes32,uint64,address,bytes,address,uint256)"; // TODO think of getting this signature in a different way because its easy to forgot about it when we will change event on smartcontract
+        // cross-chain bridge via custom xswap router
+        const messageSentXSwapCustomRouterEventSignature =
+          "MessageSent(bytes32,uint64,address,address,address,address,uint256)"; // TODO think of getting this signature in a different way becase its easy to forgot about it when we will change event on smartcontract
+        const messageReceivedXSwapCustomRouterEventSignature =
+          "MessageReceived(bytes32,uint64,address,bytes)"; // TODO think of getting this signature in a different way because its easy to forgot about it when we will change event on smartcontract
+
+        const messageSentEvent = txReceipt.logs?.find((log) => {
+          return log.topics[0] === ethers.utils.id(messageSentEventSignature);
+        });
+        const messageSentXSwapCustomRouterEvent = txReceipt.logs?.find(
+          (log) => {
+            return (
+              log.topics[0] ===
+              ethers.utils.id(messageSentXSwapCustomRouterEventSignature)
+            );
+          },
+        );
+
+        const destinationChainProvider = ethers.getDefaultProvider(
+          supportedChains.find(
+            (chain) =>
+              chain.ecosystem === Ecosystem.EVM &&
+              chain.chainId === dstChain.chainId,
+          )?.publicRpcUrls[0],
+        );
+
+        if (messageSentEvent) {
+          // subscription for xswap router event
+          const messageId = messageSentEvent?.topics[1] as string;
+          transactionData.messageId = messageId;
+
+          const xSwapRouterOnDestination = new ethers.Contract(
+            // @ts-ignore
+            ADDRESSES[dstChain.chainId].XSwapRouter,
+            XSwapRouterAbi,
+            destinationChainProvider,
+          );
+
+          const eventFilter = {
+            // @ts-ignore
+            address: ADDRESSES[dstChain.chainId].XSwapRouter,
+            topics: [ethers.utils.id(messageReceivedEventSignature), messageId],
+          };
+
+          xSwapRouterOnDestination.once(eventFilter, () => {
+            transactionData.status = "DONE";
+            updateTransactionInLocalHistory(transactionData, txReceipt.from);
+          });
+        } else if (messageSentXSwapCustomRouterEvent) {
+          // subscription for custom router event
+          const messageId = messageSentXSwapCustomRouterEvent
+            ?.topics[1] as string;
+          transactionData.messageId = messageId;
+
+          const xSwapRouterOnDestination = new ethers.Contract(
+            // @ts-ignore
+            ADDRESSES[dstChain.chainId].CustomXSwapRouter,
+            CustomXSwapRouterAbi,
+            destinationChainProvider,
+          );
+
+          const eventFilter = {
+            address: ADDRESSES[dstChain.chainId]?.CustomXSwapRouter,
+            topics: [
+              ethers.utils.id(messageReceivedXSwapCustomRouterEventSignature),
+              messageId,
+            ],
+          };
+
+          xSwapRouterOnDestination.once(eventFilter, () => {
+            transactionData.status = "DONE";
+            updateTransactionInLocalHistory(transactionData, txReceipt.from);
+          });
+        }
+      }
+      addTransactionToLocalHistory(transactionData, txReceipt.from);
+    },
+    [
+      addTransactionToLocalHistory,
+      updateTransactionInLocalHistory,
+      srcChain,
+      dstChain,
+      srcToken,
+      dstToken,
+      srcValueWei,
+      dstValueWei,
+      supportedChains,
+      route,
+    ],
+  );
+
+  const enqueueSwapTx = useCallback(async () => {
+    if (srcToken && route) {
+      const enqueueSwap = () => {
+        enqueueTransaction({
+          executeTransaction: () => {
+            if (!route.transactions.swap || !signer) {
+              return;
+            }
+
+            return evmContractApi.executeCalldata(
+              signer,
+              route.transactions.swap,
+            );
+          },
+          txStatus: TxStatus.SIGNING_TX,
+          handlers: {
+            onSuccess: (data) => {
+              setTxStatus(TxStatus.COMPLETED);
+              refreshBalance();
+              trackTransaction(data);
+              if (
+                srcChain?.chainId &&
+                dstChain?.chainId &&
+                srcChain?.chainId !== dstChain?.chainId
+              ) {
+                renderTxStatus(
+                  srcChain?.chainId,
+                  data.transactionHash,
+                  dstToken?.address,
+                  dstValueWei,
+                );
+              }
+            },
+          },
+        });
+      };
+
+      if (
+        srcToken.address !== constants.AddressZero &&
+        route.transactions.approve
+      ) {
+        setTxNeedsApproval(true);
+        enqueueTransaction({
+          executeTransaction: () => {
+            if (!route.transactions.approve || !signer) {
+              return;
+            }
+            return evmContractApi.executeCalldata(
+              signer,
+              route.transactions.approve,
+            );
+          },
+          txStatus: TxStatus.SIGNING_APPROVAL,
+          handlers: {
+            onSuccess: () => enqueueSwap(),
+          },
+        });
+      } else {
+        setTxNeedsApproval(false);
+        enqueueSwap();
+      }
+    }
+  }, [
+    evmContractApi,
+    signer,
+    enqueueTransaction,
+    refreshBalance,
+    route,
+    setTxNeedsApproval,
+    setTxStatus,
+    srcToken,
+    trackTransaction,
+  ]);
+
+  return (
+    <div className="flex flex-col text-white gap-5">
+      <Header onCloseClick={onCloseClick} />
+      {txMsg ? (
+        <div>{txMsg}</div>
+      ) : (
+        <>
+          <div className="relative flex flex-col gap-5 fill-white">
+            <SwapPanel type="source" />
+            <ArrowIcon />
+            <SwapPanel type="destination" />
+          </div>
+          <FeesPanel />
+        </>
+      )}
+      {txStatus === TxStatus.SWAP_INIT ? (
+        <Button
+          variant="filled-squared"
+          onClick={() => {
+            enqueueSwapTx();
+          }}
+          type="button"
+          className="text-white border-none h-14 text-sm font-bold w-full py-5 cursor-pointer bg-gradient-to-r from-x_blue_300 to-x_blue_400 rounded-lg"
+        >
+          Sign and swap
+        </Button>
+      ) : (
+        <Steps />
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,24 @@
+import { TokenLogoWithChain } from "@src/components";
+import { Chain, Token } from "@src/models";
+
+type Props = {
+  chain: Chain | undefined;
+  token: Token | undefined;
+  value: string;
+};
+export const TokenItem = ({ chain, token, value }: Props) => {
+  return (
+    <div className="flex items-center gap-2">
+      <TokenLogoWithChain
+        chain={chain}
+        token={token}
+        chainLogoClassName="w-5"
+        tokenLogoClassName="w-[34px]"
+      />
+      <div className="flex flex-col w-min sm:w-auto">
+        <div>{`${value} ${token?.symbol}`}</div>
+        <div className="opacity-60">{chain?.displayName}</div>
+      </div>
+    </div>
+  );
+};