@0xsquid/react-hooks 1.0.0

package/src/hooks/tokens/useMultiChainBalance.ts

@@ -0,0 +1,59 @@
+import { useCosmosBalance, useEvmBalance } from "@/hooks/tokens/useBalance";
+import type {
+  ChainData,
+  CosmosChain,
+  EvmChain,
+  Token,
+} from "@0xsquid/sdk/dist/types";
+import { ChainType } from "@0xsquid/sdk/dist/types";
+import { useMemo } from "react";
+
+/**
+ * Exposes a hook to get balance depending on the chain type (EVM or Cosmos)
+ * @param {ChainData} chain
+ * @param {Token} token
+ * @param {string} userAddress
+ * @param {boolean} enabled
+ * @returns balance as string
+ */
+export const useMultiChainBalance = ({
+  chain,
+  token,
+  userAddress,
+  enabled = true,
+}: {
+  chain?: ChainData;
+  token?: Token;
+  userAddress?: string;
+  enabled?: boolean;
+}) => {
+  /**
+   * Get balance for EVM chain types
+   */
+  const { balance: evmBalance } = useEvmBalance({
+    chain: chain as EvmChain,
+    token,
+    userAddress: userAddress ?? "",
+    enabled: chain?.chainType === ChainType.EVM && enabled,
+  });
+
+  /**
+   * Get balance for Cosmos chain types
+   */
+  const { balance: cosmosBalance } = useCosmosBalance({
+    chainData: chain as CosmosChain,
+    token,
+    userAddress,
+  });
+
+  /**
+   * Get either EVM or cosmos Balance
+   */
+  const balance = useMemo(
+    () =>
+      chain?.chainType === ChainType.EVM ? evmBalance.data : cosmosBalance,
+    [evmBalance.data, chain, cosmosBalance]
+  );
+
+  return { balance };
+};

package/src/hooks/tokens/usePrices.ts

@@ -0,0 +1,52 @@
+import { keys } from "@/core/queries/queries-keys";
+import {
+  useSquidStore,
+  useSwapRoutePersistStore,
+} from "@/hooks/store/useSquidStore";
+import { fetchPriceForToken } from "@/services/external/coingeckoService";
+import { useQuery } from "@tanstack/react-query";
+
+export const usePrices = () => {
+  const { squid, config } = useSquidStore();
+  const { swapRoute } = useSwapRoutePersistStore();
+
+  /**
+   * Get token prices from Squid API
+   */
+  const tokenPrices = useQuery(
+    keys({ apiUrl: config.apiUrl }).tokensPrice(swapRoute),
+    async () => {
+      const result = await Promise.all([
+        // From
+        fetchPriceForToken({
+          apiUrl: config.apiUrl,
+          chainId: swapRoute?.fromChainId?.toString(),
+          tokenAddress: swapRoute?.fromTokenAddress,
+          integratorId: config.integratorId,
+        }),
+        // To
+        fetchPriceForToken({
+          apiUrl: config.apiUrl,
+          chainId: swapRoute?.toChainId?.toString(),
+          tokenAddress: swapRoute?.toTokenAddress,
+          integratorId: config.integratorId,
+        }),
+      ]);
+
+      return {
+        sourceTokenUsdPrice: result[0] as number,
+        destinationTokenUsdPrice: result[1] as number,
+      };
+    },
+    {
+      enabled:
+        swapRoute &&
+        !!squid &&
+        !!swapRoute?.fromChainId &&
+        !!swapRoute?.toChainId &&
+        !!swapRoute?.toTokenAddress &&
+        !!swapRoute?.fromTokenAddress,
+    }
+  );
+  return { tokenPrices };
+};

package/src/hooks/tokens/useSingleTokenPrice.ts

