Fix #17948 - Allow editing of NFT sends (#17970)

test/e2e/nft/send-nft.spec.js

@@ -47,6 +47,27 @@ describe('Send NFT', function () {
           '0xc427D562164062a23a5cFf596A4a3208e72Acd28',
         );
         await driver.clickElement({ text: 'Next', tag: 'button' });
+
+        // Edit the NFT, ensure same address, and move forward
+        await driver.isElementPresentAndVisible(
+          '[data-testid="confirm-page-back-edit-button"]',
+        );
+        await driver.clickElement(
+          '[data-testid="confirm-page-back-edit-button"]',
+        );
+
+        const recipient = await driver.findElement(
+          '.ens-input__selected-input__title',
+        );
+
+        assert.equal(
+          await recipient.getText(),
+          '0xc427d562164062a23a5cff596a4a3208e72acd28',
+        );
+
+        await driver.clickElement({ text: 'Next', tag: 'button' });
+
+        // Confirm the send
         await driver.clickElement({ text: 'Confirm', tag: 'button' });
 
         // When transaction complete, check the send NFT is displayed in activity tab

ui/pages/confirm-transaction/confirm-token-transaction-switch.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
-import { Switch, Route } from 'react-router-dom';
+import { Switch, Route, useHistory } from 'react-router-dom';
 import {
   CONFIRM_APPROVE_PATH,
   CONFIRM_SAFE_TRANSFER_FROM_PATH,
@@ -9,12 +9,16 @@ import {
   CONFIRM_SET_APPROVAL_FOR_ALL_PATH,
   CONFIRM_TRANSACTION_ROUTE,
   CONFIRM_TRANSFER_FROM_PATH,
+  SEND_ROUTE,
 } from '../../helpers/constants/routes';
 import { transactionFeeSelector } from '../../selectors';
 import ConfirmApprove from '../confirm-approve';
 import ConfirmSendToken from '../confirm-send-token';
 import ConfirmTokenTransactionBase from '../confirm-token-transaction-base';
 import ConfirmTransactionSwitch from '../confirm-transaction-switch';
+import { editExistingTransaction } from '../../ducks/send';
+import { AssetType } from '../../../shared/constants/transaction';
+import { clearConfirmTransaction } from '../../ducks/confirm-transaction/confirm-transaction.duck';
 
 import { useAssetDetails } from '../../hooks/useAssetDetails';
 
@@ -22,6 +26,9 @@ export default function ConfirmTokenTransactionSwitch({ transaction }) {
   const { txParams: { data, to: tokenAddress, from: userAddress } = {} } =
     transaction;
 
+  const dispatch = useDispatch();
+  const history = useHistory();
+
   const {
     assetStandard,
     assetName,
@@ -102,6 +109,14 @@ export default function ConfirmTokenTransactionSwitch({ transaction }) {
             decimals={decimals}
             image={tokenImage}
             tokenAddress={tokenAddress}
+            onEdit={async ({ txData }) => {
+              const { id } = txData;
+              await dispatch(
+                editExistingTransaction(AssetType.NFT, id.toString()),
+              );
+              dispatch(clearConfirmTransaction());
+              history.push(SEND_ROUTE);
+            }}
             toAddress={toAddress}
             tokenAmount={tokenAmount}
             tokenId={tokenId}