Skip to content

feat(rewards): update mUSD calculator tab with slider and revamped design#29758

Merged
sophieqgu merged 19 commits into
mainfrom
style/musd-calc
May 8, 2026
Merged

feat(rewards): update mUSD calculator tab with slider and revamped design#29758
sophieqgu merged 19 commits into
mainfrom
style/musd-calc

Conversation

@andrewjcohen
Copy link
Copy Markdown
Contributor

@andrewjcohen andrewjcohen commented May 5, 2026

Description

This PR replaces the placeholder mUSD Rewards tab with a calculator-style experience so users can explore estimated earnings from holding mUSD.

The tab now shows a hero (hold / earn messaging), an amount slider with labeled scale points ($100–$10,000), estimated yearly / monthly / daily earnings derived from a fixed APY constant, disclaimer copy, and primary CTAs (buy / swap). Slider mapping, snapping, and clamping live in pure helpers (musdCalculatorSlider) with unit tests. Strings are added under rewards.musd.* across supported locales.

Changelog

CHANGELOG entry: Updated the mUSD bonus calculator in Rewards with a fresh design.

Related issues

No issue: Rewards mUSD calculator UI iteration (no GitHub or Jira ticket linked).

Manual testing steps

Feature: Rewards mUSD calculator tab

  Scenario: User views calculator and adjusts amount
    Given the user opens MetaMask Mobile and navigates to Rewards
    When the user selects the mUSD calculator tab (or equivalent entry for mUSD)
    Then the calculator hero, amount slider, estimated earnings, disclaimer, and CTAs are visible

  Scenario: User moves the slider
    Given the mUSD calculator tab is open
    When the user drags the amount slider across the track
    Then the displayed amount and estimated earnings update consistently and remain within the expected min/max range

Screenshots/Recordings

Before

N/A

After

N/A

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
Medium risk due to a substantial UI rewrite introducing custom gesture-driven slider behavior (Reanimated/Gesture Handler) and new i18n keys, which could affect interaction/formatting and non-English copy if translations are incomplete.

Overview
Replaces the Rewards mUSD calculator tab UI with a new slider-driven experience: a redesigned hero/earnings display, editable amount input, and a custom press/drag slider (with snapping/clamping) that updates estimated daily/yearly earnings.

Adds pure slider mapping helpers in musdCalculatorSlider (with unit tests), updates button wiring/testIDs and interaction tests (press, pan gestures, input normalization), and wraps MusdCalculatorView content in a KeyboardAvoidingView with a new test.

Updates rewards.musd.* strings (new English copy/keys) and removes the prior localized string set in many non-English locale files.

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

@andrewjcohen andrewjcohen self-assigned this May 5, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 5, 2026

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.

@andrewjcohen
Copy link
Copy Markdown
Contributor Author

I have read the CLA Document and I hereby sign the CLA

@github-actions github-actions Bot added the size-L label May 5, 2026
@andrewjcohen andrewjcohen requested a review from Montoya May 5, 2026 19:16
@andrewjcohen andrewjcohen added the team-rewards Rewards team label May 5, 2026
@andrewjcohen andrewjcohen marked this pull request as ready for review May 5, 2026 20:30
@andrewjcohen andrewjcohen requested a review from a team as a code owner May 5, 2026 20:30
Comment thread app/components/UI/Rewards/components/Tabs/MusdCalculatorTab/MusdCalculatorTab.tsx Outdated
Comment thread locales/languages/de.json Outdated
Format slider scale anchors with useFiatFormatter; remove scale_* locale keys.
Remove non-English placeholder strings for new musd copy (en.json only for Crowdin).
Tests: mock gesture-handler and fiat formatter; assert scale labels via testIDs.

Cursor bug fixes from implementation review.
Comment thread locales/languages/en.json
Comment thread app/components/UI/Rewards/utils/musdCalculatorSlider.ts Outdated
Copy link
Copy Markdown
Contributor

@cursor cursor Bot left a comment

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.

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 71da2ac. Configure here.

Comment thread locales/languages/en.json Outdated
Parameterize disclaimer_calculator with {{apy}} and pass MUSD_CONVERSION_APY; document constant in musd.ts.
@andrewjcohen andrewjcohen requested a review from a team as a code owner May 5, 2026 23:32
@Montoya Montoya changed the title feat(rewards): add mUSD calculator tab with slider and estimates feat(rewards): update mUSD calculator tab with slider and revamped design May 7, 2026
@github-actions github-actions Bot added size-XL and removed size-L labels May 7, 2026
sophieqgu
sophieqgu previously approved these changes May 8, 2026
@sophieqgu sophieqgu enabled auto-merge May 8, 2026 16:09
@Montoya Montoya removed the request for review from a team May 8, 2026 16:10
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 8, 2026

🔍 Smart E2E Test Selection

  • Selected E2E tags: None (no tests recommended)
  • Selected Performance tags: None (no tests recommended)
  • Risk Level: low
  • AI Confidence: 90%
click to see 🤖 AI reasoning details

E2E Test Selection:
The changes are entirely contained within the Rewards feature's mUSD calculator:

  1. MusdCalculatorView.tsx / MusdCalculatorTab.tsx: New/redesigned UI components for the mUSD earnings calculator within the Rewards section. These are registered as a screen in RewardsNavigator under Routes.REWARDS_MUSD_CALCULATOR_VIEW. They don't modify any shared infrastructure.

  2. musdCalculatorSlider.ts: Pure utility functions (amount↔percent conversion, snapping, clamping) with no side effects on other features.

  3. Locale files: Updated rewards.musd.* string keys across 21 languages. The changes are additive/renaming within the rewards.musd namespace only — no other locale keys are affected.

No E2E tests exist for the Rewards/mUSD calculator feature — a thorough search of the tests/ directory found no test files referencing rewards, mUSD, or the calculator. The Rewards feature is not covered by any of the available E2E test tags.

No shared components are modified: TabBar, navigation primitives, modals, confirmations, controllers, and Engine are all untouched. The swap button in MusdCalculatorTab uses useSwapBridgeNavigation for navigation only — it doesn't modify the swap flow itself.

Risk is low: These are isolated UI changes to a feature with no existing E2E coverage. Running any test suite would not validate these changes, and the changes cannot break existing tests since no shared infrastructure is modified.

Performance Test Selection:
The changes are limited to a Rewards feature UI component (mUSD calculator slider and view) and locale string updates. These are isolated UI components with no impact on app startup, account/network list rendering, login flows, or other performance-sensitive paths. No performance tests are warranted.

View GitHub Actions results

@sonarqubecloud
Copy link
Copy Markdown

sonarqubecloud Bot commented May 8, 2026

@sophieqgu sophieqgu added this pull request to the merge queue May 8, 2026
Merged via the queue into main with commit dd9d99f May 8, 2026
61 of 64 checks passed
@sophieqgu sophieqgu deleted the style/musd-calc branch May 8, 2026 17:07
@github-actions github-actions Bot locked and limited conversation to collaborators May 8, 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 8, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants