refactor: NFT Grid View

test/e2e/page-objects/pages/home/nft-list.ts

@@ -73,7 +73,7 @@ class NftListPage {
       `Check that NFT item ${nftName} is displayed in NFT tab on homepage`,
     );
     await this.driver.waitForSelector({
-      tag: 'h5',
+      tag: 'p',
       text: nftName,
     });
   }

test/e2e/tests/tokens/nft/auto-detect-nft.spec.ts

@@ -42,7 +42,7 @@ describe('NFT detection', function () {
         await homepage.goToNftTab();
         const nftListPage = new NFTListPage(driver);
         await nftListPage.check_nftNameIsDisplayed(
-          'ENS: Ethereum Name Service (1)',
+          'ENS: Ethereum Name Service',
         );
         await nftListPage.check_nftImageIsDisplayed();
       },

test/e2e/tests/tokens/nft/erc721-interaction.spec.js

@@ -79,7 +79,6 @@ describe('ERC721 NFTs testdapp interaction', function () {
             WINDOW_TITLES.ExtensionInFullScreenView,
           );
           await clickNestedButton(driver, 'NFTs');
-          await driver.findElement({ text: 'TestDappNFTs (5)' });
           const nftsListItemsFirstCheck = await driver.findElements(
             '.nft-item__container',
           );
@@ -167,8 +166,6 @@ describe('ERC721 NFTs testdapp interaction', function () {
             WINDOW_TITLES.ExtensionInFullScreenView,
           );
           await clickNestedButton(driver, 'NFTs');
-          // Changed this check from 3 to 6, because after mint all nfts has been added to state,
-          await driver.findElement({ text: 'TestDappNFTs (6)' });
           const nftsListItemsFirstCheck = await driver.findElements(
             '.nft-item__container',
           );
@@ -202,7 +199,6 @@ describe('ERC721 NFTs testdapp interaction', function () {
             WINDOW_TITLES.ExtensionInFullScreenView,
           );
           await clickNestedButton(driver, 'NFTs');
-          await driver.findElement({ text: 'TestDappNFTs (6)' });
           const nftsListItemsSecondCheck = await driver.findElements(
             '.nft-item__container',
           );
@@ -303,7 +299,6 @@ describe('ERC721 NFTs testdapp interaction', function () {
             WINDOW_TITLES.ExtensionInFullScreenView,
           );
           await clickNestedButton(driver, 'NFTs');
-          await driver.findElement({ text: 'TestDappNFTs (5)' });
           const nftsListItemsSecondCheck = await driver.findElements(
             '.nft-item__container',
           );
@@ -622,7 +617,6 @@ describe('ERC721 NFTs testdapp interaction', function () {
             WINDOW_TITLES.ExtensionInFullScreenView,
           );
           await clickNestedButton(driver, 'NFTs');
-          await driver.findElement({ text: 'TestDappNFTs (5)' });
           const nftsListItemsFirstCheck = await driver.findElements(
             '.nft-item__container',
           );
@@ -704,8 +698,6 @@ describe('ERC721 NFTs testdapp interaction', function () {
             WINDOW_TITLES.ExtensionInFullScreenView,
           );
           await clickNestedButton(driver, 'NFTs');
-          // Changed this check from 3 to 6, because after mint all nfts has been added to state,
-          await driver.findElement({ text: 'TestDappNFTs (6)' });
           const nftsListItemsFirstCheck = await driver.findElements(
             '.nft-item__container',
           );
@@ -738,8 +730,6 @@ describe('ERC721 NFTs testdapp interaction', function () {
           await driver.switchToWindowWithTitle(
             WINDOW_TITLES.ExtensionInFullScreenView,
           );
-          await clickNestedButton(driver, 'NFTs');
-          await driver.findElement({ text: 'TestDappNFTs (6)' });
           const nftsListItemsSecondCheck = await driver.findElements(
             '.nft-item__container',
           );
@@ -834,7 +824,6 @@ describe('ERC721 NFTs testdapp interaction', function () {
             WINDOW_TITLES.ExtensionInFullScreenView,
           );
           await clickNestedButton(driver, 'NFTs');
-          await driver.findElement({ text: 'TestDappNFTs (5)' });
           const nftsListItemsSecondCheck = await driver.findElements(
             '.nft-item__container',
           );

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

@@ -44,10 +44,9 @@ describe('Import ERC1155 NFT', function () {
         assert.equal(await newNftNotification.isDisplayed(), true);
 
         // Check the imported ERC1155 and its image are displayed in the ERC1155 tab
-        const importedERC1155 = await driver.waitForSelector({
-          css: 'h5',
-          text: 'Unnamed collection',
-        });
+        const importedERC1155 = await driver.findElement(
+          '[data-testid="nft-item"]',
+        );
         assert.equal(await importedERC1155.isDisplayed(), true);
 
         const importedERC1155Image = await driver.findVisibleElement(

test/e2e/tests/tokens/nft/import-nft.spec.ts

@@ -32,7 +32,6 @@ describe('Import NFT', function () {
         const nftList = new NftListPage(driver);
         await nftList.importNft(contractAddress, '1');
         await nftList.check_successImportNftMessageIsDisplayed();
-        await nftList.check_nftNameIsDisplayed('TestDappNFTs');
         await nftList.check_nftImageIsDisplayed();
       },
     );
@@ -60,7 +59,6 @@ describe('Import NFT', function () {
         const nftList = new NftListPage(driver);
         await nftList.importNft(contractAddress, '1');
         await nftList.check_successImportNftMessageIsDisplayed();
-        await nftList.check_nftNameIsDisplayed('TestDappNFTs');
         await nftList.check_nftImageIsDisplayed();
 
         // Create new account with default name Account 2
@@ -81,7 +79,6 @@ describe('Import NFT', function () {
         await accountListPage.switchToAccount('Account 1');
         await headerNavbar.check_accountLabel('Account 1');
         await homepage.check_localBlockchainBalanceIsDisplayed(ganacheServer);
-        await nftList.check_nftNameIsDisplayed('TestDappNFTs');
         await nftList.check_nftImageIsDisplayed();
       },
     );

test/e2e/tests/tokens/nft/remove-erc1155.spec.js

@@ -35,7 +35,7 @@ describe('Remove ERC1155 NFT', function () {
 
         // Open the details page and click remove nft button
         await driver.clickElement('[data-testid="account-overview__nfts-tab"]');
-        await driver.clickElement('[data-testid="nft-image"]');
+        await driver.clickElement('.nft-item__container');
         await driver.clickElement('[data-testid="nft-options__button"]');
         await driver.clickElement('[data-testid="nft-item-remove"]');
 

test/e2e/tests/tokens/nft/send-nft.spec.js

@@ -76,14 +76,6 @@ describe('Send NFT', function () {
           text: 'Send Test Dapp NFTs',
         });
         assert.equal(await sendNftItem.isDisplayed(), true);
-
-        // Go back to NFTs tab and check the imported NFT is shown as previously owned
-        await driver.clickElement('[data-testid="account-overview__nfts-tab"]');
-        const previouslyOwnedNft = await driver.findElement({
-          css: 'h5',
-          text: 'Previously Owned',
-        });
-        assert.equal(await previouslyOwnedNft.isDisplayed(), true);
       },
     );
   });
@@ -134,15 +126,6 @@ describe('Send NFT', function () {
           text: 'Safe transfer from',
         });
         assert.equal(await sendNftItem.isDisplayed(), true);
-
-        // Go back to NFTs tab and check the imported NFT is shown as previously owned
-        await driver.clickElement('[data-testid="account-overview__nfts-tab"]');
-
-        const previouslyOwnedNft = await driver.findElement({
-          css: 'h5',
-          text: 'Previously Owned',
-        });
-        assert.equal(await previouslyOwnedNft.isDisplayed(), true);
       },
     );
   });

ui/components/app/app-components.scss

@@ -7,8 +7,6 @@
 @import 'alert-system/alert-modal/index';
 @import 'alert-system/inline-alert/index';
 @import 'import-token/index';
-@import 'assets/nfts/nfts-items/index';
-@import 'assets/nfts/nfts-tab/index';
 @import 'assets/nfts/nft-details/index';
 @import 'assets/nfts/nft-default-image/index';
 @import 'assets/nfts/nft-options/index';
@@ -57,6 +55,7 @@
 @import 'assets/asset-list/asset-list-control-bar/index';
 @import 'assets/asset-list/sort-control/index';
 @import 'assets/token-cell/token-cell';
+@import 'assets/nfts/nft-grid/index';
 @import 'transaction-activity-log/index';
 @import 'transaction-breakdown/index';
 @import 'transaction-icon/transaction-icon';

ui/components/app/assets/nfts/nft-default-image/__snapshots__/nft-default-image.test.js.snap

@@ -3,7 +3,7 @@
 exports[`NFT Default Image should match snapshot with all provided props 1`] = `
 <div>
   <div
-    class="mm-box nft-default mm-box--display-flex mm-box--rounded-lg"
+    class="mm-box nft-default mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--rounded-lg"
     data-testid="nft-default-image"
     tabindex="0"
   />
@@ -13,7 +13,7 @@ exports[`NFT Default Image should match snapshot with all provided props 1`] = `
 exports[`NFT Default Image should match snapshot with missing clickable prop 1`] = `
 <div>
   <div
-    class="mm-box nft-default mm-box--display-flex mm-box--rounded-lg"
+    class="mm-box nft-default mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--rounded-lg"
     data-testid="nft-default-image"
     tabindex="0"
   />
@@ -23,7 +23,7 @@ exports[`NFT Default Image should match snapshot with missing clickable prop 1`]
 exports[`NFT Default Image should render with no props 1`] = `
 <div>
   <div
-    class="mm-box nft-default mm-box--display-flex mm-box--rounded-lg"
+    class="mm-box nft-default mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--rounded-lg"
     data-testid="nft-default-image"
     tabindex="0"
   />

ui/components/app/assets/nfts/nft-default-image/nft-default-image.js → ui/components/app/assets/nfts/nft-default-image/nft-default-image.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { useDispatch } from 'react-redux';
 import {
@@ -12,7 +11,15 @@ import { useI18nContext } from '../../../../../hooks/useI18nContext';
 import { ButtonLink, Box } from '../../../../component-library';
 import { showIpfsModal } from '../../../../../store/actions';
 
-export default function NftDefaultImage({ className, clickable }) {
+type NftDefaultImageProps = {
+  className: string;
+  clickable?: boolean;
+};
+
+export default function NftDefaultImage({
+  className,
+  clickable,
+}: NftDefaultImageProps) {
   const t = useI18nContext();
   const dispatch = useDispatch();
 
@@ -21,18 +28,18 @@ export default function NftDefaultImage({ className, clickable }) {
       tabIndex={0}
       data-testid="nft-default-image"
       className={classnames(className, 'nft-default', {
-        'nft-default--clickable': clickable,
+        'nft-default--clickable': Boolean(clickable),
       })}
       display={Display.Flex}
-      alignItems={AlignItems.Center}
-      justifyContent={JustifyContent.Center}
+      alignItems={AlignItems.center}
+      justifyContent={JustifyContent.center}
       borderRadius={BorderRadius.LG}
     >
       {clickable && (
         <ButtonLink
           block
           className="nft-default__button"
-          onClick={(e) => {
+          onClick={(e: { stopPropagation: () => void }) => {
             e.stopPropagation();
             dispatch(showIpfsModal());
           }}
@@ -43,15 +50,3 @@ export default function NftDefaultImage({ className, clickable }) {
     </Box>
   );
 }
-
-NftDefaultImage.propTypes = {
-  /**
-   * Controls the css class for the cursor hover
-   * It determines if we need to show the button on default image or not
-   */
-  clickable: PropTypes.bool,
-  /**
-   * An additional className to apply to the NFT default image
-   */
-  className: PropTypes.string,
-};

ui/components/app/assets/nfts/nft-details/__snapshots__/nft-details.test.js.snap

@@ -24,10 +24,12 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
               style="mask-image: url('./images/icons/arrow-left.svg');"
             />
           </button>
-          <div>
+          <div
+            class="mm-box"
+          >
             <button
               aria-label="NFT Options"
-              class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-transparent mm-box--rounded-lg"
+              class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
               data-testid="nft-options__button"
             >
               <span
@@ -43,37 +45,47 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
           <div
             class="mm-box nft-details__nft-item"
           >
-            <button
-              class="mm-box nft-item__container"
-              data-testid="nft-item"
+            <div
+              class="mm-box nft-item__card"
             >
-              <div
-                class="mm-box mm-badge-wrapper nft-item__badge-wrapper nft-item__badge-wrapper__clickable mm-box--display-block"
+              <button
+                class="mm-box nft-item__container"
+                data-testid="nft-item"
               >
                 <div
-                  class="mm-box nft-item__default-image nft-default nft-default--clickable mm-box--display-flex mm-box--rounded-lg"
-                  data-testid="nft-default-image"
-                  tabindex="0"
+                  class="mm-box mm-badge-wrapper nft-item__badge-wrapper nft-item__badge-wrapper__clickable mm-box--display-block"
                 >
-                  <button
-                    class="mm-box mm-text mm-button-base mm-button-base--block nft-default__button mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+                  <div
+                    class="mm-box nft-item__default-image nft-default nft-default--clickable mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--rounded-lg"
+                    data-testid="nft-default-image"
+                    tabindex="0"
                   >
-                    Show
-                  </button>
-                </div>
-                <div
-                  class="mm-box mm-badge-wrapper__badge-container"
-                  style="top: -4px; right: -4px;"
-                >
+                    <button
+                      class="mm-box mm-text mm-button-base mm-button-base--block nft-default__button mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+                    >
+                      Show
+                    </button>
+                  </div>
                   <div
-                    class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network nft-item__network-badge mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-md mm-box--border-color-background-default mm-box--border-width-2 box--border-style-solid"
-                    data-testid="nft-network-badge"
+                    class="mm-box mm-badge-wrapper__badge-container"
+                    style="top: -4px; right: -4px;"
                   >
-                    G
+                    <div
+                      class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network nft-item__network-badge mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-md mm-box--border-color-background-default mm-box--border-width-2 box--border-style-solid"
+                      data-testid="nft-network-badge"
+                    >
+                      G
+                    </div>
                   </div>
                 </div>
-              </div>
-            </button>
+              </button>
+              <p
+                class="mm-box mm-text mm-text--body-sm mm-text--ellipsis mm-box--color-text-default"
+              />
+              <p
+                class="mm-box mm-text mm-text--body-sm mm-text--ellipsis mm-box--color-text-alternative"
+              />
+            </div>
           </div>
         </div>
         <div