@@ -0,0 +1,45 @@
+import { keys } from "@/core/queries/queries-keys";
+import { useSquidStore } from "@/hooks/store/useSquidStore";
+import { fetchPriceForToken } from "@/services/external/coingeckoService";
+import type { Token } from "@0xsquid/sdk/dist/types";
+import { useQuery } from "@tanstack/react-query";
+import { useAccount } from "wagmi";
+
+/**
+ * If a component need to display price of a single token
+ * @param tokenData
+ * @returns
+ */
+export const useSingleTokenPrice = (
+  tokenData: Pick<Token, "address" | "chainId"> | undefined
+) => {
+  const { config } = useSquidStore();
+  const { address } = useAccount();
+
+  /**
+   * Get token price from Squid api
+   * Using coingecko under the hood
+   */
+  const tokenPrice = useQuery(
+    keys({ address, apiUrl: config.apiUrl }).singleTokenPrice(
+      tokenData?.address,
+      tokenData?.chainId
+    ),
+    async () => {
+      const price = await fetchPriceForToken({
+        apiUrl: config.apiUrl,
+        chainId: tokenData?.chainId.toString(),
+        tokenAddress: tokenData?.address,
+        integratorId: config.integratorId,
+      });
+
+      return price;
+    }
+  );
+
+  const getUSDValue = (balance: string) => {
+    return parseFloat(tokenPrice.data?.toString() ?? "0") * parseFloat(balance);
+  };
+
+  return { tokenPrice, getUSDValue };
+};

package/src/hooks/tokens/useSquidTokens.ts

@@ -0,0 +1,48 @@
+import { useSquidStore } from "@/hooks/store/useSquidStore";
+import { useMemo } from "react";
+
+export const useSquidTokens = () => {
+  const { squid, config } = useSquidStore();
+
+  const fuseSearchOptions = {
+    isCaseSensitive: false,
+    threshold: 0.1,
+    findAllMatches: false,
+    includeMatches: true,
+
+    keys: [
+      {
+        name: "symbol",
+        weight: 1, // highest relevance
+      },
+      {
+        name: "name",
+        weight: 0.8, // slightly less relevance than symbol
+      },
+    ],
+  };
+
+  const tokens = useMemo(() => {
+    const unavailableChainIds = config.comingSoonChainIds?.map(String) ?? [];
+
+    // Remove tokens with same chainId and address
+    // and those from unavailable chains
+    const filteredTokens = squid?.tokens.filter((token, index, self) => {
+      const isTokenUnique =
+        index ===
+        self.findIndex(
+          (t) => t.chainId === token.chainId && t.address === token.address
+        );
+
+      const isUnavailableChainId = unavailableChainIds.includes(
+        String(token.chainId)
+      );
+
+      return isTokenUnique && !isUnavailableChainId;
+    });
+
+    return filteredTokens ?? [];
+  }, [squid?.tokens]);
+
+  return { tokens, fuseSearchOptions };
+};

package/src/hooks/tokens/useTokensWithBalance.ts

