@reown/appkit-react-native 0.0.0-chore-added-import-20251002170458 → 0.0.0-chore-qr-borders-20251104183806

package/src/AppKit.ts

@@ -214,6 +214,7 @@ export class AppKit {
       SendController.resetState();
       OnRampController.resetState();
       WcController.resetState();
+      EventsController.resetState();
 
       if (ConnectionsController.state.activeNamespace === undefined) {
         ConnectionsController.setActiveNamespace(
@@ -244,7 +245,7 @@ export class AppKit {
   /**
    * Returns the provider for a given namespace.
    * @param namespace - The namespace to get the provider for.
-   * @returns The provider for the given namespace.
+   * @returns The provider for the given namespace, or null if not available or not yet initialized.
    */
   getProvider<T extends Provider>(namespace?: string): T | null {
     const activeNamespace = namespace ?? ConnectionsController.state.activeNamespace;
@@ -255,36 +256,64 @@ export class AppKit {
     );
     if (!connection || !connection.adapter || !connection.adapter.connector) return null;
 
-    return connection.adapter.connector.getProvider() as T;
+    try {
+      return connection.adapter.connector.getProvider() as T | null;
+    } catch (error) {
+      // Provider not initialized yet during session restoration
+      // This can happen on app restart when restoring a previous connection
+      LogController.sendError(error, 'AppKit.ts', 'getProvider');
+
+      return null;
+    }
   }
 
   getNetworks() {
     return this.networks;
   }
 
-  async switchNetwork(network: AppKitNetwork): Promise<void> {
+  /**
+   * Switches to a different network.
+   * @param network - Either an AppKitNetwork object or a CAIP network ID string (e.g., 'eip155:1')
+   * @throws {Error} When the network is not found in configured networks
+   * @throws {Error} When no active adapter is available (only when connected)
+   * @returns Promise that resolves when the network switch is complete
+   */
+  async switchNetwork(network: AppKitNetwork | CaipNetworkId): Promise<void> {
     const { isConnected } = ConnectionsController.state;
 
+    const appKitNetwork =
+      typeof network === 'string' ? this.networks.find(n => n.caipNetworkId === network) : network;
+
+    if (!appKitNetwork) {
+      const error = new Error(`Network not found: ${network}`);
+      LogController.sendError(`Network not found: ${network}`, 'AppKit.ts', 'switchNetwork');
+
+      throw error;
+    }
+
     if (!isConnected) {
-      OptionsController.setDefaultNetwork(network);
+      OptionsController.setDefaultNetwork(appKitNetwork);
 
-      return Promise.resolve();
+      return;
     }
 
-    const adapter = this.getAdapterByNamespace(network.chainNamespace);
+    const adapter = this.getAdapterByNamespace(appKitNetwork.chainNamespace);
     if (!adapter) throw new Error('No active adapter');
 
-    await adapter.switchNetwork(network);
+    await adapter.switchNetwork(appKitNetwork);
 
     EventsController.sendEvent({
       type: 'track',
       event: 'SWITCH_NETWORK',
       properties: {
-        network: network.caipNetworkId
+        network: appKitNetwork.caipNetworkId
       }
     });
 
-    ConnectionsController.setActiveNetwork(network.chainNamespace, network.caipNetworkId);
+    ConnectionsController.setActiveNetwork(
+      appKitNetwork.chainNamespace,
+      appKitNetwork.caipNetworkId
+    );
   }
 
   open(options?: AppKitOpenOptions) {
@@ -308,6 +337,7 @@ export class AppKit {
 
     RouterUtil.checkOnRampBack();
     RouterUtil.checkSocialLoginBack();
+    EventsController.sendWalletImpressions();
   }
 
   back() {
@@ -634,12 +664,6 @@ export class AppKit {
       const namespace = adapter.getSupportedNamespace();
       const chain = `${namespace}:${chainId}` as CaipNetworkId;
 
-      const activeNetwork = ConnectionsController.getActiveNetworkId(namespace);
-      if (activeNetwork === chain) {
-        // No need to update the active network
-        return;
-      }
-
       ConnectionsController.setActiveNetwork(namespace, chain);
 
       const connection = ConnectionsController.state.connections.get(namespace);
@@ -692,10 +716,8 @@ export class AppKit {
     this.setCustomWallets(options);
     OptionsController.setFeaturedWalletIds(options.featuredWalletIds);
     OptionsController.setEnableAnalytics(options.enableAnalytics);
-    OptionsController.setDebug(options.debug && __DEV__);
+    OptionsController.setDebug(options.debug);
 
-    // Initialize LogController after debug option is set
-    LogController.initialize();
     LogController.sendInfo('AppKit initialization started', 'AppKit.ts', 'initControllers', {
       projectId: options.projectId,
       adapters: this.adapters.map(a => a.constructor.name),

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,35 @@ export function useAccount() {
     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
@@ -23,10 +108,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/useProvider.ts

@@ -1,7 +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, LogController } from '@reown/appkit-core-react-native';
 import type { Provider, ChainNamespace } from '@reown/appkit-common-react-native';
 
 /**
@@ -40,12 +40,21 @@ export function useProvider(): ProviderResult {
   const { connection } = useSnapshot(ConnectionsController.state);
 
   const returnValue = useMemo(() => {
-    if (!connection) return { provider: undefined, providerType: undefined };
+    if (!connection || !connection.adapter) {
+      return { provider: undefined, providerType: undefined };
+    }
 
-    return {
-      provider: connection.adapter.getProvider(),
-      providerType: connection.adapter.getSupportedNamespace()
-    };
+    try {
+      return {
+        provider: connection.adapter.getProvider(),
+        providerType: connection.adapter.getSupportedNamespace()
+      };
+    } catch (error) {
+      LogController.sendError(error, 'useProvider', 'useProvider');
+
+      // Provider not initialized yet during session restoration
+      return { provider: undefined, providerType: undefined };
+    }
   }, [connection]);
 
   return returnValue;

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-all-wallets-list/components/WalletList.tsx

@@ -1,4 +1,4 @@
-import { FlatList, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import { FlatList, StyleSheet, type StyleProp, type ViewStyle, type ViewToken } from 'react-native';
 import { WalletItem } from './WalletItem';
 import {
   CardSelectHeight,
@@ -7,8 +7,9 @@ import {
   CardSelectLoader,
   CardSelectWidth
 } from '@reown/appkit-ui-react-native';
-import { ApiController } from '@reown/appkit-core-react-native';
+import { ApiController, EventsController } from '@reown/appkit-core-react-native';
 import type { WcWallet } from '@reown/appkit-common-react-native';
+import { useCallback, useRef } from 'react';
 
 const imageHeaders = ApiController._getApiHeaders();
 
@@ -25,6 +26,7 @@ interface Props {
   loadingItems?: number;
   style?: StyleProp<ViewStyle>;
   testIDKey?: string;
+  searchQuery?: string;
 }
 
 export function WalletList({
@@ -35,15 +37,77 @@ export function WalletList({
   isLoading = false,
   loadingItems = 20,
   testIDKey,
-  style
+  style,
+  searchQuery
 }: Props) {
   const { padding, maxHeight } = useCustomDimensions();
+  const viewedWalletsRef = useRef<Set<string>>(new Set());
 
   // Create loading data if isLoading is true
   const displayData = isLoading
     ? Array.from({ length: loadingItems }, (_, index) => ({ id: `loading-${index}` }) as WcWallet)
     : data;
 
+  const keyExtractor = useCallback(
+    (item: WcWallet, index: number) => item?.id ?? `item-${index}`,
+    []
+  );
+
+  const getItemLayout = useCallback((_: any, index: number) => {
+    return {
+      length: ITEM_HEIGHT_WITH_GAP,
+      offset: ITEM_HEIGHT_WITH_GAP * index,
+      index
+    };
+  }, []);
+
+  const renderItem = useCallback(
+    ({ item, index }: { item: WcWallet; index: number }) => {
+      if (isLoading) {
+        return <CardSelectLoader style={styles.itemContainer} />;
+      }
+
+      return (
+        <WalletItem
+          item={item}
+          imageHeaders={imageHeaders}
+          displayIndex={index}
+          onItemPress={onItemPress}
+          style={styles.itemContainer}
+          testID={testIDKey ? `${testIDKey}-${item?.id}` : undefined}
+        />
+      );
+    },
+    [isLoading, onItemPress, testIDKey]
+  );
+
+  const onViewableItemsChanged = useCallback(
+    ({ viewableItems }: { viewableItems: ViewToken[] }) => {
+      if (isLoading) return;
+
+      viewableItems.forEach(({ item }, index) => {
+        const wallet = item as WcWallet;
+        if (wallet?.id && !viewedWalletsRef.current.has(wallet.id)) {
+          viewedWalletsRef.current.add(wallet.id);
+          const isInstalled = !!ApiController.state.installed.find(w => w?.id === item?.id);
+          EventsController.trackWalletImpression({
+            wallet,
+            view: 'AllWallets',
+            displayIndex: index,
+            query: searchQuery,
+            installed: isInstalled
+          });
+        }
+      });
+    },
+    [isLoading, searchQuery]
+  );
+
+  const viewabilityConfig = useRef({
+    itemVisiblePercentThreshold: 50, // Item is considered visible when 50% is visible
+    minimumViewTime: 100 // Must be visible for at least 100ms
+  }).current;
+
   return (
     <FlatList
       fadingEdgeLength={20}
@@ -52,34 +116,18 @@ export function WalletList({
       data={displayData}
       style={[styles.list, { height: maxHeight }, style]}
       columnWrapperStyle={styles.columnWrapperStyle}
-      renderItem={({ item, index }) => {
-        if (isLoading) {
-          return <CardSelectLoader style={styles.itemContainer} />;
-        }
-
-        return (
-          <WalletItem
-            item={item}
-            imageHeaders={imageHeaders}
-            displayIndex={index}
-            onItemPress={onItemPress}
-            style={styles.itemContainer}
-            testID={testIDKey ? `${testIDKey}-${item?.id}` : undefined}
-          />
-        );
-      }}
+      renderItem={renderItem}
       contentContainerStyle={[styles.contentContainer, { paddingHorizontal: padding }]}
       initialNumToRender={32}
       maxToRenderPerBatch={12}
       windowSize={10}
       onEndReached={onEndReached}
       onEndReachedThreshold={onEndReachedThreshold}
-      keyExtractor={(item, index) => item?.id ?? `item-${index}`}
-      getItemLayout={(_, index) => ({
-        length: ITEM_HEIGHT_WITH_GAP,
-        offset: ITEM_HEIGHT_WITH_GAP * index,
-        index
-      })}
+      keyExtractor={keyExtractor}
+      removeClippedSubviews={true}
+      getItemLayout={getItemLayout}
+      onViewableItemsChanged={onViewableItemsChanged}
+      viewabilityConfig={viewabilityConfig}
     />
   );
 }

package/src/partials/w3m-all-wallets-list/index.tsx

@@ -116,7 +116,7 @@ export function AllWalletsList({ onItemPress }: AllWalletsListProps) {
     <WalletList
       data={walletList}
       onEndReached={fetchNextPage}
-      onEndReachedThreshold={2}
+      onEndReachedThreshold={0.5}
       onItemPress={onItemPress}
     />
   );

package/src/partials/w3m-all-wallets-search/index.tsx

@@ -84,5 +84,12 @@ export function AllWalletsSearch({ searchQuery, onItemPress }: AllWalletsSearchP
     );
   }
 
-  return <WalletList onItemPress={onItemPress} data={results} testIDKey="wallet-search-item" />;
+  return (
+    <WalletList
+      onItemPress={onItemPress}
+      searchQuery={searchQuery}
+      data={results}
+      testIDKey="wallet-search-item"
+    />
+  );
 }

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-connect-view/components/all-wallet-list.tsx

@@ -4,6 +4,7 @@ import {
   ApiController,
   AssetController,
   AssetUtil,
+  EventsController,
   OptionsController,
   WcController,
   type WcControllerState
@@ -11,6 +12,7 @@ import {
 import { type WcWallet } from '@reown/appkit-common-react-native';
 import { ListItemLoader, ListWallet } from '@reown/appkit-ui-react-native';
 import { UiUtil } from '../../../utils/UiUtil';
+import { useEffect, useMemo, useRef } from 'react';
 
 interface Props {
   itemStyle: StyleProp<ViewStyle>;
@@ -24,18 +26,45 @@ export function AllWalletList({ itemStyle, onWalletPress }: Props) {
   const { walletImages } = useSnapshot(AssetController.state);
   const imageHeaders = ApiController._getApiHeaders();
 
-  const combinedWallets = [
-    ...(recentWallets?.slice(0, 1) ?? []),
-    ...installed,
-    ...featured,
-    ...recommended,
-    ...(customWallets ?? [])
-  ];
+  // Track which wallets have been tracked to prevent duplicates
+  const trackedWalletsRef = useRef<Set<string>>(new Set());
 
-  // Deduplicate by wallet ID
-  const list = Array.from(
-    new Map(combinedWallets.map(wallet => [wallet.id, wallet])).values()
-  ).slice(0, UiUtil.TOTAL_VISIBLE_WALLETS);
+  const list = useMemo(() => {
+    const combinedWallets = [
+      ...(recentWallets?.slice(0, 1) ?? []),
+      ...installed,
+      ...featured,
+      ...recommended,
+      ...(customWallets ?? [])
+    ];
+
+    // Deduplicate by wallet ID
+    return Array.from(new Map(combinedWallets.map(wallet => [wallet.id, wallet])).values()).slice(
+      0,
+      UiUtil.TOTAL_VISIBLE_WALLETS
+    );
+  }, [recentWallets, installed, featured, recommended, customWallets]);
+
+  // Track impressions once when the list stabilizes
+  useEffect(() => {
+    if (!prefetchLoading && list.length > 0) {
+      list.forEach((wallet, index) => {
+        if (!trackedWalletsRef.current.has(wallet.id)) {
+          trackedWalletsRef.current.add(wallet.id);
+          const isInstalled = !!ApiController.state.installed.find(
+            installedWallet => installedWallet.id === wallet.id
+          );
+          EventsController.trackWalletImpression({
+            wallet,
+            view: 'Connect',
+            displayIndex: index,
+            // eslint-disable-next-line valtio/state-snapshot-rule
+            installed: isInstalled
+          });
+        }
+      });
+    }
+  }, [prefetchLoading, list]);
 
   if (!list?.length) {
     return null;

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"