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

MetaMask · Mar 9, 2023 · d6e61e9 · d6e61e9
1 parent 23ca446
commit d6e61e9
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 2 deletions.
diff --git a/test/e2e/nft/send-nft.spec.js b/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

diff --git a/ui/pages/confirm-transaction/confirm-token-transaction-switch.js b/ui/pages/confirm-transaction/confirm-token-transaction-switch.js
@@ -1,27 +1,34 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
-import { Switch, Route } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
+import { Switch, Route, useHistory } from 'react-router-dom';
 import {
   CONFIRM_APPROVE_PATH,
   CONFIRM_SAFE_TRANSFER_FROM_PATH,
   CONFIRM_SEND_TOKEN_PATH,
   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';
 
 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}