From a638876dc107f19adb49ef0bad9da3e3726168c9 Mon Sep 17 00:00:00 2001
From: sahar-fehri <sahar.fehri@consensys.net>
Date: Mon, 25 Sep 2023 14:25:54 +0200
Subject: [PATCH] fix: add validation error on NFT import

---
 .../import-nfts-modal/import-nfts-modal.js       |  8 ++++++++
 .../import-nfts-modal/import-nfts-modal.test.js  | 16 ++++++++++++++++
 2 files changed, 24 insertions(+)

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