feat: display 5 year projected balance on money account deposit page

[jpuri]

Description

Show 5 year projected balane on money account deposit page.

Changelog

CHANGELOG entry:

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/CONF-1296

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

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

Low Risk
Low risk UI-only change that conditionally swaps a display component on the money account deposit flow; no transaction-building or signing logic is modified.

Overview
Shows a new “Projected 5-year balance” line on moneyAccountDeposit amount entry screens, replacing the usual PayTokenAmount display in CustomAmountInfo.

Adds a ProjectedFiveYearBalance component that compounds the entered fiat amount using the vault APY from useMoneyAccountBalance and formats it via useFiatFormatter, with guardrails to render nothing when APY/amount are invalid or loading. Updates tests/mocks accordingly and introduces the confirm.custom_amount.projected_five_year_balance locale string.

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

[github-actions]

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.

[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 29fa361. Configure here.}

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeMoney, SmokeConfirmations
• Selected Performance tags: None (no tests recommended)
• Risk Level: medium
• AI Confidence: 88%

click to see 🤖 AI reasoning details

E2E Test Selection:
The PR introduces a new ProjectedFiveYearBalance component that displays a projected 5-year balance in the confirmation UI for Money Account Deposit transactions. Key changes:

1. projected-five-year-balance.tsx (new): Calculates and displays a projected 5-year balance using APY from useMoneyAccountBalance and fiat formatting. Only renders for moneyAccountDeposit transaction types.

2. custom-amount-info.tsx (modified): Conditionally renders ProjectedFiveYearBalance instead of PayTokenAmount when isMoneyAccountDeposit is true. This changes the confirmation UI for Money/Card deposit flows.

3. en.json: Adds projected_five_year_balance localization string.

4. Test files: Unit tests only (no E2E tests added).

Tag Selection Rationale:

• SmokeMoney: Directly affected — the change is in the Money Account Deposit confirmation flow (MetaMask Card/fiat deposit). The ProjectedFiveYearBalance component is shown during the deposit confirmation.
• SmokeConfirmations: The custom-amount-info component is part of the confirmation UI system. The conditional rendering change could affect how confirmations display for money deposit transactions. Per SmokeMoney tag description, when selecting SmokeMoney for Card Add Funds flows, also select SmokeConfirmations.

Not selected:

• SmokeSwap: The change is specifically for moneyAccountDeposit type, not swap flows. The SmokeMoney description says to select SmokeSwap when the Add Funds flow executes swaps, but this change is about the deposit confirmation display (projected balance), not the swap path.
• SmokeStake: No staking flows affected.
• Other tags: No impact on accounts, networks, browser, snaps, or other areas.

Performance Test Selection:
The changes introduce a new UI component (ProjectedFiveYearBalance) that performs a simple mathematical calculation (compound interest over 5 years using BigNumber). This is a lightweight computation with no list rendering, no heavy data loading, no startup impact, and no changes to performance-critical paths. The component only renders conditionally for money account deposit confirmations. No performance tests are warranted.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
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