feat: update header footer and title components (#24168)

## **Description** Updates footer, header and title files to accept transaction confirmations [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/24168?quickstart=1) ## **Related issues** Fixes: #23950 ## **Manual testing steps** 1. Go to this page... 2. 3. ## **Screenshots/Recordings**  ### **Before**  ### **After**  ## **Pre-merge author checklist** - [ ] I’ve followed [MetaMask Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [ ] I've completed the PR template to the best of my ability - [ ] I’ve included tests if applicable - [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [ ] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.
MetaMask · Apr 26, 2024 · f9f4b7b · f9f4b7b
1 parent e349567
commit f9f4b7b
Show file tree

Hide file tree

Showing 18 changed files with 361 additions and 111 deletions.
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
diff --git a/test/data/confirmations/contract-interaction.ts b/test/data/confirmations/contract-interaction.ts
@@ -1,5 +1,12 @@
-export const unapprovedContractInteractionConfirmation = {
-  actionId: 400855682,
+import { TransactionStatus, TransactionType } from "@metamask/transaction-controller";
+import { Confirmation } from "../../../ui/pages/confirmations/types/confirm";
+
+export const CONTRACT_INTERACTION_SENDER_ADDRESS = '0x2e0d7e8c45221fca00d74a3609a0f7097035d09b';
+
+export const genUnapprovedContractInteractionConfirmation = (
+  { address } = { address: CONTRACT_INTERACTION_SENDER_ADDRESS }
+): Confirmation => ({
+  actionId: String(400855682),
   chainId: '0xaa36a7',
   dappSuggestedGasFees: {
     gas: '0xab77',
@@ -13,7 +20,7 @@ export const unapprovedContractInteractionConfirmation = {
   gasFeeEstimatesLoaded: true,
   history: [
     {
-      actionId: 400855682,
+      actionId: String(400855682),
       chainId: '0xaa36a7',
       dappSuggestedGasFees: {
         gas: '0xab77',
@@ -29,21 +36,20 @@ export const unapprovedContractInteractionConfirmation = {
       securityAlertResponse: {
         reason: 'loading',
         result_type: 'validation_in_progress',
-        securityAlertId: '3435e60e-3252-4372-8b33-00b673adf0b1',
       },
       sendFlowHistory: [],
-      status: 'unapproved',
+      status: TransactionStatus.unapproved,
       time: 1713534772044,
       txParams: {
         data: '0xd0e30db0',
-        from: '0x2e0d7e8c45221fca00d74a3609a0f7097035d09b',
+        from: address,
         gas: '0xab77',
         maxFeePerGas: '0xaa350353',
         maxPriorityFeePerGas: '0x59682f00',
         to: '0x88aa6343307ec9a652ccddda3646e62b2f1a5125',
         value: '0x3782dace9d900000',
       },
-      type: 'contractInteraction',
+      type: TransactionType.contractInteraction,
       userEditedGasLimit: false,
       userFeeLevel: 'medium',
       verifiedOnBlockchain: false,
@@ -103,12 +109,9 @@ export const unapprovedContractInteractionConfirmation = {
   id: '1d7c08c0-fe54-11ee-9243-91b1e533746a',
   origin: 'https://metamask.github.io',
   securityAlertResponse: {
-    block: 5732063,
-    description: '',
     features: [],
     reason: '',
     result_type: 'Benign',
-    securityAlertId: '3435e60e-3252-4372-8b33-00b673adf0b1',
   },
   sendFlowHistory: [],
   simulationData: {
@@ -120,19 +123,19 @@ export const unapprovedContractInteractionConfirmation = {
     },
     tokenBalanceChanges: [],
   },
-  status: 'unapproved',
+  status: TransactionStatus.unapproved,
   time: 1713534772044,
   txParams: {
     data: '0xd0e30db0',
-    from: '0x2e0d7e8c45221fca00d74a3609a0f7097035d09b',
+    from: address,
     gas: '0xab77',
     maxFeePerGas: '0xaa350353',
     maxPriorityFeePerGas: '0x59682f00',
     to: '0x88aa6343307ec9a652ccddda3646e62b2f1a5125',
     value: '0x3782dace9d900000',
   },
-  type: 'contractInteraction',
+  type: TransactionType.contractInteraction,
   userEditedGasLimit: false,
   userFeeLevel: 'medium',
   verifiedOnBlockchain: false,
-};
+});
diff --git a/test/data/confirmations/personal_sign.ts b/test/data/confirmations/personal_sign.ts
@@ -1,11 +1,13 @@
+export const PERSONAL_SIGN_SENDER_ADDRESS = '0x8eeee1781fd885ff5ddef7789486676961873d12';
+
 export const unapprovedPersonalSignMsg = {
   id: '0050d5b0-c023-11ee-a0cb-3390a510a0ab',
   status: 'unapproved',
   time: new Date().getTime(),
   type: 'personal_sign',
   securityProviderResponse: null,
   msgParams: {
-    from: '0x8eeee1781fd885ff5ddef7789486676961873d12',
+    from: PERSONAL_SIGN_SENDER_ADDRESS,
     data: '0x4578616d706c652060706572736f6e616c5f7369676e60206d657373616765',
     origin: 'https://metamask.github.io',
     siwe: { isSIWEMessage: false, parsedMessage: null },

diff --git a/ui/pages/confirmations/components/confirm/footer/__snapshots__/footer.test.tsx.snap b/ui/pages/confirmations/components/confirm/footer/__snapshots__/footer.test.tsx.snap
@@ -1,6 +1,26 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ConfirmFooter should match snapshot 1`] = `
+exports[`ConfirmFooter should match snapshot with signature confirmation 1`] = `
+<div>
+  <div
+    class="mm-box multichain-page-footer confirm-footer_page-footer mm-box--padding-4 mm-box--display-flex mm-box--gap-4 mm-box--width-full"
+  >
+    <button
+      class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block mm-button-secondary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-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-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
+    >
+      Cancel
+    </button>
+    <button
+      class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block mm-button-primary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
+      data-testid="confirm-footer-confirm-button"
+    >
+      Confirm
+    </button>
+  </div>
+</div>
+`;
+
+exports[`ConfirmFooter should match snapshot with transaction confirmation 1`] = `
 <div>
   <div
     class="mm-box multichain-page-footer confirm-footer_page-footer mm-box--padding-4 mm-box--display-flex mm-box--gap-4 mm-box--width-full"

diff --git a/ui/pages/confirmations/components/confirm/footer/footer.test.tsx b/ui/pages/confirmations/components/confirm/footer/footer.test.tsx
@@ -1,14 +1,15 @@
 import React from 'react';
-import mockState from '../../../../../../test/data/mock-state.json';
-import { fireEvent, renderWithProvider } from '../../../../../../test/jest';
-import * as Actions from '../../../../../store/actions';
-import configureStore from '../../../../../store/store';
 import {
   LedgerTransportTypes,
   WebHIDConnectedStatuses,
 } from '../../../../../../shared/constants/hardware-wallets';
+import { genUnapprovedContractInteractionConfirmation } from '../../../../../../test/data/confirmations/contract-interaction';
+import { unapprovedPersonalSignMsg } from '../../../../../../test/data/confirmations/personal_sign';
+import mockState from '../../../../../../test/data/mock-state.json';
+import { fireEvent, renderWithProvider } from '../../../../../../test/jest';
 import * as MMIConfirmations from '../../../../../hooks/useMMIConfirmations';
-
+import * as Actions from '../../../../../store/actions';
+import configureStore from '../../../../../store/store';
 import Footer from './footer';
 
 jest.mock('react-redux', () => ({
@@ -36,8 +37,23 @@ const render = (args = {}) => {
 };
 
 describe('ConfirmFooter', () => {
-  it('should match snapshot', () => {
-    const { container } = render();
+  it('should match snapshot with signature confirmation', () => {
+    const { container } = render({
+      confirm: {
+        currentConfirmation: unapprovedPersonalSignMsg,
+        isScrollToBottomNeeded: false,
+      },
+    });
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should match snapshot with transaction confirmation', () => {
+    const { container } = render({
+      confirm: {
+        currentConfirmation: genUnapprovedContractInteractionConfirmation(),
+        isScrollToBottomNeeded: false,
+      },
+    });
     expect(container).toMatchSnapshot();
   });
 

diff --git a/ui/pages/confirmations/components/confirm/footer/footer.tsx b/ui/pages/confirmations/components/confirm/footer/footer.tsx
@@ -1,7 +1,6 @@
+import { ethErrors, serializeError } from 'eth-rpc-errors';
 import React, { useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { ethErrors, serializeError } from 'eth-rpc-errors';
-// import { TransactionMeta } from '@metamask/transaction-controller';
 import {
   Button,
   ButtonSize,
@@ -18,7 +17,7 @@ import {
   resolvePendingApproval,
 } from '../../../../../store/actions';
 import { confirmSelector } from '../../../selectors';
-import { SignatureRequestType } from '../../../types/confirm';
+import { getConfirmationSender } from '../utils';
 
 const Footer = () => {
   const t = useI18nContext();
@@ -28,14 +27,8 @@ const Footer = () => {
   const { mmiOnSignCallback, mmiSubmitDisabled } = useMMIConfirmations();
   ///: END:ONLY_INCLUDE_IF
 
-  const msgParams = (currentConfirmation as SignatureRequestType)?.msgParams;
-  // const { txParams } = currentConfirmation as TransactionMeta;
+  const { from } = getConfirmationSender(currentConfirmation);
 
-  let from: string | undefined;
-  // todo: extend to other confirmation types
-  if (msgParams) {
-    from = msgParams.from;
-  }
   const hardwareWalletRequiresConnection = useSelector((state) => {
     if (from) {
       return doesAddressRequireLedgerHidConnection(state, from);

diff --git a/ui/pages/confirmations/components/confirm/header/__snapshots__/header.test.tsx.snap b/ui/pages/confirmations/components/confirm/header/__snapshots__/header.test.tsx.snap
@@ -1,6 +1,113 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Header should match snapshot 1`] = `
+exports[`Header should match snapshot with signature confirmation 1`] = `
+<div>
+  <div
+    class="mm-box confirm_header__wrapper mm-box--display-flex mm-box--justify-content-space-between mm-box--align-items-center"
+  >
+    <div
+      class="mm-box mm-box--padding-4 mm-box--display-flex mm-box--align-items-flex-start"
+    >
+      <div
+        class="mm-box mm-box--margin-top-2 mm-box--display-flex"
+      >
+        <div
+          class=""
+        >
+          <div
+            class="identicon"
+            style="height: 32px; width: 32px; border-radius: 16px;"
+          >
+            <div
+              style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 32px; height: 32px; display: inline-block; background: rgb(3, 73, 94);"
+            >
+              <svg
+                height="32"
+                width="32"
+                x="0"
+                y="0"
+              >
+                <rect
+                  fill="#FB184D"
+                  height="32"
+                  transform="translate(-0.010232866814926739 -2.467961361206475) rotate(274.3 16 16)"
+                  width="32"
+                  x="0"
+                  y="0"
+                />
+                <rect
+                  fill="#1888F2"
+                  height="32"
+                  transform="translate(0.7019171336752298 13.759175028660584) rotate(203.5 16 16)"
+                  width="32"
+                  x="0"
+                  y="0"
+                />
+                <rect
+                  fill="#FA8900"
+                  height="32"
+                  transform="translate(28.820219003567207 11.830135279564011) rotate(192.7 16 16)"
+                  width="32"
+                  x="0"
+                  y="0"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+        <div
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network 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"
+        >
+          C
+        </div>
+      </div>
+      <div
+        class="mm-box mm-box--margin-inline-start-4"
+      >
+        <p
+          class="mm-box mm-text mm-text--body-md-medium mm-box--color-text-default"
+        />
+        <p
+          class="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
+        >
+          Chain 5
+        </p>
+      </div>
+    </div>
+    <div
+      class="mm-box mm-box--padding-4 mm-box--display-flex mm-box--align-items-flex-end"
+    >
+      <div
+        class="mm-box mm-box--display-flex mm-box--justify-content-flex-end"
+        style="align-self: flex-end;"
+      >
+        <div>
+          <div
+            aria-describedby="tippy-tooltip-1"
+            class=""
+            data-original-title="Account details"
+            data-tooltipped=""
+            style="display: inline;"
+            tabindex="0"
+          >
+            <button
+              aria-label="Account details"
+              class="mm-box mm-button-icon mm-button-icon--size-md mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
+            >
+              <span
+                class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-inherit"
+                style="mask-image: url('./images/icons/info.svg');"
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Header should match snapshot with transaction confirmation 1`] = `
 <div>
   <div
     class="mm-box confirm_header__wrapper mm-box--display-flex mm-box--justify-content-space-between mm-box--align-items-center"
@@ -58,7 +165,7 @@ exports[`Header should match snapshot 1`] = `
         <div
           class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network 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"
         >
-          C
+          ?
         </div>
       </div>
       <div
@@ -71,9 +178,7 @@ exports[`Header should match snapshot 1`] = `
         </p>
         <p
           class="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
-        >
-          Chain 5
-        </p>
+        />
       </div>
     </div>
     <div
@@ -85,7 +190,7 @@ exports[`Header should match snapshot 1`] = `
       >
         <div>
           <div
-            aria-describedby="tippy-tooltip-1"
+            aria-describedby="tippy-tooltip-2"
             class=""
             data-original-title="Account details"
             data-tooltipped=""