Merge branch 'main' into rn-upgrade/0.81.5-no-unit-tests

Author: adnxy

app/components/UI/Predict/components/PredictMarket/PredictMarket.tsx

@@ -12,13 +12,19 @@ interface PredictMarketProps {
   testID?: string;
   entryPoint?: PredictEntryPoint;
   isCarousel?: boolean;
+  /** Called synchronously before the card's navigation press fires. */
+  onCardPress?: () => void;
+  /** Called when the user taps a buy button (before betslip opens). */
+  onBuyButtonPress?: (marketId: string) => void;
 }
 
 const PredictMarket: React.FC<PredictMarketProps> = ({
   market,
   testID,
   entryPoint: propEntryPoint,
   isCarousel = false,
+  onCardPress,
+  onBuyButtonPress,
 }) => {
   const contextEntryPoint = usePredictEntryPoint();
   const entryPoint =
@@ -32,6 +38,8 @@ const PredictMarket: React.FC<PredictMarketProps> = ({
         testID={testID}
         entryPoint={entryPoint}
         isCarousel={isCarousel}
+        onCardPress={onCardPress}
+        onBuyButtonPress={onBuyButtonPress}
       />
     );
   }
@@ -43,6 +51,8 @@ const PredictMarket: React.FC<PredictMarketProps> = ({
         testID={testID}
         entryPoint={entryPoint}
         isCarousel={isCarousel}
+        onCardPress={onCardPress}
+        onBuyButtonPress={onBuyButtonPress}
       />
     );
   }
@@ -53,6 +63,8 @@ const PredictMarket: React.FC<PredictMarketProps> = ({
       testID={testID}
       entryPoint={entryPoint}
       isCarousel={isCarousel}
+      onCardPress={onCardPress}
+      onBuyButtonPress={onBuyButtonPress}
     />
   );
 };

app/components/UI/Predict/components/PredictMarketMultiple/PredictMarketMultiple.tsx

@@ -50,13 +50,19 @@ interface PredictMarketMultipleProps {
   testID?: string;
   entryPoint?: PredictEntryPoint;
   isCarousel?: boolean;
+  /** Called synchronously before the card's navigation press fires. */
+  onCardPress?: () => void;
+  /** Called when the user taps a buy button (before betslip opens). */
+  onBuyButtonPress?: (marketId: string) => void;
 }
 
 const PredictMarketMultiple: React.FC<PredictMarketMultipleProps> = ({
   market,
   testID,
   entryPoint: propEntryPoint,
   isCarousel = false,
+  onCardPress,
+  onBuyButtonPress,
 }) => {
   const contextEntryPoint = usePredictEntryPoint();
   const baseEntryPoint =
@@ -137,6 +143,7 @@ const PredictMarketMultiple: React.FC<PredictMarketMultipleProps> = ({
     outcome: PredictOutcome,
     outcomeToken: PredictOutcomeToken,
   ) => {
+    onBuyButtonPress?.(market.id);
     executeGuardedAction(
       () => {
         openBuySheet({
@@ -161,6 +168,7 @@ const PredictMarketMultiple: React.FC<PredictMarketMultipleProps> = ({
     <TouchableOpacity
       testID={testID}
       onPress={() => {
+        onCardPress?.();
         navigation.navigate(Routes.PREDICT.ROOT, {
           screen: Routes.PREDICT.MARKET_DETAILS,
           params: {

app/components/UI/Predict/components/PredictMarketSingle/PredictMarketSingle.tsx

@@ -128,13 +128,19 @@ interface PredictMarketSingleProps {
   testID?: string;
   entryPoint?: PredictEntryPoint;
   isCarousel?: boolean;
+  /** Called synchronously before the card's navigation press fires. */
+  onCardPress?: () => void;
+  /** Called when the user taps a buy button (before betslip opens). */
+  onBuyButtonPress?: (marketId: string) => void;
 }
 
 const PredictMarketSingle: React.FC<PredictMarketSingleProps> = ({
   market,
   testID,
   entryPoint: propEntryPoint,
   isCarousel = false,
+  onCardPress,
+  onBuyButtonPress,
 }) => {
   const contextEntryPoint = usePredictEntryPoint();
   const baseEntryPoint =
@@ -185,6 +191,7 @@ const PredictMarketSingle: React.FC<PredictMarketSingleProps> = ({
   const yesPercentage = getYesPercentage();
 
   const handleBuy = (token: PredictOutcomeToken) => {
+    onBuyButtonPress?.(market.id);
     executeGuardedAction(
       () => {
         openBuySheet({
@@ -204,6 +211,7 @@ const PredictMarketSingle: React.FC<PredictMarketSingleProps> = ({
     <TouchableOpacity
       testID={testID}
       onPress={() => {
+        onCardPress?.();
         navigation.navigate(Routes.PREDICT.ROOT, {
           screen: Routes.PREDICT.MARKET_DETAILS,
           params: {

app/components/UI/Predict/components/PredictMarketSportCard/PredictMarketSportCard.tsx

@@ -27,6 +27,10 @@ interface PredictMarketSportCardProps {
   entryPoint?: PredictEntryPoint;
   onDismiss?: () => void;
   isCarousel?: boolean;
+  /** Called synchronously before the card's navigation press fires. */
+  onCardPress?: () => void;
+  /** Called when the user taps a buy button (before betslip opens). */
+  onBuyButtonPress?: (marketId: string) => void;
 }
 
 const PredictMarketSportCard: React.FC<PredictMarketSportCardProps> = ({
@@ -35,6 +39,8 @@ const PredictMarketSportCard: React.FC<PredictMarketSportCardProps> = ({
   entryPoint: propEntryPoint,
   onDismiss,
   isCarousel,
+  onCardPress,
+  onBuyButtonPress,
 }) => {
   const tw = useTailwind();
   const contextEntryPoint = usePredictEntryPoint();
@@ -57,6 +63,7 @@ const PredictMarketSportCard: React.FC<PredictMarketSportCardProps> = ({
       style={tw.style(isCarousel ? '' : 'my-[8px]')}
       testID={testID}
       onPress={() => {
+        onCardPress?.();
         navigation.navigate(Routes.PREDICT.ROOT, {
           screen: Routes.PREDICT.MARKET_DETAILS,
           params: {
@@ -102,6 +109,7 @@ const PredictMarketSportCard: React.FC<PredictMarketSportCardProps> = ({
             entryPoint={resolvedEntryPoint}
             testID={testID ? `${testID}-footer` : undefined}
             isCarousel={isCarousel}
+            onBuyButtonPress={onBuyButtonPress}
           />
         </Box>
       </Box>

app/components/UI/Predict/components/PredictSportCardFooter/PredictSportCardFooter.tsx

@@ -27,13 +27,16 @@ interface PredictSportCardFooterProps {
   testID?: string;
   entryPoint?: PredictEntryPoint;
   isCarousel?: boolean;
+  /** Called when the user taps a buy button (before betslip opens). */
+  onBuyButtonPress?: (marketId: string) => void;
 }
 
 const PredictSportCardFooter: React.FC<PredictSportCardFooterProps> = ({
   market,
   testID,
   entryPoint: propEntryPoint,
   isCarousel,
+  onBuyButtonPress,
 }) => {
   const tw = useTailwind();
   const navigation =
@@ -82,6 +85,7 @@ const PredictSportCardFooter: React.FC<PredictSportCardFooterProps> = ({
           ),
         ) ?? market.outcomes?.[0];
 
+      onBuyButtonPress?.(market.id);
       executeGuardedAction(
         () => {
           openBuySheet({
@@ -96,7 +100,13 @@ const PredictSportCardFooter: React.FC<PredictSportCardFooterProps> = ({
         },
       );
     },
-    [executeGuardedAction, resolvedEntryPoint, openBuySheet, market],
+    [
+      executeGuardedAction,
+      resolvedEntryPoint,
+      openBuySheet,
+      market,
+      onBuyButtonPress,
+    ],
   );
 
   const handleClaimPress = useCallback(async () => {

app/components/UI/Trending/components/TrendingTokenRowItem/TrendingTokenRowItem.tsx

@@ -72,6 +72,11 @@ interface TrendingTokenRowItemProps {
    * asset details screen (including network-add logic and analytics tracking).
    */
   onPress?: (token: TrendingAsset) => void;
+  /**
+   * Called synchronously before the card's press handler fires.
+   * Useful for injecting analytics without overriding navigation.
+   */
+  onCardPress?: () => void;
   /**
    * When the same token row appears in multiple Explore sections, set this to keep
    * `testID` (and E2E selectors) unique per instance.
@@ -126,6 +131,7 @@ const TrendingTokenRowItem = ({
   tokenDetailsSource = TokenDetailsSource.Trending,
   transactionActiveAbTests,
   onPress,
+  onCardPress,
   testIdInstanceKey,
 }: TrendingTokenRowItemProps) => {
   const { styles } = useStyles(styleSheet, {});
@@ -165,12 +171,13 @@ const TrendingTokenRowItem = ({
   });
 
   const handlePress = useCallback(async () => {
+    onCardPress?.();
     if (onPress) {
       onPress(token);
       return;
     }
     await defaultOnPress();
-  }, [onPress, token, defaultOnPress]);
+  }, [onPress, onCardPress, token, defaultOnPress]);
 
   const rowTestId = testIdInstanceKey
     ? `trending-token-row-item-${testIdInstanceKey}-${token.assetId}`

app/components/Views/TrendingView/TrendingView.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { TouchableOpacity } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useNavigation } from '@react-navigation/native';
@@ -33,6 +33,19 @@ import SportsTab from './tabs/SportsTab';
 import DappsTab from './tabs/DappsTab';
 import { TrendingViewSelectorsIDs } from './TrendingView.testIds';
 import ExplorePageV1 from './ExplorePageV1';
+import {
+  trackExploreInteracted,
+  type ExploreTabName,
+} from './search/analytics';
+
+const TAB_NAMES: ExploreTabName[] = [
+  'Now',
+  'Macro',
+  'RWAs',
+  'Crypto',
+  'Sports',
+  'Sites',
+];
 
 export const ExploreFeed: React.FC = () => {
   const tw = useTailwind();
@@ -89,6 +102,19 @@ export const ExploreFeed: React.FC = () => {
     navigation.navigate(Routes.EXPLORE_SEARCH);
   }, [navigation]);
 
+  const previousTabRef = useRef<ExploreTabName>('Now');
+
+  const handleTabChange = useCallback(({ i }: { i: number }) => {
+    const destinationTab = TAB_NAMES[i];
+    if (!destinationTab) return;
+    trackExploreInteracted({
+      interaction_type: 'tab_switched',
+      tab_name: destinationTab,
+      previous_tab: previousTabRef.current,
+    });
+    previousTabRef.current = destinationTab;
+  }, []);
+
   return (
     <SafeAreaView
       edges={{ top: 'additive' }}
@@ -123,7 +149,10 @@ export const ExploreFeed: React.FC = () => {
         {!isBasicFunctionalityEnabled ? (
           <BasicFunctionalityEmptyState />
         ) : isExplorePageV2Enabled ? (
-          <TabsList tabsListContentTwClassName="px-0 pb-3">
+          <TabsList
+            tabsListContentTwClassName="px-0 pb-3"
+            onChangeTab={handleTabChange}
+          >
             <Box
               key="now"
               twClassName="flex-1"

app/components/Views/TrendingView/components/SectionHeader.tsx

@@ -1,42 +1,66 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import {
   Text,
   TextVariant,
   TextColor,
 } from '@metamask/design-system-react-native';
 import BaseSectionHeader from '../../../../component-library/components-temp/SectionHeader';
+import {
+  trackExploreInteracted,
+  type ExploreTabName,
+  type ExploreSectionName,
+} from '../search/analytics';
 
 export interface SectionHeaderProps {
   title: string;
   subtitle?: string;
   /** When provided, the title becomes tappable with a trailing chevron. */
   onViewAll?: () => void;
   testID?: string;
+  /** Tab context for analytics — required when onViewAll is set. */
+  tabName?: ExploreTabName;
+  /** Section context for analytics — required when onViewAll is set. */
+  sectionName?: ExploreSectionName;
 }
 
 const SectionHeader: React.FC<SectionHeaderProps> = ({
   title,
   subtitle,
   onViewAll,
   testID,
-}) => (
-  <>
-    <BaseSectionHeader
-      testID={testID}
-      title={title}
-      onPress={onViewAll}
-      twClassName={`px-0 ${subtitle ? 'mb-0.5' : 'mb-2'}`}
-    />
-    {subtitle && (
-      <Text
-        variant={TextVariant.BodySm}
-        color={TextColor.TextAlternative}
-        twClassName="mt-1"
-      >
-        {subtitle}
-      </Text>
-    )}
-  </>
-);
+  tabName,
+  sectionName,
+}) => {
+  const handleViewAll = useCallback(() => {
+    if (tabName && sectionName) {
+      trackExploreInteracted({
+        interaction_type: 'section_see_all_tapped',
+        tab_name: tabName,
+        section_name: sectionName,
+      });
+    }
+    onViewAll?.();
+  }, [onViewAll, tabName, sectionName]);
+
+  return (
+    <>
+      <BaseSectionHeader
+        testID={testID}
+        title={title}
+        onPress={onViewAll ? handleViewAll : undefined}
+        twClassName={`px-0 ${subtitle ? 'mb-0.5' : 'mb-2'}`}
+      />
+      {subtitle && (
+        <Text
+          variant={TextVariant.BodySm}
+          color={TextColor.TextAlternative}
+          twClassName="mt-1"
+        >
+          {subtitle}
+        </Text>
+      )}
+    </>
+  );
+};
 
 export default SectionHeader;

app/components/Views/TrendingView/feeds/dapps/SiteTileRowItem.tsx

@@ -55,17 +55,23 @@ const styleSheet = ({ theme }: { theme: Theme }) =>
 
 interface SiteTileRowItemProps {
   site: SiteData;
+  /** Called synchronously before the card's navigation press fires. */
+  onCardPress?: () => void;
 }
 
 /**
  * Compact tile (icon, title, url) for Explore "Recents" / "Networks" carousels.
  */
-const SiteTileRowItem: React.FC<SiteTileRowItemProps> = ({ site }) => {
+const SiteTileRowItem: React.FC<SiteTileRowItemProps> = ({
+  site,
+  onCardPress,
+}) => {
   const navigation = useNavigation<AppNavigationProp>();
   const { styles } = useStyles(styleSheet);
   const tw = useTailwind();
 
   const onPress = () => {
+    onCardPress?.();
     navigation.navigate(Routes.BROWSER.HOME, {
       screen: Routes.BROWSER.VIEW,
       params: {