@0xsquid/react-hooks 1.0.0

package/src/hooks/transaction/useEstimate.ts

@@ -0,0 +1,397 @@
+import { gasRefundMultiplier } from "@/core/constants";
+import { formatUnitsRounded } from "@/core/numbers";
+import { useSquidStore } from "@/hooks/store/useSquidStore";
+import { useNativeTokenBalanceFromChain } from "@/hooks/tokens/useBalance";
+import { useSingleTokenPrice } from "@/hooks/tokens/useSingleTokenPrice";
+import { useSquidTokens } from "@/hooks/tokens/useSquidTokens";
+import type { Estimate, FeeCost, GasCost } from "@0xsquid/squid-types";
+import { ChainType } from "@0xsquid/squid-types";
+import { BigNumber, constants } from "ethers";
+import { formatUnits } from "ethers/lib/utils";
+import { useMemo } from "react";
+import { useSquidChains } from "../chains/useSquidChains";
+import { useMultiChainBalance } from "../tokens/useMultiChainBalance";
+import { useGetRoute } from "./useGetRoute";
+
+export const useEstimate = ({
+  squidRoute,
+}: {
+  squidRoute: ReturnType<typeof useGetRoute>;
+}) => {
+  const { config } = useSquidStore();
+  const { balance: nativeTokenBalanceFromChain } =
+    useNativeTokenBalanceFromChain();
+  const { tokens } = useSquidTokens();
+  const { chains } = useSquidChains();
+
+  const [fromChain, toChain] = useMemo(() => {
+    return [
+      chains.find((c) => c.chainId === squidRoute.data?.params.fromChain),
+      chains.find((c) => c.chainId === squidRoute.data?.params.toChain),
+    ];
+  }, [
+    chains,
+    squidRoute.data?.params.fromChain,
+    squidRoute.data?.params.toChain,
+  ]);
+
+  const fromToken = useMemo(
+    () => tokens.find((t) => t.address === squidRoute.data?.params.fromToken),
+    [tokens, squidRoute.data?.params.fromToken]
+  );
+
+  const balanceFormatted =
+    useMultiChainBalance({
+      chain: fromChain,
+      token: fromToken,
+      userAddress: squidRoute.data?.params.fromAddress ?? "",
+      enabled: !!squidRoute.data,
+    }).balance ?? "0";
+
+  const fromAmount = useMemo(
+    () => squidRoute.data?.estimate?.fromAmount ?? undefined,
+    [squidRoute.data?.estimate?.fromAmount]
+  );
+
+  const fromAmountFormatted = useMemo(
+    () => (fromAmount ? formatUnits(fromAmount, fromToken?.decimals) : ""),
+    [fromAmount, fromToken?.decimals]
+  );
+
+  const sourceChainNativeToken = useMemo(() => {
+    return tokens.find(
+      (t) =>
+        t.symbol === fromChain?.nativeCurrency.symbol &&
+        t.chainId == fromChain?.chainId
+    );
+  }, [tokens, fromChain]);
+
+  const destChainNativeToken = useMemo(() => {
+    return tokens.find(
+      (t) =>
+        t.symbol === toChain?.nativeCurrency.symbol &&
+        t.chainId == toChain?.chainId
+    );
+  }, [tokens, toChain]);
+
+  const toAmountUSD = useMemo(
+    () => squidRoute.data?.estimate?.toAmountUSD ?? undefined,
+    [squidRoute.data?.estimate?.toAmountUSD]
+  );
+
+  const toAmountUSDFloat = useMemo(
+    () => (toAmountUSD ? parseFloat(toAmountUSD.replace(/,/g, "")) : 0),
+    [toAmountUSD]
+  );
+
+  const exchangeRate = useMemo(
+    () => squidRoute.data?.estimate.exchangeRate ?? "0",
+    [squidRoute.data?.estimate.exchangeRate]
+  );
+
+  const toAmountMin = useMemo(() => {
+    return formatUnits(
+      squidRoute.data?.estimate.toAmountMin ?? "0",
+      squidRoute.data?.estimate.toToken.decimals
+    );
+  }, [
+    squidRoute.data?.estimate.toAmountMin,
+    squidRoute.data?.estimate.toToken.decimals,
+  ]);
+
+  const toAmount = useMemo(() => {
+    const formattedAmount = formatUnitsRounded(
+      squidRoute.data?.estimate.toAmount ?? "0",
+      squidRoute.data?.estimate.toToken.decimals,
+      14
+    );
+    return formattedAmount === "0.0" ? "0" : formattedAmount;
+  }, [
+    squidRoute.data?.estimate.toAmount,
+    squidRoute.data?.estimate.toToken.decimals,
+  ]);
+
+  /**
+   * At the moment we're only taking the first item
+   * of fees array, but keeping the possibility to display multiple fees
+   */
+  const crossChainGasFee = useMemo((): FeeCost | undefined => {
+    const estimate = squidRoute.data?.estimate as Estimate;
+    return estimate?.feeCosts.length > 0 ? estimate?.feeCosts[0] : undefined;
+  }, [squidRoute.data?.estimate]);
+
+  const allFeeCosts = useMemo((): FeeCost[] => {
+    const estimate = squidRoute.data?.estimate as Estimate;
+    return estimate?.feeCosts ?? [];
+  }, [squidRoute.data?.estimate]);
+
+  const allGasCosts = useMemo((): GasCost[] => {
+    const estimate = squidRoute.data?.estimate as Estimate;
+    return estimate?.gasCosts ?? [];
+  }, [squidRoute.data?.estimate]);
+
+  const firstGasCost = useMemo(
+    (): GasCost | undefined =>
+      allGasCosts.length > 0 ? allGasCosts[0] : undefined,
+    [allGasCosts]
+  );
+
+  const firstFeeCost = useMemo(
+    (): FeeCost | undefined =>
+      allFeeCosts.length > 0 ? allFeeCosts[0] : undefined,
+    [allFeeCosts]
+  );
+
+  const integratorFeeCost = useMemo(
+    (): FeeCost | undefined =>
+      allFeeCosts.length > 0 && config.collectFees
+        ? // TODO: This is a hack to get the integrator fee, not mapped in squid types yet
+          allFeeCosts.find((f) => (f.name as any) === "Integrator Fee")
+        : undefined,
+    [allFeeCosts, config]
+  );
+
+  const { getUSDValue } = useSingleTokenPrice(firstFeeCost?.token);
+
+  const expressFeeCost = useMemo(
+    (): FeeCost | undefined =>
+      allFeeCosts.length > 0
+        ? allFeeCosts.find((f) => f.name === "Express Fee")
+        : undefined,
+    [allFeeCosts]
+  );
+
+  const expectedGasRefundCost = useMemo(
+    () =>
+      BigNumber.from(firstFeeCost?.amount ?? "0")
+        .mul(
+          // When source is Cosmos we don't refund any gas
+          fromChain?.chainType === ChainType.COSMOS ? 0 : gasRefundMultiplier
+        )
+        .div(100),
+    [firstFeeCost?.amount]
+  );
+
+  const sameTokenBetweenFees = useMemo(
+    () =>
+      firstFeeCost?.token.address === firstGasCost?.token.address &&
+      firstFeeCost?.token.chainId === firstGasCost?.token.chainId,
+    [
+      firstFeeCost?.token.address,
+      firstFeeCost?.token.chainId,
+      firstGasCost?.token.address,
+      firstGasCost?.token.chainId,
+    ]
+  );
+
+  // From token is the same as the native chain token
+  // TODO: This only works for EVM chains
+  const isFromTokenNative = useMemo(() => {
+    if (fromToken === undefined || fromChain?.chainId === undefined) {
+      return false;
+    }
+    return fromToken.symbol === fromChain.nativeCurrency.symbol;
+  }, [fromToken, fromChain]);
+
+  const totalNativeFees = useMemo(() => {
+    const expressBn = BigNumber.from(expressFeeCost?.amount ?? constants.Zero);
+    if (sameTokenBetweenFees) {
+      return BigNumber.from(firstFeeCost?.amount ?? constants.Zero)
+        .add(BigNumber.from(firstGasCost?.amount ?? constants.Zero))
+        .add(expressBn);
+    }
+
+    return BigNumber.from(firstGasCost?.amount ?? constants.Zero).add(
+      expressBn
+    );
+  }, [
+    firstFeeCost?.amount,
+    firstGasCost?.amount,
+    sameTokenBetweenFees,
+    expressFeeCost?.amount,
+  ]);
+
+  const totalFeesInNativeTokenPlusRatio = useMemo(() => {
+    return totalNativeFees.mul(105).div(100);
+  }, [totalNativeFees]);
+
+  const totalWithRefundEstimate = useMemo(() => {
+    const firstFee = {
+      BN: BigNumber.from(firstFeeCost?.amount ?? "0"),
+      token: firstFeeCost?.token,
+    };
+
+    const expressFee = {
+      BN: BigNumber.from(expressFeeCost?.amount ?? "0"),
+      token: expressFeeCost?.token,
+    };
+
+    // Big number amount
+    const totalBnbAmount = firstFee.BN.add(expressFee.BN).sub(
+      expectedGasRefundCost
+    );
+
+    const totalAmount = formatUnits(
+      totalBnbAmount,
+      firstFee.token?.decimals ?? 18
+    );
+
+    // USD values
+    const formattedRefundCost = formatUnits(
+      expectedGasRefundCost,
+      firstFeeCost?.token.decimals
+    );
+    const formattedRefundCostUSD = getUSDValue(formattedRefundCost);
+    const totalAmountUSD =
+      +(firstFeeCost?.amountUsd ?? 0) +
+      +(expressFeeCost?.amountUsd ?? 0) -
+      +(formattedRefundCostUSD ?? 0);
+
+    return {
+      totalAmount,
+      totalAmountUSD,
+      feeToken: firstFeeCost?.token,
+    };
+  }, [
+    expectedGasRefundCost,
+    expressFeeCost?.amount,
+    expressFeeCost?.amountUsd,
+    expressFeeCost?.token,
+    firstFeeCost?.amount,
+    firstFeeCost?.amountUsd,
+    firstFeeCost?.token,
+    getUSDValue,
+  ]);
+
+  /**
+   * Two cases:
+   * 1. If the source token is the same as the native token, check if the balance of native token is less than the (source amount) + (native gas)
+   * 2. If the source token is different from the native token, check if the balance of native token is less than (native gas)
+   */
+  const fromBalanceEnoughToSwap = useMemo(() => {
+    if (squidRoute.isLoading) return true;
+
+    const fromAmountWei = BigNumber.from(fromAmount ?? constants.Zero);
+    const fromBalance = nativeTokenBalanceFromChain.data ?? constants.Zero;
+
+    if (isFromTokenNative) {
+      const fromPlusGas = fromAmountWei.add(totalFeesInNativeTokenPlusRatio);
+      if (fromPlusGas.lte(fromBalance)) {
+        return true;
+      }
+    } else if (totalFeesInNativeTokenPlusRatio.lte(fromBalance)) {
+      return true;
+    }
+
+    return false;
+  }, [
+    nativeTokenBalanceFromChain.data,
+    fromAmount,
+    isFromTokenNative,
+    squidRoute.isLoading,
+    totalFeesInNativeTokenPlusRatio,
+  ]);
+
+  /**
+   * In the case where the source token is the same as the native token,
+   * we need to advise the user to change the source amount to be less than the balance of native token minus the gas cost
+   */
+  const minAmountValueWarnMsg = useMemo(() => {
+    if (!isFromTokenNative) {
+      return undefined;
+    }
+
+    const fromBalance = nativeTokenBalanceFromChain.data ?? constants.Zero;
+
+    const minAmount = fromBalance.sub(totalFeesInNativeTokenPlusRatio);
+
+    if (minAmount.gt(constants.Zero)) {
+      const parsedMinAmount = formatUnits(
+        minAmount,
+        sourceChainNativeToken?.decimals ?? 18
+      );
+
+      return parsedMinAmount;
+    }
+    return "0";
+  }, [
+    nativeTokenBalanceFromChain.data,
+    isFromTokenNative,
+    sourceChainNativeToken?.decimals,
+    totalFeesInNativeTokenPlusRatio,
+  ]);
+
+  const proposedGasDestinationAmount = useMemo(() => {
+    // Get native token of chain
+    const nativeToken = toChain?.nativeCurrency.symbol;
+    let gasDestinationAmount = 0;
+    switch (nativeToken) {
+      case "GLMR":
+        gasDestinationAmount = 5.289;
+        break;
+      case "ETH":
+        gasDestinationAmount = 0.0009;
+        break;
+      case "AVAX":
+        gasDestinationAmount = 0.115;
+        break;
+      case "BNB":
+        gasDestinationAmount = 0.00425;
+        break;
+      case "FTM":
+        gasDestinationAmount = 4.45;
+        break;
+      case "CELO":
+        gasDestinationAmount = 3.052;
+        break;
+      case "KAVA":
+        gasDestinationAmount = 2.339;
+        break;
+      case "MATIC":
+        gasDestinationAmount = 1.795;
+        break;
+      default:
+        gasDestinationAmount = 0;
+        break;
+    }
+    return { value: gasDestinationAmount, currency: nativeToken };
+  }, [toChain?.nativeCurrency.symbol]);
+
+  const enoughBalanceToSwap = useMemo(
+    () => +balanceFormatted >= 0 && +balanceFormatted > +fromAmountFormatted,
+    [balanceFormatted, fromAmountFormatted]
+  );
+
+  return {
+    allFeeCosts,
+    allGasCosts,
+    crossChainGasFee,
+    exchangeRate,
+    toAmountMin,
+    toAmount,
+    fromToken,
+    toAmountUSD,
+    toAmountUSDFloat,
+    isFetching: squidRoute.isLoading,
+    squidRouteError: squidRoute.error,
+    fromAmount,
+    fromAmountFormatted,
+    estimatedRouteDuration: squidRoute.data?.estimate?.estimatedRouteDuration,
+    minAmountValueWarnMsg,
+    fromBalanceEnoughToSwap,
+    isFromTokenNative,
+    firstFeeCost,
+    firstGasCost,
+    sameTokenBetweenFees,
+    totalFeesInNativeTokenPlusRatio,
+    totalNativeFees,
+    sourceChainNativeToken,
+    expressFeeCost,
+    proposedGasDestinationAmount,
+    expectedGasRefundCost,
+    totalWithRefundEstimate,
+    destChainNativeToken,
+    integratorFeeCost,
+    enoughBalanceToSwap,
+  };
+};

