@reown/appkit-react-native 2.0.0 → 2.0.1

package/src/AppKitContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, type ReactNode } from 'react';
+import React, { createContext, useContext, useMemo, type ReactNode } from 'react';
 import { AppKit } from './AppKit';
 
 interface AppKitContextType {
@@ -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,5 +1,7 @@
+/* eslint-disable valtio/state-snapshot-rule */
+import { useMemo } from 'react';
 import { useSnapshot } from 'valtio';
-import { ConnectionsController } from '@reown/appkit-core-react-native';
+import { ConnectionsController, CoreHelperUtil } from '@reown/appkit-core-react-native';
 import { useAppKit } from './useAppKit';
 
 export function useAccount() {
@@ -8,14 +10,23 @@ export function useAccount() {
   const {
     activeAddress: address,
     activeNamespace,
-    connections
+    connection,
+    networks
   } = useSnapshot(ConnectionsController.state);
 
-  const connection = activeNamespace ? connections.get(activeNamespace) : undefined;
+  const activeChain = useMemo(
+    () =>
+      connection?.caipNetwork
+        ? networks.find(network => network.caipNetworkId === connection?.caipNetwork)
+        : undefined,
+    [connection?.caipNetwork, networks]
+  );
 
   return {
-    address: address?.split(':')[2],
+    address: CoreHelperUtil.getPlainAddress(address),
     isConnected: !!address,
-    chainId: connection?.caipNetwork
+    chainId: activeChain?.id,
+    chain: activeChain,
+    namespace: activeNamespace
   };
 }

package/src/hooks/useAppKit.ts

@@ -1,6 +1,5 @@
-import { useContext } from 'react';
-import { useSnapshot } from 'valtio';
-import { ModalController } from '@reown/appkit-core-react-native';
+import { useContext, useMemo } from 'react';
+import type { ChainNamespace } from '@reown/appkit-common-react-native';
 
 import type { AppKit } from '../AppKit';
 import { AppKitContext } from '../AppKitContext';
@@ -8,28 +7,35 @@ import { AppKitContext } from '../AppKitContext';
 interface UseAppKitReturn {
   open: AppKit['open'];
   close: AppKit['close'];
-  disconnect: (namespace?: string) => void;
+  disconnect: (namespace?: ChainNamespace) => void;
   switchNetwork: AppKit['switchNetwork'];
-  isOpen: boolean;
 }
 
 export const useAppKit = (): UseAppKitReturn => {
   const context = useContext(AppKitContext);
-  const { open } = useSnapshot(ModalController.state);
 
   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 {
-    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
-  };
+  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?: ChainNamespace) =>
+        context.appKit!.disconnect.bind(context.appKit!)(namespace),
+      switchNetwork: context.appKit.switchNetwork.bind(context.appKit)
+    };
+  }, [context.appKit]);
+
+  return stableFunctions;
 };

package/src/hooks/useAppKitEvents.ts

@@ -1,10 +1,7 @@
 import { useEffect } from 'react';
 import { useSnapshot } from 'valtio';
