Added IPFS toggle (#20172)

* added ipfs toggle * added placeholder valur * fixed snapshot * updated tests * updated spec file * hide input if toggle is disabled * updated e2e tests for nft image * fixed view-ercc-1155 spec * updated e2e tests for nfts * added ipfs toggle modal * updated UI for ipfs * updated tests * updated classname * added placeholder image * lint fix * removed prop ipfsEnabled and used with selector * fixed ui for ipfs toggle * updated test * updated test to handle cases * nit fix * ensure default image height match nft image
MetaMask · Aug 1, 2023 · 4c37448 · 4c37448
1 parent e27a9e4
commit 4c37448
Show file tree

Hide file tree

Showing 29 changed files with 341 additions and 172 deletions.
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
diff --git a/app/images/default_nft.png b/app/images/default_nft.png
diff --git a/test/e2e/nft/erc721-interaction.spec.js b/test/e2e/nft/erc721-interaction.spec.js
@@ -93,7 +93,7 @@ describe('ERC721 NFTs testdapp interaction', function () {
         await driver.clickElement({ text: 'NFTs', tag: 'button' });
         await driver.findElement({ text: 'TestDappNFTs (3)' });
         const nftsListItemsFirstCheck = await driver.findElements(
-          '.nft-item__item',
+          '.nft-item__container',
         );
         assert.equal(nftsListItemsFirstCheck.length, 3);
 
@@ -119,7 +119,7 @@ describe('ERC721 NFTs testdapp interaction', function () {
         await driver.clickElement({ text: 'NFTs', tag: 'button' });
         await driver.findElement({ text: 'TestDappNFTs (6)' });
         const nftsListItemsSecondCheck = await driver.findElements(
-          '.nft-item__item',
+          '.nft-item__container',
         );
         assert.equal(nftsListItemsSecondCheck.length, 6);
       },
@@ -215,7 +215,7 @@ describe('ERC721 NFTs testdapp interaction', function () {
         await driver.clickElement({ text: 'NFTs', tag: 'button' });
         await driver.findElement({ text: 'TestDappNFTs (5)' });
         const nftsListItemsSecondCheck = await driver.findElements(
-          '.nft-item__item',
+          '.nft-item__container',
         );
 
         assert.equal(nftsListItemsSecondCheck.length, 5);

diff --git a/test/e2e/nft/import-erc1155.spec.js b/test/e2e/nft/import-erc1155.spec.js
@@ -58,7 +58,7 @@ describe('Import ERC1155 NFT', function () {
         assert.equal(await importedERC1155.isDisplayed(), true);
 
         const importedERC1155Image = await driver.findVisibleElement(
-          '.nft-item__item',
+          '.nft-item__container',
         );
         assert.equal(await importedERC1155Image.isDisplayed(), true);
       },

diff --git a/test/e2e/nft/import-nft.spec.js b/test/e2e/nft/import-nft.spec.js
@@ -56,7 +56,7 @@ describe('Import NFT', function () {
           text: 'TestDappNFTs',
         });
         const importedNftImage = await driver.findElement(
-          '.nft-item__item-image',
+          '.nft-item__container',
         );
         assert.equal(await importedNft.isDisplayed(), true);
         assert.equal(await importedNftImage.isDisplayed(), true);

diff --git a/test/e2e/nft/remove-erc1155.spec.js b/test/e2e/nft/remove-erc1155.spec.js
@@ -32,7 +32,7 @@ describe('Remove ERC1155 NFT', function () {
         // Open the details page and click remove nft button
         await driver.clickElement('[data-testid="home__nfts-tab"]');
         const importedNftImage = await driver.findVisibleElement(
-          '.nft-item__item',
+          '.nft-item__container',
         );
         await importedNftImage.click();
         await driver.clickElement('[data-testid="nft-options__button"]');

diff --git a/test/e2e/nft/remove-nft.spec.js b/test/e2e/nft/remove-nft.spec.js
@@ -31,7 +31,7 @@ describe('Remove NFT', function () {
 
         // Open the details and click remove nft button
         await driver.clickElement('[data-testid="home__nfts-tab"]');
-        await driver.clickElement('.nft-item__item-image');
+        await driver.clickElement('.nft-item__container');
         await driver.clickElement('[data-testid="nft-options__button"]');
         await driver.clickElement('[data-testid="nft-item-remove"]');
 

diff --git a/test/e2e/nft/send-nft.spec.js b/test/e2e/nft/send-nft.spec.js
@@ -31,7 +31,7 @@ describe('Send NFT', function () {
 
         // Fill the send NFT form and confirm the transaction
         await driver.clickElement('[data-testid="home__nfts-tab"]');
-        await driver.clickElement('.nft-item__item-image');
+        await driver.clickElement('.nft-item__container');
         await driver.clickElement({ text: 'Send', tag: 'button' });
         await driver.fill(
           'input[placeholder="Enter public address (0x) or ENS name"]',

diff --git a/test/e2e/nft/view-erc1155-details.spec.js b/test/e2e/nft/view-erc1155-details.spec.js
@@ -34,7 +34,7 @@ describe('View ERC1155 NFT details', function () {
         // Click to open the NFT details page and check displayed account
         await driver.clickElement('[data-testid="home__nfts-tab"]');
         const importedNftImage = await driver.findVisibleElement(
-          '.nft-item__item',
+          '.nft-item__container',
         );
         await importedNftImage.click();
         const detailsPageAccount = await driver.findElement(
@@ -54,7 +54,7 @@ describe('View ERC1155 NFT details', function () {
           'This is a collection of Rock NFTs.',
         );
 
-        const nftImage = await driver.findElement('.nft-item__item-image');
+        const nftImage = await driver.findElement('.nft-item__container');
         assert.equal(await nftImage.isDisplayed(), true);
 
         const nftImageSource = await driver.findElement(

diff --git a/test/e2e/nft/view-nft-details.spec.js b/test/e2e/nft/view-nft-details.spec.js
@@ -33,7 +33,7 @@ describe('View NFT details', function () {
 
         // Click to open the NFT details page and check title
         await driver.clickElement('[data-testid="home__nfts-tab"]');
-        await driver.clickElement('.nft-item__item-image');
+        await driver.clickElement('.nft-item__container');
 
         const detailsPageTitle = await driver.findElement('.asset-breadcrumb');
         assert.equal(
@@ -53,7 +53,7 @@ describe('View NFT details', function () {
           'Test Dapp NFTs for testing.',
         );
 
-        const nftImage = await driver.findElement('.nft-item__item-image');
+        const nftImage = await driver.findElement('.nft-item__container');
         assert.equal(await nftImage.isDisplayed(), true);
 
         const nftImageSource = await driver.findElement(

diff --git a/ui/components/app/nft-default-image/__snapshots__/nft-default-image.test.js.snap b/ui/components/app/nft-default-image/__snapshots__/nft-default-image.test.js.snap
@@ -3,58 +3,29 @@
 exports[`NFT Default Image should match snapshot with all provided props 1`] = `
 <div>
   <div
-    class="box nft-default nft-default--clickable box--display-flex box--flex-direction-row box--width-full box--background-color-background-alternative box--rounded-lg"
+    class="mm-box nft-default mm-box--display-flex mm-box--rounded-lg"
     data-testid="nft-default-image"
     tabindex="0"
-  >
-    <h6
-      class="mm-box mm-text nft-default__text mm-text--body-sm mm-text--ellipsis mm-text--text-align-center mm-box--color-text-default"
-    >
-      NFT Name
-       
-      <br />
-       #
-      123
-    </h6>
-  </div>
+  />
 </div>
 `;
 
 exports[`NFT Default Image should match snapshot with missing clickable prop 1`] = `
 <div>
   <div
-    class="box nft-default box--display-flex box--flex-direction-row box--width-full box--background-color-background-alternative box--rounded-lg"
+    class="mm-box nft-default mm-box--display-flex mm-box--rounded-lg"
     data-testid="nft-default-image"
     tabindex="0"
-  >
-    <h6
-      class="mm-box mm-text nft-default__text mm-text--body-sm mm-text--ellipsis mm-text--text-align-center mm-box--color-text-default"
-    >
-      NFT Name
-       
-      <br />
-       #
-      123
-    </h6>
-  </div>
+  />
 </div>
 `;
 
 exports[`NFT Default Image should render with no props 1`] = `
 <div>
   <div
-    class="box nft-default box--display-flex box--flex-direction-row box--width-full box--background-color-background-alternative box--rounded-lg"
+    class="mm-box nft-default mm-box--display-flex mm-box--rounded-lg"
     data-testid="nft-default-image"
     tabindex="0"
-  >
-    <h6
-      class="mm-box mm-text nft-default__text mm-text--body-sm mm-text--ellipsis mm-text--text-align-center mm-box--color-text-default"
-    >
-      [unknownCollection]
-       
-      <br />
-       #
-    </h6>
-  </div>
+  />
 </div>
 `;
diff --git a/ui/components/app/nft-default-image/index.scss b/ui/components/app/nft-default-image/index.scss
@@ -1,17 +1,12 @@
 .nft-default {
   padding-top: 100%;
   position: relative;
+  background-image: url('/images/default_nft.png');
+  background-size: cover;
+  background-repeat: no-repeat;
 
-  &--clickable {
-    cursor: pointer;
-  }
-
-  &__text {
-    overflow: hidden;
+  &__button {
     position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: calc(100% - 32px);
+    bottom: 16px;
   }
 }
diff --git a/ui/components/app/nft-default-image/nft-default-image.js b/ui/components/app/nft-default-image/nft-default-image.js
@@ -1,27 +1,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import { useDispatch, useSelector } from 'react-redux';
 import {
   Display,
   AlignItems,
-  BlockSize,
   JustifyContent,
-  TextVariant,
   BorderRadius,
-  TextAlign,
-  BackgroundColor,
 } from '../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../hooks/useI18nContext';
-import { Text } from '../../component-library';
-import Box from '../../ui/box/box';
+import { ButtonLink, Box } from '../../component-library';
+import { showIpfsModal } from '../../../store/actions';
+import { getIpfsGateway } from '../../../selectors';
 
-export default function NftDefaultImage({
-  name,
-  tokenId,
-  className,
-  clickable = false,
-}) {
+export default function NftDefaultImage({ className, clickable }) {
   const t = useI18nContext();
+  const dispatch = useDispatch();
+  const isIpfsEnabled = useSelector(getIpfsGateway);
+
   return (
     <Box
       tabIndex={0}
@@ -32,32 +28,25 @@ export default function NftDefaultImage({
       display={Display.Flex}
       alignItems={AlignItems.Center}
       justifyContent={JustifyContent.Center}
-      backgroundColor={BackgroundColor.backgroundAlternative}
-      width={BlockSize.Full}
       borderRadius={BorderRadius.LG}
     >
-      <Text
-        variant={TextVariant.bodySm}
-        textAlign={TextAlign.Center}
-        ellipsis
-        as="h6"
-        className="nft-default__text"
-      >
-        {name ?? t('unknownCollection')} <br /> #{tokenId}
-      </Text>
+      {!isIpfsEnabled && (
+        <ButtonLink
+          block
+          className="nft-default__button"
+          onClick={(e) => {
+            e.stopPropagation();
+            dispatch(showIpfsModal());
+          }}
+        >
+          {t('show')}
+        </ButtonLink>
+      )}
     </Box>
   );
 }
 
 NftDefaultImage.propTypes = {
-  /**
-   * The name of the NFT collection if not supplied will default to "Unnamed collection"
-   */
-  name: PropTypes.string,
-  /**
-   * The token id of the nft
-   */
-  tokenId: PropTypes.string,
   /**
    * Controls the css class for the cursor hover
    */

diff --git a/ui/components/app/nft-default-image/nft-default-image.stories.js b/ui/components/app/nft-default-image/nft-default-image.stories.js
@@ -5,21 +5,10 @@ export default {
   title: 'Components/App/NftDefaultImage',
 
   argTypes: {
-    name: {
-      control: 'text',
-    },
-    tokenId: {
-      control: 'text',
-    },
     clickable: {
       control: 'boolean',
     },
   },
-  args: {
-    name: null,
-    tokenId: '12345',
-    clickable: true,
-  },
 };
 
 export const DefaultStory = (args) => (