@xswap-link/sdk 0.3.5 → 0.4.1

package/src/context/SwapProvider.tsx

@@ -0,0 +1,664 @@
+import { TxConfigFormPayload } from "@src/components";
+import {
+  DEFAULT_REQUEST_ABORT_MSG,
+  DEFAULT_SOURCE_CHAIN_ID,
+  DEFAULT_SOURCE_TOKEN_ADDR,
+} from "@src/constants";
+import { ADDRESSES } from "@src/contracts";
+import {
+  Chain,
+  Route,
+  Token,
+  TokenOption,
+  TokenPrices,
+  Transaction,
+  Web3Environment,
+} from "@src/models";
+import { getBalances, getPrices, getRoute } from "@src/services";
+import {
+  deepMergeObjects,
+  getBalanceOf,
+  humanReadableToWei,
+  safeBigNumberFrom,
+  weiToHumanReadable,
+} from "@src/utils";
+import BigNumberJS from "bignumber.js";
+import { BigNumber, constants } from "ethers";
+import {
+  createContext,
+  Dispatch,
+  ReactNode,
+  SetStateAction,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { Config, useAccount } from "wagmi";
+import { useHistory } from "./HistoryProvider";
+
+type Tab = "Swap" | "History" | "Settings";
+type SwapContext = {
+  integrationConfig: Partial<TxConfigFormPayload>;
+  wagmiConfig: Config;
+  supportedChains: Chain[];
+  tab: Tab;
+  setTab: Dispatch<SetStateAction<Tab>>;
+  error: string;
+  setError: Dispatch<SetStateAction<string>>;
+  feeToken: Token | undefined;
+  srcChain: Chain | undefined;
+  setSrcChain: Dispatch<SetStateAction<Chain | undefined>>;
+  srcChainTokensOptions: TokenOption[];
+  srcChainOtherTokensOptions: TokenOption[];
+  srcChainTokensPrices: TokenPrices;
+  dstChainTokensPrices: TokenPrices;
+  srcToken: Token | undefined;
+  setSrcToken: Dispatch<SetStateAction<Token | undefined>>;
+  dstChain: Chain | undefined;
+  setDstChain: Dispatch<SetStateAction<Chain | undefined>>;
+  dstChainTokensOptions: TokenOption[];
+  dstChainOtherTokensOptions: TokenOption[];
+  dstToken: Token | undefined;
+  setDstToken: Dispatch<SetStateAction<Token | undefined>>;
+  srcValue: string;
+  setSrcValue: Dispatch<SetStateAction<string>>;
+  srcValueWei: string;
+  srcValueUsd: string;
+  dstValue: string;
+  dstValueWei: string;
+  dstValueUsd: string;
+  dstValueMin: string;
+  lastTx: Transaction | undefined;
+  setLastTxHash: Dispatch<SetStateAction<string>>;
+  expressDelivery: boolean;
+  setExpressDelivery: Dispatch<SetStateAction<boolean>>;
+  slippage: string;
+  setSlippage: Dispatch<SetStateAction<string>>;
+  route: Route | undefined;
+  setRoute: Dispatch<SetStateAction<Route | undefined>>;
+  isAsyncDataLoaded: boolean;
+  srcTokenBalanceWei: string;
+  setSrcTokenBalanceWei: Dispatch<SetStateAction<string>>;
+  srcTokenBalanceInfo: string;
+  isFetchingRoute: boolean;
+  isFetchingBalance: boolean;
+  isExpressDeliveryActive: boolean;
+  quoteRoute: () => Promise<void>;
+  refreshBalance: () => void;
+  findTokenDataByAddressAndChain: (
+    tokenAddress: string,
+    chainId: string,
+  ) => Token | undefined;
+};
+
+const functionNotImplemented = () => {
+  throw new Error("Not implemented");
+};
+
+const init: SwapContext = {
+  integrationConfig: {},
+  wagmiConfig: {} as Config,
+  supportedChains: [],
+  tab: "Swap",
+  error: "",
+  feeToken: undefined,
+  srcChain: undefined,
+  srcChainTokensOptions: [],
+  srcChainOtherTokensOptions: [],
+  srcChainTokensPrices: {},
+  dstChainTokensPrices: {},
+  dstChain: undefined,
+  dstChainTokensOptions: [],
+  dstChainOtherTokensOptions: [],
+  srcToken: undefined,
+  dstToken: undefined,
+  srcValue: "",
+  srcValueWei: "",
+  srcValueUsd: "",
+  dstValue: "",
+  dstValueWei: "",
+  dstValueUsd: "",
+  dstValueMin: "",
+  lastTx: undefined,
+  expressDelivery: true,
+  slippage: "1.5",
+  route: undefined,
+  isAsyncDataLoaded: false,
+  srcTokenBalanceWei: "",
+  srcTokenBalanceInfo: "-",
+  isFetchingBalance: false,
+  isFetchingRoute: false,
+  isExpressDeliveryActive: true,
+  setTab: functionNotImplemented,
+  setError: functionNotImplemented,
+  setSrcChain: functionNotImplemented,
+  setDstChain: functionNotImplemented,
+  setSrcToken: functionNotImplemented,
+  setDstToken: functionNotImplemented,
+  setSrcValue: functionNotImplemented,
+  setLastTxHash: functionNotImplemented,
+  setExpressDelivery: functionNotImplemented,
+  setSlippage: functionNotImplemented,
+  setRoute: functionNotImplemented,
+  setSrcTokenBalanceWei: functionNotImplemented,
+  quoteRoute: functionNotImplemented,
+  refreshBalance: functionNotImplemented,
+  findTokenDataByAddressAndChain: functionNotImplemented,
+};
+
+const swapContext = createContext(init);
+
+type Props = {
+  children: ReactNode;
+  integrationConfig: Partial<TxConfigFormPayload>;
+  supportedChains: Chain[];
+  wagmiConfig: Config;
+};
+export const SwapProvider = ({
+  children,
+  integrationConfig,
+  supportedChains,
+  wagmiConfig,
+}: Props) => {
+  const { address } = useAccount();
+  const [tab, setTab] = useState(init.tab);
+  const [error, setError] = useState(init.error);
+  const [expressDelivery, setExpressDelivery] = useState(init.expressDelivery);
+  const [slippage, setSlippage] = useState(init.slippage);
+  const [srcChain, setSrcChain] = useState(init.srcChain);
+  const [dstChain, setDstChain] = useState(init.dstChain);
+  const [feeToken, setFeeToken] = useState(init.feeToken);
+  const [srcToken, setSrcToken] = useState(init.srcToken);
+  const [dstToken, setDstToken] = useState(init.dstToken);
+  const [srcValue, setSrcValue] = useState(init.srcValue);
+  const [isFetchingBalance, setIsFetchingBalance] = useState(
+    init.isFetchingBalance,
+  );
+  const [srcTokenBalanceWei, setSrcTokenBalanceWei] = useState(
+    init.srcTokenBalanceWei,
+  );
+  const [isFetchingRoute, setFetchingRoute] = useState(init.isFetchingRoute);
+  const [route, setRoute] = useState(init.route);
+
+  const [lastTxHash, setLastTxHash] = useState("");
+
+  const [srcChainTokensOptions, setSrcChainTokensOptions] = useState(
+    init.srcChainTokensOptions,
+  );
+  const [dstChainTokensOptions, setDstChainTokensOptions] = useState(
+    init.dstChainTokensOptions,
+  );
+  const [srcChainTokensPrices, setSrcChainTokensPrices] = useState(
+    init.srcChainTokensPrices,
+  );
+  const [dstChainTokensPrices, setDstChainTokensPrices] = useState(
+    init.dstChainTokensPrices,
+  );
+  const [srcChainOtherTokensOptions, setSrcChainOtherTokensOptions] = useState(
+    init.srcChainOtherTokensOptions,
+  );
+  const [dstChainOtherTokensOptions, setDstChainOtherTokensOptions] = useState(
+    init.dstChainOtherTokensOptions,
+  );
+
+  const routeAbortController = useRef<AbortController | null>(null);
+  const getTokenBalancesNonce = useRef(0);
+
+  const { history } = useHistory();
+
+  const supportedTokens: Record<string, Record<string, Token>> = useMemo(() => {
+    const customTokens = JSON.parse(
+      localStorage.getItem("custom-tokens") || "{}",
+    );
+    const chainIdToTokenAddressToData: {
+      [chainId: string]: {
+        [tokenAddress: string]: Token;
+      };
+    } = {};
+    supportedChains.forEach((chain) => {
+      chainIdToTokenAddressToData[chain.chainId] = {};
+      chain.tokens.forEach((token) => {
+        // @ts-expect-error TODO
+        chainIdToTokenAddressToData[chain.chainId][token.address] = token;
+      });
+    });
+    return deepMergeObjects(chainIdToTokenAddressToData, customTokens);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [supportedChains]);
+
+  const chainToTokenOptionsMap = useMemo(() => {
+    const tempChainToTokenOptionsMap: Record<string, TokenOption[]> = {};
+    Object.entries(supportedTokens).forEach(([chainId, chainData]) => {
+      tempChainToTokenOptionsMap[chainId] = Object.entries(chainData)
+        .filter(([, tokenData]) => tokenData.supported)
+        .sort(([, tokenDataA], [, tokenDataB]) => {
+          return tokenDataB.priority - tokenDataA.priority;
+        })
+        .map(([, tokenData]) => {
+          return {
+            chainId: chainId,
+            ...tokenData,
+          };
+        });
+    });
+    return tempChainToTokenOptionsMap;
+  }, [supportedTokens]);
+
+  const getTokenOptions = useCallback(
+    (chainId: string, oppositeChainId: string) => {
+      if (!chainId || !oppositeChainId) {
+        return [];
+      }
+      return chainToTokenOptionsMap[chainId] || [];
+    },
+    [chainToTokenOptionsMap],
+  );
+
+  const srcTokenBalanceInfo = useMemo(() => {
+    if (!srcToken || !srcTokenBalanceWei) {
+      return "";
+    }
+
+    if (safeBigNumberFrom(srcTokenBalanceWei).eq(0)) {
+      return "0";
+    }
+
+    const fullHumanReadableBalance = weiToHumanReadable({
+      amount: srcTokenBalanceWei,
+      decimals: srcToken.decimals,
+      precisionFractionalPlaces: srcToken.decimals,
+    });
+
+    if (new BigNumberJS(fullHumanReadableBalance).lt("0.00001")) {
+      return "<0.00001";
+    }
+
+    // Shortened to cut non-significant decimals
+    return weiToHumanReadable({
+      amount: srcTokenBalanceWei,
+      decimals: srcToken.decimals,
+      precisionFractionalPlaces: 5,
+    });
+  }, [srcToken, srcTokenBalanceWei]);
+
+  const lastTx = useMemo(() => {
+    return history?.find(({ hash }) => hash === lastTxHash);
+  }, [history, lastTxHash]);
+
+  const srcValueWei = useMemo(
+    () =>
+      humanReadableToWei({
+        amount: srcValue,
+        decimals: srcToken?.decimals || 18,
+      }),
+    [srcToken?.decimals, srcValue],
+  );
+
+  // fetch srcTokenPrices
+  useEffect(() => {
+    if (srcChain) {
+      getPrices({ chainId: srcChain.chainId, currency: "USD" }).then((prices) =>
+        setSrcChainTokensPrices(prices),
+      );
+    }
+  }, [srcChain]);
+
+  // fetch dstTokenPrices
+  useEffect(() => {
+    if (dstChain) {
+      getPrices({ chainId: dstChain.chainId, currency: "USD" }).then((prices) =>
+        setDstChainTokensPrices(prices),
+      );
+    }
+  }, [dstChain]);
+
+  const srcValueUsd = useMemo(() => {
+    if (
+      srcToken &&
+      srcChainTokensPrices &&
+      srcChainTokensPrices[srcToken.address]
+    ) {
+      return (
+        Number(srcValue) * Number(srcChainTokensPrices[srcToken.address])
+      ).toFixed(2);
+    }
+    return "0";
+  }, [srcChainTokensPrices, srcToken, srcValue]);
+  const dstValue = useMemo(
+    () =>
+      weiToHumanReadable({
+        amount: route?.estAmountOut || "0", // TODO include fees.xSwapFee.tokenFee
+        decimals: dstToken?.decimals || 18,
+        precisionFractionalPlaces: Math.min(8, dstToken?.decimals || 18),
+      }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [route],
+  );
+  const dstValueWei = useMemo(
+    () =>
+      humanReadableToWei({
+        amount: dstValue,
+        decimals: dstToken?.decimals || 18,
+      }),
+    [dstToken?.decimals, dstValue],
+  );
+  const dstValueUsd = useMemo(() => {
+    if (
+      dstToken &&
+      dstChainTokensPrices &&
+      dstChainTokensPrices[dstToken.address]
+    ) {
+      return (
+        Number(dstValue) * Number(dstChainTokensPrices[dstToken.address])
+      ).toFixed(2);
+    }
+    return "0";
+  }, [dstChainTokensPrices, dstToken, dstValue]);
+  const dstValueMin = useMemo(
+    () =>
+      weiToHumanReadable({
+        amount: route?.minAmountOut || "0",
+        decimals: dstToken?.decimals || 18,
+        precisionFractionalPlaces: Math.min(4, dstToken?.decimals || 18),
+      }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [route],
+  );
+
+  const isExpressDeliveryActive = useMemo(
+    () =>
+      expressDelivery &&
+      !!route &&
+      BigNumber.from(route.xSwapFees?.expressDeliveryFee || "0").gt("0"),
+    [expressDelivery, route],
+  );
+
+  const isAsyncDataLoaded = useMemo(
+    () => supportedChains.length > 0,
+    [supportedChains],
+  );
+
+  const quoteRoute = useCallback(async () => {
+    if (
+      !srcChain ||
+      !dstChain ||
+      !srcToken ||
+      !dstToken ||
+      !srcValueWei ||
+      safeBigNumberFrom(srcValueWei).eq(0)
+    ) {
+      setRoute(undefined);
+      return;
+    }
+    try {
+      setError("");
+      setFetchingRoute(true);
+
+      if (routeAbortController.current) {
+        routeAbortController.current.abort(DEFAULT_REQUEST_ABORT_MSG);
+      }
+      routeAbortController.current = new AbortController();
+      const route = await getRoute(
+        {
+          integratorId: integrationConfig.integratorId!,
+          fromChain: srcChain.chainId,
+          toChain: dstChain.chainId,
+          fromAddress:
+            address || ADDRESSES[srcChain.chainId]?.FeeCollector || "",
+          toAddress: address || ADDRESSES[dstChain.chainId]?.FeeCollector || "",
+          fromToken: srcToken.address,
+          toToken: dstToken.address,
+          fromAmount: srcValueWei,
+          slippage: Number(slippage),
+          customContractCalls: integrationConfig.customContractCalls,
+          paymentToken: constants.AddressZero,
+          expressDelivery: expressDelivery,
+        },
+        routeAbortController.current.signal,
+      );
+
+      setRoute(route);
+      setFetchingRoute(false);
+      routeAbortController.current = null;
+    } catch (error) {
+      if (error !== DEFAULT_REQUEST_ABORT_MSG) {
+        console.error(error);
+        setError("Could not find route!");
+        setRoute(undefined);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    address,
+    dstChain,
+    dstToken,
+    getRoute,
+    isExpressDeliveryActive,
+    slippage,
+    srcChain,
+    srcToken,
+    srcValueWei,
+  ]);
+
+  useEffect(() => {
+    quoteRoute();
+  }, [quoteRoute]);
+
+  useEffect(() => {
+    if (!srcChain || !dstChain) {
+      return;
+    }
+    (async () => {
+      // source chain
+      const srcTokenOptions: TokenOption[] = getTokenOptions(
+        srcChain.chainId,
+        dstChain.chainId,
+      ).filter(({ symbol }) =>
+        dstChain.chainId === srcChain.chainId
+          ? symbol !== dstToken?.symbol
+          : true,
+      );
+      setSrcChainTokensOptions(srcTokenOptions);
+
+      // destination chain
+      const dstTokenOptions: TokenOption[] = getTokenOptions(
+        dstChain.chainId,
+        srcChain.chainId,
+      ).filter(({ symbol }) =>
+        dstChain.chainId === srcChain.chainId
+          ? symbol !== srcToken?.symbol
+          : true,
+      );
+      setDstChainTokensOptions(dstTokenOptions);
+
+      // other source networks
+      const srcOtherTokenOptions: TokenOption[] = [];
+      const srcOtherChains = supportedChains.filter(
+        ({ chainId, web3Environment, swapSupported }) =>
+          chainId !== srcChain.chainId &&
+          web3Environment === Web3Environment.MAINNET &&
+          swapSupported,
+      );
+      for (const { chainId } of srcOtherChains) {
+        srcOtherTokenOptions.push(
+          ...getTokenOptions(chainId, dstChain.chainId).filter(({ symbol }) =>
+            chainId === dstChain.chainId ? symbol !== dstToken?.symbol : true,
+          ),
+        );
+      }
+      setSrcChainOtherTokensOptions(srcOtherTokenOptions);
+
+      // other destination networks
+      const dstOtherTokenOptions: TokenOption[] = [];
+      const dstOtherChains = supportedChains.filter(
+        ({ chainId, web3Environment, swapSupported }) =>
+          chainId !== dstChain.chainId &&
+          web3Environment === Web3Environment.MAINNET &&
+          swapSupported,
+      );
+      for (const { chainId } of dstOtherChains) {
+        dstOtherTokenOptions.push(
+          ...getTokenOptions(chainId, srcChain.chainId).filter(({ symbol }) =>
+            chainId === srcChain.chainId ? symbol !== srcToken?.symbol : true,
+          ),
+        );
+      }
+      setDstChainOtherTokensOptions(dstOtherTokenOptions);
+
+      if (address) {
+        const nonce = Date.now();
+
+        getTokenBalancesNonce.current = nonce;
+
+        const tokenBalancesResponse = await getBalances({
+          walletAddress: address,
+        });
+
+        const addBalances = (tokenOptions: TokenOption[]) => {
+          return tokenOptions.map((token) => ({
+            ...token,
+            balance: BigNumber.from(
+              tokenBalancesResponse[token.chainId][token.address] || 0,
+            ),
+          }));
+        };
+
+        if (getTokenBalancesNonce.current === nonce) {
+          setSrcChainTokensOptions(addBalances(srcTokenOptions));
+          setDstChainTokensOptions(addBalances(dstTokenOptions));
+          setSrcChainOtherTokensOptions(addBalances(srcOtherTokenOptions));
+          setDstChainOtherTokensOptions(addBalances(dstOtherTokenOptions));
+        }
+      }
+    })();
+  }, [
+    srcChain,
+    dstChain,
+    address,
+    getTokenOptions,
+    supportedChains,
+    srcToken?.symbol,
+    dstToken?.symbol,
+  ]);
+
+  const refreshBalance = useCallback(() => {
+    if (address && srcChain?.publicRpcUrls[0] && srcToken) {
+      setIsFetchingBalance(true);
+      getBalanceOf(address, srcToken.address, srcChain?.publicRpcUrls[0]).then(
+        (balance) => {
+          setSrcTokenBalanceWei(
+            humanReadableToWei({
+              amount: balance,
+              decimals: srcToken.decimals,
+            }),
+          );
+          setIsFetchingBalance(false);
+        },
+      );
+    }
+  }, [address, srcChain, srcToken]);
+
+  const findTokenDataByAddressAndChain = useCallback(
+    (tokenAddress: string, chainId: string): Token | undefined => {
+      return supportedTokens[chainId]?.[tokenAddress];
+    },
+    [supportedTokens],
+  );
+
+  useEffect(() => {
+    refreshBalance();
+  }, [refreshBalance]);
+
+  useEffect(() => {
+    setFeeToken(
+      srcChain?.tokens.find(({ address }) => address === constants.AddressZero),
+    );
+  }, [srcChain]);
+
+  useEffect(() => {
+    const initSrcChain = supportedChains.find(
+      ({ chainId }) =>
+        chainId === (integrationConfig?.srcChainId || DEFAULT_SOURCE_CHAIN_ID),
+    );
+    const initSrcToken = initSrcChain?.tokens.find(
+      ({ address }) =>
+        address ===
+        (integrationConfig?.srcTokenAddr || DEFAULT_SOURCE_TOKEN_ADDR),
+    );
+    const initDstChain = supportedChains.find(
+      ({ chainId }) => chainId === integrationConfig.dstChainId,
+    );
+    const initDstToken = initDstChain?.tokens.find(
+      ({ address }) => address === integrationConfig.dstTokenAddr,
+    );
+
+    setSrcChain(initSrcChain);
+    setSrcToken(initSrcToken);
+    setDstChain(initDstChain);
+    setDstToken(initDstToken);
+  }, [integrationConfig, supportedChains]);
+
+  return (
+    <swapContext.Provider
+      value={{
+        integrationConfig,
+        wagmiConfig,
+        supportedChains,
+        tab,
+        setTab,
+        error,
+        setError,
+        feeToken,
+        srcChain,
+        setSrcChain,
+        srcChainTokensOptions,
+        srcChainOtherTokensOptions,
+        dstChainTokensPrices,
+        srcChainTokensPrices,
+        dstChain,
+        setDstChain,
+        dstChainTokensOptions,
+        dstChainOtherTokensOptions,
+        srcToken,
+        setSrcToken,
+        dstToken,
+        setDstToken,
+        srcValue,
+        setSrcValue,
+        srcValueWei,
+        srcValueUsd,
+        dstValue,
+        dstValueWei,
+        dstValueUsd,
+        dstValueMin,
+        lastTx,
+        setLastTxHash,
+        expressDelivery,
+        setExpressDelivery,
+        slippage,
+        setSlippage,
+        route,
+        setRoute,
+        isAsyncDataLoaded,
+        srcTokenBalanceWei,
+        setSrcTokenBalanceWei,
+        srcTokenBalanceInfo,
+        isFetchingRoute,
+        isFetchingBalance,
+        isExpressDeliveryActive,
+        quoteRoute,
+        refreshBalance,
+        findTokenDataByAddressAndChain,
+      }}
+    >
+      {children}
+    </swapContext.Provider>
+  );
+};
+
+export const useSwapContext = () => {
+  return useContext(swapContext);
+};