Skip to content

feat: add segment events for tabs UI#29767

Merged
vinnyhoward merged 43 commits into
mainfrom
feat-tmcu-591-homepage-hub-tabs-segment-events
May 7, 2026
Merged

feat: add segment events for tabs UI#29767
vinnyhoward merged 43 commits into
mainfrom
feat-tmcu-591-homepage-hub-tabs-segment-events

Conversation

@vinnyhoward

@vinnyhoward vinnyhoward commented May 5, 2026

Copy link
Copy Markdown
Contributor

Description

Adds Home Viewed Segment event tracking for the hub page discovery tabs UI. Fires interaction_type: tab_viewed on initial mount (Portfolio) and on every subsequent tab switch, using a stable ref-based callback so analytics reads are never stale without causing extra re-renders.

  • New useTabViewedEvent hook encapsulates the event builder, guards against visitId === 0 (session not yet initialized), and exposes a stable trackTabViewed(name) callback.
  • active_ab_tests for HOME_VIEWED is injected automatically by the existing analytics registry HUB_PAGE_DISCOVERY_TABS_AB_TEST_ANALYTICS_MAPPING, no extra wiring needed here.
  • Full unit test coverage for both the hook and the tab switching behavior in HomepageDiscoveryTabs.

Changelog

CHANGELOG entry:null

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/TMCU-592

Manual testing steps

Feature: Hub page discovery tab analytics

  Scenario: user views the Portfolio tab on app open
    Given the hub page discovery tabs UI is enabled
    When the homepage mounts
    Then a Home Viewed event fires with name: portfolio and interaction_type: tab_viewed

  Scenario: user switches between tabs
    Given the homepage is open on the Portfolio tab
    When user taps the Perpetuals tab
    Then a Home Viewed event fires with name: perpetuals
    When user taps the Predictions tab
    Then a Home Viewed event fires with name: predictions
    When user taps the Portfolio tab
    Then a Home Viewed event fires with name: portfolio

  Scenario: user taps the already-active tab
    Given the homepage is open on any tab
    When user taps the same tab again
    Then no additional Home Viewed event fires

Screenshots/Recordings

Screen.Recording.2026-05-05.at.4.42.41.PM.mov

Before

~

After

~

Pre-merge author checklist

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 to import wallets with many accounts and tokens
  • I've instrumented key operations with Sentry traces for production performance metrics

For performance guidelines and tooling, see the Performance Guide.

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

Low Risk
Low risk: adds Segment/MetaMetrics event tracking on homepage discovery tab mount/switch with unit tests; no auth, funds, or persistence logic changed.

Overview
Adds useTabViewedEvent to emit MetaMetricsEvents.HOME_VIEWED with interaction_type: 'tab_viewed' and tab name, including entry_point, app_session_id, and visit_number from homepage scroll context.

Updates HomepageDiscoveryTabs to fire the event on initial mount (Portfolio) and on each distinct tab switch, and extends tests to assert the tracking is called correctly (including not re-firing when re-pressing the active tab).

Reviewed by Cursor Bugbot for commit 53f3626. Bugbot is set up for automated code reviews on this repo. Configure here.

vinnyhoward and others added 30 commits April 22, 2026 09:40
- Add HomepageDiscoveryTabs component with Portfolio, Perpetuals, and Predictions tabs
- Wire A/B test gate in Wallet — treatment renders discovery tabs, control renders existing homepage
- Lazy-mount Perps and Predictions inline as tab content with hideHeader prop to suppress duplicate headers
- Extend TabsList/TabsBar/Tab to support per-tab icons using local icon system
- Register portfolio and predict custom SVG icons
- Add per-tab gradient overlay that bleeds into wallet header with color per tab
- Fix Perps safe area top inset when rendered as embedded tab
…underline, re-enable A/B variant gating, and add test coverage for keepMounted and new PerpsHomeView props
Co-authored-by: Cursor <cursoragent@cursor.com>
…ndexRef update order and prevent control variant layout regression from shared portfolioHeader margin
Adds Tab, TabsBar, and TabsList to components-temp with animated underline,
scrollable overflow detection, icon support, and height collapse animation.
Adds Candlestick, Portfolio, and Predict icons.
Introduces TabsIconTab, TabsIconBar, and TabsIconList as a new icon-only
tab variant alongside the existing Tabs family. Reverts all modifications
to the base Tabs components to avoid downstream regressions.
@vinnyhoward vinnyhoward requested a review from a team as a code owner May 5, 2026 22:44
@metamaskbotv2 metamaskbotv2 Bot added the team-mobile-ux Mobile UX team label May 5, 2026
@github-actions

