@reown/appkit-react-native 2.0.0 → 2.0.2

package/src/hooks/useAppKitLogs.ts

@@ -0,0 +1,121 @@
+import { useMemo } from 'react';
+import { useSnapshot } from 'valtio';
+import { LogController, type LogEntry, type LogLevel } from '@reown/appkit-core-react-native';
+import { useAppKitContext } from './useAppKitContext';
+
+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 => {
+  useAppKitContext();
+
+  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,59 @@
+/* eslint-disable valtio/state-snapshot-rule */
+import { useMemo } from 'react';
+import { useSnapshot } from 'valtio';
+import { ConnectionsController, ModalController } from '@reown/appkit-core-react-native';
+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() {
+  useAppKitContext();
+  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/useAppKitTheme.ts

@@ -0,0 +1,82 @@
+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 { useAppKitContext } from './useAppKitContext';
+
+/**
+ * Interface representing the result of the useAppKitTheme hook
+ */
+export interface UseAppKitThemeReturn {
+  /** The current theme mode ('dark' or 'light') */
+  themeMode: ThemeMode;
+  /** The current theme variables, currently only supports 'accent' color */
+  themeVariables: ThemeVariables;
+  /** Function to set the theme mode */
+  setThemeMode: (themeMode: ThemeMode | undefined) => void;
+  /** Function to set theme variables */
+  setThemeVariables: (themeVariables: ThemeVariables | undefined) => void;
+}
+
+/**
+ * Hook to control the visual appearance of the AppKit modal
+ *
+ * @remarks
+ * This hook provides access to the theme mode and theme variables, allowing you to
+ * customize the modal's appearance. Use this hook when you need to implement dark/light
+ * mode or match the modal's appearance with your application's theme.
+ *
+ * Currently, the only supported theme variable is `accent`, which controls the primary
+ * accent color used throughout the modal interface.
+ *
+ * @returns {UseAppKitThemeReturn} An object containing:
+ *   - `themeMode`: The current theme mode ('dark' or 'light')
+ *   - `themeVariables`: The current theme variables (only 'accent' is supported)
+ *   - `setThemeMode`: Function to change the theme mode
+ *   - `setThemeVariables`: Function to update theme variables
+ *
+ * @throws {Error} If used outside of an AppKitProvider
+ *
+ * @example
+ * ```typescript
+ * import { useAppKitTheme } from '@reown/appkit-react-native';
+ *
+ * function MyComponent() {
+ *   const { themeMode, themeVariables, setThemeMode, setThemeVariables } = useAppKitTheme();
+ *
+ *   // Set theme to dark mode
+ *   setThemeMode('dark');
+ *
+ *   // Customize the accent color
+ *   setThemeVariables({
+ *     accent: '#00BB7F'
+ *   });
+ *
+ *   return (
+ *     <View>
+ *       <Text>Current theme: {themeMode}</Text>
+ *       <Text>Accent color: {themeVariables?.accent}</Text>
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+export function useAppKitTheme(): UseAppKitThemeReturn {
+  useAppKitContext();
+
+  const { themeMode, themeVariables } = useSnapshot(ThemeController.state);
+
+  const stableFunctions = useMemo(
+    () => ({
+      setThemeMode: ThemeController.setDefaultThemeMode.bind(ThemeController),
+      setThemeVariables: ThemeController.setThemeVariables.bind(ThemeController)
+    }),
+    []
+  );
+
+  return {
+    themeMode,
+    themeVariables,
+    ...stableFunctions
+  };
+}

package/src/hooks/useProvider.ts

@@ -1,25 +1,60 @@
+/* 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';
+import { useAppKitContext } from './useAppKitContext';
 
+/**
+ * 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({...});
+ * }
+ * ```
+ */
+export function useProvider(): ProviderResult {
+  useAppKitContext();
+  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;
 }

package/src/hooks/useRouteTransition.ts

@@ -0,0 +1,102 @@
+import { useCallback, useRef, useEffect } from 'react';
+import { Animated, Dimensions } from 'react-native';
+
+const { width: screenWidth } = Dimensions.get('window');
+
+export interface RouteTransitionConfig {
+  duration?: number;
+  useNativeDriver?: boolean;
+}
+
+export function useRouteTransition(config: RouteTransitionConfig = {}) {
+  const { duration = 300, useNativeDriver = true } = config;
+
+  const fadeAnim = useRef(new Animated.Value(1)).current;
+  const slideAnim = useRef(new Animated.Value(0)).current;
+  const isAnimating = useRef(false);
+  const currentAnimation = useRef<Animated.CompositeAnimation | null>(null);
+
+  const animateTransition = useCallback(
+    (direction: 'forward' | 'backward' | 'none') => {
+      if (isAnimating.current || direction === 'none') {
+        return Promise.resolve();
+      }
+
+      if (currentAnimation.current) {
+        currentAnimation.current.stop();
+      }
+
+      isAnimating.current = true;
+
+      return new Promise<void>(resolve => {
+        const startPosition =
+          direction === 'forward'
+            ? screenWidth * 0.02 // Start from right for forward
+            : -screenWidth * 0.02; // Start from left for backward
+
+        // Immediately set starting position and fade out
+        fadeAnim.setValue(0);
+        slideAnim.setValue(startPosition);
+
+        // Animate to final position with fade in
+        const animation = Animated.parallel([
+          Animated.timing(fadeAnim, {
+            toValue: 1,
+            duration,
+            useNativeDriver
+          }),
+          Animated.timing(slideAnim, {
+            toValue: 0, // Slide to center
+            duration,
+            useNativeDriver
+          })
+        ]);
+
+        currentAnimation.current = animation;
+
+        animation.start(({ finished }) => {
+          // Always clean up and resolve, even if the animation was interrupted
+          // Android often reports finished=false when interrupted, which otherwise
+          // would leave the view stuck at opacity 0 and block future animations.
+          if (!finished) {
+            // Ensure we end in the expected target state
+            fadeAnim.setValue(1);
+            slideAnim.setValue(0);
+          }
+
+          isAnimating.current = false;
+          currentAnimation.current = null;
+          resolve();
+        });
+      });
+    },
+    [fadeAnim, slideAnim, duration, useNativeDriver]
+  );
+
+  const getAnimatedStyle = useCallback(
+    () => ({
+      opacity: fadeAnim,
+      transform: [{ translateX: slideAnim }]
+    }),
+    [fadeAnim, slideAnim]
+  );
+
+  useEffect(() => {
+    fadeAnim.setValue(1);
+    slideAnim.setValue(0);
+
+    return () => {
+      if (currentAnimation.current) {
+        currentAnimation.current.stop();
+        currentAnimation.current = null;
+      }
+      isAnimating.current = false;
+    };
+  }, [fadeAnim, slideAnim]);
+
+  return {
+    animateTransition,
+    getAnimatedStyle,
+    isAnimating: isAnimating.current
+  };
+}

package/src/hooks/useWalletInfo.ts

@@ -1,10 +1,44 @@
+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
-  const { walletInfo } = useSnapshot(ConnectionsController.state);
+  useAppKitContext();
+  const { walletInfo: walletInfoSnapshot } = useSnapshot(ConnectionsController.state);
 
-  return { walletInfo };
+  const walletInfo = useMemo(() => ({ walletInfo: walletInfoSnapshot }), [walletInfoSnapshot]);
+
+  return walletInfo;
 }

package/src/index.ts

@@ -1,3 +1,6 @@
+import '@walletconnect/react-native-compat';
+
+/********** Components **********/
 export {
   AccountButton as AccountButton,
   type AccountButtonProps
@@ -12,28 +15,36 @@ export {
   type NetworkButtonProps as NetworkButtonProps
 } from './modal/w3m-network-button';
 export { AppKit } from './modal/w3m-modal';
-export { AppKitRouter } from './modal/w3m-router';
-
-export { AppKitScaffold } from './client';
-export type { LibraryOptions, ScaffoldOptions } from './client';
 
+/********** Types **********/
 export type * from '@reown/appkit-core-react-native';
-export { CoreHelperUtil } from '@reown/appkit-core-react-native';
-
-export * from './AppKit';
-export { AppKitProvider } from './AppKitContext';
-
 export type { AppKitNetwork, Storage } from '@reown/appkit-common-react-native';
-
-export { WalletConnectConnector } from './connectors/WalletConnectConnector';
+export type {
+  SIWXConfig,
+  SIWXMessage,
+  SIWXSession,
+  SIWXStorage,
+  SIWXVerifier
+} from '@reown/appkit-common-react-native';
+export type { AppKitConfig } from './types';
 
 /****** Hooks *******/
 export { useAppKit } from './hooks/useAppKit';
 export { useProvider } from './hooks/useProvider';
-export { useAccount } from './hooks/useAccount';
+export { useAccount, type Account as UseAccountReturn } from './hooks/useAccount';
+export { useAppKitTheme, type UseAppKitThemeReturn } from './hooks/useAppKitTheme';
 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-account-button/index.tsx

@@ -1,16 +1,14 @@
 import { useSnapshot } from 'valtio';
+import type { StyleProp, ViewStyle } from 'react-native';
 import {
-  AccountController,
   CoreHelperUtil,
   ModalController,
-  AssetUtil,
   ThemeController,
-  ConnectionsController
+  ConnectionsController,
+  AssetController,
+  AssetUtil
 } from '@reown/appkit-core-react-native';
-
 import { AccountButton as AccountButtonUI, ThemeProvider } from '@reown/appkit-ui-react-native';
-import { ApiController } from '@reown/appkit-core-react-native';
-import type { StyleProp, ViewStyle } from 'react-native';
 
 export interface AccountButtonProps {
   balance?: 'show' | 'hide';
@@ -20,15 +18,16 @@ export interface AccountButtonProps {
 }
 
 export function AccountButton({ balance, disabled, style, testID }: AccountButtonProps) {
-  const { profileImage, profileName } = useSnapshot(AccountController.state);
   const { themeMode, themeVariables } = useSnapshot(ThemeController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
   const {
     activeAddress: address,
     activeBalance,
-    activeNetwork
+    activeNetwork,
+    identity
   } = useSnapshot(ConnectionsController.state);
 
-  const networkImage = AssetUtil.getNetworkImage(activeNetwork?.id);
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
   const showBalance = balance === 'show';
 
   return (
@@ -36,10 +35,9 @@ export function AccountButton({ balance, disabled, style, testID }: AccountButto
       <AccountButtonUI
         onPress={() => ModalController.open()}
         address={address?.split(':')[2] ?? ''}
-        profileName={profileName}
+        profileName={identity?.name}
         networkSrc={networkImage}
-        imageHeaders={ApiController._getApiHeaders()}
-        avatarSrc={profileImage}
+        avatarSrc={identity?.avatar}
         disabled={disabled}
         style={style}
         balance={

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

@@ -1,7 +1,7 @@
 import { useSnapshot } from 'valtio';
 import { AccountButton, type AccountButtonProps } from '../w3m-account-button';
 import { ConnectButton, type ConnectButtonProps } from '../w3m-connect-button';
-import { AccountController, ModalController } from '@reown/appkit-core-react-native';
+import { ConnectionsController, ModalController } from '@reown/appkit-core-react-native';
 
 export interface AppKitButtonProps {
   balance?: AccountButtonProps['balance'];
@@ -22,7 +22,7 @@ export function AppKitButton({
   accountStyle,
   connectStyle
 }: AppKitButtonProps) {
-  const { isConnected } = useSnapshot(AccountController.state);
+  const { isConnected } = useSnapshot(ConnectionsController.state);
   const { loading } = useSnapshot(ModalController.state);
 
   return !loading && isConnected ? (