chore: open What's Happening source articles in the in-app browser (#30126)

<!--
Please submit this PR as a draft initially.

Do not mark it as "Ready for review" until this PR meets the canonical
Definition of Ready For Review in `docs/readme/ready-for-review.md`.

In short: the template must be materially complete (not just section
titles
present), all status checks must be currently passing, and the only
expected
follow-up commits must be reviewer-driven.
-->

## **Description**

Fixes links opening in `WhatsHappeningSourcesBottomSheet` so article
links open in the MetaMask browser instead of the system browser,
consistent with the Market Insights feature.

<img height="800" alt="Simulator Screenshot - iPhone 17 Pro - 2026-05-13
at 16 52 26"
src="https://github.com/user-attachments/assets/d13fe3f7-a5a5-4ec4-aff8-a38b0e50703f"
/>


## **Changelog**

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

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

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

CHANGELOG entry: null

## **Related issues**

Fixes:

## **Manual testing steps**

```gherkin
Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]
```

## **Screenshots/Recordings**

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

### **Before**

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

### **After**

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

## **Pre-merge author checklist**

<!--
Every checklist item must be consciously assessed before marking this PR
as
"Ready for review". A checked box means you deliberately considered that
responsibility, not that you literally performed every action listed.

Unchecked boxes are ambiguous: they are not an implicit "N/A" and they
are not
a silent "skip". See `docs/readme/ready-for-review.md` for the full
checklist
semantics.
-->

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

#### Performance checks (if applicable)

- [ ] I've tested on Android
  - Ideally on a mid-range device; emulator is acceptable
- [ ] I've tested with a power user scenario
- Use these [power-user
SRPs](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/edit-v2/401401446401?draftShareId=9d77e1e1-4bdc-4be1-9ebb-ccd916988d93)
to import wallets with many accounts and tokens
- [ ] I've instrumented key operations with Sentry traces for production
performance metrics
- See [`trace()`](/app/util/trace.ts) for usage and
[`addToken`](/app/components/Views/AddAsset/components/AddCustomToken/AddCustomToken.tsx#L274)
for an example

For performance guidelines and tooling, see the [Performance
Guide](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/400085549067/Performance+Guide+for+Engineers).

## **Pre-merge reviewer checklist**

<!--
Reviewer checklist items follow the same semantics as the author
checklist: an
unchecked box is ambiguous, a checked box means the reviewer consciously
assessed that responsibility. See `docs/readme/ready-for-review.md`.
-->

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

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Changes navigation behavior for external article links and alters
analytics emission when URLs are deemed unsafe, which could affect user
flow and metrics if routing params or safety checks are misapplied.
> 
> **Overview**
> Source article taps in `WhatsHappeningSourcesBottomSheet` now
**navigate to the in-app browser** (`Routes.BROWSER.VIEW`) with
`newTabUrl`/`timestamp`, instead of calling the OS via
`Linking.openURL`.
> 
> A new `fromWhatsHappening` route param is plumbed through
`Browser`/`BrowserTab` and used to make the browser close action
`goBack()` to the detail view. Analytics/test expectations were updated
so **unsafe URLs neither open the browser nor emit the interaction
event**.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
1c022fe. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: zone-live

app/components/Views/Browser/Browser.types.ts

@@ -10,6 +10,7 @@ export interface BrowserParams {
   fromPerps?: boolean;
   fromBenefit?: boolean;
   fromCard?: boolean;
+  fromWhatsHappening?: boolean;
   linkType?: string;
   url?: string;
 }

app/components/Views/Browser/index.js

@@ -462,6 +462,7 @@ export const BrowserPure = (props) => {
               fromPerps={route.params?.fromPerps}
               fromBenefit={route.params?.fromBenefit}
               fromCard={route.params?.fromCard}
+              fromWhatsHappening={route.params?.fromWhatsHappening}
             />
           ) : (
             <DiscoveryTab
@@ -485,6 +486,7 @@ export const BrowserPure = (props) => {
       route.params?.fromPerps,
       route.params?.fromBenefit,
       route.params?.fromCard,
+      route.params?.fromWhatsHappening,
     ],
   );
 

app/components/Views/BrowserTab/BrowserTab.tsx

@@ -140,6 +140,7 @@ export const BrowserTab: React.FC<BrowserTabProps> = React.memo(
     fromPerps,
     fromBenefit,
     fromCard,
+    fromWhatsHappening,
   }) => {
     const navigation = useNavigation();
     const { styles } = useStyles(styleSheet, {});
@@ -1294,6 +1295,9 @@ export const BrowserTab: React.FC<BrowserTabProps> = React.memo(
             screen: Routes.CARD.HOME,
           },
         });
