split hooks

Author: arch1995

demo/wagmi-react-app/package-lock.json

@@ -1,9 +1,8 @@
-import { Web3AuthProvider as Web3AuthProviderNoModal } from "@web3auth/no-modal/react";
 import { createElement, PropsWithChildren } from "react";
 
 import { Web3AuthInnerProvider } from "./context/Web3AuthInnerContext";
 import { Web3AuthProviderProps } from "./interfaces";
 
 export function Web3AuthProvider({ config, children }: PropsWithChildren<Web3AuthProviderProps>) {
-  return createElement(Web3AuthInnerProvider, { config }, createElement(Web3AuthProviderNoModal, { config }, children));
+  return createElement(Web3AuthInnerProvider, { config }, children);
 }

packages/modal/src/react/Web3AuthProvider.ts

@@ -1,15 +1,13 @@
-export { useWeb3Auth } from "./useWeb3Auth";
-export { useWeb3AuthConnect } from "./useWeb3AuthConnect";
-export {
-  useCheckout,
-  useEnableMFA,
-  useManageMFA,
-  useSwap,
-  useSwitchChain,
-  useUserToken,
-  useWalletConnectScanner,
-  useWalletServicesPlugin,
-  useWalletUI,
-  useWeb3AuthAccount,
-  useWeb3AuthDisconnect,
-} from "@web3auth/no-modal/react";
+export * from "./useCheckout";
+export * from "./useEnableMFA";
+export * from "./useManageMFA";
+export * from "./useSwap";
+export * from "./useSwitchChain";
+export * from "./useUserToken";
+export * from "./useWalletConnectScanner";
+export * from "./useWalletServicesPlugin";
+export * from "./useWalletUI";
+export * from "./useWeb3Auth";
+export * from "./useWeb3AuthAccount";
+export * from "./useWeb3AuthConnect";
+export * from "./useWeb3AuthDisconnect";

packages/modal/src/react/hooks/index.ts

