@xswap-link/sdk 0.3.5 → 0.4.1

package/src/components/TxConfigForm/Form.tsx

@@ -1,574 +0,0 @@
-import "@src/global.css";
-import {
-  FormEvent,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { ethers } from "ethers";
-import { Config, useAccount, useSendTransaction, useSwitchChain } from "wagmi";
-import { Chain, Route, Token, TokenBalances, TokenPrices } from "@src/models";
-import {
-  getCustomTokenData,
-  getPrices,
-  getRoute,
-  renderTxStatus,
-} from "@src/services";
-import { getBalances, safeBigNumberFrom } from "@src/utils";
-import {
-  DEFAULT_REQUEST_ABORT_MSG,
-  DEFAULT_SOURCE_CHAIN_ID,
-  ROUTE_TIMEOUT_MS,
-} from "@src/constants";
-import { TxConfigFormProps } from "@src/components";
-import { ADDRESSES } from "@src/contracts";
-import { History } from "./History";
-import { TopBar } from "./TopBar";
-import { Settings } from "./Settings";
-import { FeesDetails } from "./FeesDetails";
-import { Summary } from "./Summary";
-import { SwapPanel } from "./SwapPanel";
-import { ErrorField } from "./ErrorField";
-import { Description } from "./Description";
-import { Button } from "./Button";
-import { getChainId, waitForTransactionReceipt } from "wagmi/actions";
-import { ConfirmationView } from "./ConfirmationView";
-import { ConnectWalletPrompt } from "./ConnectWalletPrompt";
-
-export const Form = ({
-  integratorId,
-  dstChainId,
-  dstTokenAddr,
-  customContractCalls,
-  desc,
-  supportedChains,
-  returnTransactions,
-  dstDisplayTokenAddr,
-  wagmiConfig,
-  onSubmit,
-  onClose,
-  setBackdropClickDisabled,
-}: TxConfigFormProps & {
-  wagmiConfig: Config;
-  returnTransactions: boolean;
-  onSubmit: (route: Route) => void;
-  onClose: () => void;
-  setBackdropClickDisabled: (disabled: boolean) => void;
-}) => {
-  const [signer, setSigner] = useState<string | undefined>();
-  const [dstChain, setDstChain] = useState<Chain>();
-  const [dstToken, setDstToken] = useState<Token>();
-  const [dstDisplayToken, setDstDisplayToken] = useState<Token>();
-  const [srcChain, setSrcChain] = useState<Chain>();
-  const [srcToken, setSrcToken] = useState<Token>();
-  const [amount, setAmount] = useState("");
-  const [paymentToken, setPaymentToken] = useState<Token>();
-  const [route, setRoute] = useState<Route>();
-  const [expressChecked, setExpressChecked] = useState(true);
-  const [historyTabShown, setHistoryTabShown] = useState(false);
-  const [isGettingRoute, setIsGettingRoute] = useState(false);
-  const [prices, setPrices] = useState<TokenPrices>();
-  const [balances, setBalances] = useState<TokenBalances>();
-  const [settingsShown, setSettingsShown] = useState(false);
-  const [formError, setFormError] = useState("");
-  const [slippage, setSlippage] = useState("1.5");
-  const [feesDetailsShown, setFeesDetailsShown] = useState(false);
-  const [executingTransactions, setExecutingTransactions] = useState(false);
-  const [transactionSuccessHash, setTransactionSuccessHash] = useState<
-    string | undefined
-  >();
-
-  const [txLoading, setTxLoading] = useState(false);
-  const [approveTxLoading, setApproveTxLoading] = useState(false);
-  const [approveTxDone, setApproveTxDone] = useState(false);
-  const [transactionError, setTransactionError] = useState<string | null>(null);
-
-  const routeAbortController = useRef<AbortController | null>(null);
-
-  // Wagmi hook to execute transactions
-  const { sendTransaction } = useSendTransaction({ config: wagmiConfig });
-
-  const account = useAccount();
-  const { switchChainAsync } = useSwitchChain();
-
-  // set signer address
-  useEffect(() => {
-    setSigner(account.address);
-  }, [account.address]);
-
-  // set source chain
-  useEffect(() => {
-    const defaultChain = supportedChains.find(
-      ({ chainId }) => chainId === account.chainId?.toString(),
-    );
-    setSrcChain(
-      defaultChain ??
-        supportedChains.find(
-          ({ chainId }) => chainId === DEFAULT_SOURCE_CHAIN_ID,
-        ),
-    );
-  }, [account.chainId]);
-
-  // set destination chain
-  useEffect(() => {
-    setDstChain(supportedChains.find((chain) => chain.chainId === dstChainId));
-  }, [supportedChains, dstChainId]);
-
-  // set destination token
-  useEffect(() => {
-    (async () => {
-      if (!dstChain) {
-        return;
-      }
-
-      let dstTokenResult = dstChain?.tokens.find(
-        (token) => token.address.toLowerCase() === dstTokenAddr.toLowerCase(),
-      );
-
-      if (!dstTokenResult) {
-        dstTokenResult = await getCustomTokenData(
-          dstChain,
-          dstTokenAddr.toLowerCase(),
-        );
-      }
-
-      setDstToken(dstTokenResult);
-
-      if (dstDisplayTokenAddr) {
-        let dstDisplayTokenResult = dstChain?.tokens.find(
-          (token) =>
-            token.address.toLowerCase() === dstDisplayTokenAddr.toLowerCase(),
-        );
-
-        if (!dstDisplayTokenResult) {
-          dstDisplayTokenResult = await getCustomTokenData(
-            dstChain,
-            dstDisplayTokenAddr.toLowerCase(),
-          );
-        }
-
-        setDstDisplayToken(dstDisplayTokenResult);
-      }
-    })();
-  }, [dstChain]);
-
-  // Handle fetching route
-  useEffect(() => {
-    if (
-      !(
-        integratorId &&
-        srcChain &&
-        srcToken &&
-        dstChain &&
-        amount &&
-        paymentToken &&
-        signer &&
-        slippage
-      )
-    ) {
-      return;
-    }
-
-    setFormError("");
-    const timeout = setTimeout(() => {
-      setFormError("Getting Route is taking longer than usually");
-    }, ROUTE_TIMEOUT_MS);
-    setIsGettingRoute(true);
-    setFeesDetailsShown(false);
-    if (!srcToken.decimals)
-      throw new Error(
-        `Configuration error: selected token ($${srcToken.symbol} ${srcToken.name}) has unknown decimals param.`,
-      );
-
-    if (routeAbortController.current) {
-      routeAbortController.current.abort(DEFAULT_REQUEST_ABORT_MSG);
-    }
-    routeAbortController.current = new AbortController();
-
-    getRoute(
-      {
-        integratorId,
-        fromAmount: ethers.utils
-          .parseUnits(amount, srcToken.decimals)
-          .toString(),
-        fromAddress: signer || ADDRESSES[srcChain.chainId]!.FeeCollector,
-        fromChain: srcChain.chainId,
-        fromToken: srcToken.address,
-        toAddress: signer || ADDRESSES[dstChain.chainId]!.FeeCollector,
-        toChain: dstChainId,
-        toToken: dstTokenAddr,
-        paymentToken: paymentToken.address,
-        slippage: Number(slippage),
-        expressDelivery: expressChecked,
-        customContractCalls,
-      },
-      routeAbortController.current.signal,
-    )
-      .then((response) => {
-        setRoute(response);
-        setFormError("");
-        setIsGettingRoute(false);
-        routeAbortController.current = null;
-      })
-      .catch((err) => {
-        if (err !== DEFAULT_REQUEST_ABORT_MSG) {
-          setFormError(err.message);
-        }
-      })
-      .finally(() => {
-        clearTimeout(timeout);
-      });
-  }, [
-    amount,
-    signer,
-    srcChain,
-    srcToken,
-    paymentToken,
-    slippage,
-    expressChecked,
-  ]);
-
-  // Set fee payment token
-  useEffect(() => {
-    if (srcChain) {
-      setPaymentToken(
-        srcChain.tokens.find(
-          (token) =>
-            token.address.toLowerCase() ===
-            ethers.constants.AddressZero.toLowerCase(),
-        ),
-      );
-    }
-  }, [srcChain]);
-
-  // Clear state on source token change
-  useEffect(() => {
-    setAmount("");
-    setFormError("");
-    setIsGettingRoute(false);
-    setRoute(undefined);
-  }, [srcToken]);
-
-  // Clear state on source chain change
-  useEffect(() => {
-    setSrcToken(srcChain?.tokens[0]);
-    setAmount("");
-    setIsGettingRoute(false);
-    setRoute(undefined);
-  }, [srcChain]);
-
-  // Fetch token prices on source chain
-  useEffect(() => {
-    if (srcChain) {
-      getPrices({ chainId: srcChain.chainId, currency: "USD" }).then((prices) =>
-        setPrices(prices),
-      );
-    }
-  }, [srcChain]);
-
-  // Fetch token balances on source chain
-  useEffect(() => {
-    if (srcChain && signer) {
-      getBalances(srcChain, signer).then((balances) => setBalances(balances));
-    }
-  }, [srcChain, signer]);
-
-  // Disable backdrop clicks when executing transactions
-  useEffect(() => {
-    setBackdropClickDisabled(executingTransactions);
-  }, [executingTransactions]);
-
-  // Execute the transactions received from the xPay.
-  const triggerTx = useCallback(async () => {
-    if (!route) {
-      return;
-    }
-    setExecutingTransactions(true);
-    setBackdropClickDisabled(true);
-    setTransactionError(null);
-
-    // Optional approve for ERC20 tokens.
-    if (route.transactions.approve) {
-      setApproveTxDone(false);
-
-      const { to, data } = route.transactions.approve;
-      sendTransaction(
-        {
-          to,
-          data,
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        } as any,
-        {
-          onSuccess: async (hash) => {
-            setApproveTxLoading(true);
-            const chainId = getChainId(wagmiConfig);
-            await waitForTransactionReceipt(wagmiConfig, {
-              chainId,
-              hash,
-            });
-            setApproveTxLoading(false);
-            setApproveTxDone(true);
-            await swap(route);
-          },
-          onError: (error) => {
-            setTransactionError(`Approval failed: ${error.message}`);
-            setApproveTxLoading(false);
-            setBackdropClickDisabled(false);
-          },
-        },
-      );
-    } else {
-      await swap(route);
-    }
-  }, [
-    route,
-    signer,
-    srcChain,
-    srcToken,
-    paymentToken,
-    slippage,
-    expressChecked,
-    amount,
-  ]);
-
-  // Sign and send the swap transaction
-  const swap = useCallback(
-    async (route: Route) => {
-      const { to, value, data } = route.transactions.swap;
-      sendTransaction(
-        {
-          to,
-          value: BigInt(value),
-          data,
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        } as any,
-        {
-          onSuccess: async (hash) => {
-            setTxLoading(true);
-            // Open the transaction monitor popup to inform user about the tx status
-            const chainId = getChainId(wagmiConfig);
-            await waitForTransactionReceipt(wagmiConfig, {
-              chainId,
-              hash,
-            });
-            setTxLoading(false);
-            if (srcChain?.chainId !== dstChain?.chainId) {
-              renderTxStatus(chainId.toString(), hash);
-            }
-            setTransactionSuccessHash(hash);
-          },
-          onError: (error) => {
-            setBackdropClickDisabled(false);
-            setTransactionError(`Transaction failed: ${error.message}`);
-          },
-        },
-      );
-    },
-    [route, signer, srcChain, srcToken, paymentToken, slippage, expressChecked],
-  );
-
-  // Handle form submit
-  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    if (!route) {
-      return;
-    }
-
-    if (returnTransactions) {
-      onSubmit(route);
-      return;
-    }
-
-    triggerTx();
-  };
-
-  const handleSwitchChain = async () => {
-    await switchChainAsync({ chainId: Number(srcChain?.chainId) });
-  };
-
-  // provides data for the main button
-  const swapButton: { text: string; fn: () => void; disabled: boolean } =
-    useMemo(() => {
-      if (transactionError) {
-        return {
-          text: transactionError,
-          fn: () => {},
-          disabled: true,
-        };
-      }
-
-      if (!signer) {
-        return {
-          text: "Connect wallet",
-          fn: () => {},
-          disabled: false,
-        };
-      }
-
-      if (
-        signer &&
-        srcChain &&
-        srcChain.chainId !== account.chainId?.toString()
-      ) {
-        return {
-          text: "Switch chain",
-          fn: handleSwitchChain,
-
-          disabled: false,
-        };
-      }
-
-      if (!amount) {
-        return {
-          text: `Enter token amount`,
-          fn: () => {},
-          disabled: true,
-        };
-      }
-
-      if (
-        amount &&
-        balances &&
-        srcToken &&
-        srcToken.decimals &&
-        balances[srcToken?.address] !== undefined &&
-        !ethers.utils
-          .parseUnits(amount, srcToken.decimals)
-          .lt(balances[srcToken?.address] || "0")
-      ) {
-        return {
-          text: "Insufficient balance",
-          fn: () => {},
-          disabled: true,
-        };
-      }
-
-      if (!route) {
-        return {
-          text: `Loading route`,
-          fn: () => {},
-          disabled: true,
-        };
-      }
-
-      return {
-        text: "Submit",
-        fn: () => {},
-        disabled: false,
-      };
-    }, [
-      account,
-      srcToken,
-      srcChain,
-      amount,
-      balances,
-      signer,
-      transactionError,
-      route,
-    ]);
-
-  // check if the express delivery will be executed
-  const isExpressDelivery = useMemo(() => {
-    const expressDeliveryFee =
-      !route?.xSwapFees || !route?.xSwapFees.expressDeliveryFee
-        ? safeBigNumberFrom("0")
-        : safeBigNumberFrom(route?.xSwapFees.expressDeliveryFee);
-    return expressDeliveryFee.gt("0");
-  }, [route]);
-
-  return (
-    <>
-      {!signer ? (
-        <ConnectWalletPrompt onClose={onClose} />
-      ) : executingTransactions ? (
-        <ConfirmationView
-          txError={transactionError}
-          onClose={onClose}
-          txSuccessHash={transactionSuccessHash}
-          srcChain={srcChain}
-          dstChain={dstChain}
-          isExpressDelivery={isExpressDelivery}
-          srcToken={srcToken}
-          amount={amount}
-          dstDisplayToken={dstDisplayToken}
-          dstToken={dstToken}
-          route={route}
-          supportedChains={supportedChains}
-          approveTxLoading={approveTxLoading}
-          approveTxDone={approveTxDone}
-          txLoading={txLoading}
-        />
-      ) : (
-        // XPay form
-        <form
-          className="xpay-flex xpay-flex-col xpay-gap-2 xpay-z-10 xpay-my-0 p-2 md:xpay-p-4 xpay-rounded-3xl xpay-overflow-hidden xpay-font-light sm:xpay-w-x_desktop"
-          onSubmit={handleSubmit}
-        >
-          <TopBar
-            signer={signer}
-            historyTabShown={historyTabShown}
-            setHistoryTabShown={setHistoryTabShown}
-            setSettingsShown={setSettingsShown}
-            onClose={onClose}
-          />
-          {settingsShown && (
-            <Settings
-              expressChecked={expressChecked}
-              setExpressChecked={setExpressChecked}
-              setSettingsShown={setSettingsShown}
-              slippage={slippage}
-              setSlippage={setSlippage}
-            />
-          )}
-          {historyTabShown ? (
-            <History signer={signer} supportedChains={supportedChains} />
-          ) : (
-            <div className="xpay-flex xpay-flex-col xpay-gap-2">
-              <SwapPanel
-                amount={amount}
-                setAmount={setAmount}
-                srcToken={srcToken}
-                setSrcToken={setSrcToken}
-                srcChain={srcChain}
-                signer={signer}
-                balances={balances}
-                prices={prices}
-                supportedChains={supportedChains}
-                setSrcChain={setSrcChain}
-              />
-              <Summary
-                isGettingRoute={isGettingRoute}
-                route={route}
-                dstToken={dstDisplayToken ? dstDisplayToken : dstToken}
-                dstChain={dstChain}
-              />
-              {desc && <Description description={desc} />}
-
-              <FeesDetails
-                route={route}
-                isGettingRoute={isGettingRoute}
-                paymentToken={paymentToken}
-                dstToken={dstToken}
-                slippage={slippage}
-                feesDetailsShown={feesDetailsShown}
-                setFeesDetailsShown={setFeesDetailsShown}
-                isExpressDelivery={isExpressDelivery}
-              />
-              {formError.length > 0 && <ErrorField error={formError} />}
-
-              <Button
-                type="submit"
-                disabled={swapButton.disabled}
-                onClick={swapButton.fn}
-              >
-                {swapButton.text}
-              </Button>
-            </div>
-          )}
-        </form>
-      )}
-    </>
-  );
-};

