From 12c0a8d1d556b40e03edf5bb10c714480273dfe8 Mon Sep 17 00:00:00 2001
From: Dan J Miller <danjm.com@gmail.com>
Date: Wed, 21 Sep 2022 13:52:36 -0230
Subject: [PATCH] Fix display of edit button on confirm screen when sending tx
 with data to contract (#15812)

---
 .../confirm-contract-interaction.js           | 34 +++++++++++++++++++
 .../confirm-contract-interaction/index.js     |  1 +
 .../confirm-transaction.component.js          |  4 +--
 3 files changed, 37 insertions(+), 2 deletions(-)
 create mode 100644 ui/pages/confirm-contract-interaction/confirm-contract-interaction.js
 create mode 100644 ui/pages/confirm-contract-interaction/index.js

diff --git a/ui/pages/confirm-contract-interaction/confirm-contract-interaction.js b/ui/pages/confirm-contract-interaction/confirm-contract-interaction.js
new file mode 100644
index 000000000000..98be8bc3bac8
--- /dev/null
+++ b/ui/pages/confirm-contract-interaction/confirm-contract-interaction.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { useHistory } from 'react-router-dom';
+import ConfirmTransactionBase from '../confirm-transaction-base';
+
+import { SEND_ROUTE } from '../../helpers/constants/routes';
+import { editExistingTransaction } from '../../ducks/send';
+
+import { clearConfirmTransaction } from '../../ducks/confirm-transaction/confirm-transaction.duck';
+import { ASSET_TYPES } from '../../../shared/constants/transaction';
+
+export default function ConfirmContractInteraction() {
+  const dispatch = useDispatch();
+  const history = useHistory();
+
+  const handleEditTransaction = async ({ txData }) => {
+    const { id } = txData;
+    await dispatch(editExistingTransaction(ASSET_TYPES.NATIVE, id.toString()));
+    dispatch(clearConfirmTransaction());
+  };
+
+  const handleEdit = (confirmTransactionData) => {
+    handleEditTransaction(confirmTransactionData).then(() => {
+      history.push(SEND_ROUTE);
+    });
+  };
+
+  return (
+    <ConfirmTransactionBase
+      actionKey="confirm"
+      onEdit={(confirmTransactionData) => handleEdit(confirmTransactionData)}
+    />
+  );
+}
diff --git a/ui/pages/confirm-contract-interaction/index.js b/ui/pages/confirm-contract-interaction/index.js
new file mode 100644
index 000000000000..01ff97ab145c
--- /dev/null
+++ b/ui/pages/confirm-contract-interaction/index.js
@@ -0,0 +1 @@
+export { default } from './confirm-contract-interaction';
diff --git a/ui/pages/confirm-transaction/confirm-transaction.component.js b/ui/pages/confirm-transaction/confirm-transaction.component.js
index fb853741f45e..abb17112c4be 100644
--- a/ui/pages/confirm-transaction/confirm-transaction.component.js
+++ b/ui/pages/confirm-transaction/confirm-transaction.component.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Switch, Route } from 'react-router-dom';
 import Loading from '../../components/ui/loading-screen';
 import ConfirmTransactionSwitch from '../confirm-transaction-switch';
-import ConfirmTransactionBase from '../confirm-transaction-base';
+import ConfirmContractInteraction from '../confirm-contract-interaction';
 import ConfirmSendEther from '../confirm-send-ether';
 import ConfirmDeployContract from '../confirm-deploy-contract';
 import ConfirmDecryptMessage from '../confirm-decrypt-message';
@@ -180,7 +180,7 @@ export default class ConfirmTransaction extends Component {
         <Route
           exact
           path={`${CONFIRM_TRANSACTION_ROUTE}/:id?${CONFIRM_TOKEN_METHOD_PATH}`}
-          component={ConfirmTransactionBase}
+          component={ConfirmContractInteraction}
         />
         <Route
           exact