Skip to content

feat(Rewards): Put Earn Rewards banners in a carousel#30170

Merged
Montoya merged 5 commits into
mainfrom
RWDS-1300-rewards-banners-carousel
May 14, 2026
Merged

feat(Rewards): Put Earn Rewards banners in a carousel#30170
Montoya merged 5 commits into
mainfrom
RWDS-1300-rewards-banners-carousel

Conversation

@Montoya

@Montoya Montoya commented May 14, 2026 •
edited by cursor Bot
Loading

Copy link
Copy Markdown
Contributor

Description

This puts the banners in the Earn Rewards section of the Rewards tab into a carousel, so they only take up 1 line of vertical real estate at most, ensuring other content gets more visibility.

Changelog

CHANGELOG entry: null

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/RWDS-1300

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

IMG_2114

After

Simulator Screenshot - iPhone 16e - 2026-05-14 at 00 42 18

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

Medium Risk
Moderate UI/UX change that replaces static cards with a custom snap-offset carousel and gesture-based press suppression, which could introduce layout/tap regressions across screen sizes.

Overview
Converts the EarnRewardsPreview banners from stacked full-width cards into a horizontal “peek” carousel using ScrollView with explicit snapToOffsets, dynamic card sizing via useWindowDimensions, and consistent inter-card spacing/padding.

Preserves existing visibility rules (mUSD card vs skeleton based on geo, Card banner always present) while building the carousel slots dynamically, and disables banner presses only during active drag to prevent accidental taps while swiping.

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

@Montoya Montoya added the size-S label May 14, 2026
@Montoya Montoya requested a review from a team as a code owner May 14, 2026 04:50
@Montoya Montoya added the team-rewards Rewards team label May 14, 2026
@github-actions

github-actions Bot commented May 14, 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.

@Montoya Montoya changed the title Put Earn Rewards banners in a carousel feat(Rewards): Put Earn Rewards banners in a carousel May 14, 2026
@github-actions github-actions Bot added size-M and removed size-S labels May 14, 2026
cursor[bot]
cursor Bot reviewed May 14, 2026
View reviewed changes
Comment thread app/components/UI/Rewards/components/EarnRewards/EarnRewardsPreview.tsx Outdated
cursor[bot]
cursor Bot reviewed May 14, 2026
View reviewed changes

@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.

There are 2 total unresolved issues (including 1 from previous review).

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 94cddbc. Configure here.

Comment thread app/components/UI/Rewards/components/EarnRewards/EarnRewardsPreview.tsx Outdated
VGR-GIT
VGR-GIT previously approved these changes May 14, 2026
View reviewed changes
@github-actions

github-actions Bot commented May 14, 2026

Copy link
Copy Markdown
Contributor

🔍 Smart E2E Test Selection

  • Selected E2E tags: SmokeMoney, SmokeStake
  • Selected Performance tags: None (no tests recommended)
  • Risk Level: medium
  • AI Confidence: 72%
click to see 🤖 AI reasoning details

E2E Test Selection:
The change refactors EarnRewardsPreview.tsx from a vertical card stack to a horizontal peek carousel using ScrollView. Key changes include: (1) ScrollView with snap offsets replacing a flat vertical layout, (2) drag-state tracking to disable card presses during scroll, (3) MetaMask Card card now always rendered (previously conditional on geo loading), (4) layout padding moved from outer container to header only.

This component renders on the wallet dashboard as part of the Rewards/Earn section. The affected test tags are:

  • SmokeMoney: Card tests (card-button.spec.ts, card-home-add-funds.spec.ts) navigate through the wallet home where this component renders. The Card card is now always shown regardless of geo loading state, which could affect test behavior.
  • SmokeStake: Stake/lending tests interact with the wallet home earn button area. The carousel layout change could affect how tests find and interact with earn-related UI elements.

No E2E tests directly test EarnRewardsPreview by its test IDs, but the component is visible on the wallet dashboard and could affect navigation flows in both card and stake tests. No controllers, Engine, or critical infrastructure is changed, so broader test coverage is not warranted.

Performance Test Selection:
The change is a UI layout refactor converting a vertical card stack to a horizontal ScrollView carousel. While this adds a ScrollView component, the EarnRewardsPreview section is a small part of the wallet dashboard and not a performance-critical path. The component renders at most 2 cards and the ScrollView is lightweight. No performance test tags cover this specific component, and the change does not affect account lists, onboarding, login, swaps, app launch, or asset loading flows that are covered by performance tests.

View GitHub Actions results

@Montoya Montoya enabled auto-merge May 14, 2026 13:24
@sonarqubecloud

sonarqubecloud Bot commented May 14, 2026

Copy link
Copy Markdown

Quality Gate Passed Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

@Montoya Montoya added this pull request to the merge queue May 14, 2026
Merged via the queue into main with commit c23ca53 May 14, 2026
207 of 209 checks passed
@Montoya Montoya deleted the RWDS-1300-rewards-banners-carousel branch May 14, 2026 14:39
@github-actions github-actions Bot locked and limited conversation to collaborators May 14, 2026
@metamaskbotv2 metamaskbotv2 Bot added the release-7.78.0 Issue or pull request that will be included in release 7.78.0 label May 14, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

@cursor cursor[bot] cursor[bot] left review comments

@VGR-GIT VGR-GIT VGR-GIT approved these changes

Assignees

No one assigned

Labels

release-7.78.0 Issue or pull request that will be included in release 7.78.0 size-M team-rewards Rewards team

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@Montoya @VGR-GIT