@reown/appkit-react-native 0.0.0-chore-examples-20251009175707 → 0.0.0-chore-use-theme-hook-20251105184714

package/src/hooks/useAccount.ts

@@ -1,9 +1,68 @@
 /* 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 { ConnectionsController, CoreHelperUtil } from '@reown/appkit-core-react-native';
 import { useAppKit } from './useAppKit';
+import type { AccountType, AppKitNetwork } 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
 
@@ -11,9 +70,37 @@ export function useAccount() {
     activeAddress: address,
     activeNamespace,
     connection,
+    connections,
     networks
   } = useSnapshot(ConnectionsController.state);
 
+  const allAccounts: Account[] = useMemo(() => {
+    if (!address) return [];
+
+    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, address]);
+
   const activeChain = useMemo(
     () =>
       connection?.caipNetwork
@@ -23,10 +110,11 @@ export function useAccount() {
   );
 
   return {
+    allAccounts,
     address: CoreHelperUtil.getPlainAddress(address),
     isConnected: !!address,
-    chainId: activeChain?.id,
-    chain: activeChain,
+    chainId: activeChain?.id !== undefined ? String(activeChain.id) : undefined,
+    chain: activeChain as AppKitNetwork | undefined,
     namespace: activeNamespace
   };
 }

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 { useAppKit } from './useAppKit';
+
+/**
+ * Interface representing the result of the useAppKitTheme hook
+ */
+interface UseAppKitThemeReturn {
+  /** The current theme mode ('dark' or 'light'), or undefined if using system default */
+  themeMode: ThemeMode | undefined;
+  /** The current theme variables, currently only supports 'accent' color */
+  themeVariables: ThemeVariables | undefined;
+  /** 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 {
+  useAppKit(); // Use the hook for checks
+  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/index.ts

@@ -31,7 +31,7 @@ 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 { 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-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 = 20;
+
 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-send-input-token/index.tsx

@@ -20,6 +20,7 @@ export interface SendInputTokenProps {
   style?: StyleProp<ViewStyle>;
   onTokenPress?: () => void;
   loading?: boolean;
+  testID?: string;
 }
 
 export function SendInputToken({
@@ -27,7 +28,8 @@ export function SendInputToken({
   sendTokenAmount,
   style,
   onTokenPress,
-  loading
+  loading,
+  testID
 }: SendInputTokenProps) {
   const Theme = useTheme();
   const valueInputRef = useRef<TextInput | null>(null);
@@ -86,12 +88,14 @@ export function SendInputToken({
           selectTextOnFocus={false}
           numberOfLines={1}
           autoFocus={!!token}
+          testID={testID}
         />
         <TokenButton
           imageUrl={token?.iconUrl}
           text={token?.symbol}
           onPress={onTokenPress}
           chevron
+          testID={testID ? `${testID}-button` : undefined}
         />
       </FlexView>
       {token ? (

package/src/partials/w3m-swap-input/index.tsx

@@ -28,6 +28,7 @@ export interface SwapInputProps {
   marketValue?: number;
   editable?: boolean;
   autoFocus?: boolean;
+  testID?: string;
 }
 
 const MINIMUM_USD_VALUE_TO_CONVERT = 0.00005;
@@ -43,7 +44,8 @@ export function SwapInput({
   onChange,
   marketValue,
   editable,
-  autoFocus
+  autoFocus,
+  testID
 }: SwapInputProps) {
   const Theme = useTheme();
   const valueInputRef = useRef<TextInput | null>(null);
@@ -118,6 +120,7 @@ export function SwapInput({
                 numberOfLines={1}
                 editable={editable}
                 autoFocus={autoFocus}
+                testID={testID}
               />
             )}
             <TokenButton
@@ -125,6 +128,7 @@ export function SwapInput({
               imageUrl={token?.logoUri}
               onPress={onTokenPress}
               chevron
+              testID={testID ? `${testID}-button` : undefined}
             />
           </FlexView>
           {loadingValues ? (

package/src/views/w3m-account-default-view/index.tsx

@@ -186,7 +186,12 @@ export function AccountDefaultView() {
   return (
     <>
       {showBack ? (
-        <IconLink icon="chevronLeft" style={styles.backIcon} onPress={RouterController.goBack} />
+        <IconLink
+          icon="chevronLeft"
+          style={styles.backIcon}
+          onPress={RouterController.goBack}
+          testID="header-back"
+        />
       ) : null}
       <IconLink
         icon="close"

package/src/views/w3m-onramp-settings-view/index.tsx

@@ -90,6 +90,7 @@ export function OnRampSettingsView() {
           chevron
           style={styles.firstItem}
           contentStyle={styles.listItem}
+          testID="button-select-country"
         >
           <FlexView
             alignItems="center"
@@ -111,7 +112,12 @@ export function OnRampSettingsView() {
             ) : null}
           </FlexView>
         </ListItem>
-        <ListItem onPress={onPaymentCurrencyPress} chevron contentStyle={styles.listItem}>
+        <ListItem
+          onPress={onPaymentCurrencyPress}
+          chevron
+          contentStyle={styles.listItem}
+          testID="button-select-currency"
+        >
           <FlexView
             alignItems="center"
             justifyContent="center"

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

@@ -61,6 +61,7 @@ export function OnRampView() {
   const purchaseCurrencyCode =
     purchaseCurrency?.currencyCode?.split('_')[0] ?? purchaseCurrency?.currencyCode;
   const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
+  const isContinueDisabled = quotesLoading || loading || !selectedQuote;
 
   const getQuotes = useCallback(() => {
     if (OnRampController.canGenerateQuote()) {
@@ -240,8 +241,8 @@ export function OnRampView() {
             <Button
               style={styles.continueButton}
               onPress={handleContinue}
-              disabled={quotesLoading || loading || !selectedQuote}
-              testID="button-continue"
+              disabled={isContinueDisabled}
+              testID={`button-continue${isContinueDisabled ? '-disabled' : '-enabled'}`}
             >
               Continue
             </Button>

package/src/views/w3m-swap-view/components/select-token-modal/index.tsx

@@ -98,7 +98,7 @@ export function SwapSelectTokenModal({ onClose, type, style, visible }: Props) {
           alignItems="center"
           padding={['0', 'm', 'm', 'm']}
         >
-          <IconLink icon="chevronLeft" size="md" onPress={onClose} />
+          <IconLink icon="chevronLeft" size="md" onPress={onClose} testID="button-back" />
           <Text variant="paragraph-600">Select token</Text>
           <View style={styles.iconPlaceholder} />
         </FlexView>

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

@@ -174,6 +174,7 @@ export function SwapView() {
             onChange={onSourceTokenChange}
             onTokenPress={() => setShowModal('sourceToken')}
             onMaxPress={onSourceMaxPress}
+            testID="swap-input-source"
           />
           <FlexView alignItems="center" justifyContent="center" style={styles.bottomInputContainer}>
             <SwapInput
@@ -186,6 +187,7 @@ export function SwapView() {
               onChange={onToTokenChange}
               onTokenPress={() => setShowModal('toToken')}
               editable={false}
+              testID="swap-input-to"
             />
             {showSwitch ? (
               <IconLink

package/src/views/w3m-wallet-send-view/index.tsx

@@ -92,6 +92,7 @@ export function WalletSendView() {
           style={styles.tokenInput}
           onTokenPress={() => RouterController.push('WalletSendSelectToken')}
           loading={isBalanceLoading}
+          testID="send-input-token"
         />
         <FlexView alignItems="center" justifyContent="center" style={styles.addressContainer}>
           <SendInputAddress value={receiverProfileName || receiverAddress} />