@0xsquid/react-hooks 1.0.0

package/src/hooks/swap/useSwap.ts

@@ -0,0 +1,359 @@
+import {
+  chainIdResetValue,
+  destinationAddressResetValue,
+} from "@/core/constants";
+import { useSquidChains } from "@/hooks/chains/useSquidChains";
+import {
+  useSquidStore,
+  useSwapRoutePersistStore,
+} from "@/hooks/store/useSquidStore";
+import { usePrices } from "@/hooks/tokens/usePrices";
+import { useSquidTokens } from "@/hooks/tokens/useSquidTokens";
+import { useMultiChainWallet } from "@/hooks/wallet/useMultiChainWallet";
+import {
+  filterTokensForDestination,
+  getDefaultTokenAddressForChain,
+  getFirstAvailableChainId,
+  getInitialOrDefaultTokenAddressForChain,
+  getTokensForChain,
+} from "@/services/internal/configService";
+import { WidgetEvents } from "@/services/internal/eventService";
+import type { Token } from "@0xsquid/sdk/dist/types";
+import { useCallback, useEffect, useMemo } from "react";
+
+export const useSwap = () => {
+  const { fromPrice, toPrice, config } = useSquidStore();
+  const { swapRoute } = useSwapRoutePersistStore();
+  const { tokenPrices } = usePrices();
+  const { tokens } = useSquidTokens();
+  const { chains, supportedDestinationChains, supportedSourceChains } =
+    useSquidChains();
+
+  // chain ID will use the swapRoute one (the user choice)
+  // Or the config one (if defined)
+  const fromChainId: string | number | undefined =
+    swapRoute?.fromChainId ||
+    (chains.find((c) => c.chainId === config.initialAssets?.from?.chainId) &&
+      config.initialAssets?.from?.chainId);
+
+  const toChainId: string | number | undefined =
+    swapRoute?.toChainId ||
+    (chains.find((c) => c.chainId === config.initialAssets?.to?.chainId) &&
+      config.initialAssets?.to?.chainId);
+
+  const fromChain = chains.find((c) => c.chainId === swapRoute?.fromChainId);
+  const fromTokens = getTokensForChain(tokens, fromChainId);
+  const fromToken = fromTokens.find(
+    (t) => t.address === swapRoute?.fromTokenAddress
+  );
+  const toChain = chains.find((c) => c.chainId === swapRoute?.toChainId);
+  const toTokensForChain = getTokensForChain(tokens, toChainId);
+  const toToken = toTokensForChain.find(
+    (t) => t.address === swapRoute?.toTokenAddress
+  );
+  const isSameChain = fromChainId === toChainId;
+  const toTokens = filterTokensForDestination(
+    toTokensForChain,
+    toChain,
+    fromToken
+  );
+
+  const tokenItems: { from: Token[]; to: Token[] } = useMemo(
+    () => ({
+      from: fromTokens,
+      to: toTokens,
+    }),
+    [fromTokens, toTokens]
+  );
+
+  const updatedDestinationAddress = swapRoute?.destinationAddress;
+  const { connectedAddress: destinationUserAddress } =
+    useMultiChainWallet(toChain);
+
+  /**
+   * Important to have a defined address otherwise the "getRoute" cannot be called
+   * TODO: Improve this check readability
+   */
+  const destinationAddress = useMemo(() => {
+    if (updatedDestinationAddress) return updatedDestinationAddress;
+    if (destinationUserAddress) return destinationUserAddress;
+    return undefined;
+  }, [destinationUserAddress, updatedDestinationAddress]);
+
+  /**
+   * When user changes the price of the source token,
+   * This will update the destination token price
+   * @param price: string
+   */
+  const fromPriceChanged = useCallback(
+    (price: string) => {
+      useSquidStore.setState({
+        fromPrice: price || undefined,
+      });
+
+      if (
+        price !== "" &&
+        !!tokenPrices.data?.sourceTokenUsdPrice &&
+        !!tokenPrices.data?.destinationTokenUsdPrice
+      ) {
+        const ratio =
+          tokenPrices.data.sourceTokenUsdPrice /
+          tokenPrices.data.destinationTokenUsdPrice;
+        useSquidStore.setState({
+          toPrice: +price * ratio,
+        });
+      }
+    },
+    [
+      tokenPrices.data?.destinationTokenUsdPrice,
+      tokenPrices.data?.sourceTokenUsdPrice,
+    ]
+  );
+
+  /**
+   * Destination token address has different logic
+   * Some tokens are not available based on the source chain/token
+   * TODO: This could need a refactor
+   */
+  const handleDestinationAddressOnSwapChange = useCallback(
+    (
+      fromChainId: string | number | undefined,
+      fromTokenAddress: string | undefined,
+      toTokenAddress: string | undefined,
+      toChainId: number | string | undefined
+    ) => {
+      const fromToken = tokens.find(
+        (t) =>
+          t.address === (fromTokenAddress ?? swapRoute?.fromTokenAddress) &&
+          t.chainId === fromChainId
+      );
+
+      const toChain = chains.find(
+        (c) => c.chainId === (toChainId ?? swapRoute?.toChainId)
+      );
+
+      const destinationTokensFiltered = filterTokensForDestination(
+        getTokensForChain(tokens, toChainId ?? swapRoute?.toChainId),
+        toChain,
+        fromToken
+      );
+
+      const defaultToAddress = getDefaultTokenAddressForChain(
+        destinationTokensFiltered,
+        config,
+        toChainId ?? swapRoute?.toChainId
+      );
+
+      let destinationTokenAddress =
+        toChainId && !toTokenAddress
+          ? defaultToAddress
+          : toTokenAddress ?? swapRoute?.toTokenAddress;
+
+      // Re assign destination token address if it's not available
+      if (
+        destinationTokensFiltered.find(
+          (t) => t.address === destinationTokenAddress
+        ) === undefined
+      ) {
+        destinationTokenAddress = defaultToAddress;
+      }
+      return destinationTokenAddress;
+    },
+    [
+      config,
+      fromTokens,
+      tokens,
+      swapRoute?.fromTokenAddress,
+      swapRoute?.toChainId,
+      swapRoute?.fromChainId,
+      swapRoute?.toTokenAddress,
+      toChain,
+    ]
+  );
+
+  /**
+   * When user changes chains from dropdown
+   * @param
+   */
+  const onSwapChange = useCallback(
+    async ({
+      fromChainId,
+      toChainId,
+      fromTokenAddress,
+      toTokenAddress,
+      destinationAddress,
+      fallbackAddress,
+    }: {
+      fromChainId?: number | string;
+      toChainId?: number | string;
+      fromTokenAddress?: string;
+      toTokenAddress?: string;
+      destinationAddress?: string;
+      fallbackAddress?: string;
+    }) => {
+      const sourceChainId = fromChainId ?? swapRoute?.fromChainId;
+
+      // Get the default Source Address
+      // This can be either the first token or the one set by the user from config
+      const defaultFromAddress = getDefaultTokenAddressForChain(
+        tokens,
+        config,
+        sourceChainId
+      );
+
+      // Get the destination ChainId based on parameters of swap received
+      const destinationChainId =
+        toChainId === chainIdResetValue
+          ? undefined
+          : toChainId ?? swapRoute?.toChainId;
+
+      // Destination Token Address based on parameters of swap received
+      // If the user only changed the chain, we need to get the default token address
+      // Otherwise, we use the one received
+      const sourceTokenAddress =
+        fromChainId && !fromTokenAddress
+          ? defaultFromAddress
+          : fromTokenAddress ?? swapRoute?.fromTokenAddress;
+
+      // Destination Token Address based on parameters of swap received
+      const destinationWalletAddress =
+        destinationAddress === destinationAddressResetValue
+          ? undefined
+          : destinationAddress ?? swapRoute?.destinationAddress;
+
+      // If destination wallet address is changed and fallback is not, reset fallback address
+      const fbAddress =
+        destinationAddress === destinationAddressResetValue ||
+        (!!destinationAddress && !fallbackAddress)
+          ? undefined
+          : fallbackAddress ?? swapRoute?.fallbackAddress;
+
+      // The destination token address is a bit different
+      // Some specific filters apply based on source chain & token
+      const destinationTokenAddress = handleDestinationAddressOnSwapChange(
+        fromChainId ?? swapRoute?.fromChainId,
+        sourceTokenAddress,
+        toTokenAddress,
+        toChainId
+      );
+
+      // Fire event
+      WidgetEvents.getInstance().dispatchSwapParamsChanged({
+        fromChainId: String(sourceChainId),
+        toChainId: String(destinationChainId),
+        fromTokenAddress: sourceTokenAddress,
+        toTokenAddress: destinationTokenAddress,
+      });
+
+      useSwapRoutePersistStore.setState({
+        swapRoute: {
+          fromChainId: sourceChainId,
+          toChainId: destinationChainId,
+          fromTokenAddress: sourceTokenAddress,
+          toTokenAddress: destinationTokenAddress,
+          destinationAddress: destinationWalletAddress,
+          fallbackAddress: fbAddress,
+        },
+      });
+    },
+    [
+      tokens,
+      config,
+      swapRoute?.fromChainId,
+      swapRoute?.toChainId,
+      swapRoute?.fromTokenAddress,
+      swapRoute?.destinationAddress,
+      swapRoute?.fallbackAddress,
+      handleDestinationAddressOnSwapChange,
+    ]
+  );
+
+  /**
+   * Inverting selected prices, chains & tokens
+   */
+  const invertSwaps = () => {
+    const isToChainDisabledOnSource = config.disabledChains?.source?.includes(
+      String(toChainId)
+    );
+
+    const isFromChainDisabledOnDestination =
+      config.disabledChains?.destination?.includes(String(fromChainId));
+
+    // if any of the chains are disabled on the opposite direction, do not allow to invert swap
+    if (isToChainDisabledOnSource || isFromChainDisabledOnDestination) return;
+
+    useSwapRoutePersistStore.setState({
+      swapRoute: {
+        fromChainId: toChainId,
+        toChainId: fromChainId,
+        fromTokenAddress: swapRoute?.toTokenAddress || tokenItems.to[0].address,
+        toTokenAddress:
+          swapRoute?.fromTokenAddress || tokenItems.from[0].address,
+      },
+    });
+  };
+
+  /**
+   * Init default chain ids and default token addresses
+   * From the first item of sdk arrays
+   */
+  useEffect(() => {
+    if (chains.length > 0 && !useSwapRoutePersistStore.getState().swapRoute) {
+      const defaultFromChainId = getFirstAvailableChainId(
+        config,
+        "from",
+        supportedSourceChains
+      );
+      const defaultToChainId = getFirstAvailableChainId(
+        config,
+        "to",
+        supportedDestinationChains
+      );
+
+      const fromTokenAddress = getInitialOrDefaultTokenAddressForChain({
+        chainId: defaultFromChainId,
+        config,
+        direction: "from",
+        tokens,
+      });
+      const toTokenAddress = getInitialOrDefaultTokenAddressForChain({
+        chainId: defaultToChainId,
+        config,
+        direction: "to",
+        tokens,
+        unavailableTokenAddress: fromTokenAddress,
+      });
+
+      useSwapRoutePersistStore.setState({
+        swapRoute: {
+          fromChainId: defaultFromChainId,
+          toChainId: defaultToChainId,
+          fromTokenAddress,
+          toTokenAddress,
+          destinationAddress: undefined,
+        },
+      });
+    }
+  }, [
+    config,
+    fromTokens,
+    supportedDestinationChains,
+    supportedSourceChains,
+    toTokens,
+  ]);
+
+  return {
+    tokenItems,
+    onSwapChange,
+    invertSwaps,
+    fromPrice,
+    toPrice,
+    fromPriceChanged,
+    toToken,
+    fromToken,
+    fromChain,
+    toChain,
+    destinationAddress,
+    isSameChain,
+  };
+};

