Skip to content

fix(TMCU-513): update View More card styling and Perps routing#27078

Merged
wachunei merged 1 commit into
mainfrom
fix/TMCU-513_view-more-styling-routing
Mar 6, 2026
Merged

fix(TMCU-513): update View More card styling and Perps routing#27078
wachunei merged 1 commit into
mainfrom
fix/TMCU-513_view-more-styling-routing

Conversation

@wachunei

@wachunei wachunei commented Mar 5, 2026 •
edited by cursor Bot
Loading

Copy link
Copy Markdown
Member

Description

Updates the shared "View more" card in the homepage carousels to match the updated design, and changes the Perps "View more" entrypoint to route to the market list page instead of the main Perps home.

Changes:

  • Added rounded-xl bg-background-muted background to the ViewMoreCard outer Box
  • Removed the circular bubble wrapper around the ArrowRight icon
  • Made Predictions ViewMoreCard use flex-1 and default BodyMd text size to match Perps
  • Split Perps navigation: section title still goes to Perps home, View more card now goes to the market list page

Changelog

CHANGELOG entry: Updated View more card styling with background color and updated Perps View more to navigate to market list

Related issues

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

Manual testing steps

Feature: View more card styling and routing

  Scenario: View more cards display with background
    Given user is on the homepage
    And Perps or Predictions sections show a carousel with a View more card

    When the user views the View more card
    Then it has a rounded grey background (bg-background-muted)
    And the arrow icon has no circular bubble around it

  Scenario: Perps View more navigates to market list
    Given user is on the homepage with Perps section visible

    When user taps the View more card in the Perps carousel
    Then the app navigates to the Perps market list page

  Scenario: Perps section title navigates to Perps home
    Given user is on the homepage with Perps section visible

    When user taps the Perpetuals section title
    Then the app navigates to the Perps home page

Screenshots/Recordings

Verified on device -- both Perps and Predictions View more cards now show consistent styling.

Before

View more card had no background and a circular bubble around the arrow icon.

After

Pre-merge author checklist

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 UI and navigation tweak limited to homepage carousels; main risk is an incorrect route/params causing the Perps "View more" CTA to land on the wrong screen.

Overview
Updates the shared homepage ViewMoreCard to match new design by moving the muted background and rounded corners to the outer card and removing the circular icon bubble.

Changes the Perps homepage carousel "View more" CTA to navigate to Routes.PERPS.MARKET_LIST (while the section title still routes to Routes.PERPS.PERPS_HOME) and updates the Perps unit test accordingly. Aligns the Predictions carousel ViewMoreCard sizing/typography usage with Perps by using flex-1 and default text variant.

Written by Cursor Bugbot for commit a2cb634. This will update automatically on new commits. Configure here.

@wachunei
fix(TMCU-513): update View More card styling and Perps routing
a2cb634 
- Add rounded-xl bg-background-muted to ViewMoreCard outer Box
- Remove circular icon wrapper around ArrowRight icon
- Make Predictions ViewMoreCard use flex-1 and default BodyMd text
  to match Perps styling
- Split Perps navigation: section title goes to PERPS_HOME,
  View more card goes to MARKET_LIST (market list page)

Fixes: TMCU-513
@wachunei wachunei added the team-mobile-ux Mobile UX team label Mar 5, 2026
@wachunei wachunei self-assigned this Mar 5, 2026
@metamaskbot metamaskbot added the team-money-movement issues related to Money Movement features label Mar 5, 2026
@wachunei wachunei removed the team-money-movement issues related to Money Movement features label Mar 5, 2026
@github-actions github-actions Bot added the size-S label Mar 5, 2026
@github-actions

github-actions Bot commented Mar 5, 2026

Copy link
Copy Markdown
Contributor

🔍 Smart E2E Test Selection

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

E2E Test Selection:
The changes affect the Homepage/Trending tab sections for Perps and Predictions:

  1. ViewMoreCard.tsx: Shared component styling change - removed circular background around arrow icon, now renders directly on muted background. This affects both PerpsSection and PredictionsSection.

  2. PerpsSection.tsx: Navigation behavior change - the "View More" card now navigates to MARKET_LIST instead of PERPS_HOME. This is a functional change affecting user flow.

  3. PredictionsSection.tsx: Styling adjustment - changed from fixed height to flex-1, removed textVariant prop.

  4. PerpsSection.test.tsx: Unit test updated to match new navigation behavior.

Tag Selection Rationale:

  • SmokePerps: Directly affected - navigation change in Perps section
  • SmokePredictions: Directly affected - styling change in Predictions section
  • SmokeWalletPlatform: Required because Trending tab contains both Perps and Predictions sections. Per tag description: "changes to Perps, Predictions, or Tokens views that are embedded in Trending affect this tag"
  • SmokeConfirmations: Required as a dependency when selecting SmokePerps and SmokePredictions (per tag descriptions: "When selecting SmokePerps/SmokePredictions, also select SmokeConfirmations")

Performance Test Selection:
These changes are minor UI styling and navigation destination changes. No significant rendering performance impact - the ViewMoreCard styling change is cosmetic (removing a circular background), and the navigation change just points to a different screen. No data loading, state management, or list rendering changes that would warrant performance testing.

View GitHub Actions results

@wachunei wachunei marked this pull request as ready for review March 5, 2026 18:38
@github-actions

github-actions Bot commented Mar 5, 2026

Copy link
Copy Markdown
Contributor

⚠️ 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

sonarqubecloud Bot commented Mar 5, 2026

Copy link
Copy Markdown

Quality Gate Passed Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

@wachunei wachunei enabled auto-merge March 5, 2026 23:23
@wachunei wachunei added this pull request to the merge queue Mar 6, 2026
Merged via the queue into main with commit 1a22eb4 Mar 6, 2026
133 checks passed
@wachunei wachunei deleted the fix/TMCU-513_view-more-styling-routing branch March 6, 2026 04:53
@github-actions github-actions Bot locked and limited conversation to collaborators Mar 6, 2026
@metamaskbot metamaskbot added the release-7.70.0 Issue or pull request that will be included in release 7.70.0 label Mar 6, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

@vinnyhoward vinnyhoward vinnyhoward approved these changes

Assignees

@wachunei wachunei

Labels

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

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@wachunei @vinnyhoward @metamaskbot