@reown/appkit-react-native 0.0.0-chore-added-import-20251002170458 → 0.0.0-develop-20251008155354

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,7 +256,15 @@ 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() {
@@ -308,6 +317,7 @@ export class AppKit {
 
     RouterUtil.checkOnRampBack();
     RouterUtil.checkSocialLoginBack();
+    EventsController.sendWalletImpressions();
   }
 
   back() {
@@ -634,12 +644,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 +696,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/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/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/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;