package/src/components/TxConfigForm/History.tsx

@@ -1,131 +0,0 @@
-import { Transaction, TransactionStatus, Chain } from "@src/models";
-import React, { FC, useCallback, useEffect, useState } from "react";
-import { getHistory } from "@src/services";
-import { DELIVERY_TIME, EXPRESS_DELIVERY_TIME } from "@src/constants";
-import BigNumberJS from "bignumber.js";
-import { HistoryCard } from "./HistoryCard";
-import { CircularProgressIcon } from "../icons";
-
-interface Props {
-  signer: string | undefined;
-  supportedChains: Chain[];
-}
-
-export const History: FC<Props> = ({ signer, supportedChains }) => {
-  const [fetchedHistory, setFetchedHistory] = useState<Transaction[]>();
-  const [historyLoadedOnce, setHistoryLoadedOnce] = useState(false);
-
-  const fetchHistory = useCallback(async () => {
-    if (signer) {
-      const downloadedHistory = await getHistory({ walletAddress: signer });
-      const fetchedTransactions: Transaction[] = [];
-      if (downloadedHistory) {
-        for (const entry of downloadedHistory.history) {
-          let status: TransactionStatus = "IN_PROGRESS";
-
-          // single chain tx
-          if (!entry.source) {
-            continue;
-          }
-
-          if (entry.failed) {
-            status = "REVERTED";
-          }
-          if (!!entry.target) {
-            status = "DONE";
-          }
-
-          if (entry.transferType === "SINGLE_CHAIN") {
-            if (!entry.target) {
-              continue;
-            }
-
-            const blockTimestampMs = new Date(entry.target.blockTime).getTime();
-            const estimatedDeliveryTimestamp = blockTimestampMs / 1000;
-
-            fetchedTransactions.push({
-              hash: entry.target.transactionHash,
-              timestamp: blockTimestampMs / 1000,
-              sourceChainId: entry.target.blockchainId,
-              targetChainId: entry.target.blockchainId,
-              amountWei: entry.source.tokenAmount,
-              tokenAddress: entry.source.tokenAddress,
-              tokenOutAddress: entry.target?.tokenAmount,
-              tokenOutAmount: entry.target?.tokenAmount,
-              estimatedDeliveryTimestamp,
-              status,
-            });
-
-            continue;
-          }
-
-          const blockTimestampMs = new Date(entry.source.blockTime).getTime();
-          const estimatedDeliveryTimestamp = new BigNumberJS(
-            entry.source.valueForInstantCcipRecieve,
-          ).gt(0)
-            ? blockTimestampMs + EXPRESS_DELIVERY_TIME
-            : blockTimestampMs + DELIVERY_TIME;
-
-          fetchedTransactions.push({
-            hash: entry.source.transactionHash,
-            timestamp: blockTimestampMs / 1000,
-            sourceChainId: entry.source.blockchainId,
-            targetChainId: entry.source.targetBlockchainId,
-            amountWei: entry.source.tokenAmount,
-            tokenAddress: entry.source.tokenAddress,
-            tokenOutAddress:
-              entry.target?.tokenAddress || entry.source.tokenOutAddress,
-            tokenOutAmount:
-              entry.target?.tokenAmount || entry.source.estimatedAmountOut,
-            estimatedDeliveryTimestamp,
-            status,
-          });
-        }
-
-        setFetchedHistory(
-          fetchedTransactions.sort((a, b) => b.timestamp - a.timestamp),
-        );
-        setHistoryLoadedOnce(true);
-      }
-    }
-  }, [signer, getHistory]);
-
-  useEffect(() => {
-    if (!historyLoadedOnce) fetchHistory();
-    const timer = setInterval(() => {
-      fetchHistory();
-    }, 60000);
-    return () => clearInterval(timer);
-  }, [signer, fetchHistory, getHistory, historyLoadedOnce]);
-
-  if (!signer)
-    return (
-      <div className="xpay-flex xpay-items-center xpay-justify-center xpay-w-full xpay-h-[30vh]">
-        Connect a wallet to browse history
-      </div>
-    );
-
-  return (
-    <div className="xpay-flex xpay-items-center xpay-justify-center xpay-w-full">
-      <div className="xpay-w-full xpay-h-96 xpay-overflow-scroll xpay-overflow-x-hidden">
-        {fetchedHistory?.length === 0 && historyLoadedOnce && (
-          <div className="xpay-w-full xpay-text-center xpay-py-4 xpay-px-0 xpay-text-[rgb(158,158,158)]">
-            Your history is empty...
-          </div>
-        )}
-        {!fetchedHistory && !historyLoadedOnce && (
-          <div className="xpay-flex xpay-w-full xpay-h-full xpay-items-center xpay-justify-center">
-            <CircularProgressIcon />
-          </div>
-        )}
-        {fetchedHistory?.map((transaction, index) => (
-          <HistoryCard
-            key={index}
-            transaction={transaction}
-            supportedChains={supportedChains}
-          />
-        ))}
-      </div>
-    </div>
-  );
-};