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 e6f2d16655d2..af2a62facec8 100644 --- a/ui/components/multichain/import-nfts-modal/import-nfts-modal.js +++ b/ui/components/multichain/import-nfts-modal/import-nfts-modal.js @@ -73,6 +73,8 @@ export const ImportNftsModal = ({ onClose }) => { const [disabled, setDisabled] = useState(true); const [nftAddFailed, setNftAddFailed] = useState(false); const trackEvent = useContext(MetaMetricsContext); + const [nftAddressValidationError, setNftAddressValidationError] = + useState(null); const handleAddNft = async () => { try { @@ -129,6 +131,10 @@ export const ImportNftsModal = ({ onClose }) => { }; const validateAndSetAddress = (val) => { + setNftAddressValidationError(null); + if (!isValidHexAddress(val)) { + setNftAddressValidationError(t('invalidAddress')); + } setDisabled(!isValidHexAddress(val) || !tokenId); setNftAddress(val); }; @@ -210,6 +216,8 @@ export const ImportNftsModal = ({ onClose }) => { validateAndSetAddress(e.target.value); setNftAddFailed(false); }} + helpText={nftAddressValidationError} + error={nftAddressValidationError} /> 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 c9180a15278c..778591258d29 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 @@ -189,4 +189,20 @@ describe('ImportNftsModal', () => { expect(useHistory().push).toHaveBeenCalledWith(DEFAULT_ROUTE); }); + + it('should set error message when address invalid', () => { + const onClose = jest.fn(); + const { getByText, getByPlaceholderText } = renderWithProvider( + , + store, + ); + + const addressInput = getByPlaceholderText('0x...'); + fireEvent.change(addressInput, { + target: { value: INVALID_ADDRESS }, + }); + + const errorMessage = getByText('Invalid address'); + expect(errorMessage).toBeInTheDocument(); + }); });