Description

Note to reviewer: please use this link to check the difference to avoid formatting noise: https://github.com/MetaMask/metamask-mobile/pull/30281/changes?w=1

Refactors the Earn withdraw/unstake input header to use reusable, design-system components and consolidates analytics wiring.

Why

• This PR is needed for stake navigation to change to native stack
• The screen still used legacy React Navigation header options (getStakingNavbar + navigation.setOptions) while other flows are moving to in-screen HeaderStandard.

What changed

• Added EarnHeaderSubtitle (app/components/UI/Earn/components/EarnHeaderSubtitle/) — renders formatted receipt-token balance and APR, with optional aprOverride (e.g. Tron).
• Updated EarnWithdrawInputView to render HeaderStandard with EarnHeaderSubtitle as subtitle instead of getStakingNavbar.
• Wired handleHeaderBackPress / handleHeaderCancelPress to read event payloads from navBarEventOptions (same events/properties as before).
• Added unit tests for EarnHeaderSubtitle.
• No user-facing behavior change — header layout, copy, and analytics events should be identical. This is a refactor for reuse and consistency.

Changelog

CHANGELOG entry: null

Related issues

Fixes:

Manual testing steps

Feature: Earn withdraw input header
  Scenario: Stablecoin lending withdrawal header (flag ON)
    Given stablecoin lending is enabled (earnStablecoinLendingEnabled / MM_STABLECOIN_LENDING_UI_ENABLED)
    And the user has a lending position (e.g. aUSDC)
    When the user opens the withdraw input screen from USDC token details
    Then the header shows "Withdraw <token>"
    And a back button is shown (no Cancel)
    And the subtitle shows "<balance> <APR>% APR"
    When the user taps back
    Then EARN_INPUT_BACK_BUTTON_CLICKED is tracked and the screen dismisses

  Scenario: Pooled staking unstake header (flag OFF)
    Given stablecoin lending is disabled
    And the user has a staked ETH position
    When the user opens the unstake input screen from ETH token details
    Then the header shows "Unstake ETH"
    And Cancel is shown (no back button)
    And the subtitle shows staked balance and APR when a receipt token exists
    When the user taps Cancel
    Then UNSTAKE_CANCEL_CLICKED is tracked and the screen dismisses

Screenshots/Recordings

isStablecoinLendingEnabled: true and USDC (withdraw)

Before	After

isStablecoinLendingEnable: false and USDC (withdraw)

Before	After

isStablecoinLendingEnable: true and ETH (unstake)

Before	After

isStablecoinLendingENabled: false and ETH (unstake)

Before	After

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.