chore(homepage): add homepage section viewed segment event

[vinnyhoward]

Description

Implements the Homepage Section Viewed Segment event for the redesigned homepage. The new homepage renders content as stacked sections (Tokens, Perps, Predictions, DeFi, NFTs) rather than the old tab view, and product requires visibility tracking for each section.

What changed:

• Added HOMEPAGE_SECTION_VIEWED1 ('Homepage Viewed') to MetaMetrics.events.ts`
• Created HomepageScrollContext — bridges scroll position from the parent ScrollView in Wallet down to section components via a subscription pattern (ref-based, no React state updates on scroll to avoid re-renders)
• Created useHomepageSectionViewedEvent hook — uses measureInWindow() to detect 50% viewport visibility, fires once per homepage visit, resets on each focus via visitId
• Updated Wallet/index.tsx to provide scroll context, viewport height, and entry_point detection (app_opened, home_tab, navigated_back)
• Updated Homepage.tsx to compute per-section indices based on enabled feature flags
• Integrated the hook into all 5 section components (Tokens, Perps, Predictions, DeFi, NFTs)

Segment Event PR: https://github.com/Consensys/segment-schema/pull/477

Changelog

CHANGELOG entry: null

Related issues

Fixes: TMCU-465

Manual testing steps

Feature: Homepage Section Viewed event

  Scenario: user opens the app with homepage sections enabled
    Given the isHomepageSectionsV1Enabled feature flag is enabled
    And the user opens the app fresh

    When the homepage loads
    Then a "Homepage Viewed" event fires for each visible section
    And each event has entry_point: "app_opened"
    And each event has the correct index and total_sections_loaded

  Scenario: user scrolls to a section below the fold
    Given the homepage is loaded
    And a section is not yet in the viewport

    When the user scrolls until 50% of the section is visible
    Then a "Homepage Viewed" event fires for that section
    And it does not fire again on the same visit

  Scenario: user navigates away and returns via back gesture
    Given the user previously viewed the homepage
    When the user navigates back to the homepage
    Then all section events re-fire with entry_point: "navigated_back"

  Scenario: user switches to the home tab
    Given the user is on another tab
    When the user taps the home tab
    Then all section events re-fire with entry_point: "home_tab"

  Scenario: DeFi section is empty or disabled
    Given the user has no DeFi positions or the DeFi flag is disabled
    When the homepage loads
    Then a "Homepage Viewed" event fires for DeFi with is_empty: true and item_count: 0

Screenshots/Recordings

App Opened

app_opened.mov

Navigated Back

navigated_back.mov

Home Tab

home_tab.mov

Before

~

After

~

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
• 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 format if applicable
• I've applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

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

---

Note

Medium Risk
Adds new scroll-driven analytics instrumentation to Wallet/homepage sections, which can affect event firing accuracy and scroll performance if mis-measured or over-triggered. Changes are mostly additive but touch the main wallet screen render/scroll path and multiple section components/tests.

Overview
Implements a new MetaMetricsEvents.HOME_VIEWED Segment event for the redesigned homepage, fired when a section reaches ≥50% viewport visibility and re-fired on each homepage visit with an entry_point.

Adds HomepageScrollContext + useHomepageEntryPoint to provide scroll/viewport measurements, a throttled scroll subscription mechanism (no re-renders on scroll), and per-visit visitId from Wallet.

Updates Homepage and all section components (Tokens/Perps/Predict/DeFi/NFTs) to compute feature-flag-aware sectionIndex/totalSectionsLoaded, wrap content with measurable View refs, and call useHomeViewedEvent with loading/empty/itemCount semantics; tests are expanded/adjusted accordingly (plus a small Date.now restore in BridgeView tests for debounce reliability).

^{Written by Cursor Bugbot for commit 8c6d3ad. This will update automatically on new commits. Configure here.}

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[vinnyhoward]

This hook determines why the Homepage gained focus on each visit

• APP_OPENED
• HOME_TAB
• NAVIGATED_BACK
  by snapshotting the Tab navigator's active-tab index on blur and comparing it on the next focus.

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.}

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeWalletPlatform, SmokePerps, SmokePredictions
• Selected Performance tags: None (no tests recommended)
• Risk Level: medium
• AI Confidence: 82%

click to see 🤖 AI reasoning details

E2E Test Selection:
This PR adds a new "Home Viewed" analytics event that tracks when users view different sections of the redesigned Homepage. The changes include:

1. New Analytics Infrastructure:

   • Added HOME_VIEWED event to MetaMetrics.events.ts
   • New HomepageScrollContext for tracking scroll position and entry point
   • New useHomeViewedEvent hook that fires analytics when sections become ≥50% visible
   • New useHomepageEntryPoint hook to track how users arrived at the homepage

2. Core Wallet/Homepage Changes:

   • Wallet/index.tsx - Added scroll tracking, viewport measurement, and HomepageScrollContext provider
   • Homepage.tsx - Now computes enabled sections and passes sectionIndex/totalSectionsLoaded to each section

3. Section Updates (all sections now integrate useHomeViewedEvent):

   • TokensSection, PerpsSection, PredictionsSection, DeFiSection, NFTsSection

Tag Selection Rationale:

• SmokeWalletPlatform: Required because the Wallet/index.tsx and Homepage.tsx are core wallet platform components. The Trending tab and homepage sections (Perps, Predictions, Tokens) are all part of this tag's coverage. Changes to scroll handling and context providers could affect navigation and display.
• SmokePerps: Required because PerpsSection.tsx has significant changes including new props, View refs, and useHomeViewedEvent integration. Per tag description, changes to Perps views affect Trending (SmokeWalletPlatform).
• SmokePredictions: Required because PredictionsSection.tsx has significant changes including new props, View refs, and useHomeViewedEvent integration. Per tag description, changes to Predictions views affect Trending (SmokeWalletPlatform).

The changes are primarily analytics-focused and don't modify core business logic, but they do add new state management (scroll context), refs, and props to multiple components. The risk is medium because while the changes are additive (analytics tracking), they touch the core wallet view and multiple feature sections.

Performance Test Selection:
The changes are primarily focused on analytics event tracking (Home Viewed event) and scroll-based visibility detection. While the changes add new state management (scroll context, viewport measurements) and refs to components, they are designed to be performance-conscious: the scroll subscription pattern explicitly avoids React state updates during scrolling to prevent re-renders, and visibility checks are throttled (100ms). The changes don't affect: UI rendering performance, data loading patterns, list rendering, app startup, or critical user flows. The analytics events fire asynchronously and don't block UI. No performance tests are needed.

View GitHub Actions results

[github-actions]

⚠️ E2E Fixture Validation — Structural changes detected

Category	Count
New keys	68
Missing keys	11
Type mismatches	0
Value mismatches	7 (informational)

The committed fixture schema is out of date. To update, comment:

@metamaskbot update-mobile-fixture

View full details | Download diff report

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
84.5% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud