@0xsquid/react-hooks 1.0.0

package/src/hooks/cosmos/useCosmos.ts

@@ -0,0 +1,279 @@
+import { wallets } from "@/core/constants";
+import { Wallet } from "@/core/types/wallet";
+import { useSwapRoutePersistStore } from "@/hooks/store/useSquidStore";
+import { useSwap } from "@/hooks/swap/useSwap";
+import {
+  accessProperty,
+  getCosmosChainInfosObject,
+  getDescendantProp,
+} from "@/services/internal/walletService";
+import type { ChainData } from "@0xsquid/sdk/dist/types";
+import { ChainType } from "@0xsquid/sdk/dist/types";
+import { CosmosSnap, installSnap } from "@cosmsnap/snapper";
+import type { Keplr, OfflineDirectSigner } from "@keplr-wallet/types";
+import { useMutation } from "@tanstack/react-query";
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+declare const window: any;
+
+export const useCosmos = () => {
+  const [cosmosAddress, setCosmosAddress] = useState<string | undefined>();
+  const [cosmosSigner, setCosmosSigner] = useState<
+    OfflineDirectSigner | undefined
+  >(undefined);
+  const [cosmosConnectedWallet, setCosmosConnectedWallet] = useState<
+    Wallet | undefined
+  >();
+  const [cosmosChainId, setCosmosChainId] = useState<string | undefined>();
+  const [isConnected, setIsConnected] = useState(false);
+  const [isInstalled, setIsInstalled] = useState(false);
+  const { swapRoute } = useSwapRoutePersistStore();
+  const { fromChain } = useSwap();
+
+  const keplrTypeWallet: Keplr = useMemo(() => {
+    if (window && cosmosConnectedWallet?.windowFlag) {
+      return accessProperty(window, cosmosConnectedWallet.windowFlag) as Keplr;
+    }
+    // By default, return Cosmos wallet to be Keplr wallet
+    // Because like Metamask, some wallets will override the window.keplr Provider
+    // Meaning that this could be the current user wallet, so we can use it as a fallback
+    return window.keplr as Keplr;
+  }, [cosmosConnectedWallet]);
+
+  // As soon as from chain changes, need to fetch the new signer
+  useEffect(() => {
+    if (fromChain?.chainType === ChainType.COSMOS && keplrTypeWallet) {
+      setCosmosSigner(
+        keplrTypeWallet.getOfflineSigner(fromChain?.chainId.toString())
+      );
+    }
+  }, [fromChain?.chainId, fromChain?.chainType, keplrTypeWallet]);
+
+  const getCosmosAddressForChain = useCallback(
+    async (chainId?: string) => {
+      if (!chainId || !keplrTypeWallet) return undefined;
+      const key = await keplrTypeWallet?.getKey(chainId);
+      return key.bech32Address;
+    },
+    [keplrTypeWallet]
+  );
+
+  const getCosmosWalletInfos = useMutation(
+    async ({
+      chainId,
+      cosmosWalletObject,
+    }: {
+      chainId: string;
+      cosmosWalletObject?: Keplr;
+    }): Promise<string | undefined> => {
+      const walletObject = cosmosWalletObject ?? keplrTypeWallet;
+      if (walletObject) {
+        const address = await walletObject?.getKey(chainId);
+        if (address?.bech32Address) {
+          return address.bech32Address;
+        }
+      }
+      return undefined;
+    }
+  );
+
+  const getAddress = useCallback(
+    async ({
+      wallet,
+      cosmosWalletObject,
+      chainId,
+    }: {
+      wallet: Wallet;
+      cosmosWalletObject: any;
+      chainId: string;
+    }): Promise<string> => {
+      if (wallet.connectorId === "snapper") {
+        const { address: addressInfo } =
+          await cosmosWalletObject.getBech32Address(chainId);
+        return addressInfo.address;
+      }
+      const address = await getCosmosWalletInfos.mutateAsync({
+        chainId,
+        cosmosWalletObject,
+      });
+      return address ?? "";
+    },
+    [getCosmosWalletInfos]
+  );
+
+  const handleKeplrAccountChanged = useCallback(async () => {
+    if (cosmosChainId) {
+      const address = await getCosmosWalletInfos.mutateAsync({
+        chainId: cosmosChainId,
+      });
+      if (address) {
+        setIsConnected(true);
+        setCosmosAddress(address);
+      }
+    }
+  }, [cosmosChainId, getCosmosWalletInfos]);
+
+  useEffect(() => {
+    window.addEventListener("keplr_keystorechange", () =>
+      handleKeplrAccountChanged()
+    );
+
+    return () => {
+      window.removeEventListener("keplr_keystorechange", () =>
+        handleKeplrAccountChanged()
+      );
+    };
+  }, [handleKeplrAccountChanged]);
+
+  /**
+   * If needed, prepare the wallet object and return it
+   * Example: install Metamask snaps (Snapper)
+   * @param wallet
+   * @param cosmosWalletObject
+   * @returns
+   */
+  const prepareCosmosWallet = async (
+    wallet: Wallet,
+    cosmosWalletObject?: any
+  ): Promise<any> => {
+    let cwo = cosmosWalletObject;
+    switch (wallet.connectorId) {
+      case "snapper":
+        cwo = new CosmosSnap();
+        // await installSnap();
+        window[wallet?.windowFlag ?? ""] = cwo;
+        break;
+    }
+    return cwo;
+  };
+
+  const connectCosmos = useMutation(
+    async ({
+      chain,
+      wallet,
+      direction,
+    }: {
+      chain: ChainData;
+      wallet?: Wallet;
+      direction?: "from" | "to";
+    }) => {
+      const chainInfos = getCosmosChainInfosObject(chain);
+
+      const selectedWallet =
+        wallet ??
+        cosmosConnectedWallet ??
+        wallets?.find((w) => w.connectorId === "keplr");
+
+      let cosmosWalletObject = selectedWallet
+        ? getDescendantProp(window, selectedWallet.windowFlag)
+        : undefined;
+
+      // Some wallets need to be installed | initialized
+      if (selectedWallet) {
+        cosmosWalletObject = await prepareCosmosWallet(
+          selectedWallet,
+          cosmosWalletObject
+        );
+      }
+
+      if (cosmosWalletObject) {
+        setCosmosChainId(chainInfos.chainId.toString());
+        try {
+          if (selectedWallet?.connectorId === "snapper") {
+            await installSnap();
+          } else {
+            await cosmosWalletObject.enable(chainInfos.chainId.toString());
+          }
+
+          const address = await getAddress({
+            chainId: chain.chainId.toString(),
+            cosmosWalletObject,
+            wallet: selectedWallet as any,
+          });
+
+          if (address) {
+            setCosmosConnectedWallet(selectedWallet);
+            setIsConnected(true);
+            setCosmosAddress(address);
+
+            useSwapRoutePersistStore.setState({
+              swapRoute: {
+                ...useSwapRoutePersistStore.getState().swapRoute,
+                destinationAddress:
+                  direction === "to"
+                    ? address
+                    : useSwapRoutePersistStore.getState().swapRoute
+                        ?.destinationAddress,
+              },
+            });
+          }
+        } catch (error) {
+          const e = error as {
+            module?: string;
+            code?: number;
+            message?: string;
+          };
+          if (
+            e.message !== "Request rejected" &&
+            e.message !== "User rejected the request."
+          ) {
+            // Maybe the chain is not supported ?
+            if (cosmosWalletObject.experimentalSuggestChain) {
+              try {
+                await cosmosWalletObject.experimentalSuggestChain(chainInfos);
+                // Now try to connect
+                connectCosmos.mutate({ chain });
+              } catch (experimentalSuggestChainError) {
+                console.log(
+                  "Failed to suggest chain",
+                  experimentalSuggestChainError
+                );
+              }
+            }
+          }
+        }
+      } else {
+        setIsInstalled(false);
+      }
+    }
+  );
+
+  const clearData = () => {
+    setIsConnected(false);
+    setCosmosChainId(undefined);
+    setCosmosAddress(undefined);
+  };
+
+  const onCosmosChainChange = (newChainId: string) => {
+    if (newChainId !== cosmosChainId) {
+      clearData();
+    }
+
+    useSwapRoutePersistStore.setState({
+      swapRoute: { ...swapRoute },
+      destinationAddressHasBeenUpdated: {
+        updated: false,
+        filledFromWallet: false,
+      },
+    });
+  };
+
+  return {
+    connectCosmos,
+    cosmosChainId,
+    setCosmosChainId,
+    isConnected,
+    setIsConnected,
+    isInstalled,
+    setIsInstalled,
+    clearData,
+    onCosmosChainChange,
+    getAddress,
+    cosmosConnectedWallet,
+    keplrTypeWallet,
+    cosmosSigner,
+    getCosmosAddressForChain,
+    getCosmosWalletInfos,
+    cosmosAddress,
+  };
+};

package/src/hooks/cosmos/useCosmosForChain.ts

@@ -0,0 +1,33 @@
+import { useCosmosContext } from "@/core/providers/CosmosProvider";
+import type { ChainData } from "@0xsquid/squid-types";
+import { ChainType } from "@0xsquid/squid-types";
+import { useQuery } from "@tanstack/react-query";
+
+export const useCosmosForChain = (chainData?: ChainData) => {
+  const {
+    cosmosChainId: chainId,
+    cosmosAddress: userAddr,
+    isConnected,
+  } = useCosmosContext();
+  const { keplrTypeWallet } = useCosmosContext();
+
+  const cosmosAddress = useQuery(
+    ["cosmos-address", chainData?.chainId, userAddr, isConnected],
+    async () => {
+      if (!isConnected) return undefined;
+      const key = await keplrTypeWallet?.getKey(String(chainData?.chainId));
+      return key?.bech32Address;
+    },
+    {
+      enabled:
+        !!keplrTypeWallet &&
+        !!chainId &&
+        !!userAddr &&
+        chainData?.chainType === ChainType.COSMOS,
+    }
+  );
+
+  return {
+    cosmosAddress: cosmosAddress.data,
+  };
+};

package/src/hooks/index.ts

@@ -0,0 +1,32 @@
+export { useSquidChains } from "./chains/useSquidChains";
+export { useCosmos } from "./cosmos/useCosmos";
+export { useCosmosForChain } from "./cosmos/useCosmosForChain";
+export { useKeyboardNavigation } from "./navigation/useKeyboardNavigation";
+export { useSquidStore } from "./store/useSquidStore";
+
+export { useSwap } from "./swap/useSwap";
+export { useAllTokensWithBalance } from "./tokens/useAllTokensWithBalance";
+export {
+  useCosmosBalance,
+  useEvmBalance,
+  useNativeTokenBalanceDestinationChain,
+  useNativeTokenBalanceFromChain,
+} from "./tokens/useBalance";
+export { useMultiChainBalance } from "./tokens/useMultiChainBalance";
+export { usePrices } from "./tokens/usePrices";
+export { useSingleTokenPrice } from "./tokens/useSingleTokenPrice";
+export { useSquidTokens } from "./tokens/useSquidTokens";
+export { useAllTokensWithBalanceForChain } from "./tokens/useTokensWithBalance";
+export { useEstimate } from "./transaction/useEstimate";
+export { useEstimatePriceImpact } from "./transaction/useEstimatePriceImpact";
+export { useExecuteTransaction } from "./transaction/useExecuteTransaction";
+export { useGetRoute } from "./transaction/useGetRoute";
+export { useSingleTransaction } from "./transaction/useSingleTransaction";
+export { useTransaction } from "./transaction/useTransaction";
+export { useUserParams } from "./user/useUserParams";
+export { useAutoConnect } from "./wallet/useAutoConnect";
+export { useGnosisContext } from "./wallet/useGnosisContext";
+export { useIntegratorContext } from "./wallet/useIntegratorContext";
+export { useMultiChainWallet } from "./wallet/useMultiChainWallet";
+export { useWallet } from "./wallet/useWallet";
+export { useSquidRouter } from "./webapp-router/useSquidRouter";

