diff --git a/test/data/mock-send-state.json b/test/data/mock-send-state.json
index 8b4cbf16a709..14d4967d70f9 100644
--- 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
index 33a4db866132..7c42087b90fc 100644
--- 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
index 9311153fcdb2..06e6655bc247 100644
--- 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
index 0d55446606ef..df02ed6c8c79 100644
--- 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
index e251fc7d72e8..c9180a15278c 100644
--- 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(
,
@@ -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
index 81cfb70a25fc..255a2643175c 100644
--- 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 }) => {
{
- dispatch(showImportNftsModal());
+ dispatch(showImportNftsModal({ tokenAddress: address }));
onClose();
}}
color={TextColor.primaryDefault}
diff --git a/ui/ducks/app/app.ts b/ui/ducks/app/app.ts
index 4a440031c0fe..4c0c840cde7c 100644
--- 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
index 22fa69790b2f..4773b65dea44 100644
--- 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
index 33585cf88f99..23016882516c 100644
--- 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,
};
}