feat(tron): display TRX ready for withdrawal (NEB-582)

Add info-only TronClaimBanner component to show TRX that has completed
the unstaking lock period and is ready for withdrawal. The banner
displays the claimable amount without any action button. The claim
action will be added in a follow-up PR.

Made-with: Cursor

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',

app/components/UI/Earn/components/Tron/TronStakingButtons/TronStakingButtons.test.tsx

@@ -31,9 +31,6 @@ jest.mock('../../../../../../component-library/hooks', () => ({
     styles: {
       balanceButtonsContainer: {},
       balanceActionButton: {},
-      ctaContent: {},
-      ctaTitle: {},
-      ctaText: {},
       buttonsRow: {},
     },
   }),
@@ -69,10 +66,6 @@ jest.mock('../../../../Stake/hooks/useStakingEligibility', () => ({
 jest.mock('../../../../../../../locales/i18n', () => ({
   strings: (key: string) => {
     const map: Record<string, string> = {
-      'stake.stake_your_trx_cta.title': 'Stake your TRX',
-      'stake.stake_your_trx_cta.description_start': 'Earn up to ',
-      'stake.stake_your_trx_cta.description_end': ' annually',
-      'stake.stake_your_trx_cta.earn_button': 'Stake',
       'stake.stake_more': 'Stake more',
       'stake.unstake': 'Unstake',
     };
@@ -108,12 +101,15 @@ describe('TronStakingButtons', () => {
     isStaked: false,
   } as TokenI;
 
-  it('navigates to stake screen with base asset TRX when not staked and uses default hasStakedPositions', () => {
-    const { getByTestId, getByText } = render(
-      <TronStakingButtons asset={baseAsset} showUnstake={false} />,
-    );
+  it('renders both Unstake and Stake more buttons', () => {
+    const { getByText } = render(<TronStakingButtons asset={baseAsset} />);
+
+    expect(getByText('Unstake')).toBeOnTheScreen();
+    expect(getByText('Stake more')).toBeOnTheScreen();
+  });
 
-    expect(getByText('Stake')).toBeOnTheScreen();
+  it('navigates to stake screen on Stake more press', () => {
+    const { getByTestId } = render(<TronStakingButtons asset={baseAsset} />);
 
     fireEvent.press(getByTestId('stake-more-button'));
 
@@ -131,7 +127,18 @@ describe('TronStakingButtons', () => {
     });
   });
 
-  it('navigates to stake with synthesized TRX when asset is staked TRX without nativeAsset', () => {
+  it('navigates to unstake screen on Unstake press', () => {
+    const { getByTestId } = render(<TronStakingButtons asset={baseAsset} />);
+
+    fireEvent.press(getByTestId('unstake-button'));
+
+    expect(mockNavigate).toHaveBeenCalledWith('StakeScreens', {
+      screen: Routes.STAKING.UNSTAKE,
+      params: { token: baseAsset },
+    });
+  });
+
+  it('resolves base asset from selector when asset is staked TRX', () => {
     const stakedTrx = {
       ...baseAsset,
       symbol: 'sTRX',
@@ -149,125 +156,29 @@ describe('TronStakingButtons', () => {
       selector({} as unknown as ReturnType<typeof Object>),
     );
 
-    const { getByTestId } = render(
-      <TronStakingButtons asset={stakedTrx} hasStakedPositions />,
-    );
+    const { getByTestId } = render(<TronStakingButtons asset={stakedTrx} />);
+
     fireEvent.press(getByTestId('stake-more-button'));
 
-    expect(mockNavigate).toHaveBeenCalled();
     const call = mockNavigate.mock.calls.find((c) => c[0] === 'StakeScreens');
-    expect(call?.[1]?.screen).toBe(Routes.STAKING.STAKE);
     const tokenArg = call?.[1]?.params?.token;
     expect(tokenArg.symbol).toBe('TRX');
-    expect(tokenArg.ticker).toBe('TRX');
     expect(tokenArg.isStaked).toBe(false);
   });
 
-  it('shows Unstake button when showUnstake is true and navigates on press', () => {
-    const { getByTestId } = render(
-      <TronStakingButtons asset={baseAsset} showUnstake hasStakedPositions />,
-    );
-
-    fireEvent.press(getByTestId('unstake-button'));
-
-    expect(mockNavigate).toHaveBeenCalledWith('StakeScreens', {
-      screen: Routes.STAKING.UNSTAKE,
-      params: { token: baseAsset },
-    });
-  });
-
-  it('does not render stake button when user is not eligible', () => {
-    mockUseStakingEligibility.mockReturnValue({
-      isEligible: false,
-      isLoadingEligibility: false,
-      error: null,
-      refreshPooledStakingEligibility: jest.fn(),
-    });
-
-    const { queryByTestId } = render(<TronStakingButtons asset={baseAsset} />);
-
-    expect(queryByTestId('stake-more-button')).toBeNull();
-  });
-
-  it('renders unstake button when user is not eligible and has active staked position', () => {
-    mockUseStakingEligibility.mockReturnValue({
-      isEligible: false,
-      isLoadingEligibility: false,
-      error: null,
-      refreshPooledStakingEligibility: jest.fn(),
-    });
-
-    const { queryByTestId } = render(
-      <TronStakingButtons asset={baseAsset} showUnstake hasStakedPositions />,
-    );
-
-    expect(queryByTestId('unstake-button')).toBeOnTheScreen();
-  });
-
-  describe('CTA section', () => {
-    it('renders CTA title and description without aprText when hasStakedPositions is false', () => {
-      const { getByText } = render(
-        <TronStakingButtons asset={baseAsset} hasStakedPositions={false} />,
-      );
-
-      expect(getByText('Stake your TRX')).toBeOnTheScreen();
-      expect(getByText(/Earn up to/)).toBeOnTheScreen();
-      expect(getByText(/annually/)).toBeOnTheScreen();
-    });
-
-    it('renders CTA with APR value when aprText is provided', () => {
-      const { getByText } = render(
-        <TronStakingButtons
-          asset={baseAsset}
-          hasStakedPositions={false}
-          aprText="4.5%"
-        />,
-      );
-
-      expect(getByText('Stake your TRX')).toBeOnTheScreen();
-      expect(getByText('4.5%')).toBeOnTheScreen();
-    });
-
-    it('does not render CTA section when hasStakedPositions is true', () => {
-      const { queryByText } = render(
-        <TronStakingButtons
-          asset={baseAsset}
-          hasStakedPositions
-          aprText="4.5%"
-        />,
-      );
-
-      expect(queryByText('Stake your TRX')).toBeNull();
-    });
-
-    it('does not render CTA section when user is not eligible', () => {
-      mockUseStakingEligibility.mockReturnValue({
-        isEligible: false,
-        isLoadingEligibility: false,
-        error: null,
-        refreshPooledStakingEligibility: jest.fn(),
-      });
-
-      const { queryByText } = render(
-        <TronStakingButtons asset={baseAsset} hasStakedPositions={false} />,
-      );
-
-      expect(queryByText('Stake your TRX')).toBeNull();
-    });
-  });
-
-  it('renders nothing when user is not eligible and has no active positions', () => {
+  it('hides Stake more button when user is not eligible', () => {
     mockUseStakingEligibility.mockReturnValue({
       isEligible: false,
       isLoadingEligibility: false,
       error: null,
       refreshPooledStakingEligibility: jest.fn(),
     });
 
-    const { toJSON } = render(
-      <TronStakingButtons asset={baseAsset} hasStakedPositions={false} />,
+    const { queryByTestId, getByTestId } = render(
+      <TronStakingButtons asset={baseAsset} />,
     );
 
-    expect(toJSON()).toBeNull();
+    expect(queryByTestId('stake-more-button')).toBeNull();
+    expect(getByTestId('unstake-button')).toBeOnTheScreen();
   });
 });