feat: display 5 year projected balance on money account deposit page (#29607)

<!--
Please submit this PR as a draft initially.

Do not mark it as "Ready for review" until this PR meets the canonical
Definition of Ready For Review in `docs/readme/ready-for-review.md`.

In short: the template must be materially complete (not just section
titles
present), all status checks must be currently passing, and the only
expected
follow-up commits must be reviewer-driven.
-->

## **Description**

Show 5 year projected balane on money account deposit page.

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry:

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/CONF-1296

## **Manual testing steps**

```gherkin
Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]
```

## **Screenshots/Recordings**
<img width="396" height="854" alt="Screenshot 2026-05-01 at 5 54 30 PM"
src="https://github.com/user-attachments/assets/8fd76b2f-92be-437c-a32e-5a203f3d4788"
/>

## **Pre-merge author checklist**

<!--
Every checklist item must be consciously assessed before marking this PR
as
"Ready for review". A checked box means you deliberately considered that
responsibility, not that you literally performed every action listed.

Unchecked boxes are ambiguous: they are not an implicit "N/A" and they
are not
a silent "skip". See `docs/readme/ready-for-review.md` for the full
checklist
semantics.
-->

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

#### Performance checks (if applicable)

- [ ] I've tested on Android
  - Ideally on a mid-range device; emulator is acceptable
- [ ] I've tested with a power user scenario
- Use these [power-user
SRPs](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/edit-v2/401401446401?draftShareId=9d77e1e1-4bdc-4be1-9ebb-ccd916988d93)
to import wallets with many accounts and tokens
- [ ] I've instrumented key operations with Sentry traces for production
performance metrics
- See [`trace()`](/app/util/trace.ts) for usage and
[`addToken`](/app/components/Views/AddAsset/components/AddCustomToken/AddCustomToken.tsx#L274)
for an example

For performance guidelines and tooling, see the [Performance
Guide](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/400085549067/Performance+Guide+for+Engineers).

## **Pre-merge reviewer checklist**

<!--
Reviewer checklist items follow the same semantics as the author
checklist: an
unchecked box is ambiguous, a checked box means the reviewer consciously
assessed that responsibility. See `docs/readme/ready-for-review.md`.
-->

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

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Low risk UI-only change that adds a derived display value based on
APY; main risk is incorrect math/formatting or missing APY data causing
the line to disappear.
> 
> **Overview**
> Shows a *projected 5-year balance* line on the custom amount
confirmation when the transaction type is `moneyAccountDeposit`,
replacing the usual `PayTokenAmount` display in that case.
> 
> Adds a new `ProjectedFiveYearBalance` component that pulls vault APY
via `useMoneyAccountBalance`, computes 5-year compounding with
`BigNumber`, formats via `useFiatFormatter`, and safely returns `null`
for loading/invalid inputs; includes unit tests and a new i18n string
`confirm.custom_amount.projected_five_year_balance`.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
8c256e1. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: jpuri

app/components/Views/confirmations/components/info/custom-amount-info/custom-amount-info.test.tsx

@@ -64,6 +64,20 @@ jest.mock('../../../hooks/pay/useTransactionPayWithdraw', () => ({
   })),
 }));
 jest.mock('../../../../../../util/transaction-controller', () => ({}));
