Adding mmi section to confirmation page

Author: jpuri

ui/pages/confirmations/components/confirm/mmi-signature-mismatch-banner/index.ts

@@ -0,0 +1 @@
+export { default as MMISignatureMismatchBanner } from './mmi-signature-mismatch-banner';

ui/pages/confirmations/components/confirm/mmi-signature-mismatch-banner/mmi-signature-mismatch-banner.tsx

@@ -0,0 +1,81 @@
+import React, { memo, useMemo } from 'react';
+import { useSelector } from 'react-redux';
+
+import { MESSAGE_TYPE } from '../../../../../../shared/constants/app';
+import {
+  BackgroundColor,
+  BlockSize,
+  Display,
+  IconColor,
+  TextColor,
+  TextVariant,
+} from '../../../../../helpers/constants/design-system';
+import {
+  getAccountByAddress,
+  shortenAddress,
+} from '../../../../../helpers/utils/util';
+import { useI18nContext } from '../../../../../hooks/useI18nContext';
+import {
+  accountsWithSendEtherInfoSelector,
+  currentConfirmationSelector,
+  getSelectedInternalAccount,
+} from '../../../../../selectors';
+import {
+  Box,
+  Icon,
+  IconName,
+  Text,
+} from '../../../../../components/component-library';
+
+const MMISignatureMismatchBanner: React.FC = memo(() => {
+  const t = useI18nContext();
+  const currentConfirmation = useSelector(currentConfirmationSelector);
+  const selectedAccount = useSelector(getSelectedInternalAccount);
+  const allAccounts = useSelector(accountsWithSendEtherInfoSelector);
+
+  const fromAccount = useMemo(() => {
+    if (
+      !currentConfirmation ||
+      currentConfirmation.type !== MESSAGE_TYPE.PERSONAL_SIGN ||
+      !currentConfirmation.msgParams
+    ) {
+      return null;
+    }
+    const {
+      msgParams: { from },
+    } = currentConfirmation;
+    return getAccountByAddress(allAccounts, from);
+  }, [currentConfirmation, allAccounts]);
+
+  if (
+    selectedAccount &&
+    fromAccount &&
+    selectedAccount.address === fromAccount.address
+  ) {
+    return null;
+  }
+
+  return (
+    <Box
+      display={Display.Flex}
+      width={BlockSize.Full}
+      padding={4}
+      marginBottom={4}
+      backgroundColor={BackgroundColor.primaryMuted}
+    >
+      <Icon
+        name={IconName.Info}
+        color={IconColor.infoDefault}
+        marginRight={2}
+      />
+      <Text variant={TextVariant.bodyXs} color={TextColor.textDefault}>
+        {t('mismatchAccount', [
+          shortenAddress(selectedAccount?.address),
+          shortenAddress(fromAccount?.address),
+        ])}
+      </Text>
+    </Box>
+  );
+});
+
+export default MMISignatureMismatchBanner;

ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap

@@ -77,6 +77,19 @@ exports[`Confirm should match snapshot for personal signature 1`] = `
           </p>
         </div>
       </div>
+      <div
+        class="mm-box mm-box--margin-bottom-4 mm-box--padding-4 mm-box--display-flex mm-box--width-full mm-box--background-color-primary-muted"
+      >
+        <span
+          class="mm-box mm-icon mm-icon--size-md mm-box--margin-right-2 mm-box--display-inline-block mm-box--color-info-default"
+          style="mask-image: url('./images/icons/info.svg');"
+        />
+        <p
+          class="mm-box mm-text mm-text--body-xs mm-box--color-text-default"
+        >
+          Your selected account (0x0dcd5...3e7bc) is different than the account trying to sign ()
+        </p>
+      </div>
       <div
         class="mm-box multichain-page-content mm-box--padding-4 mm-box--display-flex mm-box--flex-direction-column mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
       >

ui/pages/confirmations/confirm/confirm.tsx

@@ -4,6 +4,9 @@ import { Content, Page } from '../../../components/multichain/pages/page';
 import { BackgroundColor } from '../../../helpers/constants/design-system';
 import { Footer } from '../components/confirm/footer';
 import { Header } from '../components/confirm/header';
+///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
+import { MMISignatureMismatchBanner } from '../components/confirm/mmi-signature-mismatch-banner';
+///: END:ONLY_INCLUDE_IF
 import { Info } from '../components/confirm/info';
 import { SignatureMessage } from '../components/confirm/signature-message';
 import { Title } from '../components/confirm/title';
@@ -17,6 +20,11 @@ const Confirm = () => {
   return (
     <Page>
       <Header />
+      {
+        ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
+        <MMISignatureMismatchBanner />
+        ///: END:ONLY_INCLUDE_IF
+      }
       <Content backgroundColor={BackgroundColor.backgroundAlternative}>
         <Title />
         <Info />