NFTs: Use Unknown Collection instead of first NFT name (#18388)

* NFTs: Use Unknown Collection instead of first NFT name

* Use localization in hook

* Get localization for previously owned

* Fix tests

---------

Co-authored-by: Dan Miller <danjm.com@gmail.com>

app/_locales/en/messages.json

@@ -2248,6 +2248,9 @@
   "nfts": {
     "message": "NFTs"
   },
+  "nftsPreviouslyOwned": {
+    "message": "Previously Owned"
+  },
   "nickname": {
     "message": "Nickname"
   },

test/e2e/nft/import-erc1155.spec.js

@@ -51,7 +51,7 @@ describe('Import ERC1155 NFT', function () {
         // Check the imported ERC1155 and its image are displayed in the ERC1155 tab
         const importedERC1155 = await driver.waitForSelector({
           css: 'h5',
-          text: 'Rocks',
+          text: 'Unnamed collection',
         });
         assert.equal(await importedERC1155.isDisplayed(), true);
 

ui/hooks/useNftsCollections.js

@@ -4,11 +4,16 @@ import { isEqual } from 'lodash';
 import { getNfts, getNftContracts } from '../ducks/metamask/metamask';
 import { getCurrentChainId, getSelectedAddress } from '../selectors';
 import { usePrevious } from './usePrevious';
+import { useI18nContext } from './useI18nContext';
 
 export function useNftsCollections() {
+  const t = useI18nContext();
+  const previouslyOwnedText = t('nftsPreviouslyOwned');
+  const unknownCollectionText = t('unknownCollection');
+
   const [collections, setCollections] = useState({});
   const [previouslyOwnedCollection, setPreviouslyOwnedCollection] = useState({
-    collectionName: 'Previously Owned',
+    collectionName: previouslyOwnedText,
     nfts: [],
   });
   const nfts = useSelector(getNfts);
@@ -19,6 +24,7 @@ export function useNftsCollections() {
   const prevNfts = usePrevious(nfts);
   const prevChainId = usePrevious(chainId);
   const prevSelectedAddress = usePrevious(selectedAddress);
+
   useEffect(() => {
     const getCollections = () => {
       setNftsLoading(true);
@@ -27,7 +33,7 @@ export function useNftsCollections() {
       }
       const newCollections = {};
       const newPreviouslyOwnedCollections = {
-        collectionName: 'Previously Owned',
+        collectionName: previouslyOwnedText,
         nfts: [],
       };
 
@@ -41,7 +47,7 @@ export function useNftsCollections() {
             ({ address }) => address === nft.address,
           );
           newCollections[nft.address] = {
-            collectionName: collectionContract?.name || nft.name,
+            collectionName: collectionContract?.name || unknownCollectionText,
             collectionImage: collectionContract?.logo || nft.image,
             nfts: [nft],
           };