@reown/appkit-react-native 0.0.0-develop-20251030154825 → 0.0.0-develop-20251114173726

package/src/hooks/useAppKitLogs.ts

@@ -1,7 +1,7 @@
-import { useContext, useMemo } from 'react';
+import { useMemo } from 'react';
 import { useSnapshot } from 'valtio';
 import { LogController, type LogEntry, type LogLevel } from '@reown/appkit-core-react-native';
-import { AppKitContext } from '../AppKitContext';
+import { useAppKitContext } from './useAppKitContext';
 
 export interface UseAppKitLogsReturn {
   /**
@@ -65,15 +65,7 @@ export interface UseAppKitLogsReturn {
  * ```
  */
 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.');
-  }
+  useAppKitContext();
 
   const { logs } = useSnapshot(LogController.state);
 

package/src/hooks/useAppKitState.ts

@@ -2,10 +2,43 @@
 import { useMemo } from 'react';
 import { useSnapshot } from 'valtio';
 import { ConnectionsController, ModalController } from '@reown/appkit-core-react-native';
-import { useAppKit } from './useAppKit';
+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() {
-  useAppKit(); // Use the hook for checks
+  useAppKitContext();
   const { activeAddress: address, connection, networks } = useSnapshot(ConnectionsController.state);
   const { open, loading } = useSnapshot(ModalController.state);
 

package/src/hooks/useAppKitTheme.ts

@@ -0,0 +1,81 @@
+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'), or undefined if using system default */
+  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.setThemeMode.bind(ThemeController),
+      setThemeVariables: ThemeController.setThemeVariables.bind(ThemeController)
+    }),
+    []
+  );
+
+  return {
+    themeMode,
+    themeVariables,
+    ...stableFunctions
+  };
+}

package/src/hooks/useProvider.ts

@@ -3,6 +3,7 @@ import { useMemo } from 'react';
 import { useSnapshot } from 'valtio';
 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
@@ -29,14 +30,12 @@ interface ProviderResult {
  *
  * if (provider) {
  *   // Use the provider for blockchain operations
- *   const balance = await provider.request({
- *     method: 'eth_getBalance',
- *     params: [address, 'latest']
- *   });
+ *   const balance = await provider.request({...});
  * }
  * ```
  */
 export function useProvider(): ProviderResult {
+  useAppKitContext();
   const { connection } = useSnapshot(ConnectionsController.state);
 
   const returnValue = useMemo(() => {

package/src/hooks/useWalletInfo.ts

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

package/src/index.ts

@@ -32,6 +32,7 @@ export type { AppKitConfig } from './types';
 export { useAppKit } from './hooks/useAppKit';
 export { useProvider } from './hooks/useProvider';
 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';

package/src/modal/w3m-modal/styles.ts

@@ -3,6 +3,7 @@ import { StyleSheet } from 'react-native';
 export default StyleSheet.create({
   card: {
     borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 0
+    borderBottomRightRadius: 0,
+    borderWidth: 0
   }
 });

package/src/partials/w3m-connecting-body/index.tsx

@@ -11,7 +11,9 @@ export interface ConnectingBodyProps {
 export function ConnectingBody({ title, description }: ConnectingBodyProps) {
   return (
     <FlexView padding={['3xs', '2xl', '0', '2xl']} alignItems="center" style={styles.textContainer}>
-      <Text variant="paragraph-500">{title}</Text>
+      <Text center numberOfLines={1} variant="paragraph-500">
+        {title}
+      </Text>
       {description ? (
         <Text center variant="small-400" color="fg-200" style={styles.descriptionText}>
           {description}

package/src/partials/w3m-connecting-mobile/components/StoreLink.tsx

@@ -12,7 +12,7 @@ export function StoreLink({ visible, walletName = 'Wallet', onPress }: StoreLink
 
   return (
     <ActionEntry style={styles.storeButton}>
-      <Text numberOfLines={1} variant="paragraph-500" color="fg-200">
+      <Text numberOfLines={1} style={styles.storeText} variant="paragraph-500" color="fg-200">
         {`Don't have ${walletName}?`}
       </Text>
       <Button
@@ -34,5 +34,8 @@ const styles = StyleSheet.create({
     paddingHorizontal: Spacing.l,
     marginHorizontal: Spacing.xl,
     marginTop: Spacing.l
+  },
+  storeText: {
+    flexShrink: 1
   }
 });

package/src/partials/w3m-connecting-qrcode/index.tsx

@@ -20,6 +20,9 @@ import styles from './styles';
 import { ReownButton } from './components/ReownButton';
 import { useWindowDimensions } from 'react-native';
 
