Merge pull request #475 from reown-com/chore/wallet-impression

chore: wallet impression event

Author: ignaciosantise

packages/appkit/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(
@@ -308,6 +309,7 @@ export class AppKit {
 
     RouterUtil.checkOnRampBack();
     RouterUtil.checkSocialLoginBack();
+    EventsController.sendWalletImpressions();
   }
 
   back() {

packages/appkit/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}
     />
   );
 }

packages/appkit/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}
     />
   );

packages/appkit/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"
+    />
+  );
 }

packages/appkit/src/views/w3m-connect-view/components/all-wallet-list.tsx

@@ -4,13 +4,15 @@ import {
   ApiController,
   AssetController,
   AssetUtil,
+  EventsController,
   OptionsController,
   WcController,
   type WcControllerState
 } from '@reown/appkit-core-react-native';
 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;

packages/common/src/types/api/events.ts

@@ -10,11 +10,23 @@ import type {
 import type { Features } from '../ui';
 import type { Metadata } from '../wallet';
 
+export type WalletImpressionItem = {
+  name: string;
+  walletRank: number | undefined;
+  explorerId: string;
+  view: 'Connect' | 'AllWallets';
+  displayIndex?: number;
+  query?: string;
+  certified?: boolean;
+  installed?: boolean;
+};
+
 export type EventName =
   | 'MODAL_LOADED'
   | 'MODAL_OPEN'
   | 'MODAL_CLOSE'
   | 'INITIALIZE'
+  | 'WALLET_IMPRESSION'
   | 'CLICK_ALL_WALLETS'
   | 'CLICK_NETWORKS'
   | 'SWITCH_NETWORK'
@@ -442,4 +454,9 @@ export type Event =
       properties?: {
         message?: string;
       };
+    }
+  | {
+      type: 'track';
+      event: 'WALLET_IMPRESSION';
+      items: Array<WalletImpressionItem>;
     };