feat(tron): display TRX in unstaking lock period

[ulissesferreira]

Description

Display TRX that is currently in the 14-day unstaking lock period on the token details view.

Adds:

• TronUnstakingBanner component showing "Unstaking X TRX in progress. It takes 14 days for unstaking." with Info severity
• createTronDerivedAsset.ts utility with createInLockPeriodTrxAsset and createStakingRewardsTrxAsset helpers
• Staking rewards Balance row rendered conditionally when staking rewards data is available
• Derives inLockPeriodTrxAsset and stakingRewardsTrxAsset from the Tron special assets selector in useTokenBalance
• Uses Text from @metamask/design-system-react-native (not deprecated component-library)

Changelog

CHANGELOG entry: Added a banner to display TRX in the 14-day unstaking lock period on the token details view

Related issues

Refs: NEB-577

Manual testing steps

Feature: TRX unstaking lock period display

  Scenario: user views TRX token details with TRX in lock period
    Given user has TRX that is in the 14-day unstaking lock period

    When user navigates to the TRX token details view
    Then an info banner is displayed showing "Unstaking X TRX in progress. It takes 14 days for unstaking."

  Scenario: user views TRX token details without TRX in lock period
    Given user has no TRX in the unstaking lock period

    When user navigates to the TRX token details view
    Then no unstaking 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
Touches the shared formatWithThreshold utility and useTokenBalance, which can affect balance formatting across the app if unexpected NaN/parsing cases occur. UI changes are otherwise gated to Tron-native TRX and only render when a positive lock-period balance is present.

Overview
Displays a new Tron-native TRX unstaking in progress info banner on the token details screen when trxInLockPeriod from selectTronSpecialAssetsBySelectedAccountGroup is a positive value.

Extends useTokenBalance to derive and locale-format inLockPeriodBalance (and threads it through TokenDetails/AssetOverviewContent), adds a dedicated TronUnstakingBanner component + tests, and hardens formatWithThreshold to return an empty string for NaN (with a new unit test).

^{Written by Cursor Bugbot for commit f482b1a. 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.

[github-actions]

⚠️ E2E Fixture Validation — Structural changes detected

Category	Count
New keys	60
Missing keys	0
Type mismatches	0
Value mismatches	7 (informational)

The committed fixture schema is out of date. To update, comment:

@metamaskbot update-mobile-fixture

View full details | Download diff report

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: 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 in this PR are focused on adding a Tron unstaking banner feature:

1. New TronUnstakingBanner component - A UI component that displays when TRX is in the unstaking/lock period
2. useTokenBalance hook update - Added inLockPeriodBalance to track TRX in lock period
3. TokenDetails and AssetOverviewContent updates - Pass and render the new banner
4. formatWithThreshold utility fix - Added defensive NaN check
5. Localization update - Added new string for the banner

Key observations:

• All Tron-specific changes are wrapped in ///: BEGIN:ONLY_INCLUDE_IF(tron) conditional compilation, meaning they only affect Tron builds
• There are NO E2E tests for Tron functionality in the test suite (verified by searching for "tron" and "TRX" in test files)
• The only TRX reference in tests is in a performance test for import-wallet
• The formatWithThreshold utility change is a defensive fix (adding NaN check) that prevents errors rather than changing behavior
• The PR includes comprehensive unit tests for all new functionality

Since there are no E2E tests that cover Tron functionality, and the changes are behind a feature flag, no E2E test tags need to be selected.

Performance Test Selection:
The changes are Tron-specific UI additions (unstaking banner) that are behind a feature flag. The formatWithThreshold utility change is a defensive NaN check that doesn't affect performance. The changes don't impact app startup, login, account list rendering, swap flows, or any other performance-critical paths. No performance tests are needed.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud