UI/UX update - Error message in Import NFT (#13772)

app/_locales/de/messages.json

@@ -1738,9 +1738,6 @@
     "message": "Konto $1",
     "description": "Default name of next account to be created on create account screen"
   },
-  "newCollectibleAddFailed": {
-    "message": "Sammelobjekt wurde nicht hinzugefügt, weil: $1"
-  },
   "newCollectibleAddedMessage": {
     "message": "Sammelobjekt wurde erfolgreich hinzugefügt!"
   },

app/_locales/el/messages.json

@@ -1738,9 +1738,6 @@
     "message": "Λογαριασμός $1",
     "description": "Default name of next account to be created on create account screen"
   },
-  "newCollectibleAddFailed": {
-    "message": "Το Collectible δεν προστέθηκε επειδή: $1"
-  },
   "newCollectibleAddedMessage": {
     "message": "Το Collectible προστέθηκε με επιτυχία!"
   },

app/_locales/en/messages.json

@@ -486,6 +486,9 @@
   "close": {
     "message": "Close"
   },
+  "collectibleAddFailedMessage": {
+    "message": "NFT can’t be added as the ownership details do not match. Make sure you have entered correct information."
+  },
   "collectibleAddressError": {
     "message": "This token is an NFT. Add on the $1",
     "description": "$1 is a clickable link with text defined by the 'importNFTPage' key"
@@ -1961,9 +1964,6 @@
     "message": "Account $1",
     "description": "Default name of next account to be created on create account screen"
   },
-  "newCollectibleAddFailed": {
-    "message": "Collectible was not added because: $1"
-  },
   "newCollectibleAddedMessage": {
     "message": "Collectible was successfully added!"
   },

app/_locales/es_419/messages.json

@@ -1787,9 +1787,6 @@
     "message": "Cuenta $1",
     "description": "Default name of next account to be created on create account screen"
   },
-  "newCollectibleAddFailed": {
-    "message": "No se añadió el coleccionable porque: $1"
-  },
   "newCollectibleAddedMessage": {
     "message": "¡El coleccionable fue añadido con éxito!"
   },

app/_locales/fr/messages.json

@@ -1738,9 +1738,6 @@
     "message": "Compte $1",
     "description": "Default name of next account to be created on create account screen"
   },
-  "newCollectibleAddFailed": {
-    "message": "Le collectible n’a pas été ajouté, car : $1"
-  },
   "newCollectibleAddedMessage": {
     "message": "Le collectible a été ajouté avec succès !"
   },

app/_locales/hi/messages.json

@@ -1738,9 +1738,6 @@
     "message": "खाता $1",
     "description": "Default name of next account to be created on create account screen"
   },
-  "newCollectibleAddFailed": {
-    "message": "संग्रहणीय नहीं जोड़ा गया था क्योंकि: $1"
-  },
   "newCollectibleAddedMessage": {
     "message": "संग्रहणीय सफलतापूर्वक जोड़ा गया!"
   },

app/_locales/id/messages.json

@@ -1738,9 +1738,6 @@
     "message": "Akun $1",
     "description": "Default name of next account to be created on create account screen"
   },
-  "newCollectibleAddFailed": {
-    "message": "Koleksi tidak ditambahkan karena: $1"
-  },
   "newCollectibleAddedMessage": {
     "message": "Koleksi berhasil ditambahkan!"
   },

app/_locales/ja/messages.json

@@ -1738,9 +1738,6 @@
     "message": "アカウント$1",
     "description": "Default name of next account to be created on create account screen"
   },
-  "newCollectibleAddFailed": {
-    "message": "次の理由により、コレクティブルは追加されませんでした: $1"
-  },
   "newCollectibleAddedMessage": {
     "message": "コレクティブルが追加されました!"
   },

app/_locales/ko/messages.json

@@ -1738,9 +1738,6 @@
     "message": "계정 $1",
     "description": "Default name of next account to be created on create account screen"
   },
