feat(tron): display TRX ready for withdrawal

[ulissesferreira]

Description

Display TRX that has completed the unstaking lock period and is ready for withdrawal on the token details view. Refactor Tron staking UI so AssetOverviewContent orchestrates all Tron staking components directly.

Added

• TronUnstakedBanner component — Info-only success banner displaying "You can claim X TRX..." when TRX has completed the 14-day unstaking lock period and is ready for withdrawal. No action button (claim button deferred to NEB-576).
• TronStakingCta component — "Stake your TRX" promotional CTA with APR percentage and an "Earn" button, shown to eligible users who have no staked TRX positions. Gated behind useStakingEligibility so geo-blocked users never see it.
• readyForWithdrawalBalance derivation in useTokenBalance — Parses trxReadyForWithdrawal from the Tron special assets selector and exposes it as a formatted string (only when > 0 and numeric).
• stake.tron.has_claimable_trx locale string — New i18n key for the claimable TRX banner text.
• Unit tests for TronUnstakedBanner, TronStakingCta (including eligibility guard), and readyForWithdrawalBalance edge cases in useTokenBalance.

Changed

• AssetOverviewContent is now the orchestrator for all Tron staking UI. It directly renders, in order: native Balance → staked Balance → TronUnstakedBanner → TronUnstakingBanner → TronStakingButtons (if staked) or TronStakingCta (if not staked). Previously, staking buttons/CTA were rendered inside EarnBalance.
• EarnBalance no longer renders any Tron staking UI. When the Tron staking flag is enabled and the asset is a Tron chain asset, it returns null — all Tron staking rendering responsibility moved to AssetOverviewContent.
• TronStakingButtons simplified — Removed showUnstake, hasStakedPositions, and aprText props. The CTA section was extracted into the new TronStakingCta. Now always renders "Unstake" and conditionally renders "Stake more" based on useStakingEligibility. Removed the if (!isEligible && !hasStakedPositions) return null early exit since the parent now controls when to render it.
• useTokenBalance guards stakedTrxAsset with totalStaked > 0 — Previously createStakedTrxAsset was always called for Tron native tokens, producing a truthy object even with zero balance. Now stakedTrxAsset is undefined when no TRX is actually staked, which correctly drives the conditional rendering in AssetOverviewContent.

Note: This PR intentionally does not include a claim button. The button and snap interaction are in NEB-576.

Changelog

CHANGELOG entry: Added a banner to display TRX that is ready for withdrawal on the token details view

Related issues

Refs: NEB-582

Manual testing steps

Feature: TRX ready for withdrawal display

  Scenario: user views TRX token details with TRX ready for withdrawal
    Given user has TRX that has completed the 14-day unstaking lock period

    When user navigates to the TRX token details view
    Then a success banner is displayed showing "You can claim X TRX. Once claimed you'll get TRX back in your wallet."
    And no action button is displayed in the banner

  Scenario: user views TRX token details without TRX ready for withdrawal
    Given user has no TRX ready for withdrawal

    When user navigates to the TRX token details view
    Then no claim banner is displayed

Screenshots/Recordings

Before

N/A - new feature

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.

Made with Cursor

---

Note

Medium Risk
Updates Tron token details balance derivation and reorganizes staking/unstaking UI rendering paths, which could affect when/where staking CTAs and banners appear for TRX users; changes are UI/formatting focused with test coverage.

Overview
Adds a Tron-only “claimable TRX” success banner on the token details view by deriving a new readyForWithdrawalBalance from trxReadyForWithdrawal in useTokenBalance (with numeric/zero guards) and wiring it through TokenDetails into AssetOverviewContent.

Refactors Tron staking UI ownership: AssetOverviewContent now directly renders Tron staking/unstaking components (including a new TronStakingCta for eligible users with no staked TRX), while EarnBalance no longer renders any Tron staking UI and returns null when Tron staking is enabled.

Simplifies TronStakingButtons by removing CTA-related props/markup, always showing Unstake and conditionally showing “Stake more” based on eligibility, and introduces shared test IDs; adds/updates unit tests and introduces the new stake.tron.has_claimable_trx locale string.

^{Written by Cursor Bugbot for commit 4fbff82. This will update automatically on new commits. 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.

The base branch was changed.

[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.}

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeTrade, SmokeConfirmations, SmokeWalletPlatform
• Selected Performance tags: @PerformanceAssetLoading
• Risk Level: medium
• AI Confidence: 74%

click to see 🤖 AI reasoning details

E2E Test Selection:
The changes are focused on Earn UI components (including new/updated Tron staking buttons, CTAs, and banners), TokenDetails view updates, and the useTokenBalance hook.

1. Earn/Tron staking components are part of the Earn experience accessed via the Trade wallet actions menu. SmokeTrade explicitly covers wallet actions entry points (Swap, Bridge, Perps, Predictions, Earn) and staking-related flows. Even if Tron staking is a new/variant path, changes in Earn UI could affect navigation and integration from the Trade entry point.

2. SmokeTrade requires SmokeConfirmations for on-chain flows (staking/deposit-like interactions). While this PR appears UI- and hook-focused, Earn flows typically trigger transactions, so confirmations must be validated.

3. TokenDetails and useTokenBalance changes can affect asset balance display and token detail screens, which are core wallet surfaces. SmokeWalletPlatform covers transaction history, core wallet views, and general wallet platform behavior where token balances and details are surfaced. This ensures no regression in wallet core flows due to balance logic updates.

No controller, Engine, or network permission changes were introduced, so NetworkAbstractions, MultiChainAPI, Identity, or Accounts-specific tags are not required.

Overall risk is medium due to balance hook changes and UI updates in user-facing wallet surfaces.

Performance Test Selection:
Changes to useTokenBalance and TokenDetails can impact balance fetching, token list rendering, and asset display performance. Running @PerformanceAssetLoading ensures no regressions in balance loading and token rendering performance. No evidence of changes affecting launch, onboarding, login, swaps execution timing, predictions, or perps performance.

View GitHub Actions results

[github-actions]

✅ E2E Fixture Validation — Schema is up to date
11 value mismatches detected (expected — fixture represents an existing user).
View details

[sonarqubecloud]

Quality Gate passed

Issues
7 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud