Fixes for converting an ERC-20 token to an NFT (#20747)

Fixes 2 issues when converting an ERC-20 token to an NFT: - The contract address was not pre-populated in the modal - The NFT was not removed from the tokens tab
MetaMask · Sep 18, 2023 · bec1ab0 · bec1ab0
1 parent 8157dc9
commit bec1ab0
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 27 deletions.
diff --git a/test/data/mock-send-state.json b/test/data/mock-send-state.json
@@ -11,6 +11,7 @@
   },
   "appState": {
     "networkDropdownOpen": false,
+    "importNftsModal": { "open": false },
     "gasIsLoading": false,
     "isLoading": false,
     "modal": {

diff --git a/test/data/mock-state.json b/test/data/mock-state.json
@@ -4,6 +4,7 @@
   },
   "appState": {
     "networkDropdownOpen": false,
+    "importNftsModal": { "open": false },
     "gasIsLoading": false,
     "isLoading": false,
     "modal": {

diff --git a/ui/components/app/modals/convert-token-to-nft-modal/convert-token-to-nft-modal.js b/ui/components/app/modals/convert-token-to-nft-modal/convert-token-to-nft-modal.js
@@ -36,7 +36,9 @@ const ConvertTokenToNFTModal = ({ hideModal, tokenAddress }) => {
             pathname: `${ASSET_ROUTE}/${tokenAddress}/${tokenId}`,
           });
         } else {
-          dispatch(showImportNftsModal());
+          dispatch(
+            showImportNftsModal({ tokenAddress, ignoreErc20Token: true }),
+          );
         }
         hideModal();
       }}

