feat: add alerts to perps deposit confirmation (MetaMask#17892)

## **Description**

Add amount alerts to Perps specific deposit transaction confirmation.

Specifically:

- Add `PayTokenBalance` component to display available fiat balance of
selected transaction pay token.
- Add `TotalRow` component to display total fiat cost of transaction.
- Add `TokenAmountNative` component to display native value of token
amount.
- Display alert message in `EditAmount` if alert exists for matching
field.
- Display loaders in `PayWithRow` and `TotalRow` while quotes are
loading.
- Add `usePerpsDepositMinimumAlert` and `useInsufficientPayTokenBalance`
alert hooks.
- Return `balanceHuman` from `useTransactionPayToken` hook.
- Return `totalHuman` and `totalRaw` from
`useTransactionPayTokenAmounts` hook.
- Add `useTransactionTotalFiat` hook to aggregate all costs.
- Return `amountNative` from `useTokenAmount` hook.
- Add `isTransactionBridgeQuotesLoadingById` property to
`confirmationMetrics` slice.

## **Changelog**

CHANGELOG entry: null

## **Related issues**

Fixes:
[MetaMask#5499](MetaMask/MetaMask-planning#5499)

## **Manual testing steps**

## **Screenshots/Recordings**

### **Before**

### **After**

<img width="250" alt="Insufficient"
src="https://github.com/user-attachments/assets/b3a07707-3acc-4bca-a4bc-6b92f9d3e3fe"
/>

<img width="250" alt="Minimum"
src="https://github.com/user-attachments/assets/2343515b-e6a8-42af-a2cc-166dcbd1ce21"
/>

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

Author: matthewwalsh0

app/components/Views/confirmations/__mocks__/controllers/transaction-controller-mock.ts

@@ -10,7 +10,7 @@ import {
 } from '../helpers/approve';
 import { ZERO_ADDRESS } from '../../constants/address';
 
-const transactionIdMock = '699ca2f0-e459-11ef-b6f6-d182277cf5e1';
+export const transactionIdMock = '699ca2f0-e459-11ef-b6f6-d182277cf5e1';
 const permit2TokenMock = '0x1234567890123456789012345678901234567890';
 
 export const approvalSpenderMock = '0x9876543210987654321098765432109876543210';

app/components/Views/confirmations/components/UI/info-row/alert-row/constants.ts

@@ -1,4 +1,5 @@
 export enum RowAlertKey {
+  Amount = 'amount',
   AccountTypeUpgrade = 'accountTypeUpgrade',
   Blockaid = 'blockaid',
   EstimatedFee = 'estimatedFee',

app/components/Views/confirmations/components/confirm/confirm-component.test.tsx

@@ -16,6 +16,7 @@ import renderWithProvider from '../../../../../util/test/renderWithProvider';
 // eslint-disable-next-line import/no-namespace
 import * as ConfirmationRedesignEnabled from '../../hooks/useConfirmationRedesignEnabled';
 import { Confirm } from './confirm-component';
+import { useTokensWithBalance } from '../../../../UI/Bridge/hooks/useTokensWithBalance';
 
 jest.mock('../../../../../components/hooks/useEditNonce', () => ({
   useEditNonce: jest.fn().mockReturnValue({}),
@@ -138,6 +139,10 @@ jest.mock('react-native-gzip', () => ({
   deflate: (str: string) => str,
 }));
 
+jest.mock('../../../../UI/Bridge/hooks/useTokensWithBalance', () => ({
+  useTokensWithBalance: () => [] as ReturnType<typeof useTokensWithBalance>,
+}));
+
 describe('Confirm', () => {
   afterEach(() => {
     jest.restoreAllMocks();

app/components/Views/confirmations/components/edit-amount/edit-amount.styles.ts

@@ -1,16 +1,25 @@
 import { StyleSheet } from 'react-native';
 import { Theme } from '../../../../../util/theme/models';
 
-const styleSheet = (_params: { theme: Theme }) =>
+const styleSheet = (params: { theme: Theme; vars: { hasAlert: boolean } }) =>
   StyleSheet.create({
     container: {
-      paddingTop: 40,
-      paddingBottom: 40,
+      display: 'flex',
+      gap: 8,
+      marginTop: 16,
+      marginBottom: 16,
     },
     input: {
       textAlign: 'center',
       fontSize: 64,
       fontWeight: '500',
+      color: params.vars.hasAlert
+        ? params.theme.colors.error.default
+        : params.theme.colors.text.default,
+    },
+    alert: {
+      color: params.theme.colors.error.default,
+      textAlign: 'center',
     },
   });
 

app/components/Views/confirmations/components/edit-amount/edit-amount.test.tsx

@@ -8,12 +8,19 @@ import { useTokenAmount } from '../../hooks/useTokenAmount';
 import { useTokenAsset } from '../../hooks/useTokenAsset';
 import { TokenI } from '../../../../UI/Tokens/types';
 import { act, fireEvent } from '@testing-library/react-native';
+import {
+  AlertsContextParams,
+  useAlerts,
+} from '../../context/alert-system-context';
+import { RowAlertKey } from '../UI/info-row/alert-row/constants';
 
 jest.mock('../../hooks/useTokenAmount');
 jest.mock('../../hooks/useTokenAsset');
+jest.mock('../../context/alert-system-context');
 
 const VALUE_MOCK = '1.23';
 const VALUE_2_MOCK = '2.34';
+const ALERT_MESSAGE_MOCK = 'Test Message';
 
 const state = merge(
   simpleSendTransactionControllerMock,
@@ -27,6 +34,7 @@ function render(props: EditAmountProps = {}) {
 describe('EditAmount', () => {
   const useTokenAmountMock = jest.mocked(useTokenAmount);
   const useTokenAssetMock = jest.mocked(useTokenAsset);
+  const useAlertsMock = jest.mocked(useAlerts);
   const updateTokenAmountMock = jest.fn();
 
   beforeEach(() => {
@@ -43,6 +51,10 @@ describe('EditAmount', () => {
       } as TokenI,
       displayName: 'Test Token',
     });
+
+    useAlertsMock.mockReturnValue({
+      fieldAlerts: [],
+    } as unknown as AlertsContextParams);
   });
 
   it('renders amount from current transaction data', () => {
@@ -79,4 +91,34 @@ describe('EditAmount', () => {
 
     expect(getByTestId('edit-amount-input')).toHaveProp('value', VALUE_2_MOCK);
   });
+
+  it('renders alert if field is amount', () => {
+    useAlertsMock.mockReturnValue({
+      fieldAlerts: [
+        {
+          field: RowAlertKey.Amount,
+          message: ALERT_MESSAGE_MOCK,
+        },
+      ],
+    } as unknown as AlertsContextParams);
+
+    const { getByText } = render();
+
+    expect(getByText(ALERT_MESSAGE_MOCK)).toBeDefined();
+  });
+
+  it('does not render alert if field is not amount', () => {
+    useAlertsMock.mockReturnValue({
+      fieldAlerts: [
+        {
+          field: RowAlertKey.AccountTypeUpgrade,
+          message: ALERT_MESSAGE_MOCK,
+        },
+      ],
+    } as unknown as AlertsContextParams);
+
+    const { queryByText } = render();
+
+    expect(queryByText(ALERT_MESSAGE_MOCK)).toBeNull();
+  });
 });

app/components/Views/confirmations/components/edit-amount/edit-amount.tsx

@@ -3,13 +3,24 @@ import { TextInput, View } from 'react-native';
 import { useTokenAmount } from '../../hooks/useTokenAmount';
 import { useStyles } from '../../../../../component-library/hooks';
 import styleSheet from './edit-amount.styles';
+import { useAlerts } from '../../context/alert-system-context';
+import Text from '../../../../../component-library/components/Texts/Text';
+import { RowAlertKey } from '../UI/info-row/alert-row/constants';
 
 export interface EditAmountProps {
+  children?: React.ReactNode;
   prefix?: string;
 }
 
-export function EditAmount({ prefix = '' }: EditAmountProps) {
-  const { styles } = useStyles(styleSheet, {});
+export function EditAmount({ children, prefix = '' }: EditAmountProps) {
+  const { fieldAlerts } = useAlerts();
+  const alerts = fieldAlerts.filter((a) => a.field === RowAlertKey.Amount);
+  const hasAlert = alerts.length > 0;
+  const alertMessage = alerts[0]?.message;
+
+  const { styles } = useStyles(styleSheet, {
+    hasAlert,
+  });
 
   const { amountPrecise: transactionAmountHuman, updateTokenAmount } =
     useTokenAmount();
@@ -38,6 +49,8 @@ export function EditAmount({ prefix = '' }: EditAmountProps) {
         keyboardType="numeric"
         style={styles.input}
       />
+      {children}
+      {hasAlert ? <Text style={styles.alert}>{alertMessage}</Text> : null}
     </View>
   );
 }

app/components/Views/confirmations/components/pay-token-balance/index.ts

@@ -0,0 +1 @@
+export * from './pay-token-balance';

app/components/Views/confirmations/components/pay-token-balance/pay-token-balance.styles.ts

@@ -0,0 +1,12 @@
+import { StyleSheet } from 'react-native';
+import { Theme } from '../../../../../util/theme/models';
+
+const styleSheet = (_params: { theme: Theme }) =>
+  StyleSheet.create({
+    container: {},
+    text: {
+      textAlign: 'center',
+    },
+  });
+
+export default styleSheet;

app/components/Views/confirmations/components/pay-token-balance/pay-token-balance.test.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { useTokensWithBalance } from '../../../../UI/Bridge/hooks/useTokensWithBalance';
+import { BridgeToken } from '../../../../UI/Bridge/types';
+import { useTransactionPayToken } from '../../hooks/pay/useTransactionPayToken';
+import { PayTokenBalance } from './pay-token-balance';
+
+jest.mock('../../hooks/pay/useTransactionPayToken');
+jest.mock('../../../../UI/Bridge/hooks/useTokensWithBalance');
+
+const TOKEN_ADDRESS_MOCK = '0xabcd1234abcd1234abcd1234abcd1234abcd1234';
+const CHAIN_ID_MOCK = '0x123';
+const BALANCE_FIAT_MOCK = '$100.12';
+
+describe('PayTokenBalance', () => {
+  const useTransactionPayTokenMock = jest.mocked(useTransactionPayToken);
+  const useTokensWithBalanceMock = jest.mocked(useTokensWithBalance);
+
+  beforeEach(() => {
+    jest.resetAllMocks();
+
+    useTransactionPayTokenMock.mockReturnValue({
+      balanceHuman: '1.23',
+      decimals: 4,
+      payToken: {
+        address: TOKEN_ADDRESS_MOCK,
+        chainId: CHAIN_ID_MOCK,
+      },
+      setPayToken: jest.fn(),
+    });
+
+    useTokensWithBalanceMock.mockReturnValue([
+      {
+        address: TOKEN_ADDRESS_MOCK,
+        chainId: CHAIN_ID_MOCK,
+        balanceFiat: BALANCE_FIAT_MOCK,
+      },
+    ] as unknown as BridgeToken[]);
+  });
+
+  it('renders pay token balance', () => {
+    const { getByText } = render(<PayTokenBalance />);
+    expect(getByText(`Available: ${BALANCE_FIAT_MOCK}`)).toBeTruthy();
+  });
+});

app/components/Views/confirmations/components/pay-token-balance/pay-token-balance.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { View } from 'react-native';
+import Text, {
+  TextColor,
+} from '../../../../../component-library/components/Texts/Text';
+import { useStyles } from '../../../../../component-library/hooks';
+import styleSheet from './pay-token-balance.styles';
+import { useTokensWithBalance } from '../../../../UI/Bridge/hooks/useTokensWithBalance';
+import { useTransactionPayToken } from '../../hooks/pay/useTransactionPayToken';
+import { strings } from '../../../../../../locales/i18n';
+
+export function PayTokenBalance() {
+  const { styles } = useStyles(styleSheet, {});
+  const { payToken } = useTransactionPayToken();
+  const { address: payTokenAddress, chainId } = payToken;
+  const tokens = useTokensWithBalance({ chainIds: [chainId] });
+
+  const token = tokens.find(
+    (t) =>
+      t.address.toLowerCase() === payTokenAddress.toLowerCase() &&
+      t.chainId === chainId,
+  );
+
+  if (!token) {
+    return null;
+  }
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.text} color={TextColor.Alternative}>
+        {strings('confirm.available_balance')}
+        {token.balanceFiat}
+      </Text>
+    </View>
+  );
+}