-import {
-  EventsController,
-  type EventName,
-  type EventsControllerState
-} from '@reown/appkit-core-react-native';
+import { EventsController, type EventsControllerState } from '@reown/appkit-core-react-native';
+import { type EventName } from '@reown/appkit-common-react-native';
 import { useAppKit } from './useAppKit';
 
 export function useAppKitEvents(callback?: (newEvent: EventsControllerState) => void) {

package/src/hooks/useAppKitLogs.ts

@@ -0,0 +1,129 @@
+import { useContext, useMemo } from 'react';
+import { useSnapshot } from 'valtio';
+import { LogController, type LogEntry, type LogLevel } from '@reown/appkit-core-react-native';
+import { AppKitContext } from '../AppKitContext';
+
+export interface UseAppKitLogsReturn {
+  /**
+   * All logs from AppKit
+   */
+  logs: LogEntry[];
+
+  /**
+   * Get logs filtered by level
+   */
+  getLogsByLevel: (level: LogLevel) => LogEntry[];
+
+  /**
+   * Get recent logs (default: 100)
+   */
+  getRecentLogs: (count?: number) => LogEntry[];
+
+  /**
+   * Export all logs as JSON string
+   */
+  exportLogs: () => string;
+
+  /**
+   * Get logging statistics by level
+   */
+  getLogsStats: () => Record<LogLevel, number>;
+
+  /**
+   * Clear all logs
+   */
+  clearLogs: () => void;
+
+  /**
+   * Convenience getters for different log levels (regular arrays, safe for console.log)
+   */
+  errorLogs: LogEntry[];
+  warningLogs: LogEntry[];
+  infoLogs: LogEntry[];
+  debugLogs: LogEntry[];
+}
+
+/**
+ * React hook for accessing AppKit logs
+ *
+ * This hook provides reactive access to AppKit's internal logging system.
+ * It automatically updates when new logs are added or when logs are cleaned up.
+ *
+ * @example
+ * ```typescript
+ * function MyComponent() {
+ *   const { logs, errorLogs, exportLogs, clearLogs } = useAppKitLogs();
+ *
+ *   return (
+ *     <View>
+ *       <Text>Total logs: {logs.length}</Text>
+ *       <Text>Error logs: {errorLogs.length}</Text>
+ *       <Button onPress={clearLogs} title="Clear Logs" />
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+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.');
+  }
+
+  const { logs } = useSnapshot(LogController.state);
+
+  // Memoized functions that don't need to change on every render
+  const stableFunctions = useMemo(
+    () => ({
+      getLogsByLevel: (level: LogLevel) => LogController.getLogsByLevel(level),
+      getRecentLogs: (count?: number) => LogController.getRecentLogs(count),
+      exportLogs: () => LogController.exportLogs(),
+      getLogsStats: () => LogController.getLogsStats(),
+      clearLogs: () => LogController.clearLogs()
+    }),
+    []
+  );
+
+  const regularArrays = useMemo(() => {
+    const allLogs = [...logs]; // Convert proxy to regular array
+    const errorLogs: LogEntry[] = [];
+    const warningLogs: LogEntry[] = [];
+    const infoLogs: LogEntry[] = [];
+    const debugLogs: LogEntry[] = [];
+
+    for (const log of allLogs) {
+      switch (log.level) {
+        case 'error':
+          errorLogs.push(log);
+          break;
+        case 'warn':
+          warningLogs.push(log);
+          break;
+        case 'info':
+          infoLogs.push(log);
+          break;
+        case 'debug':
+          debugLogs.push(log);
+          break;
+      }
+    }
+
+    return {
+      logs: allLogs,
+      errorLogs,
+      warningLogs,
+      infoLogs,
+      debugLogs
+    };
+  }, [logs]);
+
+  return {
+    ...regularArrays,
+    ...stableFunctions
+  };
+};

package/src/hooks/useAppKitState.ts

@@ -0,0 +1,26 @@
+/* eslint-disable valtio/state-snapshot-rule */
+import { useMemo } from 'react';
+import { useSnapshot } from 'valtio';
+import { ConnectionsController, ModalController } from '@reown/appkit-core-react-native';
+import { useAppKit } from './useAppKit';
+
+export function useAppKitState() {
+  useAppKit(); // Use the hook for checks
+  const { activeAddress: address, connection, networks } = useSnapshot(ConnectionsController.state);
+  const { open, loading } = useSnapshot(ModalController.state);
+
+  const activeChain = useMemo(
+    () =>
+      connection?.caipNetwork
+        ? networks.find(network => network.caipNetworkId === connection?.caipNetwork)
+        : undefined,
+    [connection?.caipNetwork, networks]
+  );
+
+  return {
+    isOpen: open,
+    isLoading: loading,
+    isConnected: !!address,
+    chain: activeChain
+  };
+}

package/src/hooks/useProvider.ts

@@ -1,25 +1,61 @@
+/* eslint-disable valtio/state-snapshot-rule */
+import { useMemo } from 'react';
 import { useSnapshot } from 'valtio';
-import { ConnectionsController } from '@reown/appkit-core-react-native';
+import { ConnectionsController, LogController } from '@reown/appkit-core-react-native';
 import type { Provider, ChainNamespace } from '@reown/appkit-common-react-native';
 
+/**
+ * Interface representing the result of the useProvider hook
+ */
 interface ProviderResult {
+  /** The active connection provider instance */
   provider?: Provider;
+  /** The chain namespace supported by the provider */
   providerType?: ChainNamespace;
 }
 
-export function useProvider(namespace?: ChainNamespace): ProviderResult {
-  const { connections, activeNamespace } = useSnapshot(ConnectionsController.state);
+/**
+ * Hook that returns the active connection provider and its supported chain namespace.
+ *
+ * This hook accesses the current connection and returns the provider instance along with its supported namespace.
+ *
+ * @returns {ProviderResult} An object containing:
+ *   - `provider`: The active connection provider instance, or undefined if no connection exists
+ *   - `providerType`: The chain namespace supported by the provider, or undefined if no connection exists
+ *
+ * @example
+ * ```typescript
+ * const { provider, providerType } = useProvider();
+ *
+ * if (provider) {
+ *   // Use the provider for blockchain operations
+ *   const balance = await provider.request({
+ *     method: 'eth_getBalance',
+ *     params: [address, 'latest']
+ *   });
+ * }
+ * ```
+ */
+export function useProvider(): ProviderResult {
+  const { connection } = useSnapshot(ConnectionsController.state);
 
-  const targetNamespace = namespace ?? activeNamespace;
+  const returnValue = useMemo(() => {
+    if (!connection || !connection.adapter) {
+      return { provider: undefined, providerType: undefined };
+    }
 
-  if (!targetNamespace) return { provider: undefined, providerType: undefined };
+    try {
+      return {
+        provider: connection.adapter.getProvider(),
+        providerType: connection.adapter.getSupportedNamespace()
+      };
+    } catch (error) {
+      LogController.sendError(error, 'useProvider', 'useProvider');
 
-  const connection = connections.get(targetNamespace);
+      // Provider not initialized yet during session restoration
+      return { provider: undefined, providerType: undefined };
+    }
+  }, [connection]);
 
-  if (!connection) return { provider: undefined, providerType: undefined };
-
-  return {
-    provider: connection.adapter.connector?.getProvider(),
-    providerType: connection.adapter.getSupportedNamespace()
-  };
+  return returnValue;
 }