feat(tron): display TRX ready for withdrawal (#27075)

## **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**

```gherkin
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**

<img width="507" height="950" alt="Screenshot 2026-03-09 at 22 42 19"
src="https://github.com/user-attachments/assets/31892885-023f-4a62-be3e-c04978b05348"
/>

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
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](https://cursor.com)

<!-- CURSOR_SUMMARY -->
---

> [!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.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
4fbff82. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: ulissesferreira

app/components/UI/Earn/components/EarnBalance/EarnBalance.test.tsx

@@ -5,8 +5,6 @@ import StakingBalance from '../../../Stake/components/StakingBalance/StakingBala
 import { TokenI } from '../../../Tokens/types';
 import EarnLendingBalance from '../EarnLendingBalance';
 import { selectTrxStakingEnabled } from '../../../../../selectors/featureFlagController/trxStakingEnabled';
-import { selectTronSpecialAssetsBySelectedAccountGroup } from '../../../../../selectors/assets/assets-list';
-import TronStakingButtons from '../Tron/TronStakingButtons';
 import { selectIsMusdConversionFlowEnabledFlag } from '../../selectors/featureFlags';
 
 /**
@@ -25,16 +23,6 @@ jest.mock(
   }),
 );
 
-jest.mock('../../../../../selectors/assets/assets-list', () => ({
-  ...jest.requireActual('../../../../../selectors/assets/assets-list'),
-  selectTronSpecialAssetsBySelectedAccountGroup: jest.fn(),
-}));
-
-jest.mock('../Tron/TronStakingButtons', () => ({
-  __esModule: true,
-  default: jest.fn(() => null),
-}));
-
 jest.mock('../../../../../selectors/earnController', () => ({
   ...jest.requireActual('../../../../../selectors/earnController'),
   earnSelectors: {
@@ -128,35 +116,10 @@ const mockUseMusdConversionEligibility =
     typeof useMusdConversionEligibility
   >;
 
-jest.mock('../../hooks/useTronStakeApy', () => ({
-  __esModule: true,
-  default: jest.fn().mockReturnValue({
-    apyPercent: '4.5%',
-    isLoading: false,
-    error: null,
-  }),
-}));
-
-const createEmptySpecialAssetsMap = () => ({
-  energy: undefined,
-  bandwidth: undefined,
-  maxEnergy: undefined,
-  maxBandwidth: undefined,
-  stakedTrxForEnergy: undefined,
-  stakedTrxForBandwidth: undefined,
-  totalStakedTrx: 0,
-  trxReadyForWithdrawal: undefined,
-  trxStakingRewards: undefined,
-  trxInLockPeriod: undefined,
-});
-
 describe('EarnBalance', () => {
   beforeEach(() => {
     jest.clearAllMocks();
     (jest.mocked(selectTrxStakingEnabled) as jest.Mock).mockReturnValue(false);
-    (
-      jest.mocked(selectTronSpecialAssetsBySelectedAccountGroup) as jest.Mock
-    ).mockReturnValue(createEmptySpecialAssetsMap());
   });
 
   describe('Ethereum Mainnet', () => {
@@ -253,30 +216,26 @@ describe('EarnBalance', () => {
 
   describe('TRON', () => {
     const mockFlag = selectTrxStakingEnabled as unknown as jest.Mock;
-    const mockTronResources =
-      selectTronSpecialAssetsBySelectedAccountGroup as unknown as jest.Mock;
 
-    it('renders TRON stake button with aprText for TRX without staked positions', () => {
+    it('renders nothing for TRX when Tron staking is enabled', () => {
       const trx: Partial<TokenI> = {
         chainId: 'tron:728126428',
         ticker: 'TRX',
         symbol: 'TRX',
       };
 
       mockFlag.mockReturnValue(true);
-      mockTronResources.mockReturnValue(createEmptySpecialAssetsMap());
 
-      renderWithProvider(<EarnBalance asset={trx as TokenI} />);
+      const { toJSON } = renderWithProvider(
+        <EarnBalance asset={trx as TokenI} />,
+      );
 
-      expect(TronStakingButtons).toHaveBeenCalled();
-      const props = (TronStakingButtons as jest.Mock).mock.calls[0][0];
-      expect(props.asset).toBe(trx);
-      expect(props.aprText).toBe('4.5%');
-      expect(props.showUnstake).toBeUndefined();
-      expect(props.hasStakedPositions).toBeUndefined();
+      expect(toJSON()).toBeNull();
+      expect(StakingBalance).not.toHaveBeenCalled();
+      expect(EarnLendingBalance).not.toHaveBeenCalled();
     });
 
-    it('renders TRON stake more and unstake for sTRX with staked positions', () => {
+    it('renders nothing for sTRX when Tron staking is enabled', () => {
       const strx: Partial<TokenI> = {
         chainId: 'tron:728126428',
         ticker: 'sTRX',
@@ -285,20 +244,14 @@ describe('EarnBalance', () => {
       };
 
       mockFlag.mockReturnValue(true);
-      mockTronResources.mockReturnValue({
-        ...createEmptySpecialAssetsMap(),
-        stakedTrxForEnergy: { symbol: 'strx-energy', balance: '1' },
-        stakedTrxForBandwidth: { symbol: 'strx-bandwidth', balance: '2' },
-        totalStakedTrx: 3,
-      });
 
-      renderWithProvider(<EarnBalance asset={strx as TokenI} />);
+      const { toJSON } = renderWithProvider(
+        <EarnBalance asset={strx as TokenI} />,
+      );
 
-      expect(TronStakingButtons).toHaveBeenCalled();
-      const props = (TronStakingButtons as jest.Mock).mock.calls[0][0];
-      expect(props.asset).toBe(strx);
-      expect(props.showUnstake).toBe(true);
-      expect(props.hasStakedPositions).toBe(true);
+      expect(toJSON()).toBeNull();
+      expect(StakingBalance).not.toHaveBeenCalled();
+      expect(EarnLendingBalance).not.toHaveBeenCalled();
     });
   });
 

app/components/UI/Earn/components/EarnBalance/index.tsx

@@ -7,11 +7,7 @@ import { TokenI } from '../../../Tokens/types';
 import EarnLendingBalance from '../EarnLendingBalance';
 import { selectIsStakeableToken } from '../../../Stake/selectors/stakeableTokens';
 ///: BEGIN:ONLY_INCLUDE_IF(tron)
-import TronStakingButtons from '../Tron/TronStakingButtons';
-import { selectTronSpecialAssetsBySelectedAccountGroup } from '../../../../../selectors/assets/assets-list';
 import { selectTrxStakingEnabled } from '../../../../../selectors/featureFlagController/trxStakingEnabled';
-import { hasStakedTrxPositions as hasStakedTrxPositionsUtil } from '../../utils/tron';
-import useTronStakeApy from '../../hooks/useTronStakeApy';
 ///: END:ONLY_INCLUDE_IF
 import { useMusdConversionTokens } from '../../hooks/useMusdConversionTokens';
 import { useMusdConversionEligibility } from '../../hooks/useMusdConversionEligibility';
@@ -38,43 +34,12 @@ const EarnBalance = ({ asset }: EarnBalanceProps) => {
 
   const { isConversionToken } = useMusdConversionTokens();
   const { isEligible: isGeoEligible } = useMusdConversionEligibility();
+
   ///: BEGIN:ONLY_INCLUDE_IF(tron)
   const isTrxStakingEnabled = useSelector(selectTrxStakingEnabled);
-
   const isTron = asset?.chainId?.startsWith('tron:');
-  const isNativeTrx =
-    isTron && (asset?.ticker === 'TRX' || asset?.symbol === 'TRX');
-  const isStakedTrxAsset =
-    isTron && (asset?.ticker === 'sTRX' || asset?.symbol === 'sTRX');
-
-  const tronSpecialAssets = useSelector(
-    selectTronSpecialAssetsBySelectedAccountGroup,
-  );
-  const hasStakedTrxPositions = React.useMemo(
-    () => hasStakedTrxPositionsUtil(tronSpecialAssets),
-    [tronSpecialAssets],
-  );
-
-  const { apyPercent: tronApyPercent } = useTronStakeApy();
 
   if (isTron && isTrxStakingEnabled) {
-    if (hasStakedTrxPositions && isStakedTrxAsset) {
-      // sTRX row: show Unstake + Stake more
-      return (
-        <TronStakingButtons asset={asset} showUnstake hasStakedPositions />
-      );
-    }
-
-    if (!hasStakedTrxPositions && isNativeTrx) {
-      // TRX native row: show CTA + single Stake button
-      return (
-        <TronStakingButtons
-          asset={asset}
-          aprText={tronApyPercent ?? undefined}
-        />
-      );
-    }
-
     return null;
   }
   ///: END:ONLY_INCLUDE_IF

app/components/UI/Earn/components/Tron/TronStakingButtons/TronStakingButtons.styles.ts

@@ -9,17 +9,6 @@ const styleSheet = (params: { theme: Theme }) =>
       borderRadius: 12,
       backgroundColor: params.theme.colors.background.section,
     },
-    ctaContent: {
-      alignItems: 'center',
-      marginBottom: 16,
-      gap: 4,
-    },
-    ctaTitle: {
-      textAlign: 'center',
-    },
-    ctaText: {
-      textAlign: 'center',
-    },
     buttonsRow: {
       flexDirection: 'row',
       justifyContent: 'space-between',