chore: related assets pills with price change

[zone-live]

Description

Adds the related assets as pills with price variation, in a sliding carousel. When the user taps a pill, it will redirect to the asset perps page.
Also fires the segment WHATS_HAPPENING_INTERACTED / related_asset_pressed analytics event on tap.

Simulator.Screen.Recording.-.iPhone.17.Pro.-.2026-05-15.at.15.09.51.mov

Changelog

CHANGELOG entry: null

Related issues

Fixes:

Manual testing steps

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

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.

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
  • See trace() for usage and addToken for an example

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

Medium Risk
Medium risk because it wires the Whats Happening carousel into the Perps live-price stream (WebSocket provider) and changes user interaction/navigation + analytics behavior; issues could surface as extra re-renders, missing data, or incorrect event firing.

Overview
Adds a horizontal related-assets pill slider to each WhatsHappeningCard, showing per-perps-asset chips with optional 24h % change and enabling tap-to-trade behavior.

Wires the homepage WhatsHappeningSection carousel under PerpsStreamProvider to support live perps price subscriptions, and refactors useWhatsHappeningAssetPrices to accept RelatedAsset[] (updating the expanded card + tests accordingly).

Introduces a new analytics interaction related_asset_pressed (via WHATS_HAPPENING_INTERACTED) on pill taps, and updates card/skeleton layout to move the date into the top row and replace the old aggregated asset label (e.g., BTC +2) with individual pills.

^{Reviewed by Cursor Bugbot for commit 4c907a9. Bugbot is set up for automated code reviews on this repo. 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.

[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.}

^{Reviewed by Cursor Bugbot for commit 59d293d. Configure here.}

[github-actions]

🔍 Smart E2E Test Selection

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

click to see 🤖 AI reasoning details

E2E Test Selection:
The changed files are all within the WhatsHappening feature, which is part of the Trending tab in the app. Key findings:

1. SmokeWalletPlatform: The WhatsHappening section is embedded in the Trending tab, which is directly tested by SmokeWalletPlatform tests (tests/smoke/trending/). The changes affect WhatsHappeningSection, WhatsHappeningCard, WhatsHappeningCardSkeleton, WhatsHappeningAssetSlider, WhatsHappeningExpandedCard, and related hooks/constants. These are all components that render within the Trending feed view. The trending-feed.spec.ts, trending-search.spec.ts, and trending-browser.spec.ts tests all use the SmokeWalletPlatform tag and exercise the Trending tab where WhatsHappening cards appear.

2. SmokePerps: The WhatsHappeningAssetPill component uses useTradeNavigation to navigate to Perps trading, and useWhatsHappeningAssetPrices fetches live perps prices via WebSocket stream. The WhatsHappeningExpandedCard also renders PerpsRow components with live perps price data. These integrations with the Perps system mean changes could affect Perps-related flows. Per the SmokePerps tag description, Perps is also a section inside the Trending tab (SmokeWalletPlatform), and changes to Perps views affect Trending.

3. No other tags needed: The changes are isolated to the WhatsHappening feature components. They don't touch shared navigation, modals, confirmations, accounts, networks, or other core infrastructure. The changes are UI/component-level within a specific feature area with no impact on other test suites.

Performance Test Selection:
The changes are UI component modifications within the WhatsHappening feature (cards, pills, sliders, expanded cards). While these components render lists of assets with live price data, the changes appear to be feature additions/modifications rather than performance-critical changes. The useWhatsHappeningAssetPrices hook uses throttling (3000ms) to limit re-renders, which is a performance-conscious design. No performance test tags directly cover the WhatsHappening/Trending feature area, and the changes don't affect core performance-sensitive paths like app launch, login, account list rendering, or swap flows.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud