chore: adds the Tron staking details preview

[zone-live]

Description

Adds the Tron staking preview details:

Screen.Recording.2025-11-24.at.11.08.14.mov

Changelog

CHANGELOG entry: null

Related issues

Fixes:

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

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.

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

Introduces a Tron stake/unstake preview flow (animated panel, “Done” quick action) and updates hooks, types, and tests with new validation APIs and i18n strings.

• UI/UX (Earn Input/Withdraw):
  • Add Tron preview panel (TronStakePreview) and hide keypad/quick amounts during preview; show conditional review button.
  • Replace Max with Done in quick amounts when a non-zero amount is entered (TRON only); tapping amount exits preview.
  • Right action acts as “Done” for Tron; otherwise behaves as Max/100%.
• Component: TronStakePreview
  • Compute/display estimated annual reward; support stake/unstake modes; show fee; add enter animation.
• Hooks:
  • useTronStake: rename validate → validateStakeAmount; add preview (fee) support.
  • useTronUnstake: rename validate → validateUnstakeAmount; add preview (fee) and staked-balance handling.
• Types (earn/types/tron-staking.types.ts):
  • Define ComputeFeeResult shape; refactor Tron unstake param types.
• InputDisplay: wrap amount row in Pressable with onPressAmount handler.
• Tests:
  • Update/add cases for “Done” quick action, preview rendering, fee rows, analytics, and safe-withdrawal limit error; snapshots updated.
• i18n:
  • Adjust Tron strings (shorter labels, lock/release times, fee key).

^{Written by Cursor Bugbot for commit 66a0be4. This will update automatically on new commits. Configure here.}

[Matt561]

I'm a bit concerned with the large amount of tron-specific code in components and worry it will be difficult to debug and maintain.

I have some ideas on how to improve this in the future but don't have the capacity to help right now unfortunately.

For example, EarnInputView is currently a god component. It may be easier to have a different approach where components are layout-based, dumb, and only concerned about presentation.

I wonder if an approach like this would scale better:

<EarnInputView asset={asset}/> (router) -> Calls <TronStakingInputView/>, <LendingInputView asset={asset}/>, etc. (experience-specific logic) all consume layout under the hood -> <EarnInputViewLayout/> (concerned with presentation only and exposes section/component based props and overrides)

This is an oversimplification but just thinking out loud!

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeStake
• Risk Level: medium
• AI Confidence: 85%

click to see 🤖 AI reasoning details

The changes in this PR are focused entirely on the Earn/Staking feature, specifically adding and improving TRON staking support. Here's a summary of the changes:

1. Hook updates (useTronStake.ts, useTronUnstake.ts):

   • Renamed validate to validateStakeAmount and validateUnstakeAmount for clarity
   • Added preview state and fee calculation to useTronUnstake
   • Updated stakedBalanceOverride logic for the withdrawal flow

2. UI Component updates:

   • EarnInputView.tsx: Added preview mode toggling, new quick amounts with "Done" label for TRON, integrated TronStakePreview component conditionally
   • EarnWithdrawInputView.tsx: Similar changes for withdrawal flow with preview mode and TronStakePreview integration
   • InputDisplay/index.tsx: Added onPressAmount prop with Pressable wrapper to allow re-opening editing when preview mode is active
   • TronStakePreview.tsx: Enhanced with animation, APR calculation, stake/unstake modes, new rows for estimated annual reward and lock/release times

3. Types updates (tron-staking.types.ts): Code cleanup - consolidated TronUnstakeValidateParams and TronUnstakeConfirmParams, removed unused FeeType

4. Locale updates (en.json): Added new strings for TRON staking time estimates

All these changes are self-contained within the Earn/Staking feature with no impact on core wallet functionality, accounts management, networking, or other features. The existing stake E2E test (stake-action-smoke.spec.ts) is tagged with SmokeTrade, but since it tests ETH staking on Holesky testnet (not TRON), and the test is currently skipped, it still makes sense to run SmokeStake tag to validate any staking-related functionality that might exist.

There are no E2E tests specifically for TRON staking in the codebase yet, but running SmokeStake ensures coverage of related staking functionality.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
82.8% Coverage on New Code
5.6% Duplication on New Code

See analysis details on SonarQube Cloud

[Matt561]

One comment but pre-approving so you're not blocked.

[Matt561]

Do we have a ticket created to replace this hardcoded fee value in useTronStake and useTronUnstake.

[zone-live]

Yap, it's already in a PR 👍🏼