Fix display of edit button on confirm screen when sending tx with data to contract (#15812)

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

ui/pages/confirm-contract-interaction/index.js

@@ -0,0 +1 @@
+export { default } from './confirm-contract-interaction';

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