@reown/appkit-react-native 0.0.0-fix-ui-changes-20250829182619 → 0.0.0-fix-singleton-appkit-20251001153745

package/src/connectors/WalletConnectConnector.ts

@@ -1,5 +1,5 @@
 import { WcController } from '@reown/appkit-core-react-native';
-import { UniversalProvider, type IUniversalProvider } from '@walletconnect/universal-provider';
+import UniversalProvider from '@walletconnect/universal-provider';
 import {
   WalletConnector,
   type AppKitNetwork,
@@ -14,7 +14,7 @@ import {
   type ConnectionProperties,
   type RequestArguments
 } from '@reown/appkit-common-react-native';
-import { getDidAddress, getDidChainId, SIWEController } from '@reown/appkit-siwe-react-native';
+import { SIWXUtil } from '../utils/SIWXUtil';
 
 interface WalletConnectConnectorConfig {
   projectId: string;
@@ -42,7 +42,7 @@ export class WalletConnectConnector extends WalletConnector {
   }
 
   override async restoreSession(): Promise<boolean> {
-    const provider = this.getProvider() as IUniversalProvider;
+    const provider = this.getProvider() as UniversalProvider;
     if (!provider) {
       return false;
     }
@@ -67,9 +67,15 @@ export class WalletConnectConnector extends WalletConnector {
         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;
@@ -81,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,
@@ -90,82 +96,36 @@ export class WalletConnectConnector extends WalletConnector {
       })) as Provider;
     }
 
-    return this.provider as IUniversalProvider;
+    return this.provider as UniversalProvider;
   }
 
   override async connect(opts: ConnectOptions) {
-    const { siweConfig, namespaces, defaultNetwork, universalLink } = opts;
+    const { namespaces, defaultNetwork, universalLink } = opts;
     function onUri(uri: string) {
       WcController.setWcUri(uri);
     }
 
-    const provider = this.getProvider() as IUniversalProvider;
+    const provider = this.getProvider() as UniversalProvider;
 
     // @ts-ignore
     provider.on('display_uri', onUri);
 
-    let session: IUniversalProvider['session'];
+    let session: UniversalProvider['session'];
 
     // SIWE
     const isEVMOnly = Object.keys(namespaces ?? {}).length === 1 && namespaces?.['eip155'];
-    const params = await siweConfig?.getMessageParams?.();
-    if (siweConfig?.options?.enabled && params && Object.keys(params).length > 0 && isEVMOnly) {
+
+    if (isEVMOnly && SIWXUtil.getSIWX()) {
       // 1CA is only supported on EVM
 
-      // @ts-ignore
-      const result = await provider.authenticate(
-        {
-          ...params,
-          nonce: await siweConfig.getNonce(),
-          methods: namespaces?.['eip155']?.methods,
-          chains: params.chains
-        },
+      session = await SIWXUtil.universalProviderAuthenticate({
+        universalProvider: this.provider as UniversalProvider,
+        chains: namespaces?.['eip155']?.chains ?? [],
+        methods: namespaces?.['eip155']?.methods ?? [],
         universalLink
-      );
-
-      // Auths is an array of signed CACAO objects https://github.com/ChainAgnostic/CAIPs/blob/main/CAIPs/caip-74.md
-      const signedCacao = result?.auths?.[0];
-      if (signedCacao) {
-        const { p, s } = signedCacao;
-        const chainId = getDidChainId(p.iss);
-        const address = getDidAddress(p.iss);
-
-        try {
-          // Kicks off verifyMessage and populates external states
-          const message = provider?.client?.formatAuthMessage({
-            request: p,
-            iss: p.iss
-          })!;
-
-          await SIWEController.verifyMessage({
-            message,
-            signature: s.s,
-            cacao: signedCacao
-          });
-
-          if (address && chainId) {
-            const siweSession = {
-              address,
-              chainId: parseInt(chainId, 10)
-            };
-
-            SIWEController.setSession(siweSession);
-            SIWEController.onSignIn?.(siweSession);
-          }
-        } catch (error) {
-          // eslint-disable-next-line no-console
-          console.error('Error verifying message', error);
-          // eslint-disable-next-line no-console
-          await provider.disconnect().catch(console.error);
-          // eslint-disable-next-line no-console
-          await SIWEController.signOut().catch(console.error);
-          throw error;
-        }
-      }
-      session = result?.session;
+      });
     } else {
-      session = await (this.provider as IUniversalProvider).connect({
-        namespaces: {},
+      session = await (this.provider as UniversalProvider).connect({
         optionalNamespaces: namespaces
       });
     }
@@ -175,14 +135,18 @@ export class WalletConnectConnector extends WalletConnector {
       this.wallet = {
         ...metadata,
         name: metadata?.name,
-        icon: metadata?.icons?.[0]
+        icon: metadata?.icons?.[0],
+        type: 'walletconnect'
       };
     } else {
-      this.wallet = undefined;
+      this.wallet = {
+        name: 'Unknown Wallet',
+        type: 'walletconnect'
+      };
     }
 
     if (defaultNetwork?.caipNetworkId) {
-      (this.provider as IUniversalProvider).setDefaultChain(defaultNetwork.caipNetworkId);
+      (this.provider as UniversalProvider).setDefaultChain(defaultNetwork.caipNetworkId);
     }
 
     if (session?.sessionProperties) {
@@ -199,7 +163,7 @@ export class WalletConnectConnector extends WalletConnector {
 
     provider.off('display_uri', onUri);
 
-    return this.namespaces;
+    return (session?.namespaces as Namespaces) ?? {};
   }
 
   override getProvider(namespace?: ChainNamespace): Provider {
@@ -207,13 +171,16 @@ export class WalletConnectConnector extends WalletConnector {
       throw new Error('WalletConnectConnector: Provider not initialized. Call init() first.');
     }
 
-    const provider = this.provider as IUniversalProvider;
+    const provider = this.provider;
 
     if (namespace) {
-      // @ts-ignore
       return {
-        ...provider,
-        request: (args: RequestArguments, chainId?: CaipNetworkId) => {
+        ...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);
@@ -225,7 +192,11 @@ export class WalletConnectConnector extends WalletConnector {
   }
 
   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 {
@@ -237,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();
   }
@@ -247,11 +218,12 @@ 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?.();
 

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,15 +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/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,3 +1,5 @@
+/* eslint-disable valtio/state-snapshot-rule */
+import { useMemo } from 'react';
 import { useSnapshot } from 'valtio';
 import { ConnectionsController } from '@reown/appkit-core-react-native';
 import type { Provider, ChainNamespace } from '@reown/appkit-common-react-native';
@@ -37,10 +39,14 @@ interface ProviderResult {
 export function useProvider(): ProviderResult {
   const { connection } = useSnapshot(ConnectionsController.state);
 
-  if (!connection) return { provider: undefined, providerType: undefined };
+  const returnValue = useMemo(() => {
+    if (!connection) return { provider: undefined, providerType: undefined };
 
-  return {
-    provider: connection.adapter.getProvider(),
-    providerType: connection.adapter.getSupportedNamespace()
-  };
+    return {
+      provider: connection.adapter.getProvider(),
+      providerType: connection.adapter.getSupportedNamespace()
+    };
+  }, [connection]);
+
+  return returnValue;
 }

package/src/hooks/useWalletInfo.ts

@@ -1,10 +1,13 @@
+import { useMemo } from 'react';
 import { useSnapshot } from 'valtio';
 import { ConnectionsController } from '@reown/appkit-core-react-native';
 import { useAppKit } from './useAppKit';
 
 export function useWalletInfo() {
   useAppKit(); // Use the hook for checks
-  const { walletInfo } = useSnapshot(ConnectionsController.state);
+  const { walletInfo: walletInfoSnapshot } = useSnapshot(ConnectionsController.state);
 
-  return { walletInfo };
+  const walletInfo = useMemo(() => ({ walletInfo: walletInfoSnapshot }), [walletInfoSnapshot]);
+
+  return walletInfo;
 }

package/src/index.ts

@@ -17,6 +17,13 @@ export { AppKit } from './modal/w3m-modal';
 /********** Types **********/
 export type * from '@reown/appkit-core-react-native';
 export type { AppKitNetwork, Storage } from '@reown/appkit-common-react-native';
+export type {
+  SIWXConfig,
+  SIWXMessage,
+  SIWXSession,
+  SIWXStorage,
+  SIWXVerifier
+} from '@reown/appkit-common-react-native';
 export type { AppKitConfig } from './types';
 
 /****** Hooks *******/
@@ -25,11 +32,16 @@ export { useProvider } from './hooks/useProvider';
 export { useAccount } from './hooks/useAccount';
 export { useWalletInfo } from './hooks/useWalletInfo';
 export { useAppKitEvents, useAppKitEventSubscription } from './hooks/useAppKitEvents';
+export { useAppKitState } from './hooks/useAppKitState';
+export { useAppKitLogs, type UseAppKitLogsReturn } from './hooks/useAppKitLogs';
 
 /********** Networks **********/
 export { solana, solanaDevnet, solanaTestnet } from '@reown/appkit-common-react-native';
 export { bitcoin, bitcoinTestnet } from '@reown/appkit-common-react-native';
 
+/********** SIWX **********/
+export { ReownAuthentication } from '@reown/appkit-core-react-native';
+
 /********** Main **********/
 export { createAppKit } from './AppKit';
 export { AppKitProvider } from './AppKitContext';

package/src/modal/w3m-modal/index.tsx

@@ -1,5 +1,6 @@
 import { useSnapshot } from 'valtio';
 import { useCallback, useEffect } from 'react';
+import { useColorScheme } from 'react-native';
 import { Card, Modal, ThemeProvider } from '@reown/appkit-ui-react-native';
 import {
   ApiController,
@@ -9,6 +10,7 @@ import {
   RouterController,
   ThemeController
 } from '@reown/appkit-core-react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { AppKitRouter } from '../w3m-router';
 import { Header } from '../../partials/w3m-header';
@@ -17,9 +19,11 @@ import { useInternalAppKit } from '../../AppKitContext';
 import styles from './styles';
 
 export function AppKit() {
+  const theme = useColorScheme();
+  const { bottom, top } = useSafeAreaInsets();
   const { close } = useInternalAppKit();
   const { open } = useSnapshot(ModalController.state);
-  const { themeMode, themeVariables } = useSnapshot(ThemeController.state);
+  const { themeMode, themeVariables, defaultThemeMode } = useSnapshot(ThemeController.state);
   const { projectId } = useSnapshot(OptionsController.state);
 
   const handleBackPress = () => {
@@ -30,6 +34,12 @@ export function AppKit() {
     return handleModalClose();
   };
 
+  useEffect(() => {
+    if (theme && !defaultThemeMode) {
+      ThemeController.setThemeMode(theme);
+    }
+  }, [theme, defaultThemeMode]);
+
   const prefetch = useCallback(async () => {
     await ApiController.prefetch();
     EventsController.sendEvent({ type: 'track', event: 'MODAL_LOADED' });
@@ -53,7 +63,7 @@ export function AppKit() {
         onBackdropPress={handleModalClose}
         testID="w3m-modal"
       >
-        <Card style={styles.card}>
+        <Card style={[styles.card, { paddingBottom: bottom, marginTop: top }]}>
           <Header />
           <AppKitRouter />
           <Snackbar />