feat: show paymaster address in redesigned contract interaction (#25396)

Display the paymaster address in the contract interaction confirmation.
Replace duplicate `Box` usages with new `ConfirmInfoSection` component.
Add stories for the full contract interaction confirmation page for easier testing.
Create selectors to retrieve paymaster data and address by user operation ID.
Rename `AlertRow` to `ConfirmInfoAlertRow`.

.storybook/main.js

@@ -26,6 +26,10 @@ module.exports = {
     '@storybook/addon-designs',
   ],
   staticDirs: ['../app', './images'],
+  env: (config) => ({
+    ...config,
+    ENABLE_CONFIRMATION_REDESIGN: true,
+  }),
   // Uses babel.config.js settings and prevents "Missing class properties transform" error
   babel: async (options) => ({
     overrides: options.overrides,

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';
 

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"

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>
 `;

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>
+`;

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';
 

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}

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;

ui/components/app/confirm/info/row/divider.tsx

@@ -6,6 +6,9 @@ export const ConfirmInfoRowDivider: React.FC = () => {
       style={{
         height: '1px',
         backgroundColor: 'var(--color-border-muted)',
+        // Ignore the padding from the section.
+        marginLeft: '-8px',
+        marginRight: '-8px',
       }}
     ></div>
   );

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;

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

ui/components/app/confirm/info/row/section.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Box } from '../../../../component-library';
+import {
+  BackgroundColor,
+  BorderRadius,
+} from '../../../../../helpers/constants/design-system';
+
+export type ConfirmInfoSectionProps = {
+  children: React.ReactNode | string;
+  noPadding?: boolean;
+};
+
+export const ConfirmInfoSection = ({
+  children,
+  noPadding,
+}: ConfirmInfoSectionProps) => {
+  return (
+    <Box
+      backgroundColor={BackgroundColor.backgroundDefault}
+      borderRadius={BorderRadius.MD}
+      padding={noPadding ? 0 : 2}
+      marginBottom={4}
+    >
+      {children}
+    </Box>
+  );
+};

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;