feat: Adding info alert when new confirmation is from different origin or network

shared/types/confirm.ts

@@ -2,4 +2,5 @@ export type LastInteractedConfirmationInfo = {
   id: string;
   timestamp: number;
   chainId: string;
+  origin: string;
 };

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

@@ -4,6 +4,7 @@ export enum RowAlertKey {
   EstimatedFee = 'estimatedFee',
   SigningInWith = 'signingInWith',
   RequestFrom = 'requestFrom',
+  Network = 'Network',
   Resimulation = 'resimulation',
   Speed = 'speed',
   To = 'to',

ui/pages/confirmations/components/confirm/info/shared/network-row/network-row.test.tsx

@@ -0,0 +1,79 @@
+import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import React from 'react';
+import { CHAIN_IDS } from '@metamask/transaction-controller';
+
+import {
+  getMockConfirmStateForTransaction,
+  getMockContractInteractionConfirmState,
+} from '../../../../../../../../test/data/confirmations/helper';
+import { genUnapprovedContractInteractionConfirmation } from '../../../../../../../../test/data/confirmations/contract-interaction';
+import { renderWithConfirmContextProvider } from '../../../../../../../../test/lib/confirmations/render-helpers';
+import { RowAlertKey } from '../../../../../../../components/app/confirm/info/row/constants';
+import { Severity } from '../../../../../../../helpers/constants/design-system';
+import { NetworkRow } from './network-row';
+
+jest.mock(
+  '../../../../../../../components/app/alert-system/contexts/alertMetricsContext',
+  () => ({
+    useAlertMetrics: jest.fn(() => ({
+      trackAlertMetrics: jest.fn(),
+    })),
+  }),
+);
+
+describe('NetworkRow', () => {
+  const middleware = [thunk];
+
+  it('does display network information of current confirmation', () => {
+    const state = getMockContractInteractionConfirmState();
+    const mockStore = configureMockStore(middleware)(state);
+    const { getByText } = renderWithConfirmContextProvider(
+      <NetworkRow />,
+      mockStore,
+    );
+    expect(getByText('Network')).toBeInTheDocument();
+    expect(getByText('Goerli')).toBeInTheDocument();
+  });
+
+  it('does not display network if isShownWithAlertsOnly is true and there is no field alert', () => {
+    const state = getMockContractInteractionConfirmState();
+    const mockStore = configureMockStore(middleware)(state);
+    const { queryByText } = renderWithConfirmContextProvider(
+      <NetworkRow isShownWithAlertsOnly />,
+      mockStore,
+    );
+    expect(queryByText('Network')).not.toBeInTheDocument();
+  });
+
+  it('does display network if isShownWithAlertsOnly is true and field alert is present', () => {
+    const contractInteraction = genUnapprovedContractInteractionConfirmation({
+      chainId: CHAIN_IDS.GOERLI,
+    });
+    const state = {
+      ...getMockConfirmStateForTransaction(contractInteraction),
+      confirmAlerts: {
+        alerts: {
+          [contractInteraction.id]: [
+            {
+              key: 'networkSwitchInfo',
+              field: RowAlertKey.Network,
+              severity: Severity.Info,
+              message: 'dummy message',
+              reason: 'dummy reason',
+            },
+          ],
+        },
+        confirmed: {},
+      },
+    };
+
+    const mockStore = configureMockStore(middleware)(state);
+    const { getByText } = renderWithConfirmContextProvider(
+      <NetworkRow isShownWithAlertsOnly />,
+      mockStore,
+    );
+    expect(getByText('Network')).toBeInTheDocument();
+    expect(getByText('Goerli')).toBeInTheDocument();
+  });
+});

ui/pages/confirmations/components/confirm/info/shared/network-row/network-row.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+
+import { CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP } from '../../../../../../../../shared/constants/network';
+import { getNetworkConfigurationsByChainId } from '../../../../../../../../shared/modules/selectors/networks';
+import { useI18nContext } from '../../../../../../../hooks/useI18nContext';
+import { ConfirmInfoRow } from '../../../../../../../components/app/confirm/info/row';
+import {
+  AvatarNetwork,
+  AvatarNetworkSize,
+  Box,
+  Text,
+} from '../../../../../../../components/component-library';
+import {
+  AlignItems,
+  BlockSize,
+  BorderColor,
+  Display,
+  FlexWrap,
+  TextColor,
+  TextVariant,
+} from '../../../../../../../helpers/constants/design-system';
+import { ConfirmInfoAlertRow } from '../../../../../../../components/app/confirm/info/row/alert-row/alert-row';
+import { RowAlertKey } from '../../../../../../../components/app/confirm/info/row/constants';
+import { useConfirmContext } from '../../../../../context/confirm';
+
+export const NetworkRow = ({
+  isShownWithAlertsOnly = false,
+}: {
+  isShownWithAlertsOnly?: boolean;
+}) => {
+  {
+    const t = useI18nContext();
+    const { currentConfirmation } = useConfirmContext() ?? {};
+    const chainId = (currentConfirmation?.chainId as `0x${string}`) ?? '';
+    const networkConfigurations = useSelector(
+      getNetworkConfigurationsByChainId,
+    );
+    const networkName = chainId ? networkConfigurations[chainId]?.name : '';
+
+    return (
+      <ConfirmInfoAlertRow
+        alertKey={RowAlertKey.Network}
+        ownerId={currentConfirmation.id}
+        label={t('transactionFlowNetwork')}
+        isShownWithAlertsOnly={isShownWithAlertsOnly}
+      >
+        <Box
+          display={Display.Flex}
+          alignItems={AlignItems.center}
+          flexWrap={FlexWrap.Wrap}
+          gap={2}
+          minWidth={BlockSize.Zero}
+        >
+          <AvatarNetwork
+            borderColor={BorderColor.backgroundDefault}
+            size={AvatarNetworkSize.Xs}
+            src={
+              CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP[
+                chainId as keyof typeof CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP
+              ]
+            }
+            name={networkName}
+          />
+          <Text variant={TextVariant.bodyMd} color={TextColor.textDefault}>
+            {networkName}
+          </Text>
+        </Box>
+      </ConfirmInfoAlertRow>
+    );
+  }
+};