Fix #24322 - Disable edits for all dapp initiated transactions (#24334)

## **Description**

Ensures only transactions started within MetaMask are editable	

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/24334?quickstart=1)

## **Related issues**

Fixes: #24322

## **Manual testing steps**

1. Go to the test dapp (https://metamask.github.io/test-dapp/)
2. Trigger any number of transactions
3. Do not see "Edit" in header
4. Open MetaMask, manually start a send, see the "Edit" button

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **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.

---------

Co-authored-by: Dan J Miller <[email protected]>

test/e2e/tests/dapp-interactions/dapp-tx-edit.spec.js

@@ -56,7 +56,7 @@ describe('Editing confirmations of dapp initiated contract interactions', functi
     );
   });
 
-  it('should show an edit button on a simple ETH send initiated by a dapp', async function () {
+  it('should NOT show an edit button on a simple ETH send initiated by a dapp', async function () {
     await withFixtures(
       {
         dapp: true,
@@ -88,8 +88,8 @@ describe('Editing confirmations of dapp initiated contract interactions', functi
         );
         assert.equal(
           editTransactionButton,
-          true,
-          `Edit transaction button should be visible on a contract interaction created by a dapp`,
+          false,
+          `Edit transaction button should not be visible on a simple send transaction created by a dapp`,
         );
       },
     );

ui/pages/confirmations/components/confirm-page-container/confirm-page-container-header/confirm-page-container-header.component.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import {
   ENVIRONMENT_TYPE_POPUP,
   ENVIRONMENT_TYPE_NOTIFICATION,
+  ORIGIN_METAMASK,
 } from '../../../../../../shared/constants/app';
 import { getEnvironmentType } from '../../../../../../app/scripts/lib/util';
 import NetworkDisplay from '../../../../../components/app/network-display';
@@ -18,6 +19,7 @@ export default function ConfirmPageContainerHeader({
   accountAddress,
   showAccountInHeader,
   children,
+  origin,
 }) {
   const t = useI18nContext();
   const windowType = getEnvironmentType();
@@ -48,21 +50,23 @@ export default function ConfirmPageContainerHeader({
             <AccountMismatchWarning address={accountAddress} />
           </div>
         ) : (
-          <div
-            className="confirm-page-container-header__back-button-container"
-            style={{
-              visibility: showEdit ? 'initial' : 'hidden',
-            }}
-          >
-            <Icon name={IconName.ArrowLeft} />
-            <span
-              data-testid="confirm-page-back-edit-button"
-              className="confirm-page-container-header__back-button"
-              onClick={() => onEdit()}
+          origin === ORIGIN_METAMASK && (
+            <div
+              className="confirm-page-container-header__back-button-container"
+              style={{
+                visibility: showEdit ? 'initial' : 'hidden',
+              }}
             >
-              {t('edit')}
-            </span>
-          </div>
+              <Icon name={IconName.ArrowLeft} />
+              <span
+                data-testid="confirm-page-back-edit-button"
+                className="confirm-page-container-header__back-button"
+                onClick={() => onEdit()}
+              >
+                {t('edit')}
+              </span>
+            </div>
+          )
         )}
         <NetworkDisplay />
       </div>
@@ -77,4 +81,5 @@ ConfirmPageContainerHeader.propTypes = {
   showEdit: PropTypes.bool,
   onEdit: PropTypes.func,
   children: PropTypes.node,
+  origin: PropTypes.string,
 };

ui/pages/confirmations/components/confirm-page-container/confirm-page-container-header/confirm-page-container-header.component.test.js

@@ -2,6 +2,7 @@ import React from 'react';
 import configureStore from 'redux-mock-store';
 import { NetworkStatus } from '@metamask/network-controller';
 import { NetworkType } from '@metamask/controller-utils';
+import { ORIGIN_METAMASK } from '../../../../../../shared/constants/app';
 import { renderWithProvider } from '../../../../../../test/lib/render-helpers';
 import { getEnvironmentType } from '../../../../../../app/scripts/lib/util';
 import ConfirmPageContainerHeader from '.';
@@ -38,6 +39,7 @@ describe('Confirm Detail Row Component', () => {
       onEdit: jest.fn(),
       showAccountInHeader: false,
       accountAddress: '0xmockAccountAddress',
+      origin: ORIGIN_METAMASK,
     };
 
     const { container } = renderWithProvider(
@@ -56,6 +58,7 @@ describe('Confirm Detail Row Component', () => {
       onEdit: jest.fn(),
       showAccountInHeader: false,
       accountAddress: '0xmockAccountAddress',
+      origin: ORIGIN_METAMASK,
     };
 
     const { container } = renderWithProvider(

ui/pages/confirmations/components/confirm-page-container/confirm-page-container.component.js

@@ -217,6 +217,7 @@ const ConfirmPageContainer = (props) => {
             onEdit={() => onEdit()}
             showAccountInHeader={showAccountInHeader}
             accountAddress={fromAddress}
+            origin={origin}
           >
             {hideSenderToRecipient ? null : (
               <SenderToRecipient

ui/pages/confirmations/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap

@@ -79,21 +79,6 @@ exports[`ConfirmSendEther should render correct information for for confirm send
       <div
         class="confirm-page-container-header__row"
       >
-        <div
-          class="confirm-page-container-header__back-button-container"
-          style="visibility: initial;"
-        >
-          <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/arrow-left.svg');"
-          />
-          <span
-            class="confirm-page-container-header__back-button"
-            data-testid="confirm-page-back-edit-button"
-          >
-            Edit
-          </span>
-        </div>
         <div
           class="network-display chip chip--with-left-icon chip--border-color-border-muted chip--background-color-undefined chip--max-content"
           data-testid="network-display"