@reown/appkit-react-native 2.0.0 → 2.0.2

package/src/AppKitContext.tsx

@@ -1,7 +1,7 @@
-import React, { createContext, useContext, type ReactNode } from 'react';
+import React, { createContext, useContext, useMemo, type ReactNode } from 'react';
 import { AppKit } from './AppKit';
 
-interface AppKitContextType {
+export interface AppKitContextType {
   appKit: AppKit | null;
 }
 
@@ -16,8 +16,7 @@ export const AppKitProvider: React.FC<AppKitProviderProps> = ({ children, instan
   return <AppKitContext.Provider value={{ appKit: instance }}>{children}</AppKitContext.Provider>;
 };
 
-//TODO: rename this so it doesn't conflict with the useAppKit hook in the hooks folder
-export const useAppKit = () => {
+export const useInternalAppKit = () => {
   const context = useContext(AppKitContext);
   if (context === undefined) {
     throw new Error('useAppKit must be used within an AppKitProvider');
@@ -27,12 +26,22 @@ export const useAppKit = () => {
     throw new Error('AppKit instance is not yet available in context.');
   }
 
-  return {
-    connect: context.appKit.connect.bind(context.appKit),
-    disconnect: context.appKit.disconnect.bind(context.appKit),
-    open: context.appKit.open.bind(context.appKit),
-    close: context.appKit.close.bind(context.appKit),
-    switchNetwork: context.appKit.switchNetwork.bind(context.appKit),
-    getProvider: context.appKit.getProvider.bind(context.appKit)
-  };
+  const stableFunctions = useMemo(() => {
+    if (!context.appKit) {
+      throw new Error('AppKit instance is not available');
+    }
+
+    return {
+      connect: context.appKit.connect.bind(context.appKit),
+      disconnect: context.appKit.disconnect.bind(context.appKit),
+      open: context.appKit.open.bind(context.appKit),
+      close: context.appKit.close.bind(context.appKit),
+      back: context.appKit.back.bind(context.appKit),
+      switchNetwork: context.appKit.switchNetwork.bind(context.appKit),
+      getProvider: context.appKit.getProvider.bind(context.appKit),
+      switchAccountType: context.appKit.switchAccountType.bind(context.appKit)
+    };
+  }, [context.appKit]);
+
+  return stableFunctions;
 };

package/src/connectors/WalletConnectConnector.ts

@@ -1,5 +1,5 @@
-import { ConnectionController } from '@reown/appkit-core-react-native';
-import { UniversalProvider, type IUniversalProvider } from '@walletconnect/universal-provider';
+import { WcController } from '@reown/appkit-core-react-native';
+import UniversalProvider from '@walletconnect/universal-provider';
 import {
   WalletConnector,
   type AppKitNetwork,
@@ -10,8 +10,11 @@ import {
   type CaipNetworkId,
   type ConnectOptions,
   type ConnectorInitOptions,
-  type Metadata
+  type Metadata,
+  type ConnectionProperties,
+  type RequestArguments
 } from '@reown/appkit-common-react-native';
+import { SIWXUtil } from '../utils/SIWXUtil';
 
 interface WalletConnectConnectorConfig {
   projectId: string;
@@ -38,8 +41,8 @@ export class WalletConnectConnector extends WalletConnector {
     await this.restoreSession();
   }
 
-  private async restoreSession(): Promise<boolean> {
-    const provider = this.getProvider() as IUniversalProvider;
+  override async restoreSession(): Promise<boolean> {
+    const provider = this.getProvider() as UniversalProvider;
     if (!provider) {
       return false;
     }
@@ -48,15 +51,31 @@ export class WalletConnectConnector extends WalletConnector {
       this.namespaces = provider.session.namespaces as Namespaces;
     }
 
+    if (provider.session?.sessionProperties) {
+      this.properties = {
+        ...provider.session.sessionProperties,
+        smartAccounts: provider.session.sessionProperties['smartAccounts']
+          ? JSON.parse(provider.session.sessionProperties['smartAccounts'])
+          : [],
+        sessionTopic: provider.session.topic
+      };
+    }
+
     if (provider.session?.peer?.metadata) {
       const metadata = provider.session?.peer.metadata;
       if (metadata) {
         this.wallet = {
           ...metadata,
           name: metadata.name,
-          icon: metadata.icons?.[0]
+          icon: metadata.icons?.[0],
+          type: 'walletconnect'
         };
       }
+    } else {
+      this.wallet = {
+        name: 'Unknown Wallet',
+        type: 'walletconnect'
+      };
     }
 
     return true;
@@ -68,7 +87,7 @@ export class WalletConnectConnector extends WalletConnector {
   }: {
     projectId: string;
     metadata: Metadata;
-  }): Promise<IUniversalProvider> {
+  }): Promise<UniversalProvider> {
     if (!this.provider) {
       this.provider = (await UniversalProvider.init({
         projectId,
@@ -77,49 +96,111 @@ export class WalletConnectConnector extends WalletConnector {
       })) as Provider;
     }
 
-    return this.provider as IUniversalProvider;
-  }
-
-  override disconnect(): Promise<void> {
-    return this.getProvider().disconnect();
+    return this.provider as UniversalProvider;
   }
 
   override async connect(opts: ConnectOptions) {
+    const { namespaces, defaultNetwork, universalLink } = opts;
     function onUri(uri: string) {
-      ConnectionController.setWcUri(uri);
+      WcController.setWcUri(uri);
     }
 
-    const provider = this.getProvider() as IUniversalProvider;
+    const provider = this.getProvider() as UniversalProvider;
 
     // @ts-ignore
     provider.on('display_uri', onUri);
 
-    const session = await (this.provider as IUniversalProvider).connect({
-      namespaces: {},
-      optionalNamespaces: opts.namespaces
-    });
+    let session: UniversalProvider['session'];
+
+    // SIWE
+    const isEVMOnly = Object.keys(namespaces ?? {}).length === 1 && namespaces?.['eip155'];
+
+    if (isEVMOnly && SIWXUtil.getSIWX()) {
+      // 1CA is only supported on EVM
+
+      session = await SIWXUtil.universalProviderAuthenticate({
+        universalProvider: this.provider as UniversalProvider,
+        chains: namespaces?.['eip155']?.chains ?? [],
+        methods: namespaces?.['eip155']?.methods ?? [],
+        universalLink
+      });
+    } else {
+      session = await (this.provider as UniversalProvider).connect({
+        optionalNamespaces: namespaces
+      });
+    }
 
-    if (opts.defaultChain) {
-      (this.provider as IUniversalProvider).setDefaultChain(opts.defaultChain);
+    const metadata = session?.peer?.metadata;
+    if (metadata) {
+      this.wallet = {
+        ...metadata,
+        name: metadata?.name,
+        icon: metadata?.icons?.[0],
+        type: 'walletconnect'
+      };
+    } else {
+      this.wallet = {
+        name: 'Unknown Wallet',
+        type: 'walletconnect'
+      };
+    }
+
+    if (defaultNetwork?.caipNetworkId) {
+      (this.provider as UniversalProvider).setDefaultChain(defaultNetwork.caipNetworkId);
+    }
+
+    if (session?.sessionProperties) {
+      this.properties = {
+        ...session.sessionProperties,
+        smartAccounts: session.sessionProperties['smartAccounts']
+          ? JSON.parse(session.sessionProperties['smartAccounts'])
+          : [],
+        sessionTopic: session.topic
+      };
     }
 
     this.namespaces = session?.namespaces as Namespaces;
 
     provider.off('display_uri', onUri);
 
-    return this.namespaces;
+    return (session?.namespaces as Namespaces) ?? {};
   }
 
-  override getProvider(): Provider {
+  override getProvider(namespace?: ChainNamespace): Provider {
     if (!this.provider) {
       throw new Error('WalletConnectConnector: Provider not initialized. Call init() first.');
     }
 
+    const provider = this.provider;
+
+    if (namespace) {
+      return {
+        ...this.provider,
+        connect: async (params?: any) => provider.connect(params) as Promise<any>,
+        disconnect: provider.disconnect.bind(provider),
+        on: provider.on.bind(provider),
+        off: provider.off.bind(provider),
+        request: async (args: RequestArguments, chainId?: CaipNetworkId) => {
+          const _chainId = this.getChainId(namespace);
+
+          return provider.request(args, chainId || _chainId);
+        }
+      };
+    }
+
     return this.provider;
   }
 
   override getNamespaces(): Namespaces {
-    return this.namespaces ?? {};
+    const namespaces =
+      ((this.provider as UniversalProvider)?.session?.namespaces as Namespaces) ?? {};
+    this.namespaces = namespaces;
+
+    return namespaces;
+  }
+
+  override getProperties(): ConnectionProperties | undefined {
+    return this.properties;
   }
 
   override switchNetwork(network: AppKitNetwork): Promise<void> {
@@ -127,7 +208,7 @@ export class WalletConnectConnector extends WalletConnector {
 
     let caipNetworkId = network.caipNetworkId ?? `eip155:${network.id}`;
 
-    (this.provider as IUniversalProvider).setDefaultChain(caipNetworkId);
+    (this.provider as UniversalProvider).setDefaultChain(caipNetworkId);
 
     return Promise.resolve();
   }
@@ -137,13 +218,14 @@ export class WalletConnectConnector extends WalletConnector {
   }
 
   override getChainId(namespace: ChainNamespace): CaipNetworkId | undefined {
-    if (!this.namespaces || !this.namespaces[namespace]) {
+    const namespaces = this.getNamespaces();
+    if (!namespaces || !namespaces[namespace]) {
       return undefined;
     }
 
-    const chainId = (this.provider as IUniversalProvider).rpcProviders[
+    const chainId = (this.provider as UniversalProvider).rpcProviders[
       namespace
-    ]?.getDefaultChain();
+    ]?.getDefaultChain?.();
 
     if (!chainId) {
       return undefined;

package/src/hooks/useAccount.ts

@@ -1,21 +1,120 @@
+/* eslint-disable valtio/state-snapshot-rule */
+import {
+  ConnectionsController,
+  CoreHelperUtil,
+  LogController
+} from '@reown/appkit-core-react-native';
+import { useMemo } from 'react';
 import { useSnapshot } from 'valtio';
-import { ConnectionsController } from '@reown/appkit-core-react-native';
-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
+ */
+export interface Account {
+  /** The blockchain address of the account */
+  address: string;
+  /** The blockchain namespace (e.g., 'eip155' for Ethereum, 'solana' for Solana) */
+  namespace: string;
+  /** The chain ID where this account is active */
+  chainId: string;
+  /** Optional account type (e.g. 'eoa' or 'smartAccount') */
+  type?: AccountType;
+}
+
+/**
+ * Hook to access the current account state and connection information
+ *
+ * @remarks
+ * This hook provides access to all connected accounts, the currently active account,
+ * connection status, and active chain information. It automatically subscribes to
+ * connection state changes via valtio.
+ *
+ * The hook parses account data from CAIP-10 format (namespace:chainId:address)
+ * and provides a normalized structure.
+ *
+ * @returns An object containing:
+ * - `allAccounts` - Array of all connected accounts across all connections
+ * - `address` - The plain address of the currently active account (without namespace or chain prefix)
+ * - `isConnected` - Boolean indicating if a wallet is currently connected
+ * - `chainId` - The ID of the currently active chain
+ * - `chain` - The full chain/network object of the currently active chain
+ * - `namespace` - The namespace of the currently active account (e.g. 'eip155', 'solana' or 'bip122')
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { address, isConnected, chainId, allAccounts } = useAccount();
+ *
+ *   if (!isConnected) {
+ *     return <Text>Not connected</Text>;
+ *   }
+ *
+ *   return (
+ *     <View>
+ *       <Text>Connected: {address}</Text>
+ *       <Text>Chain: {chainId}</Text>
+ *       <Text>Total accounts: {allAccounts.length}</Text>
+ *     </View>
+ *   );
+ * }
+ * ```
+ *
+ * @throws Will log errors via LogController if account parsing fails
+ */
 export function useAccount() {
-  useAppKit(); // Use the hook for checks
+  useAppKitContext();
 
   const {
     activeAddress: address,
     activeNamespace,
-    connections
+    connection,
+    connections,
+    networks
   } = useSnapshot(ConnectionsController.state);
 
-  const connection = activeNamespace ? connections.get(activeNamespace) : undefined;
+  const allAccounts: Account[] = useMemo(() => {
+    if (!address) return [];
+
+    return Array.from(connections.values()).flatMap(
+      _connection =>
+        _connection.accounts
+          .map(account => {
+            const [namespace, chainId, plainAddress] = account.split(':');
+            if (!plainAddress || !namespace || !chainId) {
+              LogController.sendError('Invalid account', 'useAccount.ts', 'useAccount', {
+                account
+              });
+
+              return undefined;
+            }
+
+            return {
+              address: plainAddress,
+              namespace,
+              chainId,
+              type: _connection.type
+            };
+          })
+          .filter(account => account !== undefined) as Account[]
+    );
+  }, [connections, address]);
+
+  const activeChain = useMemo(
+    () =>
+      connection?.caipNetwork
+        ? networks.find(network => network.caipNetworkId === connection?.caipNetwork)
+        : undefined,
+    [connection?.caipNetwork, networks]
+  );
 
   return {
-    address: address?.split(':')[2],
+    allAccounts,
+    address: CoreHelperUtil.getPlainAddress(address),
     isConnected: !!address,
-    chainId: connection?.caipNetwork
+    chainId: activeChain?.id !== undefined ? String(activeChain.id) : undefined,
+    chain: activeChain as AppKitNetwork | undefined,
+    namespace: activeNamespace
   };
 }

package/src/hooks/useAppKit.ts

@@ -1,35 +1,74 @@
-import { useContext } from 'react';
-import { useSnapshot } from 'valtio';
-import { ModalController } from '@reown/appkit-core-react-native';
+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'];
-  disconnect: (namespace?: string) => void;
+  /** 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'];
-  isOpen: boolean;
 }
 
+/**
+ * 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);
-  const { open } = useSnapshot(ModalController.state);
+  const context = useAppKitContext();
 
-  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 stableFunctions = useMemo(() => {
+    if (!context.appKit) {
+      throw new Error('AppKit instance is not available');
+    }
 
-  return {
-    open: context.appKit.open.bind(context.appKit),
-    close: context.appKit.close.bind(context.appKit),
-    disconnect: (namespace?: string) => context.appKit?.disconnect.bind(context.appKit)(namespace),
-    switchNetwork: context.appKit.switchNetwork.bind(context.appKit),
-    isOpen: open
-  };
+    return {
+      open: context.appKit.open.bind(context.appKit),
+      close: context.appKit.close.bind(context.appKit),
+      disconnect: (namespace?: ChainNamespace) =>
+        context.appKit!.disconnect.bind(context.appKit!)(namespace),
+      switchNetwork: context.appKit.switchNetwork.bind(context.appKit)
+    };
+  }, [context.appKit]);
+
+  return stableFunctions;
 };

package/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('useAppKitContext 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;
+};

package/src/hooks/useAppKitEvents.ts

@@ -1,14 +1,43 @@
 import { useEffect } from 'react';
 import { useSnapshot } from 'valtio';
-import {
-  EventsController,
-  type EventName,
-  type EventsControllerState
-} from '@reown/appkit-core-react-native';
-import { useAppKit } from './useAppKit';
+import { EventsController, type EventsControllerState } from '@reown/appkit-core-react-native';
+import { type EventName } from '@reown/appkit-common-react-native';
+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(() => {
@@ -24,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);