@0xsquid/react-hooks 1.0.0

package/src/services/external/analyticsService.ts

@@ -0,0 +1,46 @@
+interface EventData {
+  event: string;
+}
+
+declare global {
+  interface Window {
+    dataLayer: Array<EventData> | undefined;
+  }
+}
+
+export class AnalyticsService {
+  private static pushEvent(eventData: EventData): void {
+    if (window) {
+      const dataLayer = window.dataLayer || [];
+      const domain = window.location.hostname;
+
+      if (dataLayer && domain.includes("squidrouter.com")) {
+        dataLayer.push(eventData);
+      }
+    }
+  }
+
+  public static submitButtonPushed(): void {
+    this.pushEvent({ event: "submitswap_cta_clicked" });
+  }
+
+  public static givePermissionToUseTokenButton(): void {
+    this.pushEvent({ event: "permissiontoken_cta_clicked" });
+  }
+
+  public static settingClicked(): void {
+    this.pushEvent({ event: "settings_clicked" });
+  }
+
+  public static historyClicked(): void {
+    this.pushEvent({ event: "history_clicked" });
+  }
+
+  public static expressClicked(): void {
+    this.pushEvent({ event: "expressTx_clicked" });
+  }
+
+  public static regularClicked(): void {
+    this.pushEvent({ event: "regularTx_clicked" });
+  }
+}

package/src/services/external/coingeckoService.ts

@@ -0,0 +1,35 @@
+import { backendVersion } from "@/core/constants";
+import { getQueryHeaders } from "@/services/internal/apiService";
+import type { Token } from "@0xsquid/sdk/dist/types";
+import axios from "axios";
+
+interface CoingeckoPriceQuery {
+  apiUrl?: string;
+  chainId?: string;
+  tokenAddress?: string;
+  integratorId?: string;
+}
+
+export const fetchPriceForToken = async ({
+  apiUrl,
+  chainId,
+  tokenAddress,
+  integratorId,
+}: CoingeckoPriceQuery): Promise<number> => {
+  if (chainId && tokenAddress) {
+    const params = {
+      chainId,
+      tokenAddress,
+    };
+    const url = `${apiUrl}/${backendVersion}/token-price`;
+
+    const response = await axios.get(url, {
+      params,
+      headers: getQueryHeaders(integratorId),
+    });
+
+    const result = (await response.data) as { token: Token };
+    return result.token.usdPrice ?? 0;
+  }
+  return 0;
+};

package/src/services/external/rpcService.ts

@@ -0,0 +1,196 @@
+import { ERC20__factory } from "@/contracts/typechain/factories/ERC20__factory";
+import { nativeEvmTokenAddress } from "@/core/constants";
+import { multicallAbi, multicallAddress } from "@/core/multicall3";
+import type { TokenWithBalance } from "@/core/types/tokens";
+import type { ChainData, CosmosChain, Token } from "@0xsquid/sdk/dist/types";
+import { StargateClient } from "@cosmjs/stargate";
+import { fetchBalance } from "@wagmi/core";
+import type { BigNumber } from "ethers";
+import { constants, utils } from "ethers";
+import { readContracts } from "wagmi";
+
+type ContractAddress = `0x${string}`;
+
+/**
+ * Use readContracts to fetch all tokens balance in one call
+ * native tokens & erc20 tokens will have different abi & contract & function name
+ * Because it's not possible to fetch native token balance with balanceOf
+ * @param tokens
+ * @param userAddress
+ * @returns
+ */
+const getTokensSupportingMultiCall = async (
+  tokens: Token[],
+  userAddress?: ContractAddress
+): Promise<TokenWithBalance[]> => {
+  const multicallBalances = (await readContracts({
+    contracts: tokens.map((t) => {
+      const isTokenNative = t.address.toLowerCase() === nativeEvmTokenAddress;
+      return {
+        chainId: +t.chainId,
+        abi: isTokenNative ? multicallAbi : ERC20__factory.abi,
+        address: isTokenNative
+          ? (multicallAddress as ContractAddress)
+          : (t.address as ContractAddress),
+        functionName: isTokenNative ? "getEthBalance" : "balanceOf",
+        args: [userAddress],
+      };
+    }),
+    allowFailure: true,
+  })) as BigNumber[];
+
+  return tokens.map((t, i) => ({
+    ...t,
+    balance: utils.formatUnits(
+      multicallBalances[i] ?? constants.Zero,
+      t.decimals
+    ),
+  }));
+};
+
+type FetchBalanceResult = {
+  decimals: number;
+  formatted: string;
+  symbol: string;
+  value: BigNumber;
+};
+
+/**
+ * Some chains don't support multicall, so we need to fetch them with Promise.all & fetchBalance
+ * @param tokens
+ * @param userAddress
+ * @returns
+ */
+
+const getTokensWithoutMultiCall = async (
+  tokens: Token[],
+  userAddress: ContractAddress
+): Promise<TokenWithBalance[]> => {
+  const balances = (await Promise.all(
+    tokens.map(async (t) => {
+      let balance: FetchBalanceResult | undefined;
+      try {
+        if (t.address.toLowerCase() === nativeEvmTokenAddress) {
+          balance = await fetchBalance({
+            address: userAddress,
+            chainId: +t.chainId,
+          });
+        } else {
+          balance = await fetchBalance({
+            address: userAddress,
+            chainId: +t.chainId,
+            token: t.address as ContractAddress,
+          });
+        }
+
+        return balance;
+      } catch (error) {
+        return {
+          decimals: t.decimals,
+          formatted: "0",
+          symbol: t.symbol,
+          value: constants.Zero,
+        };
+      }
+    })
+  )) as FetchBalanceResult[];
+
+  return tokens.map((t, i) => ({
+    ...t,
+    balance: utils.formatUnits(balances[i].value, t.decimals),
+  }));
+};
+
+export const getAllEvmTokensBalance = async (
+  evmTokens: Token[],
+  userAddress: string
+): Promise<TokenWithBalance[]> => {
+  // Some tokens don't support multicall, so we need to fetch them with Promise.all
+  // TODO: Once we support multicall on all chains, we can remove this split
+  const chainWithoutMulticall = [314, 3141]; // Filecoin, & Filecoin testnet
+  const splittedTokensByMultiCallSupport = evmTokens.reduce(
+    (acc, token) => {
+      if (chainWithoutMulticall.includes(+token.chainId)) {
+        acc[0].push(token);
+      } else {
+        acc[1].push(token);
+      }
+      return acc;
+    },
+    [[], []] as Token[][]
+  );
+
+  const tokensNotSupportingMulticall = splittedTokensByMultiCallSupport[0];
+  const tokensSupportingMulticall = splittedTokensByMultiCallSupport[1];
+
+  const tokensMulticall = await getTokensSupportingMultiCall(
+    tokensSupportingMulticall,
+    userAddress as ContractAddress
+  );
+
+  const tokensNotMultiCall = await getTokensWithoutMultiCall(
+    tokensNotSupportingMulticall,
+    userAddress as ContractAddress
+  );
+
+  return [...tokensMulticall, ...tokensNotMultiCall];
+};
+
+/**
+ * We'll get the current block of a given RPC to see if we can query it
+ * Without getting CORS error or any other error
+ * @param rpc
+ * @returns
+ */
+const testCosmosRpc = async (rpc: string): Promise<boolean> => {
+  let rpcIsValid = false;
+  try {
+    const client = await StargateClient.connect(rpc);
+    const block = await client.getBlock();
+    rpcIsValid = !!block.id;
+  } catch (error) {
+    rpcIsValid = false;
+  }
+  return rpcIsValid;
+};
+
+export const getWorkingCosmosRpcUrl = async (
+  chainData: ChainData
+): Promise<string> => {
+  const rpcList =
+    (chainData as CosmosChain & { rpcList: string[] }).rpcList ?? chainData.rpc
+      ? [chainData.rpc]
+      : [];
+
+  // if rpcList is empty, use the default rpc
+  if (rpcList.length === 0) {
+    try {
+      const isValid = await testCosmosRpc(chainData.rpc);
+      if (isValid) {
+        return chainData.rpc;
+      }
+    } catch (error) {
+      console.log(
+        `Error fetching rpc url: ${chainData.rpc} - Error: ${(error as any)?.toString()}`
+      );
+    }
+  }
+
+  // if rpcList is not empty, try to fetch each rpc until we find a valid one
+  for (const rpc of rpcList) {
+    try {
+      // eslint-disable-next-line no-await-in-loop
+      const isValid = await testCosmosRpc(rpc);
+      if (isValid) {
+        return rpc;
+      }
+    } catch (error) {
+      console.log(
+        `Error fetching rpc url: ${chainData.rpc} - Error: ${(error as any)?.toString()}`
+      );
+    }
+  }
+
+  // In the case that all rpcs are invalid, return the default rpc anyway
+  return chainData.rpc;
+};

