[pull] main from MetaMask:main

app/components/Nav/App/App.test.tsx

@@ -70,6 +70,14 @@ jest.mock('../../../../app/core/WalletConnect/WalletConnectV2', () => ({
   },
 }));
 
+jest.mock('../../hooks/useMetrics/useMetrics', () => ({
+  __esModule: true,
+  default: () => ({
+    isEnabled: jest.fn().mockReturnValue(false),
+    getMetaMetricsId: jest.fn(),
+  }),
+}));
+
 import WC2ManagerMock from '../../../../app/core/WalletConnect/WalletConnectV2';
 import { DevLogger as DevLoggerMock } from '../../../../app/core/SDKConnect/utils/DevLogger';
 

app/components/Nav/App/App.tsx

@@ -161,6 +161,7 @@ import { SmartAccountUpdateModal } from '../../Views/confirmations/components/sm
 import PrivacyOverlay from '../../Views/PrivacyOverlay';
 import { PayWithModal } from '../../Views/confirmations/components/modals/pay-with-modal/pay-with-modal';
 import { PayWithNetworkModal } from '../../Views/confirmations/components/modals/pay-with-network-modal/pay-with-network-modal';
+import { useMetrics } from '../../hooks/useMetrics';
 
 const clearStackNavigatorOptions = {
   headerShown: false,
@@ -922,6 +923,8 @@ const App: React.FC = () => {
   const sdkInit = useRef<boolean | undefined>(undefined);
   const isFirstRender = useRef(true);
 
+  const { isEnabled: checkMetricsEnabled } = useMetrics();
+
   const isSeedlessOnboardingLoginFlow = useSelector(
     selectSeedlessOnboardingLoginFlow,
   );
@@ -988,7 +991,7 @@ const App: React.FC = () => {
             OPTIN_META_METRICS_UI_SEEN,
           );
 
-          if (!isOptinMetaMetricsUISeen) {
+          if (!isOptinMetaMetricsUISeen && !checkMetricsEnabled()) {
             const resetParams = {
               routes: [
                 {

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/__mocks__/send.mock.ts

@@ -84,6 +84,14 @@ export const evmSendStateMock = {
           },
         },
       },
+      MultichainAssetsRatesController: {
+        conversionRates: {
+          'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp/slip44:501': {
+            rate: '175',
+            conversionTime: 0,
+          },
+        },
+      },
     },
   },
 } as ProviderValues['state'];

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/blockaid-alert-content/blockaid-alert-content.test.tsx

@@ -10,6 +10,7 @@ import { deflate } from 'react-native-gzip';
 import { BLOCKAID_SUPPORTED_NETWORK_NAMES } from '../../../../../util/networks';
 import BlockaidVersionInfo from '../../../../../lib/ppom/blockaid-version';
 import { ResultType as BlockaidResultType } from '../../constants/signatures';
+import { strings } from '../../../../../../locales/i18n';
 
 jest.mock('react-native-gzip', () => ({
   deflate: jest.fn().mockResolvedValue('compressedData'),
@@ -161,4 +162,23 @@ describe('BlockaidAlertContent', () => {
       expect(deflate).not.toHaveBeenCalled();
     });
   });
+
+  it('renders generic reason message if reason not recognised', () => {
+    const mockSecurityAlertResponseWithUnknownReason: SecurityAlertResponse = {
+      ...mockSecurityAlertResponse,
+      reason: 'unknown_reason' as Reason,
+    };
+
+    const { getByText } = render(
+      <BlockaidAlertContent
+        alertDetails={ALERT_DETAILS_MOCK}
+        securityAlertResponse={mockSecurityAlertResponseWithUnknownReason}
+        onContactUsClicked={mockOnContactUsClicked}
+      />,
+    );
+
+    expect(
+      getByText(strings('blockaid_banner.other_description')),
+    ).toBeDefined();
+  });
 });

app/components/Views/confirmations/components/blockaid-alert-content/blockaid-alert-content.tsx

@@ -93,7 +93,7 @@ const BlockaidAlertContent: React.FC<BlockaidAlertContentProps> = ({
         {strings(
           REASON_DESCRIPTION_I18N_KEY_MAP[
             securityAlertResponse.reason as Reason
-          ],
+          ] ?? 'blockaid_banner.other_description',
         )}
       </Text>
       <Accordion

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>
+  );
+}

app/components/Views/confirmations/components/rows/pay-with-row/pay-with-row.test.tsx

@@ -51,6 +51,7 @@ describe('PayWithRow', () => {
     jest.resetAllMocks();
 
     jest.mocked(useTransactionPayToken).mockReturnValue({
+      balanceHuman: '1.23',
       decimals: 18,
       payToken: {
         address: ADDRESS_MOCK,

app/components/Views/confirmations/components/rows/pay-with-row/pay-with-row.tsx

@@ -39,7 +39,7 @@ export function PayWithRow() {
       {showEstimate && (
         <InfoRow label={strings('confirm.label.bridge_estimated_time')}>
           {loading ? (
-            <AnimatedSpinner testID="pay-with-spinner" size={SpinnerSize.SM} />
+            <AnimatedSpinner size={SpinnerSize.SM} />
           ) : (
             <Text>
               {estimatedTimeSeconds} {strings('unit.second')}

app/components/Views/confirmations/components/rows/total-row/index.ts

@@ -0,0 +1 @@
+export * from './total-row';