chore: added metrics

Author: juanmigdr

app/components/Views/TrendingView/Views/ExploreSectionResultsFullView/ExploreSectionResultsFullView.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useRef } from 'react';
 import { Platform } from 'react-native';
 import { FlashList, ListRenderItem } from '@shopify/flash-list';
 import { useNavigation, useRoute, RouteProp } from '@react-navigation/native';
@@ -16,6 +16,8 @@ import {
   FontWeight,
 } from '@metamask/design-system-react-native';
 import { SECTIONS_CONFIG, type SectionId } from '../../sections.config';
+import { MetaMetricsEvents } from '../../../../../core/Analytics/MetaMetrics.events';
+import { TapView, trackExploreEvent } from '../../utils/exploreSearch';
 
 // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
 type ExploreSectionResultsFullViewParams = {
@@ -38,21 +40,47 @@ const SectionContent: React.FC<SectionContentProps> = ({
   const tw = useTailwind();
   const navigation = useNavigation();
   const section = SECTIONS_CONFIG[sectionId];
+  const hasScrollTracked = useRef(false);
 
   const { data, isLoading } = section.useSectionData(searchQuery);
 
+  const handleScroll = useCallback(() => {
+    if (hasScrollTracked.current) return;
+    hasScrollTracked.current = true;
+    trackExploreEvent(MetaMetricsEvents.EXPLORE_SEARCH_VIEW_ALL_SCROLLED, {
+      searchQuery,
+      sectionName: section.title,
+    });
+  }, [searchQuery, section.title]);
+
   const renderItem: ListRenderItem<unknown> = useCallback(
     ({ item, index }) => {
       const RowItemComponent = section.OverrideRowItemSearch ?? section.RowItem;
+      const { getItemIdentifier } = section;
+      const handleItemTouch = getItemIdentifier
+        ? () => {
+            trackExploreEvent(
+              MetaMetricsEvents.EXPLORE_SEARCH_VIEW_ALL_ITEM_CLICKED,
+              {
+                searchQuery,
+                sectionName: section.title,
+                itemClicked: getItemIdentifier(item),
+              },
+            );
+          }
+        : undefined;
+
       return (
-        <RowItemComponent
-          item={item}
-          index={index}
-          navigation={navigation as never}
-        />
+        <TapView onTap={handleItemTouch}>
+          <RowItemComponent
+            item={item}
+            index={index}
+            navigation={navigation as never}
+          />
+        </TapView>
       );
     },
-    [section, navigation],
+    [section, navigation, searchQuery],
   );
 
   const keyExtractor = useCallback(
@@ -79,6 +107,8 @@ const SectionContent: React.FC<SectionContentProps> = ({
       keyExtractor={keyExtractor}
       contentContainerStyle={tw.style('px-4')}
       showsVerticalScrollIndicator={false}
+      onScroll={handleScroll}
+      scrollEventThrottle={400}
     />
   );
 };

app/components/Views/TrendingView/components/ExploreSearchResults/ExploreSearchResults.tsx

@@ -17,6 +17,8 @@ import {
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import { Pressable } from 'react-native';
 import { SECTIONS_CONFIG, type SectionId } from '../../sections.config';
+import { MetaMetricsEvents } from '../../../../../core/Analytics/MetaMetrics.events';
+import { TapView, trackExploreEvent } from '../../utils/exploreSearch';
 import { useExploreSearch } from '../../hooks/useExploreSearch';
 import { selectBasicFunctionalityEnabled } from '../../../../../selectors/settings';
 import SitesSearchFooter from '../../../../UI/Sites/components/SitesSearchFooter/SitesSearchFooter';
@@ -64,8 +66,14 @@ const ExploreSearchResults: React.FC<ExploreSearchResultsProps> = ({
     selectBasicFunctionalityEnabled,
   );
 
+  const hasScrollTracked = useRef(false);
+
   const handleViewMore = useCallback(
     (sectionId: SectionId, title: string) => {
+      trackExploreEvent(MetaMetricsEvents.EXPLORE_SEARCH_VIEW_ALL_CLICKED, {
+        searchQuery,
+        sectionName: title,
+      });
       (
         navigation as never as {
           navigate: (
@@ -86,6 +94,18 @@ const ExploreSearchResults: React.FC<ExploreSearchResultsProps> = ({
     [navigation, searchQuery],
   );
 
+  const handleScroll = useCallback(() => {
+    if (hasScrollTracked.current) return;
+    hasScrollTracked.current = true;
+    trackExploreEvent(MetaMetricsEvents.EXPLORE_SEARCH_SCROLLED, {
+      searchQuery,
+    });
+  }, [searchQuery]);
+
+  useEffect(() => {
+    hasScrollTracked.current = false;
+  }, [searchQuery]);
+
   const renderSectionHeader = useCallback(
     (item: ListItemHeader) => (
       <Box
@@ -213,25 +233,29 @@ const ExploreSearchResults: React.FC<ExploreSearchResultsProps> = ({
         return <section.Skeleton />;
       }
 
-      if (section.OverrideRowItemSearch) {
-        return (
-          <section.OverrideRowItemSearch
+      const RowComponent = section.OverrideRowItemSearch ?? section.RowItem;
+      const { getItemIdentifier } = section;
+      const handleItemTouch = getItemIdentifier
+        ? () => {
+            trackExploreEvent(MetaMetricsEvents.EXPLORE_SEARCH_RESULT_CLICKED, {
+              searchQuery,
+              sectionName: section.title,
+              itemClicked: getItemIdentifier(item.data),
+            });
+          }
+        : undefined;
+
+      return (
+        <TapView onTap={handleItemTouch}>
+          <RowComponent
             item={item.data}
             index={index}
             navigation={navigation}
           />
-        );
-      }
-
-      return (
-        <section.RowItem
-          item={item.data}
-          index={index}
-          navigation={navigation}
-        />
+        </TapView>
       );
     },
-    [navigation, renderSectionHeader],
+    [navigation, renderSectionHeader, searchQuery],
   );
 
   const keyExtractor = useCallback((item: FlatListItem, index: number) => {
@@ -256,6 +280,8 @@ const ExploreSearchResults: React.FC<ExploreSearchResultsProps> = ({
         keyboardShouldPersistTaps="handled"
         testID="trending-search-results-list"
         ListFooterComponent={renderFooter}
+        onScroll={handleScroll}
+        scrollEventThrottle={400}
       />
     </Box>
   );

app/components/Views/TrendingView/sections.config.tsx

@@ -55,6 +55,8 @@ interface SectionConfig {
   title: string;
   icon: SectionIcon;
   viewAllAction: (navigation: NavigationProp<ParamListBase>) => void;
+  /** Returns a stable identifier for an item (e.g. assetId, symbol, url) used in analytics */
+  getItemIdentifier?: (item: unknown) => string;
   RowItem: React.ComponentType<{
     item: unknown;
     index: number;
@@ -171,6 +173,7 @@ export const SECTIONS_CONFIG: Record<SectionId, SectionConfig> = {
     viewAllAction: (navigation) => {
       navigation.navigate(Routes.WALLET.TRENDING_TOKENS_FULL_VIEW);
     },
+    getItemIdentifier: (item) => (item as TrendingAsset).assetId,
     RowItem: ({ item, index }) => (
       <TrendingTokenRowItem
         token={item as TrendingAsset}
@@ -219,6 +222,7 @@ export const SECTIONS_CONFIG: Record<SectionId, SectionConfig> = {
         },
       });
     },
+    getItemIdentifier: (item) => (item as PerpsMarketData).symbol,
     RowItem: ({ item, index: _index, navigation }) => (
       <PerpsMarketRowItem
         market={item as PerpsMarketData}
@@ -273,6 +277,7 @@ export const SECTIONS_CONFIG: Record<SectionId, SectionConfig> = {
     viewAllAction: (navigation) => {
       navigation.navigate(Routes.WALLET.RWA_TOKENS_FULL_VIEW);
     },
+    getItemIdentifier: (item) => (item as TrendingAsset).assetId,
     RowItem: ({ item, index }) => (
       <TrendingTokenRowItem
         token={item as TrendingAsset}
@@ -303,6 +308,7 @@ export const SECTIONS_CONFIG: Record<SectionId, SectionConfig> = {
         screen: Routes.PREDICT.MARKET_LIST,
       });
     },
+    getItemIdentifier: (item) => (item as PredictMarketType).id,
     RowItem: ({ item, index: _index }) => (
       <PredictMarketRowItem market={item as PredictMarketType} />
     ),
@@ -335,6 +341,7 @@ export const SECTIONS_CONFIG: Record<SectionId, SectionConfig> = {
     viewAllAction: (navigation) => {
       navigation.navigate(Routes.SITES_FULL_VIEW);
     },
+    getItemIdentifier: (item) => (item as SiteData).url,
     RowItem: ({ item, index: _index, navigation }) => (
       <SiteRowItemWrapper site={item as SiteData} navigation={navigation} />
     ),

app/components/Views/TrendingView/utils/exploreSearch.tsx

@@ -0,0 +1,59 @@
+import React, { useRef } from 'react';
+import { View } from 'react-native';
+import type { IMetaMetricsEvent } from '../../../../core/Analytics/MetaMetrics.types';
+import { analytics } from '../../../../util/analytics/analytics';
+import { AnalyticsEventBuilder } from '../../../../util/analytics/AnalyticsEventBuilder';
+
+/**
+ * Minimum vertical movement (in pixels) to consider a touch gesture a scroll
+ * rather than a tap. Absorbs micro-jitter from real taps while staying far
+ * below any intentional scroll distance.
+ */
+const SCROLL_THRESHOLD = 8;
+
+/**
+ * Wraps children and fires `onTap` only when the touch ends without a scroll
+ * gesture. Uses raw touch events (onTouchStart/Move/End) which fire
+ * independently of the scroll responder system, so movement is reliably
+ * detected even while a parent FlashList is absorbing a scroll.
+ */
+export const TapView: React.FC<{
+  onTap?: () => void;
+  children: React.ReactNode;
+}> = ({ onTap, children }) => {
+  const startY = useRef(0);
+  const didScroll = useRef(false);
+  return (
+    <View
+      onTouchStart={(e) => {
+        startY.current = e.nativeEvent.pageY;
+        didScroll.current = false;
+      }}
+      onTouchMove={(e) => {
+        if (Math.abs(e.nativeEvent.pageY - startY.current) > SCROLL_THRESHOLD) {
+          didScroll.current = true;
+        }
+      }}
+      onTouchEnd={() => {
+        if (!didScroll.current) onTap?.();
+      }}
+    >
+      {children}
+    </View>
+  );
+};
+
+/**
+ * Thin wrapper around the analytics event builder pattern.
+ * Reduces the 5-line boilerplate at every call site to a single line.
+ */
+export const trackExploreEvent = (
+  event: IMetaMetricsEvent,
+  properties: Record<string, string>,
+): void => {
+  analytics.trackEvent(
+    AnalyticsEventBuilder.createEventBuilder(event)
+      .addProperties(properties)
+      .build(),
+  );
+};

app/core/Analytics/MetaMetrics.events.ts

@@ -623,6 +623,13 @@ enum EVENT_NAME {
   // Trending
   TRENDING_FEED_VIEWED = 'Trending Feed Viewed',
 
+  // Explore Search
+  EXPLORE_SEARCH_VIEW_ALL_CLICKED = 'Explore Search View All Clicked',
+  EXPLORE_SEARCH_RESULT_CLICKED = 'Explore Search Result Clicked',
+  EXPLORE_SEARCH_VIEW_ALL_ITEM_CLICKED = 'Explore Search View All Item Clicked',
+  EXPLORE_SEARCH_SCROLLED = 'Explore Search Scrolled',
+  EXPLORE_SEARCH_VIEW_ALL_SCROLLED = 'Explore Search View All Scrolled',
+
   // Market Insights
   MARKET_INSIGHTS_OPENED = 'Market Insights Opened',
   MARKET_INSIGHTS_VIEWED = 'Market Insights Viewed',
@@ -1655,6 +1662,20 @@ const events = {
 
   TRENDING_FEED_VIEWED: generateOpt(EVENT_NAME.TRENDING_FEED_VIEWED),
 
+  EXPLORE_SEARCH_VIEW_ALL_CLICKED: generateOpt(
+    EVENT_NAME.EXPLORE_SEARCH_VIEW_ALL_CLICKED,
+  ),
+  EXPLORE_SEARCH_RESULT_CLICKED: generateOpt(
+    EVENT_NAME.EXPLORE_SEARCH_RESULT_CLICKED,
+  ),
+  EXPLORE_SEARCH_VIEW_ALL_ITEM_CLICKED: generateOpt(
+    EVENT_NAME.EXPLORE_SEARCH_VIEW_ALL_ITEM_CLICKED,
+  ),
+  EXPLORE_SEARCH_SCROLLED: generateOpt(EVENT_NAME.EXPLORE_SEARCH_SCROLLED),
+  EXPLORE_SEARCH_VIEW_ALL_SCROLLED: generateOpt(
+    EVENT_NAME.EXPLORE_SEARCH_VIEW_ALL_SCROLLED,
+  ),
+
   // Share
   SHARE_ACTION: generateOpt(EVENT_NAME.SHARE_ACTION),