feat(home): add homepage 8-button action grid AB test by wachunei · Pull Request #33388 · MetaMask/metamask-mobile

wachunei · 2026-07-15T21:31:29Z

Description

Implements TMCU-1103: a 3-arm homepage AB test for the main wallet action-button slot.

Why: Validate whether an 8-button 2×4 circular grid (and which row order) outperforms the current 4 square AssetDetailsActions row for trade entry.

What:

Remote AB flag homeTMCU1103AbtestActionButtonsGrid with variants control | row1Top | row2Top (33/33/33 cumulative LD JSON thresholds)
Control keeps existing AssetDetailsActions; treatments render a self-contained HomepageActionButtonsGrid (Buy, Sell, Swap, Send / Perps, Predict, Batch Swap, Traders)
Reuses Action Button Clicked with extended ActionButtonType / ActionPosition (0–7); variant via active_ab_tests enrichment on HOME_VIEWED + ACTION_BUTTON_CLICKED
Grey-out (not hide) when product flags / signing are unavailable; onboarding checklist continues to hide the whole action slot
Orthogonal to Discovery Pills — no coupling

LaunchDarkly: Flag homeTMCU1103AbtestActionButtonsGrid is already created.

Notes for reviewers / ops: batchSellLocation for Batch Swap is Unknown until analytics defines a home entrypoint.

Changelog

CHANGELOG entry: null

Related issues

Refs: https://consensyssoftware.atlassian.net/browse/TMCU-1103

Manual testing steps

Feature: Homepage action buttons grid AB (TMCU-1103)

  Scenario: control keeps the four square action buttons
    Given the remote flag homeTMCU1103AbtestActionButtonsGrid assigns control
    And the wallet home post-onboarding checklist is not showing
    When the user opens Wallet Home
    Then AssetDetailsActions (Buy / Swap / Send / Receive) is shown

  Scenario: row1Top shows eight circular buttons with row1 first
    Given the remote flag assigns row1Top
    When the user opens Wallet Home
    Then an 8-button grid is shown with Buy, Sell, Swap, Send on the first row
    And Perps, Predict, Batch Swap, Traders on the second row

  Scenario: row2Top flips the two rows
    Given the remote flag assigns row2Top
    When the user opens Wallet Home
    Then Perps, Predict, Batch Swap, Traders appear on the first row
    And Buy, Sell, Swap, Send appear on the second row

  Scenario: product-gated buttons stay visible but greyed out
    Given the remote flag assigns row1Top
    And Perps or Predict or Batch Sell or Social Leaderboard is disabled
    When the user opens Wallet Home
    Then the corresponding grid buttons remain visible at reduced opacity
    And presses on those buttons do not navigate

  Scenario: taps emit Action Button Clicked with extended enums
    Given the remote flag assigns a treatment variant
    When the user taps Sell
    Then Action Button Clicked fires with action_name sell and the on-screen action_position
    And active_ab_tests includes homeTMCU1103AbtestActionButtonsGrid

Screenshots/Recordings

Before

N/A — control path unchanged (existing four square buttons).

After

8button_ab_test.mp4

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.

Register homeTMCU1103AbtestActionButtonsGrid variants, analytics mapping, and feature-flag registry entry for the 3-arm homepage test.

Add sell/perps/predict/batch_swap/traders action names and positions 0–7 so the homepage 2×4 grid can track taps correctly.

Self-contained 2×4 circular action grid with per-button handlers, MMDS primitives, and skipActionButtonClickTracking on swap nav so home taps keep correct ACTION_BUTTON_CLICKED position.

Swap AssetDetailsActions for HomepageActionButtonsGrid on treatment variants behind the existing onboarding checklist gate.

Add grid unit tests for row order and tap analytics, and Wallet branch coverage for control vs treatment variants.

Use ramp goToBuy instead of FundActionMenu so Buy mirrors Sell as a direct ramp entrypoint from the action buttons grid.

Match Figma Token pill styling with a subtle border-muted ring on the circular HomepageActionButton container.

Introduce allowTwoLineLabel on HomepageActionButton and the grid, defaulting to false so labels stay single-line until toggled on.

Match Figma by showing multiple people instead of a single user icon.

Replace fixed 79px width so four columns share the row evenly and avoid clipping on narrow screens.

Scale down on press and switch the pill from bg-muted to bg-muted-pressed to match MainActionButton interaction cues.