package/src/hooks/navigation/useKeyboardNavigation.ts

@@ -0,0 +1,88 @@
+import { useSquidRouter } from "@/hooks/webapp-router/useSquidRouter";
+import type { RefObject } from "react";
+import { useCallback, useEffect } from "react";
+
+type Props = {
+  itemsListRef: RefObject<HTMLElement>;
+  activeListItemClassName: string;
+};
+
+export const useKeyboardNavigation = (props?: Props) => {
+  const { itemsListRef, activeListItemClassName = "" } = props ?? {};
+  const { previousRoute } = useSquidRouter();
+
+  const onKeyDown = useCallback(
+    (event: any) => {
+      if (event.key === "Escape") {
+        previousRoute();
+        return;
+      }
+
+      if (activeListItemClassName.trim() === "") return;
+
+      const itemsList = itemsListRef?.current;
+      const separatedActiveItemClassNames = activeListItemClassName.split(" ");
+      const defaultActiveItem = itemsList?.querySelector(
+        `.${separatedActiveItemClassNames.join(".")}`
+      );
+
+      if (event.key === "ArrowUp") {
+        if (!itemsList) return;
+        event.preventDefault();
+
+        const activeItem = defaultActiveItem ?? itemsList.lastElementChild;
+        if (!activeItem) return;
+
+        const previousItem = activeItem.previousElementSibling;
+        if (previousItem) {
+          activeItem.classList.remove(...separatedActiveItemClassNames);
+          previousItem.classList.add(...separatedActiveItemClassNames);
+
+          // scroll to previous item
+          itemsList.scrollTo({
+            top:
+              ((previousItem as HTMLLIElement).offsetTop ?? 0) -
+              itemsList.clientHeight,
+            behavior: "smooth",
+          });
+        }
+      } else if (event.key === "ArrowDown") {
+        if (!itemsList) return;
+        event.preventDefault();
+
+        const activeItem = defaultActiveItem ?? itemsList.firstElementChild;
+        if (!activeItem) return;
+
+        const nextItem = activeItem.nextElementSibling;
+        if (nextItem) {
+          activeItem.classList.remove(...separatedActiveItemClassNames);
+          nextItem.classList.add(...separatedActiveItemClassNames);
+
+          // scroll to next item
+          itemsList.scrollTo({
+            top:
+              ((nextItem as HTMLLIElement).offsetTop ?? 0) -
+              itemsList.clientHeight,
+            behavior: "smooth",
+          });
+        }
+      } else if (event.key === "Enter") {
+        event.preventDefault();
+
+        if (defaultActiveItem) {
+          // select active item
+          defaultActiveItem.querySelector("button")?.click();
+        }
+      }
+    },
+    [previousRoute, itemsListRef, activeListItemClassName]
+  );
+
+  useEffect(() => {
+    document.addEventListener("keydown", onKeyDown, false);
+
+    return () => {
+      document.removeEventListener("keydown", onKeyDown, false);
+    };
+  }, [onKeyDown]);
+};

package/src/hooks/store/useSquidStore.ts

@@ -0,0 +1,80 @@
+import { defaultValues } from "@/core/constants";
+import { AppConfig } from "@/core/types/config";
+import { WidgetRoute } from "@/core/types/route";
+import { SwapRoute } from "@/core/types/swap";
+import {
+  TransactionHistoryStore,
+  TransactionParams,
+} from "@/core/types/transaction";
+import type { Squid } from "@0xsquid/sdk";
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+export interface SquidConfigState {
+  squid?: Squid;
+  fromPrice?: string;
+  toPrice?: number;
+  currentTransaction?: TransactionParams;
+  currentRequestId?: string;
+  config: AppConfig;
+}
+
+export const useSquidStore = create<SquidConfigState>((_) => defaultValues);
+
+export interface SquidRouter {
+  history: {
+    route: WidgetRoute;
+    params?: { [key: string]: any | undefined };
+  }[];
+}
+
+export const useSquidRouterStore = create<SquidRouter>((_) => ({
+  history: [
+    {
+      route: {
+        id: "swap",
+        path: "/",
+        title: "Swap",
+        headerButtons: ["settings", "history"],
+      },
+    },
+  ],
+}));
+
+/**
+ * Persist the store in local storage
+ * So the user can refresh the page and still see his old transactions
+ */
+export const usePersistStore = create(
+  persist<{
+    transactionsHistory?: TransactionHistoryStore[];
+  }>(
+    (_) => {
+      return {
+        transactionsHistory: [],
+      };
+    },
+    {
+      name: "squid.history.store",
+    }
+  )
+);
+
+export const useSwapRoutePersistStore = create(
+  persist<{
+    swapRoute?: SwapRoute;
+    destinationAddressHasBeenUpdated?: {
+      updated: boolean;
+      filledFromWallet: boolean;
+    };
+  }>(
+    (_) => {
+      return {
+        swapRoute: undefined,
+      };
+    },
+    {
+      name: "squid.swaproute.store",
+    }
+  )
+);