package/src/hooks/tokens/useAllTokensWithBalance.ts

@@ -0,0 +1,157 @@
+import { keys } from "@/core/queries/queries-keys";
+import { TokenWithBalance } from "@/core/types/tokens";
+import { useSquidStore } from "@/hooks/store/useSquidStore";
+import { useSquidTokens } from "@/hooks/tokens/useSquidTokens";
+import { useSwap } from "@/hooks/swap/useSwap";
+import type { Token } from "@0xsquid/sdk/dist/types";
+import { useQuery } from "@tanstack/react-query";
+import { useCallback, useMemo } from "react";
+import { fetchPriceForToken } from "@/services/external/coingeckoService";
+import { getAllEvmTokensBalance } from "@/services/external/rpcService";
+import { useAccount } from "wagmi";
+
+export const useAllTokensWithBalance = (direction: "from" | "to") => {
+  const { config } = useSquidStore();
+  const { address: connectedEVMAddress, isConnected } = useAccount();
+
+  const { destinationAddress, fromToken, toToken } = useSwap();
+  const { tokens: squidTokens } = useSquidTokens();
+
+  const desiredAddress = useMemo(
+    () => (direction === "to" ? destinationAddress : connectedEVMAddress),
+    [connectedEVMAddress, destinationAddress, direction]
+  );
+
+  // Checking if token is EVM by checking if chainId is a number
+  const evmTokens: TokenWithBalance[] = useMemo(() => {
+    const disabledTokensOnDirection =
+      config.disabledChains?.[
+        direction === "from" ? "source" : "destination"
+      ] ?? [];
+
+    return squidTokens
+      .filter(
+        (t) =>
+          !isNaN(Number(t.chainId)) &&
+          !disabledTokensOnDirection.includes(t.chainId)
+      )
+      .map((t) => ({ ...t, balance: "0" }));
+  }, [squidTokens]);
+
+  // Checking if token is EVM by checking if chainId is a suite of letters
+  const cosmosTokens: TokenWithBalance[] = useMemo(() => {
+    const disabledTokensOnDirection =
+      config.disabledChains?.[
+        direction === "from" ? "source" : "destination"
+      ] ?? [];
+
+    return squidTokens
+      .filter(
+        (t) =>
+          isNaN(Number(t.chainId)) &&
+          !disabledTokensOnDirection.includes(t.chainId)
+      )
+      .map((t) => ({ ...t, balance: "0" }));
+  }, [squidTokens]);
+
+  const tokensWithoutBalance = useMemo(() => {
+    return [...evmTokens, ...cosmosTokens];
+  }, [cosmosTokens, evmTokens]);
+
+  const tokensWithBalanceQuery = useQuery<TokenWithBalance[]>(
+    keys({
+      apiUrl: config.apiUrl,
+      address: desiredAddress,
+    }).allTokensBalance(direction),
+    async () => {
+      // Need to be connected to query balance for EVM tokens
+      if (!isConnected || !desiredAddress) {
+        return [...evmTokens, ...cosmosTokens];
+      }
+
+      // Get balances
+      const evmTokensBalances = await getAllEvmTokensBalance(
+        evmTokens,
+        desiredAddress
+      );
+
+      // Concatenate all tokens
+      return [...evmTokensBalances, ...cosmosTokens] as TokenWithBalance[];
+    }
+  );
+
+  const removeTokenSelectedInOtherDirection = useCallback(
+    (t: Token): boolean => {
+      const tokenSelectedInOtherDirection =
+        direction === "to" ? fromToken : toToken;
+
+      return !(
+        t.address === tokenSelectedInOtherDirection?.address &&
+        t.chainId === tokenSelectedInOtherDirection?.chainId
+      );
+    },
+    [direction, fromToken, toToken]
+  );
+
+  const tokens = useMemo(
+    () =>
+      (tokensWithBalanceQuery.data ?? tokensWithoutBalance).filter(
+        removeTokenSelectedInOtherDirection
+      ),
+    [
+      tokensWithBalanceQuery.data,
+      tokensWithoutBalance,
+      removeTokenSelectedInOtherDirection,
+    ]
+  );
+
+  // When we load this view,
+  // Fetch the prices for all tokens that have a balance
+  // We need to do this to sort the tokens by USD price after
+  // Only load for tokens having a balance
+  const getTokensWithPrices = useQuery(
+    keys({
+      apiUrl: config.apiUrl,
+      address: desiredAddress,
+    }).allTokensPriceUSDAndBalance(),
+
+    async () => {
+      const tokensWithUnitPrice = await Promise.all(
+        tokens.map(async (t) => {
+          let usdPrice = t.priceUSD;
+          // If token has a balance but no USD unit price, fetch it
+          if (+t.balance !== 0 && !t.priceUSD && t.chainId) {
+            try {
+              usdPrice = (
+                await fetchPriceForToken({
+                  apiUrl: config.apiUrl,
+                  chainId: t.chainId.toString(),
+                  tokenAddress: t.address,
+                  integratorId: config.integratorId,
+                })
+              ).toString();
+            } catch (error) {
+              // Silent catch
+            }
+          }
+
+          return {
+            ...t,
+            priceUSD: usdPrice?.toString(),
+          } as TokenWithBalance;
+        })
+      );
+
+      return tokensWithUnitPrice;
+    },
+    {
+      enabled: tokensWithBalanceQuery.isSuccess, // Only fetch price when balance is loaded
+    }
+  );
+
+  return {
+    tokensWithBalanceQuery,
+    getTokensWithPrices,
+    tokens,
+  };
+};

