chore: remove What's Happening section from Homepage and add it to Perps home view (#30129)

<!--
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**

Removes the What's Happening carousel from the Homepage and adds it in
PerpsHomeView between commodities and stocks.

<img height="800" alt="Simulator Screenshot - iPhone 17 Pro - 2026-05-13
at 16 17 07"
src="https://github.com/user-attachments/assets/46d06d81-e86b-45c8-9bb8-94f76b752024"
/>
<img height="800" alt="Simulator Screenshot - iPhone 17 Pro - 2026-05-13
at 16 17 33"
src="https://github.com/user-attachments/assets/8a0b4ab2-59a6-4f29-bc57-d90886bd5d7a"
/>


## **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**
> Moves a feature-flagged surface between major screens and refactors
`WhatsHappeningSection` props/test IDs, which could affect navigation,
analytics events, and UI layout if not exercised across all entry
points.
> 
> **Overview**
> Removes the *What’s Happening* carousel from `Homepage` (including its
refresh wiring and section-order accounting) and adds it to
`PerpsHomeView`, gated by `selectWhatsHappeningEnabled` and styled as a
dedicated section between commodities and stocks.
> 
> Refactors `app/components/UI/WhatsHappening` to be a shared UI module:
drops homepage-specific section-tracking props, adds a `Perps` source,
centralizes test IDs, updates imports/paths across Trending, deeplinks,
and the detail view, and relocates i18n keys under `whats_happening.*`.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
4b64ee0. 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

.github/CODEOWNERS

@@ -206,7 +206,7 @@ app/components/Views/Homepage/Sections/Perpetuals/ @MetaMask/perps
 # Social & AI Team
 app/components/Views/SocialLeaderboard/                              @MetaMask/social-ai
 app/components/UI/MarketInsights/                                    @MetaMask/social-ai
-app/components/Views/Homepage/Sections/WhatsHappening/               @MetaMask/social-ai
+app/components/UI/WhatsHappening/                                    @MetaMask/social-ai
 app/components/Views/Homepage/Sections/TopTraders/                   @MetaMask/social-ai
 app/core/Engine/controllers/social-controller-init*                  @MetaMask/social-ai
 app/core/Engine/controllers/social-service-init*                     @MetaMask/social-ai

app/components/UI/Perps/Views/PerpsHomeView/PerpsHomeView.styles.ts

@@ -129,6 +129,12 @@ const styleSheet = (params: { theme: Theme }) => {
     positionsOrdersContainer: {
       paddingHorizontal: 16,
     },
+    whatsHappeningSection: {
+      borderTopWidth: 1,
+      borderTopColor: colors.border.muted,
+      paddingTop: 28,
+      marginBottom: 36,
+    },
   });
 };
 

app/components/UI/Perps/Views/PerpsHomeView/PerpsHomeView.test.tsx

@@ -3,6 +3,7 @@ import { render, fireEvent } from '@testing-library/react-native';
 import PerpsHomeView from './PerpsHomeView';
 import { PERPS_EVENT_VALUE } from '@metamask/perps-controller';
 import { selectPerpsFeedbackEnabledFlag } from '../../selectors/featureFlags';
+import { selectWhatsHappeningEnabled } from '../../../../../selectors/featureFlagController/whatsHappening';
 import { mockTheme } from '../../../../../util/theme';
 import { useDiscoveryScrollManager } from '../../../Predict/hooks/useDiscoveryScrollManager';
 
@@ -478,6 +479,18 @@ jest.mock(
   '../../components/PerpsRecentActivityList/PerpsRecentActivityList',
   () => 'PerpsRecentActivityList',
 );
+jest.mock('../../../../UI/WhatsHappening', () => {
+  const { View } = jest.requireActual('react-native');
+  return function MockWhatsHappeningSection() {
+    return <View testID="whats-happening-section" />;
+  };
+});
+jest.mock(
+  '../../../../../selectors/featureFlagController/whatsHappening',
+  () => ({
+    selectWhatsHappeningEnabled: jest.fn(),
+  }),
+);
 jest.mock('../../../../../component-library/components/Texts/Text', () => ({
   __esModule: true,
   default: 'Text',
@@ -969,4 +982,21 @@ describe('PerpsHomeView', () => {
       );
     });
   });
+
+  describe('WhatsHappening section', () => {
+    it('renders WhatsHappeningSection when aiSocialWhatsHappeningEnabled flag is true', () => {
+      mockUseSelector.mockImplementation((selector: unknown) => {
+        if (selector === selectWhatsHappeningEnabled) return true;
+        return false;
+      });
+      const { getByTestId } = render(<PerpsHomeView />);
+      expect(getByTestId('whats-happening-section')).toBeOnTheScreen();
+    });
+
+    it('does not render WhatsHappeningSection when aiSocialWhatsHappeningEnabled flag is false', () => {
+      mockUseSelector.mockReturnValue(false);
+      const { queryByTestId } = render(<PerpsHomeView />);
+      expect(queryByTestId('whats-happening-section')).not.toBeOnTheScreen();
+    });
+  });
 });