package/src/services/external/secretService.ts

@@ -0,0 +1,178 @@
+import type { TokenWithBalance } from "@/core/types/tokens";
+import type { TypedWindow } from "@/core/types/wallet";
+import type { ChainData, CosmosChain, Token } from "@0xsquid/squid-types";
+import { StargateClient } from "@cosmjs/stargate";
+import type { Keplr } from "@keplr-wallet/types";
+import { formatUnits } from "ethers/lib/utils.js";
+import { SecretNetworkClient } from "secretjs";
+
+/**
+ * Fetch secret network token balance
+ * Using the permit signature, see permit function for more details
+ * @param secretJS
+ * @param contract
+ * @param chainId
+ * @param walletAddress
+ * @param permit
+ * @returns
+ */
+export const getTokenBalance = async (
+  secretJS: SecretNetworkClient,
+  contract: { address: string; codeHash: string },
+  permit: any
+) => {
+  if (permit) {
+    const msg = {
+      balance: {},
+    };
+
+    const result = await secretJS.query.compute.queryContract({
+      contract_address: contract.address,
+      code_hash: contract.codeHash,
+      query: {
+        with_permit: {
+          query: msg,
+          permit,
+        },
+      },
+    });
+    return result;
+  }
+  return -1;
+};
+
+export const getPermit = async (
+  chainId: string,
+  contracts: any[],
+  address: string
+) => {
+  const contractsString = contracts.join("_");
+  const permKey = `perm_${chainId}_${contractsString}_${address}`;
+  let permit: any;
+
+  const permitStored = window.localStorage.getItem(permKey);
+  if (permitStored) permit = JSON.parse(permitStored);
+
+  // Not able to fetch permit signature from local storage,
+  // Ask user to sign message
+  if (!permit) {
+    try {
+      const result = await (window as TypedWindow).keplr.signAmino(
+        chainId,
+        address,
+        {
+          chain_id: chainId,
+          account_number: "0",
+          sequence: "0",
+          fee: {
+            amount: [{ denom: "uscrt", amount: "0" }],
+            gas: "1",
+          },
+          msgs: [
+            {
+              type: "query_permit",
+              value: {
+                permit_name: "secret-bridge-balance",
+                allowed_tokens: contracts,
+                permissions: ["balance"],
+              },
+            },
+          ],
+          memo: "",
+        },
+        {
+          preferNoSetFee: true,
+          preferNoSetMemo: true,
+        }
+      );
+      permit = {
+        params: {
+          permit_name: "secret-bridge-balance",
+          allowed_tokens: contracts,
+          chain_id: chainId,
+          permissions: ["balance"],
+        },
+        signature: result.signature,
+      };
+      window.localStorage.setItem(permKey, JSON.stringify(permit));
+    } catch (err) {
+      console.log("--- PERMIT ERROR ---");
+      console.log(err);
+    }
+  }
+  return permit;
+};
+
+/**
+ * Fetches the secret balance of the user
+ * This has a different logic than the other balances because Secret network hides the balance of the user by design
+ * So we need to fetch the balance in a different way
+ */
+export const SECRET_CHAIN_ID = "secret-4";
+
+export const fetchAllSecretBalances = async (
+  chainData: ChainData,
+  userAddress: string,
+  secretTokens: (Token & { codeHash?: string })[],
+  keplr?: Keplr
+): Promise<TokenWithBalance[]> => {
+  if (!keplr) return [];
+  // Enables app to utilize keplr's secret utilities
+  await keplr.enable(SECRET_CHAIN_ID);
+  // Create a client that handles the query encryption
+  const client = new SecretNetworkClient({
+    url: (chainData as CosmosChain).rest,
+    chainId: SECRET_CHAIN_ID,
+    wallet: keplr.getOfflineSignerOnlyAmino(SECRET_CHAIN_ID),
+    encryptionUtils: keplr.getEnigmaUtils(SECRET_CHAIN_ID),
+    walletAddress: userAddress,
+  });
+
+  // Get secret tokens
+
+  const permit = await getPermit(
+    SECRET_CHAIN_ID,
+    secretTokens.map((st) => st.address),
+    userAddress
+  );
+
+  // Fetching all balances in parallel
+  const privateTokens = await Promise.all(
+    secretTokens
+      .filter((t) => !!t.codeHash)
+      .map(async (token) => {
+        const result = (await getTokenBalance(
+          client,
+          {
+            address: token.address,
+            codeHash: token.codeHash ?? "",
+          },
+          permit
+        )) as { balance: { amount: string } };
+
+        return {
+          ...token,
+          balance: formatUnits(result.balance.amount, token?.decimals),
+        } as TokenWithBalance;
+      })
+  );
+
+  // Use Stargate getBalance for SCRT
+  const stargateClient = await StargateClient.connect(chainData.rpc);
+  const nativeSecretToken = secretTokens.find((t) => t.address === "uscrt");
+
+  const publicTokenBalance = await stargateClient.getBalance(
+    userAddress,
+    "uscrt"
+  );
+
+  const publicTokenWithBalance = {
+    ...nativeSecretToken,
+    balance: formatUnits(
+      publicTokenBalance.amount,
+      nativeSecretToken?.decimals
+    ),
+  } as TokenWithBalance;
+
+  return [...privateTokens, publicTokenWithBalance];
+};

