feat(tron): display new staking information

Made-with: Cursor

Author: ulissesferreira

app/components/UI/AssetOverview/utils/createTronDerivedAsset.ts

@@ -0,0 +1,55 @@
+import I18n from '../../../../../locales/i18n';
+import { formatWithThreshold } from '../../../../util/assets';
+import { TokenI } from '../../Tokens/types';
+
+const MINIMUM_DISPLAY_THRESHOLD = 0.00001;
+
+function formatTrxBalance(amount: number | string | undefined): string {
+  const value = Number(amount) || 0;
+  return formatWithThreshold(value, MINIMUM_DISPLAY_THRESHOLD, I18n.locale, {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 5,
+  });
+}
+
+export function createReadyForWithdrawalTrxAsset(
+  base: TokenI,
+  amount?: number | string,
+): TokenI {
+  return {
+    ...base,
+    name: 'Ready for Withdrawal',
+    symbol: 'rfwTRX',
+    ticker: 'rfwTRX',
+    isStaked: false,
+    balance: formatTrxBalance(amount),
+  };
+}
+
+export function createStakingRewardsTrxAsset(
+  base: TokenI,
+  amount?: number | string,
+): TokenI {
+  return {
+    ...base,
+    name: 'Staking Rewards',
+    symbol: 'srTRX',
+    ticker: 'srTRX',
+    isStaked: false,
+    balance: formatTrxBalance(amount),
+  };
+}
+
+export function createInLockPeriodTrxAsset(
+  base: TokenI,
+  amount?: number | string,
+): TokenI {
+  return {
+    ...base,
+    name: 'In Lock Period',
+    symbol: 'ilpTRX',
+    ticker: 'ilpTRX',
+    isStaked: false,
+    balance: formatTrxBalance(amount),
+  };
+}

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import TronClaimBanner from './TronClaimBanner';
+import { strings } from '../../../../../../../locales/i18n';
+import useTronClaim from '../../../hooks/useTronClaim';
+
+jest.mock('../../../hooks/useTronClaim');
+const mockUseTronClaim = useTronClaim as jest.MockedFunction<
+  typeof useTronClaim
+>;
+
+describe('TronClaimBanner', () => {
+  const mockHandleClaim = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockUseTronClaim.mockReturnValue({
+      handleClaim: mockHandleClaim,
+      isSubmitting: false,
+      errors: undefined,
+    });
+  });
+
+  it('renders the claim text with the given amount', () => {
+    const { getByText } = render(
+      <TronClaimBanner amount="100" chainId="tron:0x2b6653dc" />,
+    );
+
+    const expected = strings('stake.tron.has_claimable_trx', {
+      amount: '100',
+    });
+    expect(getByText(expected)).toBeDefined();
+  });
+
+  it('renders the Claim TRX button', () => {
+    const { getByTestId } = render(
+      <TronClaimBanner amount="100" chainId="tron:0x2b6653dc" />,
+    );
+
+    expect(getByTestId('tron-claim-banner-button')).toBeDefined();
+  });
+
+  it('calls handleClaim when button is pressed', () => {
+    const { getByTestId } = render(
+      <TronClaimBanner amount="100" chainId="tron:0x2b6653dc" />,
+    );
+
+    fireEvent.press(getByTestId('tron-claim-banner-button'));
+    expect(mockHandleClaim).toHaveBeenCalledTimes(1);
+  });
+
+  it('disables the button when isSubmitting is true', () => {
+    mockUseTronClaim.mockReturnValue({
+      handleClaim: mockHandleClaim,
+      isSubmitting: true,
+      errors: undefined,
+    });
+
+    const { getByTestId } = render(
+      <TronClaimBanner amount="100" chainId="tron:0x2b6653dc" />,
+    );
+
+    const button = getByTestId('tron-claim-banner-button');
+    expect(button.props.accessibilityState.disabled).toBe(true);
+  });
+});

app/components/UI/Earn/components/Tron/TronClaimBanner/TronClaimBanner.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+import type { CaipChainId } from '@metamask/utils';
+import { strings } from '../../../../../../../locales/i18n';
+import Banner, {
+  BannerAlertSeverity,
+  BannerVariant,
+} from '../../../../../../component-library/components/Banners/Banner';
+import { Text, TextButton } from '@metamask/design-system-react-native';
+import useTronClaim from '../../../hooks/useTronClaim';
+
+interface TronClaimBannerProps {
+  amount: string;
+  chainId: CaipChainId;
+  style?: ViewStyle;
+}
+
+const TronClaimBanner = ({ amount, chainId, style }: TronClaimBannerProps) => {
+  const { handleClaim, isSubmitting } = useTronClaim({ chainId });
+
+  return (
+    <Banner
+      severity={BannerAlertSeverity.Success}
+      variant={BannerVariant.Alert}
+      style={style}
+      description={
+        <>
+          <Text testID="tron-claim-banner">
+            {strings('stake.tron.has_claimable_trx', { amount })}
+          </Text>
+          <TextButton
+            testID="tron-claim-banner-button"
+            twClassName="self-start"
+            onPress={handleClaim}
+            isDisabled={isSubmitting}
+          >
+            {strings('stake.tron.claim_trx')}
+          </TextButton>
+        </>
+      }
+    />
+  );
+};
+
+export default TronClaimBanner;

app/components/UI/Earn/components/Tron/TronClaimBanner/index.ts

