chore: MMI adds note to trader support to the new Tx confirmation view

app/scripts/controllers/app-state.js

@@ -531,6 +531,12 @@ export default class AppStateController extends EventEmitter {
     });
   }
 
+  setNoteToTraderMessage(message) {
+    this.store.updateState({
+      noteToTraderMessage: message,
+    });
+  }
+
   ///: END:ONLY_INCLUDE_IF
 
   getSignatureSecurityAlertResponse(securityAlertId) {

app/scripts/controllers/app-state.test.js

@@ -374,5 +374,24 @@ describe('AppStateController', () => {
 
       updateStateSpy.mockRestore();
     });
+
+    it('set the setNoteToTraderMessage with a message', () => {
+      appStateController = createAppStateController();
+      const updateStateSpy = jest.spyOn(
+        appStateController.store,
+        'updateState',
+      );
+
+      const mockParams = 'some message';
+
+      appStateController.setNoteToTraderMessage(mockParams);
+
+      expect(updateStateSpy).toHaveBeenCalledTimes(1);
+      expect(updateStateSpy).toHaveBeenCalledWith({
+        noteToTraderMessage: mockParams,
+      });
+
+      updateStateSpy.mockRestore();
+    });
   });
 });

app/scripts/metamask-controller.js

@@ -3614,6 +3614,8 @@ export default class MetamaskController extends EventEmitter {
         ),
       setCustodianDeepLink:
         appStateController.setCustodianDeepLink.bind(appStateController),
+      setNoteToTraderMessage:
+        appStateController.setNoteToTraderMessage.bind(appStateController),
       ///: END:ONLY_INCLUDE_IF
 
       // snaps

test/e2e/playwright/mmi/specs/extension.visual.spec.ts

