From f5ff18487810d2cd78b3559bc538446b5e9a3b89 Mon Sep 17 00:00:00 2001
From: Matthew Walsh <matthew.walsh@consensys.net>
Date: Tue, 18 Jun 2024 14:32:39 +0100
Subject: [PATCH 1/9] Add paymaster row to transaction details

Add info section component.
Add contract interaction stories.
Add paymaster address selector.
---
 .storybook/images/icons/question.svg          |  3 +
 .../app/confirm/info/row/section.tsx          | 23 +++++
 .../mmi-signature-mismatch-banner.tsx         |  4 +-
 .../contract-interaction.tsx                  | 18 +---
 .../info/shared/transaction-details.tsx       | 40 ++++++++-
 .../confirmations/confirm/confirm.stories.tsx | 86 +++++++++++++++++--
 ui/selectors/account-abstraction.ts           | 17 ++++
 7 files changed, 165 insertions(+), 26 deletions(-)
 create mode 100644 .storybook/images/icons/question.svg
 create mode 100644 ui/components/app/confirm/info/row/section.tsx

diff --git a/.storybook/images/icons/question.svg b/.storybook/images/icons/question.svg
new file mode 100644
index 000000000000..a8ba55cd769d
--- /dev/null
+++ b/.storybook/images/icons/question.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <path d="m456 256c0 113-91 205-204 205-114 0-205-92-205-205 0-113 91-205 205-205 113 0 204 92 204 205z m-204-108c-33 0-63 24-63 58 0 9 8 17 17 17 9 0 17-8 17-17 0-12 11-24 29-24 17 0 28 12 28 24 0 6-4 11-14 17l0 0c-12 8-32 21-32 48l0 5c0 9 8 17 18 17 9 0 17-8 17-17l0-5c0-7 3-12 15-19 11-7 30-20 30-46 0-34-30-58-62-58z m-1 170c-9 0-17 7-17 17 0 9 8 17 17 17l1 0c9 0 17-8 17-17 0-10-8-17-17-17z"/>
+</svg>
diff --git a/ui/components/app/confirm/info/row/section.tsx b/ui/components/app/confirm/info/row/section.tsx
new file mode 100644
index 000000000000..5160c727f7f5
--- /dev/null
+++ b/ui/components/app/confirm/info/row/section.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Box } from '../../../../component-library';
+import {
+  BackgroundColor,
+  BorderRadius,
+} from '../../../../../helpers/constants/design-system';
+
+export const ConfirmInfoSection = ({
+  children,
+}: {
+  children: React.ReactNode | string;
+}) => {
+  return (
+    <Box
+      backgroundColor={BackgroundColor.backgroundDefault}
+      borderRadius={BorderRadius.MD}
+      padding={2}
+      marginBottom={4}
+    >
+      {children}
+    </Box>
+  );
+};
diff --git a/ui/components/app/mmi-signature-mismatch-banner/mmi-signature-mismatch-banner.tsx b/ui/components/app/mmi-signature-mismatch-banner/mmi-signature-mismatch-banner.tsx
index 3fd8d7449d53..4d1e2a583c61 100644
--- a/ui/components/app/mmi-signature-mismatch-banner/mmi-signature-mismatch-banner.tsx
+++ b/ui/components/app/mmi-signature-mismatch-banner/mmi-signature-mismatch-banner.tsx
@@ -48,8 +48,8 @@ const MMISignatureMismatchBanner: React.FC = memo(() => {
   }, [currentConfirmation, allAccounts]);
 
   if (
-    selectedAccount &&
-    fromAccount &&
+    !selectedAccount ||
+    !fromAccount ||
     selectedAccount.address === fromAccount.address
   ) {
     return null;
diff --git a/ui/pages/confirmations/components/confirm/info/contract-interaction/contract-interaction.tsx b/ui/pages/confirmations/components/confirm/info/contract-interaction/contract-interaction.tsx
index 0f5af1d92ed7..e421b65636cf 100644
--- a/ui/pages/confirmations/components/confirm/info/contract-interaction/contract-interaction.tsx
+++ b/ui/pages/confirmations/components/confirm/info/contract-interaction/contract-interaction.tsx
@@ -9,6 +9,7 @@ import {
 import { currentConfirmationSelector } from '../../../../../../selectors';
 import { SimulationDetails } from '../../../simulation-details';
 import { TransactionDetails } from '../shared/transaction-details';
+import { ConfirmInfoSection } from '../../../../../../components/app/confirm/info/row/section';
 
 const ContractInteractionInfo: React.FC = () => {
   const currentConfirmation = useSelector(
@@ -21,25 +22,14 @@ const ContractInteractionInfo: React.FC = () => {
 
   return (
     <>
-      <Box
-        backgroundColor={BackgroundColor.backgroundDefault}
-        borderRadius={BorderRadius.MD}
-        marginBottom={4}
-      >
+      <ConfirmInfoSection>
         <SimulationDetails
           simulationData={currentConfirmation.simulationData}
           transactionId={currentConfirmation.id}
           isTransactionsRedesign
         />
-      </Box>
-      <Box
-        backgroundColor={BackgroundColor.backgroundDefault}
-        borderRadius={BorderRadius.MD}
-        padding={2}
-        marginBottom={4}
-      >
-        <TransactionDetails />
-      </Box>
+      </ConfirmInfoSection>
+      <TransactionDetails />
     </>
   );
 };
diff --git a/ui/pages/confirmations/components/confirm/info/shared/transaction-details.tsx b/ui/pages/confirmations/components/confirm/info/shared/transaction-details.tsx
index b135f0dc3008..0b8117839204 100644
--- a/ui/pages/confirmations/components/confirm/info/shared/transaction-details.tsx
+++ b/ui/pages/confirmations/components/confirm/info/shared/transaction-details.tsx
@@ -11,6 +11,11 @@ import {
 import { useI18nContext } from '../../../../../../hooks/useI18nContext';
 import { currentConfirmationSelector } from '../../../../selectors';
 import { useKnownMethodDataInTransaction } from '../hooks/known-method-data-in-transaction';
+import { ConfirmInfoSection } from '../../../../../../components/app/confirm/info/row/section';
+import {
+  selectPaymasterAddress,
+  selectUserOperationMetadata,
+} from '../../../../../../selectors/account-abstraction';
 
 const OriginRow = () => {
   const t = useI18nContext();
@@ -83,12 +88,41 @@ const MethodDataRow = () => {
   );
 };
 
+const PaymasterRow = () => {
+  const currentConfirmation = useSelector(currentConfirmationSelector) as
+    | TransactionMeta
+    | undefined;
+
+  const { id: userOperationId } = currentConfirmation ?? {};
+  const isUserOperation = Boolean(currentConfirmation?.isUserOperation);
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const paymasterAddress = useSelector((state: any) =>
+    selectPaymasterAddress(state, userOperationId as string),
+  );
+
+  if (!isUserOperation || !paymasterAddress) {
+    return null;
+  }
+
+  return (
+    <ConfirmInfoSection>
+      <ConfirmInfoRow label="Feed paid by">
+        <ConfirmInfoRowAddress address={paymasterAddress} />
+      </ConfirmInfoRow>
+    </ConfirmInfoSection>
+  );
+};
+
 export const TransactionDetails = () => {
   return (
     <>
-      <OriginRow />
-      <RecipientRow />
-      <MethodDataRow />
+      <ConfirmInfoSection>
+        <OriginRow />
+        <RecipientRow />
+        <MethodDataRow />
+      </ConfirmInfoSection>
+      <PaymasterRow />
     </>
   );
 };
diff --git a/ui/pages/confirmations/confirm/confirm.stories.tsx b/ui/pages/confirmations/confirm/confirm.stories.tsx
index 3e428eba997f..ec7a810e62a8 100644
--- a/ui/pages/confirmations/confirm/confirm.stories.tsx
+++ b/ui/pages/confirmations/confirm/confirm.stories.tsx
@@ -1,8 +1,19 @@
 import React from 'react';
 import { Provider } from 'react-redux';
 import { cloneDeep } from 'lodash';
-import { unapprovedPersonalSignMsg, signatureRequestSIWE } from '../../../../test/data/confirmations/personal_sign';
-import { unapprovedTypedSignMsgV1, unapprovedTypedSignMsgV4, permitSignatureMsg } from '../../../../test/data/confirmations/typed_sign';
+import {
+  unapprovedPersonalSignMsg,
+  signatureRequestSIWE,
+} from '../../../../test/data/confirmations/personal_sign';
+import {
+  unapprovedTypedSignMsgV1,
+  unapprovedTypedSignMsgV4,
+  permitSignatureMsg,
+} from '../../../../test/data/confirmations/typed_sign';
+import {
+  DEPOSIT_METHOD_DATA,
+  genUnapprovedContractInteractionConfirmation,
+} from '../../../../test/data/confirmations/contract-interaction';
 import mockState from '../../../../test/data/mock-state.json';
 import configureStore from '../../../store/store';
 import ConfirmPage from './confirm';
@@ -13,19 +24,21 @@ import ConfirmPage from './confirm';
  */
 const ConfirmPageStory = {
   title: 'Pages/Confirm/ConfirmPage',
-  decorators: [(story) => <div style={{ height: '600px' }}>{story()}</div>],
-}
+  decorators: [
+    (story) => <div style={{ height: '600px' }}>{story()}</div>,
+  ],
+};
 
 const ARGS_SIGNATURE = {
   msgParams: { ...unapprovedPersonalSignMsg.msgParams },
-}
+};
 
 const ARG_TYPES_SIGNATURE = {
   msgParams: {
     control: 'object',
     description: '(non-param) overrides currentConfirmation.msgParams',
   },
-}
+};
 
 function SignatureStoryTemplate(args, confirmation) {
   const mockConfirmation = cloneDeep(confirmation);
@@ -38,7 +51,28 @@ function SignatureStoryTemplate(args, confirmation) {
     metamask: { ...mockState.metamask },
   });
 
-  return <Provider store={store}><ConfirmPage /></Provider>;
+  return (
+    <Provider store={store}>
+      <ConfirmPage />
+    </Provider>
+  );
+}
+
+function TransactionStoryTemplate(confirmation, additionalState = {}) {
+  const mockConfirmation = cloneDeep(confirmation);
+
+  const store = configureStore({
+    confirm: {
+      currentConfirmation: mockConfirmation,
+    },
+    metamask: { ...mockState.metamask, ...additionalState },
+  });
+
+  return (
+    <Provider store={store}>
+      <ConfirmPage />
+    </Provider>
+  );
 }
 
 export const PersonalSignStory = (args) => {
@@ -93,4 +127,42 @@ SignTypedDataV4Story.args = {
   msgParams: unapprovedTypedSignMsgV4.msgParams,
 };
 
+export const ContractInteractionStory = () => {
+  const confirmation = genUnapprovedContractInteractionConfirmation({
+    address: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc',
+    txData: DEPOSIT_METHOD_DATA,
+  });
+
+  return TransactionStoryTemplate(confirmation);
+};
+
+ContractInteractionStory.storyName = 'Contract Interaction';
+
+export const UserOperationStory = () => {
+  const confirmation = {
+    ...genUnapprovedContractInteractionConfirmation({
+      address: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc',
+      txData: DEPOSIT_METHOD_DATA,
+    }),
+    isUserOperation: true,
+  };
+
+  return TransactionStoryTemplate(confirmation, {
+    preferences: {
+      ...mockState.metamask.preferences,
+      petnamesEnabled: true,
+    },
+    userOperations: {
+      [confirmation.id]: {
+        userOperation: {
+          paymasterAndData:
+            '0x9d6ac51b972544251fcc0f2902e633e3f9bd3f2900000000000000000000000000000000000000000000000000000000666bfd410000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000003498a76eb88b702e5e52b00fbc16a36baf89ebe3e0dd23170949cffc0a623011383cced660ff67930308c22e5aa746a2d586629ddbd87046a146225bf80e9d6f1b',
+        },
+      },
+    },
+  });
+};
+
+UserOperationStory.storyName = 'User Operation';
+
 export default ConfirmPageStory;
diff --git a/ui/selectors/account-abstraction.ts b/ui/selectors/account-abstraction.ts
index a8f420fd7fed..77b191d34b20 100644
--- a/ui/selectors/account-abstraction.ts
+++ b/ui/selectors/account-abstraction.ts
@@ -39,3 +39,20 @@ export function getIsUsingPaymaster(state: AccountAbstractionState) {
 
   return Boolean(paymasterData?.length) && paymasterData !== '0x';
 }
+
+export const selectPaymasterData = createSelector(
+  selectUserOperationMetadata,
+  (userOperationMetadata) => {
+    const paymasterAndData =
+      userOperationMetadata?.userOperation?.paymasterAndData;
+
+    return paymasterAndData === '0x' ? undefined : paymasterAndData;
+  },
+);
+
+export const selectPaymasterAddress = createSelector(
+  selectPaymasterData,
+  (paymasterData) => {
+    return paymasterData?.slice(0, 42);
+  },
+);

From ebc0cfaba10181582a8feab1a110e5d2b96f9ea4 Mon Sep 17 00:00:00 2001
From: Matthew Walsh <matthew.walsh@consensys.net>
Date: Tue, 18 Jun 2024 20:16:33 +0100
Subject: [PATCH 2/9] Add stories and tests for section component

---
 .../row/__snapshots__/section.test.tsx.snap   | 21 +++++++
 .../app/confirm/info/row/divider.tsx          |  2 +
 .../app/confirm/info/row/section.stories.tsx  | 55 +++++++++++++++++++
 .../app/confirm/info/row/section.test.tsx     | 19 +++++++
 .../app/confirm/info/row/section.tsx          | 12 ++--
 .../contract-interaction.tsx                  |  7 +--
 .../info/personal-sign/personal-sign.tsx      | 33 +++--------
 .../info/shared/transaction-details.tsx       |  5 +-
 .../info/typed-sign-v1/typed-sign-v1.tsx      | 24 ++------
 .../permit-simulation/permit-simulation.tsx   | 10 +---
 .../confirm/info/typed-sign/typed-sign.tsx    | 51 +++++------------
 .../signature-message/signature-message.tsx   | 15 +----
 12 files changed, 139 insertions(+), 115 deletions(-)
 create mode 100644 ui/components/app/confirm/info/row/__snapshots__/section.test.tsx.snap
 create mode 100644 ui/components/app/confirm/info/row/section.stories.tsx
 create mode 100644 ui/components/app/confirm/info/row/section.test.tsx

diff --git a/ui/components/app/confirm/info/row/__snapshots__/section.test.tsx.snap b/ui/components/app/confirm/info/row/__snapshots__/section.test.tsx.snap
new file mode 100644
index 000000000000..8f48917bd4f3
--- /dev/null
+++ b/ui/components/app/confirm/info/row/__snapshots__/section.test.tsx.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ConfirmInfoSection should match snapshot 1`] = `
+<div>
+  <div
+    class="mm-box mm-box--margin-bottom-4 mm-box--padding-2 mm-box--background-color-background-default mm-box--rounded-md"
+  >
+    Test Content
+  </div>
+</div>
+`;
+
+exports[`ConfirmInfoSection should match snapshot without padding 1`] = `
+<div>
+  <div
+    class="mm-box mm-box--margin-bottom-4 mm-box--padding-0 mm-box--background-color-background-default mm-box--rounded-md"
+  >
+    Test Content
+  </div>
+</div>
+`;
diff --git a/ui/components/app/confirm/info/row/divider.tsx b/ui/components/app/confirm/info/row/divider.tsx
index cc2c1ac70e2a..94fc4bb7062e 100644
--- a/ui/components/app/confirm/info/row/divider.tsx
+++ b/ui/components/app/confirm/info/row/divider.tsx
@@ -6,6 +6,8 @@ export const ConfirmInfoRowDivider: React.FC = () => {
       style={{
         height: '1px',
         backgroundColor: 'var(--color-border-muted)',
+        marginLeft: '-8px',
+        marginRight: '-8px',
       }}
     ></div>
   );
diff --git a/ui/components/app/confirm/info/row/section.stories.tsx b/ui/components/app/confirm/info/row/section.stories.tsx
new file mode 100644
index 000000000000..8ce7be068ffb
--- /dev/null
+++ b/ui/components/app/confirm/info/row/section.stories.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { ConfirmInfoSection } from './section';
+import { ConfirmInfoRow } from './row';
+import { ConfirmInfoRowText } from './text';
+
+const ConfirmInfoSectionStory = {
+  title: 'Components/App/Confirm/InfoSection',
+  component: ConfirmInfoSection,
+
+  decorators: [
+    (story) => (
+      <div
+        style={{
+          backgroundColor: 'var(--color-background-alternative)',
+          padding: 30,
+        }}
+      >
+        {story()}
+      </div>
+    ),
+  ],
+
+  argTypes: {
+    noPadding: {
+      control: 'boolean',
+    },
+  },
+};
+
+export const DefaultStory = (args) => (
+  <>
+    <ConfirmInfoSection {...args}>
+      <ConfirmInfoRow label="Test Label 1">
+        <ConfirmInfoRowText text="Test Value 1"></ConfirmInfoRowText>
+      </ConfirmInfoRow>
+      <ConfirmInfoRow label="Test Label 2">
+        <ConfirmInfoRowText text="Test Value 2"></ConfirmInfoRowText>
+      </ConfirmInfoRow>
+    </ConfirmInfoSection>
+    <ConfirmInfoSection {...args}>
+      <ConfirmInfoRow label="Test Label 3">
+        <ConfirmInfoRowText text="Test Value 3"></ConfirmInfoRowText>
+      </ConfirmInfoRow>
+      <ConfirmInfoRow label="Test Label 4">
+        <ConfirmInfoRowText text="Test Value 4"></ConfirmInfoRowText>
+      </ConfirmInfoRow>
+    </ConfirmInfoSection>
+  </>
+);
+
+DefaultStory.args = {
+  noPadding: false,
+};
+
+export default ConfirmInfoSectionStory;
diff --git a/ui/components/app/confirm/info/row/section.test.tsx b/ui/components/app/confirm/info/row/section.test.tsx
new file mode 100644
index 000000000000..e9c344caf0cb
--- /dev/null
+++ b/ui/components/app/confirm/info/row/section.test.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ConfirmInfoSection } from './section';
+
+describe('ConfirmInfoSection', () => {
+  it('should match snapshot', () => {
+    const { container } = render(
+      <ConfirmInfoSection>Test Content</ConfirmInfoSection>,
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should match snapshot without padding', () => {
+    const { container } = render(
+      <ConfirmInfoSection noPadding>Test Content</ConfirmInfoSection>,
+    );
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/ui/components/app/confirm/info/row/section.tsx b/ui/components/app/confirm/info/row/section.tsx
index 5160c727f7f5..f49c8103fae4 100644
--- a/ui/components/app/confirm/info/row/section.tsx
+++ b/ui/components/app/confirm/info/row/section.tsx
@@ -5,16 +5,20 @@ import {
   BorderRadius,
 } from '../../../../../helpers/constants/design-system';
 
+export type ConfirmInfoSectionProps = {
+  children: React.ReactNode | string;
+  noPadding?: boolean;
+};
+
 export const ConfirmInfoSection = ({
   children,
-}: {
-  children: React.ReactNode | string;
-}) => {
+  noPadding,
+}: ConfirmInfoSectionProps) => {
   return (
     <Box
       backgroundColor={BackgroundColor.backgroundDefault}
       borderRadius={BorderRadius.MD}
-      padding={2}
+      padding={noPadding ? 0 : 2}
       marginBottom={4}
     >
       {children}
diff --git a/ui/pages/confirmations/components/confirm/info/contract-interaction/contract-interaction.tsx b/ui/pages/confirmations/components/confirm/info/contract-interaction/contract-interaction.tsx
index e421b65636cf..86bc508ae6a4 100644
--- a/ui/pages/confirmations/components/confirm/info/contract-interaction/contract-interaction.tsx
+++ b/ui/pages/confirmations/components/confirm/info/contract-interaction/contract-interaction.tsx
@@ -1,11 +1,6 @@
 import { TransactionMeta } from '@metamask/transaction-controller';
 import React from 'react';
 import { useSelector } from 'react-redux';
-import { Box } from '../../../../../../components/component-library';
-import {
-  BackgroundColor,
-  BorderRadius,
-} from '../../../../../../helpers/constants/design-system';
 import { currentConfirmationSelector } from '../../../../../../selectors';
 import { SimulationDetails } from '../../../simulation-details';
 import { TransactionDetails } from '../shared/transaction-details';
@@ -22,7 +17,7 @@ const ContractInteractionInfo: React.FC = () => {
 
   return (
     <>
-      <ConfirmInfoSection>
+      <ConfirmInfoSection noPadding>
         <SimulationDetails
           simulationData={currentConfirmation.simulationData}
           transactionId={currentConfirmation.id}
diff --git a/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.tsx b/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.tsx
index 6421dd684b9b..75e35e143d54 100644
--- a/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.tsx
+++ b/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.tsx
@@ -9,11 +9,6 @@ import {
 } from '../../../../../../components/app/confirm/info/row';
 import { useI18nContext } from '../../../../../../hooks/useI18nContext';
 import { currentConfirmationSelector } from '../../../../../../selectors';
-import { Box } from '../../../../../../components/component-library';
-import {
-  BackgroundColor,
-  BorderRadius,
-} from '../../../../../../helpers/constants/design-system';
 import {
   hexToText,
   sanitizeString,
@@ -22,6 +17,7 @@ import { SignatureRequestType } from '../../../../types/confirm';
 import { selectUseTransactionSimulations } from '../../../../selectors/preferences';
 import { isSIWESignatureRequest } from '../../../../utils';
 import { AlertRow } from '../../../../../../components/app/confirm/info/row/alert-row/alert-row';
+import { ConfirmInfoSection } from '../../../../../../components/app/confirm/info/row/section';
 import { SIWESignInfo } from './siwe-sign';
 
 const PersonalSignInfo: React.FC = () => {
@@ -43,26 +39,16 @@ const PersonalSignInfo: React.FC = () => {
   return (
     <>
       {isSIWE && useTransactionSimulations && (
-        <Box
-          backgroundColor={BackgroundColor.backgroundDefault}
-          borderRadius={BorderRadius.MD}
-          padding={2}
-          marginBottom={4}
-        >
+        <ConfirmInfoSection>
           <ConfirmInfoRow
             label={t('simulationDetailsTitle')}
             tooltip={t('simulationDetailsTitleTooltip')}
           >
             <ConfirmInfoRowText text={t('siweSignatureSimulationDetailInfo')} />
           </ConfirmInfoRow>
-        </Box>
+        </ConfirmInfoSection>
       )}
-      <Box
-        backgroundColor={BackgroundColor.backgroundDefault}
-        borderRadius={BorderRadius.MD}
-        padding={2}
-        marginBottom={4}
-      >
+      <ConfirmInfoSection>
         <AlertRow
           alertKey="requestFrom"
           ownerId={currentConfirmation.id}
@@ -76,13 +62,8 @@ const PersonalSignInfo: React.FC = () => {
             <ConfirmInfoRowAddress address={from} />
           </ConfirmInfoRow>
         )}
-      </Box>
-      <Box
-        backgroundColor={BackgroundColor.backgroundDefault}
-        borderRadius={BorderRadius.MD}
-        padding={2}
-        marginBottom={4}
-      >
+      </ConfirmInfoSection>
+      <ConfirmInfoSection>
         {isSIWE ? (
           <SIWESignInfo />
         ) : (
@@ -98,7 +79,7 @@ const PersonalSignInfo: React.FC = () => {
             />
           </AlertRow>
         )}
-      </Box>
+      </ConfirmInfoSection>
     </>
   );
 };
diff --git a/ui/pages/confirmations/components/confirm/info/shared/transaction-details.tsx b/ui/pages/confirmations/components/confirm/info/shared/transaction-details.tsx
index 0b8117839204..3c2ce1a82034 100644
--- a/ui/pages/confirmations/components/confirm/info/shared/transaction-details.tsx
+++ b/ui/pages/confirmations/components/confirm/info/shared/transaction-details.tsx
@@ -12,10 +12,7 @@ import { useI18nContext } from '../../../../../../hooks/useI18nContext';
 import { currentConfirmationSelector } from '../../../../selectors';
 import { useKnownMethodDataInTransaction } from '../hooks/known-method-data-in-transaction';
 import { ConfirmInfoSection } from '../../../../../../components/app/confirm/info/row/section';
-import {
-  selectPaymasterAddress,
-  selectUserOperationMetadata,
-} from '../../../../../../selectors/account-abstraction';
+import { selectPaymasterAddress } from '../../../../../../selectors/account-abstraction';
 
 const OriginRow = () => {
   const t = useI18nContext();
diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign-v1/typed-sign-v1.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign-v1/typed-sign-v1.tsx
index a9b776daa529..a2ed4e554e2f 100644
--- a/ui/pages/confirmations/components/confirm/info/typed-sign-v1/typed-sign-v1.tsx
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign-v1/typed-sign-v1.tsx
@@ -7,16 +7,12 @@ import {
 } from '../../../../../../components/app/confirm/info/row';
 import { useI18nContext } from '../../../../../../hooks/useI18nContext';
 import { currentConfirmationSelector } from '../../../../../../selectors';
-import { Box } from '../../../../../../components/component-library';
-import {
-  BackgroundColor,
-  BorderRadius,
-} from '../../../../../../helpers/constants/design-system';
 import {
   SignatureRequestType,
   TypedSignDataV1Type,
 } from '../../../../types/confirm';
 import { ConfirmInfoRowTypedSignDataV1 } from '../../row/typed-sign-data-v1/typedSignDataV1';
+import { ConfirmInfoSection } from '../../../../../../components/app/confirm/info/row/section';
 
 const TypedSignV1Info: React.FC = () => {
   const t = useI18nContext();
@@ -30,28 +26,18 @@ const TypedSignV1Info: React.FC = () => {
 
   return (
     <>
-      <Box
-        backgroundColor={BackgroundColor.backgroundDefault}
-        borderRadius={BorderRadius.MD}
-        padding={2}
-        marginBottom={4}
-      >
+      <ConfirmInfoSection>
         <ConfirmInfoRow label={t('requestFrom')} tooltip={t('requestFromInfo')}>
           <ConfirmInfoRowUrl url={currentConfirmation.msgParams.origin} />
         </ConfirmInfoRow>
-      </Box>
-      <Box
-        backgroundColor={BackgroundColor.backgroundDefault}
-        borderRadius={BorderRadius.MD}
-        padding={2}
-        marginBottom={4}
-      >
+      </ConfirmInfoSection>
+      <ConfirmInfoSection>
         <ConfirmInfoRow label={t('message')}>
           <ConfirmInfoRowTypedSignDataV1
             data={currentConfirmation.msgParams?.data as TypedSignDataV1Type}
           />
         </ConfirmInfoRow>
-      </Box>
+      </ConfirmInfoSection>
     </>
   );
 };
diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx
index 6aa8ec159ec0..665f9190f4aa 100644
--- a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx
@@ -21,6 +21,7 @@ import {
 import { SignatureRequestType } from '../../../../../types/confirm';
 import useTokenExchangeRate from '../../../../../../../components/app/currency-input/hooks/useTokenExchangeRate';
 import { IndividualFiatDisplay } from '../../../../simulation-details/fiat-display';
+import { ConfirmInfoSection } from '../../../../../../../components/app/confirm/info/row/section';
 
 const PermitSimulation: React.FC = () => {
   const t = useI18nContext();
@@ -43,12 +44,7 @@ const PermitSimulation: React.FC = () => {
   }, [exchangeRate, value]);
 
   return (
-    <Box
-      backgroundColor={BackgroundColor.backgroundDefault}
-      borderRadius={BorderRadius.MD}
-      padding={2}
-      marginBottom={4}
-    >
+    <ConfirmInfoSection>
       <ConfirmInfoRow
         label={t('simulationDetailsTitle')}
         tooltip={t('simulationDetailsTitleTooltip')}
@@ -75,7 +71,7 @@ const PermitSimulation: React.FC = () => {
           </Box>
         </Box>
       </ConfirmInfoRow>
-    </Box>
+    </ConfirmInfoSection>
   );
 };
 
diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.tsx
index 766ef740e952..f6efca236f3a 100644
--- a/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.tsx
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.tsx
@@ -11,15 +11,11 @@ import {
 } from '../../../../../../components/app/confirm/info/row';
 import { useI18nContext } from '../../../../../../hooks/useI18nContext';
 import { currentConfirmationSelector } from '../../../../../../selectors';
-import { Box } from '../../../../../../components/component-library';
-import {
-  BackgroundColor,
-  BorderRadius,
-} from '../../../../../../helpers/constants/design-system';
 import { SignatureRequestType } from '../../../../types/confirm';
 import { isPermitSignatureRequest } from '../../../../utils';
 import { selectUseTransactionSimulations } from '../../../../selectors/preferences';
 import { ConfirmInfoRowTypedSignData } from '../../row/typed-sign-data/typedSignData';
+import { ConfirmInfoSection } from '../../../../../../components/app/confirm/info/row/section';
 import { PermitSimulation } from './permit-simulation';
 
 const TypedSignInfo: React.FC = () => {
@@ -45,50 +41,31 @@ const TypedSignInfo: React.FC = () => {
   return (
     <>
       {isPermit && useTransactionSimulations && <PermitSimulation />}
-      <Box
-        backgroundColor={BackgroundColor.backgroundDefault}
-        borderRadius={BorderRadius.MD}
-        marginBottom={4}
-        padding={0}
-      >
+      <ConfirmInfoSection>
         {isPermit && (
           <>
-            <Box padding={2}>
-              <ConfirmInfoRow label={t('spender')}>
-                <ConfirmInfoRowAddress address={spender} />
-              </ConfirmInfoRow>
-            </Box>
+            <ConfirmInfoRow label={t('spender')}>
+              <ConfirmInfoRowAddress address={spender} />
+            </ConfirmInfoRow>
             <ConfirmInfoRowDivider />
           </>
         )}
-        <Box padding={2}>
-          <ConfirmInfoRow
-            label={t('requestFrom')}
-            tooltip={t('requestFromInfo')}
-          >
-            <ConfirmInfoRowUrl url={currentConfirmation.msgParams.origin} />
-          </ConfirmInfoRow>
-        </Box>
+        <ConfirmInfoRow label={t('requestFrom')} tooltip={t('requestFromInfo')}>
+          <ConfirmInfoRowUrl url={currentConfirmation.msgParams.origin} />
+        </ConfirmInfoRow>
         {isValidAddress(verifyingContract) && (
-          <Box padding={2}>
-            <ConfirmInfoRow label={t('interactingWith')}>
-              <ConfirmInfoRowAddress address={verifyingContract} />
-            </ConfirmInfoRow>
-          </Box>
+          <ConfirmInfoRow label={t('interactingWith')}>
+            <ConfirmInfoRowAddress address={verifyingContract} />
+          </ConfirmInfoRow>
         )}
-      </Box>
-      <Box
-        backgroundColor={BackgroundColor.backgroundDefault}
-        borderRadius={BorderRadius.MD}
-        padding={2}
-        marginBottom={4}
-      >
+      </ConfirmInfoSection>
+      <ConfirmInfoSection>
         <ConfirmInfoRow label={t('message')}>
           <ConfirmInfoRowTypedSignData
             data={currentConfirmation.msgParams?.data as string}
           />
         </ConfirmInfoRow>
-      </Box>
+      </ConfirmInfoSection>
     </>
   );
 };
diff --git a/ui/pages/confirmations/components/confirm/signature-message/signature-message.tsx b/ui/pages/confirmations/components/confirm/signature-message/signature-message.tsx
index 5b37a251a8b0..f3a49d7015d9 100644
--- a/ui/pages/confirmations/components/confirm/signature-message/signature-message.tsx
+++ b/ui/pages/confirmations/components/confirm/signature-message/signature-message.tsx
@@ -1,19 +1,15 @@
 import React, { memo } from 'react';
 import { useSelector } from 'react-redux';
 
-import {
-  BackgroundColor,
-  BorderRadius,
-} from '../../../../../helpers/constants/design-system';
 import { hexToText } from '../../../../../helpers/utils/util';
 import { useI18nContext } from '../../../../../hooks/useI18nContext';
 import { currentConfirmationSelector } from '../../../../../selectors';
-import { Box } from '../../../../../components/component-library';
 import {
   ConfirmInfoRow,
   ConfirmInfoRowText,
 } from '../../../../../components/app/confirm/info/row';
 import { SignatureRequestType } from '../../../types/confirm';
+import { ConfirmInfoSection } from '../../../../../components/app/confirm/info/row/section';
 
 const SignatureMessage: React.FC = memo(() => {
   const t = useI18nContext();
@@ -26,18 +22,13 @@ const SignatureMessage: React.FC = memo(() => {
   }
 
   return (
-    <Box
-      backgroundColor={BackgroundColor.backgroundDefault}
-      borderRadius={BorderRadius.MD}
-      padding={2}
-      marginBottom={4}
-    >
+    <ConfirmInfoSection>
       <ConfirmInfoRow label={t('message')}>
         <ConfirmInfoRowText
           text={hexToText(currentConfirmation.msgParams?.data)}
         />
       </ConfirmInfoRow>
-    </Box>
+    </ConfirmInfoSection>
   );
 });
 

From 8fb5c58b921fe785ce16adce0bfbafbdd220125b Mon Sep 17 00:00:00 2001
From: Matthew Walsh <matthew.walsh@consensys.net>
Date: Tue, 18 Jun 2024 21:01:40 +0100
Subject: [PATCH 3/9] Add translations

---
 app/_locales/en/messages.json                 |  6 +++
 .../confirmations/contract-interaction.ts     |  3 ++
 .../shared/transaction-details.stories.tsx    | 48 +++++++++++++++----
 .../info/shared/transaction-details.tsx       |  7 ++-
 .../confirmations/confirm/confirm.stories.tsx |  8 ++--
 5 files changed, 58 insertions(+), 14 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index be8313a1fb4a..9c2a271a79ca 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -900,6 +900,12 @@
   "confirmConnectionTitle": {
     "message": "Confirm connection to $1"
   },
+  "confirmFieldPaymaster": {
+    "message": "Fee paid by"
+  },
+  "confirmFieldTooltipPaymaster": {
+    "message": "This is the address of the paymaster smart contract that will provide the gas fee for this user operation."
+  },
   "confirmPassword": {
     "message": "Confirm password"
   },
diff --git a/test/data/confirmations/contract-interaction.ts b/test/data/confirmations/contract-interaction.ts
index dd0500bbaec2..55bcb4b26ad0 100644
--- a/test/data/confirmations/contract-interaction.ts
+++ b/test/data/confirmations/contract-interaction.ts
@@ -4,6 +4,9 @@ import {
 } from '@metamask/transaction-controller';
 import { Confirmation } from '../../../ui/pages/confirmations/types/confirm';
 
+export const PAYMASTER_AND_DATA =
+  '0x9d6ac51b972544251fcc0f2902e633e3f9bd3f2900000000000000000000000000000000000000000000000000000000666bfd410000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000003498a76eb88b702e5e52b00fbc16a36baf89ebe3e0dd23170949cffc0a623011383cced660ff67930308c22e5aa746a2d586629ddbd87046a146225bf80e9d6f1b';
+
 export const CONTRACT_INTERACTION_SENDER_ADDRESS =
   '0x2e0d7e8c45221fca00d74a3609a0f7097035d09b';
 
diff --git a/ui/pages/confirmations/components/confirm/info/shared/transaction-details.stories.tsx b/ui/pages/confirmations/components/confirm/info/shared/transaction-details.stories.tsx
index 200f67ba65ef..ee70b2eeaadc 100644
--- a/ui/pages/confirmations/components/confirm/info/shared/transaction-details.stories.tsx
+++ b/ui/pages/confirmations/components/confirm/info/shared/transaction-details.stories.tsx
@@ -1,24 +1,56 @@
 import { Meta } from '@storybook/react';
 import React from 'react';
 import { Provider } from 'react-redux';
-import { genUnapprovedContractInteractionConfirmation } from '../../../../../../../test/data/confirmations/contract-interaction';
+import {
+  PAYMASTER_AND_DATA,
+  genUnapprovedContractInteractionConfirmation,
+} from '../../../../../../../test/data/confirmations/contract-interaction';
 import mockState from '../../../../../../../test/data/mock-state.json';
 import configureStore from '../../../../../../store/store';
 import { TransactionDetails } from './transaction-details';
 
-const store = configureStore({
-  metamask: { ...mockState.metamask },
-  confirm: {
-    currentConfirmation: genUnapprovedContractInteractionConfirmation(),
-  },
-});
+function getStore() {
+  const confirmation = {
+    ...genUnapprovedContractInteractionConfirmation(),
+    isUserOperation: true,
+  };
+
+  return configureStore({
+    metamask: {
+      ...mockState.metamask,
+      preferences: {
+        ...mockState.metamask.preferences,
+        petnamesEnabled: true,
+      },
+      userOperations: {
+        [confirmation.id]: {
+          userOperation: {
+            paymasterAndData: PAYMASTER_AND_DATA,
+          },
+        },
+      },
+    },
+    confirm: {
+      currentConfirmation: confirmation,
+    },
+  });
+}
 
 const Story = {
   title: 'Components/App/Confirm/info/TransactionDetails',
   component: TransactionDetails,
   decorators: [
     (story: () => Meta<typeof TransactionDetails>) => (
-      <Provider store={store}>{story()}</Provider>
+      <Provider store={getStore()}>
+        <div
+          style={{
+            backgroundColor: 'var(--color-background-alternative)',
+            padding: 30,
+          }}
+        >
+          {story()}
+        </div>
+      </Provider>
     ),
   ],
 };
diff --git a/ui/pages/confirmations/components/confirm/info/shared/transaction-details.tsx b/ui/pages/confirmations/components/confirm/info/shared/transaction-details.tsx
index 3c2ce1a82034..8b1907ddf1aa 100644
--- a/ui/pages/confirmations/components/confirm/info/shared/transaction-details.tsx
+++ b/ui/pages/confirmations/components/confirm/info/shared/transaction-details.tsx
@@ -86,6 +86,8 @@ const MethodDataRow = () => {
 };
 
 const PaymasterRow = () => {
+  const t = useI18nContext();
+
   const currentConfirmation = useSelector(currentConfirmationSelector) as
     | TransactionMeta
     | undefined;
@@ -104,7 +106,10 @@ const PaymasterRow = () => {
 
   return (
     <ConfirmInfoSection>
-      <ConfirmInfoRow label="Feed paid by">
+      <ConfirmInfoRow
+        label={t('confirmFieldPaymaster')}
+        tooltip={t('confirmFieldTooltipPaymaster')}
+      >
         <ConfirmInfoRowAddress address={paymasterAddress} />
       </ConfirmInfoRow>
     </ConfirmInfoSection>
diff --git a/ui/pages/confirmations/confirm/confirm.stories.tsx b/ui/pages/confirmations/confirm/confirm.stories.tsx
index ec7a810e62a8..fb7d9630132c 100644
--- a/ui/pages/confirmations/confirm/confirm.stories.tsx
+++ b/ui/pages/confirmations/confirm/confirm.stories.tsx
@@ -12,6 +12,7 @@ import {
 } from '../../../../test/data/confirmations/typed_sign';
 import {
   DEPOSIT_METHOD_DATA,
+  PAYMASTER_AND_DATA,
   genUnapprovedContractInteractionConfirmation,
 } from '../../../../test/data/confirmations/contract-interaction';
 import mockState from '../../../../test/data/mock-state.json';
@@ -24,9 +25,7 @@ import ConfirmPage from './confirm';
  */
 const ConfirmPageStory = {
   title: 'Pages/Confirm/ConfirmPage',
-  decorators: [
-    (story) => <div style={{ height: '600px' }}>{story()}</div>,
-  ],
+  decorators: [(story) => <div style={{ height: '600px' }}>{story()}</div>],
 };
 
 const ARGS_SIGNATURE = {
@@ -155,8 +154,7 @@ export const UserOperationStory = () => {
     userOperations: {
       [confirmation.id]: {
         userOperation: {
-          paymasterAndData:
-            '0x9d6ac51b972544251fcc0f2902e633e3f9bd3f2900000000000000000000000000000000000000000000000000000000666bfd410000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000003498a76eb88b702e5e52b00fbc16a36baf89ebe3e0dd23170949cffc0a623011383cced660ff67930308c22e5aa746a2d586629ddbd87046a146225bf80e9d6f1b',
+          paymasterAndData: PAYMASTER_AND_DATA,
         },
       },
     },

From 3ee3667159b2b643af14f23acefdb2f699727bc7 Mon Sep 17 00:00:00 2001
From: Matthew Walsh <matthew.walsh@consensys.net>
Date: Wed, 19 Jun 2024 11:53:05 +0100
Subject: [PATCH 4/9] Move paymaster alert to paymaster field

---
 .../confirm/info/row/alert-row/alert-row.stories.tsx   |  8 ++++----
 .../app/confirm/info/row/alert-row/alert-row.test.tsx  |  6 +++---
 .../app/confirm/info/row/alert-row/alert-row.tsx       |  6 +++---
 .../confirm/info/personal-sign/personal-sign.tsx       | 10 +++++-----
 .../confirm/info/shared/transaction-details.tsx        |  8 ++++++--
 5 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/ui/components/app/confirm/info/row/alert-row/alert-row.stories.tsx b/ui/components/app/confirm/info/row/alert-row/alert-row.stories.tsx
index b3d64ac65651..c6b9a3664375 100644
--- a/ui/components/app/confirm/info/row/alert-row/alert-row.stories.tsx
+++ b/ui/components/app/confirm/info/row/alert-row/alert-row.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { ConfirmInfoRowVariant } from '../row';
-import { AlertRow } from './alert-row';
+import { ConfirmInfoAlertRow } from './alert-row';
 import configureStore from '../../../../../../store/store';
 import { Provider } from 'react-redux';
 import { Meta } from '@storybook/react';
@@ -41,7 +41,7 @@ const storeMock = configureStore({
 const ConfirmInfoRowStory = {
   title: 'Components/App/Confirm/AlertRow',
 
-  component: AlertRow,
+  component: ConfirmInfoAlertRow,
   argTypes: {
     variant: {
       control: 'select',
@@ -55,9 +55,9 @@ const ConfirmInfoRowStory = {
     },
   },
   decorators: [(story) => <Provider store={storeMock}>{story()}</Provider>],
-} as Meta<typeof AlertRow>;
+} as Meta<typeof ConfirmInfoAlertRow>;
 
-export const DefaultStory = (args) => <AlertRow {...args} />;
+export const DefaultStory = (args) => <ConfirmInfoAlertRow {...args} />;
 
 DefaultStory.storyName = 'Default';
 
diff --git a/ui/components/app/confirm/info/row/alert-row/alert-row.test.tsx b/ui/components/app/confirm/info/row/alert-row/alert-row.test.tsx
index 968c4238509a..f539326a9284 100644
--- a/ui/components/app/confirm/info/row/alert-row/alert-row.test.tsx
+++ b/ui/components/app/confirm/info/row/alert-row/alert-row.test.tsx
@@ -5,7 +5,7 @@ import { Text } from '../../../../../component-library';
 import { renderWithProvider } from '../../../../../../../test/lib/render-helpers';
 import { Severity } from '../../../../../../helpers/constants/design-system';
 import mockState from '../../../../../../../test/data/mock-state.json';
-import { AlertRow, AlertRowProps } from './alert-row';
+import { ConfirmInfoAlertRow, ConfirmInfoAlertRowProps } from './alert-row';
 
 const onProcessActionMock = jest.fn();
 
@@ -36,7 +36,7 @@ describe('AlertRow', () => {
     },
   ];
   const renderAlertRow = (
-    props?: Partial<AlertRowProps>,
+    props?: Partial<ConfirmInfoAlertRowProps>,
     state?: Record<string, unknown>,
   ) => {
     const STATE_MOCK = {
@@ -60,7 +60,7 @@ describe('AlertRow', () => {
 
     const mockStore = configureMockStore([])(STATE_MOCK);
     return renderWithProvider(
-      <AlertRow
+      <ConfirmInfoAlertRow
         label={KEY_ALERT_KEY_MOCK}
         children={<Text>value</Text>}
         ownerId={OWNER_ID_NO_ALERT_MOCK}
diff --git a/ui/components/app/confirm/info/row/alert-row/alert-row.tsx b/ui/components/app/confirm/info/row/alert-row/alert-row.tsx
index ef84818904ad..919f77286233 100644
--- a/ui/components/app/confirm/info/row/alert-row/alert-row.tsx
+++ b/ui/components/app/confirm/info/row/alert-row/alert-row.tsx
@@ -13,7 +13,7 @@ import {
 import { Box } from '../../../../../component-library';
 import { MultipleAlertModal } from '../../../../alert-system/multiple-alert-modal';
 
-export type AlertRowProps = ConfirmInfoRowProps & {
+export type ConfirmInfoAlertRowProps = ConfirmInfoRowProps & {
   alertKey: string;
   ownerId: string;
 };
@@ -36,12 +36,12 @@ function getAlertTextColors(
   }
 }
 
-export const AlertRow = ({
+export const ConfirmInfoAlertRow = ({
   alertKey,
   ownerId,
   variant,
   ...rowProperties
-}: AlertRowProps) => {
+}: ConfirmInfoAlertRowProps) => {
   const { getFieldAlerts } = useAlerts(ownerId);
   const fieldAlerts = getFieldAlerts(alertKey);
   const hasFieldAlert = fieldAlerts.length > 0;
diff --git a/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.tsx b/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.tsx
index 75e35e143d54..f94dd25f5fe0 100644
--- a/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.tsx
+++ b/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.tsx
@@ -16,7 +16,7 @@ import {
 import { SignatureRequestType } from '../../../../types/confirm';
 import { selectUseTransactionSimulations } from '../../../../selectors/preferences';
 import { isSIWESignatureRequest } from '../../../../utils';
-import { AlertRow } from '../../../../../../components/app/confirm/info/row/alert-row/alert-row';
+import { ConfirmInfoAlertRow } from '../../../../../../components/app/confirm/info/row/alert-row/alert-row';
 import { ConfirmInfoSection } from '../../../../../../components/app/confirm/info/row/section';
 import { SIWESignInfo } from './siwe-sign';
 
@@ -49,14 +49,14 @@ const PersonalSignInfo: React.FC = () => {
         </ConfirmInfoSection>
       )}
       <ConfirmInfoSection>
-        <AlertRow
+        <ConfirmInfoAlertRow
           alertKey="requestFrom"
           ownerId={currentConfirmation.id}
           label={t('requestFrom')}
           tooltip={isSIWE ? undefined : t('requestFromInfo')}
         >
           <ConfirmInfoRowUrl url={currentConfirmation.msgParams.origin} />
-        </AlertRow>
+        </ConfirmInfoAlertRow>
         {isSIWE && (
           <ConfirmInfoRow label={t('signingInWith')}>
             <ConfirmInfoRowAddress address={from} />
@@ -67,7 +67,7 @@ const PersonalSignInfo: React.FC = () => {
         {isSIWE ? (
           <SIWESignInfo />
         ) : (
-          <AlertRow
+          <ConfirmInfoAlertRow
             alertKey="message"
             ownerId={currentConfirmation.id}
             label={t('message')}
@@ -77,7 +77,7 @@ const PersonalSignInfo: React.FC = () => {
                 hexToText(currentConfirmation.msgParams?.data),
               )}
             />
-          </AlertRow>
+          </ConfirmInfoAlertRow>
         )}
       </ConfirmInfoSection>
     </>
diff --git a/ui/pages/confirmations/components/confirm/info/shared/transaction-details.tsx b/ui/pages/confirmations/components/confirm/info/shared/transaction-details.tsx
index 8b1907ddf1aa..b10f783407cf 100644
--- a/ui/pages/confirmations/components/confirm/info/shared/transaction-details.tsx
+++ b/ui/pages/confirmations/components/confirm/info/shared/transaction-details.tsx
@@ -13,6 +13,8 @@ import { currentConfirmationSelector } from '../../../../selectors';
 import { useKnownMethodDataInTransaction } from '../hooks/known-method-data-in-transaction';
 import { ConfirmInfoSection } from '../../../../../../components/app/confirm/info/row/section';
 import { selectPaymasterAddress } from '../../../../../../selectors/account-abstraction';
+import { ConfirmInfoAlertRow } from '../../../../../../components/app/confirm/info/row/alert-row/alert-row';
+import { RowAlertKey } from '../../../../../../components/app/confirm/info/row/constants';
 
 const OriginRow = () => {
   const t = useI18nContext();
@@ -106,12 +108,14 @@ const PaymasterRow = () => {
 
   return (
     <ConfirmInfoSection>
-      <ConfirmInfoRow
+      <ConfirmInfoAlertRow
         label={t('confirmFieldPaymaster')}
         tooltip={t('confirmFieldTooltipPaymaster')}
+        ownerId={currentConfirmation?.id as string}
+        alertKey={RowAlertKey.PaymasterAddress}
       >
         <ConfirmInfoRowAddress address={paymasterAddress} />
-      </ConfirmInfoRow>
+      </ConfirmInfoAlertRow>
     </ConfirmInfoSection>
   );
 };

From dd2f5284bcc5506d00ba9160d49a94c526443b4e Mon Sep 17 00:00:00 2001
From: Matthew Walsh <matthew.walsh@consensys.net>
Date: Wed, 19 Jun 2024 12:31:04 +0100
Subject: [PATCH 5/9] Fix unit tests

---
 .../info/__snapshots__/info.test.tsx.snap     |   2 +-
 .../row/__snapshots__/divider.test.tsx.snap   |   2 +-
 .../app/confirm/info/row/divider.tsx          |   1 +
 .../info/__snapshots__/info.test.tsx.snap     | 156 +++---
 .../contract-interaction.test.tsx.snap        |   2 +-
 .../transaction-details.test.tsx.snap         | 188 +++----
 .../__snapshots__/typed-sign.test.tsx.snap    | 468 +++++++++---------
 .../__snapshots__/confirm.test.tsx.snap       | 182 +++----
 8 files changed, 473 insertions(+), 528 deletions(-)

diff --git a/ui/components/app/confirm/info/__snapshots__/info.test.tsx.snap b/ui/components/app/confirm/info/__snapshots__/info.test.tsx.snap
index 1054ecabe66a..a257e3ee3fa8 100644
--- a/ui/components/app/confirm/info/__snapshots__/info.test.tsx.snap
+++ b/ui/components/app/confirm/info/__snapshots__/info.test.tsx.snap
@@ -77,7 +77,7 @@ exports[`ConfirmInfo should match snapshot 1`] = `
       </div>
     </div>
     <div
-      style="height: 1px;"
+      style="height: 1px; margin-left: -8px; margin-right: -8px;"
     />
     <div
       class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
diff --git a/ui/components/app/confirm/info/row/__snapshots__/divider.test.tsx.snap b/ui/components/app/confirm/info/row/__snapshots__/divider.test.tsx.snap
index bd2f298afcee..c0b3ff495bad 100644
--- a/ui/components/app/confirm/info/row/__snapshots__/divider.test.tsx.snap
+++ b/ui/components/app/confirm/info/row/__snapshots__/divider.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ConfirmInfoRowDivider should match snapshot 1`] = `
 <div>
   <div
-    style="height: 1px;"
+    style="height: 1px; margin-left: -8px; margin-right: -8px;"
   />
 </div>
 `;
diff --git a/ui/components/app/confirm/info/row/divider.tsx b/ui/components/app/confirm/info/row/divider.tsx
index 94fc4bb7062e..98c09840f4bb 100644
--- a/ui/components/app/confirm/info/row/divider.tsx
+++ b/ui/components/app/confirm/info/row/divider.tsx
@@ -6,6 +6,7 @@ export const ConfirmInfoRowDivider: React.FC = () => {
       style={{
         height: '1px',
         backgroundColor: 'var(--color-border-muted)',
+        // Ignore the padding from the section.
         marginLeft: '-8px',
         marginRight: '-8px',
       }}
diff --git a/ui/pages/confirmations/components/confirm/info/__snapshots__/info.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/__snapshots__/info.test.tsx.snap
index 086498a0f4d8..d9f473782e78 100644
--- a/ui/pages/confirmations/components/confirm/info/__snapshots__/info.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/__snapshots__/info.test.tsx.snap
@@ -78,122 +78,114 @@ exports[`Info renders info section for personal sign request 1`] = `
 exports[`Info renders info section for typed sign request 1`] = `
 <div>
   <div
-    class="mm-box mm-box--margin-bottom-4 mm-box--padding-0 mm-box--background-color-background-default mm-box--rounded-md"
+    class="mm-box mm-box--margin-bottom-4 mm-box--padding-2 mm-box--background-color-background-default mm-box--rounded-md"
   >
     <div
-      class="mm-box mm-box--padding-2"
+      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
+      style="overflow-wrap: anywhere; min-height: 24px;"
     >
       <div
-        class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
-        style="overflow-wrap: anywhere; min-height: 24px;"
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
       >
-        <div
-          class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+        <p
+          class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
         >
-          <p
-            class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+          Request from
+        </p>
+        <div>
+          <div
+            aria-describedby="tippy-tooltip-2"
+            class=""
+            data-original-title="This is the site asking for your signature."
+            data-tooltipped=""
+            style="display: flex;"
+            tabindex="0"
           >
-            Request from
-          </p>
-          <div>
-            <div
-              aria-describedby="tippy-tooltip-2"
-              class=""
-              data-original-title="This is the site asking for your signature."
-              data-tooltipped=""
-              style="display: flex;"
-              tabindex="0"
-            >
-              <span
-                class="mm-box mm-icon mm-icon--size-sm mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-icon-muted"
-                style="mask-image: url('./images/icons/question.svg');"
-              />
-            </div>
+            <span
+              class="mm-box mm-icon mm-icon--size-sm mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-icon-muted"
+              style="mask-image: url('./images/icons/question.svg');"
+            />
           </div>
         </div>
-        <div
-          class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+      </div>
+      <div
+        class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+      >
+        <p
+          class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
         >
-          <p
-            class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
-          >
-            metamask.github.io
-          </p>
-        </div>
+          metamask.github.io
+        </p>
       </div>
     </div>
     <div
-      class="mm-box mm-box--padding-2"
+      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
+      style="overflow-wrap: anywhere; min-height: 24px;"
     >
       <div
-        class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
-        style="overflow-wrap: anywhere; min-height: 24px;"
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
       >
-        <div
-          class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+        <p
+          class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
         >
-          <p
-            class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
-          >
-            Interacting with
-          </p>
-        </div>
+          Interacting with
+        </p>
+      </div>
+      <div
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
+      >
         <div
           class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
         >
           <div
-            class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
           >
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+              class="mm-avatar-account__jazzicon"
             >
               <div
-                class="mm-avatar-account__jazzicon"
+                style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(1, 142, 116);"
               >
-                <div
-                  style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(1, 142, 116);"
+                <svg
+                  height="16"
+                  width="16"
+                  x="0"
+                  y="0"
                 >
-                  <svg
+                  <rect
+                    fill="#FB1891"
                     height="16"
+                    transform="translate(0.6335263099240563 1.7352552986765108) rotate(129.9 8 8)"
                     width="16"
                     x="0"
                     y="0"
-                  >
-                    <rect
-                      fill="#FB1891"
-                      height="16"
-                      transform="translate(0.6335263099240563 1.7352552986765108) rotate(129.9 8 8)"
-                      width="16"
-                      x="0"
-                      y="0"
-                    />
-                    <rect
-                      fill="#F90901"
-                      height="16"
-                      transform="translate(-5.227286615169763 8.640359200885621) rotate(141.5 8 8)"
-                      width="16"
-                      x="0"
-                      y="0"
-                    />
-                    <rect
-                      fill="#F26A02"
-                      height="16"
-                      transform="translate(10.585940898259892 -4.814122444807073) rotate(339.2 8 8)"
-                      width="16"
-                      x="0"
-                      y="0"
-                    />
-                  </svg>
-                </div>
+                  />
+                  <rect
+                    fill="#F90901"
+                    height="16"
+                    transform="translate(-5.227286615169763 8.640359200885621) rotate(141.5 8 8)"
+                    width="16"
+                    x="0"
+                    y="0"
+                  />
+                  <rect
+                    fill="#F26A02"
+                    height="16"
+                    transform="translate(10.585940898259892 -4.814122444807073) rotate(339.2 8 8)"
+                    width="16"
+                    x="0"
+                    y="0"
+                  />
+                </svg>
               </div>
             </div>
-            <p
-              class="mm-box mm-text mm-text--body-md mm-box--margin-left-2 mm-box--color-inherit"
-              data-testid="confirm-info-row-display-name"
-            >
-              0xCcCCc...ccccC
-            </p>
           </div>
+          <p
+            class="mm-box mm-text mm-text--body-md mm-box--margin-left-2 mm-box--color-inherit"
+            data-testid="confirm-info-row-display-name"
+          >
+            0xCcCCc...ccccC
+          </p>
         </div>
       </div>
     </div>
diff --git a/ui/pages/confirmations/components/confirm/info/contract-interaction/__snapshots__/contract-interaction.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/contract-interaction/__snapshots__/contract-interaction.test.tsx.snap
index cf11076fc92e..2ba4eb76e72e 100644
--- a/ui/pages/confirmations/components/confirm/info/contract-interaction/__snapshots__/contract-interaction.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/contract-interaction/__snapshots__/contract-interaction.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`<ContractInteractionInfo /> does not render if required data is not pre
 exports[`<ContractInteractionInfo /> renders component for contract interaction request 1`] = `
 <div>
   <div
-    class="mm-box mm-box--margin-bottom-4 mm-box--background-color-background-default mm-box--rounded-md"
+    class="mm-box mm-box--margin-bottom-4 mm-box--padding-0 mm-box--background-color-background-default mm-box--rounded-md"
   >
     <div
       class="mm-box simulation-details-layout mm-box--padding-3 mm-box--display-flex mm-box--gap-3 mm-box--flex-direction-column mm-box--rounded-lg mm-box--border-color-transparent box--border-style-solid box--border-width-1"
diff --git a/ui/pages/confirmations/components/confirm/info/shared/__snapshots__/transaction-details.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/shared/__snapshots__/transaction-details.test.tsx.snap
index b2301cd400a1..c98b0b16fed9 100644
--- a/ui/pages/confirmations/components/confirm/info/shared/__snapshots__/transaction-details.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/shared/__snapshots__/transaction-details.test.tsx.snap
@@ -1,130 +1,140 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<TransactionDetails /> does not render component for transaction details 1`] = `<div />`;
+exports[`<TransactionDetails /> does not render component for transaction details 1`] = `
+<div>
+  <div
+    class="mm-box mm-box--margin-bottom-4 mm-box--padding-2 mm-box--background-color-background-default mm-box--rounded-md"
+  />
+</div>
+`;
 
 exports[`<TransactionDetails /> renders component for transaction details 1`] = `
 <div>
   <div
-    class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
-    style="overflow-wrap: anywhere; min-height: 24px;"
+    class="mm-box mm-box--margin-bottom-4 mm-box--padding-2 mm-box--background-color-background-default mm-box--rounded-md"
   >
     <div
-      class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
+      style="overflow-wrap: anywhere; min-height: 24px;"
     >
-      <p
-        class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+      <div
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
       >
-        Request from
-      </p>
-      <div>
-        <div
-          aria-describedby="tippy-tooltip-1"
-          class=""
-          data-original-title="This is the site asking for your confirmation."
-          data-tooltipped=""
-          style="display: flex;"
-          tabindex="0"
+        <p
+          class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
         >
-          <span
-            class="mm-box mm-icon mm-icon--size-sm mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-icon-muted"
-            style="mask-image: url('./images/icons/question.svg');"
-          />
+          Request from
+        </p>
+        <div>
+          <div
+            aria-describedby="tippy-tooltip-1"
+            class=""
+            data-original-title="This is the site asking for your confirmation."
+            data-tooltipped=""
+            style="display: flex;"
+            tabindex="0"
+          >
+            <span
+              class="mm-box mm-icon mm-icon--size-sm mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-icon-muted"
+              style="mask-image: url('./images/icons/question.svg');"
+            />
+          </div>
         </div>
       </div>
-    </div>
-    <div
-      class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
-    >
-      <p
-        class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
+      <div
+        class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
       >
-        metamask.github.io
-      </p>
+        <p
+          class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
+        >
+          metamask.github.io
+        </p>
+      </div>
     </div>
-  </div>
-  <div
-    class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
-    style="overflow-wrap: anywhere; min-height: 24px;"
-  >
     <div
-      class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
+      style="overflow-wrap: anywhere; min-height: 24px;"
     >
-      <p
-        class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+      <div
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
       >
-        Interacting with
-      </p>
-      <div>
-        <div
-          aria-describedby="tippy-tooltip-2"
-          class=""
-          data-original-title="This is the contract you're interacting with. Protect yourself from scammers by  verifying the details."
-          data-tooltipped=""
-          style="display: flex;"
-          tabindex="0"
+        <p
+          class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
         >
-          <span
-            class="mm-box mm-icon mm-icon--size-sm mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-icon-muted"
-            style="mask-image: url('./images/icons/question.svg');"
-          />
+          Interacting with
+        </p>
+        <div>
+          <div
+            aria-describedby="tippy-tooltip-2"
+            class=""
+            data-original-title="This is the contract you're interacting with. Protect yourself from scammers by  verifying the details."
+            data-tooltipped=""
+            style="display: flex;"
+            tabindex="0"
+          >
+            <span
+              class="mm-box mm-icon mm-icon--size-sm mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-icon-muted"
+              style="mask-image: url('./images/icons/question.svg');"
+            />
+          </div>
         </div>
       </div>
-    </div>
-    <div
-      class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
-    >
       <div
         class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
       >
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+          class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
         >
           <div
-            class="mm-avatar-account__jazzicon"
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
           >
             <div
-              style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(200, 20, 98);"
+              class="mm-avatar-account__jazzicon"
             >
-              <svg
-                height="16"
-                width="16"
-                x="0"
-                y="0"
+              <div
+                style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(200, 20, 98);"
               >
-                <rect
-                  fill="#018E82"
-                  height="16"
-                  transform="translate(0.09338133124744565 -0.04490608666778058) rotate(456.7 8 8)"
-                  width="16"
-                  x="0"
-                  y="0"
-                />
-                <rect
-                  fill="#FB187B"
+                <svg
                   height="16"
-                  transform="translate(-6.3240369287990985 -1.0053822898747908) rotate(305.5 8 8)"
                   width="16"
                   x="0"
                   y="0"
-                />
-                <rect
-                  fill="#237CE1"
-                  height="16"
-                  transform="translate(4.0809955633515935 -14.427164334848008) rotate(395.8 8 8)"
-                  width="16"
-                  x="0"
-                  y="0"
-                />
-              </svg>
+                >
+                  <rect
+                    fill="#018E82"
+                    height="16"
+                    transform="translate(0.09338133124744565 -0.04490608666778058) rotate(456.7 8 8)"
+                    width="16"
+                    x="0"
+                    y="0"
+                  />
+                  <rect
+                    fill="#FB187B"
+                    height="16"
+                    transform="translate(-6.3240369287990985 -1.0053822898747908) rotate(305.5 8 8)"
+                    width="16"
+                    x="0"
+                    y="0"
+                  />
+                  <rect
+                    fill="#237CE1"
+                    height="16"
+                    transform="translate(4.0809955633515935 -14.427164334848008) rotate(395.8 8 8)"
+                    width="16"
+                    x="0"
+                    y="0"
+                  />
+                </svg>
+              </div>
             </div>
           </div>
+          <p
+            class="mm-box mm-text mm-text--body-md mm-box--margin-left-2 mm-box--color-inherit"
+            data-testid="confirm-info-row-display-name"
+          >
+            0x88AA6...A5125
+          </p>
         </div>
-        <p
-          class="mm-box mm-text mm-text--body-md mm-box--margin-left-2 mm-box--color-inherit"
-          data-testid="confirm-info-row-display-name"
-        >
-          0x88AA6...A5125
-        </p>
       </div>
     </div>
   </div>
diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/typed-sign.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/typed-sign.test.tsx.snap
index 1d14c6815c89..cf3c57f86829 100644
--- a/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/typed-sign.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/typed-sign.test.tsx.snap
@@ -5,122 +5,114 @@ exports[`TypedSignInfo does not render if required data is not present in the tr
 exports[`TypedSignInfo renders origin for typed sign data request 1`] = `
 <div>
   <div
-    class="mm-box mm-box--margin-bottom-4 mm-box--padding-0 mm-box--background-color-background-default mm-box--rounded-md"
+    class="mm-box mm-box--margin-bottom-4 mm-box--padding-2 mm-box--background-color-background-default mm-box--rounded-md"
   >
     <div
-      class="mm-box mm-box--padding-2"
+      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
+      style="overflow-wrap: anywhere; min-height: 24px;"
     >
       <div
-        class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
-        style="overflow-wrap: anywhere; min-height: 24px;"
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
       >
-        <div
-          class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+        <p
+          class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
         >
-          <p
-            class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+          Request from
+        </p>
+        <div>
+          <div
+            aria-describedby="tippy-tooltip-1"
+            class=""
+            data-original-title="This is the site asking for your signature."
+            data-tooltipped=""
+            style="display: flex;"
+            tabindex="0"
           >
-            Request from
-          </p>
-          <div>
-            <div
-              aria-describedby="tippy-tooltip-1"
-              class=""
-              data-original-title="This is the site asking for your signature."
-              data-tooltipped=""
-              style="display: flex;"
-              tabindex="0"
-            >
-              <span
-                class="mm-box mm-icon mm-icon--size-sm mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-icon-muted"
-                style="mask-image: url('./images/icons/question.svg');"
-              />
-            </div>
+            <span
+              class="mm-box mm-icon mm-icon--size-sm mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-icon-muted"
+              style="mask-image: url('./images/icons/question.svg');"
+            />
           </div>
         </div>
-        <div
-          class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+      </div>
+      <div
+        class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+      >
+        <p
+          class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
         >
-          <p
-            class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
-          >
-            metamask.github.io
-          </p>
-        </div>
+          metamask.github.io
+        </p>
       </div>
     </div>
     <div
-      class="mm-box mm-box--padding-2"
+      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
+      style="overflow-wrap: anywhere; min-height: 24px;"
     >
       <div
-        class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
-        style="overflow-wrap: anywhere; min-height: 24px;"
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
       >
-        <div
-          class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+        <p
+          class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
         >
-          <p
-            class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
-          >
-            Interacting with
-          </p>
-        </div>
+          Interacting with
+        </p>
+      </div>
+      <div
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
+      >
         <div
           class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
         >
           <div
-            class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
           >
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+              class="mm-avatar-account__jazzicon"
             >
               <div
-                class="mm-avatar-account__jazzicon"
+                style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(1, 142, 116);"
               >
-                <div
-                  style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(1, 142, 116);"
+                <svg
+                  height="16"
+                  width="16"
+                  x="0"
+                  y="0"
                 >
-                  <svg
+                  <rect
+                    fill="#FB1891"
                     height="16"
+                    transform="translate(0.6335263099240563 1.7352552986765108) rotate(129.9 8 8)"
                     width="16"
                     x="0"
                     y="0"
-                  >
-                    <rect
-                      fill="#FB1891"
-                      height="16"
-                      transform="translate(0.6335263099240563 1.7352552986765108) rotate(129.9 8 8)"
-                      width="16"
-                      x="0"
-                      y="0"
-                    />
-                    <rect
-                      fill="#F90901"
-                      height="16"
-                      transform="translate(-5.227286615169763 8.640359200885621) rotate(141.5 8 8)"
-                      width="16"
-                      x="0"
-                      y="0"
-                    />
-                    <rect
-                      fill="#F26A02"
-                      height="16"
-                      transform="translate(10.585940898259892 -4.814122444807073) rotate(339.2 8 8)"
-                      width="16"
-                      x="0"
-                      y="0"
-                    />
-                  </svg>
-                </div>
+                  />
+                  <rect
+                    fill="#F90901"
+                    height="16"
+                    transform="translate(-5.227286615169763 8.640359200885621) rotate(141.5 8 8)"
+                    width="16"
+                    x="0"
+                    y="0"
+                  />
+                  <rect
+                    fill="#F26A02"
+                    height="16"
+                    transform="translate(10.585940898259892 -4.814122444807073) rotate(339.2 8 8)"
+                    width="16"
+                    x="0"
+                    y="0"
+                  />
+                </svg>
               </div>
             </div>
-            <p
-              class="mm-box mm-text mm-text--body-md mm-box--margin-left-2 mm-box--color-inherit"
-              data-testid="confirm-info-row-display-name"
-            >
-              0xCcCCc...ccccC
-            </p>
           </div>
+          <p
+            class="mm-box mm-text mm-text--body-md mm-box--margin-left-2 mm-box--color-inherit"
+            data-testid="confirm-info-row-display-name"
+          >
+            0xCcCCc...ccccC
+          </p>
         </div>
       </div>
     </div>
@@ -436,122 +428,114 @@ exports[`TypedSignInfo renders origin for typed sign data request 1`] = `
 exports[`TypedSignInfo should render message for typed sign v3 request 1`] = `
 <div>
   <div
-    class="mm-box mm-box--margin-bottom-4 mm-box--padding-0 mm-box--background-color-background-default mm-box--rounded-md"
+    class="mm-box mm-box--margin-bottom-4 mm-box--padding-2 mm-box--background-color-background-default mm-box--rounded-md"
   >
     <div
-      class="mm-box mm-box--padding-2"
+      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
+      style="overflow-wrap: anywhere; min-height: 24px;"
     >
       <div
-        class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
-        style="overflow-wrap: anywhere; min-height: 24px;"
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
       >
-        <div
-          class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+        <p
+          class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
         >
-          <p
-            class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+          Request from
+        </p>
+        <div>
+          <div
+            aria-describedby="tippy-tooltip-2"
+            class=""
+            data-original-title="This is the site asking for your signature."
+            data-tooltipped=""
+            style="display: flex;"
+            tabindex="0"
           >
-            Request from
-          </p>
-          <div>
-            <div
-              aria-describedby="tippy-tooltip-2"
-              class=""
-              data-original-title="This is the site asking for your signature."
-              data-tooltipped=""
-              style="display: flex;"
-              tabindex="0"
-            >
-              <span
-                class="mm-box mm-icon mm-icon--size-sm mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-icon-muted"
-                style="mask-image: url('./images/icons/question.svg');"
-              />
-            </div>
+            <span
+              class="mm-box mm-icon mm-icon--size-sm mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-icon-muted"
+              style="mask-image: url('./images/icons/question.svg');"
+            />
           </div>
         </div>
-        <div
-          class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+      </div>
+      <div
+        class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+      >
+        <p
+          class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
         >
-          <p
-            class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
-          >
-            metamask.github.io
-          </p>
-        </div>
+          metamask.github.io
+        </p>
       </div>
     </div>
     <div
-      class="mm-box mm-box--padding-2"
+      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
+      style="overflow-wrap: anywhere; min-height: 24px;"
     >
       <div
-        class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
-        style="overflow-wrap: anywhere; min-height: 24px;"
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
       >
-        <div
-          class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+        <p
+          class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
         >
-          <p
-            class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
-          >
-            Interacting with
-          </p>
-        </div>
+          Interacting with
+        </p>
+      </div>
+      <div
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
+      >
         <div
           class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
         >
           <div
-            class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
           >
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+              class="mm-avatar-account__jazzicon"
             >
               <div
-                class="mm-avatar-account__jazzicon"
+                style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(1, 142, 116);"
               >
-                <div
-                  style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(1, 142, 116);"
+                <svg
+                  height="16"
+                  width="16"
+                  x="0"
+                  y="0"
                 >
-                  <svg
+                  <rect
+                    fill="#FB1891"
                     height="16"
+                    transform="translate(0.6335263099240563 1.7352552986765108) rotate(129.9 8 8)"
                     width="16"
                     x="0"
                     y="0"
-                  >
-                    <rect
-                      fill="#FB1891"
-                      height="16"
-                      transform="translate(0.6335263099240563 1.7352552986765108) rotate(129.9 8 8)"
-                      width="16"
-                      x="0"
-                      y="0"
-                    />
-                    <rect
-                      fill="#F90901"
-                      height="16"
-                      transform="translate(-5.227286615169763 8.640359200885621) rotate(141.5 8 8)"
-                      width="16"
-                      x="0"
-                      y="0"
-                    />
-                    <rect
-                      fill="#F26A02"
-                      height="16"
-                      transform="translate(10.585940898259892 -4.814122444807073) rotate(339.2 8 8)"
-                      width="16"
-                      x="0"
-                      y="0"
-                    />
-                  </svg>
-                </div>
+                  />
+                  <rect
+                    fill="#F90901"
+                    height="16"
+                    transform="translate(-5.227286615169763 8.640359200885621) rotate(141.5 8 8)"
+                    width="16"
+                    x="0"
+                    y="0"
+                  />
+                  <rect
+                    fill="#F26A02"
+                    height="16"
+                    transform="translate(10.585940898259892 -4.814122444807073) rotate(339.2 8 8)"
+                    width="16"
+                    x="0"
+                    y="0"
+                  />
+                </svg>
               </div>
             </div>
-            <p
-              class="mm-box mm-text mm-text--body-md mm-box--margin-left-2 mm-box--color-inherit"
-              data-testid="confirm-info-row-display-name"
-            >
-              0xCcCCc...ccccC
-            </p>
           </div>
+          <p
+            class="mm-box mm-text mm-text--body-md mm-box--margin-left-2 mm-box--color-inherit"
+            data-testid="confirm-info-row-display-name"
+          >
+            0xCcCCc...ccccC
+          </p>
         </div>
       </div>
     </div>
@@ -867,122 +851,114 @@ exports[`TypedSignInfo should render message for typed sign v3 request 1`] = `
 exports[`TypedSignInfo should render message for typed sign v4 request 1`] = `
 <div>
   <div
-    class="mm-box mm-box--margin-bottom-4 mm-box--padding-0 mm-box--background-color-background-default mm-box--rounded-md"
+    class="mm-box mm-box--margin-bottom-4 mm-box--padding-2 mm-box--background-color-background-default mm-box--rounded-md"
   >
     <div
-      class="mm-box mm-box--padding-2"
+      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
+      style="overflow-wrap: anywhere; min-height: 24px;"
     >
       <div
-        class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
-        style="overflow-wrap: anywhere; min-height: 24px;"
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
       >
-        <div
-          class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+        <p
+          class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
         >
-          <p
-            class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+          Request from
+        </p>
+        <div>
+          <div
+            aria-describedby="tippy-tooltip-3"
+            class=""
+            data-original-title="This is the site asking for your signature."
+            data-tooltipped=""
+            style="display: flex;"
+            tabindex="0"
           >
-            Request from
-          </p>
-          <div>
-            <div
-              aria-describedby="tippy-tooltip-3"
-              class=""
-              data-original-title="This is the site asking for your signature."
-              data-tooltipped=""
-              style="display: flex;"
-              tabindex="0"
-            >
-              <span
-                class="mm-box mm-icon mm-icon--size-sm mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-icon-muted"
-                style="mask-image: url('./images/icons/question.svg');"
-              />
-            </div>
+            <span
+              class="mm-box mm-icon mm-icon--size-sm mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-icon-muted"
+              style="mask-image: url('./images/icons/question.svg');"
+            />
           </div>
         </div>
-        <div
-          class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+      </div>
+      <div
+        class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+      >
+        <p
+          class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
         >
-          <p
-            class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
-          >
-            metamask.github.io
-          </p>
-        </div>
+          metamask.github.io
+        </p>
       </div>
     </div>
     <div
-      class="mm-box mm-box--padding-2"
+      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
+      style="overflow-wrap: anywhere; min-height: 24px;"
     >
       <div
-        class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
-        style="overflow-wrap: anywhere; min-height: 24px;"
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
       >
-        <div
-          class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+        <p
+          class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
         >
-          <p
-            class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
-          >
-            Interacting with
-          </p>
-        </div>
+          Interacting with
+        </p>
+      </div>
+      <div
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
+      >
         <div
           class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
         >
           <div
-            class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
           >
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+              class="mm-avatar-account__jazzicon"
             >
               <div
-                class="mm-avatar-account__jazzicon"
+                style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(1, 142, 116);"
               >
-                <div
-                  style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(1, 142, 116);"
+                <svg
+                  height="16"
+                  width="16"
+                  x="0"
+                  y="0"
                 >
-                  <svg
+                  <rect
+                    fill="#FB1891"
                     height="16"
+                    transform="translate(0.6335263099240563 1.7352552986765108) rotate(129.9 8 8)"
                     width="16"
                     x="0"
                     y="0"
-                  >
-                    <rect
-                      fill="#FB1891"
-                      height="16"
-                      transform="translate(0.6335263099240563 1.7352552986765108) rotate(129.9 8 8)"
-                      width="16"
-                      x="0"
-                      y="0"
-                    />
-                    <rect
-                      fill="#F90901"
-                      height="16"
-                      transform="translate(-5.227286615169763 8.640359200885621) rotate(141.5 8 8)"
-                      width="16"
-                      x="0"
-                      y="0"
-                    />
-                    <rect
-                      fill="#F26A02"
-                      height="16"
-                      transform="translate(10.585940898259892 -4.814122444807073) rotate(339.2 8 8)"
-                      width="16"
-                      x="0"
-                      y="0"
-                    />
-                  </svg>
-                </div>
+                  />
+                  <rect
+                    fill="#F90901"
+                    height="16"
+                    transform="translate(-5.227286615169763 8.640359200885621) rotate(141.5 8 8)"
+                    width="16"
+                    x="0"
+                    y="0"
+                  />
+                  <rect
+                    fill="#F26A02"
+                    height="16"
+                    transform="translate(10.585940898259892 -4.814122444807073) rotate(339.2 8 8)"
+                    width="16"
+                    x="0"
+                    y="0"
+                  />
+                </svg>
               </div>
             </div>
-            <p
-              class="mm-box mm-text mm-text--body-md mm-box--margin-left-2 mm-box--color-inherit"
-              data-testid="confirm-info-row-display-name"
-            >
-              0xCcCCc...ccccC
-            </p>
           </div>
+          <p
+            class="mm-box mm-text mm-text--body-md mm-box--margin-left-2 mm-box--color-inherit"
+            data-testid="confirm-info-row-display-name"
+          >
+            0xCcCCc...ccccC
+          </p>
         </div>
       </div>
     </div>
diff --git a/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap b/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap
index c28f6bec6360..89ac8f62ae1c 100644
--- a/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap
+++ b/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap
@@ -111,19 +111,6 @@ exports[`Confirm matches snapshot for personal signature type 1`] = `
           </div>
         </div>
       </div>
-      <div
-        class="mm-box 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 mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
         style="min-height: 0; overflow: hidden; position: relative;"
@@ -346,19 +333,6 @@ exports[`Confirm should match snapshot for typed sign signature 1`] = `
           </div>
         </div>
       </div>
-      <div
-        class="mm-box 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 mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
         style="min-height: 0; overflow: hidden; position: relative;"
@@ -378,122 +352,114 @@ exports[`Confirm should match snapshot for typed sign signature 1`] = `
             Only confirm this message if you approve the content and trust the requesting site.
           </p>
           <div
-            class="mm-box mm-box--margin-bottom-4 mm-box--padding-0 mm-box--background-color-background-default mm-box--rounded-md"
+            class="mm-box mm-box--margin-bottom-4 mm-box--padding-2 mm-box--background-color-background-default mm-box--rounded-md"
           >
             <div
-              class="mm-box mm-box--padding-2"
+              class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
+              style="overflow-wrap: anywhere; min-height: 24px;"
             >
               <div
-                class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
-                style="overflow-wrap: anywhere; min-height: 24px;"
+                class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
               >
-                <div
-                  class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+                <p
+                  class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
                 >
-                  <p
-                    class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+                  Request from
+                </p>
+                <div>
+                  <div
+                    aria-describedby="tippy-tooltip-5"
+                    class=""
+                    data-original-title="This is the site asking for your signature."
+                    data-tooltipped=""
+                    style="display: flex;"
+                    tabindex="0"
                   >
-                    Request from
-                  </p>
-                  <div>
-                    <div
-                      aria-describedby="tippy-tooltip-5"
-                      class=""
-                      data-original-title="This is the site asking for your signature."
-                      data-tooltipped=""
-                      style="display: flex;"
-                      tabindex="0"
-                    >
-                      <span
-                        class="mm-box mm-icon mm-icon--size-sm mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-icon-muted"
-                        style="mask-image: url('./images/icons/question.svg');"
-                      />
-                    </div>
+                    <span
+                      class="mm-box mm-icon mm-icon--size-sm mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-icon-muted"
+                      style="mask-image: url('./images/icons/question.svg');"
+                    />
                   </div>
                 </div>
-                <div
-                  class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+              </div>
+              <div
+                class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+              >
+                <p
+                  class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
                 >
-                  <p
-                    class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
-                  >
-                    metamask.github.io
-                  </p>
-                </div>
+                  metamask.github.io
+                </p>
               </div>
             </div>
             <div
-              class="mm-box mm-box--padding-2"
+              class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
+              style="overflow-wrap: anywhere; min-height: 24px;"
             >
               <div
-                class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
-                style="overflow-wrap: anywhere; min-height: 24px;"
+                class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
               >
-                <div
-                  class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+                <p
+                  class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
                 >
-                  <p
-                    class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
-                  >
-                    Interacting with
-                  </p>
-                </div>
+                  Interacting with
+                </p>
+              </div>
+              <div
+                class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
+              >
                 <div
                   class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
                 >
                   <div
-                    class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
+                    class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
                   >
                     <div
-                      class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+                      class="mm-avatar-account__jazzicon"
                     >
                       <div
-                        class="mm-avatar-account__jazzicon"
+                        style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(1, 142, 116);"
                       >
-                        <div
-                          style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(1, 142, 116);"
+                        <svg
+                          height="16"
+                          width="16"
+                          x="0"
+                          y="0"
                         >
-                          <svg
+                          <rect
+                            fill="#FB1891"
                             height="16"
+                            transform="translate(0.6335263099240563 1.7352552986765108) rotate(129.9 8 8)"
                             width="16"
                             x="0"
                             y="0"
-                          >
-                            <rect
-                              fill="#FB1891"
-                              height="16"
-                              transform="translate(0.6335263099240563 1.7352552986765108) rotate(129.9 8 8)"
-                              width="16"
-                              x="0"
-                              y="0"
-                            />
-                            <rect
-                              fill="#F90901"
-                              height="16"
-                              transform="translate(-5.227286615169763 8.640359200885621) rotate(141.5 8 8)"
-                              width="16"
-                              x="0"
-                              y="0"
-                            />
-                            <rect
-                              fill="#F26A02"
-                              height="16"
-                              transform="translate(10.585940898259892 -4.814122444807073) rotate(339.2 8 8)"
-                              width="16"
-                              x="0"
-                              y="0"
-                            />
-                          </svg>
-                        </div>
+                          />
+                          <rect
+                            fill="#F90901"
+                            height="16"
+                            transform="translate(-5.227286615169763 8.640359200885621) rotate(141.5 8 8)"
+                            width="16"
+                            x="0"
+                            y="0"
+                          />
+                          <rect
+                            fill="#F26A02"
+                            height="16"
+                            transform="translate(10.585940898259892 -4.814122444807073) rotate(339.2 8 8)"
+                            width="16"
+                            x="0"
+                            y="0"
+                          />
+                        </svg>
                       </div>
                     </div>
-                    <p
-                      class="mm-box mm-text mm-text--body-md mm-box--margin-left-2 mm-box--color-inherit"
-                      data-testid="confirm-info-row-display-name"
-                    >
-                      0xCcCCc...ccccC
-                    </p>
                   </div>
+                  <p
+                    class="mm-box mm-text mm-text--body-md mm-box--margin-left-2 mm-box--color-inherit"
+                    data-testid="confirm-info-row-display-name"
+                  >
+                    0xCcCCc...ccccC
+                  </p>
                 </div>
               </div>
             </div>

From 8310c9719f47525862e4a052e50e54e517ba4947 Mon Sep 17 00:00:00 2001
From: Matthew Walsh <matthew.walsh@consensys.net>
Date: Thu, 20 Jun 2024 12:22:02 +0100
Subject: [PATCH 6/9] Update tooltip

Add missing selector.
---
 app/_locales/en/messages.json                             | 2 +-
 .../confirm/info/shared/transaction-details.tsx           | 8 ++------
 ui/selectors/account-abstraction.ts                       | 7 +++++++
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 9c2a271a79ca..4be283a9f4c4 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -904,7 +904,7 @@
     "message": "Fee paid by"
   },
   "confirmFieldTooltipPaymaster": {
-    "message": "This is the address of the paymaster smart contract that will provide the gas fee for this user operation."
+    "message": "The fee for this transaction will be paid by the paymaster smart contract."
   },
   "confirmPassword": {
     "message": "Confirm password"
diff --git a/ui/pages/confirmations/components/confirm/info/shared/transaction-details.tsx b/ui/pages/confirmations/components/confirm/info/shared/transaction-details.tsx
index b10f783407cf..8b1907ddf1aa 100644
--- a/ui/pages/confirmations/components/confirm/info/shared/transaction-details.tsx
+++ b/ui/pages/confirmations/components/confirm/info/shared/transaction-details.tsx
@@ -13,8 +13,6 @@ import { currentConfirmationSelector } from '../../../../selectors';
 import { useKnownMethodDataInTransaction } from '../hooks/known-method-data-in-transaction';
 import { ConfirmInfoSection } from '../../../../../../components/app/confirm/info/row/section';
 import { selectPaymasterAddress } from '../../../../../../selectors/account-abstraction';
-import { ConfirmInfoAlertRow } from '../../../../../../components/app/confirm/info/row/alert-row/alert-row';
-import { RowAlertKey } from '../../../../../../components/app/confirm/info/row/constants';
 
 const OriginRow = () => {
   const t = useI18nContext();
@@ -108,14 +106,12 @@ const PaymasterRow = () => {
 
   return (
     <ConfirmInfoSection>
-      <ConfirmInfoAlertRow
+      <ConfirmInfoRow
         label={t('confirmFieldPaymaster')}
         tooltip={t('confirmFieldTooltipPaymaster')}
-        ownerId={currentConfirmation?.id as string}
-        alertKey={RowAlertKey.PaymasterAddress}
       >
         <ConfirmInfoRowAddress address={paymasterAddress} />
-      </ConfirmInfoAlertRow>
+      </ConfirmInfoRow>
     </ConfirmInfoSection>
   );
 };
diff --git a/ui/selectors/account-abstraction.ts b/ui/selectors/account-abstraction.ts
index 77b191d34b20..179f4665bfd6 100644
--- a/ui/selectors/account-abstraction.ts
+++ b/ui/selectors/account-abstraction.ts
@@ -1,5 +1,6 @@
 import { TransactionMeta } from '@metamask/transaction-controller';
 import { UserOperationControllerState } from '@metamask/user-operation-controller';
+import { createSelector } from 'reselect';
 
 export type AccountAbstractionState = {
   confirmTransaction?: { txData?: TransactionMeta };
@@ -10,6 +11,12 @@ export function getUserOperations(state: AccountAbstractionState) {
   return state.metamask.userOperations || {};
 }
 
+export const selectUserOperationMetadata = createSelector(
+  getUserOperations,
+  (_state: AccountAbstractionState, userOperationId: string) => userOperationId,
+  (userOperations, userOperationId) => userOperations[userOperationId],
+);
+
 export function getUserOperation(state: AccountAbstractionState) {
   const currentTransaction = state.confirmTransaction?.txData;
 

From e06b707f8e2a14c308cd867bac395611377bb2b4 Mon Sep 17 00:00:00 2001
From: Matthew Walsh <matthew.walsh@consensys.net>
Date: Thu, 20 Jun 2024 12:41:15 +0100
Subject: [PATCH 7/9] Add storybook icon

---
 .storybook/images/icons/info.svg | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 .storybook/images/icons/info.svg

diff --git a/.storybook/images/icons/info.svg b/.storybook/images/icons/info.svg
new file mode 100644
index 000000000000..929561d16a83
--- /dev/null
+++ b/.storybook/images/icons/info.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <path d="m252 51c-41 0-81 12-114 35-34 22-60 54-76 92-15 37-19 78-11 118 8 40 27 76 56 105 28 28 65 48 105 56 39 8 80 4 118-12 37-15 69-42 92-75 22-34 34-73 34-114 0-54-21-106-60-145-38-38-90-60-144-60z m-4 95c4 0 9 1 13 4 4 2 7 6 8 10 2 5 3 9 2 14-1 5-3 9-7 12-3 3-7 6-12 7-4 0-9 0-13-2-5-2-8-5-11-9-3-3-4-8-4-13 0-6 2-12 7-16 4-5 10-7 17-7z m19 220l-15 0c-5 0-9-1-12-4-3-3-4-7-4-11l0-95c-4 0-8-2-11-5-3-3-5-7-5-11 0-4 2-8 5-11 3-3 7-5 11-5l16 0c4 0 8 2 11 5 3 3 4 7 4 11l0 95c4 0 8 1 11 4 3 3 5 7 5 12 0 4-2 8-5 11-3 3-7 4-11 4z"/>
+</svg>

From 7b636f3f7b1ac2d571869881c6d1d9566e40b08d Mon Sep 17 00:00:00 2001
From: Matthew Walsh <matthew.walsh@consensys.net>
Date: Fri, 21 Jun 2024 11:36:12 +0100
Subject: [PATCH 8/9] Fix unit tests and linting

---
 .../advanced-details.test.tsx.snap            | 184 +++++++++---------
 .../advanced-details/advanced-details.tsx     |  58 ++----
 .../confirmations/confirm/stories/utils.tsx   |   2 +
 3 files changed, 110 insertions(+), 134 deletions(-)

diff --git a/ui/pages/confirmations/components/confirm/info/shared/advanced-details/__snapshots__/advanced-details.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/shared/advanced-details/__snapshots__/advanced-details.test.tsx.snap
index de531cb73c51..295aa2510d56 100644
--- a/ui/pages/confirmations/components/confirm/info/shared/advanced-details/__snapshots__/advanced-details.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/shared/advanced-details/__snapshots__/advanced-details.test.tsx.snap
@@ -3,49 +3,45 @@
 exports[`<AdvancedDetails /> does not render component for advanced transaction details 1`] = `
 <div>
   <div
-    class="mm-box mm-box--margin-bottom-4 mm-box--background-color-background-default mm-box--rounded-md"
+    class="mm-box mm-box--margin-bottom-4 mm-box--padding-2 mm-box--background-color-background-default mm-box--rounded-md"
   >
     <div
-      class="mm-box mm-box--padding-2"
+      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
+      style="overflow-wrap: anywhere; min-height: 24px;"
     >
       <div
-        class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
-        style="overflow-wrap: anywhere; min-height: 24px;"
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
       >
-        <div
-          class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+        <p
+          class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
         >
-          <p
-            class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+          Nonce
+        </p>
+        <div>
+          <div
+            aria-describedby="tippy-tooltip-1"
+            class=""
+            data-original-title="This is the transaction number of an account. Nonce for the first transaction is 0 and it increases in sequential order."
+            data-tooltipped=""
+            style="display: flex;"
+            tabindex="0"
           >
-            Nonce
-          </p>
-          <div>
-            <div
-              aria-describedby="tippy-tooltip-1"
-              class=""
-              data-original-title="This is the transaction number of an account. Nonce for the first transaction is 0 and it increases in sequential order."
-              data-tooltipped=""
-              style="display: flex;"
-              tabindex="0"
-            >
-              <span
-                class="mm-box mm-icon mm-icon--size-sm mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-icon-muted"
-                style="mask-image: url('./images/icons/question.svg');"
-              />
-            </div>
+            <span
+              class="mm-box mm-icon mm-icon--size-sm mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-icon-muted"
+              style="mask-image: url('./images/icons/question.svg');"
+            />
           </div>
         </div>
-        <div
-          class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+      </div>
+      <div
+        class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+      >
+        <p
+          class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
+          style="white-space: pre-wrap;"
         >
-          <p
-            class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
-            style="white-space: pre-wrap;"
-          >
-            undefined
-          </p>
-        </div>
+          undefined
+        </p>
       </div>
     </div>
   </div>
@@ -55,90 +51,86 @@ exports[`<AdvancedDetails /> does not render component for advanced transaction
 exports[`<AdvancedDetails /> renders component for advanced transaction details 1`] = `
 <div>
   <div
-    class="mm-box mm-box--margin-bottom-4 mm-box--background-color-background-default mm-box--rounded-md"
+    class="mm-box mm-box--margin-bottom-4 mm-box--padding-2 mm-box--background-color-background-default mm-box--rounded-md"
   >
     <div
-      class="mm-box mm-box--padding-2"
+      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
+      style="overflow-wrap: anywhere; min-height: 24px;"
     >
       <div
-        class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
-        style="overflow-wrap: anywhere; min-height: 24px;"
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
       >
-        <div
-          class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
-        >
-          <p
-            class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
-          >
-            Nonce
-          </p>
-          <div>
-            <div
-              aria-describedby="tippy-tooltip-2"
-              class=""
-              data-original-title="This is the transaction number of an account. Nonce for the first transaction is 0 and it increases in sequential order."
-              data-tooltipped=""
-              style="display: flex;"
-              tabindex="0"
-            >
-              <span
-                class="mm-box mm-icon mm-icon--size-sm mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-icon-muted"
-                style="mask-image: url('./images/icons/question.svg');"
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+        <p
+          class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
         >
-          <p
-            class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
-            style="white-space: pre-wrap;"
-          >
-            12
-          </p>
-          <button
-            aria-label="Edit"
-            class="mm-box mm-button-icon mm-button-icon--size-lg edit-nonce-btn mm-box--margin-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-lg"
+          Nonce
+        </p>
+        <div>
+          <div
+            aria-describedby="tippy-tooltip-2"
+            class=""
+            data-original-title="This is the transaction number of an account. Nonce for the first transaction is 0 and it increases in sequential order."
+            data-tooltipped=""
+            style="display: flex;"
+            tabindex="0"
           >
             <span
-              class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-inherit"
-              style="mask-image: url('./images/icons/edit.svg');"
+              class="mm-box mm-icon mm-icon--size-sm mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-icon-muted"
+              style="mask-image: url('./images/icons/question.svg');"
             />
-          </button>
+          </div>
         </div>
       </div>
+      <div
+        class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+      >
+        <p
+          class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
+          style="white-space: pre-wrap;"
+        >
+          12
+        </p>
+        <button
+          aria-label="Edit"
+          class="mm-box mm-button-icon mm-button-icon--size-lg edit-nonce-btn mm-box--margin-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-lg"
+        >
+          <span
+            class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-inherit"
+            style="mask-image: url('./images/icons/edit.svg');"
+          />
+        </button>
+      </div>
     </div>
     <div
-      class="mm-box mm-box--width-full mm-box--border-color-border-muted mm-box--border-width-1 box--border-style-solid"
+      style="height: 1px; margin-left: -8px; margin-right: -8px;"
     />
     <div
-      class="mm-box mm-box--padding-2"
+      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
+      style="overflow-wrap: anywhere; min-height: 24px;"
     >
       <div
-        class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
-        style="overflow-wrap: anywhere; min-height: 24px;"
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
       >
-        <div
-          class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+        <p
+          class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
         >
-          <p
-            class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
-          >
-            Hex
-          </p>
-        </div>
-        <div
-          class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+          Hex
+        </p>
+      </div>
+      <div
+        class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+      >
+        <p
+          class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
+          style="white-space: pre-wrap;"
         >
-          <p
-            class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
-            style="white-space: pre-wrap;"
-          >
-            0xd0e30db0
-          </p>
-        </div>
+          0xd0e30db0
+        </p>
       </div>
+    </div>
+    <div
+      class="mm-box mm-box--padding-left-2"
+    >
       <div>
         <button
           class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-link mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
diff --git a/ui/pages/confirmations/components/confirm/info/shared/advanced-details/advanced-details.tsx b/ui/pages/confirmations/components/confirm/info/shared/advanced-details/advanced-details.tsx
index 2d7eefbf1c3b..853848aa994e 100644
--- a/ui/pages/confirmations/components/confirm/info/shared/advanced-details/advanced-details.tsx
+++ b/ui/pages/confirmations/components/confirm/info/shared/advanced-details/advanced-details.tsx
@@ -3,6 +3,7 @@ import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   ConfirmInfoRow,
+  ConfirmInfoRowDivider,
   ConfirmInfoRowText,
 } from '../../../../../../../components/app/confirm/info/row';
 import {
@@ -13,10 +14,6 @@ import {
   IconName,
 } from '../../../../../../../components/component-library';
 import Tooltip from '../../../../../../../components/ui/tooltip';
-import {
-  BlockSize,
-  BorderColor,
-} from '../../../../../../../helpers/constants/design-system';
 import { useCopyToClipboard } from '../../../../../../../hooks/useCopyToClipboard';
 import { useI18nContext } from '../../../../../../../hooks/useI18nContext';
 import {
@@ -71,31 +68,19 @@ const NonceDetails = () => {
   const displayedNonce = customNonceValue || nextNonce;
 
   return (
-    <Box padding={2}>
-      <ConfirmInfoRow
-        label={t('advancedDetailsNonceDesc')}
-        tooltip={t('advancedDetailsNonceTooltip')}
-      >
-        <ConfirmInfoRowText
-          text={`${displayedNonce}`}
-          onEditClick={
-            enableCustomNonce ? () => openEditNonceModal() : undefined
-          }
-          editIconClassName="edit-nonce-btn"
-        />
-      </ConfirmInfoRow>
-    </Box>
+    <ConfirmInfoRow
+      label={t('advancedDetailsNonceDesc')}
+      tooltip={t('advancedDetailsNonceTooltip')}
+    >
+      <ConfirmInfoRowText
+        text={`${displayedNonce}`}
+        onEditClick={enableCustomNonce ? () => openEditNonceModal() : undefined}
+        editIconClassName="edit-nonce-btn"
+      />
+    </ConfirmInfoRow>
   );
 };
 
-const Divider = () => (
-  <Box
-    borderColor={BorderColor.borderMuted}
-    borderWidth={1}
-    width={BlockSize.Full}
-  />
-);
-
 const DataDetails = () => {
   const t = useI18nContext();
 
@@ -114,12 +99,10 @@ const DataDetails = () => {
 
   return (
     <>
-      <Divider />
-      <Box padding={2}>
-        <ConfirmInfoRow label={t('advancedDetailsDataDesc')}>
-          <ConfirmInfoRowText text={methodDataString} />
-        </ConfirmInfoRow>
-      </Box>
+      <ConfirmInfoRowDivider />
+      <ConfirmInfoRow label={t('advancedDetailsDataDesc')}>
+        <ConfirmInfoRowText text={methodDataString} />
+      </ConfirmInfoRow>
     </>
   );
 };
@@ -139,12 +122,11 @@ const HexDetails = () => {
 
   return (
     <>
-      <Divider />
-      <Box padding={2}>
-        <ConfirmInfoRow label={t('advancedDetailsHexDesc')}>
-          <ConfirmInfoRowText text={currentConfirmation.txParams.data || ''} />
-        </ConfirmInfoRow>
-
+      <ConfirmInfoRowDivider />
+      <ConfirmInfoRow label={t('advancedDetailsHexDesc')}>
+        <ConfirmInfoRowText text={currentConfirmation.txParams.data || ''} />
+      </ConfirmInfoRow>
+      <Box paddingLeft={2}>
         <Tooltip position="right" title={copied ? t('copiedExclamation') : ''}>
           <Button
             onClick={() => {
diff --git a/ui/pages/confirmations/confirm/stories/utils.tsx b/ui/pages/confirmations/confirm/stories/utils.tsx
index 1848a03c2e54..1bbff2f6e851 100644
--- a/ui/pages/confirmations/confirm/stories/utils.tsx
+++ b/ui/pages/confirmations/confirm/stories/utils.tsx
@@ -21,7 +21,9 @@ export const ARG_TYPES_SIGNATURE = {
 };
 
 export function ConfirmStoryTemplate(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   currentConfirmation: any,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   metamaskState: any = {},
 ): JSX.Element {
   const store = configureStore({

From 080a6440281bbe0ceb32457cdf5d1dcb37a11fe5 Mon Sep 17 00:00:00 2001
From: Matthew Walsh <matthew.walsh@consensys.net>
Date: Fri, 21 Jun 2024 13:15:03 +0100
Subject: [PATCH 9/9] Fix snaphots

---
 .../__snapshots__/confirm.test.tsx.snap       | 156 +++++++++---------
 1 file changed, 74 insertions(+), 82 deletions(-)

diff --git a/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap b/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap
index e5bb81c0c956..89ac8f62ae1c 100644
--- a/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap
+++ b/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap
@@ -352,122 +352,114 @@ exports[`Confirm should match snapshot for typed sign signature 1`] = `
             Only confirm this message if you approve the content and trust the requesting site.
           </p>
           <div
-            class="mm-box mm-box--margin-bottom-4 mm-box--padding-0 mm-box--background-color-background-default mm-box--rounded-md"
+            class="mm-box mm-box--margin-bottom-4 mm-box--padding-2 mm-box--background-color-background-default mm-box--rounded-md"
           >
             <div
-              class="mm-box mm-box--padding-inline-2"
+              class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
+              style="overflow-wrap: anywhere; min-height: 24px;"
             >
               <div
-                class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
-                style="overflow-wrap: anywhere; min-height: 24px;"
+                class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
               >
-                <div
-                  class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+                <p
+                  class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
                 >
-                  <p
-                    class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+                  Request from
+                </p>
+                <div>
+                  <div
+                    aria-describedby="tippy-tooltip-5"
+                    class=""
+                    data-original-title="This is the site asking for your signature."
+                    data-tooltipped=""
+                    style="display: flex;"
+                    tabindex="0"
                   >
-                    Request from
-                  </p>
-                  <div>
-                    <div
-                      aria-describedby="tippy-tooltip-5"
-                      class=""
-                      data-original-title="This is the site asking for your signature."
-                      data-tooltipped=""
-                      style="display: flex;"
-                      tabindex="0"
-                    >
-                      <span
-                        class="mm-box mm-icon mm-icon--size-sm mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-icon-muted"
-                        style="mask-image: url('./images/icons/question.svg');"
-                      />
-                    </div>
+                    <span
+                      class="mm-box mm-icon mm-icon--size-sm mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-icon-muted"
+                      style="mask-image: url('./images/icons/question.svg');"
+                    />
                   </div>
                 </div>
-                <div
-                  class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+              </div>
+              <div
+                class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+              >
+                <p
+                  class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
                 >
-                  <p
-                    class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
-                  >
-                    metamask.github.io
-                  </p>
-                </div>
+                  metamask.github.io
+                </p>
               </div>
             </div>
             <div
-              class="mm-box mm-box--padding-inline-2"
+              class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
+              style="overflow-wrap: anywhere; min-height: 24px;"
             >
               <div
-                class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
-                style="overflow-wrap: anywhere; min-height: 24px;"
+                class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
               >
-                <div
-                  class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+                <p
+                  class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
                 >
-                  <p
-                    class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
-                  >
-                    Interacting with
-                  </p>
-                </div>
+                  Interacting with
+                </p>
+              </div>
+              <div
+                class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
+              >
                 <div
                   class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
                 >
                   <div
-                    class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
+                    class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
                   >
                     <div
-                      class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+                      class="mm-avatar-account__jazzicon"
                     >
                       <div
-                        class="mm-avatar-account__jazzicon"
+                        style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(1, 142, 116);"
                       >
-                        <div
-                          style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(1, 142, 116);"
+                        <svg
+                          height="16"
+                          width="16"
+                          x="0"
+                          y="0"
                         >
-                          <svg
+                          <rect
+                            fill="#FB1891"
                             height="16"
+                            transform="translate(0.6335263099240563 1.7352552986765108) rotate(129.9 8 8)"
                             width="16"
                             x="0"
                             y="0"
-                          >
-                            <rect
-                              fill="#FB1891"
-                              height="16"
-                              transform="translate(0.6335263099240563 1.7352552986765108) rotate(129.9 8 8)"
-                              width="16"
-                              x="0"
-                              y="0"
-                            />
-                            <rect
-                              fill="#F90901"
-                              height="16"
-                              transform="translate(-5.227286615169763 8.640359200885621) rotate(141.5 8 8)"
-                              width="16"
-                              x="0"
-                              y="0"
-                            />
-                            <rect
-                              fill="#F26A02"
-                              height="16"
-                              transform="translate(10.585940898259892 -4.814122444807073) rotate(339.2 8 8)"
-                              width="16"
-                              x="0"
-                              y="0"
-                            />
-                          </svg>
-                        </div>
+                          />
+                          <rect
+                            fill="#F90901"
+                            height="16"
+                            transform="translate(-5.227286615169763 8.640359200885621) rotate(141.5 8 8)"
+                            width="16"
+                            x="0"
+                            y="0"
+                          />
+                          <rect
+                            fill="#F26A02"
+                            height="16"
+                            transform="translate(10.585940898259892 -4.814122444807073) rotate(339.2 8 8)"
+                            width="16"
+                            x="0"
+                            y="0"
+                          />
+                        </svg>
                       </div>
                     </div>
-                    <p
-                      class="mm-box mm-text mm-text--body-md mm-box--margin-left-2 mm-box--color-inherit"
-                      data-testid="confirm-info-row-display-name"
-                    >
-                      0xCcCCc...ccccC
-                    </p>
                   </div>
+                  <p
+                    class="mm-box mm-text mm-text--body-md mm-box--margin-left-2 mm-box--color-inherit"
+                    data-testid="confirm-info-row-display-name"
+                  >
+                    0xCcCCc...ccccC
+                  </p>
                 </div>
               </div>
             </div>