-  "newCollectibleAddFailed": {
-    "message": "다음 이유 때문에 수집 금액이 추가되지 않았습니다: $1"
-  },
   "newCollectibleAddedMessage": {
     "message": "수집이 성공적으로 추가되었습니다!"
   },

app/_locales/pt_BR/messages.json

@@ -1771,9 +1771,6 @@
     "message": "Conta $1",
     "description": "Default name of next account to be created on create account screen"
   },
-  "newCollectibleAddFailed": {
-    "message": "O colecionável não foi adicionado pelo seguinte motivo: $1"
-  },
   "newCollectibleAddedMessage": {
     "message": "O colecionável foi adicionado com sucesso!"
   },

app/_locales/ru/messages.json

@@ -1738,9 +1738,6 @@
     "message": "Счет $1",
     "description": "Default name of next account to be created on create account screen"
   },
-  "newCollectibleAddFailed": {
-    "message": "Причина, по которой не был добавлен коллекционный актив: $1"
-  },
   "newCollectibleAddedMessage": {
     "message": "Коллекционный актив успешно добавлен!"
   },

app/_locales/tl/messages.json

@@ -1738,9 +1738,6 @@
     "message": "Account $1",
     "description": "Default name of next account to be created on create account screen"
   },
-  "newCollectibleAddFailed": {
-    "message": "Ang collectible ay hindi idinagdag dahil: $1"
-  },
   "newCollectibleAddedMessage": {
     "message": "Ang collectible ay tagumpay na naidagdag!"
   },

app/_locales/tr/messages.json

@@ -1738,9 +1738,6 @@
     "message": "Hesap $1",
     "description": "Default name of next account to be created on create account screen"
   },
-  "newCollectibleAddFailed": {
-    "message": "Tahsil edilebilir tutar eklenmedi ve sebebi: $1"
-  },
   "newCollectibleAddedMessage": {
     "message": "Tahsil edilebilir tutar başarılı bir şekilde eklendi!"
   },

app/_locales/vi/messages.json

@@ -1738,9 +1738,6 @@
     "message": "Tài khoản $1",
     "description": "Default name of next account to be created on create account screen"
   },
-  "newCollectibleAddFailed": {
-    "message": "Bộ sưu tập đã không được thêm vì: $1"
-  },
   "newCollectibleAddedMessage": {
     "message": "Bộ sưu tập đã được thêm thành công!"
   },

app/_locales/zh_CN/messages.json

@@ -1738,9 +1738,6 @@
     "message": "账户 $1",
     "description": "Default name of next account to be created on create account screen"
   },
-  "newCollectibleAddFailed": {
-    "message": "未添加收藏，因为：$1"
-  },
   "newCollectibleAddedMessage": {
     "message": "收藏已成功添加！"
   },

ui/pages/add-collectible/add-collectible.js

@@ -5,7 +5,15 @@ import { util } from '@metamask/controllers';
 import { useI18nContext } from '../../hooks/useI18nContext';
 import { DEFAULT_ROUTE } from '../../helpers/constants/routes';
 
+import {
+  DISPLAY,
+  FONT_WEIGHT,
+  TYPOGRAPHY,
+} from '../../helpers/constants/design-system';
+
 import Box from '../../components/ui/box';
+import Typography from '../../components/ui/typography';
+import ActionableMessage from '../../components/ui/actionable-message';
 import PageContainer from '../../components/ui/page-container';
 import {
   addCollectibleVerifyOwnership,
@@ -38,6 +46,7 @@ export default function AddCollectible() {
   );
   const [tokenId, setTokenId] = useState('');
   const [disabled, setDisabled] = useState(true);
+  const [collectibleAddFailed, setCollectibleAddFailed] = useState(false);
 
   const handleAddCollectible = async () => {
     try {
@@ -47,7 +56,7 @@ export default function AddCollectible() {
     } catch (error) {
       const { message } = error;
       dispatch(setNewCollectibleAddedMessage(message));
-      history.push(DEFAULT_ROUTE);
+      setCollectibleAddFailed(true);
       return;
     }
     if (contractAddressToConvertFromTokenToCollectible) {
@@ -84,24 +93,48 @@ export default function AddCollectible() {
       }}
       disabled={disabled}
       contentComponent={
-        <Box padding={4}>
+        <Box padding={[1, 4]}>
           {isMainnet &&
           !useCollectibleDetection &&
           !collectibleDetectionNoticeDismissed ? (
             <CollectiblesDetectionNotice />
           ) : null}
-          <Box>
+          {collectibleAddFailed && (
+            <ActionableMessage
+              type="danger"
+              useIcon="true"
+              iconFillColor="#d73a49"
+              message={
+                <Box display={DISPLAY.INLINE_FLEX}>
+                  <Typography
+                    variant={TYPOGRAPHY.H7}
+                    fontWeight={FONT_WEIGHT.NORMAL}
+                    margin={0}
+                  >
+                    {t('collectibleAddFailedMessage')}
+                  </Typography>
+                  <button
+                    className="fas fa-times add-collectible__close"
+                    title={t('close')}
+                    onClick={() => setCollectibleAddFailed(false)}
+                  />
+                </Box>
+              }
+            />
+          )}
+          <Box marginTop={4}>
             <FormField
               id="address"
               titleText={t('address')}
               placeholder="0x..."
               value={address}
-              onChange={(val) => validateAndSetAddress(val)}
+              onChange={(val) => {
+                validateAndSetAddress(val);
+                setCollectibleAddFailed(false);
+              }}
               tooltipText={t('importNFTAddressToolTip')}
               autoFocus
             />
-          </Box>
-          <Box>
             <FormField
               id="token-id"
               titleText={t('tokenId')}
@@ -109,6 +142,7 @@ export default function AddCollectible() {
               value={tokenId}
               onChange={(val) => {
                 validateAndSetTokenId(val);
+                setCollectibleAddFailed(false);
               }}
               tooltipText={t('importNFTTokenIdToolTip')}
               numeric

ui/pages/add-collectible/index.scss

@@ -0,0 +1,9 @@
+.add-collectible {
+  &__close {
+    color: var(--ui-black);
+    background: none;
+    flex: 0;
+    align-self: flex-start;
+    padding-right: 0;
+  }
+}

ui/pages/home/home.component.js

@@ -303,27 +303,21 @@ export default class Home extends PureComponent {
             : null
           ///: END:ONLY_INCLUDE_IN
         }
-        {newCollectibleAddedMessage ? (
+        {newCollectibleAddedMessage === 'success' ? (
           <ActionableMessage
-            type={newCollectibleAddedMessage === 'success' ? 'info' : 'warning'}
+            type="info"
             className="home__new-network-notification"
             message={
               <div className="home__new-network-notification-message">
-                {newCollectibleAddedMessage === 'success' ? (
                 <img
                   src="./images/check_circle.svg"
                   className="home__new-network-notification-message--image"
                 />
-                ) : null}
                 <Typography
                   variant={TYPOGRAPHY.H7}
                   fontWeight={FONT_WEIGHT.NORMAL}
                 >
-                  {newCollectibleAddedMessage === 'success'
+                  {t('newCollectibleAddedMessage')}
-                    ? t('newCollectibleAddedMessage')
-                    : t('newCollectibleAddFailed', [
-                        newCollectibleAddedMessage,
-                      ])}
                 </Typography>
                 <button
                   className="fas fa-times home__close"

ui/pages/pages.scss

@@ -1,4 +1,5 @@
 /** Please import your files in alphabetical order **/
+@import 'add-collectible/index';
 @import 'import-token/index';
 @import 'asset/asset';
 @import 'confirm-import-token/index';