fix: add validation error on NFT import

MetaMask · Sep 25, 2023 · a638876 · a638876
1 parent 6bddeba
commit a638876
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 0 deletions.
diff --git 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}
               />
             </Box>
             <Box>

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
@@ -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(
+      <ImportNftsModal onClose={onClose} />,
+      store,
+    );
+
+    const addressInput = getByPlaceholderText('0x...');
+    fireEvent.change(addressInput, {
+      target: { value: INVALID_ADDRESS },
+    });
+
+    const errorMessage = getByText('Invalid address');
+    expect(errorMessage).toBeInTheDocument();
+  });
 });