chore: What's Happening UI/UX polish by zone-live · Pull Request #29782 · MetaMask/metamask-mobile

zone-live · 2026-05-06T09:49:03Z

Description

Four small UI/UX fixes for the What's Happening feature:

Home carousel card date visibility
Detail-view header size
Expanded card height consistency
in Tokens row the Buy button switched to Trade button, and now users should always be directed to Perps trade. When a token asset has an hlPerpsMarket entry the row now shows a Trade button navigating to Perps market details; otherwise it falls back to the existing Buy/Ramp flow.

Simulator Screenshot - iPhone 17 Pro - 2026-05-06 at 12 23 11

Simulator Screenshot - iPhone 17 Pro - 2026-05-06 at 12 23 02

Simulator Screenshot - iPhone 17 Pro - 2026-05-06 at 12 01 23

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 changes navigation behavior for token action buttons (routing some assets to Perps) and alters carousel/card layout rendering based on runtime measurement, which could affect visibility/scroll positioning across devices.

Overview
Polishes What’s Happening UI by slightly increasing home carousel card heights, reducing card title lines to preserve footer/date visibility, and resizing the “View more” card to match.

Updates the detail view header to a custom, smaller layout and makes the expanded-card carousel use a fixed measured cardHeight, gating card rendering and initial scroll positioning until layout is known; tests now simulate onLayout to validate rendering.

Changes related-asset actions so token rows show Trade (navigating to Perps market details) when hlPerpsMarket is present, via new useTradeNavigation; PerpsRow is simplified to reuse the same hook, and AssetRow migrates to the design-system Button component.

^{Reviewed by Cursor Bugbot for commit 7edb172. Bugbot is set up for automated code reviews on this repo. Configure here.}

github-actions · 2026-05-06T09:49:19Z

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.

Bigshmow · 2026-05-06T16:59:13Z

Inline comments are degraded (GH incident)
Here's the one comment I wanted to leave @zone-live,
In app/components/Views/WhatsHappeningDetailView/WhatsHappeningDetailView.tsx
Line 53
Not part of any code you touched in this PR, but I realized that this is optimistic and probably worth hardening in this PR. If we ever deeplink into What’s Happening and initialIndex is omitted, this can break.
wdyt about:

const initialIndex = route.params?.initialIndex ?? 0

Bigshmow

One comment related to deeplink consideration and possible null params, otherwise lgtm.

zone-live · 2026-05-06T20:02:47Z

Inline comments are degraded (GH incident) Here's the one comment I wanted to leave @zone-live, In app/components/Views/WhatsHappeningDetailView/WhatsHappeningDetailView.tsx Line 53 Not part of any code you touched in this PR, but I realized that this is optimistic and probably worth hardening in this PR. If we ever deeplink into What’s Happening and initialIndex is omitted, this can break. wdyt about:
const initialIndex = route.params?.initialIndex ?? 0

Agreed, that's a good hardening 👍🏼 I'll add it.

github-actions · 2026-05-06T20:06:54Z

🔍 Smart E2E Test Selection

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

click to see 🤖 AI reasoning details

E2E Test Selection:
The changed files are all within the WhatsHappening feature area, which is part of the Homepage/Trending tab discovery experience. Here's the breakdown:

WhatsHappeningSection.tsx & WhatsHappeningCard.tsx: These are the homepage section components that display market insight cards. They're embedded in the Homepage which is part of the Trending tab. Changes here could affect the Trending tab rendering and navigation flows tested by SmokeWalletPlatform (trending-feed.spec.ts, trending-search.spec.ts).
WhatsHappeningDetailView.tsx & WhatsHappeningExpandedCard.tsx: The full-screen detail view when a card is tapped. This is a new/modified navigation destination from the homepage section.
PerpsRow.tsx & useTradeNavigation.ts: These directly navigate to Perps market details (Routes.PERPS.MARKET_DETAILS). Changes to this navigation hook could affect Perps flows tested by SmokePerps.
TokenRow.tsx: Uses both useTradeNavigation (Perps) and useRampNavigation (Buy/Ramp). This touches both Perps and Ramp/Money flows.
AssetRow.tsx: Shared layout component used by both TokenRow and PerpsRow.

Tag selection rationale:

