@reown/appkit-react-native 0.0.0-accounts-canary.1-20251023174733

package/src/AppKitContext.tsx

@@ -0,0 +1,47 @@
+import React, { createContext, useContext, useMemo, type ReactNode } from 'react';
+import { AppKit } from './AppKit';
+
+interface AppKitContextType {
+  appKit: AppKit | null;
+}
+
+export const AppKitContext = createContext<AppKitContextType>({ appKit: null });
+
+interface AppKitProviderProps {
+  children: ReactNode;
+  instance: AppKit;
+}
+
+export const AppKitProvider: React.FC<AppKitProviderProps> = ({ children, instance }) => {
+  return <AppKitContext.Provider value={{ appKit: instance }}>{children}</AppKitContext.Provider>;
+};
+
+export const useInternalAppKit = () => {
+  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 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

@@ -0,0 +1,236 @@
+import { WcController } from '@reown/appkit-core-react-native';
+import UniversalProvider from '@walletconnect/universal-provider';
+import {
+  WalletConnector,
+  type AppKitNetwork,
+  type Namespaces,
+  type Provider,
+  type WalletInfo,
+  type ChainNamespace,
+  type CaipNetworkId,
+  type ConnectOptions,
+  type ConnectorInitOptions,
+  type Metadata,
+  type ConnectionProperties,
+  type RequestArguments
+} from '@reown/appkit-common-react-native';
+import { SIWXUtil } from '../utils/SIWXUtil';
+
+interface WalletConnectConnectorConfig {
+  projectId: string;
+}
+
+export class WalletConnectConnector extends WalletConnector {
+  private readonly config: WalletConnectConnectorConfig;
+
+  constructor(config: WalletConnectConnectorConfig) {
+    super({ type: 'walletconnect' });
+    this.config = config;
+  }
+
+  override async init(ops: ConnectorInitOptions) {
+    super.init(ops);
+
+    const provider = await this.getUniversalProvider({
+      projectId: this.config.projectId,
+      metadata: ops.metadata
+    });
+
+    this.provider = provider as Provider;
+
+    await this.restoreSession();
+  }
+
+  override async restoreSession(): Promise<boolean> {
+    const provider = this.getProvider() as UniversalProvider;
+    if (!provider) {
+      return false;
+    }
+
+    if (provider.session?.namespaces) {
+      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],
+          type: 'walletconnect'
+        };
+      }
+    } else {
+      this.wallet = {
+        name: 'Unknown Wallet',
+        type: 'walletconnect'
+      };
+    }
+
+    return true;
+  }
+
+  private async getUniversalProvider({
+    projectId,
+    metadata
+  }: {
+    projectId: string;
+    metadata: Metadata;
+  }): Promise<UniversalProvider> {
+    if (!this.provider) {
+      this.provider = (await UniversalProvider.init({
+        projectId,
+        metadata,
+        storage: this.storage
+      })) as Provider;
+    }
+
+    return this.provider as UniversalProvider;
+  }
+
+  override async connect(opts: ConnectOptions) {
+    const { namespaces, defaultNetwork, universalLink } = opts;
+    function onUri(uri: string) {
+      WcController.setWcUri(uri);
+    }
+
+    const provider = this.getProvider() as UniversalProvider;
+
+    // @ts-ignore
+    provider.on('display_uri', onUri);
+
+    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
+      });
+    }
+
+    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 (session?.namespaces as Namespaces) ?? {};
+  }
+
+  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 {
+    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> {
+    if (!network) throw new Error('No network provided');
+
+    let caipNetworkId = network.caipNetworkId ?? `eip155:${network.id}`;
+
+    (this.provider as UniversalProvider).setDefaultChain(caipNetworkId);
+
+    return Promise.resolve();
+  }
+
+  override getWalletInfo(): WalletInfo | undefined {
+    return this.wallet;
+  }
+
+  override getChainId(namespace: ChainNamespace): CaipNetworkId | undefined {
+    const namespaces = this.getNamespaces();
+    if (!namespaces || !namespaces[namespace]) {
+      return undefined;
+    }
+
+    const chainId = (this.provider as UniversalProvider).rpcProviders[
+      namespace
+    ]?.getDefaultChain?.();
+
+    if (!chainId) {
+      return undefined;
+    }
+
+    return `${namespace}:${chainId}` as CaipNetworkId;
+  }
+}

package/src/hooks/useAccount.ts

@@ -0,0 +1,118 @@
+/* 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 { useAppKit } from './useAppKit';
+import type { AccountType } from '@reown/appkit-common-react-native';
+
+/**
+ * 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
+
+  const {
+    activeAddress: address,
+    activeNamespace,
+    connection,
+    connections,
+    networks
+  } = useSnapshot(ConnectionsController.state);
+
+  const allAccounts: Account[] = useMemo(() => {
+    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]);
+
+  const activeChain = useMemo(
+    () =>
+      connection?.caipNetwork
+        ? networks.find(network => network.caipNetworkId === connection?.caipNetwork)
+        : undefined,
+    [connection?.caipNetwork, networks]
+  );
+
+  return {
+    allAccounts,
+    address: CoreHelperUtil.getPlainAddress(address),
+    isConnected: !!address,
+    chainId: activeChain?.id,
+    chain: activeChain,
+    namespace: activeNamespace
+  };
+}

package/src/hooks/useAppKit.ts

@@ -0,0 +1,41 @@
+import { useContext, useMemo } from 'react';
+import type { ChainNamespace } from '@reown/appkit-common-react-native';
+
+import type { AppKit } from '../AppKit';
+import { AppKitContext } from '../AppKitContext';
+
+interface UseAppKitReturn {
+  open: AppKit['open'];
+  close: AppKit['close'];
+  disconnect: (namespace?: ChainNamespace) => void;
+  switchNetwork: AppKit['switchNetwork'];
+}
+
+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 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

@@ -0,0 +1,37 @@
+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';
+
+export function useAppKitEvents(callback?: (newEvent: EventsControllerState) => void) {
+  useAppKit(); // Use the hook for checks
+  const { data, timestamp } = useSnapshot(EventsController.state);
+
+  useEffect(() => {
+    const unsubscribe = EventsController.subscribe(newEvent => {
+      callback?.(newEvent);
+    });
+
+    return () => {
+      unsubscribe?.();
+    };
+  }, [callback]);
+
+  return { data, timestamp };
+}
+
+export function useAppKitEventSubscription(
+  event: EventName,
+  callback: (newEvent: EventsControllerState) => void
+) {
+  useAppKit(); // Use the hook for checks
+
+  useEffect(() => {
+    const unsubscribe = EventsController?.subscribeEvent(event, callback);
+
+    return () => {
+      unsubscribe?.();
+    };
+  }, [callback, event]);
+}

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/useDebounceCallback.ts

@@ -0,0 +1,45 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+interface Props {
+  callback: ((args?: any) => any) | ((args?: any) => Promise<any>);
+  delay?: number;
+}
+
+export function useDebounceCallback({ callback, delay = 250 }: Props) {
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const callbackRef = useRef(callback);
+
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+
+  const abort = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  }, []);
+
+  const debouncedCallback = useCallback(
+    (args?: any) => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+
+      timeoutRef.current = setTimeout(() => {
+        callbackRef.current(args);
+      }, delay);
+    },
+    [delay]
+  );
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  return { debouncedCallback, abort };
+}