Remove MULTICHAIN flag for NFT badges (#19416)

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

@@ -56,7 +56,7 @@ describe('Import ERC1155 NFT', function () {
         assert.equal(await importedERC1155.isDisplayed(), true);
 
         const importedERC1155Image = await driver.findVisibleElement(
-          '.nfts-items__item img',
+          '.nft-item__item',
         );
         assert.equal(await importedERC1155Image.isDisplayed(), true);
       },

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

@@ -54,7 +54,7 @@ describe('Import NFT', function () {
           text: 'TestDappCollectibles',
         });
         const importedNftImage = await driver.findElement(
-          '.nfts-items__item-image',
+          '.nft-item__item-image',
         );
         assert.equal(await importedNft.isDisplayed(), true);
         assert.equal(await importedNftImage.isDisplayed(), true);

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(
-          '.nfts-items__item img',
+          '.nft-item__item',
         );
         await importedNftImage.click();
         await driver.clickElement('[data-testid="nft-options__button"]');

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('.nfts-items__item-image');
+        await driver.clickElement('.nft-item__item-image');
         await driver.clickElement('[data-testid="nft-options__button"]');
         await driver.clickElement('[data-testid="nft-item-remove"]');
 

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('.nfts-items__item-image');
+        await driver.clickElement('.nft-item__item-image');
         await driver.clickElement({ text: 'Send', tag: 'button' });
         await driver.fill(
           'input[placeholder="Search, public address (0x), or ENS"]',

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(
-          '.nfts-items__item img',
+          '.nft-item__item',
         );
         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-details__image');
+        const nftImage = await driver.findElement('.nft-item__item-image');
         assert.equal(await nftImage.isDisplayed(), true);
 
         const nftImageSource = await driver.findElement(

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('.nfts-items__item-image');
+        await driver.clickElement('.nft-item__item-image');
 
         const detailsPageTitle = await driver.findElement('.asset-breadcrumb');
         assert.equal(
@@ -53,7 +53,7 @@ describe('View NFT details', function () {
           'Test Dapp Collectibles for testing.',
         );
 
-        const nftImage = await driver.findElement('.nft-details__image');
+        const nftImage = await driver.findElement('.nft-item__item-image');
         assert.equal(await nftImage.isDisplayed(), true);
 
         const nftImageSource = await driver.findElement(

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

@@ -40,16 +40,37 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
     class="box nft-details box--flex-direction-row"
   >
     <div
-      class="box nft-details__top-section box--gap-6 box--flex-direction-row"
+      class="box nft-details__top-section box--gap-6 box--flex-direction-column"
     >
       <div
-        class="box nft-details__card box--flex-direction-row box--justify-content-center box--background-color-background-default box--rounded-md box--border-style-solid box--border-color-border-muted box--border-width-1 box--display-flex"
+        class="box nft-details__nft-item box--flex-direction-row"
       >
-        <img
+        <button
-          alt="MUNK #1 1"
+          class="box nft-item__container box--flex-direction-row"
-          class="nft-details__image"
+          data-testid="nft-item"
-          src="https://bafybeiclzx7zfjvuiuwobn5ip3ogc236bjqfjzoblumf4pau4ep6dqramu.ipfs.dweb.link"
+        >
-        />
+          <div
+            class="box mm-badge-wrapper nft-item__badge-wrapper box--flex-direction-row"
+          >
+            <img
+              alt="MUNK #1 1"
+              class="box nft-item__item nft-item__item-image box--display-block box--flex-direction-row box--justify-content-center"
+              data-testid="nft-image"
+              src="https://bafybeiclzx7zfjvuiuwobn5ip3ogc236bjqfjzoblumf4pau4ep6dqramu.ipfs.dweb.link"
+            />
+            <div
+              class="box mm-badge-wrapper__badge-container box--flex-direction-row"
+              style="top: -4px; right: -4px;"
+            >
+              <div
+                class="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 box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-background-default box--border-width-2 box--border-style-solid"
+                data-testid="nft-network-badge"
+              >
+                G
+              </div>
+            </div>
+          </div>
+        </button>
       </div>
       <div
         class="box nft-details__info box--flex-direction-column box--justify-content-space-between box--display-flex"

ui/components/app/nft-details/nft-details.js

@@ -4,17 +4,16 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { isEqual } from 'lodash';
 import Box from '../../ui/box';
-import Card from '../../ui/card';
 import {
   TextColor,
   IconColor,
   TextVariant,
   FontWeight,
   JustifyContent,
-  FLEX_DIRECTION,
   OverflowWrap,
-  DISPLAY,
+  FlexDirection,
-  BLOCK_SIZES,
+  Display,
+  BlockSize,
 } from '../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import {
@@ -52,7 +51,6 @@ import {
   AssetType,
   TokenStandard,
 } from '../../../../shared/constants/transaction';
-import NftDefaultImage from '../nft-default-image';
 import { ButtonIcon, IconName, Text } from '../../component-library';
 import Tooltip from '../../ui/tooltip';
 import { decWEIToDecETH } from '../../../../shared/modules/conversion.utils';
@@ -144,8 +142,8 @@ export default function NftDetails({ nft }) {
     }
     return (
       <Box
-        display={DISPLAY.FLEX}
+        display={Display.Flex}
-        width={inPopUp ? BLOCK_SIZES.FULL : BLOCK_SIZES.HALF}
+        width={inPopUp ? BlockSize.Full : BlockSize.Half}
         margin={inPopUp ? [4, 0] : null}
       >
         <Button
@@ -182,37 +180,23 @@ export default function NftDetails({ nft }) {
         }
       />
       <Box className="nft-details">
-        <Box className="nft-details__top-section" gap={6}>
+        <Box
-          {process.env.MULTICHAIN ? (
+          className="nft-details__top-section"
-            <Box className="nft-details__nft-item">
+          gap={6}
-              <NftItem
+          flexDirection={FlexDirection.Column}
-                src={image ? nftImageURL : ''}
+        >
-                alt={image ? nftImageAlt : ''}
+          <Box className="nft-details__nft-item">
-                name={name}
+            <NftItem
-                tokenId={tokenId}
+              src={image ? nftImageURL : ''}
-                networkName={currentChain.nickname}
+              alt={image ? nftImageAlt : ''}
-                networkSrc={currentChain.rpcPrefs?.imageUrl}
+              name={name}
-              />
+              tokenId={tokenId}
-            </Box>
+              networkName={currentChain.nickname}
-          ) : (
+              networkSrc={currentChain.rpcPrefs?.imageUrl}
-            <Card
+            />
-              padding={0}
+          </Box>
-              justifyContent={JustifyContent.center}
-              className="nft-details__card"
-            >
-              {image ? (
-                <img
-                  className="nft-details__image"
-                  src={nftImageURL}
-                  alt={nftImageAlt}
-                />
-              ) : (
-                <NftDefaultImage name={name} tokenId={tokenId} />
-              )}
-            </Card>
-          )}
           <Box
-            flexDirection={FLEX_DIRECTION.COLUMN}
+            flexDirection={FlexDirection.Column}
             className="nft-details__info"
             justifyContent={JustifyContent.spaceBetween}
           >
@@ -264,7 +248,7 @@ export default function NftDetails({ nft }) {
         <Box marginBottom={2}>
           {lastSale ? (
             <>
-              <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW}>
+              <Box display={Display.Flex} flexDirection={FlexDirection.Row}>
                 <Text
                   color={TextColor.textDefault}
                   variant={TextVariant.bodySmBold}
@@ -276,8 +260,8 @@ export default function NftDetails({ nft }) {
                   {t('lastSold')}
                 </Text>
                 <Box
-                  display={DISPLAY.FLEX}
+                  display={Display.Flex}
-                  flexDirection={FLEX_DIRECTION.ROW}
+                  flexDirection={FlexDirection.Row}
                   className="nft-details__contract-wrapper"
                 >
                   <Text
@@ -291,7 +275,7 @@ export default function NftDetails({ nft }) {
                   </Text>
                 </Box>
               </Box>
-              <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW}>
+              <Box display={Display.Flex} flexDirection={FlexDirection.Row}>
                 <Text
                   color={TextColor.textDefault}
                   variant={TextVariant.bodySmBold}
@@ -303,8 +287,8 @@ export default function NftDetails({ nft }) {
                   {t('lastPriceSold')}
                 </Text>
                 <Box
-                  display={DISPLAY.FLEX}
+                  display={Display.Flex}
-                  flexDirection={FLEX_DIRECTION.ROW}
+                  flexDirection={FlexDirection.Row}
                   className="nft-details__contract-wrapper"
                 >
                   <Text
@@ -322,7 +306,7 @@ export default function NftDetails({ nft }) {
               </Box>
             </>
           ) : null}
-          <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW}>
+          <Box display={Display.Flex} flexDirection={FlexDirection.Row}>
             <Text
               color={TextColor.textDefault}
               variant={TextVariant.bodySmBold}
@@ -357,7 +341,7 @@ export default function NftDetails({ nft }) {
             </Text>
           </Box>
           {imageThumbnail ? (
-            <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW}>
+            <Box display={Display.Flex} flexDirection={FlexDirection.Row}>
               <Text
                 color={TextColor.textDefault}
                 variant={TextVariant.bodySmBold}
@@ -388,7 +372,7 @@ export default function NftDetails({ nft }) {
               </Text>
             </Box>
           ) : null}
-          <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW}>
+          <Box display={Display.Flex} flexDirection={FlexDirection.Row}>
             <Text
               color={TextColor.textDefault}
               variant={TextVariant.bodySmBold}
@@ -400,8 +384,8 @@ export default function NftDetails({ nft }) {
               {t('contractAddress')}
             </Text>
             <Box
-              display={DISPLAY.FLEX}
+              display={Display.Flex}
-              flexDirection={FLEX_DIRECTION.ROW}
+              flexDirection={FlexDirection.Row}
               className="nft-details__contract-wrapper"
             >
               <Text

ui/components/app/nft-details/nft-details.test.js

@@ -203,6 +203,13 @@ describe('NFT Details', () => {
           providerConfig: {
             chainId: '0x89',
           },
+          networkConfigurations: {
+            testNetworkConfigurationId: {
+              rpcUrl: 'https://testrpc.com',
+              chainId: '0x89',
+              nickname: 'Custom Mainnet RPC',
+            },
+          },
         },
       };
       const polygonMockStore = configureMockStore([thunk])(polygonState);
@@ -263,6 +270,13 @@ describe('NFT Details', () => {
           providerConfig: {
             chainId: '0x99',
           },
+          networkConfigurations: {
+            testNetworkConfigurationId: {
+              rpcUrl: 'https://testrpc.com',
+              chainId: '0x99',
+              nickname: 'Custom Mainnet RPC',
+            },
+          },
         },
       };
       const randomNetworkMockStore = configureMockStore([thunk])(

ui/components/app/nfts-items/nfts-items.js

@@ -31,8 +31,6 @@ import { usePrevious } from '../../../hooks/usePrevious';
 import { getNftsDropdownState } from '../../../ducks/metamask/metamask';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { Icon, IconName } from '../../component-library';
-import NftDefaultImage from '../nft-default-image';
-import Card from '../../ui/card/card';
 import { NftItem } from '../../multichain/nft-item';
 
 const width =
@@ -171,7 +169,7 @@ export default function NftsItems({
         {isExpanded ? (
           <Box display={DISPLAY.FLEX} flexWrap={FLEX_WRAP.WRAP} gap={4}>
             {nfts.map((nft, i) => {
-              const { image, address, tokenId, backgroundColor, name } = nft;
+              const { image, address, tokenId, name } = nft;
               const nftImage = getAssetImageURL(image, ipfsGateway);
               const nftImageAlt = getNftImageAlt(nft);
               const handleImageClick = () =>
@@ -183,49 +181,16 @@ export default function NftsItems({
                   key={`nft-${i}`}
                   className="nfts-items__item-wrapper"
                 >
-                  {process.env.MULTICHAIN ? (
+                  <NftItem
-                    <NftItem
+                    src={nftImage}
-                      src={nftImage}
+                    alt={nftImageAlt}
-                      alt={nftImageAlt}
+                    name={name}
-                      name={name}
+                    tokenId={tokenId}
-                      tokenId={tokenId}
+                    networkName={currentChain.nickname}
-                      networkName={currentChain.nickname}
+                    networkSrc={currentChain.rpcPrefs?.imageUrl}
-                      networkSrc={currentChain.rpcPrefs?.imageUrl}
+                    onClick={handleImageClick}
-                      onClick={handleImageClick}
+                    clickable
-                      clickable
+                  />
-                    />
-                  ) : (
-                    <Card
-                      className="nfts-items__item-wrapper__card"
-                      padding={0}
-                      justifyContent={JustifyContent.center}
-                    >
-                      {nftImage ? (
-                        <button
-                          className="nfts-items__item"
-                          style={{
-                            backgroundColor,
-                            borderRadius: 4,
-                          }}
-                          onClick={handleImageClick}
-                        >
-                          <img
-                            className="nfts-items__item-image"
-                            data-testid="nft-image"
-                            src={nftImage}
-                            alt={nftImageAlt}
-                          />
-                        </button>
-                      ) : (
-                        <NftDefaultImage
-                          name={name}
-                          tokenId={tokenId}
-                          handleImageClick={handleImageClick}
-                          clickable
-                        />
-                      )}
-                    </Card>
-                  )}
                 </Box>
               );
             })}