Merge branch 'main' into feat-INFRA-2575-yarn-issues

Author: Qbandev

app/_locales/en/messages.json

@@ -21,7 +21,7 @@ export type ConfirmInfoAlertRowProps = ConfirmInfoRowProps & {
   isShownWithAlertsOnly?: boolean;
 };
 
-function getAlertTextColors(
+export function getAlertTextColors(
   variant?: ConfirmInfoRowVariant | Severity,
 ): TextColor {
   switch (variant) {

app/_locales/en_GB/messages.json

@@ -9,6 +9,7 @@ export enum RowAlertKey {
   Resimulation = 'resimulation',
   Speed = 'speed',
   InteractingWith = 'interactingWith',
+  EstimatedChangesStatic = 'estimatedChangesStatic',
 }
 
 export enum AlertActionKey {

ui/components/app/confirm/info/row/alert-row/alert-row.tsx

@@ -3,6 +3,7 @@ import { Box } from '../../../../components/component-library';
 import {
   Display,
   FlexDirection,
+  TextColor,
 } from '../../../../helpers/constants/design-system';
 import { BalanceChangeRow } from './balance-change-row';
 import { BalanceChange } from './types';
@@ -17,13 +18,15 @@ import { sortBalanceChanges } from './sortBalanceChanges';
  * @param props.heading
  * @param props.balanceChanges
  * @param props.testId
+ * @param props.labelColor
  * @returns
  */
 export const BalanceChangeList: React.FC<{
   heading: string;
   balanceChanges: BalanceChange[];
   testId?: string;
-}> = ({ heading, balanceChanges, testId }) => {
+  labelColor?: TextColor;
+}> = ({ heading, balanceChanges, testId, labelColor }) => {
   const sortedBalanceChanges = useMemo(() => {
     return sortBalanceChanges(balanceChanges);
   }, [balanceChanges]);
@@ -57,6 +60,7 @@ export const BalanceChangeList: React.FC<{
             label={index === 0 ? heading : undefined}
             balanceChange={balanceChange}
             showFiat={!showFiatTotal && !balanceChange.isUnlimitedApproval}
+            labelColor={labelColor}
           />
         ))}
       </Box>

ui/components/app/confirm/info/row/constants.ts

@@ -5,6 +5,7 @@ import {
   FlexDirection,
   FlexWrap,
   IconColor,
+  TextColor,
   TextVariant,
 } from '../../../../helpers/constants/design-system';
 import {
@@ -27,12 +28,14 @@ import { IndividualFiatDisplay } from './fiat-display';
  * @param props.label
  * @param props.showFiat
  * @param props.balanceChange
+ * @param props.labelColor
  */
 export const BalanceChangeRow: React.FC<{
   label?: string;
   showFiat?: boolean;
   balanceChange: BalanceChange;
-}> = ({ label, showFiat, balanceChange }) => {
+  labelColor?: TextColor;
+}> = ({ label, showFiat, balanceChange, labelColor }) => {
   const t = useI18nContext();
 
   const {
@@ -55,7 +58,11 @@ export const BalanceChangeRow: React.FC<{
       flexWrap={FlexWrap.Wrap}
     >
       {label && (
-        <Text style={{ whiteSpace: 'nowrap' }} variant={TextVariant.bodyMd}>
+        <Text
+          style={{ whiteSpace: 'nowrap' }}
+          color={labelColor}
+          variant={TextVariant.bodyMd}
+        >
           {label}
         </Text>
       )}

ui/pages/confirmations/components/simulation-details/balance-change-list.tsx

@@ -1,19 +1,20 @@
-import configureStore from 'redux-mock-store';
-import React from 'react';
-import { screen } from '@testing-library/react';
 import {
   SimulationData,
   SimulationErrorCode,
   TransactionMeta,
 } from '@metamask/transaction-controller';
+import { screen } from '@testing-library/react';
 import { BigNumber } from 'bignumber.js';
-import { renderWithProvider } from '../../../../../test/lib/render-helpers';
-import mockState from '../../../../../test/data/mock-state.json';
+import React from 'react';
+import configureStore from 'redux-mock-store';
 import { TokenStandard } from '../../../../../shared/constants/transaction';
-import { SimulationDetails, StaticRow } from './simulation-details';
-import { useBalanceChanges } from './useBalanceChanges';
+import mockState from '../../../../../test/data/mock-state.json';
+import { renderWithProvider } from '../../../../../test/lib/render-helpers';
+import { AlertMetricsProvider } from '../../../../components/app/alert-system/contexts/alertMetricsContext';
 import { BalanceChangeList } from './balance-change-list';
+import { SimulationDetails, StaticRow } from './simulation-details';
 import { BalanceChange } from './types';
+import { useBalanceChanges } from './useBalanceChanges';
 
 const store = configureStore()(mockState);
 
@@ -31,6 +32,7 @@ jest.mock(
   '../../../../components/app/confirm/info/row/alert-row/alert-row',
   () => ({
     ConfirmInfoAlertRow: jest.fn(({ label }) => <>{label}</>),
+    getAlertTextColors: jest.fn(() => 'textDefault'),
   }),
 );
 
@@ -46,17 +48,30 @@ const renderSimulationDetails = (
   simulationData?: Partial<SimulationData>,
   metricsOnly?: boolean,
   staticRows?: StaticRow[],
-) =>
-  renderWithProvider(
-    <SimulationDetails
-      transaction={
-        { id: 'testTransactionId', simulationData } as TransactionMeta
-      }
-      metricsOnly={metricsOnly}
-      staticRows={staticRows}
-    />,
+) => {
+  const trackAlertActionClicked = jest.fn();
+  const trackAlertRender = jest.fn();
+  const trackInlineAlertClicked = jest.fn();
+
+  return renderWithProvider(
+    <AlertMetricsProvider
+      metrics={{
+        trackAlertActionClicked,
+        trackAlertRender,
+        trackInlineAlertClicked,
+      }}
+    >
+      <SimulationDetails
+        transaction={
+          { id: 'testTransactionId', simulationData } as TransactionMeta
+        }
+        metricsOnly={metricsOnly}
+        staticRows={staticRows}
+      />
+    </AlertMetricsProvider>,
     store,
   );
+};
 
 describe('SimulationDetails', () => {
   beforeEach(() => {

ui/pages/confirmations/components/simulation-details/balance-change-row.tsx

@@ -3,8 +3,14 @@ import {
   SimulationErrorCode,
   TransactionMeta,
 } from '@metamask/transaction-controller';
-import React from 'react';
-import { ConfirmInfoAlertRow } from '../../../../components/app/confirm/info/row/alert-row/alert-row';
+import React, { useState } from 'react';
+import { useAlertMetrics } from '../../../../components/app/alert-system/contexts/alertMetricsContext';
+import InlineAlert from '../../../../components/app/alert-system/inline-alert';
+import { MultipleAlertModal } from '../../../../components/app/alert-system/multiple-alert-modal';
+import {
+  ConfirmInfoAlertRow,
+  getAlertTextColors,
+} from '../../../../components/app/confirm/info/row/alert-row/alert-row';
 import { RowAlertKey } from '../../../../components/app/confirm/info/row/constants';
 import { ConfirmInfoSection } from '../../../../components/app/confirm/info/row/section';
 import {
@@ -27,11 +33,12 @@ import {
   TextColor,
   TextVariant,
 } from '../../../../helpers/constants/design-system';
+import useAlerts from '../../../../hooks/useAlerts';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import { BalanceChangeList } from './balance-change-list';
+import { BalanceChange } from './types';
 import { useBalanceChanges } from './useBalanceChanges';
 import { useSimulationMetrics } from './useSimulationMetrics';
-import { BalanceChange } from './types';
 
 export type StaticRow = {
   label: string;
@@ -250,6 +257,49 @@ const SimulationDetailsLayout: React.FC<{
     </Box>
   );
 
+const BalanceChangesAlert = ({ transactionId }: { transactionId: string }) => {
+  const { getFieldAlerts } = useAlerts(transactionId);
+  const fieldAlerts = getFieldAlerts(RowAlertKey.EstimatedChangesStatic);
+  const selectedAlertSeverity = fieldAlerts[0]?.severity;
+  const selectedAlertKey = fieldAlerts[0]?.key;
+
+  const { trackInlineAlertClicked } = useAlertMetrics();
+
+  const [alertModalVisible, setAlertModalVisible] = useState<boolean>(false);
+
+  const handleModalClose = () => {
+    setAlertModalVisible(false);
+  };
+
+  const handleInlineAlertClick = () => {
+    setAlertModalVisible(true);
+    trackInlineAlertClicked(selectedAlertKey);
+  };
+
+  return (
+    <>
+      {fieldAlerts.length > 0 && (
+        <Box marginLeft={1}>
+          <InlineAlert
+            onClick={handleInlineAlertClick}
+            severity={selectedAlertSeverity}
+          />
+        </Box>
+      )}
+      {alertModalVisible && (
+        <MultipleAlertModal
+          alertKey={selectedAlertKey}
+          ownerId={transactionId}
+          onFinalAcknowledgeClick={handleModalClose}
+          onClose={handleModalClose}
+          showCloseIcon={false}
+          skipAlertNavigation={true}
+        />
+      )}
+    </>
+  );
+};
+
 /**
  * Preview of a transaction's effects using simulation data.
  *
@@ -285,6 +335,10 @@ export const SimulationDetails: React.FC<SimulationDetailsProps> = ({
     transactionId,
   });
 
+  const { getFieldAlerts } = useAlerts(transactionId);
+  const fieldAlerts = getFieldAlerts(RowAlertKey.EstimatedChangesStatic);
+  const selectedAlertSeverity = fieldAlerts[0]?.severity;
+
   if (metricsOnly) {
     return null;
   }
@@ -351,11 +405,15 @@ export const SimulationDetails: React.FC<SimulationDetailsProps> = ({
     >
       <Box display={Display.Flex} flexDirection={FlexDirection.Column} gap={3}>
         {staticRows.map((staticRow, index) => (
-          <BalanceChangeList
-            key={index}
-            heading={staticRow.label}
-            balanceChanges={staticRow.balanceChanges}
-          />
+          <>
+            <BalanceChangeList
+              key={index}
+              heading={staticRow.label}
+              balanceChanges={staticRow.balanceChanges}
+              labelColor={getAlertTextColors(selectedAlertSeverity)}
+            />
+            <BalanceChangesAlert transactionId={transactionId} />
+          </>
         ))}
         <BalanceChangeList
           heading={t('simulationDetailsOutgoingHeading')}