+jest.mock('../../../../../UI/Money/hooks/useMoneyAccountBalance', () => ({
+  __esModule: true,
+  default: () => ({
+    vaultApyQuery: { data: { apy: 5.5 }, isLoading: false },
+  }),
+}));
+jest.mock(
+  '../../../../../UI/SimulationDetails/FiatDisplay/useFiatFormatter',
+  () => ({
+    __esModule: true,
+    default: () => (value: { toString: () => string }) =>
+      `$${Number(value.toString()).toFixed(2)}`,
+  }),
+);
 jest.mock('../../../../../../core/Engine', () => ({
   context: {
     TransactionPayController: {

app/components/Views/confirmations/components/info/custom-amount-info/custom-amount-info.tsx

@@ -2,6 +2,7 @@ import React, { ReactNode, memo, useCallback, useState } from 'react';
 import { toCaipAssetType } from '@metamask/utils';
 import { TransactionType } from '@metamask/transaction-controller';
 import { PayTokenAmount, PayTokenAmountSkeleton } from '../../pay-token-amount';
+import { ProjectedFiveYearBalance } from '../../projected-five-year-balance';
 import { PayWithRow, PayWithRowSkeleton } from '../../rows/pay-with-row';
 import { BridgeFeeRow } from '../../rows/bridge-fee-row';
 import { BridgeTimeRow } from '../../rows/bridge-time-row';
@@ -208,12 +209,16 @@ export const CustomAmountInfo: React.FC<CustomAmountInfoProps> = memo(
             onPress={handleAmountPress}
             disabled={!hasTokens}
           />
-          {!hidePayTokenAmount && disablePay !== true && (
-            <PayTokenAmount
-              amountHuman={amountHuman}
-              disabled={!hasTokens || isAccountSelectionNeeded}
-            />
-          )}
+          {!hidePayTokenAmount &&
+            disablePay !== true &&
+            (isMoneyAccountDeposit ? (
+              <ProjectedFiveYearBalance amountFiat={amountFiat} />
+            ) : (
+              <PayTokenAmount
+                amountHuman={amountHuman}
+                disabled={!hasTokens || isAccountSelectionNeeded}
+              />
+            ))}
           {!hidePayTokenAmount && children}
         </Box>
         <Box

app/components/Views/confirmations/components/projected-five-year-balance/index.ts

@@ -0,0 +1,2 @@
+export { ProjectedFiveYearBalance } from './projected-five-year-balance';
+export type { ProjectedFiveYearBalanceProps } from './projected-five-year-balance';

app/components/Views/confirmations/components/projected-five-year-balance/projected-five-year-balance.test.tsx

@@ -0,0 +1,145 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import BigNumber from 'bignumber.js';
+import { ProjectedFiveYearBalance } from './projected-five-year-balance';
+import useMoneyAccountBalance from '../../../../UI/Money/hooks/useMoneyAccountBalance';
+import useFiatFormatter from '../../../../UI/SimulationDetails/FiatDisplay/useFiatFormatter';
+import { strings } from '../../../../../../locales/i18n';
+
+jest.mock('../../../../UI/Money/hooks/useMoneyAccountBalance');
+jest.mock('../../../../UI/SimulationDetails/FiatDisplay/useFiatFormatter');
+
+const useMoneyAccountBalanceMock = jest.mocked(useMoneyAccountBalance);
+const useFiatFormatterMock = jest.mocked(useFiatFormatter);
+
+const LABEL = strings('confirm.custom_amount.projected_five_year_balance');
+
+function mockBalance({
+  apy,
+  isLoading = false,
+}: {
+  apy: number | undefined;
+  isLoading?: boolean;
+}) {
+  useMoneyAccountBalanceMock.mockReturnValue({
+    vaultApyQuery: {
+      data: apy === undefined ? undefined : { apy },
+      isLoading,
+    },
+  } as unknown as ReturnType<typeof useMoneyAccountBalance>);
+}
+
+describe('ProjectedFiveYearBalance', () => {
+  const formatFiat = jest.fn(
+    (value: BigNumber) => `$${value.toFixed(2, BigNumber.ROUND_HALF_UP)}`,
+  );
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    useFiatFormatterMock.mockReturnValue(formatFiat);
+  });
+
+  it('renders label and projected balance for $1,000 at 5% APY over 5 years (~$1,276.28)', () => {
+    mockBalance({ apy: 5 });
+
+    const { getByTestId, getByText } = render(
+      <ProjectedFiveYearBalance amountFiat="1000" />,
+    );
+
+    expect(getByTestId('projected-five-year-balance')).toBeOnTheScreen();
+    expect(getByText(LABEL, { exact: false })).toBeOnTheScreen();
+    // 1000 * (1.05)^5 = 1276.2815625
+    expect(getByText('$1276.28')).toBeOnTheScreen();
+  });
+
+  it('matches the Figma example: $1,000 at the design APY rounds to $1,114.36 when APY=2.18', () => {
+    mockBalance({ apy: 2.18 });
+
+    const { getByText } = render(
+      <ProjectedFiveYearBalance amountFiat="1000" />,
+    );
+
+    // 1000 * (1.0218)^5 ≈ 1113.86 — sanity-checks the compounding formula
+    // tracks the figma direction (label + green dollar amount); exact APY/value
+    // is product-driven, this just guards the math.
+    expect(getByText(/^\$1\d{3}\.\d{2}$/)).toBeOnTheScreen();
+  });
+
+  it('returns null while APY is loading', () => {
+    mockBalance({ apy: undefined, isLoading: true });
+
+    const { queryByTestId } = render(
+      <ProjectedFiveYearBalance amountFiat="1000" />,
+    );
+
+    expect(queryByTestId('projected-five-year-balance')).toBeNull();
+  });
+
+  it('returns null when APY data is unavailable', () => {
+    mockBalance({ apy: undefined });
+
+    const { queryByTestId } = render(
+      <ProjectedFiveYearBalance amountFiat="1000" />,
+    );
+
+    expect(queryByTestId('projected-five-year-balance')).toBeNull();
+  });
+
+  it('returns null when APY is negative', () => {
+    mockBalance({ apy: -1 });
+
+    const { queryByTestId } = render(
+      <ProjectedFiveYearBalance amountFiat="1000" />,
+    );
+
+    expect(queryByTestId('projected-five-year-balance')).toBeNull();
+  });
+
+  it('returns null when APY is not finite', () => {
+    mockBalance({ apy: Number.POSITIVE_INFINITY });
+
+    const { queryByTestId } = render(
+      <ProjectedFiveYearBalance amountFiat="1000" />,
+    );
+
+    expect(queryByTestId('projected-five-year-balance')).toBeNull();
+  });
+
+  it('renders $0.00 when apy is 0% (compounding identity)', () => {
+    mockBalance({ apy: 0 });
+
+    const { getByText } = render(<ProjectedFiveYearBalance amountFiat="0" />);
+
+    expect(getByText('$0.00')).toBeOnTheScreen();
+  });
+
+  it('treats empty amountFiat as zero', () => {
+    mockBalance({ apy: 5 });
+
+    const { getByText } = render(<ProjectedFiveYearBalance amountFiat="" />);
+
+    expect(getByText('$0.00')).toBeOnTheScreen();
+  });
+
+  it('passes a BigNumber to the fiat formatter', () => {
+    mockBalance({ apy: 5 });
+
+    render(<ProjectedFiveYearBalance amountFiat="1000" />);
+
+    expect(formatFiat).toHaveBeenCalledTimes(1);
+    const passed = formatFiat.mock.calls[0][0];
+    expect(BigNumber.isBigNumber(passed)).toBe(true);
+    // 1000 * 1.05^5 = 1276.2815625
+    expect(passed.toFixed(4)).toBe('1276.2816');
+  });
+
+  it('returns null when amountFiat is non-numeric', () => {
+    mockBalance({ apy: 5 });
+
+    const { queryByTestId } = render(
+      <ProjectedFiveYearBalance amountFiat="abc" />,
+    );
+
+    expect(queryByTestId('projected-five-year-balance')).toBeNull();
+  });
+});

app/components/Views/confirmations/components/projected-five-year-balance/projected-five-year-balance.tsx

@@ -0,0 +1,56 @@
+import React, { useMemo } from 'react';
+import { View } from 'react-native';
+import BigNumber from 'bignumber.js';
+import {
+  Text,
+  TextColor,
+  TextVariant,
+} from '@metamask/design-system-react-native';
+import useMoneyAccountBalance from '../../../../UI/Money/hooks/useMoneyAccountBalance';
+import useFiatFormatter from '../../../../UI/SimulationDetails/FiatDisplay/useFiatFormatter';
+import { strings } from '../../../../../../locales/i18n';
+
+const PROJECTION_YEARS = 5;
+
+export interface ProjectedFiveYearBalanceProps {
+  amountFiat: string;
+}
+
+export function ProjectedFiveYearBalance({
+  amountFiat,
+}: ProjectedFiveYearBalanceProps) {
+  const { vaultApyQuery } = useMoneyAccountBalance();
+  const formatFiat = useFiatFormatter();
+
+  const projected = useMemo(() => {
+    const apy = vaultApyQuery.data?.apy;
+    if (typeof apy !== 'number' || !isFinite(apy) || apy < 0) {
+      return null;
+    }
+
+    const amount = new BigNumber(amountFiat || '0');
+    if (!amount.isFinite()) {
+      return null;
+    }
+
+    const growthFactor = new BigNumber(1).plus(
+      new BigNumber(apy).dividedBy(100),
+    );
+    return amount.multipliedBy(growthFactor.pow(PROJECTION_YEARS));
+  }, [amountFiat, vaultApyQuery.data?.apy]);
+
+  if (vaultApyQuery.isLoading || projected === null) {
+    return null;
+  }
+
+  return (
+    <View testID="projected-five-year-balance">
+      <Text variant={TextVariant.BodyMd} color={TextColor.TextAlternative}>
+        {strings('confirm.custom_amount.projected_five_year_balance')}{' '}
+        <Text variant={TextVariant.BodyMd} color={TextColor.SuccessDefault}>
+          {formatFiat(projected)}
+        </Text>
+      </Text>
+    </View>
+  );
+}

locales/languages/en.json

@@ -7107,7 +7107,8 @@
     "custom_amount": {
       "buy_button": "Buy crypto",
       "buy_predict": "Add funds to your wallet to use Predictions.",
-      "buy_perps": "Add funds to your wallet to use Perps."
+      "buy_perps": "Add funds to your wallet to use Perps.",
+      "projected_five_year_balance": "Projected 5-year balance:"
     },
     "unlimited": "Unlimited",
     "all": "All",