package/src/services/index.ts

@@ -0,0 +1 @@
+export * from "./internal/walletService";

package/src/services/internal/apiService.ts

@@ -0,0 +1,6 @@
+export const getQueryHeaders = (integratorId?: string, requestId?: string) => {
+  return {
+    ...(integratorId ? { "X-Integrator-Id": integratorId } : {}),
+    ...(requestId ? { "X-Request-Id": requestId } : {}),
+  };
+};

package/src/services/internal/assetsService.ts

@@ -0,0 +1,84 @@
+import type { AppConfig } from "@/core/types/config";
+import type { ChainData, Token } from "@0xsquid/squid-types";
+
+export const shareSubgraphId = (token1: Token, token2: Token) => {
+  return Boolean(
+    token1?.subGraphIds?.some((sgi) => !!token2?.subGraphIds?.includes(sgi)) ||
+      token2?.subGraphIds?.some((sgi) => !!token1?.subGraphIds?.includes(sgi))
+  );
+};
+
+/**
+ * Check if `tokenToCheck` shares any subgraph id with the tokens being compared
+ * If any of the tokens being compared shares a subgraph id with `tokenToCheck`, it will be sorted first
+ * @param a first token being compared
+ * @param b second token being compared
+ * @param tokenToCheck the token to check subgraph ids against
+ */
+export function sortTokensBySharedSubgraphIds({
+  a,
+  b,
+  tokenToCheck,
+}: {
+  a: Token;
+  b: Token;
+  tokenToCheck: Token;
+}): -1 | 0 | 1 {
+  const tokenToCheckSharesIdsWithA = shareSubgraphId(a, tokenToCheck);
+
+  const tokenToCheckSharesIdsWithB = shareSubgraphId(b, tokenToCheck);
+
+  if (tokenToCheckSharesIdsWithA && !tokenToCheckSharesIdsWithB) {
+    return -1;
+  }
+
+  if (!tokenToCheckSharesIdsWithA && tokenToCheckSharesIdsWithB) {
+    return 1;
+  }
+
+  return 0;
+}
+
+/**
+ * Filter chains based on provided config
+ *
+ * Filter order:
+ * 1. Chains that are not disabled or coming soon
+ * 2. Disabled chains
+ * 3. Coming soon chains
+ */
+export function filterChains({
+  chains,
+  config,
+  direction,
+}: {
+  chains: ChainData[];
+  config: Pick<AppConfig, "disabledChains" | "comingSoonChainIds">;
+  direction: "from" | "to";
+}): ChainData[] {
+  // filter coming soon chains
+  const comingSoonChains = chains.filter((c) =>
+    config.comingSoonChainIds?.includes(c.chainId)
+  );
+
+  // map direction to be a key of config.disabledChains object
+  const parsedDirection = direction === "from" ? "source" : "destination";
+  // get disabled chains for the direction provided
+  const disabledChainsOnDirection = config.disabledChains?.[parsedDirection];
+
+  // filter disabled chains
+  const disabledChains = chains.filter(
+    (c) =>
+      disabledChainsOnDirection?.includes(c.chainId) &&
+      !config.comingSoonChainIds?.includes(c.chainId)
+  );
+
+  // filter chains that are not disabled or coming soon
+  const filteredChains = chains.filter(
+    (c) =>
+      !config.comingSoonChainIds?.includes(c.chainId) &&
+      !disabledChainsOnDirection?.includes(c.chainId)
+  );
+
+  return [...filteredChains, ...disabledChains, ...comingSoonChains];
+}