package/src/hooks/transaction/useEstimatePriceImpact.ts

@@ -0,0 +1,39 @@
+import { useSquidStore } from "@/hooks/store/useSquidStore";
+import { useGetRoute } from "@/hooks/transaction/useGetRoute";
+import { useMemo } from "react";
+
+export const useEstimatePriceImpact = ({
+  squidRoute,
+}: {
+  squidRoute: ReturnType<typeof useGetRoute>;
+}) => {
+  const { config } = useSquidStore();
+
+  const priceImpact = useMemo(
+    () => squidRoute.data?.estimate?.aggregatePriceImpact ?? undefined,
+    [squidRoute.data?.estimate]
+  );
+
+  const priceImpactStatus = useMemo(() => {
+    if (config.priceImpactWarnings !== undefined && priceImpact !== undefined) {
+      if (
+        +priceImpact >= config.priceImpactWarnings.warning &&
+        +priceImpact < config.priceImpactWarnings.critical
+      ) {
+        return "warning";
+      }
+      if (+priceImpact >= config.priceImpactWarnings.critical) {
+        return "critical";
+      }
+      if (+priceImpact < config.priceImpactWarnings.warning) {
+        return "normal";
+      }
+    }
+    return undefined;
+  }, [config.priceImpactWarnings, priceImpact]);
+
+  return {
+    priceImpact,
+    priceImpactStatus,
+  };
+};