From b418caea38c63f18f7fa8ac8cb1f0ed3069a39c8 Mon Sep 17 00:00:00 2001
From: Antonio Regadas <antonio.regadas@consensys.net>
Date: Fri, 8 May 2026 11:12:24 +0100
Subject: [PATCH 1/8] chore: adds several improvements to the UI

---
 .../components/AssetRow.test.tsx              | 169 ++++++++++++++
 .../components/AssetRow.tsx                   |  76 ++++++-
 .../components/PageIndicator.test.tsx         |  27 +++
 .../components/PageIndicator.tsx              |   2 +-
 .../components/PerpsRow.test.tsx              |  92 +++++++-
 .../components/PerpsRow.tsx                   |  31 ++-
 .../components/TokenRow.test.tsx              |  91 +++++++-
 .../components/TokenRow.tsx                   |  59 ++++-
 .../WhatsHappeningExpandedCard.test.tsx       |  61 ++++-
 .../components/WhatsHappeningExpandedCard.tsx |  52 ++++-
 .../useWhatsHappeningAssetPrices.test.ts      | 213 ++++++++++++++++++
 .../hooks/useWhatsHappeningAssetPrices.ts     | 145 ++++++++++++
 .../utils/formatAssetPrice.test.ts            | 106 +++++++++
 .../utils/formatAssetPrice.ts                 |  74 ++++++
 ios/MetaMask.xcodeproj/project.pbxproj        |   8 +-
 15 files changed, 1156 insertions(+), 50 deletions(-)
 create mode 100644 app/components/Views/WhatsHappeningDetailView/components/AssetRow.test.tsx
 create mode 100644 app/components/Views/WhatsHappeningDetailView/hooks/useWhatsHappeningAssetPrices.test.ts
 create mode 100644 app/components/Views/WhatsHappeningDetailView/hooks/useWhatsHappeningAssetPrices.ts
 create mode 100644 app/components/Views/WhatsHappeningDetailView/utils/formatAssetPrice.test.ts
 create mode 100644 app/components/Views/WhatsHappeningDetailView/utils/formatAssetPrice.ts

diff --git a/app/components/Views/WhatsHappeningDetailView/components/AssetRow.test.tsx b/app/components/Views/WhatsHappeningDetailView/components/AssetRow.test.tsx
new file mode 100644
index 00000000000..a0534be7b67
--- /dev/null
+++ b/app/components/Views/WhatsHappeningDetailView/components/AssetRow.test.tsx
@@ -0,0 +1,169 @@
+import React from 'react';
+import { screen, fireEvent } from '@testing-library/react-native';
+import { TextColor } from '@metamask/design-system-react-native';
+import type { RelatedAsset } from '@metamask/ai-controllers';
+import renderWithProvider from '../../../../util/test/renderWithProvider';
+import AssetRow from './AssetRow';
+
+jest.mock('../utils/getRelatedAssetImageSource', () => ({
+  getRelatedAssetImageSource: jest.fn(() => undefined),
+}));
+
+jest.mock(
+  '../../../UI/Tokens/components/TokenListSecurityBadge/TokenListSecurityBadge',
+  () => 'TokenListSecurityBadge',
+);
+
+const btcAsset: RelatedAsset = {
+  sourceAssetId: 'bitcoin',
+  symbol: 'BTC',
+  name: 'Bitcoin',
+  caip19: ['eip155:1/slip44:0'],
+};
+
+const symbolOnlyAsset: RelatedAsset = {
+  sourceAssetId: 'unknown',
+  symbol: 'UNK',
+  name: '',
+  caip19: [],
+};
+
+describe('AssetRow', () => {
+  const onAction = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('displays asset.name when name is present', () => {
+    renderWithProvider(
+      <AssetRow
+        asset={btcAsset}
+        actionLabel="Buy"
+        accessibilityLabel="Buy BTC"
+        onAction={onAction}
+      />,
+    );
+    expect(screen.getByText('Bitcoin')).toBeOnTheScreen();
+  });
+
+  it('falls back to asset.symbol when name is empty', () => {
+    renderWithProvider(
+      <AssetRow
+        asset={symbolOnlyAsset}
+        actionLabel="Buy"
+        accessibilityLabel="Buy UNK"
+        onAction={onAction}
+      />,
+    );
+    expect(screen.getByText('UNK')).toBeOnTheScreen();
+  });
+
+  it('renders the action button with the provided label', () => {
+    renderWithProvider(
+      <AssetRow
+        asset={btcAsset}
+        actionLabel="Trade"
+        accessibilityLabel="Trade BTC"
+        onAction={onAction}
+      />,
+    );
+    expect(screen.getByText('Trade')).toBeOnTheScreen();
+  });
+
+  it('calls onAction when the button is pressed', () => {
+    renderWithProvider(
+      <AssetRow
+        asset={btcAsset}
+        actionLabel="Buy"
+        accessibilityLabel="Buy BTC"
+        onAction={onAction}
+      />,
+    );
+    fireEvent.press(screen.getByText('Buy'));
+    expect(onAction).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders the TokenListSecurityBadge when caipAssetId is provided', () => {
+    renderWithProvider(
+      <AssetRow
+        asset={btcAsset}
+        actionLabel="Buy"
+        accessibilityLabel="Buy BTC"
+        onAction={onAction}
+        caipAssetId="eip155:1/slip44:0"
+      />,
+    );
+    expect(screen.getByTestId !== undefined).toBeTruthy();
+    // The mocked component renders as 'TokenListSecurityBadge' native element
+    const badge = screen.UNSAFE_getByType(
+      'TokenListSecurityBadge' as unknown as React.ComponentType,
+    );
+    expect(badge).toBeTruthy();
+    expect(badge.props.caipAssetId).toBe('eip155:1/slip44:0');
+  });
+
+  it('does not render the security badge when caipAssetId is not provided', () => {
+    renderWithProvider(
+      <AssetRow
+        asset={btcAsset}
+        actionLabel="Buy"
+        accessibilityLabel="Buy BTC"
+        onAction={onAction}
+      />,
+    );
+    expect(
+      screen.UNSAFE_queryByType(
+        'TokenListSecurityBadge' as unknown as React.ComponentType,
+      ),
+    ).toBeNull();
+  });
+
+  it('renders the price secondary line when secondaryLine is provided', () => {
+    renderWithProvider(
+      <AssetRow
+        asset={btcAsset}
+        actionLabel="Buy"
+        accessibilityLabel="Buy BTC"
+        onAction={onAction}
+        secondaryLine={{
+          priceText: '$95,000.00',
+          changeText: '+2.50%',
+          changeColor: TextColor.SuccessDefault,
+        }}
+      />,
+    );
+    expect(screen.getByText('$95,000.00')).toBeOnTheScreen();
+    expect(screen.getByText('+2.50%')).toBeOnTheScreen();
+  });
+
+  it('renders just the price without change text when changeText is undefined', () => {
+    renderWithProvider(
+      <AssetRow
+        asset={btcAsset}
+        actionLabel="Buy"
+        accessibilityLabel="Buy BTC"
+        onAction={onAction}
+        secondaryLine={{
+          priceText: '$95,000.00',
+          changeText: undefined,
+          changeColor: TextColor.TextAlternative,
+        }}
+      />,
+    );
+    expect(screen.getByText('$95,000.00')).toBeOnTheScreen();
+    expect(screen.queryByText('%')).toBeNull();
+  });
+
+  it('does not render secondary line when secondaryLine is not provided', () => {
+    renderWithProvider(
+      <AssetRow
+        asset={btcAsset}
+        actionLabel="Buy"
+        accessibilityLabel="Buy BTC"
+        onAction={onAction}
+      />,
+    );
+    expect(screen.queryByText('$')).toBeNull();
+  });
+});
diff --git a/app/components/Views/WhatsHappeningDetailView/components/AssetRow.tsx b/app/components/Views/WhatsHappeningDetailView/components/AssetRow.tsx
index 381404af394..a3e25cd0040 100644
--- a/app/components/Views/WhatsHappeningDetailView/components/AssetRow.tsx
+++ b/app/components/Views/WhatsHappeningDetailView/components/AssetRow.tsx
@@ -15,25 +15,38 @@ import {
   TextVariant,
 } from '@metamask/design-system-react-native';
 import type { RelatedAsset } from '@metamask/ai-controllers';
+import type { CaipAssetType } from '@metamask/utils';
 import { getRelatedAssetImageSource } from '../utils/getRelatedAssetImageSource';
+import TokenListSecurityBadge from '../../../UI/Tokens/components/TokenListSecurityBadge/TokenListSecurityBadge';
+
+export interface AssetRowSecondaryLine {
+  priceText: string;
+  changeText: string | undefined;
+  changeColor: TextColor;
+}
 
 interface AssetRowProps {
   asset: RelatedAsset;
   actionLabel: string;
   accessibilityLabel: string;
   onAction: () => void;
+  /** When provided, renders the security badge inline next to the asset name. */
+  caipAssetId?: CaipAssetType;
+  /** When provided, renders price + 24h change below the asset name. */
+  secondaryLine?: AssetRowSecondaryLine;
 }
 
 /**
- * Shared layout for a single asset row (logo + symbol + action button).
- * Used by TokenRow (Buy/Trade) and PerpsRow (Trade); each wrapper supplies its
- * own hook logic and passes the resolved label and handler here.
+ * Shared layout for a single asset row (logo + name + optional badge + optional
+ * price/change + action button). Used by TokenRow (Buy/Trade) and PerpsRow (Trade).
  */
 const AssetRow: React.FC<AssetRowProps> = ({
   asset,
   actionLabel,
   accessibilityLabel,
   onAction,
+  caipAssetId,
+  secondaryLine,
 }) => {
   const rawImageSource = getRelatedAssetImageSource(asset);
   const imageSource = Array.isArray(rawImageSource)
@@ -59,13 +72,56 @@ const AssetRow: React.FC<AssetRowProps> = ({
         alignItems={BoxAlignItems.Center}
         justifyContent={BoxJustifyContent.Between}
       >
-        <Text
-          variant={TextVariant.BodyMd}
-          fontWeight={FontWeight.Medium}
-          color={TextColor.TextDefault}
-        >
-          {asset.symbol}
-        </Text>
+        {/* Left: name + optional badge + optional price/change */}
+        <Box twClassName="flex-1 mr-2">
+          <Box
+            flexDirection={BoxFlexDirection.Row}
+            alignItems={BoxAlignItems.Center}
+            gap={1}
+          >
+            <Text
+              variant={TextVariant.BodyMd}
+              fontWeight={FontWeight.Medium}
+              color={TextColor.TextDefault}
+              numberOfLines={1}
+            >
+              {asset.name || asset.symbol}
+            </Text>
+            {caipAssetId && (
+              <TokenListSecurityBadge caipAssetId={caipAssetId} />
+            )}
+          </Box>
+
+          {secondaryLine && (
+            <Box
+              flexDirection={BoxFlexDirection.Row}
+              alignItems={BoxAlignItems.Center}
+            >
+              <Text
+                variant={TextVariant.BodySm}
+                color={TextColor.TextAlternative}
+              >
+                {secondaryLine.priceText}
+              </Text>
+              {secondaryLine.changeText ? (
+                <>
+                  <Text
+                    variant={TextVariant.BodySm}
+                    color={TextColor.TextAlternative}
+                  >
+                    {' \u2022 '}
+                  </Text>
+                  <Text
+                    variant={TextVariant.BodySm}
+                    color={secondaryLine.changeColor}
+                  >
+                    {secondaryLine.changeText}
+                  </Text>
+                </>
+              ) : null}
+            </Box>
+          )}
+        </Box>
 
         <Button
           variant={ButtonVariant.Primary}
diff --git a/app/components/Views/WhatsHappeningDetailView/components/PageIndicator.test.tsx b/app/components/Views/WhatsHappeningDetailView/components/PageIndicator.test.tsx
index 8c7699f17d2..f1ebfd61149 100644
--- a/app/components/Views/WhatsHappeningDetailView/components/PageIndicator.test.tsx
+++ b/app/components/Views/WhatsHappeningDetailView/components/PageIndicator.test.tsx
@@ -40,4 +40,31 @@ describe('PageIndicator', () => {
     );
     expect(screen.queryAllByTestId('page-indicator-dot')).toHaveLength(3);
   });
+
+  it('active dot has wider width style than inactive dots (pill shape)', () => {
+    renderWithProvider(<PageIndicator count={3} activeIndex={0} />);
+    const [activeDot] = screen.getAllByTestId('page-indicator-dot-active');
+    const inactiveDots = screen.getAllByTestId('page-indicator-dot');
+
+    const activeStyle = activeDot.props.style;
+    const inactiveStyle = inactiveDots[0].props.style;
+
+    // Active dot should be wider (w-6 = 24) than inactive (w-2 = 8)
+    const activeWidth = Array.isArray(activeStyle)
+      ? activeStyle.find((s: Record<string, unknown>) => s?.width !== undefined)
+          ?.width
+      : activeStyle?.width;
+    const inactiveWidth = Array.isArray(inactiveStyle)
+      ? inactiveStyle.find(
+          (s: Record<string, unknown>) => s?.width !== undefined,
+        )?.width
+      : inactiveStyle?.width;
+
+    if (activeWidth !== undefined && inactiveWidth !== undefined) {
+      expect(activeWidth).toBeGreaterThan(inactiveWidth);
+    } else {
+      // Style is applied but might be in a different shape — just verify both dots are distinct
+      expect(activeDot.props.testID).toBe('page-indicator-dot-active');
+    }
+  });
 });
diff --git a/app/components/Views/WhatsHappeningDetailView/components/PageIndicator.tsx b/app/components/Views/WhatsHappeningDetailView/components/PageIndicator.tsx
index 314d0b765c3..da5bb4b28c3 100644
--- a/app/components/Views/WhatsHappeningDetailView/components/PageIndicator.tsx
+++ b/app/components/Views/WhatsHappeningDetailView/components/PageIndicator.tsx
@@ -38,7 +38,7 @@ const PageIndicator: React.FC<PageIndicatorProps> = ({
           }
           style={
             index === activeIndex
-              ? tw.style('w-2 h-2 rounded-full bg-icon-default')
+              ? tw.style('w-6 h-2 rounded-full bg-icon-default')
               : tw.style('w-2 h-2 rounded-full bg-icon-muted')
           }
         />
diff --git a/app/components/Views/WhatsHappeningDetailView/components/PerpsRow.test.tsx b/app/components/Views/WhatsHappeningDetailView/components/PerpsRow.test.tsx
index 15504e180f3..c4cde86941b 100644
--- a/app/components/Views/WhatsHappeningDetailView/components/PerpsRow.test.tsx
+++ b/app/components/Views/WhatsHappeningDetailView/components/PerpsRow.test.tsx
@@ -6,6 +6,7 @@ import Routes from '../../../../constants/navigation/Routes';
 import type { RelatedAsset } from '@metamask/ai-controllers';
 import type { WhatsHappeningItem } from '../../Homepage/Sections/WhatsHappening/types';
 import { MetaMetricsEvents } from '../../../../core/Analytics/MetaMetrics.events';
+import type { PerpsPriceEntry } from '../hooks/useWhatsHappeningAssetPrices';
 
 const mockNavigate = jest.fn();
 const mockTrackEvent = jest.fn();
@@ -35,6 +36,12 @@ jest.mock('../../../hooks/useAnalytics/useAnalytics', () => ({
   }),
 }));
 