+      } else if (fromWhatsHappening) {
+        // WhatsHappeningDetailView is in the stack navigator so goBack() works correctly.
+        navigation.goBack();
       } else {
         // Navigate to TrendingView/TrendingFeed
         // Note: We use explicit navigation instead of goBack() because the browser
@@ -1303,7 +1307,7 @@ export const BrowserTab: React.FC<BrowserTabProps> = React.memo(
           screen: Routes.TRENDING_FEED,
         });
       }
-    }, [navigation, fromPerps, fromBenefit, fromCard]);
+    }, [navigation, fromPerps, fromBenefit, fromCard, fromWhatsHappening]);
 
     const onCancelUrlBar = useCallback(() => {
       hideAutocomplete();

app/components/Views/BrowserTab/types.ts

@@ -118,6 +118,10 @@ export type BrowserTabProps = SharedTabProps & {
    * Whether browser was opened from Card (e.g. manage card / travel in-app)
    */
   fromCard?: boolean;
+  /**
+   * Whether browser was opened from the What's Happening detail view
+   */
+  fromWhatsHappening?: boolean;
 
   /**
    * Boolean indicating if browser is in fullscreen mode

app/components/Views/WhatsHappeningDetailView/components/WhatsHappeningSourcesBottomSheet.test.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Linking } from 'react-native';
 import { screen, fireEvent } from '@testing-library/react-native';
 import renderWithProvider from '../../../../util/test/renderWithProvider';
 import WhatsHappeningSourcesBottomSheet from './WhatsHappeningSourcesBottomSheet';
@@ -13,6 +12,12 @@ const mockCreateEventBuilder = jest.fn((eventName: string) => ({
   })),
   build: jest.fn(() => ({ category: eventName })),
 }));
+const mockNavigate = jest.fn();
+
+jest.mock('@react-navigation/native', () => ({
+  ...jest.requireActual('@react-navigation/native'),
+  useNavigation: () => ({ navigate: mockNavigate }),
+}));
 
 jest.mock('../../../hooks/useAnalytics/useAnalytics', () => ({
   useAnalytics: () => ({
@@ -61,7 +66,6 @@ jest.mock('../../../UI/MarketInsights/utils/marketInsightsFormatting', () => ({
   getFaviconUrl: jest.fn((url: string) => `https://favicon/${url}`),
 }));
 
-const mockOpenURL = jest.spyOn(Linking, 'openURL').mockResolvedValue(undefined);
 const mockIsSafeUrl = jest.requireMock(
   '../../../UI/MarketInsights/utils/marketInsightsFormatting',
 ).isSafeUrl;
@@ -119,7 +123,7 @@ describe('WhatsHappeningSourcesBottomSheet', () => {
     expect(screen.getByText('cointelegraph.com')).toBeOnTheScreen();
   });
 
-  it('opens the article URL when a row is pressed and URL is safe', () => {
+  it('opens the article URL in the in-app browser when a row is pressed and URL is safe', () => {
     renderWithProvider(
       <WhatsHappeningSourcesBottomSheet
         onClose={jest.fn()}
@@ -130,10 +134,20 @@ describe('WhatsHappeningSourcesBottomSheet', () => {
       />,
     );
     fireEvent.press(screen.getByText('coindesk.com'));
-    expect(mockOpenURL).toHaveBeenCalledWith('https://coindesk.com/fed-pauses');
+    expect(mockNavigate).toHaveBeenCalledWith(
+      'BrowserTabHome',
+      expect.objectContaining({
+        screen: 'BrowserView',
+        params: expect.objectContaining({
+          newTabUrl: 'https://coindesk.com/fed-pauses',
+          fromTrending: true,
+          fromWhatsHappening: true,
+        }),
+      }),
+    );
   });
 
-  it('does not open the URL when isSafeUrl returns false', () => {
+  it('does not open the browser when isSafeUrl returns false', () => {
     mockIsSafeUrl.mockReturnValue(false);
     renderWithProvider(
       <WhatsHappeningSourcesBottomSheet
@@ -145,7 +159,7 @@ describe('WhatsHappeningSourcesBottomSheet', () => {
       />,
     );
     fireEvent.press(screen.getByText('coindesk.com'));
-    expect(mockOpenURL).not.toHaveBeenCalled();
+    expect(mockNavigate).not.toHaveBeenCalled();
   });
 
   it('renders the sheet title', () => {
@@ -205,7 +219,7 @@ describe('WhatsHappeningSourcesBottomSheet', () => {
     );
   });
 
-  it('still tracks the source_click interaction even when the URL is unsafe', () => {
+  it('does not track the interaction when the URL is unsafe', () => {
     mockIsSafeUrl.mockReturnValue(false);
     renderWithProvider(
       <WhatsHappeningSourcesBottomSheet
@@ -217,7 +231,7 @@ describe('WhatsHappeningSourcesBottomSheet', () => {
       />,
     );
     fireEvent.press(screen.getByText('coindesk.com'));
-    expect(mockCreateEventBuilder).toHaveBeenCalledWith(
+    expect(mockCreateEventBuilder).not.toHaveBeenCalledWith(
       MetaMetricsEvents.WHATS_HAPPENING_INTERACTED,
     );
   });

app/components/Views/WhatsHappeningDetailView/components/WhatsHappeningSourcesBottomSheet.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useRef } from 'react';
-import { Linking } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
+import { useNavigation, NavigationProp } from '@react-navigation/native';
+import type { RootStackParamList } from '../../../../core/NavigationService/types';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import {
   FontWeight,
@@ -17,6 +18,7 @@ import ArticleRow from '../../../UI/MarketInsights/components/ArticleRow';
 import { isSafeUrl } from '../../../UI/MarketInsights/utils/marketInsightsFormatting';
 import { MetaMetricsEvents } from '../../../../core/Analytics';
 import { useAnalytics } from '../../../hooks/useAnalytics/useAnalytics';
+import Routes from '../../../../constants/navigation/Routes';
 import {
   WhatsHappeningInteractionType,
   type WhatsHappeningSourceValue,
@@ -38,9 +40,13 @@ const WhatsHappeningSourcesBottomSheet: React.FC<
   const tw = useTailwind();
   const bottomSheetRef = useRef<BottomSheetRef>(null);
   const { trackEvent, createEventBuilder } = useAnalytics();
+  const navigation = useNavigation<NavigationProp<RootStackParamList>>();
 
   const handleSourcePress = useCallback(
     (url: string) => {
+      if (!isSafeUrl(url)) {
+        return;
+      }
       trackEvent(
         createEventBuilder(MetaMetricsEvents.WHATS_HAPPENING_INTERACTED)
           .addProperties({
@@ -50,11 +56,17 @@ const WhatsHappeningSourcesBottomSheet: React.FC<
           })
           .build(),
       );
-      if (isSafeUrl(url)) {
-        Linking.openURL(url);
-      }
+      navigation.navigate(Routes.BROWSER.HOME, {
+        screen: Routes.BROWSER.VIEW,
+        params: {
+          newTabUrl: url,
+          timestamp: Date.now(),
+          fromTrending: true,
+          fromWhatsHappening: true,
+        },
+      });
     },
-    [item, cardIndex, source, trackEvent, createEventBuilder],
+    [item, cardIndex, source, trackEvent, createEventBuilder, navigation],
   );
 
   return (