Disable Buy when the account cannot sign, matching FundActionMenu, and expand grid unit tests for all eight button clicks and flag gates.

wachunei · 2026-07-15T21:33:37Z

+    navigation.navigate(Routes.BRIDGE.ROOT, {
+      screen: Routes.BRIDGE.BATCH_SELL_TOKEN_SELECT,
+      params: {
+        batchSellLocation: BatchSellMetricsLocation.Unknown,


@MetaMask/swaps-engineers I have added this value because the definition is strictly set to the enum. cc @DostoevskysPiano

github-actions · 2026-07-15T21:34:50Z

🔍 Smart E2E Test Selection

Selected E2E tags: SmokeWalletPlatform, SmokeMoney, SmokeSwap, SmokeConfirmations, SmokePerps, SmokePredictions
Selected Performance tags: @PerformanceAssetLoading
Risk Level: high
AI Confidence: 88%

click to see 🤖 AI reasoning details

E2E Test Selection:
This PR introduces a new HomepageActionButtonsGrid component — a 2×4 grid of 8 action buttons (Buy, Sell, Swap, Send, Perps, Predict, BatchSwap, Traders) — as an A/B test treatment for the wallet homepage (TMCU-1103). The key changes and their test impacts are:

Wallet/index.tsx (critical wallet home screen): Conditionally renders either the new HomepageActionButtonsGrid (for row1Top/row2Top A/B variants) or the existing AssetDetailsActions (for control). This is a significant structural change to the main wallet view that affects all flows entering from the home screen.
New button components each navigate to different flows:
- BuyButton → ramps/buy flow → SmokeMoney
- SellButton → ramps/sell flow → SmokeMoney
- SwapButton → swap/bridge flow → SmokeSwap
- SendButton → send flow → SmokeConfirmations
- PerpsButton → perps trading → SmokePerps
- PredictButton → prediction markets → SmokePredictions
- BatchSwapButton → batch sell/bridge → SmokeSwap
- TradersButton → social leaderboard → SmokeWalletPlatform
useSwapBridgeNavigation modified with skipActionButtonClickTracking flag — affects swap navigation analytics tracking, which could impact swap flow behavior.
actionButtonTracking.ts extended with new button types (SELL, PERPS, PREDICT, BATCH_SWAP, TRADERS) and positions (5-8) — shared analytics utility used across multiple flows.
Feature flag registry (critical file): New A/B test flag homeTMCU1103AbtestActionButtonsGrid registered with 3 variants.
abTestAnalyticsRegistry.ts: New A/B test mapping registered for HOME_VIEWED and ACTION_BUTTON_CLICKED events.

Dependent tags per tag descriptions:

SmokePerps → also requires SmokeWalletPlatform + SmokeConfirmations ✓
SmokePredictions → also requires SmokeWalletPlatform + SmokeConfirmations ✓
SmokeSwap → also requires SmokeConfirmations ✓
SmokeMoney (wallet home entry to buy/sell) → also requires SmokeWalletPlatform ✓

The control variant preserves existing behavior (4-button AssetDetailsActions), so regression risk to existing tests is moderate. However, the new grid component introduces new navigation paths that need validation across all affected flows.

Performance Test Selection:
The wallet home screen (Wallet/index.tsx) now has conditional rendering logic for the new HomepageActionButtonsGrid component. This adds a new React component tree (8 buttons with individual Redux selectors, analytics hooks, and navigation hooks) that renders on the main wallet view. The @PerformanceAssetLoading tag covers token list rendering and portfolio value calculation on the wallet home screen, which is where this new component renders. The additional Redux selectors (selectCanSignTransactions, selectPerpsEnabledFlag, selectIsFirstTimePerpsUser, selectPredictEnabledFlag, selectIsSwapsEnabled, selectBatchSellEnabled, selectSocialLeaderboardEnabled) and hooks initialized per button could impact wallet home rendering performance. @PerformanceLaunch was considered but the change is conditional (A/B test control still uses old buttons), so the launch path impact is minimal. @PerformanceAssetLoading is the most relevant as it directly measures wallet home screen rendering.

View GitHub Actions results

sonarqubecloud · 2026-07-15T21:54:32Z

Quality Gate passed

Issues
1 New issue
0 Accepted issues

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

See analysis details on SonarQube Cloud

github-actions · 2026-07-15T22:12:13Z

⚡ Performance Test Results

ℹ️ Performance test results are currently non-blocking and will not block this PR.

✅ All tests passed · 2 tests · 1 device

📱 Devices tested (1)

Android: Google Pixel 8 Pro (v14.0)

✅ Passed Tests (2)

Test	Platform	Device	Duration	Team	Recording
Aggregated Balance Loading Time, SRP 1 + SRP 2 + SRP 3	Android	Google Pixel 8 Pro (v14.0)	12.51s	@assets-dev-team	📹 Watch
Asset View, SRP 1 + SRP 2 + SRP 3	Android	Google Pixel 8 Pro (v14.0)	2.71s	@assets-dev-team	📹 Watch

Branch: feature/tmcu-1103-action-buttons-grid-ab · Build: Normal · Commit: 576fc7d · View full run

wachunei added 12 commits July 15, 2026 17:30

feat(home): add TMCU-1103 action buttons grid AB config

0539227

Register homeTMCU1103AbtestActionButtonsGrid variants, analytics mapping, and feature-flag registry entry for the 3-arm homepage test.

feat(analytics): extend action button types and positions for TMCU-1103

695f0ac

Add sell/perps/predict/batch_swap/traders action names and positions 0–7 so the homepage 2×4 grid can track taps correctly.

feat(home): add HomepageActionButtonsGrid treatment UI for TMCU-1103

2b3957e

Self-contained 2×4 circular action grid with per-button handlers, MMDS primitives, and skipActionButtonClickTracking on swap nav so home taps keep correct ACTION_BUTTON_CLICKED position.

feat(home): wire TMCU-1103 action buttons grid AB into Wallet

0cc2b2d

Swap AssetDetailsActions for HomepageActionButtonsGrid on treatment variants behind the existing onboarding checklist gate.

test(home): cover TMCU-1103 action buttons grid AB wiring

eab94ff

Add grid unit tests for row order and tap analytics, and Wallet branch coverage for control vs treatment variants.

fix(home): route TMCU-1103 Buy button through goToBuy

40780c4

Use ramp goToBuy instead of FundActionMenu so Buy mirrors Sell as a direct ramp entrypoint from the action buttons grid.

fix(home): add muted border to action grid icon pills

9b39237

Match Figma Token pill styling with a subtle border-muted ring on the circular HomepageActionButton container.

feat(home): add optional two-line labels to action grid buttons

861f4d1

Introduce allowTwoLineLabel on HomepageActionButton and the grid, defaulting to false so labels stay single-line until toggled on.

fix(home): use People icon for Traders action button

94b0140

Match Figma by showing multiple people instead of a single user icon.

fix(home): use flex-1 for action grid buttons

f3757a9

Replace fixed 79px width so four columns share the row evenly and avoid clipping on narrow screens.

feat(home): add press feedback to action grid buttons

a82b411

Scale down on press and switch the pill from bg-muted to bg-muted-pressed to match MainActionButton interaction cues.

test(home): cover action grid analytics and grey-out

baf216a

Disable Buy when the account cannot sign, matching FundActionMenu, and expand grid unit tests for all eight button clicks and flag gates.

wachunei self-assigned this Jul 15, 2026

metamask-ci Bot added the team-mobile-ux Mobile UX team label Jul 15, 2026

github-actions Bot added the size-XL label Jul 15, 2026

wachunei commented Jul 15, 2026

View reviewed changes

wachunei temporarily deployed to build-e2e July 15, 2026 21:40 — with GitHub Actions Inactive

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

feat(home): add homepage 8-button action grid AB test#33388

feat(home): add homepage 8-button action grid AB test#33388
wachunei wants to merge 12 commits into
mainfrom
feature/tmcu-1103-action-buttons-grid-ab

wachunei commented Jul 15, 2026 •

edited

Loading

Uh oh!

wachunei Jul 15, 2026

Uh oh!

github-actions Bot commented Jul 15, 2026

Uh oh!

sonarqubecloud Bot commented Jul 15, 2026

Uh oh!

github-actions Bot commented Jul 15, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Uh oh!

Conversation

wachunei commented Jul 15, 2026 • edited 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!

wachunei Jul 15, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jul 15, 2026

🔍 Smart E2E Test Selection

Uh oh!

sonarqubecloud Bot commented Jul 15, 2026

Quality Gate passed

Uh oh!

github-actions Bot commented Jul 15, 2026

⚡ Performance Test Results

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

wachunei commented Jul 15, 2026 •

edited

Loading