chore: added JSDocs to hooks, improved context check

Author: ignaciosantise

packages/appkit/src/AppKitContext.tsx

@@ -1,7 +1,7 @@
 import React, { createContext, useContext, useMemo, type ReactNode } from 'react';
 import { AppKit } from './AppKit';
 
-interface AppKitContextType {
+export interface AppKitContextType {
   appKit: AppKit | null;
 }
 

packages/appkit/src/hooks/useAccount.ts

@@ -6,8 +6,8 @@ import {
 } from '@reown/appkit-core-react-native';
 import { useMemo } from 'react';
 import { useSnapshot } from 'valtio';
-import { useAppKit } from './useAppKit';
 import type { AccountType, AppKitNetwork } from '@reown/appkit-common-react-native';
+import { useAppKitContext } from './useAppKitContext';
 
 /**
  * Represents a blockchain account with its associated metadata
@@ -64,7 +64,7 @@ export interface Account {
  * @throws Will log errors via LogController if account parsing fails
  */
 export function useAccount() {
-  useAppKit(); // Use the hook for checks
+  useAppKitContext();
 
   const {
     activeAddress: address,

packages/appkit/src/hooks/useAppKit.ts

@@ -1,27 +1,60 @@
-import { useContext, useMemo } from 'react';
+import { useMemo } from 'react';
 import type { ChainNamespace } from '@reown/appkit-common-react-native';
 
 import type { AppKit } from '../AppKit';
-import { AppKitContext } from '../AppKitContext';
+import { useAppKitContext } from './useAppKitContext';
 
+/**
+ * Interface representing the return value of the useAppKit hook
+ */
 interface UseAppKitReturn {
+  /** Function to open the AppKit modal with optional view configuration */
   open: AppKit['open'];
+  /** Function to close the AppKit modal */
   close: AppKit['close'];
+  /** Function to disconnect the wallet, optionally scoped to a specific namespace */
   disconnect: (namespace?: ChainNamespace) => void;
+  /** Function to switch to a different network */
   switchNetwork: AppKit['switchNetwork'];
 }
 
+/**
+ * Hook to access core AppKit functionality for controlling the modal
+ *
+ * @remarks
+ * This hook provides access to the main AppKit instance methods for opening/closing
+ * the modal, disconnecting wallets, and switching networks. All functions are memoized
+ * and properly bound to ensure stable references across renders.
+ *
+ * @returns {UseAppKitReturn} An object containing:
+ *   - `open`: Opens the AppKit modal, optionally with a specific view
+ *   - `close`: Closes the AppKit modal
+ *   - `disconnect`: Disconnects the current wallet connection (optionally for a specific namespace)
+ *   - `switchNetwork`: Switches to a different blockchain network
+ *
+ * @throws {Error} If used outside of an AppKitProvider
+ * @throws {Error} If AppKit instance is not available in context
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { open, close, disconnect, switchNetwork } = useAppKit();
+ *
+ *   return (
+ *     <View>
+ *       <Button onPress={() => open()} title="Connect Wallet" />
+ *       <Button onPress={() => disconnect()} title="Disconnect" />
+ *       <Button
+ *         onPress={() => switchNetwork('eip155:1')}
+ *         title="Switch to Ethereum"
+ *       />
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
 export const useAppKit = (): UseAppKitReturn => {
-  const context = useContext(AppKitContext);
-
-  if (context === undefined) {
-    throw new Error('useAppKit must be used within an AppKitProvider');
-  }
-
-  if (!context.appKit) {
-    // This might happen if the provider is rendered before AppKit is initialized
-    throw new Error('AppKit instance is not yet available in context.');
-  }
+  const context = useAppKitContext();
 
   const stableFunctions = useMemo(() => {
     if (!context.appKit) {

packages/appkit/src/hooks/useAppKitContext.ts

@@ -0,0 +1,43 @@
+import { useContext } from 'react';
+
+import { AppKitContext, type AppKitContextType } from '../AppKitContext';
+
+/**
+ * Hook to access the AppKit context
+ *
+ * @remarks
+ * This is an internal hook used by other AppKit hooks to ensure they're used within
+ * the AppKitProvider. You typically don't need to use this hook directly - use the
+ * higher-level hooks like `useAppKit`, `useAccount`, `useAppKitTheme`, etc. instead.
+ *
+ * @returns {AppKitContextType} The AppKit context containing the AppKit instance
+ *
+ * @throws {Error} If used outside of an AppKitProvider
+ * @throws {Error} If the AppKit instance is not yet available in context
+ *
+ * @internal
+ *
+ * @example
+ * ```tsx
+ * // This is typically used internally by other hooks
+ * function MyCustomHook() {
+ *   const context = useAppKitContext();
+ *   // Use context.appKit...
+ * }
+ * ```
+ */
+
+export const useAppKitContext = (): AppKitContextType => {
+  const context = useContext(AppKitContext);
+
+  if (context === undefined) {
+    throw new Error('useAppKit must be used within an AppKitProvider');
+  }
+
+  if (!context.appKit) {
+    // This might happen if the provider is rendered before AppKit is initialized
+    throw new Error('AppKit instance is not yet available in context.');
+  }
+
+  return context;
+};

packages/appkit/src/hooks/useAppKitEvents.ts

@@ -2,10 +2,42 @@ import { useEffect } from 'react';
 import { useSnapshot } from 'valtio';
 import { EventsController, type EventsControllerState } from '@reown/appkit-core-react-native';
 import { type EventName } from '@reown/appkit-common-react-native';
-import { useAppKit } from './useAppKit';
+import { useAppKitContext } from './useAppKitContext';
 
+/**
+ * Hook to subscribe to all AppKit events
+ *
+ * @remarks
+ * This hook provides reactive access to AppKit's event system, allowing you to
+ * monitor all events that occur within the AppKit lifecycle (connections, disconnections,
+ * network changes, etc.). The callback is invoked whenever a new event is emitted.
+ *
+ * @param callback - Optional callback function invoked when any event occurs
+ *
+ * @returns An object containing:
+ *   - `data`: The most recent event data
+ *   - `timestamp`: The timestamp of the most recent event
+ *
+ * @throws {Error} If used outside of an AppKitProvider
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { data, timestamp } = useAppKitEvents((event) => {
+ *     console.log('Event occurred:', event.data.event);
+ *   });
+ *
+ *   return (
+ *     <View>
+ *       <Text>Last event: {data?.event}</Text>
+ *       <Text>Time: {timestamp}</Text>
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
 export function useAppKitEvents(callback?: (newEvent: EventsControllerState) => void) {
-  useAppKit(); // Use the hook for checks
+  useAppKitContext();
   const { data, timestamp } = useSnapshot(EventsController.state);
 
   useEffect(() => {
@@ -21,11 +53,39 @@ export function useAppKitEvents(callback?: (newEvent: EventsControllerState) =>
   return { data, timestamp };
 }
 
+/**
+ * Hook to subscribe to a specific AppKit event
+ *
+ * @remarks
+ * This hook allows you to listen for a specific event type rather than all events.
+ * It's more efficient than `useAppKitEvents` when you only care about a particular event.
+ *
+ * @param event - The specific event name to subscribe to (e.g., 'MODAL_OPEN', 'CONNECT_SUCCESS')
+ * @param callback - Callback function invoked when the specified event occurs
+ *
+ * @throws {Error} If used outside of an AppKitProvider
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   useAppKitEventSubscription('CONNECT_SUCCESS', (event) => {
+ *     console.log('Wallet connected!', event.data);
+ *   });
+ *
+ *   useAppKitEventSubscription('DISCONNECT_SUCCESS', (event) => {
+ *     console.log('Wallet disconnected!', event.data);
+ *   });
+ *
+ *   return <View>{/ Your component /}</View>;
+ * }
+ * ```
+ */
+
 export function useAppKitEventSubscription(
   event: EventName,
   callback: (newEvent: EventsControllerState) => void
 ) {
-  useAppKit(); // Use the hook for checks
+  useAppKitContext();
 
   useEffect(() => {
     const unsubscribe = EventsController?.subscribeEvent(event, callback);

packages/appkit/src/hooks/useAppKitLogs.ts

@@ -1,7 +1,7 @@
-import { useContext, useMemo } from 'react';
+import { useMemo } from 'react';
 import { useSnapshot } from 'valtio';
 import { LogController, type LogEntry, type LogLevel } from '@reown/appkit-core-react-native';
-import { AppKitContext } from '../AppKitContext';
+import { useAppKitContext } from './useAppKitContext';
 
 export interface UseAppKitLogsReturn {
   /**
@@ -65,15 +65,7 @@ export interface UseAppKitLogsReturn {
  * ```
  */
 export const useAppKitLogs = (): UseAppKitLogsReturn => {
-  const context = useContext(AppKitContext);
-
-  if (context === undefined) {
-    throw new Error('useAppKitLogs must be used within an AppKitProvider');
-  }
-
-  if (!context.appKit) {
-    throw new Error('AppKit instance is not yet available in context.');
-  }
+  useAppKitContext();
 
   const { logs } = useSnapshot(LogController.state);
 

packages/appkit/src/hooks/useAppKitState.ts

@@ -2,10 +2,43 @@
 import { useMemo } from 'react';
 import { useSnapshot } from 'valtio';
 import { ConnectionsController, ModalController } from '@reown/appkit-core-react-native';
-import { useAppKit } from './useAppKit';
+import { useAppKitContext } from './useAppKitContext';
+
+/**
+ * Hook to access the overall state of the AppKit modal and connection
+ *
+ * @remarks
+ * This hook provides a high-level view of the AppKit's current state, including
+ * whether the modal is open, if it's loading, connection status, and the active chain.
+ * It's useful for coordinating UI elements with the AppKit's state.
+ *
+ * @returns An object containing:
+ *   - `isOpen`: Whether the AppKit modal is currently open
+ *   - `isLoading`: Whether the AppKit is in a loading state
+ *   - `isConnected`: Whether a wallet is currently connected
+ *   - `chain`: The currently active blockchain network
+ *
+ * @throws {Error} If used outside of an AppKitProvider
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { isOpen, isLoading, isConnected, chain } = useAppKitState();
+ *
+ *   return (
+ *     <View>
+ *       <Text>Modal: {isOpen ? 'Open' : 'Closed'}</Text>
+ *       <Text>Loading: {isLoading ? 'Yes' : 'No'}</Text>
+ *       <Text>Connected: {isConnected ? 'Yes' : 'No'}</Text>
+ *       {chain && <Text>Chain: {chain.name}</Text>}
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
 
 export function useAppKitState() {
-  useAppKit(); // Use the hook for checks
+  useAppKitContext();
   const { activeAddress: address, connection, networks } = useSnapshot(ConnectionsController.state);
   const { open, loading } = useSnapshot(ModalController.state);
 

packages/appkit/src/hooks/useAppKitTheme.ts

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { useSnapshot } from 'valtio';
 import type { ThemeMode, ThemeVariables } from '@reown/appkit-common-react-native';
 import { ThemeController } from '@reown/appkit-core-react-native';
-import { useAppKit } from './useAppKit';
+import { useAppKitContext } from './useAppKitContext';
 
 /**
  * Interface representing the result of the useAppKitTheme hook
@@ -62,7 +62,7 @@ export interface UseAppKitThemeReturn {
  * ```
  */
 export function useAppKitTheme(): UseAppKitThemeReturn {
-  useAppKit(); // Use the hook for checks
+  useAppKitContext();
   const { themeMode, themeVariables } = useSnapshot(ThemeController.state);
 
   const stableFunctions = useMemo(

packages/appkit/src/hooks/useProvider.ts

@@ -3,6 +3,7 @@ import { useMemo } from 'react';
 import { useSnapshot } from 'valtio';
 import { ConnectionsController, LogController } from '@reown/appkit-core-react-native';
 import type { Provider, ChainNamespace } from '@reown/appkit-common-react-native';
+import { useAppKitContext } from './useAppKitContext';
 
 /**
  * Interface representing the result of the useProvider hook
@@ -29,14 +30,12 @@ interface ProviderResult {
  *
  * if (provider) {
  *   // Use the provider for blockchain operations
- *   const balance = await provider.request({
- *     method: 'eth_getBalance',
- *     params: [address, 'latest']
- *   });
+ *   const balance = await provider.request({...});
  * }
  * ```
  */
 export function useProvider(): ProviderResult {
+  useAppKitContext();
   const { connection } = useSnapshot(ConnectionsController.state);
 
   const returnValue = useMemo(() => {

packages/appkit/src/hooks/useWalletInfo.ts

@@ -1,10 +1,41 @@
 import { useMemo } from 'react';
 import { useSnapshot } from 'valtio';
 import { ConnectionsController } from '@reown/appkit-core-react-native';
-import { useAppKit } from './useAppKit';
+import { useAppKitContext } from './useAppKitContext';
 
+/**
+ * Hook to access information about the currently connected wallet
+ *
+ * @remarks
+ * This hook provides access to metadata about the connected wallet, such as its name,
+ * icon, and other identifying information. It automatically subscribes to wallet info
+ * changes via valtio.
+ *
+ * @returns An object containing:
+ *   - `walletInfo`: Metadata about the currently connected wallet (name, icon, etc.)
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { walletInfo } = useWalletInfo();
+ *
+ *   return (
+ *     <View>
+ *       {walletInfo && (
+ *         <>
+ *           <Image source={{ uri: walletInfo.icon }} />
+ *           <Text>{walletInfo.name}</Text>
+ *         </>
+ *       )}
+ *     </View>
+ *   );
+ * }
+ * ```
+ *
+ * @throws {Error} If used outside of an AppKitProvider
+ */
 export function useWalletInfo() {
-  useAppKit(); // Use the hook for checks
+  useAppKitContext();
   const { walletInfo: walletInfoSnapshot } = useSnapshot(ConnectionsController.state);
 
   const walletInfo = useMemo(() => ({ walletInfo: walletInfoSnapshot }), [walletInfoSnapshot]);