+const LOGO_SIZE = 60;
+const LOGO_BORDER_RADIUS = 10;
+
 export function ConnectingQrCode() {
   const { height, width } = useWindowDimensions();
   const windowSize = Math.min(height, width);
@@ -65,7 +68,13 @@ export function ConnectingQrCode() {
       flexDirection={isPortrait ? 'column' : 'row'}
       padding={['xl', 'xl', 'xs', 'xl']}
     >
-      <QrCode size={qrSize} uri={wcUri} testID="qr-code" />
+      <QrCode
+        size={qrSize}
+        uri={wcUri}
+        testID="qr-code"
+        logoBorderRadius={LOGO_BORDER_RADIUS}
+        logoSize={LOGO_SIZE}
+      />
       <FlexView alignItems="center" margin="m">
         <Text variant="paragraph-500">Scan this QR code with your phone</Text>
         {showCopy ? (

package/src/partials/w3m-header/index.tsx

@@ -100,7 +100,12 @@ export function Header() {
       padding={['l', 'xl', bottomPadding, 'xl']}
     >
       {dynamicButtonTemplate()}
-      <Text variant="paragraph-600" numberOfLines={1} testID="header-text">
+      <Text
+        variant="paragraph-600"
+        numberOfLines={1}
+        style={styles.headerText}
+        testID="header-text"
+      >
         {header}
       </Text>
       {showClose ? (

package/src/partials/w3m-header/styles.ts

@@ -4,5 +4,8 @@ export default StyleSheet.create({
   iconPlaceholder: {
     height: 32,
     width: 32
+  },
+  headerText: {
+    flexShrink: 1
   }
 });

package/src/views/w3m-connecting-external-view/index.tsx

@@ -26,6 +26,7 @@ import styles from './styles';
 import { useInternalAppKit } from '../../AppKitContext';
 import { StoreLink } from '../../partials/w3m-connecting-mobile/components/StoreLink';
 import { WcHelpersUtil } from '../../utils/HelpersUtil';
+import { ErrorUtil } from '@reown/appkit-common-react-native';
 
 export function ConnectingExternalView() {
   const { data } = useSnapshot(RouterController.state);
@@ -94,16 +95,11 @@ export function ConnectingExternalView() {
       }
     } catch (error) {
       LogController.sendError(error, 'ConnectingExternalView.tsx', 'onConnect');
-      if (/(Wallet not found)/i.test((error as Error).message)) {
-        setErrorType('not_installed');
-      } else if (/(rejected)/i.test((error as Error).message)) {
-        setErrorType('declined');
-      } else {
-        setErrorType('default');
-      }
+      const type = ErrorUtil.categorizeConnectionError(error);
+      setErrorType(type);
       EventsController.sendEvent({
         type: 'track',
-        event: 'CONNECT_ERROR',
+        event: type === 'declined' ? 'USER_REJECTED' : 'CONNECT_ERROR',
         properties: { message: (error as Error)?.message ?? 'Unknown' }
       });
     }

package/src/views/w3m-connecting-view/index.tsx

@@ -1,6 +1,6 @@
 import { useSnapshot } from 'valtio';
 import { useEffect, useLayoutEffect, useState } from 'react';
-import { type Platform } from '@reown/appkit-common-react-native';
+import { ErrorUtil, type Platform } from '@reown/appkit-common-react-native';
 import {
   WcController,
   ConstantsUtil,
@@ -32,41 +32,53 @@ export function ConnectingView() {
   const onRetry = () => {
     if (CoreHelperUtil.isAllowedRetry(lastRetry)) {
       setLastRetry(Date.now());
-      WcController.clearUri();
       initializeConnection(true);
     } else {
       SnackController.showError('Please wait a second before retrying');
     }
   };
 
-  const initializeConnection = async (retry = false) => {
+  const initializeConnection = async (retry = false, retryTimestamp?: number) => {
     try {
       const { wcPairingExpiry } = WcController.state;
       const { data: routeData } = RouterController.state;
-      if (retry || CoreHelperUtil.isPairingExpired(wcPairingExpiry)) {
+      const isPairingExpired = CoreHelperUtil.isPairingExpired(wcPairingExpiry);
+      if (retry || isPairingExpired) {
         WcController.setWcError(false);
+        WcController.clearUri();
 
         const connectPromise = connect({
           wallet: routeData?.wallet
         });
         WcController.setWcPromise(connectPromise);
+        await connectPromise;
       }
     } catch (error) {
       LogController.sendError(error, 'ConnectingView.tsx', 'initializeConnection');
       WcController.setWcError(true);
-      WcController.clearUri();
-      SnackController.showError('Declined');
-      if (isQr && CoreHelperUtil.isAllowedRetry(lastRetry)) {
-        setLastRetry(Date.now());
-        initializeConnection(true);
+
+      const isUserRejected = ErrorUtil.isUserRejectedRequestError(error);
+      const isProposalExpired = ErrorUtil.isProposalExpiredError(error);
+      if (!isProposalExpired) {
+        SnackController.showError(
+          isUserRejected ? 'User rejected the request' : 'Something went wrong'
+        );
       }
+
       EventsController.sendEvent({
         type: 'track',
-        event: 'CONNECT_ERROR',
+        event: isUserRejected ? 'USER_REJECTED' : 'CONNECT_ERROR',
         properties: {
           message: (error as Error)?.message ?? 'Unknown'
         }
       });
+
+      const currentRetryTime = retryTimestamp ?? lastRetry;
+      if (isQr && CoreHelperUtil.isAllowedRetry(currentRetryTime)) {
+        const newRetryTime = Date.now();
+        setLastRetry(newRetryTime);
+        initializeConnection(true, newRetryTime);
+      }
     }
   };