SmokeWalletPlatform: Primary tag - WhatsHappening is part of the Trending/Homepage tab. The trending-feed.spec.ts tests navigate through Trending sections. Changes to homepage sections could affect these tests.
SmokePerps: PerpsRow and useTradeNavigation directly navigate to Perps market details. Per SmokePerps description, also requires SmokeWalletPlatform (already selected).
SmokePredictions: The WhatsHappening section is part of the Trending tab which includes Predictions. Per SmokePredictions description, also requires SmokeWalletPlatform (already selected).
SmokeConfirmations: Required as a dependent tag per both SmokePerps and SmokePredictions descriptions (on-chain transactions go through confirmations).

SmokeMoney was considered (TokenRow uses useRampNavigation for Buy flow), but the Buy button is a secondary action only shown when an asset has no Perps market. The changes don't modify the Ramp navigation logic itself, just call the existing hook. The risk to Ramp flows is low enough to not warrant SmokeMoney separately.

The WhatsHappening feature is feature-flag gated (selectWhatsHappeningEnabled), which reduces blast radius, but the navigation integrations with Perps and the Trending tab warrant testing those flows.

Performance Test Selection:
The changes are UI component changes to the WhatsHappening feature (market insights cards and detail view). While these are rendered components, they are feature-flag gated and represent a relatively contained UI area. The changes don't affect core rendering paths like account lists, app startup, login flows, or other performance-critical areas. No performance tests are warranted for these changes.

View GitHub Actions results

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 7edb172. Configure here.}

sonarqubecloud · 2026-05-06T20:21:54Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

chore: update ui points

e62dc9d

zone-live added the team-social-ai Social & AI team label May 6, 2026

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

zone-live added 2 commits May 6, 2026 12:25

chore: small tweak

536bd8b

chore: small tweak

9535bb7

cursor Bot reviewed May 6, 2026

View reviewed changes

Comment thread app/components/Views/WhatsHappeningDetailView/WhatsHappeningDetailView.tsx

chore: review point

fc4cd6b

Bigshmow previously approved these changes May 6, 2026

View reviewed changes

chore: small update

7edb172

zone-live dismissed Bigshmow’s stale review via 7edb172 May 6, 2026 20:03

zone-live enabled auto-merge May 6, 2026 20:04

Bigshmow approved these changes May 6, 2026

View reviewed changes

cursor Bot reviewed May 6, 2026

View reviewed changes

Comment thread app/components/Views/WhatsHappeningDetailView/components/WhatsHappeningExpandedCard.tsx

This comment was marked as outdated.

Sign in to view

zone-live added this pull request to the merge queue May 6, 2026

Merged via the queue into main with commit 8d9bcda May 6, 2026
114 checks passed

zone-live deleted the TSA-whats-happening-ui-ux-fixes branch May 6, 2026 21:20

github-actions Bot locked and limited conversation to collaborators May 6, 2026

metamaskbotv2 Bot added the release-7.77.0 Issue or pull request that will be included in release 7.77.0 label May 6, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

chore: What's Happening UI/UX polish#29782

chore: What's Happening UI/UX polish#29782
zone-live merged 5 commits into
mainfrom
TSA-whats-happening-ui-ux-fixes

zone-live commented May 6, 2026 •

edited by cursor Bot

Loading

Uh oh!

github-actions Bot commented May 6, 2026

Uh oh!

Uh oh!

Bigshmow commented May 6, 2026 •

edited

Loading

Uh oh!

Bigshmow left a comment

Uh oh!

zone-live commented May 6, 2026

Uh oh!

github-actions Bot commented May 6, 2026

Uh oh!

cursor Bot left a comment

Uh oh!

Uh oh!

This comment was marked as outdated.

sonarqubecloud Bot commented May 6, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

zone-live commented May 6, 2026 • edited by cursor Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changelog

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Performance checks (if applicable)

Pre-merge reviewer checklist

Uh oh!

github-actions Bot commented May 6, 2026

Uh oh!

Uh oh!

Bigshmow commented May 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Bigshmow left a comment

Choose a reason for hiding this comment

Uh oh!

zone-live commented May 6, 2026

Uh oh!

github-actions Bot commented May 6, 2026

🔍 Smart E2E Test Selection

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

This comment was marked as outdated.

sonarqubecloud Bot commented May 6, 2026

Quality Gate passed

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

zone-live commented May 6, 2026 •

edited by cursor Bot

Loading

Bigshmow commented May 6, 2026 •

edited

Loading