@@ -0,0 +1 @@
+export { default } from './TronClaimBanner';

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import TronUnstakingBanner from './TronUnstakingBanner';
+import { strings } from '../../../../../../../locales/i18n';
+
+describe('TronUnstakingBanner', () => {
+  it('renders the unstaking text with the given amount', () => {
+    const { getByText } = render(<TronUnstakingBanner amount="500" />);
+
+    const expected = strings('stake.tron.trx_unstaking_in_progress', {
+      amount: '500',
+    });
+    expect(getByText(expected)).toBeDefined();
+  });
+
+  it('renders with a different amount', () => {
+    const { getByText } = render(<TronUnstakingBanner amount="1,234.5" />);
+
+    const expected = strings('stake.tron.trx_unstaking_in_progress', {
+      amount: '1,234.5',
+    });
+    expect(getByText(expected)).toBeDefined();
+  });
+});

app/components/UI/Earn/components/Tron/TronUnstakingBanner/TronUnstakingBanner.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+import { strings } from '../../../../../../../locales/i18n';
+import Banner, {
+  BannerAlertSeverity,
+  BannerVariant,
+} from '../../../../../../component-library/components/Banners/Banner';
+import Text from '../../../../../../component-library/components/Texts/Text';
+
+interface TronUnstakingBannerProps {
+  amount: string;
+  style?: ViewStyle;
+}
+
+const TronUnstakingBanner = ({ amount, style }: TronUnstakingBannerProps) => (
+  <Banner
+    severity={BannerAlertSeverity.Info}
+    variant={BannerVariant.Alert}
+    style={style}
+    description={
+      <Text testID="tron-unstaking-banner">
+        {strings('stake.tron.trx_unstaking_in_progress', { amount })}
+      </Text>
+    }
+  />
+);
+
+export default TronUnstakingBanner;

app/components/UI/Earn/components/Tron/TronUnstakingBanner/index.ts

@@ -0,0 +1 @@
+export { default } from './TronUnstakingBanner';

app/components/UI/Earn/hooks/useTronClaim.test.ts

@@ -0,0 +1,117 @@
+import { act, renderHook } from '@testing-library/react-hooks';
+import type { InternalAccount } from '@metamask/keyring-internal-api';
+import useTronClaim from './useTronClaim';
+import { claimUnstakedTrx } from '../utils/tron-staking-snap';
+
+const mockSelectSelectedInternalAccountByScope = jest.fn();
+
+jest.mock('react-redux', () => ({
+  useSelector: jest.fn((selector) => selector()),
+}));
+
+jest.mock('../../../../selectors/multichainAccounts/accounts', () => ({
+  selectSelectedInternalAccountByScope: () =>
+    mockSelectSelectedInternalAccountByScope,
+}));
+
+jest.mock('../utils/tron-staking-snap', () => ({
+  claimUnstakedTrx: jest.fn(),
+}));
+
+describe('useTronClaim', () => {
+  const mockClaimUnstakedTrx =
+    claimUnstakedTrx as jest.MockedFunction<
+      typeof claimUnstakedTrx
+    >;
+
+  const mockAccount: Partial<InternalAccount> = {
+    id: 'tron-account-1',
+    metadata: {
+      name: 'Tron Account',
+      snap: { id: 'npm:@metamask/tron-wallet-snap', name: 'Tron Wallet Snap', enabled: true },
+      importTime: 0,
+      keyring: { type: 'snap' },
+      lastSelected: 0,
+    },
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockSelectSelectedInternalAccountByScope.mockReturnValue(mockAccount);
+  });
+
+  it('returns initial state', () => {
+    const { result } = renderHook(() =>
+      useTronClaim({ chainId: 'tron:728126428' }),
+    );
+
+    expect(result.current.isSubmitting).toBe(false);
+    expect(result.current.errors).toBeUndefined();
+    expect(typeof result.current.handleClaim).toBe('function');
+  });
+
+  it('calls claimUnstakedTrx with correct params on handleClaim', async () => {
+    mockClaimUnstakedTrx.mockResolvedValue({ valid: true });
+
+    const { result } = renderHook(() =>
+      useTronClaim({ chainId: 'tron:728126428' }),
+    );
+
+    await act(async () => {
+      await result.current.handleClaim();
+    });
+
+    expect(mockClaimUnstakedTrx).toHaveBeenCalledWith(mockAccount, {
+      fromAccountId: 'tron-account-1',
+      assetId: 'tron:728126428/slip44:195',
+    });
+    expect(result.current.isSubmitting).toBe(false);
+    expect(result.current.errors).toBeUndefined();
+  });
+
+  it('sets errors when claim returns errors', async () => {
+    mockClaimUnstakedTrx.mockResolvedValue({
+      valid: false,
+      errors: ['Insufficient energy'],
+    });
+
+    const { result } = renderHook(() =>
+      useTronClaim({ chainId: 'tron:728126428' }),
+    );
+
+    await act(async () => {
+      await result.current.handleClaim();
+    });
+
+    expect(result.current.errors).toEqual(['Insufficient energy']);
+  });
+
+  it('sets errors when claim throws', async () => {
+    mockClaimUnstakedTrx.mockRejectedValue(new Error('Network error'));
+
+    const { result } = renderHook(() =>
+      useTronClaim({ chainId: 'tron:728126428' }),
+    );
+
+    await act(async () => {
+      await result.current.handleClaim();
+    });
+
+    expect(result.current.errors).toEqual(['Network error']);
+    expect(result.current.isSubmitting).toBe(false);
+  });
+
+  it('does nothing when no account is selected', async () => {
+    mockSelectSelectedInternalAccountByScope.mockReturnValue(null);
+
+    const { result } = renderHook(() =>
+      useTronClaim({ chainId: 'tron:728126428' }),
+    );
+
+    await act(async () => {
+      await result.current.handleClaim();
+    });
+
+    expect(mockClaimUnstakedTrx).not.toHaveBeenCalled();
+  });
+});