chore: add sentry tracing to ai market insights (#26583)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

Adds Sentry performance tracing to Market Insights to measure load times
for two key user flows:

MarketInsightsEntryCardLoad — Measures the time from when a token
details page starts rendering to when the Market Insights entry card
mounts. Uses the asset's CAIP-19 ID as the trace id so rapid token
switching doesn't cause trace collisions.

MarketInsightsViewLoad — Measures the time from when the user taps the
entry card to when the full Market Insights view renders with report
data. Includes an unmount cleanup to end the trace if the user navigates
away before the report loads.

Both traces use a new TraceOperation.MarketInsightsLoad
(market_insights.load) operation for easy filtering in Sentry.


## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry:


## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [ ] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.


<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Low risk instrumentation-only change, but it touches token details
rendering and navigation flows and could create noisy traces if the
start/end pairing is missed in edge cases.
> 
> **Overview**
> Adds two new Sentry traces for Market Insights load performance:
`MarketInsightsEntryCardLoad` (token details render -> entry card mount)
and `MarketInsightsViewLoad` (entry card tap -> report displayed).
> 
> Starts traces from `AssetOverviewContent` using a new
`TraceOperation.MarketInsightsLoad`, passes `caip19Id` into
`MarketInsightsEntryCard` to end the matching trace on mount, and ends
the view-load trace in `MarketInsightsView` once report data is
available. Updates the entry card prop types and tests to include the
required `caip19Id`.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
8f6ebb8. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: joaosantos15

app/components/UI/MarketInsights/Views/MarketInsightsView/MarketInsightsView.tsx

@@ -50,6 +50,7 @@ import type {
   MarketInsightsTrend,
 } from '@metamask/ai-controllers';
 import { selectMarketInsightsEnabled } from '../../../../../selectors/featureFlagController/marketInsights';
+import { endTrace, TraceName } from '../../../../../util/trace';
 import { Skeleton } from '../../../../../component-library/components/Skeleton';
 import { MetaMetricsEvents } from '../../../../hooks/useMetrics';
 import {
@@ -476,6 +477,8 @@ const MarketInsightsView: React.FC = () => {
       return;
     }
 
+    endTrace({ name: TraceName.MarketInsightsViewLoad });
+
     const event = createEventBuilder(MetaMetricsEvents.MARKET_INSIGHTS_VIEWED)
       .addProperties({
         caip19: caip19Id,

app/components/UI/MarketInsights/components/MarketInsightsEntryCard/MarketInsightsEntryCard.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Image } from 'react-native';
 import { fireEvent } from '@testing-library/react-native';
+import type { CaipAssetType } from '@metamask/utils';
 import renderWithProvider from '../../../../../util/test/renderWithProvider';
 import MarketInsightsEntryCard from './MarketInsightsEntryCard';
 
@@ -20,6 +21,7 @@ describe('MarketInsightsEntryCard', () => {
         report={report as never}
         timeAgo="3m ago"
         onPress={mockPress}
+        caip19Id={'eip155:1/erc20:0xtest' as CaipAssetType}
         testID="market-insights-entry-card"
       />,
     );
@@ -61,6 +63,7 @@ describe('MarketInsightsEntryCard', () => {
         report={report as never}
         timeAgo="1m ago"
         onPress={jest.fn()}
+        caip19Id={'eip155:1/erc20:0xtest' as CaipAssetType}
         testID="market-insights-entry-card"
       />,
     );

app/components/UI/MarketInsights/components/MarketInsightsEntryCard/MarketInsightsEntryCard.tsx

@@ -17,6 +17,7 @@ import {
 import type { MarketInsightsSource } from '@metamask/ai-controllers';
 import { strings } from '../../../../../../locales/i18n';
 import type { MarketInsightsEntryCardProps } from './MarketInsightsEntryCard.types';
+import { endTrace, TraceName } from '../../../../../util/trace';
 import { getFaviconUrl } from '../../utils/marketInsightsFormatting';
 
 const MAX_VISIBLE_SOURCE_LOGOS = 3;
@@ -104,10 +105,20 @@ const MarketInsightsEntryCard: React.FC<MarketInsightsEntryCardProps> = ({
   report,
   timeAgo,
   onPress,
+  caip19Id,
   testID,
 }) => {
   const tw = useTailwind();
 
+  useEffect(() => {
+    // End the trace started by the parent (AssetOverviewContent) to measure
+    // how long it takes for the entry card to mount after navigation.
+    endTrace({
+      name: TraceName.MarketInsightsEntryCardLoad,
+      id: caip19Id,
+    });
+  }, [caip19Id]);
+
   return (
     <Pressable
       onPress={onPress}

app/components/UI/MarketInsights/components/MarketInsightsEntryCard/MarketInsightsEntryCard.types.ts

@@ -1,4 +1,5 @@
 import type { MarketInsightsReport } from '@metamask/ai-controllers';
+import type { CaipAssetType } from '@metamask/utils';
 
 export interface MarketInsightsEntryCardProps {
   /** The market insights report data */
@@ -7,6 +8,8 @@ export interface MarketInsightsEntryCardProps {
   timeAgo: string;
   /** Callback when the card is pressed to open the full view */
   onPress: () => void;
+  /** The CAIP-19 asset ID, used to match the trace started by the parent */
+  caip19Id: CaipAssetType;
   /** Optional test ID */
   testID?: string;
 }

app/components/UI/TokenDetails/components/AssetOverviewContent.tsx

@@ -68,6 +68,7 @@ import { IconName } from '../../../../component-library/components/Icons/Icon';
 import { useRWAToken } from '../../Bridge/hooks/useRWAToken';
 import { BridgeToken } from '../../Bridge/types';
 import { useAnalytics } from '../../../hooks/useAnalytics/useAnalytics';
+import { trace, TraceName, TraceOperation } from '../../../../util/trace';
 
 const styleSheet = (params: { theme: Theme }) => {
   const { theme } = params;
@@ -309,6 +310,23 @@ const AssetOverviewContent: React.FC<AssetOverviewContentProps> = ({
     marketInsightsReport,
   ]);
 
+  // Start the entry card trace synchronously during render so it is registered
+  // in the trace map before any child useEffect (where endTrace fires) runs.
+  // Using a ref guard ensures we only start one trace per unique asset.
+  const entryCardTraceStartedRef = useRef<string | null>(null);
+  if (
+    isMarketInsightsEnabled &&
+    marketInsightsCaip19Id &&
+    entryCardTraceStartedRef.current !== marketInsightsCaip19Id
+  ) {
+    entryCardTraceStartedRef.current = marketInsightsCaip19Id;
+    trace({
+      name: TraceName.MarketInsightsEntryCardLoad,
+      op: TraceOperation.MarketInsightsLoad,
+      id: marketInsightsCaip19Id,
+    });
+  }
+
   const goToBrowserUrl = (url: string) => {
     const [screen, params] = createWebviewNavDetails({
       url,
@@ -318,6 +336,10 @@ const AssetOverviewContent: React.FC<AssetOverviewContentProps> = ({
 
   const handleMarketInsightsPress = useCallback(() => {
     if (marketInsightsCaip19Id) {
+      trace({
+        name: TraceName.MarketInsightsViewLoad,
+        op: TraceOperation.MarketInsightsLoad,
+      });
       const event = createEventBuilder(MetaMetricsEvents.MARKET_INSIGHTS_OPENED)
         .addProperties({
           caip19: marketInsightsCaip19Id,
@@ -502,12 +524,15 @@ const AssetOverviewContent: React.FC<AssetOverviewContentProps> = ({
             )
             ///: END:ONLY_INCLUDE_IF
           }
-          {isMarketInsightsEnabled && marketInsightsReport ? (
+          {isMarketInsightsEnabled &&
+          marketInsightsReport &&
+          marketInsightsCaip19Id ? (
             <View style={styles.marketInsightsWrapper}>
               <MarketInsightsEntryCard
                 report={marketInsightsReport}
                 timeAgo={marketInsightsTimeAgo}
                 onPress={handleMarketInsightsPress}
+                caip19Id={marketInsightsCaip19Id}
                 testID="market-insights-entry-card"
               />
             </View>

app/util/trace.ts

@@ -207,6 +207,9 @@ export enum TraceName {
   MusdConversionNavigation = 'mUSD Conversion Navigation',
   MusdConversionQuote = 'mUSD Conversion Quote',
   MusdConversionConfirm = 'mUSD Conversion Confirm',
+  // Market Insights
+  MarketInsightsEntryCardLoad = 'Market Insights Entry Card Load',
+  MarketInsightsViewLoad = 'Market Insights View Load',
 }
 
 export enum TraceOperation {
@@ -255,6 +258,8 @@ export enum TraceOperation {
   // mUSD Conversion
   MusdConversionOperation = 'musd.conversion.operation',
   MusdConversionDataFetch = 'musd.conversion.data_fetch',
+  // Market Insights
+  MarketInsightsLoad = 'market_insights.load',
 }
 
 const ID_DEFAULT = 'default';