app/components/UI/Perps/Views/PerpsHomeView/PerpsHomeView.tsx

@@ -54,6 +54,9 @@ import PerpsRecentActivityList from '../../components/PerpsRecentActivityList/Pe
 import PerpsHomeSection from '../../components/PerpsHomeSection';
 import PerpsRowSkeleton from '../../components/PerpsRowSkeleton';
 import PerpsHomeHeader from '../../components/PerpsHomeHeader';
+import WhatsHappeningSection from '../../../../UI/WhatsHappening';
+import { WhatsHappeningSource } from '../../../../UI/WhatsHappening/constants';
+import { selectWhatsHappeningEnabled } from '../../../../../selectors/featureFlagController/whatsHappening';
 import type { PerpsNavigationParamList } from '../../types/navigation';
 import { MetaMetricsEvents } from '../../../../../core/Analytics';
 import { useAnalytics } from '../../../../hooks/useAnalytics/useAnalytics';
@@ -108,6 +111,7 @@ const PerpsHomeView = ({
   // Feature flag for feedback button
   const isFeedbackEnabled = useSelector(selectPerpsFeedbackEnabledFlag);
   const privacyMode = useSelector(selectPrivacyMode);
+  const isWhatsHappeningEnabled = useSelector(selectWhatsHappeningEnabled);
 
   // Use centralized navigation hook
   const perpsNavigation = usePerpsNavigation();
@@ -583,6 +587,13 @@ const PerpsHomeView = ({
           source={PERPS_EVENT_VALUE.SOURCE.PERPS_HOME}
         />
 
+        {/* What's Happening Section */}
+        {isWhatsHappeningEnabled && (
+          <View style={styles.whatsHappeningSection}>
+            <WhatsHappeningSection source={WhatsHappeningSource.Perps} />
+          </View>
+        )}
+
         {/* Stocks Markets List */}
         <View onLayout={handleSectionLayout('explore_stocks')}>
           <PerpsMarketTypeSection

app/components/UI/WhatsHappening/WhatsHappening.testIds.ts

@@ -0,0 +1,4 @@
+export const WhatsHappeningSelectorsIDs = {
+  CAROUSEL: 'whats-happening-carousel',
+  SECTION_TITLE: 'whats-happening-section-title',
+} as const;

…Happening/WhatsHappeningSection.test.tsx …Happening/WhatsHappeningSection.test.tsxapp/components/Views/Homepage/Sections/WhatsHappening/WhatsHappeningSection.test.tsx renamed to app/components/UI/WhatsHappening/WhatsHappeningSection.test.tsx app/components/Views/Homepage/Sections/WhatsHappening/WhatsHappeningSection.test.tsx renamed to app/components/UI/WhatsHappening/WhatsHappeningSection.test.tsx

@@ -1,14 +1,15 @@
 import React from 'react';
 import { screen, fireEvent } from '@testing-library/react-native';
-import renderWithProvider from '../../../../../util/test/renderWithProvider';
+import renderWithProvider from '../../../util/test/renderWithProvider';
 import WhatsHappeningSection from './WhatsHappeningSection';
-import Routes from '../../../../../constants/navigation/Routes';
-import { MetaMetricsEvents } from '../../../../../core/Analytics/MetaMetrics.events';
+import Routes from '../../../constants/navigation/Routes';
+import { MetaMetricsEvents } from '../../../core/Analytics/MetaMetrics.events';
 import {
   WhatsHappeningInteractionType,
   WhatsHappeningSource,
   WhatsHappeningView,
 } from './constants';
+import { WhatsHappeningSelectorsIDs } from './WhatsHappening.testIds';
 
 const mockNavigate = jest.fn();
 const mockTrackEvent = jest.fn();
@@ -27,12 +28,9 @@ jest.mock('@react-navigation/native', () => {
   };
 });
 
-jest.mock(
-  '../../../../../selectors/featureFlagController/whatsHappening',
-  () => ({
-    selectWhatsHappeningEnabled: jest.fn(() => true),
-  }),
-);
+jest.mock('../../../selectors/featureFlagController/whatsHappening', () => ({
+  selectWhatsHappeningEnabled: jest.fn(() => true),
+}));
 
 jest.mock('./hooks', () => ({
   useWhatsHappening: jest.fn(() => ({
@@ -43,7 +41,7 @@ jest.mock('./hooks', () => ({
   })),
 }));
 
-jest.mock('../../../../hooks/useAnalytics/useAnalytics', () => ({
+jest.mock('../../hooks/useAnalytics/useAnalytics', () => ({
   useAnalytics: () => ({
     trackEvent: mockTrackEvent,
     createEventBuilder: mockCreateEventBuilder,
@@ -52,7 +50,7 @@ jest.mock('../../../../hooks/useAnalytics/useAnalytics', () => ({
 
 const mockUseWhatsHappening = jest.requireMock('./hooks').useWhatsHappening;
 const mockSelectWhatsHappeningEnabled = jest.requireMock(
-  '../../../../../selectors/featureFlagController/whatsHappening',
+  '../../../selectors/featureFlagController/whatsHappening',
 ).selectWhatsHappeningEnabled;
 
 const mockItem = {
@@ -67,8 +65,6 @@ const mockItem = {
 };
 
 const defaultProps = {
-  sectionIndex: 1,
-  totalSectionsLoaded: 3,
   source: 'homepage' as const,
 };
 
@@ -88,14 +84,14 @@ describe('WhatsHappeningSection', () => {
     mockSelectWhatsHappeningEnabled.mockImplementation(() => false);
     renderWithProvider(<WhatsHappeningSection {...defaultProps} />);
     expect(
-      screen.queryByTestId('homepage-whats-happening-carousel'),
+      screen.queryByTestId(WhatsHappeningSelectorsIDs.CAROUSEL),
     ).toBeNull();
   });
 
   it('returns null when not loading and items are empty', () => {
     renderWithProvider(<WhatsHappeningSection {...defaultProps} />);
     expect(
-      screen.queryByTestId('homepage-whats-happening-carousel'),
+      screen.queryByTestId(WhatsHappeningSelectorsIDs.CAROUSEL),
     ).toBeNull();
   });
 
@@ -108,7 +104,7 @@ describe('WhatsHappeningSection', () => {
     });
     renderWithProvider(<WhatsHappeningSection {...defaultProps} />);
     expect(
-      screen.getByTestId('homepage-whats-happening-carousel'),
+      screen.getByTestId(WhatsHappeningSelectorsIDs.CAROUSEL),
     ).toBeOnTheScreen();
   });
 
@@ -121,7 +117,7 @@ describe('WhatsHappeningSection', () => {
     });
     renderWithProvider(<WhatsHappeningSection {...defaultProps} />);
     expect(
-      screen.getByTestId('homepage-whats-happening-carousel'),
+      screen.getByTestId(WhatsHappeningSelectorsIDs.CAROUSEL),
     ).toBeOnTheScreen();
     expect(screen.getByText(mockItem.title)).toBeOnTheScreen();
   });
@@ -135,7 +131,7 @@ describe('WhatsHappeningSection', () => {
     });
     renderWithProvider(<WhatsHappeningSection {...defaultProps} />);
     expect(
-      screen.queryByTestId('homepage-whats-happening-carousel'),
+      screen.queryByTestId(WhatsHappeningSelectorsIDs.CAROUSEL),
     ).toBeNull();
     expect(screen.getByText(/unable to load/i)).toBeOnTheScreen();
   });
@@ -212,7 +208,7 @@ describe('WhatsHappeningSection', () => {
       refresh: jest.fn(),
     });
     renderWithProvider(<WhatsHappeningSection {...defaultProps} />);
-    const carousel = screen.getByTestId('homepage-whats-happening-carousel');
+    const carousel = screen.getByTestId(WhatsHappeningSelectorsIDs.CAROUSEL);
     // CARD_WIDTH = 280, GAP = 12 → offset for index 1 = 292
     fireEvent(carousel, 'momentumScrollEnd', {
       nativeEvent: { contentOffset: { x: 292, y: 0 } },
@@ -242,7 +238,7 @@ describe('WhatsHappeningSection', () => {
       refresh: jest.fn(),
     });
     renderWithProvider(<WhatsHappeningSection {...defaultProps} />);
-    const carousel = screen.getByTestId('homepage-whats-happening-carousel');
+    const carousel = screen.getByTestId(WhatsHappeningSelectorsIDs.CAROUSEL);
 
     fireEvent(carousel, 'momentumScrollEnd', {
       nativeEvent: { contentOffset: { x: 0, y: 0 } },
@@ -251,4 +247,34 @@ describe('WhatsHappeningSection', () => {
       MetaMetricsEvents.WHATS_HAPPENING_INTERACTED,
     );
   });
+
+  describe('without section-tracking props (Perps context)', () => {
+    it('renders correctly when source is Perps', () => {
+      mockUseWhatsHappening.mockReturnValue({
+        items: [mockItem],
+        isLoading: false,
+        error: null,
+        refresh: jest.fn(),
+      });
+      renderWithProvider(
+        <WhatsHappeningSection source={WhatsHappeningSource.Perps} />,
+      );
+      expect(
+        screen.getByTestId(WhatsHappeningSelectorsIDs.CAROUSEL),
+      ).toBeOnTheScreen();
+    });
+
+    it('renders error state correctly when source is Perps', () => {
+      mockUseWhatsHappening.mockReturnValue({
+        items: [],
+        isLoading: false,
+        error: 'Network error',
+        refresh: jest.fn(),
+      });
+      renderWithProvider(
+        <WhatsHappeningSection source={WhatsHappeningSource.Perps} />,
+      );
+      expect(screen.getByText(/unable to load/i)).toBeOnTheScreen();
+    });
+  });
 });