@@ -0,0 +1,37 @@
+import { BaseEmbedControllerState } from "@toruslabs/base-controllers";
+import { WalletServicesPluginError, Web3AuthError } from "@web3auth/no-modal";
+import { useCallback, useState } from "react";
+
+import { useWalletServicesPlugin } from "./useWalletServicesPlugin";
+
+export interface IUseCheckout {
+  loading: boolean;
+  error: Web3AuthError | null;
+  showCheckout: (showCheckoutParams?: BaseEmbedControllerState["showCheckout"]) => Promise<void>;
+}
+
+export const useCheckout = (): IUseCheckout => {
+  const { plugin, isConnected } = useWalletServicesPlugin();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Web3AuthError | null>(null);
+
+  const showCheckout = useCallback(
+    async (showCheckoutParams?: BaseEmbedControllerState["showCheckout"]) => {
+      if (!plugin) throw WalletServicesPluginError.notInitialized();
+      if (!isConnected) throw WalletServicesPluginError.walletPluginNotConnected();
+
+      setLoading(true);
+      setError(null);
+      try {
+        await plugin.showCheckout(showCheckoutParams);
+      } catch (error) {
+        setError(error as Web3AuthError);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [plugin, isConnected]
+  );
+
+  return { loading, error, showCheckout };
+};

packages/modal/src/react/hooks/useCheckout.ts

@@ -0,0 +1,34 @@
+import { Web3AuthError } from "@web3auth/no-modal";
+import { useCallback, useState } from "react";
+
+import { useWeb3AuthInner } from "./useWeb3AuthInner";
+
+export interface IUseEnableMFA {
+  loading: boolean;
+  error: Web3AuthError | null;
+  enableMFA<T>(params?: T): Promise<void>;
+}
+
+export const useEnableMFA = (): IUseEnableMFA => {
+  const { web3Auth } = useWeb3AuthInner();
+
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Web3AuthError | null>(null);
+
+  const enableMFA = useCallback(
+    async <T>(params: T) => {
+      setLoading(true);
+      setError(null);
+      try {
+        await web3Auth.enableMFA(params);
+      } catch (error) {
+        setError(error as Web3AuthError);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [web3Auth]
+  );
+
+  return { loading, error, enableMFA };
+};

packages/modal/src/react/hooks/useEnableMFA.ts

@@ -0,0 +1,34 @@
+import { Web3AuthError } from "@web3auth/no-modal";
+import { useCallback, useState } from "react";
+
+import { useWeb3AuthInner } from "./useWeb3AuthInner";
+
+export interface IUseManageMFA {
+  loading: boolean;
+  error: Web3AuthError | null;
+  manageMFA<T>(params?: T): Promise<void>;
+}
+
+export const useManageMFA = (): IUseManageMFA => {
+  const { web3Auth } = useWeb3AuthInner();
+
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Web3AuthError | null>(null);
+
+  const manageMFA = useCallback(
+    async <T>(params: T) => {
+      setLoading(true);
+      setError(null);
+      try {
+        await web3Auth.manageMFA(params);
+      } catch (error) {
+        setError(error as Web3AuthError);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [web3Auth]
+  );
+
+  return { loading, error, manageMFA };
+};

packages/modal/src/react/hooks/useManageMFA.ts

@@ -0,0 +1,37 @@
+import { BaseEmbedControllerState } from "@toruslabs/base-controllers";
+import { WalletServicesPluginError, Web3AuthError } from "@web3auth/no-modal";
+import { useCallback, useState } from "react";
+
+import { useWalletServicesPlugin } from "./useWalletServicesPlugin";
+
+export interface IUseSwap {
+  loading: boolean;
+  error: Web3AuthError | null;
+  showSwap: (showSwapParams?: BaseEmbedControllerState["showSwap"]) => Promise<void>;
+}
+
+export const useSwap = (): IUseSwap => {
+  const { plugin, isConnected } = useWalletServicesPlugin();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Web3AuthError | null>(null);
+
+  const showSwap = useCallback(
+    async (showSwapParams?: BaseEmbedControllerState["showSwap"]) => {
+      if (!plugin) throw WalletServicesPluginError.notInitialized();
+      if (!isConnected) throw WalletServicesPluginError.walletPluginNotConnected();
+
+      setLoading(true);
+      setError(null);
+      try {
+        await plugin.showSwap(showSwapParams);
+      } catch (error) {
+        setError(error as Web3AuthError);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [plugin, isConnected]
+  );
+
+  return { loading, error, showSwap };
+};

packages/modal/src/react/hooks/useSwap.ts

@@ -0,0 +1,34 @@
+import { Web3AuthError } from "@web3auth/no-modal";
+import { useCallback, useState } from "react";
+
+import { useWeb3AuthInner } from "../hooks/useWeb3AuthInner";
+
+export interface IUseSwitchChain {
+  switchingChain: boolean;
+  switchingChainError: Web3AuthError | null;
+  switchChain: (chainId: string) => Promise<void>;
+}
+
+export const useSwitchChain = (): IUseSwitchChain => {
+  const { web3Auth } = useWeb3AuthInner();
+
+  const [switchingChain, setSwitchingChain] = useState(false);
+  const [switchingChainError, setSwitchingChainError] = useState<Web3AuthError | null>(null);
+
+  const switchChain = useCallback(
+    async (chainId: string) => {
+      setSwitchingChain(true);
+      setSwitchingChainError(null);
+      try {
+        await web3Auth.switchChain({ chainId });
+      } catch (error) {
+        setSwitchingChainError(error as Web3AuthError);
+      } finally {
+        setSwitchingChain(false);
+      }
+    },
+    [web3Auth]
+  );
+
+  return { switchingChain, switchingChainError, switchChain };
+};

packages/modal/src/react/hooks/useSwitchChain.ts

@@ -0,0 +1,37 @@
+import { Web3AuthError } from "@web3auth/no-modal";
+import { useCallback, useState } from "react";
+
+import { useWeb3AuthInner } from "./useWeb3AuthInner";
+
+export interface IUseUserToken {
+  loading: boolean;
+  error: Web3AuthError | null;
+  token: string | null;
+  authenticateUser: () => Promise<string | null>;
+}
+
+export const useUserToken = () => {
+  const { web3Auth } = useWeb3AuthInner();
+
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Web3AuthError | null>(null);
+  const [token, setToken] = useState<string | null>(null);
+
+  const authenticateUser = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const userAuthInfo = await web3Auth.authenticateUser();
+      if (userAuthInfo?.idToken) {
+        setToken(userAuthInfo.idToken);
+      }
+      return userAuthInfo?.idToken;
+    } catch (error) {
+      setError(error as Web3AuthError);
+    } finally {
+      setLoading(false);
+    }
+  }, [web3Auth]);
+
+  return { loading, error, token, authenticateUser };
+};

packages/modal/src/react/hooks/useUserToken.ts

@@ -0,0 +1,37 @@
+import { BaseEmbedControllerState } from "@toruslabs/base-controllers";
+import { WalletServicesPluginError, Web3AuthError } from "@web3auth/no-modal";
+import { useCallback, useState } from "react";
+
+import { useWalletServicesPlugin } from "./useWalletServicesPlugin";
+
+export interface IUseWalletConnectScanner {
+  loading: boolean;
+  error: Web3AuthError | null;
+  showWalletConnectScanner: (showWalletConnectScannerParams?: BaseEmbedControllerState["showWalletConnect"]) => Promise<void>;
+}
+
+export const useWalletConnectScanner = (): IUseWalletConnectScanner => {
+  const { plugin, isConnected } = useWalletServicesPlugin();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Web3AuthError | null>(null);
+
+  const showWalletConnectScanner = useCallback(
+    async (showWalletConnectScannerParams?: BaseEmbedControllerState["showWalletConnect"]) => {
+      if (!plugin) throw WalletServicesPluginError.notInitialized();
+      if (!isConnected) throw WalletServicesPluginError.walletPluginNotConnected();
+
+      setLoading(true);
+      setError(null);
+      try {
+        await plugin.showWalletConnectScanner(showWalletConnectScannerParams);
+      } catch (error) {
+        setError(error as Web3AuthError);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [plugin, isConnected]
+  );
+
+  return { loading, error, showWalletConnectScanner };
+};