+// TokenListSecurityBadge is not used in PerpsRow, but mock it just in case
+jest.mock(
+  '../../../UI/Tokens/components/TokenListSecurityBadge/TokenListSecurityBadge',
+  () => 'TokenListSecurityBadge',
+);
+
 const perpsOnlyAsset: RelatedAsset = {
   sourceAssetId: 'tsla',
   symbol: 'TSLA',
@@ -62,28 +69,45 @@ const mockItem: WhatsHappeningItem = {
   articles: [],
 };
 
+const emptyPriceMap: Record<string, PerpsPriceEntry> = {};
+
 describe('PerpsRow', () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
-  it('renders the asset symbol', () => {
+  it('renders the asset name', () => {
     renderWithProvider(
-      <PerpsRow asset={perpsOnlyAsset} item={mockItem} cardIndex={0} />,
+      <PerpsRow
+        asset={perpsOnlyAsset}
+        item={mockItem}
+        cardIndex={0}
+        perpsPriceBySymbol={emptyPriceMap}
+      />,
     );
-    expect(screen.getByText('TSLA')).toBeOnTheScreen();
+    expect(screen.getByText('Tesla')).toBeOnTheScreen();
   });
 
   it('renders the Trade button', () => {
     renderWithProvider(
-      <PerpsRow asset={perpsOnlyAsset} item={mockItem} cardIndex={0} />,
+      <PerpsRow
+        asset={perpsOnlyAsset}
+        item={mockItem}
+        cardIndex={0}
+        perpsPriceBySymbol={emptyPriceMap}
+      />,
     );
     expect(screen.getByText('Trade')).toBeOnTheScreen();
   });
 
   it('navigates to PerpsMarketDetails with minimal market payload on Trade press', () => {
     renderWithProvider(
-      <PerpsRow asset={perpsOnlyAsset} item={mockItem} cardIndex={0} />,
+      <PerpsRow
+        asset={perpsOnlyAsset}
+        item={mockItem}
+        cardIndex={0}
+        perpsPriceBySymbol={emptyPriceMap}
+      />,
     );
     fireEvent.press(screen.getByText('Trade'));
     expect(mockNavigate).toHaveBeenCalledWith(Routes.PERPS.ROOT, {
@@ -96,7 +120,12 @@ describe('PerpsRow', () => {
 
   it('uses first hlPerpsMarket entry as the market symbol', () => {
     renderWithProvider(
-      <PerpsRow asset={dualAsset} item={mockItem} cardIndex={0} />,
+      <PerpsRow
+        asset={dualAsset}
+        item={mockItem}
+        cardIndex={0}
+        perpsPriceBySymbol={emptyPriceMap}
+      />,
     );
     fireEvent.press(screen.getByText('Trade'));
     expect(mockNavigate).toHaveBeenCalledWith(Routes.PERPS.ROOT, {
@@ -113,7 +142,12 @@ describe('PerpsRow', () => {
       hlPerpsMarket: [],
     };
     renderWithProvider(
-      <PerpsRow asset={assetNoPerps} item={mockItem} cardIndex={0} />,
+      <PerpsRow
+        asset={assetNoPerps}
+        item={mockItem}
+        cardIndex={0}
+        perpsPriceBySymbol={emptyPriceMap}
+      />,
     );
     fireEvent.press(screen.getByText('Trade'));
     expect(mockNavigate).not.toHaveBeenCalled();
@@ -121,7 +155,12 @@ describe('PerpsRow', () => {
 
   it('tracks Whats Happening Interaction with interaction_type=trade_pressed and asset details on Trade press', () => {
     renderWithProvider(
-      <PerpsRow asset={perpsOnlyAsset} item={mockItem} cardIndex={1} />,
+      <PerpsRow
+        asset={perpsOnlyAsset}
+        item={mockItem}
+        cardIndex={1}
+        perpsPriceBySymbol={emptyPriceMap}
+      />,
     );
     fireEvent.press(screen.getByText('Trade'));
     expect(mockCreateEventBuilder).toHaveBeenCalledWith(
@@ -149,9 +188,44 @@ describe('PerpsRow', () => {
       hlPerpsMarket: [],
     };
     renderWithProvider(
-      <PerpsRow asset={assetNoPerps} item={mockItem} cardIndex={0} />,
+      <PerpsRow
+        asset={assetNoPerps}
+        item={mockItem}
+        cardIndex={0}
+        perpsPriceBySymbol={emptyPriceMap}
+      />,
     );
     fireEvent.press(screen.getByText('Trade'));
     expect(mockCreateEventBuilder).not.toHaveBeenCalled();
   });
+
+  it('displays price and 24h change from perpsPriceBySymbol', () => {
+    const priceMap: Record<string, PerpsPriceEntry> = {
+      'xyz:TSLA': { price: 172.5, percentChange24h: 3.45 },
+    };
+    renderWithProvider(
+      <PerpsRow
+        asset={perpsOnlyAsset}
+        item={mockItem}
+        cardIndex={0}
+        perpsPriceBySymbol={priceMap}
+      />,
+    );
+    // Price formatted in USD
+    expect(screen.getByText('$172.50')).toBeOnTheScreen();
+    expect(screen.getByText('+3.45%')).toBeOnTheScreen();
+  });
+
+  it('shows dash for price when no price entry is available', () => {
+    renderWithProvider(
+      <PerpsRow
+        asset={perpsOnlyAsset}
+        item={mockItem}
+        cardIndex={0}
+        perpsPriceBySymbol={emptyPriceMap}
+      />,
+    );
+    // When no price map entry exists, no secondary line is rendered
+    expect(screen.queryByText('$')).toBeNull();
+  });
 });
diff --git a/app/components/Views/WhatsHappeningDetailView/components/PerpsRow.tsx b/app/components/Views/WhatsHappeningDetailView/components/PerpsRow.tsx
index 6996cee0154..6b8724986d6 100644
--- a/app/components/Views/WhatsHappeningDetailView/components/PerpsRow.tsx
+++ b/app/components/Views/WhatsHappeningDetailView/components/PerpsRow.tsx
@@ -1,4 +1,5 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
+import { useSelector } from 'react-redux';
 import type { RelatedAsset } from '@metamask/ai-controllers';
 import { strings } from '../../../../../locales/i18n';
 import { MetaMetricsEvents } from '../../../../core/Analytics';
@@ -6,6 +7,9 @@ import { useAnalytics } from '../../../hooks/useAnalytics/useAnalytics';
 import { WhatsHappeningInteractionType } from '../../Homepage/Sections/WhatsHappening/constants';
 import { getWhatsHappeningEventProps } from '../../Homepage/Sections/WhatsHappening/eventProperties';
 import type { WhatsHappeningItem } from '../../Homepage/Sections/WhatsHappening/types';
+import { formatAssetPrice } from '../utils/formatAssetPrice';
+import { selectCurrentCurrency } from '../../../../selectors/currencyRateController';
+import type { PerpsPriceEntry } from '../hooks/useWhatsHappeningAssetPrices';
 import AssetRow from './AssetRow';
 import useTradeNavigation from '../hooks/useTradeNavigation';
 
@@ -13,17 +17,33 @@ interface PerpsRowProps {
   asset: RelatedAsset;
   item: WhatsHappeningItem;
   cardIndex: number;
+  /** Map from perps symbol → live price data, resolved by the parent card hook. */
+  perpsPriceBySymbol: Record<string, PerpsPriceEntry>;
 }
 
 /**
  * A single row in the Perps section of the expanded What's Happening card.
- * Displays the asset logo and symbol with a Trade button that navigates to
- * the Perps market details view. Extracted as its own component so hooks can
- * be called per-asset (hooks cannot be called inside a loop).
+ * Displays the asset logo and name with a Trade button and live price/change.
+ * Extracted as its own component so hooks can be called per-asset.
  */
-const PerpsRow: React.FC<PerpsRowProps> = ({ asset, item, cardIndex }) => {
+const PerpsRow: React.FC<PerpsRowProps> = ({
+  asset,
+  item,
+  cardIndex,
+  perpsPriceBySymbol,
+}) => {
   const { handleTrade } = useTradeNavigation(asset);
   const { trackEvent, createEventBuilder } = useAnalytics();
+  const currentCurrency = useSelector(selectCurrentCurrency);
+
+  // Perps prices are quoted in USD regardless of user currency preference
+  const secondaryLine = useMemo(() => {
+    const symbol = asset.hlPerpsMarket?.[0];
+    if (!symbol) return undefined;
+    const entry = perpsPriceBySymbol[symbol];
+    if (!entry) return undefined;
+    return formatAssetPrice(entry.price, entry.percentChange24h, 'USD');
+  }, [asset.hlPerpsMarket, perpsPriceBySymbol, currentCurrency]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const handleTradeWithTracking = useCallback(() => {
     if (!asset.hlPerpsMarket?.[0]) return;
@@ -54,6 +74,7 @@ const PerpsRow: React.FC<PerpsRowProps> = ({ asset, item, cardIndex }) => {
       actionLabel={strings('bottom_nav.trade')}
       accessibilityLabel={`${strings('bottom_nav.trade')} ${asset.symbol}`}
       onAction={handleTradeWithTracking}
+      secondaryLine={secondaryLine}
     />
   );
 };
diff --git a/app/components/Views/WhatsHappeningDetailView/components/TokenRow.test.tsx b/app/components/Views/WhatsHappeningDetailView/components/TokenRow.test.tsx
index 9f2ae4a4df0..787b25bf101 100644
--- a/app/components/Views/WhatsHappeningDetailView/components/TokenRow.test.tsx
+++ b/app/components/Views/WhatsHappeningDetailView/components/TokenRow.test.tsx
@@ -6,6 +6,7 @@ import type { RelatedAsset } from '@metamask/ai-controllers';
 import type { WhatsHappeningItem } from '../../Homepage/Sections/WhatsHappening/types';
 import { MetaMetricsEvents } from '../../../../core/Analytics/MetaMetrics.events';
 import Routes from '../../../../constants/navigation/Routes';
+import type { TokenPriceEntry } from '../hooks/useWhatsHappeningAssetPrices';
 
 const mockGoToBuy = jest.fn();
 const mockTrackEvent = jest.fn();
@@ -41,6 +42,11 @@ jest.mock('../../../hooks/useAnalytics/useAnalytics', () => ({
   }),
 }));
 
+jest.mock(
+  '../../../UI/Tokens/components/TokenListSecurityBadge/TokenListSecurityBadge',
+  () => 'TokenListSecurityBadge',
+);
+
 const btcAsset: RelatedAsset = {
   sourceAssetId: 'bitcoin',
   symbol: 'BTC',
@@ -74,29 +80,46 @@ const mockItem: WhatsHappeningItem = {
   articles: [],
 };
 
+const emptyPriceMap: Record<string, TokenPriceEntry> = {};
+
 describe('TokenRow', () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
   describe('when asset has only caip19 (no hlPerpsMarket)', () => {
-    it('renders the asset symbol', () => {
+    it('renders the asset name', () => {
       renderWithProvider(
-        <TokenRow asset={btcAsset} item={mockItem} cardIndex={0} />,
+        <TokenRow
+          asset={btcAsset}
+          item={mockItem}
+          cardIndex={0}
+          tokenPriceByCaip={emptyPriceMap}
+        />,
       );
-      expect(screen.getByText('BTC')).toBeOnTheScreen();
+      expect(screen.getByText('Bitcoin')).toBeOnTheScreen();
     });
 
     it('renders the Buy button', () => {
       renderWithProvider(
-        <TokenRow asset={btcAsset} item={mockItem} cardIndex={0} />,
+        <TokenRow
+          asset={btcAsset}
+          item={mockItem}
+          cardIndex={0}
+          tokenPriceByCaip={emptyPriceMap}
+        />,
       );
       expect(screen.getByText('Buy')).toBeOnTheScreen();
     });
 
     it('calls goToBuy with the first caip19 identifier on Buy press', () => {
       renderWithProvider(
-        <TokenRow asset={btcAsset} item={mockItem} cardIndex={0} />,
+        <TokenRow
+          asset={btcAsset}
+          item={mockItem}
+          cardIndex={0}
+          tokenPriceByCaip={emptyPriceMap}
+        />,
       );
       fireEvent.press(screen.getByText('Buy'));
       expect(mockGoToBuy).toHaveBeenCalledWith({
@@ -107,7 +130,12 @@ describe('TokenRow', () => {
 
   it('calls goToBuy with assetId undefined when caip19 is empty', () => {
     renderWithProvider(
-      <TokenRow asset={perpsOnlyAsset} item={mockItem} cardIndex={0} />,
+      <TokenRow
+        asset={perpsOnlyAsset}
+        item={mockItem}
+        cardIndex={0}
+        tokenPriceByCaip={emptyPriceMap}
+      />,
     );
     fireEvent.press(screen.getByText('Buy'));
     expect(mockGoToBuy).toHaveBeenCalledWith({ assetId: undefined });
@@ -116,7 +144,12 @@ describe('TokenRow', () => {
   describe('when asset has hlPerpsMarket (dual asset)', () => {
     it('renders the Trade button instead of Buy', () => {
       renderWithProvider(
-        <TokenRow asset={dualAsset} item={mockItem} cardIndex={0} />,
+        <TokenRow
+          asset={dualAsset}
+          item={mockItem}
+          cardIndex={0}
+          tokenPriceByCaip={emptyPriceMap}
+        />,
       );
       expect(screen.getByText('Trade')).toBeOnTheScreen();
       expect(screen.queryByText('Buy')).toBeNull();
@@ -124,7 +157,12 @@ describe('TokenRow', () => {
 
     it('navigates to Perps market details on Trade press', () => {
       renderWithProvider(
-        <TokenRow asset={dualAsset} item={mockItem} cardIndex={0} />,
+        <TokenRow
+          asset={dualAsset}
+          item={mockItem}
+          cardIndex={0}
+          tokenPriceByCaip={emptyPriceMap}
+        />,
       );
       fireEvent.press(screen.getByText('Trade'));
       expect(mockNavigate).toHaveBeenCalledWith(Routes.PERPS.ROOT, {
@@ -137,7 +175,12 @@ describe('TokenRow', () => {
 
     it('does not call goToBuy when Trade is pressed', () => {
       renderWithProvider(
-        <TokenRow asset={dualAsset} item={mockItem} cardIndex={0} />,
+        <TokenRow
+          asset={dualAsset}
+          item={mockItem}
+          cardIndex={0}
+          tokenPriceByCaip={emptyPriceMap}
+        />,
       );
       fireEvent.press(screen.getByText('Trade'));
       expect(mockGoToBuy).not.toHaveBeenCalled();
@@ -146,7 +189,12 @@ describe('TokenRow', () => {
 
   it('tracks Whats Happening Interaction with interaction_type=buy_pressed and asset details on Buy press', () => {
     renderWithProvider(
-      <TokenRow asset={btcAsset} item={mockItem} cardIndex={2} />,
+      <TokenRow
+        asset={btcAsset}
+        item={mockItem}
+        cardIndex={2}
+        tokenPriceByCaip={emptyPriceMap}
+      />,
     );
     fireEvent.press(screen.getByText('Buy'));
     expect(mockCreateEventBuilder).toHaveBeenCalledWith(
@@ -170,7 +218,12 @@ describe('TokenRow', () => {
 
   it('tracks Interaction without asset_caip19 when caip19 is empty', () => {
     renderWithProvider(
-      <TokenRow asset={perpsOnlyAsset} item={mockItem} cardIndex={0} />,
+      <TokenRow
+        asset={perpsOnlyAsset}
+        item={mockItem}
+        cardIndex={0}
+        tokenPriceByCaip={emptyPriceMap}
+      />,
     );
     fireEvent.press(screen.getByText('Buy'));
     const addPropertiesCall = mockCreateEventBuilder.mock.results[0]?.value
@@ -182,4 +235,20 @@ describe('TokenRow', () => {
     expect(builtProperties?.asset_symbol).toBe('TSLA');
     expect(builtProperties).not.toHaveProperty('asset_caip19');
   });
+
+  it('displays price and 24h change when tokenPriceByCaip has entry', () => {
+    const priceMap: Record<string, TokenPriceEntry> = {
+      'eip155:1/slip44:0': { price: 95000, pricePercentChange1d: -1.23 },
+    };
+    renderWithProvider(
+      <TokenRow
+        asset={btcAsset}
+        item={mockItem}
+        cardIndex={0}
+        tokenPriceByCaip={priceMap}
+      />,
+    );
+    expect(screen.getByText('$95,000.00')).toBeOnTheScreen();
+    expect(screen.getByText('-1.23%')).toBeOnTheScreen();
+  });
 });
diff --git a/app/components/Views/WhatsHappeningDetailView/components/TokenRow.tsx b/app/components/Views/WhatsHappeningDetailView/components/TokenRow.tsx
index 4a29ff051fc..397c8d644c7 100644
--- a/app/components/Views/WhatsHappeningDetailView/components/TokenRow.tsx
+++ b/app/components/Views/WhatsHappeningDetailView/components/TokenRow.tsx
@@ -1,4 +1,6 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
+import { useSelector } from 'react-redux';
+import type { CaipAssetType } from '@metamask/utils';
 import type { RelatedAsset } from '@metamask/ai-controllers';
 import { strings } from '../../../../../locales/i18n';
 import { useRampNavigation } from '../../../UI/Ramp/hooks/useRampNavigation';
@@ -7,13 +9,20 @@ import { useAnalytics } from '../../../hooks/useAnalytics/useAnalytics';
 import { WhatsHappeningInteractionType } from '../../Homepage/Sections/WhatsHappening/constants';
 import { getWhatsHappeningEventProps } from '../../Homepage/Sections/WhatsHappening/eventProperties';
 import type { WhatsHappeningItem } from '../../Homepage/Sections/WhatsHappening/types';
+import { selectTokenListSecurityBadgesEnabled } from '../../../../selectors/featureFlagController/tokenListSecurityBadges';
+import { formatAssetPrice } from '../utils/formatAssetPrice';
+import { selectCurrentCurrency } from '../../../../selectors/currencyRateController';
+import type { TokenPriceEntry } from '../hooks/useWhatsHappeningAssetPrices';
 import AssetRow from './AssetRow';
 import useTradeNavigation from '../hooks/useTradeNavigation';
+import type { RootState } from '../../../../reducers';
 
 interface TokenRowProps {
   asset: RelatedAsset;
   item: WhatsHappeningItem;
   cardIndex: number;
+  /** Map from caip19 ID → price data, resolved by the parent card hook. */
+  tokenPriceByCaip: Record<string, TokenPriceEntry>;
 }
 
 /**
@@ -23,10 +32,52 @@ interface TokenRowProps {
  * Ramp buy flow. Extracted as its own component so hooks can be called
  * per-asset (hooks cannot be called inside a loop).
  */
-const TokenRow: React.FC<TokenRowProps> = ({ asset, item, cardIndex }) => {
+const TokenRow: React.FC<TokenRowProps> = ({
+  asset,
+  item,
+  cardIndex,
+  tokenPriceByCaip,
+}) => {
   const { goToBuy } = useRampNavigation();
   const { trackEvent, createEventBuilder } = useAnalytics();
   const { handleTrade, canTrade } = useTradeNavigation(asset);
+  const currentCurrency = useSelector(selectCurrentCurrency);
+  const isTokenListSecurityBadgesEnabled = useSelector(
+    selectTokenListSecurityBadgesEnabled,
+  );
+  const basicFunctionalityEnabled = useSelector(
+    (state: RootState) => state.settings.basicFunctionalityEnabled,
+  );
+
+  // Resolve the caip19 ID for the security badge (use first entry if present)
+  const caipAssetId = useMemo(() => {
+    const firstCaip = asset.caip19?.[0];
+    if (
+      !firstCaip ||
+      !basicFunctionalityEnabled ||
+      !isTokenListSecurityBadgesEnabled
+    ) {
+      return undefined;
+    }
+    return firstCaip as CaipAssetType;
+  }, [
+    asset.caip19,
+    basicFunctionalityEnabled,
+    isTokenListSecurityBadgesEnabled,
+  ]);
+
+  // Resolve price display from the batched price map
+  const secondaryLine = useMemo(() => {
+    const firstCaip = asset.caip19?.[0];
+    if (!firstCaip) return undefined;
+    const entry = tokenPriceByCaip[firstCaip];
+    if (!entry) return undefined;
+    return formatAssetPrice(
+      entry.price,
+      entry.pricePercentChange1d,
+      currentCurrency,
+    );
+  }, [asset.caip19, tokenPriceByCaip, currentCurrency]);
 
   const handleTradeWithTracking = useCallback(() => {
     trackEvent(
@@ -80,6 +131,8 @@ const TokenRow: React.FC<TokenRowProps> = ({ asset, item, cardIndex }) => {
         actionLabel={strings('bottom_nav.trade')}
         accessibilityLabel={`${strings('bottom_nav.trade')} ${asset.symbol}`}
         onAction={handleTradeWithTracking}
+        caipAssetId={caipAssetId}
+        secondaryLine={secondaryLine}
       />
     );
   }
@@ -90,6 +143,8 @@ const TokenRow: React.FC<TokenRowProps> = ({ asset, item, cardIndex }) => {
       actionLabel={strings('asset_overview.buy_button')}
       accessibilityLabel={`${strings('asset_overview.buy_button')} ${asset.symbol}`}
       onAction={handleBuy}
+      caipAssetId={caipAssetId}
+      secondaryLine={secondaryLine}
     />
   );
 };
diff --git a/app/components/Views/WhatsHappeningDetailView/components/WhatsHappeningExpandedCard.test.tsx b/app/components/Views/WhatsHappeningDetailView/components/WhatsHappeningExpandedCard.test.tsx
index 9a687b83e32..19653fc496b 100644
--- a/app/components/Views/WhatsHappeningDetailView/components/WhatsHappeningExpandedCard.test.tsx
+++ b/app/components/Views/WhatsHappeningDetailView/components/WhatsHappeningExpandedCard.test.tsx
@@ -46,6 +46,18 @@ jest.mock(
   () => 'SourceLogoGroup',
 );
 
+jest.mock('../hooks/useWhatsHappeningAssetPrices', () => ({
+  useWhatsHappeningAssetPrices: jest.fn(() => ({
+    tokenPriceByCaip: {},
+    perpsPriceBySymbol: {},
+  })),
+}));
+
+jest.mock(
+  '../../../UI/Tokens/components/TokenListSecurityBadge/TokenListSecurityBadge',
+  () => 'TokenListSecurityBadge',
+);
+
 const CARD_WIDTH = 320;
 const CARD_HEIGHT = 600;
 
@@ -114,6 +126,19 @@ describe('WhatsHappeningExpandedCard', () => {
     expect(screen.getByText('Bullish')).toBeOnTheScreen();
   });
 
+  it('renders the AI pill next to the impact badge', () => {
+    renderWithProvider(
+      <WhatsHappeningExpandedCard
+        item={baseItem}
+        cardIndex={0}
+        cardWidth={CARD_WIDTH}
+        cardHeight={CARD_HEIGHT}
+      />,
+    );
+    expect(screen.getByText('AI')).toBeOnTheScreen();
+    expect(screen.getByText('Bullish')).toBeOnTheScreen();
+  });
+
   it('renders Neutral badge when impact is explicitly neutral', () => {
     const item = { ...baseItem, impact: 'neutral' as const };
     renderWithProvider(
@@ -140,6 +165,8 @@ describe('WhatsHappeningExpandedCard', () => {
     expect(screen.queryByText('Neutral')).toBeNull();
     expect(screen.queryByText('Bullish')).toBeNull();
     expect(screen.queryByText('Bearish')).toBeNull();
+    // No impact = no AI pill either
+    expect(screen.queryByText('AI')).toBeNull();
   });
 
   it('renders Tokens section when assets have caip19', () => {
@@ -153,7 +180,7 @@ describe('WhatsHappeningExpandedCard', () => {
       />,
     );
     expect(screen.getByText('Tokens')).toBeOnTheScreen();
-    expect(screen.getByText('BTC')).toBeOnTheScreen();
+    expect(screen.getByText('Bitcoin')).toBeOnTheScreen();
     expect(screen.getByText('Buy')).toBeOnTheScreen();
   });
 
@@ -182,7 +209,7 @@ describe('WhatsHappeningExpandedCard', () => {
       />,
     );
     expect(screen.getByText('Perps')).toBeOnTheScreen();
-    expect(screen.getByText('TSLA')).toBeOnTheScreen();
+    expect(screen.getByText('Tesla')).toBeOnTheScreen();
     expect(screen.getByText('Trade')).toBeOnTheScreen();
   });
 
@@ -295,4 +322,34 @@ describe('WhatsHappeningExpandedCard', () => {
     fireEvent.press(screen.getByText('coindesk.com'));
     expect(mockOnSourcesPress).toHaveBeenCalledWith([article]);
   });
+
+  it('passes tokenPriceByCaip and perpsPriceBySymbol from hook to rows', () => {
+    const mockHook = jest.requireMock('../hooks/useWhatsHappeningAssetPrices');
+    const mockTokenMap = {
+      'eip155:1/slip44:0': { price: 95000, pricePercentChange1d: 2 },
+    };
+    const mockPerpsMap = { 'xyz:TSLA': { price: 172.5, percentChange24h: -1 } };
+    mockHook.useWhatsHappeningAssetPrices.mockReturnValueOnce({
+      tokenPriceByCaip: mockTokenMap,
+      perpsPriceBySymbol: mockPerpsMap,
+    });
+
+    const item = {
+      ...baseItem,
+      relatedAssets: [tokenAsset, perpsOnlyAsset],
+    };
+    renderWithProvider(
+      <WhatsHappeningExpandedCard
+        item={item}
+        cardIndex={0}
+        cardWidth={CARD_WIDTH}
+        cardHeight={CARD_HEIGHT}
+      />,
+    );
+
+    // Token price should appear (formatted from mock map)
+    expect(screen.getByText('$95,000.00')).toBeOnTheScreen();
+    // Perps price should appear
+    expect(screen.getByText('$172.50')).toBeOnTheScreen();
+  });
 });
diff --git a/app/components/Views/WhatsHappeningDetailView/components/WhatsHappeningExpandedCard.tsx b/app/components/Views/WhatsHappeningDetailView/components/WhatsHappeningExpandedCard.tsx
index 10fe6ebfb3b..33f0e17455e 100644
--- a/app/components/Views/WhatsHappeningDetailView/components/WhatsHappeningExpandedCard.tsx
+++ b/app/components/Views/WhatsHappeningDetailView/components/WhatsHappeningExpandedCard.tsx
@@ -7,6 +7,9 @@ import {
   BoxFlexDirection,
   BoxJustifyContent,
   FontWeight,
+  Icon,
+  IconName,
+  IconSize,
   Text,
   TextColor,
   TextVariant,
@@ -26,6 +29,7 @@ import {
 import SourceLogoGroup from '../../../UI/MarketInsights/components/SourceLogoGroup';
 import PerpsRow from './PerpsRow';
 import TokenRow from './TokenRow';
+import { useWhatsHappeningAssetPrices } from '../hooks/useWhatsHappeningAssetPrices';
 
 interface WhatsHappeningExpandedCardProps {
   item: WhatsHappeningItem;
@@ -70,6 +74,10 @@ const WhatsHappeningExpandedCard: React.FC<WhatsHappeningExpandedCardProps> = ({
     return remaining > 0 ? `${first.name} +${remaining}` : first.name;
   }, [uniqueSources]);
 
+  // Fetch price data for all assets on this card (one batch per card)
+  const { tokenPriceByCaip, perpsPriceBySymbol } =
+    useWhatsHappeningAssetPrices(item);
+
   return (
     <Box style={{ width: cardWidth, height: cardHeight }}>
       {/* Card surface — fills the fixed height so all cards are the same size */}
@@ -77,14 +85,44 @@ const WhatsHappeningExpandedCard: React.FC<WhatsHappeningExpandedCardProps> = ({
         {/* Scrollable main content */}
         <ScrollView
           showsVerticalScrollIndicator={false}
-          contentContainerStyle={tw.style('p-5 gap-4')}
+          contentContainerStyle={tw.style('pt-7 px-5 pb-5 gap-4')}
         >
-          {/* Impact badge */}
+          {/* Tag row: AI pill + impact badge */}
           {item.impact && (
-            <Box twClassName={`${impactBgClass} rounded px-2 py-1 self-start`}>
-              <Text variant={TextVariant.BodySm} color={impactTextColor}>
-                {impactLabel}
-              </Text>
+            <Box
+              flexDirection={BoxFlexDirection.Row}
+              alignItems={BoxAlignItems.Center}
+              gap={1}
+              twClassName="flex-wrap"
+            >
+              {/* AI pill — inverted (white bg, dark content) */}
+              <Box
+                flexDirection={BoxFlexDirection.Row}
+                alignItems={BoxAlignItems.Center}
+                gap={1}
+                twClassName="bg-icon-default rounded px-1.5 py-0.5 self-start"
+              >
+                <Icon
+                  name={IconName.Ai}
+                  size={IconSize.Sm}
+                  twClassName="text-icon-inverse"
+                />
+                <Text
+                  variant={TextVariant.BodySm}
+                  fontWeight={FontWeight.Medium}
+                  twClassName="text-icon-inverse"
+                >
+                  {'AI'}
+                </Text>
+              </Box>
+
+              <Box
+                twClassName={`${impactBgClass} rounded px-2 py-1 self-start`}
+              >
+                <Text variant={TextVariant.BodySm} color={impactTextColor}>
+                  {impactLabel}
+                </Text>
+              </Box>
             </Box>
           )}
 
@@ -126,6 +164,7 @@ const WhatsHappeningExpandedCard: React.FC<WhatsHappeningExpandedCardProps> = ({
                     asset={asset}
                     item={item}
                     cardIndex={cardIndex}
+                    tokenPriceByCaip={tokenPriceByCaip}
                   />
                 ))}
             </Box>
@@ -155,6 +194,7 @@ const WhatsHappeningExpandedCard: React.FC<WhatsHappeningExpandedCardProps> = ({
                     asset={asset}
                     item={item}
                     cardIndex={cardIndex}
+                    perpsPriceBySymbol={perpsPriceBySymbol}
                   />
                 ))}
             </Box>
diff --git a/app/components/Views/WhatsHappeningDetailView/hooks/useWhatsHappeningAssetPrices.test.ts b/app/components/Views/WhatsHappeningDetailView/hooks/useWhatsHappeningAssetPrices.test.ts
new file mode 100644
index 00000000000..d5e976a4eeb
--- /dev/null
+++ b/app/components/Views/WhatsHappeningDetailView/hooks/useWhatsHappeningAssetPrices.test.ts
@@ -0,0 +1,213 @@
+import { renderHook, waitFor, act } from '@testing-library/react-native';
+import { useWhatsHappeningAssetPrices } from './useWhatsHappeningAssetPrices';
+import type { WhatsHappeningItem } from '../../Homepage/Sections/WhatsHappening/types';
+import type { RelatedAsset } from '@metamask/ai-controllers';
+
+// ── Mocks ──────────────────────────────────────────────────────────────────────
+
+const mockHandleFetch = jest.fn();
+jest.mock('@metamask/controller-utils', () => ({
+  handleFetch: (...args: unknown[]) => mockHandleFetch(...args),
+}));
+
+// Mock useSelector to return 'usd' for selectCurrentCurrency
+jest.mock('react-redux', () => ({
+  useSelector: jest.fn(() => 'usd'),
+}));
+
+jest.mock('../../../../selectors/currencyRateController', () => ({
+  selectCurrentCurrency: jest.fn(() => 'usd'),
+}));
+
+const mockUsePerpsLivePrices = jest.fn(
+  (_options: { symbols: string[]; throttleMs?: number }) => ({}),
+);
+jest.mock('../../../UI/Perps/hooks/stream', () => ({
+  usePerpsLivePrices: (options: { symbols: string[]; throttleMs?: number }) =>
+    mockUsePerpsLivePrices(options),
+}));
+
+// ── Test data ──────────────────────────────────────────────────────────────────
+
+const btcAsset: RelatedAsset = {
+  sourceAssetId: 'bitcoin',
+  symbol: 'BTC',
+  name: 'Bitcoin',
+  caip19: ['eip155:1/slip44:0'],
+};
+
+const tslaAsset: RelatedAsset = {
+  sourceAssetId: 'tsla',
+  symbol: 'TSLA',
+  name: 'Tesla',
+  caip19: [],
+  hlPerpsMarket: ['xyz:TSLA'],
+};
+
+const ethDualAsset: RelatedAsset = {
+  sourceAssetId: 'eth',
+  symbol: 'ETH',
+  name: 'Ethereum',
+  caip19: ['eip155:1/slip44:60'],
+  hlPerpsMarket: ['ETH'],
+};
+
+const makeItem = (relatedAssets: RelatedAsset[]): WhatsHappeningItem => ({
+  id: 'trend-0',
+  title: 'Test',
+  description: 'Test description',
+  date: '2026-01-01T00:00:00.000Z',
+  impact: 'positive',
+  relatedAssets,
+  articles: [],
+});
+
+// ── Tests ──────────────────────────────────────────────────────────────────────
+
+describe('useWhatsHappeningAssetPrices', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockHandleFetch.mockResolvedValue({});
+    mockUsePerpsLivePrices.mockReturnValue({});
+  });
+
+  describe('token price fetching', () => {
+    it('skips fetch when there are no caip19 IDs', async () => {
+      const item = makeItem([tslaAsset]);
+      const { result } = renderHook(() => useWhatsHappeningAssetPrices(item));
+      await waitFor(() => {
+        expect(result.current.tokenPriceByCaip).toEqual({});
+      });
+      expect(mockHandleFetch).not.toHaveBeenCalled();
+    });
+
+    it('fetches token prices and populates tokenPriceByCaip map', async () => {
+      const caip = 'eip155:1/slip44:0';
+      mockHandleFetch.mockResolvedValueOnce({
+        [caip]: { price: 95000, pricePercentChange1d: 2.5 },
+      });
+      const item = makeItem([btcAsset]);
+      const { result } = renderHook(() => useWhatsHappeningAssetPrices(item));
+      await waitFor(() => {
+        expect(result.current.tokenPriceByCaip[caip]).toBeDefined();
+      });
+      expect(result.current.tokenPriceByCaip[caip]).toEqual({
+        price: 95000,
+        pricePercentChange1d: 2.5,
+      });
+    });
+
+    it('deduplicates caip19 IDs and fires a single fetch', async () => {
+      const caip = 'eip155:1/slip44:0';
+      const duplicateAsset: RelatedAsset = {
+        ...btcAsset,
+        sourceAssetId: 'btc2',
+      };
+      mockHandleFetch.mockResolvedValueOnce({
+        [caip]: { price: 95000, pricePercentChange1d: 2.5 },
+      });
+      const item = makeItem([btcAsset, duplicateAsset]);
+      renderHook(() => useWhatsHappeningAssetPrices(item));
+      await waitFor(() => {
+        expect(mockHandleFetch).toHaveBeenCalledTimes(1);
+      });
+      // URL should contain caip only once
+      const url: string = mockHandleFetch.mock.calls[0][0];
+      const encodedCaip = encodeURIComponent(caip);
+      expect(url.split(encodedCaip).length - 1).toBe(1);
+    });
+
+    it('yields empty token map on fetch error (no crash)', async () => {
+      mockHandleFetch.mockRejectedValueOnce(new Error('Network error'));
+      const item = makeItem([btcAsset]);
+      const { result } = renderHook(() => useWhatsHappeningAssetPrices(item));
+      await waitFor(() => {
+        // After error, map is reset to {}
+        expect(result.current.tokenPriceByCaip).toEqual({});
+      });
+    });
+  });
+
+  describe('perps live price subscription', () => {
+    it('returns empty perpsPriceBySymbol when there are no hlPerpsMarket entries', () => {
+      const item = makeItem([btcAsset]);
+      const { result } = renderHook(() => useWhatsHappeningAssetPrices(item));
+      expect(result.current.perpsPriceBySymbol).toEqual({});
+    });
+
+    it('passes symbols to usePerpsLivePrices without duplicates', () => {
+      const item = makeItem([
+        tslaAsset,
+        { ...tslaAsset, sourceAssetId: 'tsla2' },
+      ]);
+      renderHook(() => useWhatsHappeningAssetPrices(item));
+      expect(mockUsePerpsLivePrices).toHaveBeenCalledWith({
+        symbols: ['xyz:TSLA'],
+        throttleMs: 3000,
+      });
+    });
+
+    it('populates perpsPriceBySymbol from live prices', () => {
+      mockUsePerpsLivePrices.mockReturnValue({
+        'xyz:TSLA': { price: '172.50', percentChange24h: '3.45' },
+      });
+      const item = makeItem([tslaAsset]);
+      const { result } = renderHook(() => useWhatsHappeningAssetPrices(item));
+      expect(result.current.perpsPriceBySymbol['xyz:TSLA']).toEqual({
+        price: 172.5,
+        percentChange24h: 3.45,
+      });
+    });
+
+    it('handles missing percentChange24h gracefully', () => {
+      mockUsePerpsLivePrices.mockReturnValue({
+        'xyz:TSLA': { price: '172.50' },
+      });
+      const item = makeItem([tslaAsset]);
+      const { result } = renderHook(() => useWhatsHappeningAssetPrices(item));
+      expect(result.current.perpsPriceBySymbol['xyz:TSLA']).toMatchObject({
+        price: 172.5,
+        percentChange24h: undefined,
+      });
+    });
+  });
+
+  describe('mixed assets', () => {
+    it('handles dual assets (both caip19 and hlPerpsMarket) correctly', async () => {
+      const caip = 'eip155:1/slip44:60';
+      mockHandleFetch.mockResolvedValueOnce({
+        [caip]: { price: 3500, pricePercentChange1d: 1.2 },
+      });
+      mockUsePerpsLivePrices.mockReturnValue({
+        ETH: { price: '3500', percentChange24h: '1.2' },
+      });
+      const item = makeItem([ethDualAsset]);
+      const { result } = renderHook(() => useWhatsHappeningAssetPrices(item));
+      await waitFor(() => {
+        expect(result.current.tokenPriceByCaip[caip]?.price).toBe(3500);
+      });
+      expect(result.current.perpsPriceBySymbol.ETH?.price).toBe(3500);
+    });
+  });
+
+  describe('cleanup', () => {
+    it('does not update state after unmount (stale fetch is discarded)', async () => {
+      let resolvePromise!: (value: unknown) => void;
+      mockHandleFetch.mockImplementationOnce(
+        () =>
+          new Promise((resolve) => {
+            resolvePromise = resolve;
+          }),
+      );
+      const item = makeItem([btcAsset]);
+      const { unmount } = renderHook(() => useWhatsHappeningAssetPrices(item));
+      unmount();
+      // Now resolve after unmount — should not cause state update warnings
+      await act(async () => {
+        resolvePromise({ 'eip155:1/slip44:0': { price: 95000 } });
+      });
+      // If we reach here without error, the cleanup is working correctly
+      expect(true).toBe(true);
+    });
+  });
+});
diff --git a/app/components/Views/WhatsHappeningDetailView/hooks/useWhatsHappeningAssetPrices.ts b/app/components/Views/WhatsHappeningDetailView/hooks/useWhatsHappeningAssetPrices.ts
new file mode 100644
index 00000000000..f9fd2ef84c4
--- /dev/null
+++ b/app/components/Views/WhatsHappeningDetailView/hooks/useWhatsHappeningAssetPrices.ts
@@ -0,0 +1,145 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { handleFetch } from '@metamask/controller-utils';
+import type { WhatsHappeningItem } from '../../Homepage/Sections/WhatsHappening/types';
+import { selectCurrentCurrency } from '../../../../selectors/currencyRateController';
+import { usePerpsLivePrices } from '../../../UI/Perps/hooks/stream';
+
+export interface TokenPriceEntry {
+  price: number | undefined;
+  pricePercentChange1d: number | undefined;
+}
+
+export interface PerpsPriceEntry {
+  price: number | undefined;
+  percentChange24h: number | undefined;
+}
+
+export interface UseWhatsHappeningAssetPricesResult {
+  /** Map from caip19 asset ID → price data */
+  tokenPriceByCaip: Record<string, TokenPriceEntry>;
+  /** Map from HyperLiquid perps symbol → price data */
+  perpsPriceBySymbol: Record<string, PerpsPriceEntry>;
+}
+
+interface PriceApiResponse {
+  [assetId: string]: {
+    price?: number;
+    pricePercentChange1d?: number;
+  };
+}
+
+/**
+ * Fetches and returns live price data for all assets related to a "What's Happening"
+ * card item. Token prices come from the MetaMask Price API (batched); perps prices
+ * come from the live WebSocket stream via `usePerpsLivePrices`.
+ *
+ * The hook is designed to be called once per expanded card so that only
+ * visible cards trigger fetches and subscriptions.
+ */
+export function useWhatsHappeningAssetPrices(
+  item: WhatsHappeningItem,
+): UseWhatsHappeningAssetPricesResult {
+  const currentCurrency = useSelector(selectCurrentCurrency);
+
+  // Deduplicated list of caip19 IDs for token price fetching
+  const tokenCaip19s = useMemo(
+    () => [...new Set(item.relatedAssets.flatMap((a) => a.caip19 ?? []))],
+    [item.relatedAssets],
+  );
+
+  // Deduplicated list of perps symbols for live price subscription
+  const perpsSymbols = useMemo(
+    () => [
+      ...new Set(item.relatedAssets.flatMap((a) => a.hlPerpsMarket ?? [])),
+    ],
+    [item.relatedAssets],
+  );
+
+  const [tokenPriceByCaip, setTokenPriceByCaip] = useState<
+    Record<string, TokenPriceEntry>
+  >({});
+
+  // Track the latest fetch to discard stale responses
+  const fetchIdRef = useRef(0);
+
+  useEffect(() => {
+    if (tokenCaip19s.length === 0) {
+      setTokenPriceByCaip({});
+      return;
+    }
+
+    const fetchId = ++fetchIdRef.current;
+
+    const fetchPrices = async () => {
+      try {
+        const assetIds = tokenCaip19s.join(',');
+        const url = `https://price.api.cx.metamask.io/v3/spot-prices?${new URLSearchParams(
+          {
+            assetIds,
+            includeMarketData: 'true',
+            vsCurrency: currentCurrency.toLowerCase(),
+          },
+        )}`;
+
+        const response = (await handleFetch(url)) as PriceApiResponse;
+
+        if (fetchId !== fetchIdRef.current) return;
+
+        const map: Record<string, TokenPriceEntry> = {};
+        for (const caip of tokenCaip19s) {
+          const entry = response[caip];
+          map[caip] = {
+            price: entry?.price,
+            pricePercentChange1d: entry?.pricePercentChange1d,
+          };
+        }
+        setTokenPriceByCaip(map);
+      } catch {
+        if (fetchId !== fetchIdRef.current) return;
+        // On error, keep existing state — shows "—" in the UI
+        setTokenPriceByCaip({});
+      }
+    };
+
+    fetchPrices();
+  }, [tokenCaip19s, currentCurrency]);
+
+  // Invalidate any in-flight fetch on unmount
+  useEffect(
+    () => () => {
+      fetchIdRef.current++;
+    },
+    [],
+  );
+
+  // Live perps prices via WebSocket
+  const livePerpsPrices = usePerpsLivePrices({
+    symbols: perpsSymbols,
+    throttleMs: 3000,
+  });
+
+  const perpsPriceBySymbol = useMemo<Record<string, PerpsPriceEntry>>(() => {
+    const map: Record<string, PerpsPriceEntry> = {};
+    for (const symbol of perpsSymbols) {
+      const liveEntry = livePerpsPrices[symbol];
+      if (!liveEntry) {
+        map[symbol] = { price: undefined, percentChange24h: undefined };
+        continue;
+      }
+      const rawPrice = parseFloat(liveEntry.price);
+      const rawChange = liveEntry.percentChange24h
+        ? parseFloat(liveEntry.percentChange24h)
+        : undefined;
+      map[symbol] = {
+        price: isNaN(rawPrice) ? undefined : rawPrice,
+        percentChange24h:
+          rawChange !== undefined && isNaN(rawChange) ? undefined : rawChange,
+      };
+    }
+    return map;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [perpsSymbols, livePerpsPrices]);
+
+  return { tokenPriceByCaip, perpsPriceBySymbol };
+}
diff --git a/app/components/Views/WhatsHappeningDetailView/utils/formatAssetPrice.test.ts b/app/components/Views/WhatsHappeningDetailView/utils/formatAssetPrice.test.ts
new file mode 100644
index 00000000000..8259436da86
--- /dev/null
+++ b/app/components/Views/WhatsHappeningDetailView/utils/formatAssetPrice.test.ts
@@ -0,0 +1,106 @@
+import { TextColor } from '@metamask/design-system-react-native';
+import {
+  formatPrice,
+  formatPercentageChange,
+  formatAssetPrice,
+} from './formatAssetPrice';
+
+describe('formatPrice', () => {
+  it('formats a USD price with 2 decimal places', () => {
+    expect(formatPrice(1.0, 'USD')).toBe('$1.00');
+  });
+
+  it('formats a large USD price with comma separators', () => {
+    const result = formatPrice(95000, 'USD');
+    expect(result).toBe('$95,000.00');
+  });
+
+  it('handles fractional cents', () => {
+    const result = formatPrice(0.9998, 'USD');
+    expect(result).toBe('$1.00');
+  });
+
+  it('falls back to plain format for invalid currency codes', () => {
+    const result = formatPrice(100, 'INVALID_CURRENCY_XYZ');
+    // Should not throw; returns a fallback string
+    expect(result).toBeTruthy();
+    expect(result).toContain('100');
+  });
+});
+
+describe('formatPercentageChange', () => {
+  it('returns dash text and alternative color when change is undefined', () => {
+    const { text, color } = formatPercentageChange(undefined);
+    expect(text).toBeUndefined();
+    expect(color).toBe(TextColor.TextAlternative);
+  });
+
+  it('returns positive sign and success color for positive change', () => {
+    const { text, color } = formatPercentageChange(3.45);
+    expect(text).toBe('+3.45%');
+    expect(color).toBe(TextColor.SuccessDefault);
+  });
+
+  it('returns negative sign and error color for negative change', () => {
+    const { text, color } = formatPercentageChange(-1.23);
+    expect(text).toBe('-1.23%');
+    expect(color).toBe(TextColor.ErrorDefault);
+  });
+
+  it('returns alternative color for zero change', () => {
+    const { text, color } = formatPercentageChange(0);
+    expect(text).toBe('+0.00%');
+    expect(color).toBe(TextColor.TextAlternative);
+  });
+
+  it('returns undefined text and alternative color for NaN', () => {
+    const { text, color } = formatPercentageChange(NaN);
+    expect(text).toBeUndefined();
+    expect(color).toBe(TextColor.TextAlternative);
+  });
+
+  it('returns undefined text and alternative color for Infinity', () => {
+    const { text, color } = formatPercentageChange(Infinity);
+    expect(text).toBeUndefined();
+    expect(color).toBe(TextColor.TextAlternative);
+  });
+});
+
+describe('formatAssetPrice', () => {
+  it('returns dash when price is undefined', () => {
+    const result = formatAssetPrice(undefined, undefined, 'USD');
+    expect(result.priceText).toBe('—');
+    expect(result.changeText).toBeUndefined();
+    expect(result.changeColor).toBe(TextColor.TextAlternative);
+  });
+
+  it('returns formatted price with undefined change when change is undefined', () => {
+    const result = formatAssetPrice(100, undefined, 'USD');
+    expect(result.priceText).toBe('$100.00');
+    expect(result.changeText).toBeUndefined();
+  });
+
+  it('returns formatted price and positive change with success color', () => {
+    const result = formatAssetPrice(95000, 2.5, 'USD');
+    expect(result.priceText).toBe('$95,000.00');
+    expect(result.changeText).toBe('+2.50%');
+    expect(result.changeColor).toBe(TextColor.SuccessDefault);
+  });
+
+  it('returns formatted price and negative change with error color', () => {
+    const result = formatAssetPrice(95000, -1.23, 'USD');
+    expect(result.priceText).toBe('$95,000.00');
+    expect(result.changeText).toBe('-1.23%');
+    expect(result.changeColor).toBe(TextColor.ErrorDefault);
+  });
+
+  it('returns dash when price is NaN', () => {
+    const result = formatAssetPrice(NaN, 1, 'USD');
+    expect(result.priceText).toBe('—');
+  });
+
+  it('returns dash when price is null-like undefined', () => {
+    const result = formatAssetPrice(null as unknown as undefined, 0, 'USD');
+    expect(result.priceText).toBe('—');
+  });
+});
diff --git a/app/components/Views/WhatsHappeningDetailView/utils/formatAssetPrice.ts b/app/components/Views/WhatsHappeningDetailView/utils/formatAssetPrice.ts
new file mode 100644
index 00000000000..980839ae11c
--- /dev/null
+++ b/app/components/Views/WhatsHappeningDetailView/utils/formatAssetPrice.ts
@@ -0,0 +1,74 @@
+import { TextColor } from '@metamask/design-system-react-native';
+
+export interface FormattedAssetPrice {
+  priceText: string;
+  changeText: string | undefined;
+  changeColor: TextColor;
+}
+
+/**
+ * Formats a fiat price for display. Mirrors the logic used in `PopularTokenRow`
+ * and `TokenListItem` — fixed 2 decimal places with currency symbol.
+ */
+export function formatPrice(
+  price: number,
+  currency: string | undefined,
+): string {
+  const safeCurrency = currency?.toUpperCase() || 'USD';
+  try {
+    return new Intl.NumberFormat(undefined, {
+      style: 'currency',
+      currency: safeCurrency,
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    }).format(price);
+  } catch {
+    return `${safeCurrency} ${price.toFixed(2)}`;
+  }
+}
+
+/**
+ * Returns the text and color for a 24h percentage change value.
+ * Positive → success green, negative → error red, zero/undefined → muted.
+ */
+export function formatPercentageChange(change: number | undefined): {
+  text: string | undefined;
+  color: TextColor;
+} {
+  if (change === undefined || change === null || !Number.isFinite(change)) {
+    return { text: undefined, color: TextColor.TextAlternative };
+  }
+
+  const sign = change >= 0 ? '+' : '';
+  const text = `${sign}${change.toFixed(2)}%`;
+
+  let color: TextColor = TextColor.TextAlternative;
+  if (change > 0) {
+    color = TextColor.SuccessDefault;
+  } else if (change < 0) {
+    color = TextColor.ErrorDefault;
+  }
+
+  return { text, color };
+}
+
+/**
+ * Builds a `FormattedAssetPrice` display object for a token or perps asset.
+ * `currency` is expected to be an ISO 4217 code (e.g. "USD", "EUR").
+ * For perps, currency should always be "USD".
+ */
+export function formatAssetPrice(
+  price: number | undefined,
+  pricePercentChange: number | undefined,
+  currency: string | undefined,
+): FormattedAssetPrice {
+  const priceText =
+    price !== undefined && price !== null && Number.isFinite(price)
+      ? formatPrice(price, currency)
+      : '—';
+
+  const { text: changeText, color: changeColor } =
+    formatPercentageChange(pricePercentChange);
+
+  return { priceText, changeText, changeColor };
+}
diff --git a/ios/MetaMask.xcodeproj/project.pbxproj b/ios/MetaMask.xcodeproj/project.pbxproj
index feaae11162e..f29b89d59c1 100644
--- a/ios/MetaMask.xcodeproj/project.pbxproj
+++ b/ios/MetaMask.xcodeproj/project.pbxproj
@@ -88,13 +88,13 @@
 		E4B580762E33A001008165E1 /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = E4B580752E33A001008165E1 /* AppDelegate.swift */; };
 		E4B580772E33A001008165E1 /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = E4B580752E33A001008165E1 /* AppDelegate.swift */; };
 		E4B580782E33A001008165E1 /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = E4B580752E33A001008165E1 /* AppDelegate.swift */; };
-		F0B2A3E101000001000000A1 /* BrazeHelper.mm in Sources */ = {isa = PBXBuildFile; fileRef = F0B2A3E101000001000000A0 /* BrazeHelper.mm */; };
-		F0B2A3E101000001000000A2 /* BrazeHelper.mm in Sources */ = {isa = PBXBuildFile; fileRef = F0B2A3E101000001000000A0 /* BrazeHelper.mm */; };
-		F0B2A3E101000001000000A3 /* BrazeHelper.mm in Sources */ = {isa = PBXBuildFile; fileRef = F0B2A3E101000001000000A0 /* BrazeHelper.mm */; };
 		E83DB5522BBDF2AA00536063 /* PrivacyInfo.xcprivacy in Resources */ = {isa = PBXBuildFile; fileRef = E83DB5392BBDB14700536063 /* PrivacyInfo.xcprivacy */; };
 		E83DB5532BBDF2AE00536063 /* PrivacyInfo.xcprivacy in Resources */ = {isa = PBXBuildFile; fileRef = E83DB5392BBDB14700536063 /* PrivacyInfo.xcprivacy */; };
 		E83DB5542BBDF2AF00536063 /* PrivacyInfo.xcprivacy in Resources */ = {isa = PBXBuildFile; fileRef = E83DB5392BBDB14700536063 /* PrivacyInfo.xcprivacy */; };
 		ED2E8FE6D71BE9319F3B27D3 /* libPods-MetaMask.a in Frameworks */ = {isa = PBXBuildFile; fileRef = D2632307C64595BE1B8ABEAF /* libPods-MetaMask.a */; };
+		F0B2A3E101000001000000A1 /* BrazeHelper.mm in Sources */ = {isa = PBXBuildFile; fileRef = F0B2A3E101000001000000A0 /* BrazeHelper.mm */; };
+		F0B2A3E101000001000000A2 /* BrazeHelper.mm in Sources */ = {isa = PBXBuildFile; fileRef = F0B2A3E101000001000000A0 /* BrazeHelper.mm */; };
+		F0B2A3E101000001000000A3 /* BrazeHelper.mm in Sources */ = {isa = PBXBuildFile; fileRef = F0B2A3E101000001000000A0 /* BrazeHelper.mm */; };
 		F23972D16903249A8EC120BD /* ExpoModulesProvider.swift in Sources */ = {isa = PBXBuildFile; fileRef = 8EB256CB3A1A7A1D942A95F6 /* ExpoModulesProvider.swift */; };
 		F961A37228105CF9007442B5 /* LinkPresentation.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = F961A36A28105CF9007442B5 /* LinkPresentation.framework */; settings = {ATTRIBUTES = (Weak, ); }; };
 /* End PBXBuildFile section */
@@ -242,11 +242,11 @@
 		D3350113F0764105B1E60002 /* MMSans-Bold.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "MMSans-Bold.otf"; path = "../app/fonts/MMSans-Bold.otf"; sourceTree = "<group>"; };
 		E4B580712E32F462008165E1 /* Expo.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Expo.plist; sourceTree = "<group>"; };
 		E4B580752E33A001008165E1 /* AppDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MetaMask/AppDelegate.swift; sourceTree = "<group>"; };
-		F0B2A3E101000001000000A0 /* BrazeHelper.mm */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.cpp.objcpp; path = MetaMask/BrazeHelper.mm; sourceTree = "<group>"; };
 		E7EEA32C976A46B991D55FD4 /* ExpoModulesProvider.swift */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = sourcecode.swift; name = ExpoModulesProvider.swift; path = "Pods/Target Support Files/Pods-MetaMask-QA/ExpoModulesProvider.swift"; sourceTree = "<group>"; };
 		E83DB5392BBDB14700536063 /* PrivacyInfo.xcprivacy */ = {isa = PBXFileReference; lastKnownFileType = text.xml; name = PrivacyInfo.xcprivacy; path = MetaMask/PrivacyInfo.xcprivacy; sourceTree = SOURCE_ROOT; };
 		E9629905BA1940ADA4189921 /* Feather.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = Feather.ttf; path = "../node_modules/react-native-vector-icons/Fonts/Feather.ttf"; sourceTree = "<group>"; };
 		EBC2B6371CD846D28B9FAADF /* FontAwesome5_Regular.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = FontAwesome5_Regular.ttf; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Regular.ttf"; sourceTree = "<group>"; };
+		F0B2A3E101000001000000A0 /* BrazeHelper.mm */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.cpp.objcpp; path = MetaMask/BrazeHelper.mm; sourceTree = "<group>"; };
 		F10E7EBF946A4F6D8E229143 /* MMPoly-Regular.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "MMPoly-Regular.otf"; path = "../app/fonts/MMPoly-Regular.otf"; sourceTree = "<group>"; };
 		F1CCBB0591B4D16C1710A05D /* Pods-MetaMask-Flask.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-MetaMask-Flask.release.xcconfig"; path = "Target Support Files/Pods-MetaMask-Flask/Pods-MetaMask-Flask.release.xcconfig"; sourceTree = "<group>"; };
 		F3C919D8F42C47389FF643E7 /* MMSans-Regular.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "MMSans-Regular.otf"; path = "../app/fonts/MMSans-Regular.otf"; sourceTree = "<group>"; };

From e2bc8928c0507bd427a04440ff42ca8c07b17a6c Mon Sep 17 00:00:00 2001
From: Antonio Regadas <antonio.regadas@consensys.net>
Date: Fri, 8 May 2026 14:18:52 +0100
Subject: [PATCH 2/8] chore: prices, AI badge, bullets, and spacing

---
 .../WhatsHappeningDetailView.tsx              | 107 ++++----
 .../components/PerpsRow.test.tsx              |  80 +++++-
 .../components/PerpsRow.tsx                   |  39 ++-
 .../components/TokenRow.test.tsx              | 254 ------------------
 .../components/TokenRow.tsx                   | 152 -----------
 .../WhatsHappeningExpandedCard.test.tsx       | 116 ++------
 .../components/WhatsHappeningExpandedCard.tsx |  73 ++---
 .../useWhatsHappeningAssetPrices.test.ts      | 161 +++--------
 .../hooks/useWhatsHappeningAssetPrices.ts     |  98 +------
 locales/languages/en.json                     |   2 +
 10 files changed, 259 insertions(+), 823 deletions(-)
 delete mode 100644 app/components/Views/WhatsHappeningDetailView/components/TokenRow.test.tsx
 delete mode 100644 app/components/Views/WhatsHappeningDetailView/components/TokenRow.tsx

diff --git a/app/components/Views/WhatsHappeningDetailView/WhatsHappeningDetailView.tsx b/app/components/Views/WhatsHappeningDetailView/WhatsHappeningDetailView.tsx
index da3652aaaad..e2930ad89f9 100644
--- a/app/components/Views/WhatsHappeningDetailView/WhatsHappeningDetailView.tsx
+++ b/app/components/Views/WhatsHappeningDetailView/WhatsHappeningDetailView.tsx
@@ -31,6 +31,7 @@ import ErrorState from '../Homepage/components/ErrorState/ErrorState';
 import WhatsHappeningExpandedCard from './components/WhatsHappeningExpandedCard';
 import WhatsHappeningSourcesBottomSheet from './components/WhatsHappeningSourcesBottomSheet';
 import PageIndicator from './components/PageIndicator';
+import { PerpsStreamProvider } from '../../UI/Perps/providers/PerpsStreamManager';
 import { MetaMetricsEvents } from '../../../core/Analytics';
 import { useAnalytics } from '../../hooks/useAnalytics/useAnalytics';
 
@@ -210,64 +211,66 @@ const WhatsHappeningDetailView = () => {
         <Box twClassName="w-10" />
       </Box>
 
-      <Box twClassName="flex-1">
-        {isLoading ? (
-          <ScrollView
-            horizontal
-            showsHorizontalScrollIndicator={false}
-            contentContainerStyle={tw.style('px-4 gap-3 items-stretch')}
-            testID="whats-happening-detail-skeleton"
-          >
-            {SKELETON_KEYS.map((key) => (
-              <WhatsHappeningCardSkeleton key={key} />
-            ))}
-          </ScrollView>
-        ) : hasError ? (
-          <ErrorState
-            title={strings('homepage.error.unable_to_load', {
-              section: strings(
-                'homepage.sections.whats_happening',
-              ).toLowerCase(),
-            })}
-            onRetry={refresh}
-          />
-        ) : (
-          <>
+      <PerpsStreamProvider>
+        <Box twClassName="flex-1">
+          {isLoading ? (
             <ScrollView
-              ref={scrollViewRef}
               horizontal
               showsHorizontalScrollIndicator={false}
-              decelerationRate="fast"
-              snapToInterval={SNAP_INTERVAL}
-              snapToAlignment="start"
-              style={tw`flex-1`}
-              contentContainerStyle={tw.style('px-4 gap-3')}
-              onLayout={handleCarouselLayout}
-              onContentSizeChange={handleContentSizeChange}
-              onScroll={handleScroll}
-              scrollEventThrottle={16}
-              onMomentumScrollEnd={handleScrollEnd}
-              testID="whats-happening-detail-carousel"
+              contentContainerStyle={tw.style('px-4 gap-3 items-stretch')}
+              testID="whats-happening-detail-skeleton"
             >
-              {cardHeight > 0 &&
-                items.map((item, index) => (
-                  <WhatsHappeningExpandedCard
-                    key={item.id}
-                    item={item}
-                    cardIndex={index}
-                    cardWidth={CARD_WIDTH}
-                    cardHeight={cardHeight}
-                    onSourcesPress={(articles) =>
-                      handleSourcesPress(articles, item, index)
-                    }
-                  />
-                ))}
+              {SKELETON_KEYS.map((key) => (
+                <WhatsHappeningCardSkeleton key={key} />
+              ))}
             </ScrollView>
+          ) : hasError ? (
+            <ErrorState
+              title={strings('homepage.error.unable_to_load', {
+                section: strings(
+                  'homepage.sections.whats_happening',
+                ).toLowerCase(),
+              })}
+              onRetry={refresh}
+            />
+          ) : (
+            <>
+              <ScrollView
+                ref={scrollViewRef}
+                horizontal
+                showsHorizontalScrollIndicator={false}
+                decelerationRate="fast"
+                snapToInterval={SNAP_INTERVAL}
+                snapToAlignment="start"
+                style={tw`flex-1`}
+                contentContainerStyle={tw.style('px-4 gap-3')}
+                onLayout={handleCarouselLayout}
+                onContentSizeChange={handleContentSizeChange}
+                onScroll={handleScroll}
+                scrollEventThrottle={16}
+                onMomentumScrollEnd={handleScrollEnd}
+                testID="whats-happening-detail-carousel"
+              >
+                {cardHeight > 0 &&
+                  items.map((item, index) => (
+                    <WhatsHappeningExpandedCard
+                      key={item.id}
+                      item={item}
+                      cardIndex={index}
+                      cardWidth={CARD_WIDTH}
+                      cardHeight={cardHeight}
+                      onSourcesPress={(articles) =>
+                        handleSourcesPress(articles, item, index)
+                      }
+                    />
+                  ))}
+              </ScrollView>
 
-            <PageIndicator count={items.length} activeIndex={currentIndex} />
-          </>
-        )}
-      </Box>
+              <PageIndicator count={items.length} activeIndex={currentIndex} />
+            </>
+          )}
+        </Box>
+      </PerpsStreamProvider>
       {sourcesContext && (
         <WhatsHappeningSourcesBottomSheet
           onClose={handleSourcesClose}
diff --git a/app/components/Views/WhatsHappeningDetailView/components/PerpsRow.test.tsx b/app/components/Views/WhatsHappeningDetailView/components/PerpsRow.test.tsx
index c4cde86941b..84835ba9856 100644
--- a/app/components/Views/WhatsHappeningDetailView/components/PerpsRow.test.tsx
+++ b/app/components/Views/WhatsHappeningDetailView/components/PerpsRow.test.tsx
@@ -36,12 +36,18 @@ jest.mock('../../../hooks/useAnalytics/useAnalytics', () => ({
   }),
 }));
 
-// TokenListSecurityBadge is not used in PerpsRow, but mock it just in case
 jest.mock(
   '../../../UI/Tokens/components/TokenListSecurityBadge/TokenListSecurityBadge',
   () => 'TokenListSecurityBadge',
 );
 
+jest.mock(
+  '../../../../selectors/featureFlagController/tokenListSecurityBadges',
+  () => ({
+    selectTokenListSecurityBadgesEnabled: jest.fn(() => true),
+  }),
+);
+
 const perpsOnlyAsset: RelatedAsset = {
   sourceAssetId: 'tsla',
   symbol: 'TSLA',
@@ -50,6 +56,7 @@ const perpsOnlyAsset: RelatedAsset = {
   hlPerpsMarket: ['xyz:TSLA'],
 };
 
+/** Asset that has both a perps market AND a caip19 id — eligible for badge */
 const dualAsset: RelatedAsset = {
   sourceAssetId: 'bitcoin',
   symbol: 'BTC',
@@ -153,7 +160,7 @@ describe('PerpsRow', () => {
     expect(mockNavigate).not.toHaveBeenCalled();
   });
 
-  it('tracks Whats Happening Interaction with interaction_type=trade_pressed and asset details on Trade press', () => {
+  it('tracks Whats Happening Interaction on Trade press', () => {
     renderWithProvider(
       <PerpsRow
         asset={perpsOnlyAsset}
@@ -211,12 +218,11 @@ describe('PerpsRow', () => {
         perpsPriceBySymbol={priceMap}
       />,
     );
-    // Price formatted in USD
     expect(screen.getByText('$172.50')).toBeOnTheScreen();
     expect(screen.getByText('+3.45%')).toBeOnTheScreen();
   });
 
-  it('shows dash for price when no price entry is available', () => {
+  it('shows no price text when no price entry is available', () => {
     renderWithProvider(
       <PerpsRow
         asset={perpsOnlyAsset}
@@ -225,7 +231,71 @@ describe('PerpsRow', () => {
         perpsPriceBySymbol={emptyPriceMap}
       />,
     );
-    // When no price map entry exists, no secondary line is rendered
     expect(screen.queryByText('$')).toBeNull();
   });
+
+  describe('verified badge gating', () => {
+    it('renders TokenListSecurityBadge when asset has caip19 and feature flags are enabled', () => {
+      renderWithProvider(
+        <PerpsRow
+          asset={dualAsset}
+          item={mockItem}
+          cardIndex={0}
+          perpsPriceBySymbol={emptyPriceMap}
+        />,
+        {
+          state: {
+            settings: { basicFunctionalityEnabled: true },
+          },
+        },
+      );
+      const badge = screen.UNSAFE_getByType(
+        'TokenListSecurityBadge' as unknown as React.ComponentType,
+      );
+      expect(badge).toBeTruthy();
+      expect(badge.props.caipAssetId).toBe('eip155:1/slip44:0');
+    });
+
+    it('does not render TokenListSecurityBadge when basicFunctionalityEnabled is false', () => {
+      renderWithProvider(
+        <PerpsRow
+          asset={dualAsset}
+          item={mockItem}
+          cardIndex={0}
+          perpsPriceBySymbol={emptyPriceMap}
+        />,
+        {
+          state: {
+            settings: { basicFunctionalityEnabled: false },
+          },
+        },
+      );
+      expect(
+        screen.UNSAFE_queryByType(
+          'TokenListSecurityBadge' as unknown as React.ComponentType,
+        ),
+      ).toBeNull();
+    });
+
+    it('does not render TokenListSecurityBadge for a perps-only asset (no caip19)', () => {
+      renderWithProvider(
+        <PerpsRow
+          asset={perpsOnlyAsset}
+          item={mockItem}
+          cardIndex={0}
+          perpsPriceBySymbol={emptyPriceMap}
+        />,
+        {
+          state: {
+            settings: { basicFunctionalityEnabled: true },
+          },
+        },
+      );
+      expect(
+        screen.UNSAFE_queryByType(
+          'TokenListSecurityBadge' as unknown as React.ComponentType,
+        ),
+      ).toBeNull();
+    });
+  });
 });
diff --git a/app/components/Views/WhatsHappeningDetailView/components/PerpsRow.tsx b/app/components/Views/WhatsHappeningDetailView/components/PerpsRow.tsx
index 6b8724986d6..111e1a16bb6 100644
--- a/app/components/Views/WhatsHappeningDetailView/components/PerpsRow.tsx
+++ b/app/components/Views/WhatsHappeningDetailView/components/PerpsRow.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback, useMemo } from 'react';
 import { useSelector } from 'react-redux';
+import type { CaipAssetType } from '@metamask/utils';
 import type { RelatedAsset } from '@metamask/ai-controllers';
 import { strings } from '../../../../../locales/i18n';
 import { MetaMetricsEvents } from '../../../../core/Analytics';
@@ -8,10 +9,11 @@ import { WhatsHappeningInteractionType } from '../../Homepage/Sections/WhatsHapp
 import { getWhatsHappeningEventProps } from '../../Homepage/Sections/WhatsHappening/eventProperties';
 import type { WhatsHappeningItem } from '../../Homepage/Sections/WhatsHappening/types';
 import { formatAssetPrice } from '../utils/formatAssetPrice';
-import { selectCurrentCurrency } from '../../../../selectors/currencyRateController';
+import { selectTokenListSecurityBadgesEnabled } from '../../../../selectors/featureFlagController/tokenListSecurityBadges';
 import type { PerpsPriceEntry } from '../hooks/useWhatsHappeningAssetPrices';
 import AssetRow from './AssetRow';
 import useTradeNavigation from '../hooks/useTradeNavigation';
+import type { RootState } from '../../../../reducers';
 
 interface PerpsRowProps {
   asset: RelatedAsset;
@@ -22,9 +24,9 @@ interface PerpsRowProps {
 }
 
 /**
- * A single row in the Perps section of the expanded What's Happening card.
- * Displays the asset logo and name with a Trade button and live price/change.
- * Extracted as its own component so hooks can be called per-asset.
+ * A single row for a perps asset in the expanded What's Happening card.
+ * Shows logo, name, optional verified badge (for assets that also have caip19),
+ * live price/change, and a Trade button.
  */
 const PerpsRow: React.FC<PerpsRowProps> = ({
   asset,
@@ -34,16 +36,38 @@ const PerpsRow: React.FC<PerpsRowProps> = ({
 }) => {
   const { handleTrade } = useTradeNavigation(asset);
   const { trackEvent, createEventBuilder } = useAnalytics();
-  const currentCurrency = useSelector(selectCurrentCurrency);
+  const isTokenListSecurityBadgesEnabled = useSelector(
+    selectTokenListSecurityBadgesEnabled,
+  );
+  const basicFunctionalityEnabled = useSelector(
+    (state: RootState) => state.settings.basicFunctionalityEnabled,
+  );
+
+  // Show verified badge for assets that also have a caip19 identifier
+  const caipAssetId = useMemo(() => {
+    const firstCaip = asset.caip19?.[0];
+    if (
+      !firstCaip ||
+      !basicFunctionalityEnabled ||
+      !isTokenListSecurityBadgesEnabled
+    ) {
+      return undefined;
+    }
+    return firstCaip as CaipAssetType;
+  }, [
+    asset.caip19,
+    basicFunctionalityEnabled,
+    isTokenListSecurityBadgesEnabled,
+  ]);
 
-  // Perps prices are quoted in USD regardless of user currency preference
+  // Perps prices are always quoted in USD
   const secondaryLine = useMemo(() => {
     const symbol = asset.hlPerpsMarket?.[0];
     if (!symbol) return undefined;
     const entry = perpsPriceBySymbol[symbol];
     if (!entry) return undefined;
     return formatAssetPrice(entry.price, entry.percentChange24h, 'USD');
-  }, [asset.hlPerpsMarket, perpsPriceBySymbol, currentCurrency]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [asset.hlPerpsMarket, perpsPriceBySymbol]);
 
   const handleTradeWithTracking = useCallback(() => {
     if (!asset.hlPerpsMarket?.[0]) return;
@@ -74,6 +98,7 @@ const PerpsRow: React.FC<PerpsRowProps> = ({
       actionLabel={strings('bottom_nav.trade')}
       accessibilityLabel={`${strings('bottom_nav.trade')} ${asset.symbol}`}
       onAction={handleTradeWithTracking}
+      caipAssetId={caipAssetId}
       secondaryLine={secondaryLine}
     />
   );
diff --git a/app/components/Views/WhatsHappeningDetailView/components/TokenRow.test.tsx b/app/components/Views/WhatsHappeningDetailView/components/TokenRow.test.tsx
deleted file mode 100644
index 787b25bf101..00000000000
--- a/app/components/Views/WhatsHappeningDetailView/components/TokenRow.test.tsx
+++ /dev/null
@@ -1,254 +0,0 @@
-import React from 'react';
-import { screen, fireEvent } from '@testing-library/react-native';
-import renderWithProvider from '../../../../util/test/renderWithProvider';
-import TokenRow from './TokenRow';
-import type { RelatedAsset } from '@metamask/ai-controllers';
-import type { WhatsHappeningItem } from '../../Homepage/Sections/WhatsHappening/types';
-import { MetaMetricsEvents } from '../../../../core/Analytics/MetaMetrics.events';
-import Routes from '../../../../constants/navigation/Routes';
-import type { TokenPriceEntry } from '../hooks/useWhatsHappeningAssetPrices';
-
-const mockGoToBuy = jest.fn();
-const mockTrackEvent = jest.fn();
-const mockCreateEventBuilder = jest.fn((eventName: string) => ({
-  addProperties: jest.fn((properties: Record<string, unknown>) => ({
-    build: jest.fn(() => ({ category: eventName, properties })),
-  })),
-  build: jest.fn(() => ({ category: eventName })),
-}));
-
-const mockNavigate = jest.fn();
-
-jest.mock('../../../UI/Ramp/hooks/useRampNavigation', () => ({
-  useRampNavigation: () => ({ goToBuy: mockGoToBuy }),
-}));
-
-jest.mock('@react-navigation/native', () => {
-  const actual = jest.requireActual('@react-navigation/native');
-  return {
-    ...actual,
-    useNavigation: () => ({ navigate: mockNavigate }),
-  };
-});
-
-jest.mock('../utils/getRelatedAssetImageSource', () => ({
-  getRelatedAssetImageSource: jest.fn(() => undefined),
-}));
-
-jest.mock('../../../hooks/useAnalytics/useAnalytics', () => ({
-  useAnalytics: () => ({
-    trackEvent: mockTrackEvent,
-    createEventBuilder: mockCreateEventBuilder,
-  }),
-}));
-
-jest.mock(
-  '../../../UI/Tokens/components/TokenListSecurityBadge/TokenListSecurityBadge',
-  () => 'TokenListSecurityBadge',
-);
-
-const btcAsset: RelatedAsset = {
-  sourceAssetId: 'bitcoin',
-  symbol: 'BTC',
-  name: 'Bitcoin',
-  caip19: ['eip155:1/slip44:0'],
-};
-
-const dualAsset: RelatedAsset = {
-  sourceAssetId: 'eth',
-  symbol: 'ETH',
-  name: 'Ethereum',
-  caip19: ['eip155:1/slip44:60'],
-  hlPerpsMarket: ['ETH'],
-};
-
-const perpsOnlyAsset: RelatedAsset = {
-  sourceAssetId: 'tsla',
-  symbol: 'TSLA',
-  name: 'Tesla',
-  caip19: [],
-};
-
-const mockItem: WhatsHappeningItem = {
-  id: 'trend-2',
-  title: 'BTC ETF inflows',
-  description: '...',
-  date: '2026-03-15T10:00:00.000Z',
-  category: 'macro',
-  impact: 'positive',
-  relatedAssets: [btcAsset],
-  articles: [],
-};
-
-const emptyPriceMap: Record<string, TokenPriceEntry> = {};
-
-describe('TokenRow', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  describe('when asset has only caip19 (no hlPerpsMarket)', () => {
-    it('renders the asset name', () => {
-      renderWithProvider(
-        <TokenRow
-          asset={btcAsset}
-          item={mockItem}
-          cardIndex={0}
-          tokenPriceByCaip={emptyPriceMap}
-        />,
-      );
-      expect(screen.getByText('Bitcoin')).toBeOnTheScreen();
-    });
-
-    it('renders the Buy button', () => {
-      renderWithProvider(
-        <TokenRow
-          asset={btcAsset}
-          item={mockItem}
-          cardIndex={0}
-          tokenPriceByCaip={emptyPriceMap}
-        />,
-      );
-      expect(screen.getByText('Buy')).toBeOnTheScreen();
-    });
-
-    it('calls goToBuy with the first caip19 identifier on Buy press', () => {
-      renderWithProvider(
-        <TokenRow
-          asset={btcAsset}
-          item={mockItem}
-          cardIndex={0}
-          tokenPriceByCaip={emptyPriceMap}
-        />,
-      );
-      fireEvent.press(screen.getByText('Buy'));
-      expect(mockGoToBuy).toHaveBeenCalledWith({
-        assetId: 'eip155:1/slip44:0',
-      });
-    });
-  });
-
-  it('calls goToBuy with assetId undefined when caip19 is empty', () => {
-    renderWithProvider(
-      <TokenRow
-        asset={perpsOnlyAsset}
-        item={mockItem}
-        cardIndex={0}
-        tokenPriceByCaip={emptyPriceMap}
-      />,
-    );
-    fireEvent.press(screen.getByText('Buy'));
-    expect(mockGoToBuy).toHaveBeenCalledWith({ assetId: undefined });
-  });
-
-  describe('when asset has hlPerpsMarket (dual asset)', () => {
-    it('renders the Trade button instead of Buy', () => {
-      renderWithProvider(
-        <TokenRow
-          asset={dualAsset}
-          item={mockItem}
-          cardIndex={0}
-          tokenPriceByCaip={emptyPriceMap}
-        />,
-      );
-      expect(screen.getByText('Trade')).toBeOnTheScreen();
-      expect(screen.queryByText('Buy')).toBeNull();
-    });
-
-    it('navigates to Perps market details on Trade press', () => {
-      renderWithProvider(
-        <TokenRow
-          asset={dualAsset}
-          item={mockItem}
-          cardIndex={0}
-          tokenPriceByCaip={emptyPriceMap}
-        />,
-      );
-      fireEvent.press(screen.getByText('Trade'));
-      expect(mockNavigate).toHaveBeenCalledWith(Routes.PERPS.ROOT, {
-        screen: Routes.PERPS.MARKET_DETAILS,
-        params: expect.objectContaining({
-          market: { symbol: 'ETH', name: 'Ethereum' },
-        }),
-      });
-    });
-
-    it('does not call goToBuy when Trade is pressed', () => {
-      renderWithProvider(
-        <TokenRow
-          asset={dualAsset}
-          item={mockItem}
-          cardIndex={0}
-          tokenPriceByCaip={emptyPriceMap}
-        />,
-      );
-      fireEvent.press(screen.getByText('Trade'));
-      expect(mockGoToBuy).not.toHaveBeenCalled();
-    });
-  });
-
-  it('tracks Whats Happening Interaction with interaction_type=buy_pressed and asset details on Buy press', () => {
-    renderWithProvider(
-      <TokenRow
-        asset={btcAsset}
-        item={mockItem}
-        cardIndex={2}
-        tokenPriceByCaip={emptyPriceMap}
-      />,
-    );
-    fireEvent.press(screen.getByText('Buy'));
-    expect(mockCreateEventBuilder).toHaveBeenCalledWith(
-      MetaMetricsEvents.WHATS_HAPPENING_INTERACTION,
-    );
-    expect(mockTrackEvent).toHaveBeenCalledWith(
-      expect.objectContaining({
-        category: MetaMetricsEvents.WHATS_HAPPENING_INTERACTION,
-        properties: expect.objectContaining({
-          interaction_type: 'buy_pressed',
-          asset_symbol: 'BTC',
-          asset_caip19: 'eip155:1/slip44:0',
-          event_id: 'trend-2',
-          card_index: 2,
-          category: 'macro',
-          impact: 'positive',
-        }),
-      }),
-    );
-  });
-
-  it('tracks Interaction without asset_caip19 when caip19 is empty', () => {
-    renderWithProvider(
-      <TokenRow
-        asset={perpsOnlyAsset}
-        item={mockItem}
-        cardIndex={0}
-        tokenPriceByCaip={emptyPriceMap}
-      />,
-    );
-    fireEvent.press(screen.getByText('Buy'));
-    const addPropertiesCall = mockCreateEventBuilder.mock.results[0]?.value
-      ?.addProperties as jest.Mock | undefined;
-    const builtProperties = addPropertiesCall?.mock?.calls?.[0]?.[0] as
-      | Record<string, string>
-      | undefined;
-    expect(builtProperties?.interaction_type).toBe('buy_pressed');
-    expect(builtProperties?.asset_symbol).toBe('TSLA');
-    expect(builtProperties).not.toHaveProperty('asset_caip19');
-  });
-
-  it('displays price and 24h change when tokenPriceByCaip has entry', () => {
-    const priceMap: Record<string, TokenPriceEntry> = {
-      'eip155:1/slip44:0': { price: 95000, pricePercentChange1d: -1.23 },
-    };
-    renderWithProvider(
-      <TokenRow
-        asset={btcAsset}
-        item={mockItem}
-        cardIndex={0}
-        tokenPriceByCaip={priceMap}
-      />,
-    );
-    expect(screen.getByText('$95,000.00')).toBeOnTheScreen();
-    expect(screen.getByText('-1.23%')).toBeOnTheScreen();
-  });
-});
diff --git a/app/components/Views/WhatsHappeningDetailView/components/TokenRow.tsx b/app/components/Views/WhatsHappeningDetailView/components/TokenRow.tsx
deleted file mode 100644
index 397c8d644c7..00000000000
--- a/app/components/Views/WhatsHappeningDetailView/components/TokenRow.tsx
+++ /dev/null
@@ -1,152 +0,0 @@
-import React, { useCallback, useMemo } from 'react';
-import { useSelector } from 'react-redux';
-import type { CaipAssetType } from '@metamask/utils';
-import type { RelatedAsset } from '@metamask/ai-controllers';
-import { strings } from '../../../../../locales/i18n';
-import { useRampNavigation } from '../../../UI/Ramp/hooks/useRampNavigation';
-import { MetaMetricsEvents } from '../../../../core/Analytics';
-import { useAnalytics } from '../../../hooks/useAnalytics/useAnalytics';
-import { WhatsHappeningInteractionType } from '../../Homepage/Sections/WhatsHappening/constants';
-import { getWhatsHappeningEventProps } from '../../Homepage/Sections/WhatsHappening/eventProperties';
-import type { WhatsHappeningItem } from '../../Homepage/Sections/WhatsHappening/types';
-import { selectTokenListSecurityBadgesEnabled } from '../../../../selectors/featureFlagController/tokenListSecurityBadges';
-import { formatAssetPrice } from '../utils/formatAssetPrice';
-import { selectCurrentCurrency } from '../../../../selectors/currencyRateController';
-import type { TokenPriceEntry } from '../hooks/useWhatsHappeningAssetPrices';
-import AssetRow from './AssetRow';
-import useTradeNavigation from '../hooks/useTradeNavigation';
-import type { RootState } from '../../../../reducers';
-
-interface TokenRowProps {
-  asset: RelatedAsset;
-  item: WhatsHappeningItem;
-  cardIndex: number;
-  /** Map from caip19 ID → price data, resolved by the parent card hook. */
-  tokenPriceByCaip: Record<string, TokenPriceEntry>;
-}
-
-/**
- * A single row in the Tokens section of the expanded What's Happening card.
- * Shows a Trade button (navigating to Perps) when the asset has an
- * `hlPerpsMarket` entry; otherwise falls back to a Buy button that opens the
- * Ramp buy flow. Extracted as its own component so hooks can be called
- * per-asset (hooks cannot be called inside a loop).
- */
-const TokenRow: React.FC<TokenRowProps> = ({
-  asset,
-  item,
-  cardIndex,
-  tokenPriceByCaip,
-}) => {
-  const { goToBuy } = useRampNavigation();
-  const { trackEvent, createEventBuilder } = useAnalytics();
-  const { handleTrade, canTrade } = useTradeNavigation(asset);
-  const currentCurrency = useSelector(selectCurrentCurrency);
-  const isTokenListSecurityBadgesEnabled = useSelector(
-    selectTokenListSecurityBadgesEnabled,
-  );
-  const basicFunctionalityEnabled = useSelector(
-    (state: RootState) => state.settings.basicFunctionalityEnabled,
-  );
-
-  // Resolve the caip19 ID for the security badge (use first entry if present)
-  const caipAssetId = useMemo(() => {
-    const firstCaip = asset.caip19?.[0];
-    if (
-      !firstCaip ||
-      !basicFunctionalityEnabled ||
-      !isTokenListSecurityBadgesEnabled
-    ) {
-      return undefined;
-    }
-    return firstCaip as CaipAssetType;
-  }, [
-    asset.caip19,
-    basicFunctionalityEnabled,
-    isTokenListSecurityBadgesEnabled,
-  ]);
-
-  // Resolve price display from the batched price map
-  const secondaryLine = useMemo(() => {
-    const firstCaip = asset.caip19?.[0];
-    if (!firstCaip) return undefined;
-    const entry = tokenPriceByCaip[firstCaip];
-    if (!entry) return undefined;
-    return formatAssetPrice(
-      entry.price,
-      entry.pricePercentChange1d,
-      currentCurrency,
-    );
-  }, [asset.caip19, tokenPriceByCaip, currentCurrency]);
-
-  const handleTradeWithTracking = useCallback(() => {
-    trackEvent(
-      createEventBuilder(MetaMetricsEvents.WHATS_HAPPENING_INTERACTION)
-        .addProperties({
-          ...getWhatsHappeningEventProps(item, cardIndex),
-          interaction_type: WhatsHappeningInteractionType.TradePressed,
-          asset_symbol: asset.symbol,
-          perps_market: asset.hlPerpsMarket?.[0],
-        })
-        .build(),
-    );
-    handleTrade();
-  }, [
-    handleTrade,
-    asset.symbol,
-    asset.hlPerpsMarket,
-    item,
-    cardIndex,
-    trackEvent,
-    createEventBuilder,
-  ]);
-
-  const handleBuy = useCallback(() => {
-    const assetId = asset.caip19?.[0];
-    trackEvent(
-      createEventBuilder(MetaMetricsEvents.WHATS_HAPPENING_INTERACTION)
-        .addProperties({
-          ...getWhatsHappeningEventProps(item, cardIndex),
-          interaction_type: WhatsHappeningInteractionType.BuyPressed,
-          asset_symbol: asset.symbol,
-          ...(assetId ? { asset_caip19: assetId } : {}),
-        })
-        .build(),
-    );
-    goToBuy({ assetId });
-  }, [
-    goToBuy,
-    asset.caip19,
-    asset.symbol,
-    item,
-    cardIndex,
-    trackEvent,
-    createEventBuilder,
-  ]);
-
-  if (canTrade) {
-    return (
-      <AssetRow
-        asset={asset}
-        actionLabel={strings('bottom_nav.trade')}
-        accessibilityLabel={`${strings('bottom_nav.trade')} ${asset.symbol}`}
-        onAction={handleTradeWithTracking}
-        caipAssetId={caipAssetId}
-        secondaryLine={secondaryLine}
-      />
-    );
-  }
-
-  return (
-    <AssetRow
-      asset={asset}
-      actionLabel={strings('asset_overview.buy_button')}
-      accessibilityLabel={`${strings('asset_overview.buy_button')} ${asset.symbol}`}
-      onAction={handleBuy}
-      caipAssetId={caipAssetId}
-      secondaryLine={secondaryLine}
-    />
-  );
-};
-
-export default TokenRow;
diff --git a/app/components/Views/WhatsHappeningDetailView/components/WhatsHappeningExpandedCard.test.tsx b/app/components/Views/WhatsHappeningDetailView/components/WhatsHappeningExpandedCard.test.tsx
index 19653fc496b..6483a5c7356 100644
--- a/app/components/Views/WhatsHappeningDetailView/components/WhatsHappeningExpandedCard.test.tsx
+++ b/app/components/Views/WhatsHappeningDetailView/components/WhatsHappeningExpandedCard.test.tsx
@@ -6,7 +6,6 @@ import type { WhatsHappeningItem } from '../../Homepage/Sections/WhatsHappening/
 import Routes from '../../../../constants/navigation/Routes';
 
 const mockNavigate = jest.fn();
-const mockGoToBuy = jest.fn();
 
 jest.mock('../../../hooks/useAnalytics/useAnalytics', () => ({
   useAnalytics: () => ({
@@ -32,10 +31,6 @@ jest.mock('../utils/getRelatedAssetImageSource', () => ({
   getRelatedAssetImageSource: jest.fn(() => undefined),
 }));
 
-jest.mock('../../../UI/Ramp/hooks/useRampNavigation', () => ({
-  useRampNavigation: () => ({ goToBuy: mockGoToBuy }),
-}));
-
 jest.mock('../../../UI/MarketInsights/utils/marketInsightsFormatting', () => ({
   formatRelativeTime: jest.fn(() => 'now'),
   getUniqueSourcesByFavicon: jest.fn(() => []),
@@ -48,7 +43,6 @@ jest.mock(
 
 jest.mock('../hooks/useWhatsHappeningAssetPrices', () => ({
   useWhatsHappeningAssetPrices: jest.fn(() => ({
-    tokenPriceByCaip: {},
     perpsPriceBySymbol: {},
   })),
 }));
@@ -61,14 +55,6 @@ jest.mock(
 const CARD_WIDTH = 320;
 const CARD_HEIGHT = 600;
 
-const tokenAsset = {
-  sourceAssetId: 'bitcoin',
-  symbol: 'BTC',
-  name: 'Bitcoin',
-  caip19: ['eip155:1/slip44:0'],
-  hlPerpsMarket: undefined,
-};
-
 const perpsOnlyAsset = {
   sourceAssetId: 'tsla',
   symbol: 'TSLA',
@@ -78,11 +64,11 @@ const perpsOnlyAsset = {
 };
 
 const dualAsset = {
-  sourceAssetId: 'eth',
-  symbol: 'ETH',
-  name: 'Ethereum',
-  caip19: ['eip155:1/slip44:60'],
-  hlPerpsMarket: ['ETH'],
+  sourceAssetId: 'btc',
+  symbol: 'BTC',
+  name: 'Bitcoin',
+  caip19: ['eip155:1/slip44:0'],
+  hlPerpsMarket: ['BTC'],
 };
 
 const baseItem: WhatsHappeningItem = {
@@ -165,26 +151,10 @@ describe('WhatsHappeningExpandedCard', () => {
     expect(screen.queryByText('Neutral')).toBeNull();
     expect(screen.queryByText('Bullish')).toBeNull();
     expect(screen.queryByText('Bearish')).toBeNull();
-    // No impact = no AI pill either
     expect(screen.queryByText('AI')).toBeNull();
   });
 
-  it('renders Tokens section when assets have caip19', () => {
-    const item = { ...baseItem, relatedAssets: [tokenAsset] };
-    renderWithProvider(
-      <WhatsHappeningExpandedCard
-        item={item}
-        cardIndex={0}
-        cardWidth={CARD_WIDTH}
-        cardHeight={CARD_HEIGHT}
-      />,
-    );
-    expect(screen.getByText('Tokens')).toBeOnTheScreen();
-    expect(screen.getByText('Bitcoin')).toBeOnTheScreen();
-    expect(screen.getByText('Buy')).toBeOnTheScreen();
-  });
-
-  it('does not render Tokens section when no assets have caip19', () => {
+  it('renders the single Markets section header when relatedAssets is non-empty', () => {
     const item = { ...baseItem, relatedAssets: [perpsOnlyAsset] };
     renderWithProvider(
       <WhatsHappeningExpandedCard
@@ -194,11 +164,13 @@ describe('WhatsHappeningExpandedCard', () => {
         cardHeight={CARD_HEIGHT}
       />,
     );
+    expect(screen.getByText('Markets')).toBeOnTheScreen();
+    // No "Tokens" or "Perps" section labels
     expect(screen.queryByText('Tokens')).toBeNull();
-    expect(screen.queryByText('Buy')).toBeNull();
+    expect(screen.queryByText('Perps')).toBeNull();
   });
 
-  it('renders Perps section when assets have hlPerpsMarket', () => {
+  it('renders each asset as a PerpsRow with Trade button', () => {
     const item = { ...baseItem, relatedAssets: [perpsOnlyAsset] };
     renderWithProvider(
       <WhatsHappeningExpandedCard
@@ -208,43 +180,14 @@ describe('WhatsHappeningExpandedCard', () => {
         cardHeight={CARD_HEIGHT}
       />,
     );
-    expect(screen.getByText('Perps')).toBeOnTheScreen();
     expect(screen.getByText('Tesla')).toBeOnTheScreen();
     expect(screen.getByText('Trade')).toBeOnTheScreen();
+    // No Buy button
+    expect(screen.queryByText('Buy')).toBeNull();
   });
 
-  it('does not render Perps section when no assets have hlPerpsMarket', () => {
-    const item = { ...baseItem, relatedAssets: [tokenAsset] };
-    renderWithProvider(
-      <WhatsHappeningExpandedCard
-        item={item}
-        cardIndex={0}
-        cardWidth={CARD_WIDTH}
-        cardHeight={CARD_HEIGHT}
-      />,
-    );
-    expect(screen.queryByText('Perps')).toBeNull();
-    expect(screen.queryByText('Trade')).toBeNull();
-  });
-
-  it('renders both Tokens and Perps sections when there are separate token and perps-only assets', () => {
-    const item = { ...baseItem, relatedAssets: [tokenAsset, perpsOnlyAsset] };
-    renderWithProvider(
-      <WhatsHappeningExpandedCard
-        item={item}
-        cardIndex={0}
-        cardWidth={CARD_WIDTH}
-        cardHeight={CARD_HEIGHT}
-      />,
-    );
-    expect(screen.getByText('Tokens')).toBeOnTheScreen();
-    expect(screen.getByText('Perps')).toBeOnTheScreen();
-    expect(screen.getByText('Buy')).toBeOnTheScreen();
-    expect(screen.getByText('Trade')).toBeOnTheScreen();
-  });
-
-  it('does not duplicate a dual asset (caip19 + hlPerpsMarket) into the Perps section, shows Trade for the token row', () => {
-    const item = { ...baseItem, relatedAssets: [dualAsset] };
+  it('renders all assets in the single Markets section (including dual caip19+perps)', () => {
+    const item = { ...baseItem, relatedAssets: [perpsOnlyAsset, dualAsset] };
     renderWithProvider(
       <WhatsHappeningExpandedCard
         item={item}
@@ -253,13 +196,14 @@ describe('WhatsHappeningExpandedCard', () => {
         cardHeight={CARD_HEIGHT}
       />,
     );
-    expect(screen.getByText('Tokens')).toBeOnTheScreen();
-    expect(screen.getByText('Trade')).toBeOnTheScreen();
+    expect(screen.getByText('Markets')).toBeOnTheScreen();
+    expect(screen.getByText('Tesla')).toBeOnTheScreen();
+    expect(screen.getByText('Bitcoin')).toBeOnTheScreen();
+    expect(screen.getAllByText('Trade')).toHaveLength(2);
     expect(screen.queryByText('Buy')).toBeNull();
-    expect(screen.queryByText('Perps')).toBeNull();
   });
 
-  it('renders neither section when relatedAssets is empty', () => {
+  it('does not render the Markets section when relatedAssets is empty', () => {
     renderWithProvider(
       <WhatsHappeningExpandedCard
         item={baseItem}
@@ -268,8 +212,8 @@ describe('WhatsHappeningExpandedCard', () => {
         cardHeight={CARD_HEIGHT}
       />,
     );
-    expect(screen.queryByText('Tokens')).toBeNull();
-    expect(screen.queryByText('Perps')).toBeNull();
+    expect(screen.queryByText('Markets')).toBeNull();
+    expect(screen.queryByText('Trade')).toBeNull();
   });
 
   it('Trade button navigates to PerpsMarketDetails', () => {
@@ -301,7 +245,6 @@ describe('WhatsHappeningExpandedCard', () => {
     };
     const item = { ...baseItem, articles: [article] };
 
-    // Override mock so the sources footer is rendered
     const { getUniqueSourcesByFavicon } = jest.requireMock(
       '../../../UI/MarketInsights/utils/marketInsightsFormatting',
     );
@@ -323,21 +266,16 @@ describe('WhatsHappeningExpandedCard', () => {
     expect(mockOnSourcesPress).toHaveBeenCalledWith([article]);
   });
 
-  it('passes tokenPriceByCaip and perpsPriceBySymbol from hook to rows', () => {
+  it('passes perpsPriceBySymbol from hook to PerpsRow', () => {
     const mockHook = jest.requireMock('../hooks/useWhatsHappeningAssetPrices');
-    const mockTokenMap = {
-      'eip155:1/slip44:0': { price: 95000, pricePercentChange1d: 2 },
+    const mockPerpsMap = {
+      'xyz:TSLA': { price: 172.5, percentChange24h: -1 },
     };
-    const mockPerpsMap = { 'xyz:TSLA': { price: 172.5, percentChange24h: -1 } };
     mockHook.useWhatsHappeningAssetPrices.mockReturnValueOnce({
-      tokenPriceByCaip: mockTokenMap,
       perpsPriceBySymbol: mockPerpsMap,
     });
 
-    const item = {
-      ...baseItem,
-      relatedAssets: [tokenAsset, perpsOnlyAsset],
-    };
+    const item = { ...baseItem, relatedAssets: [perpsOnlyAsset] };
     renderWithProvider(
       <WhatsHappeningExpandedCard
         item={item}
@@ -346,10 +284,6 @@ describe('WhatsHappeningExpandedCard', () => {
         cardHeight={CARD_HEIGHT}
       />,
     );
-
-    // Token price should appear (formatted from mock map)
-    expect(screen.getByText('$95,000.00')).toBeOnTheScreen();
-    // Perps price should appear
     expect(screen.getByText('$172.50')).toBeOnTheScreen();
   });
 });
diff --git a/app/components/Views/WhatsHappeningDetailView/components/WhatsHappeningExpandedCard.tsx b/app/components/Views/WhatsHappeningDetailView/components/WhatsHappeningExpandedCard.tsx
index 33f0e17455e..c3d723242c4 100644
--- a/app/components/Views/WhatsHappeningDetailView/components/WhatsHappeningExpandedCard.tsx
+++ b/app/components/Views/WhatsHappeningDetailView/components/WhatsHappeningExpandedCard.tsx
@@ -28,7 +28,6 @@ import {
 } from '../../../UI/MarketInsights/utils/marketInsightsFormatting';
 import SourceLogoGroup from '../../../UI/MarketInsights/components/SourceLogoGroup';
 import PerpsRow from './PerpsRow';
-import TokenRow from './TokenRow';
 import { useWhatsHappeningAssetPrices } from '../hooks/useWhatsHappeningAssetPrices';
 
 interface WhatsHappeningExpandedCardProps {
@@ -74,14 +73,12 @@ const WhatsHappeningExpandedCard: React.FC<WhatsHappeningExpandedCardProps> = ({
     return remaining > 0 ? `${first.name} +${remaining}` : first.name;
   }, [uniqueSources]);
 
-  // Fetch price data for all assets on this card (one batch per card)
-  const { tokenPriceByCaip, perpsPriceBySymbol } =
-    useWhatsHappeningAssetPrices(item);
+  const { perpsPriceBySymbol } = useWhatsHappeningAssetPrices(item);
 
   return (
     <Box style={{ width: cardWidth, height: cardHeight }}>
       {/* Card surface — fills the fixed height so all cards are the same size */}
-      <Box twClassName="rounded-2xl bg-background-muted overflow-hidden flex-1">
+      <Box twClassName="rounded-2xl bg-background-muted overflow-hidden flex-1 mt-4">
         {/* Scrollable main content */}
         <ScrollView
           showsVerticalScrollIndicator={false}
@@ -100,11 +97,11 @@ const WhatsHappeningExpandedCard: React.FC<WhatsHappeningExpandedCardProps> = ({
                 flexDirection={BoxFlexDirection.Row}
                 alignItems={BoxAlignItems.Center}
                 gap={1}
-                twClassName="bg-icon-default rounded px-1.5 py-0.5 self-start"
+                twClassName="bg-icon-default rounded px-1.5 py-1 self-start"
               >
                 <Icon
-                  name={IconName.Ai}
-                  size={IconSize.Sm}
+                  name={IconName.Sparkle}
+                  size={IconSize.Md}
                   twClassName="text-icon-inverse"
                 />
                 <Text
@@ -112,7 +109,7 @@ const WhatsHappeningExpandedCard: React.FC<WhatsHappeningExpandedCardProps> = ({
                   fontWeight={FontWeight.Medium}
                   twClassName="text-icon-inverse"
                 >
-                  {'AI'}
+                  {strings('homepage.sections.whats_happening_ai')}
                 </Text>
               </Box>
 
@@ -145,58 +142,26 @@ const WhatsHappeningExpandedCard: React.FC<WhatsHappeningExpandedCardProps> = ({
             </Text>
           )}
 
-          {/* Tokens section */}
-          {item.relatedAssets.some((asset) => asset.caip19?.length) && (
+          {/* Markets section — all related assets are perps markets */}
+          {item.relatedAssets.length > 0 && (
             <Box gap={1}>
               <Text
                 variant={TextVariant.BodySm}
                 fontWeight={FontWeight.Medium}
-                color={TextColor.TextAlternative}
+                color={TextColor.TextDefault}
               >
-                {strings('homepage.sections.tokens')}
+                {strings('homepage.sections.markets')}
               </Text>
 
-              {item.relatedAssets
-                .filter((asset) => asset.caip19?.length)
-                .map((asset) => (
-                  <TokenRow
-                    key={asset.sourceAssetId}
-                    asset={asset}
-                    item={item}
-                    cardIndex={cardIndex}
-                    tokenPriceByCaip={tokenPriceByCaip}
-                  />
-                ))}
-            </Box>
-          )}
-
-          {/* Perps section — only assets that are perps-only (hlPerpsMarket set, no caip19 token) */}
-          {item.relatedAssets.some(
-            (asset) => asset.hlPerpsMarket?.length && !asset.caip19?.length,
-          ) && (
-            <Box gap={1}>
-              <Text
-                variant={TextVariant.BodySm}
-                fontWeight={FontWeight.Medium}
-                color={TextColor.TextAlternative}
-              >
-                {strings('homepage.sections.perps')}
-              </Text>
-
-              {item.relatedAssets
-                .filter(
-                  (asset) =>
-                    asset.hlPerpsMarket?.length && !asset.caip19?.length,
-                )
-                .map((asset) => (
-                  <PerpsRow
-                    key={`perp-${asset.sourceAssetId}`}
-                    asset={asset}
-                    item={item}
-                    cardIndex={cardIndex}
-                    perpsPriceBySymbol={perpsPriceBySymbol}
-                  />
-                ))}
+              {item.relatedAssets.map((asset) => (
+                <PerpsRow
+                  key={asset.sourceAssetId}
+                  asset={asset}
+                  item={item}
+                  cardIndex={cardIndex}
+                  perpsPriceBySymbol={perpsPriceBySymbol}
+                />
+              ))}
             </Box>
           )}
         </ScrollView>
diff --git a/app/components/Views/WhatsHappeningDetailView/hooks/useWhatsHappeningAssetPrices.test.ts b/app/components/Views/WhatsHappeningDetailView/hooks/useWhatsHappeningAssetPrices.test.ts
index d5e976a4eeb..fbcdb9f27d3 100644
--- a/app/components/Views/WhatsHappeningDetailView/hooks/useWhatsHappeningAssetPrices.test.ts
+++ b/app/components/Views/WhatsHappeningDetailView/hooks/useWhatsHappeningAssetPrices.test.ts
@@ -1,24 +1,10 @@
-import { renderHook, waitFor, act } from '@testing-library/react-native';
+import { renderHook } from '@testing-library/react-native';
 import { useWhatsHappeningAssetPrices } from './useWhatsHappeningAssetPrices';
 import type { WhatsHappeningItem } from '../../Homepage/Sections/WhatsHappening/types';
 import type { RelatedAsset } from '@metamask/ai-controllers';
 
 // ── Mocks ──────────────────────────────────────────────────────────────────────
 
-const mockHandleFetch = jest.fn();
-jest.mock('@metamask/controller-utils', () => ({
-  handleFetch: (...args: unknown[]) => mockHandleFetch(...args),
-}));
-
-// Mock useSelector to return 'usd' for selectCurrentCurrency
-jest.mock('react-redux', () => ({
-  useSelector: jest.fn(() => 'usd'),
-}));
-
-jest.mock('../../../../selectors/currencyRateController', () => ({
-  selectCurrentCurrency: jest.fn(() => 'usd'),
-}));
-
 const mockUsePerpsLivePrices = jest.fn(
   (_options: { symbols: string[]; throttleMs?: number }) => ({}),
 );
@@ -29,13 +15,6 @@ jest.mock('../../../UI/Perps/hooks/stream', () => ({
 
 // ── Test data ──────────────────────────────────────────────────────────────────
 
-const btcAsset: RelatedAsset = {
-  sourceAssetId: 'bitcoin',
-  symbol: 'BTC',
-  name: 'Bitcoin',
-  caip19: ['eip155:1/slip44:0'],
-};
-
 const tslaAsset: RelatedAsset = {
   sourceAssetId: 'tsla',
   symbol: 'TSLA',
@@ -44,12 +23,19 @@ const tslaAsset: RelatedAsset = {
   hlPerpsMarket: ['xyz:TSLA'],
 };
 
-const ethDualAsset: RelatedAsset = {
-  sourceAssetId: 'eth',
-  symbol: 'ETH',
-  name: 'Ethereum',
-  caip19: ['eip155:1/slip44:60'],
-  hlPerpsMarket: ['ETH'],
+const btcPerpsAsset: RelatedAsset = {
+  sourceAssetId: 'bitcoin',
+  symbol: 'BTC',
+  name: 'Bitcoin',
+  caip19: ['eip155:1/slip44:0'],
+  hlPerpsMarket: ['BTC'],
+};
+
+const assetNoPerps: RelatedAsset = {
+  sourceAssetId: 'no-perps',
+  symbol: 'FOO',
+  name: 'Foo',
+  caip19: ['eip155:1/erc20:0xfoo'],
 };
 
 const makeItem = (relatedAssets: RelatedAsset[]): WhatsHappeningItem => ({
@@ -67,70 +53,12 @@ const makeItem = (relatedAssets: RelatedAsset[]): WhatsHappeningItem => ({
 describe('useWhatsHappeningAssetPrices', () => {
   beforeEach(() => {
     jest.clearAllMocks();
-    mockHandleFetch.mockResolvedValue({});
     mockUsePerpsLivePrices.mockReturnValue({});
   });
 
-  describe('token price fetching', () => {
-    it('skips fetch when there are no caip19 IDs', async () => {
-      const item = makeItem([tslaAsset]);
-      const { result } = renderHook(() => useWhatsHappeningAssetPrices(item));
-      await waitFor(() => {
-        expect(result.current.tokenPriceByCaip).toEqual({});
-      });
-      expect(mockHandleFetch).not.toHaveBeenCalled();
-    });
-
-    it('fetches token prices and populates tokenPriceByCaip map', async () => {
-      const caip = 'eip155:1/slip44:0';
-      mockHandleFetch.mockResolvedValueOnce({
-        [caip]: { price: 95000, pricePercentChange1d: 2.5 },
-      });
-      const item = makeItem([btcAsset]);
-      const { result } = renderHook(() => useWhatsHappeningAssetPrices(item));
-      await waitFor(() => {
-        expect(result.current.tokenPriceByCaip[caip]).toBeDefined();
-      });
-      expect(result.current.tokenPriceByCaip[caip]).toEqual({
-        price: 95000,
-        pricePercentChange1d: 2.5,
-      });
-    });
-
-    it('deduplicates caip19 IDs and fires a single fetch', async () => {
-      const caip = 'eip155:1/slip44:0';
-      const duplicateAsset: RelatedAsset = {
-        ...btcAsset,
-        sourceAssetId: 'btc2',
-      };
-      mockHandleFetch.mockResolvedValueOnce({
-        [caip]: { price: 95000, pricePercentChange1d: 2.5 },
-      });
-      const item = makeItem([btcAsset, duplicateAsset]);
-      renderHook(() => useWhatsHappeningAssetPrices(item));
-      await waitFor(() => {
-        expect(mockHandleFetch).toHaveBeenCalledTimes(1);
-      });
-      // URL should contain caip only once
-      const url: string = mockHandleFetch.mock.calls[0][0];
-      const encodedCaip = encodeURIComponent(caip);
-      expect(url.split(encodedCaip).length - 1).toBe(1);
-    });
-
-    it('yields empty token map on fetch error (no crash)', async () => {
-      mockHandleFetch.mockRejectedValueOnce(new Error('Network error'));
-      const item = makeItem([btcAsset]);
-      const { result } = renderHook(() => useWhatsHappeningAssetPrices(item));
-      await waitFor(() => {
-        // After error, map is reset to {}
-        expect(result.current.tokenPriceByCaip).toEqual({});
-      });
-    });
-  });
-
   describe('perps live price subscription', () => {
     it('returns empty perpsPriceBySymbol when there are no hlPerpsMarket entries', () => {
-      const item = makeItem([btcAsset]);
+      const item = makeItem([assetNoPerps]);
       const { result } = renderHook(() => useWhatsHappeningAssetPrices(item));
       expect(result.current.perpsPriceBySymbol).toEqual({});
     });
@@ -170,44 +98,43 @@ describe('useWhatsHappeningAssetPrices', () => {
         percentChange24h: undefined,
       });
     });
-  });
 
-  describe('mixed assets', () => {
-    it('handles dual assets (both caip19 and hlPerpsMarket) correctly', async () => {
-      const caip = 'eip155:1/slip44:60';
-      mockHandleFetch.mockResolvedValueOnce({
-        [caip]: { price: 3500, pricePercentChange1d: 1.2 },
-      });
+    it('handles assets that have both caip19 and hlPerpsMarket', () => {
       mockUsePerpsLivePrices.mockReturnValue({
-        ETH: { price: '3500', percentChange24h: '1.2' },
+        BTC: { price: '95000', percentChange24h: '2.5' },
       });
-      const item = makeItem([ethDualAsset]);
+      const item = makeItem([btcPerpsAsset]);
       const { result } = renderHook(() => useWhatsHappeningAssetPrices(item));
-      await waitFor(() => {
-        expect(result.current.tokenPriceByCaip[caip]?.price).toBe(3500);
+      expect(mockUsePerpsLivePrices).toHaveBeenCalledWith({
+        symbols: ['BTC'],
+        throttleMs: 3000,
       });
-      expect(result.current.perpsPriceBySymbol.ETH?.price).toBe(3500);
+      expect(result.current.perpsPriceBySymbol.BTC?.price).toBe(95000);
     });
-  });
 
-  describe('cleanup', () => {
-    it('does not update state after unmount (stale fetch is discarded)', async () => {
-      let resolvePromise!: (value: unknown) => void;
-      mockHandleFetch.mockImplementationOnce(
-        () =>
-          new Promise((resolve) => {
-            resolvePromise = resolve;
-          }),
+    it('includes symbols from multiple assets deduplicating repeated markets', () => {
+      const ethAsset: RelatedAsset = {
+        sourceAssetId: 'eth',
+        symbol: 'ETH',
+        name: 'Ethereum',
+        hlPerpsMarket: ['ETH'],
+      };
+      const item = makeItem([tslaAsset, ethAsset]);
+      renderHook(() => useWhatsHappeningAssetPrices(item));
+      expect(mockUsePerpsLivePrices).toHaveBeenCalledWith(
+        expect.objectContaining({
+          symbols: expect.arrayContaining(['xyz:TSLA', 'ETH']),
+        }),
       );
-      const item = makeItem([btcAsset]);
-      const { unmount } = renderHook(() => useWhatsHappeningAssetPrices(item));
-      unmount();
-      // Now resolve after unmount — should not cause state update warnings
-      await act(async () => {
-        resolvePromise({ 'eip155:1/slip44:0': { price: 95000 } });
-      });
-      // If we reach here without error, the cleanup is working correctly
-      expect(true).toBe(true);
+    });
+  });
+
+  it('does not include token-only assets (no hlPerpsMarket) in the symbols list', () => {
+    const item = makeItem([assetNoPerps]);
+    renderHook(() => useWhatsHappeningAssetPrices(item));
+    expect(mockUsePerpsLivePrices).toHaveBeenCalledWith({
+      symbols: [],
+      throttleMs: 3000,
     });
   });
 });
diff --git a/app/components/Views/WhatsHappeningDetailView/hooks/useWhatsHappeningAssetPrices.ts b/app/components/Views/WhatsHappeningDetailView/hooks/useWhatsHappeningAssetPrices.ts
index f9fd2ef84c4..cbf651971f9 100644
--- a/app/components/Views/WhatsHappeningDetailView/hooks/useWhatsHappeningAssetPrices.ts
+++ b/app/components/Views/WhatsHappeningDetailView/hooks/useWhatsHappeningAssetPrices.ts
@@ -1,54 +1,28 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { useSelector } from 'react-redux';
-import { handleFetch } from '@metamask/controller-utils';
+import { useMemo } from 'react';
 import type { WhatsHappeningItem } from '../../Homepage/Sections/WhatsHappening/types';
-import { selectCurrentCurrency } from '../../../../selectors/currencyRateController';
 import { usePerpsLivePrices } from '../../../UI/Perps/hooks/stream';
 
-export interface TokenPriceEntry {
-  price: number | undefined;
-  pricePercentChange1d: number | undefined;
-}
-
 export interface PerpsPriceEntry {
   price: number | undefined;
   percentChange24h: number | undefined;
 }
 
 export interface UseWhatsHappeningAssetPricesResult {
-  /** Map from caip19 asset ID → price data */
-  tokenPriceByCaip: Record<string, TokenPriceEntry>;
   /** Map from HyperLiquid perps symbol → price data */
   perpsPriceBySymbol: Record<string, PerpsPriceEntry>;
 }
 
-interface PriceApiResponse {
-  [assetId: string]: {
-    price?: number;
-    pricePercentChange1d?: number;
-  };
-}
-
 /**
- * Fetches and returns live price data for all assets related to a "What's Happening"
- * card item. Token prices come from the MetaMask Price API (batched); perps prices
- * come from the live WebSocket stream via `usePerpsLivePrices`.
+ * Returns live price data for every perps market referenced by a "What's
+ * Happening" card item. Prices come from the WebSocket stream via
+ * `usePerpsLivePrices` and are throttled to 3 s to limit re-renders.
  *
- * The hook is designed to be called once per expanded card so that only
- * visible cards trigger fetches and subscriptions.
+ * All related assets are expected to have an `hlPerpsMarket` entry; assets
+ * without one are ignored.
  */
 export function useWhatsHappeningAssetPrices(
   item: WhatsHappeningItem,
 ): UseWhatsHappeningAssetPricesResult {
-  const currentCurrency = useSelector(selectCurrentCurrency);
-
-  // Deduplicated list of caip19 IDs for token price fetching
-  const tokenCaip19s = useMemo(
-    () => [...new Set(item.relatedAssets.flatMap((a) => a.caip19 ?? []))],
-    [item.relatedAssets],
-  );
-
-  // Deduplicated list of perps symbols for live price subscription
   const perpsSymbols = useMemo(
     () => [
       ...new Set(item.relatedAssets.flatMap((a) => a.hlPerpsMarket ?? [])),
@@ -56,64 +30,6 @@ export function useWhatsHappeningAssetPrices(
     [item.relatedAssets],
   );
 
-  const [tokenPriceByCaip, setTokenPriceByCaip] = useState<
-    Record<string, TokenPriceEntry>
-  >({});
-
-  // Track the latest fetch to discard stale responses
-  const fetchIdRef = useRef(0);
-
-  useEffect(() => {
-    if (tokenCaip19s.length === 0) {
-      setTokenPriceByCaip({});
-      return;
-    }
-
-    const fetchId = ++fetchIdRef.current;
-
-    const fetchPrices = async () => {
-      try {
-        const assetIds = tokenCaip19s.join(',');
-        const url = `https://price.api.cx.metamask.io/v3/spot-prices?${new URLSearchParams(
-          {
-            assetIds,
-            includeMarketData: 'true',
-            vsCurrency: currentCurrency.toLowerCase(),
-          },
-        )}`;
-
-        const response = (await handleFetch(url)) as PriceApiResponse;
-
-        if (fetchId !== fetchIdRef.current) return;
-
-        const map: Record<string, TokenPriceEntry> = {};
-        for (const caip of tokenCaip19s) {
-          const entry = response[caip];
-          map[caip] = {
-            price: entry?.price,
-            pricePercentChange1d: entry?.pricePercentChange1d,
-          };
-        }
-        setTokenPriceByCaip(map);
-      } catch {
-        if (fetchId !== fetchIdRef.current) return;
-        // On error, keep existing state — shows "—" in the UI
-        setTokenPriceByCaip({});
-      }
-    };
-
-    fetchPrices();
-  }, [tokenCaip19s, currentCurrency]);
-
-  // Invalidate any in-flight fetch on unmount
-  useEffect(
-    () => () => {
-      fetchIdRef.current++;
-    },
-    [],
-  );
-
-  // Live perps prices via WebSocket
   const livePerpsPrices = usePerpsLivePrices({
     symbols: perpsSymbols,
     throttleMs: 3000,
@@ -141,5 +57,5 @@ export function useWhatsHappeningAssetPrices(
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [perpsSymbols, livePerpsPrices]);
 
-  return { tokenPriceByCaip, perpsPriceBySymbol };
+  return { perpsPriceBySymbol };
 }
diff --git a/locales/languages/en.json b/locales/languages/en.json
index f4e0a07d80d..46847e71ab7 100644
--- a/locales/languages/en.json
+++ b/locales/languages/en.json
@@ -9029,9 +9029,11 @@
       },
       "tokens": "Tokens",
       "perps": "Perps",
+      "markets": "Markets",
       "perpetuals": "Perpetuals",
       "predictions": "Predictions",
       "whats_happening": "What's happening",
+      "whats_happening_ai": "AI",
       "whats_happening_impact": {
         "bullish": "Bullish",
         "bearish": "Bearish",

From 52e78c4d3e10916cc0c4b6aad4776c07b2872304 Mon Sep 17 00:00:00 2001
From: Antonio Regadas <antonio.regadas@consensys.net>
Date: Fri, 8 May 2026 14:40:21 +0100
Subject: [PATCH 3/8] chore: shadow and secondary button

---
 .../components/AssetRow.tsx                   |   4 +-
 .../WhatsHappeningExpandedCard.test.tsx       |   2 +
 .../components/WhatsHappeningExpandedCard.tsx | 166 ++++++++++--------
 3 files changed, 98 insertions(+), 74 deletions(-)

diff --git a/app/components/Views/WhatsHappeningDetailView/components/AssetRow.tsx b/app/components/Views/WhatsHappeningDetailView/components/AssetRow.tsx
index a3e25cd0040..48efe34a598 100644
--- a/app/components/Views/WhatsHappeningDetailView/components/AssetRow.tsx
+++ b/app/components/Views/WhatsHappeningDetailView/components/AssetRow.tsx
@@ -38,7 +38,7 @@ interface AssetRowProps {
 
 /**
  * Shared layout for a single asset row (logo + name + optional badge + optional
- * price/change + action button). Used by TokenRow (Buy/Trade) and PerpsRow (Trade).
+ * price/change + action button). Used by PerpsRow (Trade).
  */
 const AssetRow: React.FC<AssetRowProps> = ({
   asset,
@@ -124,7 +124,7 @@ const AssetRow: React.FC<AssetRowProps> = ({
         </Box>
 
         <Button
-          variant={ButtonVariant.Primary}
+          variant={ButtonVariant.Secondary}
           size={ButtonSize.Md}
           onPress={onAction}
           accessibilityLabel={accessibilityLabel}
diff --git a/app/components/Views/WhatsHappeningDetailView/components/WhatsHappeningExpandedCard.test.tsx b/app/components/Views/WhatsHappeningDetailView/components/WhatsHappeningExpandedCard.test.tsx
index 6483a5c7356..583fd5aa62a 100644
--- a/app/components/Views/WhatsHappeningDetailView/components/WhatsHappeningExpandedCard.test.tsx
+++ b/app/components/Views/WhatsHappeningDetailView/components/WhatsHappeningExpandedCard.test.tsx
@@ -52,6 +52,8 @@ jest.mock(
   () => 'TokenListSecurityBadge',
 );
 
+jest.mock('react-native-linear-gradient', () => 'LinearGradient');
+
 const CARD_WIDTH = 320;
 const CARD_HEIGHT = 600;
 
diff --git a/app/components/Views/WhatsHappeningDetailView/components/WhatsHappeningExpandedCard.tsx b/app/components/Views/WhatsHappeningDetailView/components/WhatsHappeningExpandedCard.tsx
index c3d723242c4..11734ee7975 100644
--- a/app/components/Views/WhatsHappeningDetailView/components/WhatsHappeningExpandedCard.tsx
+++ b/app/components/Views/WhatsHappeningDetailView/components/WhatsHappeningExpandedCard.tsx
@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react';
 import { Pressable, ScrollView } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import {
   Box,
@@ -75,98 +76,119 @@ const WhatsHappeningExpandedCard: React.FC<WhatsHappeningExpandedCardProps> = ({
 
   const { perpsPriceBySymbol } = useWhatsHappeningAssetPrices(item);
 
+  /** Theme token resolved to a concrete color for `LinearGradient` */
+  const cardBgColor = tw.color('bg-background-muted');
+
   return (
     <Box style={{ width: cardWidth, height: cardHeight }}>
-      {/* Card surface — fills the fixed height so all cards are the same size */}
-      <Box twClassName="rounded-2xl bg-background-muted overflow-hidden flex-1 mt-4">
-        {/* Scrollable main content */}
-        <ScrollView
-          showsVerticalScrollIndicator={false}
-          contentContainerStyle={tw.style('pt-7 px-5 pb-5 gap-4')}
+      {/* Card surface */}
+      <Box
+        flexDirection={BoxFlexDirection.Column}
+        twClassName="rounded-2xl bg-background-muted overflow-hidden flex-1 mt-4"
+      >
+        {/* Scroll region with a persistent bottom fade hinting at more content */}
+        <Box
+          flexDirection={BoxFlexDirection.Column}
+          twClassName="relative flex-1 min-h-0"
         >
-          {/* Tag row: AI pill + impact badge */}
-          {item.impact && (
-            <Box
-              flexDirection={BoxFlexDirection.Row}
-              alignItems={BoxAlignItems.Center}
-              gap={1}
-              twClassName="flex-wrap"
-            >
-              {/* AI pill — inverted (white bg, dark content) */}
+          <ScrollView
+            showsVerticalScrollIndicator={false}
+            style={tw.style('flex-1')}
+            contentContainerStyle={tw.style('pt-7 px-5 pb-5 gap-4')}
+          >
+            {/* Tag row: AI pill + impact badge */}
+            {item.impact && (
               <Box
                 flexDirection={BoxFlexDirection.Row}
                 alignItems={BoxAlignItems.Center}
                 gap={1}
-                twClassName="bg-icon-default rounded px-1.5 py-1 self-start"
+                twClassName="flex-wrap"
               >
-                <Icon
-                  name={IconName.Sparkle}
-                  size={IconSize.Md}
-                  twClassName="text-icon-inverse"
-                />
-                <Text
-                  variant={TextVariant.BodySm}
-                  fontWeight={FontWeight.Medium}
-                  twClassName="text-icon-inverse"
+                {/* AI pill — inverted (dark bg, white content) */}
+                <Box
+                  flexDirection={BoxFlexDirection.Row}
+                  alignItems={BoxAlignItems.Center}
+                  gap={1}
+                  twClassName="bg-icon-default rounded px-1.5 py-1 self-start"
                 >
-                  {strings('homepage.sections.whats_happening_ai')}
-                </Text>
-              </Box>
+                  <Icon
+                    name={IconName.Sparkle}
+                    size={IconSize.Md}
+                    twClassName="text-icon-inverse"
+                  />
+                  <Text
+                    variant={TextVariant.BodySm}
+                    fontWeight={FontWeight.Medium}
+                    twClassName="text-icon-inverse"
+                  >
+                    {strings('homepage.sections.whats_happening_ai')}
+                  </Text>
+                </Box>
 
-              <Box
-                twClassName={`${impactBgClass} rounded px-2 py-1 self-start`}
-              >
-                <Text variant={TextVariant.BodySm} color={impactTextColor}>
-                  {impactLabel}
-                </Text>
+                <Box
+                  twClassName={`${impactBgClass} rounded px-2 py-1 self-start`}
+                >
+                  <Text variant={TextVariant.BodySm} color={impactTextColor}>
+                    {impactLabel}
+                  </Text>
+                </Box>
               </Box>
-            </Box>
-          )}
-
-          {/* Title */}
-          <Text
-            variant={TextVariant.HeadingLg}
-            fontWeight={FontWeight.Bold}
-            color={TextColor.TextDefault}
-          >
-            {item.title}
-          </Text>
+            )}
 
-          {/* Description */}
-          {item.description && (
+            {/* Title */}
             <Text
-              variant={TextVariant.BodyMd}
-              color={TextColor.TextAlternative}
+              variant={TextVariant.HeadingLg}
+              fontWeight={FontWeight.Bold}
+              color={TextColor.TextDefault}
             >
-              {item.description}
+              {item.title}
             </Text>
-          )}
 
-          {/* Markets section — all related assets are perps markets */}
-          {item.relatedAssets.length > 0 && (
-            <Box gap={1}>
+            {/* Description */}
+            {item.description && (
               <Text
-                variant={TextVariant.BodySm}
-                fontWeight={FontWeight.Medium}
-                color={TextColor.TextDefault}
+                variant={TextVariant.BodyMd}
+                color={TextColor.TextAlternative}
               >
-                {strings('homepage.sections.markets')}
+                {item.description}
               </Text>
+            )}
 
-              {item.relatedAssets.map((asset) => (
-                <PerpsRow
-                  key={asset.sourceAssetId}
-                  asset={asset}
-                  item={item}
-                  cardIndex={cardIndex}
-                  perpsPriceBySymbol={perpsPriceBySymbol}
-                />
-              ))}
-            </Box>
-          )}
-        </ScrollView>
-
-        {/* Fixed sources footer — always pinned to the bottom of the card */}
+            {/* Markets section */}
+            {item.relatedAssets.length > 0 && (
+              <Box gap={1}>
+                <Text
+                  variant={TextVariant.BodySm}
+                  fontWeight={FontWeight.Medium}
+                  color={TextColor.TextDefault}
+                >
+                  {strings('homepage.sections.markets')}
+                </Text>
+
+                {item.relatedAssets.map((asset) => (
+                  <PerpsRow
+                    key={asset.sourceAssetId}
+                    asset={asset}
+                    item={item}
+                    cardIndex={cardIndex}
+                    perpsPriceBySymbol={perpsPriceBySymbol}
+                  />
+                ))}
+              </Box>
+            )}
+          </ScrollView>
+
+          {/* Bottom fade — blends into the card bg; omitted if theme color cannot resolve */}
+          {cardBgColor ? (
+            <LinearGradient
+              pointerEvents="none"
+              colors={['transparent', cardBgColor]}
+              style={tw.style('absolute left-0 right-0 bottom-0 h-12')}
+            />
+          ) : null}
+        </Box>
+
+        {/* Fixed sources footer */}
         {uniqueSources.length > 0 && (
           <Box twClassName="px-5 pb-5" gap={4}>
             <Box twClassName="h-px bg-border-muted" />

From 4b98897041fae5bac2f102690354c34e19012879 Mon Sep 17 00:00:00 2001
From: Antonio Regadas <antonio.regadas@consensys.net>
Date: Fri, 8 May 2026 14:50:28 +0100
Subject: [PATCH 4/8] chore: clean up

---
 .../components/WhatsHappeningExpandedCard.test.tsx   | 12 ++++++------
 .../components/WhatsHappeningExpandedCard.tsx        |  6 +++---
 locales/languages/en.json                            |  2 +-
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/app/components/Views/WhatsHappeningDetailView/components/WhatsHappeningExpandedCard.test.tsx b/app/components/Views/WhatsHappeningDetailView/components/WhatsHappeningExpandedCard.test.tsx
index 583fd5aa62a..0154bf076b1 100644
--- a/app/components/Views/WhatsHappeningDetailView/components/WhatsHappeningExpandedCard.test.tsx
+++ b/app/components/Views/WhatsHappeningDetailView/components/WhatsHappeningExpandedCard.test.tsx
@@ -156,7 +156,7 @@ describe('WhatsHappeningExpandedCard', () => {
     expect(screen.queryByText('AI')).toBeNull();
   });
 
-  it('renders the single Markets section header when relatedAssets is non-empty', () => {
+  it('renders the single Related Assets section header when relatedAssets is non-empty', () => {
     const item = { ...baseItem, relatedAssets: [perpsOnlyAsset] };
     renderWithProvider(
       <WhatsHappeningExpandedCard
@@ -166,7 +166,7 @@ describe('WhatsHappeningExpandedCard', () => {
         cardHeight={CARD_HEIGHT}
       />,
     );
-    expect(screen.getByText('Markets')).toBeOnTheScreen();
+    expect(screen.getByText('Related Assets')).toBeOnTheScreen();
     // No "Tokens" or "Perps" section labels
     expect(screen.queryByText('Tokens')).toBeNull();
     expect(screen.queryByText('Perps')).toBeNull();
@@ -188,7 +188,7 @@ describe('WhatsHappeningExpandedCard', () => {
     expect(screen.queryByText('Buy')).toBeNull();
   });
 
-  it('renders all assets in the single Markets section (including dual caip19+perps)', () => {
+  it('renders all assets in the single Related Assets section (including dual caip19+perps)', () => {
     const item = { ...baseItem, relatedAssets: [perpsOnlyAsset, dualAsset] };
     renderWithProvider(
       <WhatsHappeningExpandedCard
@@ -198,14 +198,14 @@ describe('WhatsHappeningExpandedCard', () => {
         cardHeight={CARD_HEIGHT}
       />,
     );
-    expect(screen.getByText('Markets')).toBeOnTheScreen();
+    expect(screen.getByText('Related Assets')).toBeOnTheScreen();
     expect(screen.getByText('Tesla')).toBeOnTheScreen();
     expect(screen.getByText('Bitcoin')).toBeOnTheScreen();
     expect(screen.getAllByText('Trade')).toHaveLength(2);
     expect(screen.queryByText('Buy')).toBeNull();
   });
 
-  it('does not render the Markets section when relatedAssets is empty', () => {
+  it('does not render the Related Assets section when relatedAssets is empty', () => {
     renderWithProvider(
       <WhatsHappeningExpandedCard
         item={baseItem}
@@ -214,7 +214,7 @@ describe('WhatsHappeningExpandedCard', () => {
         cardHeight={CARD_HEIGHT}
       />,
     );
-    expect(screen.queryByText('Markets')).toBeNull();
+    expect(screen.queryByText('Related Assets')).toBeNull();
     expect(screen.queryByText('Trade')).toBeNull();
   });
 
diff --git a/app/components/Views/WhatsHappeningDetailView/components/WhatsHappeningExpandedCard.tsx b/app/components/Views/WhatsHappeningDetailView/components/WhatsHappeningExpandedCard.tsx
index 11734ee7975..f1e4825f490 100644
--- a/app/components/Views/WhatsHappeningDetailView/components/WhatsHappeningExpandedCard.tsx
+++ b/app/components/Views/WhatsHappeningDetailView/components/WhatsHappeningExpandedCard.tsx
@@ -154,15 +154,15 @@ const WhatsHappeningExpandedCard: React.FC<WhatsHappeningExpandedCardProps> = ({
               </Text>
             )}
 
-            {/* Markets section */}
+            {/* Related assets section */}
             {item.relatedAssets.length > 0 && (
               <Box gap={1}>
                 <Text
-                  variant={TextVariant.BodySm}
+                  variant={TextVariant.HeadingSm}
                   fontWeight={FontWeight.Medium}
                   color={TextColor.TextDefault}
                 >
-                  {strings('homepage.sections.markets')}
+                  {strings('homepage.sections.related_assets')}
                 </Text>
 
                 {item.relatedAssets.map((asset) => (
diff --git a/locales/languages/en.json b/locales/languages/en.json
index 46847e71ab7..b8703d769d5 100644
--- a/locales/languages/en.json
+++ b/locales/languages/en.json
@@ -9029,7 +9029,7 @@
       },
       "tokens": "Tokens",
       "perps": "Perps",
-      "markets": "Markets",
+      "related_assets": "Related Assets",
       "perpetuals": "Perpetuals",
       "predictions": "Predictions",
       "whats_happening": "What's happening",

From 48e70a5498e8ab9e7c9659b51e46307f74989625 Mon Sep 17 00:00:00 2001
From: Antonio Regadas <antonio.regadas@consensys.net>
Date: Fri, 8 May 2026 14:53:46 +0100
Subject: [PATCH 5/8] chore: small tweak

---
 .../components/WhatsHappeningExpandedCard.tsx                   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Views/WhatsHappeningDetailView/components/WhatsHappeningExpandedCard.tsx b/app/components/Views/WhatsHappeningDetailView/components/WhatsHappeningExpandedCard.tsx
index f1e4825f490..596ce6ea7b9 100644
--- a/app/components/Views/WhatsHappeningDetailView/components/WhatsHappeningExpandedCard.tsx
+++ b/app/components/Views/WhatsHappeningDetailView/components/WhatsHappeningExpandedCard.tsx
@@ -101,7 +101,7 @@ const WhatsHappeningExpandedCard: React.FC<WhatsHappeningExpandedCardProps> = ({
               <Box
                 flexDirection={BoxFlexDirection.Row}
                 alignItems={BoxAlignItems.Center}
-                gap={1}
+                gap={2}
                 twClassName="flex-wrap"
               >
                 {/* AI pill — inverted (dark bg, white content) */}

From 09fdbcb996d1541b7278db0aabfdb5419588156c Mon Sep 17 00:00:00 2001
From: Antonio Regadas <antonio.regadas@consensys.net>
Date: Fri, 8 May 2026 15:06:00 +0100
Subject: [PATCH 6/8] chore: conditional trade button

---
 .../components/AssetRow.test.tsx              |  6 +++++
 .../components/AssetRow.tsx                   | 26 ++++++++++---------
 .../components/PerpsRow.test.tsx              | 22 +++-------------
 .../components/PerpsRow.tsx                   | 22 +++++++++++-----
 4 files changed, 39 insertions(+), 37 deletions(-)

diff --git a/app/components/Views/WhatsHappeningDetailView/components/AssetRow.test.tsx b/app/components/Views/WhatsHappeningDetailView/components/AssetRow.test.tsx
index a0534be7b67..e958808d3df 100644
--- a/app/components/Views/WhatsHappeningDetailView/components/AssetRow.test.tsx
+++ b/app/components/Views/WhatsHappeningDetailView/components/AssetRow.test.tsx
@@ -59,6 +59,12 @@ describe('AssetRow', () => {
     expect(screen.getByText('UNK')).toBeOnTheScreen();
   });
 
+  it('does not render an action button when onAction is omitted', () => {
+    renderWithProvider(<AssetRow asset={btcAsset} />);
+    expect(screen.queryByText('Buy')).toBeNull();
+    expect(screen.queryByText('Trade')).toBeNull();
+  });
+
   it('renders the action button with the provided label', () => {
     renderWithProvider(
       <AssetRow
diff --git a/app/components/Views/WhatsHappeningDetailView/components/AssetRow.tsx b/app/components/Views/WhatsHappeningDetailView/components/AssetRow.tsx
index 48efe34a598..0e8bcd03c74 100644
--- a/app/components/Views/WhatsHappeningDetailView/components/AssetRow.tsx
+++ b/app/components/Views/WhatsHappeningDetailView/components/AssetRow.tsx
@@ -27,9 +27,9 @@ export interface AssetRowSecondaryLine {
 
 interface AssetRowProps {
   asset: RelatedAsset;
-  actionLabel: string;
-  accessibilityLabel: string;
-  onAction: () => void;
+  actionLabel?: string;
+  accessibilityLabel?: string;
+  onAction?: () => void;
   /** When provided, renders the security badge inline next to the asset name. */
   caipAssetId?: CaipAssetType;
   /** When provided, renders price + 24h change below the asset name. */
@@ -38,7 +38,7 @@ interface AssetRowProps {
 
 /**
  * Shared layout for a single asset row (logo + name + optional badge + optional
- * price/change + action button). Used by PerpsRow (Trade).
+ * price/change + optional action button). Used by PerpsRow (Trade when tradable).
  */
 const AssetRow: React.FC<AssetRowProps> = ({
   asset,
@@ -123,14 +123,16 @@ const AssetRow: React.FC<AssetRowProps> = ({
           )}
         </Box>
 
-        <Button
-          variant={ButtonVariant.Secondary}
-          size={ButtonSize.Md}
-          onPress={onAction}
-          accessibilityLabel={accessibilityLabel}
-        >
-          {actionLabel}
-        </Button>
+        {onAction && actionLabel && accessibilityLabel ? (
+          <Button
+            variant={ButtonVariant.Secondary}
+            size={ButtonSize.Md}
+            onPress={onAction}
+            accessibilityLabel={accessibilityLabel}
+          >
+            {actionLabel}
+          </Button>
+        ) : null}
       </Box>
     </Box>
   );
diff --git a/app/components/Views/WhatsHappeningDetailView/components/PerpsRow.test.tsx b/app/components/Views/WhatsHappeningDetailView/components/PerpsRow.test.tsx
index 84835ba9856..a54027aa345 100644
--- a/app/components/Views/WhatsHappeningDetailView/components/PerpsRow.test.tsx
+++ b/app/components/Views/WhatsHappeningDetailView/components/PerpsRow.test.tsx
@@ -143,7 +143,7 @@ describe('PerpsRow', () => {
     });
   });
 
-  it('does not navigate when hlPerpsMarket is empty', () => {
+  it('does not render Trade when hlPerpsMarket is empty', () => {
     const assetNoPerps: RelatedAsset = {
       ...perpsOnlyAsset,
       hlPerpsMarket: [],
@@ -156,8 +156,9 @@ describe('PerpsRow', () => {
         perpsPriceBySymbol={emptyPriceMap}
       />,
     );
-    fireEvent.press(screen.getByText('Trade'));
+    expect(screen.queryByText('Trade')).toBeNull();
     expect(mockNavigate).not.toHaveBeenCalled();
+    expect(mockCreateEventBuilder).not.toHaveBeenCalled();
   });
 
   it('tracks Whats Happening Interaction on Trade press', () => {
@@ -189,23 +190,6 @@ describe('PerpsRow', () => {
     );
   });
 
-  it('does not track Interaction when hlPerpsMarket is empty', () => {
-    const assetNoPerps: RelatedAsset = {
-      ...perpsOnlyAsset,
-      hlPerpsMarket: [],
-    };
-    renderWithProvider(
-      <PerpsRow
-        asset={assetNoPerps}
-        item={mockItem}
-        cardIndex={0}
-        perpsPriceBySymbol={emptyPriceMap}
-      />,
-    );
-    fireEvent.press(screen.getByText('Trade'));
-    expect(mockCreateEventBuilder).not.toHaveBeenCalled();
-  });
-
   it('displays price and 24h change from perpsPriceBySymbol', () => {
     const priceMap: Record<string, PerpsPriceEntry> = {
       'xyz:TSLA': { price: 172.5, percentChange24h: 3.45 },
diff --git a/app/components/Views/WhatsHappeningDetailView/components/PerpsRow.tsx b/app/components/Views/WhatsHappeningDetailView/components/PerpsRow.tsx
index 111e1a16bb6..daca5c743f1 100644
--- a/app/components/Views/WhatsHappeningDetailView/components/PerpsRow.tsx
+++ b/app/components/Views/WhatsHappeningDetailView/components/PerpsRow.tsx
@@ -26,7 +26,8 @@ interface PerpsRowProps {
 /**
  * A single row for a perps asset in the expanded What's Happening card.
  * Shows logo, name, optional verified badge (for assets that also have caip19),
- * live price/change, and a Trade button.
+ * live price/change when `hlPerpsMarket` is set, and a Trade button only when a
+ * perps market symbol exists.
  */
 const PerpsRow: React.FC<PerpsRowProps> = ({
   asset,
@@ -70,14 +71,17 @@ const PerpsRow: React.FC<PerpsRowProps> = ({
   }, [asset.hlPerpsMarket, perpsPriceBySymbol]);
 
   const handleTradeWithTracking = useCallback(() => {
-    if (!asset.hlPerpsMarket?.[0]) return;
+    const perpsMarket = asset.hlPerpsMarket?.[0];
+    if (!perpsMarket) {
+      return;
+    }
     trackEvent(
       createEventBuilder(MetaMetricsEvents.WHATS_HAPPENING_INTERACTION)
         .addProperties({
           ...getWhatsHappeningEventProps(item, cardIndex),
           interaction_type: WhatsHappeningInteractionType.TradePressed,
           asset_symbol: asset.symbol,
-          perps_market: asset.hlPerpsMarket?.[0],
+          perps_market: perpsMarket,
         })
         .build(),
     );
@@ -92,12 +96,18 @@ const PerpsRow: React.FC<PerpsRowProps> = ({
     createEventBuilder,
   ]);
 
+  const perpsMarketSymbol = asset.hlPerpsMarket?.[0];
+
   return (
     <AssetRow
       asset={asset}
-      actionLabel={strings('bottom_nav.trade')}
-      accessibilityLabel={`${strings('bottom_nav.trade')} ${asset.symbol}`}
-      onAction={handleTradeWithTracking}
+      actionLabel={perpsMarketSymbol ? strings('bottom_nav.trade') : undefined}
+      accessibilityLabel={
+        perpsMarketSymbol
+          ? `${strings('bottom_nav.trade')} ${asset.symbol}`
+          : undefined
+      }
+      onAction={perpsMarketSymbol ? handleTradeWithTracking : undefined}
       caipAssetId={caipAssetId}
       secondaryLine={secondaryLine}
     />

From d3959056d54507e527e72801d349ee4947ebb4a0 Mon Sep 17 00:00:00 2001
From: Antonio Regadas <antonio.regadas@consensys.net>
Date: Fri, 8 May 2026 15:58:37 +0100
Subject: [PATCH 7/8] chore: reset file

---
 ios/MetaMask.xcodeproj/project.pbxproj | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/ios/MetaMask.xcodeproj/project.pbxproj b/ios/MetaMask.xcodeproj/project.pbxproj
index f29b89d59c1..feaae11162e 100644
--- a/ios/MetaMask.xcodeproj/project.pbxproj
+++ b/ios/MetaMask.xcodeproj/project.pbxproj
@@ -88,13 +88,13 @@
 		E4B580762E33A001008165E1 /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = E4B580752E33A001008165E1 /* AppDelegate.swift */; };
 		E4B580772E33A001008165E1 /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = E4B580752E33A001008165E1 /* AppDelegate.swift */; };
 		E4B580782E33A001008165E1 /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = E4B580752E33A001008165E1 /* AppDelegate.swift */; };
+		F0B2A3E101000001000000A1 /* BrazeHelper.mm in Sources */ = {isa = PBXBuildFile; fileRef = F0B2A3E101000001000000A0 /* BrazeHelper.mm */; };
+		F0B2A3E101000001000000A2 /* BrazeHelper.mm in Sources */ = {isa = PBXBuildFile; fileRef = F0B2A3E101000001000000A0 /* BrazeHelper.mm */; };
+		F0B2A3E101000001000000A3 /* BrazeHelper.mm in Sources */ = {isa = PBXBuildFile; fileRef = F0B2A3E101000001000000A0 /* BrazeHelper.mm */; };
 		E83DB5522BBDF2AA00536063 /* PrivacyInfo.xcprivacy in Resources */ = {isa = PBXBuildFile; fileRef = E83DB5392BBDB14700536063 /* PrivacyInfo.xcprivacy */; };
 		E83DB5532BBDF2AE00536063 /* PrivacyInfo.xcprivacy in Resources */ = {isa = PBXBuildFile; fileRef = E83DB5392BBDB14700536063 /* PrivacyInfo.xcprivacy */; };
 		E83DB5542BBDF2AF00536063 /* PrivacyInfo.xcprivacy in Resources */ = {isa = PBXBuildFile; fileRef = E83DB5392BBDB14700536063 /* PrivacyInfo.xcprivacy */; };
 		ED2E8FE6D71BE9319F3B27D3 /* libPods-MetaMask.a in Frameworks */ = {isa = PBXBuildFile; fileRef = D2632307C64595BE1B8ABEAF /* libPods-MetaMask.a */; };
-		F0B2A3E101000001000000A1 /* BrazeHelper.mm in Sources */ = {isa = PBXBuildFile; fileRef = F0B2A3E101000001000000A0 /* BrazeHelper.mm */; };
-		F0B2A3E101000001000000A2 /* BrazeHelper.mm in Sources */ = {isa = PBXBuildFile; fileRef = F0B2A3E101000001000000A0 /* BrazeHelper.mm */; };
-		F0B2A3E101000001000000A3 /* BrazeHelper.mm in Sources */ = {isa = PBXBuildFile; fileRef = F0B2A3E101000001000000A0 /* BrazeHelper.mm */; };
 		F23972D16903249A8EC120BD /* ExpoModulesProvider.swift in Sources */ = {isa = PBXBuildFile; fileRef = 8EB256CB3A1A7A1D942A95F6 /* ExpoModulesProvider.swift */; };
 		F961A37228105CF9007442B5 /* LinkPresentation.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = F961A36A28105CF9007442B5 /* LinkPresentation.framework */; settings = {ATTRIBUTES = (Weak, ); }; };
 /* End PBXBuildFile section */
@@ -242,11 +242,11 @@
 		D3350113F0764105B1E60002 /* MMSans-Bold.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "MMSans-Bold.otf"; path = "../app/fonts/MMSans-Bold.otf"; sourceTree = "<group>"; };
 		E4B580712E32F462008165E1 /* Expo.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Expo.plist; sourceTree = "<group>"; };
 		E4B580752E33A001008165E1 /* AppDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MetaMask/AppDelegate.swift; sourceTree = "<group>"; };
+		F0B2A3E101000001000000A0 /* BrazeHelper.mm */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.cpp.objcpp; path = MetaMask/BrazeHelper.mm; sourceTree = "<group>"; };
 		E7EEA32C976A46B991D55FD4 /* ExpoModulesProvider.swift */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = sourcecode.swift; name = ExpoModulesProvider.swift; path = "Pods/Target Support Files/Pods-MetaMask-QA/ExpoModulesProvider.swift"; sourceTree = "<group>"; };
 		E83DB5392BBDB14700536063 /* PrivacyInfo.xcprivacy */ = {isa = PBXFileReference; lastKnownFileType = text.xml; name = PrivacyInfo.xcprivacy; path = MetaMask/PrivacyInfo.xcprivacy; sourceTree = SOURCE_ROOT; };
 		E9629905BA1940ADA4189921 /* Feather.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = Feather.ttf; path = "../node_modules/react-native-vector-icons/Fonts/Feather.ttf"; sourceTree = "<group>"; };
 		EBC2B6371CD846D28B9FAADF /* FontAwesome5_Regular.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = FontAwesome5_Regular.ttf; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Regular.ttf"; sourceTree = "<group>"; };
-		F0B2A3E101000001000000A0 /* BrazeHelper.mm */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.cpp.objcpp; path = MetaMask/BrazeHelper.mm; sourceTree = "<group>"; };
 		F10E7EBF946A4F6D8E229143 /* MMPoly-Regular.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "MMPoly-Regular.otf"; path = "../app/fonts/MMPoly-Regular.otf"; sourceTree = "<group>"; };
 		F1CCBB0591B4D16C1710A05D /* Pods-MetaMask-Flask.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-MetaMask-Flask.release.xcconfig"; path = "Target Support Files/Pods-MetaMask-Flask/Pods-MetaMask-Flask.release.xcconfig"; sourceTree = "<group>"; };
 		F3C919D8F42C47389FF643E7 /* MMSans-Regular.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "MMSans-Regular.otf"; path = "../app/fonts/MMSans-Regular.otf"; sourceTree = "<group>"; };

From 36e18219fed2f95eda0e3b10fc9bd8abcdfb0d40 Mon Sep 17 00:00:00 2001
From: Antonio Regadas <antonio.regadas@consensys.net>
Date: Fri, 8 May 2026 16:53:51 +0100
Subject: [PATCH 8/8] chore: update based on feedback review

---
 .../components/AssetRow.test.tsx              | 40 --------
 .../components/AssetRow.tsx                   | 28 ++----
 .../components/PerpsRow.test.tsx              | 96 ++-----------------
 .../components/PerpsRow.tsx                   | 28 ------
 .../utils/formatAssetPrice.test.ts            | 29 +-----
 .../utils/formatAssetPrice.ts                 | 27 +-----
 6 files changed, 20 insertions(+), 228 deletions(-)

diff --git a/app/components/Views/WhatsHappeningDetailView/components/AssetRow.test.tsx b/app/components/Views/WhatsHappeningDetailView/components/AssetRow.test.tsx
index e958808d3df..e845a6807b7 100644
--- a/app/components/Views/WhatsHappeningDetailView/components/AssetRow.test.tsx
+++ b/app/components/Views/WhatsHappeningDetailView/components/AssetRow.test.tsx
@@ -9,11 +9,6 @@ jest.mock('../utils/getRelatedAssetImageSource', () => ({
   getRelatedAssetImageSource: jest.fn(() => undefined),
 }));
 
-jest.mock(
-  '../../../UI/Tokens/components/TokenListSecurityBadge/TokenListSecurityBadge',
-  () => 'TokenListSecurityBadge',
-);
-
 const btcAsset: RelatedAsset = {
   sourceAssetId: 'bitcoin',
   symbol: 'BTC',
@@ -90,41 +85,6 @@ describe('AssetRow', () => {
     expect(onAction).toHaveBeenCalledTimes(1);
   });
 
-  it('renders the TokenListSecurityBadge when caipAssetId is provided', () => {
-    renderWithProvider(
-      <AssetRow
-        asset={btcAsset}
-        actionLabel="Buy"
-        accessibilityLabel="Buy BTC"
-        onAction={onAction}
-        caipAssetId="eip155:1/slip44:0"
-      />,
-    );
-    expect(screen.getByTestId !== undefined).toBeTruthy();
-    // The mocked component renders as 'TokenListSecurityBadge' native element
-    const badge = screen.UNSAFE_getByType(
-      'TokenListSecurityBadge' as unknown as React.ComponentType,
-    );
-    expect(badge).toBeTruthy();
-    expect(badge.props.caipAssetId).toBe('eip155:1/slip44:0');
-  });
-
-  it('does not render the security badge when caipAssetId is not provided', () => {
-    renderWithProvider(
-      <AssetRow
-        asset={btcAsset}
-        actionLabel="Buy"
-        accessibilityLabel="Buy BTC"
-        onAction={onAction}
-      />,
-    );
-    expect(
-      screen.UNSAFE_queryByType(
-        'TokenListSecurityBadge' as unknown as React.ComponentType,
-      ),
-    ).toBeNull();
-  });
-
   it('renders the price secondary line when secondaryLine is provided', () => {
     renderWithProvider(
       <AssetRow
diff --git a/app/components/Views/WhatsHappeningDetailView/components/AssetRow.tsx b/app/components/Views/WhatsHappeningDetailView/components/AssetRow.tsx
index 0e8bcd03c74..53bedc75cbb 100644
--- a/app/components/Views/WhatsHappeningDetailView/components/AssetRow.tsx
+++ b/app/components/Views/WhatsHappeningDetailView/components/AssetRow.tsx
@@ -15,9 +15,7 @@ import {
   TextVariant,
 } from '@metamask/design-system-react-native';
 import type { RelatedAsset } from '@metamask/ai-controllers';
-import type { CaipAssetType } from '@metamask/utils';
 import { getRelatedAssetImageSource } from '../utils/getRelatedAssetImageSource';
-import TokenListSecurityBadge from '../../../UI/Tokens/components/TokenListSecurityBadge/TokenListSecurityBadge';
 
 export interface AssetRowSecondaryLine {
   priceText: string;
@@ -30,8 +28,6 @@ interface AssetRowProps {
   actionLabel?: string;
   accessibilityLabel?: string;
   onAction?: () => void;
-  /** When provided, renders the security badge inline next to the asset name. */
-  caipAssetId?: CaipAssetType;
   /** When provided, renders price + 24h change below the asset name. */
   secondaryLine?: AssetRowSecondaryLine;
 }
@@ -45,7 +41,6 @@ const AssetRow: React.FC<AssetRowProps> = ({
   actionLabel,
   accessibilityLabel,
   onAction,
-  caipAssetId,
   secondaryLine,
 }) => {
   const rawImageSource = getRelatedAssetImageSource(asset);
@@ -74,23 +69,14 @@ const AssetRow: React.FC<AssetRowProps> = ({
       >
         {/* Left: name + optional badge + optional price/change */}
         <Box twClassName="flex-1 mr-2">
-          <Box
-            flexDirection={BoxFlexDirection.Row}
-            alignItems={BoxAlignItems.Center}
-            gap={1}
+          <Text
+            variant={TextVariant.BodyMd}
+            fontWeight={FontWeight.Medium}
+            color={TextColor.TextDefault}
+            numberOfLines={1}
           >
-            <Text
-              variant={TextVariant.BodyMd}
-              fontWeight={FontWeight.Medium}
-              color={TextColor.TextDefault}
-              numberOfLines={1}
-            >
-              {asset.name || asset.symbol}
-            </Text>
-            {caipAssetId && (
-              <TokenListSecurityBadge caipAssetId={caipAssetId} />
-            )}
-          </Box>
+            {asset.name || asset.symbol}
+          </Text>
 
           {secondaryLine && (
             <Box
diff --git a/app/components/Views/WhatsHappeningDetailView/components/PerpsRow.test.tsx b/app/components/Views/WhatsHappeningDetailView/components/PerpsRow.test.tsx
index a54027aa345..d2863ced4e6 100644
--- a/app/components/Views/WhatsHappeningDetailView/components/PerpsRow.test.tsx
+++ b/app/components/Views/WhatsHappeningDetailView/components/PerpsRow.test.tsx
@@ -36,18 +36,6 @@ jest.mock('../../../hooks/useAnalytics/useAnalytics', () => ({
   }),
 }));
 
-jest.mock(
-  '../../../UI/Tokens/components/TokenListSecurityBadge/TokenListSecurityBadge',
-  () => 'TokenListSecurityBadge',
-);
-
-jest.mock(
-  '../../../../selectors/featureFlagController/tokenListSecurityBadges',
-  () => ({
-    selectTokenListSecurityBadgesEnabled: jest.fn(() => true),
-  }),
-);
-
 const perpsOnlyAsset: RelatedAsset = {
   sourceAssetId: 'tsla',
   symbol: 'TSLA',
@@ -56,15 +44,6 @@ const perpsOnlyAsset: RelatedAsset = {
   hlPerpsMarket: ['xyz:TSLA'],
 };
 
-/** Asset that has both a perps market AND a caip19 id — eligible for badge */
-const dualAsset: RelatedAsset = {
-  sourceAssetId: 'bitcoin',
-  symbol: 'BTC',
-  name: 'Bitcoin',
-  caip19: ['eip155:1/slip44:0'],
-  hlPerpsMarket: ['BTC'],
-};
-
 const mockItem: WhatsHappeningItem = {
   id: 'trend-3',
   title: 'TSLA earnings',
@@ -125,10 +104,14 @@ describe('PerpsRow', () => {
     });
   });
 
-  it('uses first hlPerpsMarket entry as the market symbol', () => {
+  it('uses first hlPerpsMarket entry as the market symbol when multiple are present', () => {
+    const multiMarketAsset: RelatedAsset = {
+      ...perpsOnlyAsset,
+      hlPerpsMarket: ['FIRST-MARKET', 'SECOND-MARKET'],
+    };
     renderWithProvider(
       <PerpsRow
-        asset={dualAsset}
+        asset={multiMarketAsset}
         item={mockItem}
         cardIndex={0}
         perpsPriceBySymbol={emptyPriceMap}
@@ -138,7 +121,7 @@ describe('PerpsRow', () => {
     expect(mockNavigate).toHaveBeenCalledWith(Routes.PERPS.ROOT, {
       screen: Routes.PERPS.MARKET_DETAILS,
       params: expect.objectContaining({
-        market: { symbol: 'BTC', name: 'Bitcoin' },
+        market: { symbol: 'FIRST-MARKET', name: 'Tesla' },
       }),
     });
   });
@@ -217,69 +200,4 @@ describe('PerpsRow', () => {
     );
     expect(screen.queryByText('$')).toBeNull();
   });
-
-  describe('verified badge gating', () => {
-    it('renders TokenListSecurityBadge when asset has caip19 and feature flags are enabled', () => {
-      renderWithProvider(
-        <PerpsRow
-          asset={dualAsset}
-          item={mockItem}
-          cardIndex={0}
-          perpsPriceBySymbol={emptyPriceMap}
-        />,
-        {
-          state: {
-            settings: { basicFunctionalityEnabled: true },
-          },
-        },
-      );
-      const badge = screen.UNSAFE_getByType(
-        'TokenListSecurityBadge' as unknown as React.ComponentType,
-      );
-      expect(badge).toBeTruthy();
-      expect(badge.props.caipAssetId).toBe('eip155:1/slip44:0');
-    });
-
-    it('does not render TokenListSecurityBadge when basicFunctionalityEnabled is false', () => {
-      renderWithProvider(
-        <PerpsRow
-          asset={dualAsset}
-          item={mockItem}
-          cardIndex={0}
-          perpsPriceBySymbol={emptyPriceMap}
-        />,
-        {
-          state: {
-            settings: { basicFunctionalityEnabled: false },
-          },
-        },
-      );
-      expect(
-        screen.UNSAFE_queryByType(
-          'TokenListSecurityBadge' as unknown as React.ComponentType,
-        ),
-      ).toBeNull();
-    });
-
-    it('does not render TokenListSecurityBadge for a perps-only asset (no caip19)', () => {
-      renderWithProvider(
-        <PerpsRow
-          asset={perpsOnlyAsset}
-          item={mockItem}
-          cardIndex={0}
-          perpsPriceBySymbol={emptyPriceMap}
-        />,
-        {
-          state: {
-            settings: { basicFunctionalityEnabled: true },
-          },
-        },
-      );
-      expect(
-        screen.UNSAFE_queryByType(
-          'TokenListSecurityBadge' as unknown as React.ComponentType,
-        ),
-      ).toBeNull();
-    });
-  });
 });
diff --git a/app/components/Views/WhatsHappeningDetailView/components/PerpsRow.tsx b/app/components/Views/WhatsHappeningDetailView/components/PerpsRow.tsx
index daca5c743f1..8f72324d5e7 100644
--- a/app/components/Views/WhatsHappeningDetailView/components/PerpsRow.tsx
+++ b/app/components/Views/WhatsHappeningDetailView/components/PerpsRow.tsx
@@ -1,6 +1,4 @@
 import React, { useCallback, useMemo } from 'react';
-import { useSelector } from 'react-redux';
-import type { CaipAssetType } from '@metamask/utils';
 import type { RelatedAsset } from '@metamask/ai-controllers';
 import { strings } from '../../../../../locales/i18n';
 import { MetaMetricsEvents } from '../../../../core/Analytics';
@@ -9,11 +7,9 @@ import { WhatsHappeningInteractionType } from '../../Homepage/Sections/WhatsHapp
 import { getWhatsHappeningEventProps } from '../../Homepage/Sections/WhatsHappening/eventProperties';
 import type { WhatsHappeningItem } from '../../Homepage/Sections/WhatsHappening/types';
 import { formatAssetPrice } from '../utils/formatAssetPrice';
-import { selectTokenListSecurityBadgesEnabled } from '../../../../selectors/featureFlagController/tokenListSecurityBadges';
 import type { PerpsPriceEntry } from '../hooks/useWhatsHappeningAssetPrices';
 import AssetRow from './AssetRow';
 import useTradeNavigation from '../hooks/useTradeNavigation';
-import type { RootState } from '../../../../reducers';
 
 interface PerpsRowProps {
   asset: RelatedAsset;
@@ -37,29 +33,6 @@ const PerpsRow: React.FC<PerpsRowProps> = ({
 }) => {
   const { handleTrade } = useTradeNavigation(asset);
   const { trackEvent, createEventBuilder } = useAnalytics();
-  const isTokenListSecurityBadgesEnabled = useSelector(
-    selectTokenListSecurityBadgesEnabled,
-  );
-  const basicFunctionalityEnabled = useSelector(
-    (state: RootState) => state.settings.basicFunctionalityEnabled,
-  );
-
-  // Show verified badge for assets that also have a caip19 identifier
-  const caipAssetId = useMemo(() => {
-    const firstCaip = asset.caip19?.[0];
-    if (
-      !firstCaip ||
-      !basicFunctionalityEnabled ||
-      !isTokenListSecurityBadgesEnabled
-    ) {
-      return undefined;
-    }
-    return firstCaip as CaipAssetType;
-  }, [
-    asset.caip19,
-    basicFunctionalityEnabled,
-    isTokenListSecurityBadgesEnabled,
-  ]);
 
   // Perps prices are always quoted in USD
   const secondaryLine = useMemo(() => {
@@ -108,7 +81,6 @@ const PerpsRow: React.FC<PerpsRowProps> = ({
           : undefined
       }
       onAction={perpsMarketSymbol ? handleTradeWithTracking : undefined}
-      caipAssetId={caipAssetId}
       secondaryLine={secondaryLine}
     />
   );
diff --git a/app/components/Views/WhatsHappeningDetailView/utils/formatAssetPrice.test.ts b/app/components/Views/WhatsHappeningDetailView/utils/formatAssetPrice.test.ts
index 8259436da86..a078f1f29ef 100644
--- a/app/components/Views/WhatsHappeningDetailView/utils/formatAssetPrice.test.ts
+++ b/app/components/Views/WhatsHappeningDetailView/utils/formatAssetPrice.test.ts
@@ -1,32 +1,5 @@
 import { TextColor } from '@metamask/design-system-react-native';
-import {
-  formatPrice,
-  formatPercentageChange,
-  formatAssetPrice,
-} from './formatAssetPrice';
-
-describe('formatPrice', () => {
-  it('formats a USD price with 2 decimal places', () => {
-    expect(formatPrice(1.0, 'USD')).toBe('$1.00');
-  });
-
-  it('formats a large USD price with comma separators', () => {
-    const result = formatPrice(95000, 'USD');
-    expect(result).toBe('$95,000.00');
-  });
-
-  it('handles fractional cents', () => {
-    const result = formatPrice(0.9998, 'USD');
-    expect(result).toBe('$1.00');
-  });
-
-  it('falls back to plain format for invalid currency codes', () => {
-    const result = formatPrice(100, 'INVALID_CURRENCY_XYZ');
-    // Should not throw; returns a fallback string
-    expect(result).toBeTruthy();
-    expect(result).toContain('100');
-  });
-});
+import { formatPercentageChange, formatAssetPrice } from './formatAssetPrice';
 
 describe('formatPercentageChange', () => {
   it('returns dash text and alternative color when change is undefined', () => {
diff --git a/app/components/Views/WhatsHappeningDetailView/utils/formatAssetPrice.ts b/app/components/Views/WhatsHappeningDetailView/utils/formatAssetPrice.ts
index 980839ae11c..65f1d9fd5eb 100644
--- a/app/components/Views/WhatsHappeningDetailView/utils/formatAssetPrice.ts
+++ b/app/components/Views/WhatsHappeningDetailView/utils/formatAssetPrice.ts
@@ -1,4 +1,5 @@
 import { TextColor } from '@metamask/design-system-react-native';
+import { formatPerpsFiat } from '@metamask/perps-controller';
 
 export interface FormattedAssetPrice {
   priceText: string;
@@ -6,27 +7,6 @@ export interface FormattedAssetPrice {
   changeColor: TextColor;
 }
 
-/**
- * Formats a fiat price for display. Mirrors the logic used in `PopularTokenRow`
- * and `TokenListItem` — fixed 2 decimal places with currency symbol.
- */
-export function formatPrice(
-  price: number,
-  currency: string | undefined,
-): string {
-  const safeCurrency = currency?.toUpperCase() || 'USD';
-  try {
-    return new Intl.NumberFormat(undefined, {
-      style: 'currency',
-      currency: safeCurrency,
-      minimumFractionDigits: 2,
-      maximumFractionDigits: 2,
-    }).format(price);
-  } catch {
-    return `${safeCurrency} ${price.toFixed(2)}`;
-  }
-}
-
 /**
  * Returns the text and color for a 24h percentage change value.
  * Positive → success green, negative → error red, zero/undefined → muted.
@@ -64,7 +44,10 @@ export function formatAssetPrice(
 ): FormattedAssetPrice {
   const priceText =
     price !== undefined && price !== null && Number.isFinite(price)
-      ? formatPrice(price, currency)
+      ? formatPerpsFiat(price, {
+          currency: currency ?? 'USD',
+          stripTrailingZeros: false,
+        })
       : '—';
 
   const { text: changeText, color: changeColor } =