@@ -152,13 +152,12 @@ test.describe('MMI extension', () => {
     await accountsPopup.connectCustodian(
       process.env.MMI_E2E_CUSTODIAN_NAME as string,
     );
-
     const accountNamesWithCustodian = await accountsPopup.getAccountNames();
 
-    expect(
-      JSON.stringify(accountNamesWithCustodian) ===
-        JSON.stringify(arrayWithCustodianAccounts),
-    ).toBeTruthy();
+    const containsAccount = arrayWithCustodianAccounts.some((account) =>
+      accountNamesWithCustodian.includes(account),
+    );
+    expect(containsAccount).toBeTruthy();
 
     await accountsPopup.selectCustodyAccount(accountFrom);
     // Check remove custodian token screen (aborted before removed)

ui/components/institutional/note-to-trader/__snapshots__/note-to-trader.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`NoteToTrader should render the Note to trader component 1`] = `
 <div>
   <div
-    class="mm-box confirm-page-container-content__data"
+    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 mm-box--padding-4 mm-box--display-flex mm-box--flex-direction-column"
@@ -20,7 +20,7 @@ exports[`NoteToTrader should render the Note to trader component 1`] = `
         <p
           class="mm-box mm-text note-header__counter mm-text--body-md mm-box--color-text-default"
         >
-          9
+          0
           /
           280
         </p>
@@ -29,13 +29,13 @@ exports[`NoteToTrader should render the Note to trader component 1`] = `
         class="mm-box note-field mm-box--display-flex mm-box--flex-direction-column"
       >
         <textarea
+          class="mm-box mm-text mm-textarea mm-textarea--resize-vertical mm-text--body-md mm-box--padding-2 mm-box--padding-top-1 mm-box--padding-right-4 mm-box--padding-bottom-1 mm-box--padding-left-4 mm-box--width-full mm-box--height-full mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-sm mm-box--border-color-border-default mm-box--border-width-1 box--border-style-solid"
           data-testid="transaction-note"
           id="transaction-note"
           maxlength="280"
-          placeholder=""
-        >
-          some text
-        </textarea>
+          placeholder="The approver will see this note when approving the transaction at the custodian."
+          resize="vertical"
+        />
       </div>
     </div>
   </div>

ui/components/institutional/note-to-trader/note-to-trader-tabbed.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import {
+  Display,
+  FlexDirection,
+  JustifyContent,
+} from '../../../helpers/constants/design-system';
+import { Label, Box, Text } from '../../component-library';
+
+type NoteToTraderProps = {
+  placeholder: string;
+  maxLength: number;
+  onChange: (value: string) => void;
+  noteText: string;
+  labelText: string;
+};
+
+const TabbedNoteToTrader: React.FC<NoteToTraderProps> = ({
+  placeholder,
+  maxLength,
+  onChange,
+  noteText,
+  labelText,
+}) => {
+  return (
+    <Box className="confirm-page-container-content__data">
+      <Box
+        display={Display.Flex}
+        flexDirection={FlexDirection.Column}
+        padding={4}
+      >
+        <Box
+          className="note-header"
+          display={Display.Flex}
+          justifyContent={JustifyContent.spaceBetween}
+        >
+          <Label htmlFor="transaction-note">{labelText}</Label>
+          <Text className="note-header__counter">
+            {noteText.length}/{maxLength}
+          </Text>
+        </Box>
+        <Box
+          display={Display.Flex}
+          flexDirection={FlexDirection.Column}
+          className="note-field"
+        >
+          <textarea
+            id="transaction-note"
+            data-testid="transaction-note"
+            onChange={({ target: { value } }) => onChange(value)}
+            autoFocus
+            maxLength={maxLength}
+            placeholder={placeholder}
+            value={noteText}
+          />
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default TabbedNoteToTrader;

ui/components/institutional/note-to-trader/note-to-trader.stories.tsx

@@ -1,9 +1,23 @@
 import React from 'react';
+import { Meta } from '@storybook/react';
+import { Provider } from 'react-redux';
 import NoteToTrader from '.';
+import { getMockContractInteractionConfirmState } from '../../../../test/data/confirmations/helper';
+import configureStore from '../../../store/store';
+import { ConfirmContextProvider } from '../../../pages/confirmations/context/confirm';
+
+const store = configureStore(getMockContractInteractionConfirmState());
 
 export default {
   title: 'Components/Institutional/NoteToTrader',
   component: NoteToTrader,
+  decorators: [
+    (story: () => Meta<typeof NoteToTrader>) => (
+      <Provider store={store}>
+        <ConfirmContextProvider>{story()}</ConfirmContextProvider>
+      </Provider>
+    ),
+  ],
   args: {
     placeholder:
       'The approver will see this note when approving the transaction at the custodian.',

ui/components/institutional/note-to-trader/note-to-trader.test.tsx

@@ -1,24 +1,31 @@
-import { render, fireEvent } from '@testing-library/react';
+import { fireEvent } from '@testing-library/react';
 import React from 'react';
+import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import { renderWithConfirmContextProvider } from '../../../../test/lib/confirmations/render-helpers';
+import mockState from '../../../../test/data/mock-state.json';
 import NoteToTrader from './note-to-trader';
 
+jest.mock('../../../selectors/institutional/selectors', () => ({
+  getIsNoteToTraderSupported: () => true,
+}));
+
+const middleware = [thunk];
+const store = configureMockStore(middleware)(mockState);
+
 describe('NoteToTrader', () => {
   it('should render the Note to trader component', () => {
-    const props = {
-      placeholder: '',
-      maxLength: 280,
-      noteText: 'some text',
-      labelText: 'Transaction note',
-      onChange: jest.fn(),
-    };
+    const { getByTestId, container } = renderWithConfirmContextProvider(
+      <NoteToTrader />,
+      store,
+    );
 
-    const { getByTestId, container } = render(<NoteToTrader {...props} />);
     const transactionNoteInput = getByTestId(
       'transaction-note',
     ) as HTMLInputElement;
 
     fireEvent.change(transactionNoteInput);
-    expect(transactionNoteInput.value).toBe('some text');
+    expect(transactionNoteInput.value).toBe('');
     expect(transactionNoteInput).toBeDefined();
     expect(container).toMatchSnapshot();
   });

ui/components/institutional/note-to-trader/note-to-trader.tsx

@@ -1,28 +1,54 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import {
+  BackgroundColor,
+  BlockSize,
+  BorderRadius,
   Display,
   FlexDirection,
   JustifyContent,
 } from '../../../helpers/constants/design-system';
 import { Label, Box, Text } from '../../component-library';
+import { Textarea } from '../../component-library/textarea';
+import { setNoteToTraderMessage } from '../../../store/institutional/institution-background';
+import {
+  getIsNoteToTraderSupported,
+  State,
+} from '../../../selectors/institutional/selectors';
+import { toChecksumHexAddress } from '../../../../shared/modules/hexstring-utils';
+import { useConfirmContext } from '../../../pages/confirmations/context/confirm';
+import { getConfirmationSender } from '../../../pages/confirmations/components/confirm/utils';
+import { useI18nContext } from '../../../hooks/useI18nContext';
+import { isSignatureTransactionType } from '../../../pages/confirmations/utils';
 
-type NoteToTraderProps = {
-  placeholder: string;
-  maxLength: number;
-  onChange: (value: string) => void;
-  noteText: string;
-  labelText: string;
-};
+const NoteToTrader: React.FC = () => {
+  const dispatch = useDispatch();
+  const t = useI18nContext();
+  const [noteText, setNoteText] = useState('');
+
+  const { currentConfirmation } = useConfirmContext();
+  const isSignature = isSignatureTransactionType(currentConfirmation);
+  const { from } = getConfirmationSender(currentConfirmation);
+  const fromChecksumHexAddress = toChecksumHexAddress(from || '');
+  const isNoteToTraderSupported = useSelector((state: State) =>
+    getIsNoteToTraderSupported(state, fromChecksumHexAddress),
+  );
 
-const NoteToTrader: React.FC<NoteToTraderProps> = ({
-  placeholder,
-  maxLength,
-  onChange,
-  noteText,
-  labelText,
-}) => {
-  return (
-    <Box className="confirm-page-container-content__data">
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      dispatch(setNoteToTraderMessage(noteText));
+    }, 700);
+
+    return () => clearTimeout(timer);
+  }, [noteText]);
+
+  return isNoteToTraderSupported && !isSignature ? (
+    <Box
+      backgroundColor={BackgroundColor.backgroundDefault}
+      borderRadius={BorderRadius.MD}
+      padding={0}
+      marginBottom={4}
+    >
       <Box
         display={Display.Flex}
         flexDirection={FlexDirection.Column}
@@ -33,29 +59,31 @@ const NoteToTrader: React.FC<NoteToTraderProps> = ({
           display={Display.Flex}
           justifyContent={JustifyContent.spaceBetween}
         >
-          <Label htmlFor="transaction-note">{labelText}</Label>
+          <Label htmlFor="transaction-note">{t('transactionNote')}</Label>
           <Text className="note-header__counter">
-            {noteText.length}/{maxLength}
+            {noteText.length}/{280}
           </Text>
         </Box>
         <Box
           display={Display.Flex}
           flexDirection={FlexDirection.Column}
           className="note-field"
         >
-          <textarea
+          <Textarea
             id="transaction-note"
             data-testid="transaction-note"
-            onChange={({ target: { value } }) => onChange(value)}
-            autoFocus
-            maxLength={maxLength}
-            placeholder={placeholder}
+            onChange={({ target: { value } }) => setNoteText(value)}
             value={noteText}
+            height={BlockSize.Full}
+            width={BlockSize.Full}
+            maxLength={280}
+            placeholder={t('notePlaceholder')}
+            padding={2}
           />
         </Box>
       </Box>
     </Box>
-  );
+  ) : null;
 };
 
 export default NoteToTrader;

ui/hooks/useMMIConfirmations.ts

@@ -20,7 +20,9 @@ export function useMMIConfirmations() {
         currentConfirmation.type === TransactionType.signTypedData) &&
       Boolean(currentConfirmation?.custodyId),
     mmiOnSignCallback: () => custodySignFn(currentConfirmation),
-    mmiOnTransactionCallback: () =>
-      custodyTransactionFn(currentConfirmation as TransactionMeta),
+    mmiOnTransactionCallback: (
+      transactionData: TransactionMeta,
+      noteToTraderMessage: string,
+    ) => custodyTransactionFn(transactionData, noteToTraderMessage),
   };
 }

ui/hooks/useMMICustodySendTransaction.test.js

@@ -7,7 +7,7 @@ import { useMMICustodySendTransaction } from './useMMICustodySendTransaction';
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
-  useHistory: jest.fn(),
+  useHistory: jest.fn().mockReturnValue({ push: jest.fn() }),
 }));
 
 jest.mock('react-redux', () => ({
@@ -23,14 +23,20 @@ jest.mock('../store/institutional/institution-background', () => ({
   mmiActionsFactory: jest.fn(),
 }));
 
-jest.mock('../selectors', () => ({
-  getAccountType: jest.fn(),
-}));
-
 jest.mock('../store/actions', () => ({
   updateAndApproveTx: jest.fn(),
 }));
 
+jest.mock('../pages/confirmations/context/confirm', () => ({
+  useConfirmContext: () => ({
+    currentConfirmation: { from: '0x123' },
+  }),
+}));
+
+jest.mock('../pages/confirmations/components/confirm/utils', () => ({
+  getConfirmationSender: () => ({ from: '0x123' }),
+}));
+
 describe('useMMICustodySendTransaction', () => {
   it('handles custody account type', async () => {
     const dispatch = jest.fn();