diff --git a/ui/components/multichain/import-nfts-modal/import-nfts-modal.js b/ui/components/multichain/import-nfts-modal/import-nfts-modal.js
@@ -63,17 +63,14 @@ export const ImportNftsModal = ({ onClose }) => {
   const nftsDropdownState = useSelector(getNftsDropdownState);
   const selectedAddress = useSelector(getSelectedAddress);
   const chainId = useSelector(getCurrentChainId);
-  const addressEnteredOnImportTokensPage =
-    history?.location?.state?.addressEnteredOnImportTokensPage;
-  const contractAddressToConvertFromTokenToNft =
-    history?.location?.state?.tokenAddress;
+  const {
+    tokenAddress: initialTokenAddress,
+    tokenId: initialTokenId,
+    ignoreErc20Token,
+  } = useSelector((state) => state.appState.importNftsModal);
 
-  const [nftAddress, setNftAddress] = useState(
-    addressEnteredOnImportTokensPage ??
-      contractAddressToConvertFromTokenToNft ??
-      '',
-  );
-  const [tokenId, setTokenId] = useState('');
+  const [nftAddress, setNftAddress] = useState(initialTokenAddress ?? '');
+  const [tokenId, setTokenId] = useState(initialTokenId ?? '');
   const [disabled, setDisabled] = useState(true);
   const [nftAddFailed, setNftAddFailed] = useState(false);
   const trackEvent = useContext(MetaMetricsContext);
@@ -99,10 +96,10 @@ export const ImportNftsModal = ({ onClose }) => {
       setNftAddFailed(true);
       return;
     }
-    if (contractAddressToConvertFromTokenToNft) {
+    if (ignoreErc20Token && nftAddress) {
       await dispatch(
         ignoreTokens({
-          tokensToIgnore: contractAddressToConvertFromTokenToNft,
+          tokensToIgnore: nftAddress,
           dontShowLoadingIndicator: true,
         }),
       );

diff --git a/ui/components/multichain/import-nfts-modal/import-nfts-modal.test.js b/ui/components/multichain/import-nfts-modal/import-nfts-modal.test.js
@@ -24,11 +24,6 @@ jest.mock('react-router-dom', () => ({
   useHistory: jest.fn(
     jest.fn().mockReturnValue({
       push: jest.fn(),
-      location: {
-        state: {
-          tokenAddress: '0xTokenAddress',
-        },
-      },
     }),
   ),
 }));
@@ -48,7 +43,7 @@ jest.mock('../../../store/actions.ts', () => ({
 }));
 
 describe('ImportNftsModal', () => {
-  const store = configureMockStore([thunk])(mockState);
+  let store = configureMockStore([thunk])(mockState);
 
   beforeEach(() => {
     jest.restoreAllMocks();
@@ -97,6 +92,11 @@ describe('ImportNftsModal', () => {
   });
 
   it('should call addNftVerifyOwnership, updateNftDropDownState, setNewNftAddedMessage, and ignoreTokens action with correct values (tokenId should not be in scientific notation)', async () => {
+    store = configureMockStore([thunk])({
+      ...mockState,
+      appState: { importNftsModal: { ignoreErc20Token: true } },
+    });
+
     const onClose = jest.fn();
     const { getByPlaceholderText, getByText } = renderWithProvider(
       <ImportNftsModal onClose={onClose} />,
@@ -133,7 +133,7 @@ describe('ImportNftsModal', () => {
 
       expect(ignoreTokens).toHaveBeenCalledWith({
         dontShowLoadingIndicator: true,
-        tokensToIgnore: '0xTokenAddress',
+        tokensToIgnore: VALID_ADDRESS,
       });
     });
   });

diff --git a/ui/components/multichain/import-tokens-modal/import-tokens-modal.js b/ui/components/multichain/import-tokens-modal/import-tokens-modal.js
@@ -363,7 +363,7 @@ export const ImportTokensModal = ({ onClose }) => {
             <ButtonLink
               className="import-tokens-modal__nft-address-error-link"
               onClick={() => {
-                dispatch(showImportNftsModal());
+                dispatch(showImportNftsModal({ tokenAddress: address }));
                 onClose();
               }}
               color={TextColor.primaryDefault}

diff --git a/ui/ducks/app/app.ts b/ui/ducks/app/app.ts
@@ -26,7 +26,12 @@ interface AppState {
     values?: { address?: string | null };
   } | null;
   networkDropdownOpen: boolean;
-  importNftsModalOpen: boolean;
+  importNftsModal: {
+    open: boolean;
+    tokenAddress?: string;
+    tokenId?: string;
+    ignoreErc20Token?: boolean;
+  };
   showIpfsModalOpen: boolean;
   importTokensModalOpen: boolean;
   showSelectActionModal: boolean;
@@ -98,7 +103,7 @@ const initialState: AppState = {
   alertMessage: null,
   qrCodeData: null,
   networkDropdownOpen: false,
-  importNftsModalOpen: false,
+  importNftsModal: { open: false },
   showIpfsModalOpen: false,
   importTokensModalOpen: false,
   showSelectActionModal: false,
@@ -174,13 +179,18 @@ export default function reduceApp(
     case actionConstants.IMPORT_NFTS_MODAL_OPEN:
       return {
         ...appState,
-        importNftsModalOpen: true,
+        importNftsModal: {
+          open: true,
+          ...action.payload,
+        },
       };
 
     case actionConstants.IMPORT_NFTS_MODAL_CLOSE:
       return {
         ...appState,
-        importNftsModalOpen: false,
+        importNftsModal: {
+          open: false,
+        },
       };
 
     case actionConstants.SHOW_IPFS_MODAL_OPEN:

diff --git a/ui/pages/routes/routes.container.js b/ui/pages/routes/routes.container.js
@@ -68,7 +68,7 @@ function mapStateToProps(state) {
     isNetworkMenuOpen: state.metamask.isNetworkMenuOpen,
     isImportTokensModalOpen: state.appState.importTokensModalOpen,
     accountDetailsAddress: state.appState.accountDetailsAddress,
-    isImportNftsModalOpen: state.appState.importNftsModalOpen,
+    isImportNftsModalOpen: state.appState.importNftsModal.open,
     isIpfsModalOpen: state.appState.showIpfsModalOpen,
     isSelectActionModalOpen: state.appState.showSelectActionModal,
   };

diff --git a/ui/store/actions.ts b/ui/store/actions.ts
@@ -2413,9 +2413,14 @@ export function hideModal(): Action {
   };
 }
 
-export function showImportNftsModal(): Action {
+export function showImportNftsModal(payload: {
+  tokenAddress?: string;
+  tokenId?: string;
+  ignoreErc20Token?: boolean;
+}) {
   return {
     type: actionConstants.IMPORT_NFTS_MODAL_OPEN,
+    payload,
   };
 }