github-actions Bot commented May 5, 2026

Copy link
Copy Markdown
Contributor

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.

@github-actions github-actions Bot added the size-M label May 5, 2026

@cursor cursor Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Fix All in Cursor

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

Reviewed by Cursor Bugbot for commit 517ed3e. Configure here.

Comment thread app/components/Views/Homepage/hooks/useTabViewedEvent.ts
Base automatically changed from feat-tmcu-591-homepage-hub-tabs-ui to main May 6, 2026 17:43
@vinnyhoward vinnyhoward requested review from a team as code owners May 6, 2026 17:44
…ub.com:MetaMask/metamask-mobile into feat-tmcu-591-homepage-hub-tabs-segment-events
@vinnyhoward vinnyhoward enabled auto-merge May 6, 2026 18:27
@github-actions

github-actions Bot commented May 6, 2026

Copy link
Copy Markdown
Contributor

🔍 Smart E2E Test Selection

  • Selected E2E tags: SmokeWalletPlatform, SmokePerps, SmokePredictions, SmokeConfirmations
  • Selected Performance tags: None (no tests recommended)
  • Risk Level: low
  • AI Confidence: 90%
click to see 🤖 AI reasoning details

E2E Test Selection:
The changes introduce a new analytics hook (useTabViewedEvent) and integrate it into HomepageDiscoveryTabs to fire HOME_VIEWED MetaMetrics events when the user views or switches between the Portfolio, Perpetuals, and Predictions discovery tabs. This is a pure analytics instrumentation change with no UI layout, navigation, or business logic modifications.

The HomepageDiscoveryTabs component is used in the main Wallet view and hosts the Trending/Discovery section tabs. The relevant E2E test suites are:

  • SmokeWalletPlatform: Covers the Trending discovery tab and its subsections (Perps, Predictions, Tokens views). The tab switching behavior is directly tested here.
  • SmokePerps: Covers the Perpetuals tab which is one of the three tabs tracked by the new analytics hook. Per tag description, SmokePerps requires SmokeWalletPlatform and SmokeConfirmations.
  • SmokePredictions: Covers the Predictions tab which is another tracked tab. Per tag description, SmokePredictions requires SmokeWalletPlatform and SmokeConfirmations.
  • SmokeConfirmations: Required as a dependent tag per SmokePerps and SmokePredictions descriptions.

The risk is low because: (1) only analytics tracking is added, (2) the hook uses refs to avoid stale closures, (3) comprehensive unit tests are included, (4) no rendering performance impact expected from a simple useCallback/useEffect addition.

Performance Test Selection:
The changes are purely analytics instrumentation — adding a useCallback hook and useEffect to fire analytics events on tab switch. There is no impact on rendering performance, list rendering, data loading, or any performance-sensitive code paths. No performance tests are warranted.

View GitHub Actions results

@sonarqubecloud

sonarqubecloud Bot commented May 6, 2026

Copy link
Copy Markdown

@@ -0,0 +1,55 @@
import { useCallback, useEffect, useRef } from 'react';

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

useEffect is not used here, we can remove it from imports

@vinnyhoward vinnyhoward added this pull request to the merge queue May 7, 2026
Merged via the queue into main with commit 8203379 May 7, 2026
100 checks passed
@vinnyhoward vinnyhoward deleted the feat-tmcu-591-homepage-hub-tabs-segment-events branch May 7, 2026 15:54
@github-actions github-actions Bot locked and limited conversation to collaborators May 7, 2026
@metamaskbotv2 metamaskbotv2 Bot added the release-7.77.0 Issue or pull request that will be included in release 7.77.0 label May 7, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

release-7.77.0 Issue or pull request that will be included in release 7.77.0 size-M team-mobile-ux Mobile UX team

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants