@0xsquid/react-hooks 1.0.3 → 1.0.5

package/src/hooks/cosmos/useCosmos.ts

@@ -1,279 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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/navigation/useKeyboardNavigation.ts

@@ -1,88 +0,0 @@
-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

@@ -1,80 +0,0 @@
-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",
-    }
-  )
-);