package/src/hooks/tokens/useBalance.ts

@@ -0,0 +1,180 @@
+import { useQuery } from "@tanstack/react-query";
+import { getProvider } from "@wagmi/core";
+import { ethers, utils } from "ethers";
+import { useAccount } from "wagmi";
+
+import { ERC20__factory } from "@/contracts/typechain/factories/ERC20__factory";
+import { nativeEvmTokenAddress } from "@/core/constants";
+import { useCosmosContext } from "@/core/providers/CosmosProvider";
+import { keys } from "@/core/queries/queries-keys";
+import { useCosmosForChain } from "@/hooks/cosmos/useCosmosForChain";
+import { useSquidStore } from "@/hooks/store/useSquidStore";
+import { useSwap } from "@/hooks/swap/useSwap";
+import { useSquidTokens } from "@/hooks/tokens/useSquidTokens";
+import { useAllTokensWithBalanceForChain } from "@/hooks/tokens/useTokensWithBalance";
+import type { CosmosChain, EvmChain, Token } from "@0xsquid/squid-types";
+import { ChainType } from "@0xsquid/squid-types";
+import { useMemo } from "react";
+
+const defaultRefreshIntervalMs = 15000;
+
+/**
+ * Fetches the balance of a user on an EVM chain.
+ * The balance fetching only happens if the chain and token data are available, the user is connected, and the chain type is EVM.
+ *
+ * @param {boolean} enabled A flag indicating whether the balance fetching is enabled or not. Defaults to true.
+ * @param {boolean} refreshIntervalMs The interval in milliseconds at which the balance is fetched. Defaults to 15000 ms.
+ *
+ * @returns {Object} The react query object containing the balance data (defaults to "0").
+ *
+ */
+export const useEvmBalance = ({
+  chain,
+  token,
+  userAddress,
+  enabled = true,
+  refreshIntervalMs = defaultRefreshIntervalMs,
+}: {
+  chain?: EvmChain;
+  token?: Token;
+  userAddress: string;
+  enabled?: boolean;
+  refreshIntervalMs?: number;
+}) => {
+  const { isConnected } = useAccount();
+  const { config } = useSquidStore();
+
+  const balance = useQuery(
+    keys({ address: userAddress, apiUrl: config.apiUrl }).balance(
+      chain?.chainId,
+      token?.address,
+      userAddress
+    ),
+    async () => {
+      if (
+        !!chain &&
+        isConnected &&
+        !!token?.address &&
+        chain.chainType === ChainType.EVM
+      ) {
+        const srcProvider = getProvider({ chainId: +(chain.chainId ?? 1) });
+        const srcTokenContract = new ethers.Contract(
+          token?.address,
+          ERC20__factory.abi,
+          srcProvider
+        );
+
+        if (token.address.toLowerCase() === nativeEvmTokenAddress) {
+          const nativeCurrencyBalance =
+            await srcProvider.getBalance(userAddress);
+          return utils.formatUnits(nativeCurrencyBalance, token?.decimals);
+        }
+        try {
+          const tokenBalance = await srcTokenContract.balanceOf(userAddress);
+          return utils.formatUnits(tokenBalance, token?.decimals);
+        } catch (error) {
+          return "0";
+        }
+      } else {
+        return "0";
+      }
+    },
+    {
+      enabled: isConnected && enabled,
+      refetchInterval: 0 ? false : refreshIntervalMs,
+      retry: 2,
+    }
+  );
+  return { balance };
+};
+
+export const useNativeTokenBalanceFromChain = () => {
+  const { isConnected, address } = useAccount();
+  const { config } = useSquidStore();
+  const { fromChain } = useSwap();
+  const chainId = fromChain?.chainId;
+
+  const balance = useQuery(
+    keys({ address, apiUrl: config.apiUrl }).nativeBalanceBigNumber(chainId),
+    async () => {
+      const srcProvider = getProvider({ chainId: +(chainId ?? 1) });
+      const nativeCurrencyBalance = await srcProvider.getBalance(
+        address as string
+      );
+      return nativeCurrencyBalance;
+    },
+    {
+      enabled: isConnected,
+    }
+  );
+  return { balance };
+};
+
+export const useNativeTokenBalanceDestinationChain = () => {
+  const { isConnected, address } = useAccount();
+  const { config } = useSquidStore();
+  const { toChain } = useSwap();
+  const { tokens } = useSquidTokens();
+  const chainId = toChain?.chainId;
+  const nativeToken = tokens.find(
+    (t) =>
+      t.symbol.toLowerCase() === toChain?.nativeCurrency.symbol.toLowerCase() &&
+      t.chainId === chainId
+  );
+  const balance = useQuery(
+    keys({ address, apiUrl: config.apiUrl }).nativeBalanceBigNumber(
+      chainId,
+      nativeToken?.address
+    ),
+    async () => {
+      const srcProvider = getProvider({ chainId: +(chainId ?? 1) });
+      const nativeCurrencyBalance = await srcProvider.getBalance(
+        address as string
+      );
+      return nativeCurrencyBalance;
+    },
+    {
+      enabled: isConnected && !!nativeToken,
+    }
+  );
+  return { balance };
+};
+
+export const useCosmosBalance = ({
+  chainData,
+  token,
+  userAddress,
+}: {
+  chainData: CosmosChain | undefined;
+  token?: Token;
+  userAddress?: string;
+}) => {
+  const { isConnected } = useCosmosContext();
+  const { cosmosAddress } = useCosmosForChain(chainData);
+  const { cosmosBalances } = useAllTokensWithBalanceForChain(chainData);
+
+  const walletAddressToFetch = userAddress ?? cosmosAddress;
+
+  const balance = useMemo(() => {
+    if (
+      walletAddressToFetch &&
+      chainData &&
+      chainData.chainType === ChainType.COSMOS &&
+      isConnected
+    ) {
+      return (
+        cosmosBalances?.data?.find(
+          (b) => b.address === token?.address && b.chainId === chainData.chainId
+        )?.balance ?? "0"
+      );
+    }
+    return "0";
+  }, [
+    cosmosBalances.data,
+    walletAddressToFetch,
+    chainData,
+    token,
+    isConnected,
+  ]);
+  return { balance };
+};