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, }; }