@@ -0,0 +1,169 @@
+import { useCosmosContext } from "@/core/providers/CosmosProvider";
+import { keys } from "@/core/queries/queries-keys";
+import { TokenWithBalance } from "@/core/types/tokens";
+import { useCosmosForChain } from "@/hooks/cosmos/useCosmosForChain";
+import { useSquidStore } from "@/hooks/store/useSquidStore";
+import { useSquidTokens } from "@/hooks/tokens/useSquidTokens";
+import { fetchPriceForToken } from "@/services/external/coingeckoService";
+import {
+  getAllEvmTokensBalance,
+  getWorkingCosmosRpcUrl,
+} from "@/services/external/rpcService";
+import {
+  SECRET_CHAIN_ID,
+  fetchAllSecretBalances,
+} from "@/services/external/secretService";
+import type { ChainData, Token } from "@0xsquid/squid-types";
+import { ChainType } from "@0xsquid/squid-types";
+import { StargateClient } from "@cosmjs/stargate";
+import { useQuery } from "@tanstack/react-query";
+import { formatUnits } from "ethers/lib/utils";
+
+// TODO: Move this to a service
+const getAllCosmosBalances = async ({
+  rpc,
+  address,
+  tokens,
+}: {
+  rpc: string;
+  tokens: Token[];
+  address: string;
+}) => {
+  const client = await StargateClient.connect(rpc);
+  const balanceAsCoin = await client.getAllBalances(address);
+
+  // Need to map tokens and put balance, based on denom
+  const tokensWithBalance = tokens.map((t) => {
+    const balanceCoin = balanceAsCoin?.find((c) => c.denom === t.address);
+    return {
+      ...t,
+      balance: balanceCoin
+        ? formatUnits(balanceCoin?.amount, t?.decimals)
+        : "0",
+    } as TokenWithBalance;
+  });
+
+  return tokensWithBalance;
+};
+
+export const useAllTokensWithBalanceForChain = (
+  chainData?: ChainData,
+  address: string = ""
+) => {
+  const { config } = useSquidStore();
+
+  const { tokens: squidTokens } = useSquidTokens();
+  const { keplrTypeWallet, isConnected: isCosmosConnected } =
+    useCosmosContext();
+  const { cosmosAddress } = useCosmosForChain(chainData);
+
+  const tokens = (squidTokens.filter((t) => t.chainId === chainData?.chainId) ??
+    []) as Token[];
+
+  const evmBalances = useQuery<TokenWithBalance[]>(
+    keys({
+      apiUrl: config.apiUrl,
+      address,
+    }).tokensBalanceForChain(chainData?.chainType, chainData?.chainId),
+    async () => {
+      if (chainData && tokens) {
+        const tokensBalance = await getAllEvmTokensBalance(tokens, address);
+
+        // Get Token usd price only for tokens which have balance > 0
+        const tokenUSDPrices = await Promise.all(
+          tokensBalance?.map((t, _) => {
+            if (+t.balance !== 0) {
+              return fetchPriceForToken({
+                apiUrl: config.apiUrl,
+                chainId: t?.chainId.toString(),
+                tokenAddress: t?.address,
+                integratorId: config.integratorId,
+              });
+            }
+            return 0;
+          }) ?? []
+        );
+
+        return (
+          tokensBalance?.map((token, index) => {
+            return {
+              ...token,
+              balance: token.balance,
+              priceUSD: tokenUSDPrices[index].toString(),
+            };
+          }) ?? []
+        );
+      }
+      return tokens?.map((s) => ({ ...s, balance: "" })) ?? [];
+    },
+    {
+      enabled: chainData?.chainType === ChainType.EVM && !!tokens,
+    }
+  );
+
+  const cosmosBalances = useQuery<TokenWithBalance[]>(
+    keys({
+      apiUrl: config.apiUrl,
+      address,
+    }).tokensBalanceForChain(chainData?.chainType, chainData?.chainId),
+    async () => {
+      if (chainData) {
+        if (chainData.chainId === SECRET_CHAIN_ID && isCosmosConnected) {
+          const squidSecretTokens = squidTokens.filter(
+            (t) => t.chainId === SECRET_CHAIN_ID
+          ) as Token[];
+
+          const secretTokens = await fetchAllSecretBalances(
+            chainData!,
+            cosmosAddress!,
+            squidSecretTokens,
+            keplrTypeWallet
+          );
+
+          return secretTokens;
+        }
+
+        const rpc = await getWorkingCosmosRpcUrl(chainData);
+        const balances = await getAllCosmosBalances({
+          address,
+          rpc,
+          tokens,
+        });
+        // Get Token usd price only for tokens which have balance > 0
+        const tokenUSDPrices = await Promise.all(
+          balances?.map((t, _) => {
+            if (+t.balance !== 0) {
+              return fetchPriceForToken({
+                apiUrl: config.apiUrl,
+                chainId: t?.chainId.toString(),
+                tokenAddress: t?.address,
+              });
+            }
+            return 0;
+          }) ?? []
+        );
+
+        return (
+          balances?.map((token, index) => {
+            return {
+              ...token,
+              balance: token.balance,
+              priceUSD: tokenUSDPrices[index].toString(),
+            };
+          }) ?? []
+        );
+      }
+      return [];
+    },
+    {
+      retry: false,
+      enabled:
+        chainData?.chainType === ChainType.COSMOS &&
+        !!tokens &&
+        !!address &&
+        address.length > 0,
+    }
+  );
+
+  return { evmBalances, cosmosBalances, tokens };
+};