Multichain NFT network badges (#19029)

* adding badges for nfts

* fixing default nft styling issue

* adding multichain flag, making borderRadius inline

* Apply suggestions from code review

Co-authored-by: George Marshall <george.marshall@consensys.net>

* fixing imports

* removing nullcheck for guaranteed fields

* moving badgewrapper UI into multichain component

* using Box for button, removing inline style, border-radius for NFT default image

* adding nft badges to NFT Details page

* nits, snap update

* fixing/refactoring nftdefaultimage display, adding clickable, removing handleimageclick, refactor NFTItem, required props

* editing nft-default-image story, test, and snap

* Updating to fix positioning, use Box props to reduce CSS and BEM naming conventions

* moving minor styling to Box props, adding comment

* display block typo

---------

Co-authored-by: George Marshall <george.marshall@consensys.net>

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

@@ -2,13 +2,13 @@
 
 exports[`NFT Default Image should match snapshot with all provided props 1`] = `
 <div>
-  <button
+  <div
-    class="nft-default nft-default--clickable"
+    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"
     data-testid="nft-default-image"
     tabindex="0"
   >
     <h6
-      class="box mm-text nft-default__text mm-text--body-sm box--flex-direction-row box--color-text-default"
+      class="box mm-text nft-default__text mm-text--body-sm mm-text--ellipsis mm-text--text-align-center box--flex-direction-row box--color-text-default"
     >
       NFT Name
        
@@ -16,19 +16,19 @@ exports[`NFT Default Image should match snapshot with all provided props 1`] = `
        #
       123
     </h6>
-  </button>
+  </div>
 </div>
 `;
 
-exports[`NFT Default Image should match snapshot with missing image click handler 1`] = `
+exports[`NFT Default Image should match snapshot with missing clickable prop 1`] = `
 <div>
   <div
-    class="nft-default"
+    class="box nft-default box--display-flex box--flex-direction-row box--width-full box--background-color-background-alternative box--rounded-lg"
     data-testid="nft-default-image"
     tabindex="0"
   >
     <h6
-      class="box mm-text nft-default__text mm-text--body-sm box--flex-direction-row box--color-text-default"
+      class="box mm-text nft-default__text mm-text--body-sm mm-text--ellipsis mm-text--text-align-center box--flex-direction-row box--color-text-default"
     >
       NFT Name
        
@@ -43,12 +43,12 @@ exports[`NFT Default Image should match snapshot with missing image click handle
 exports[`NFT Default Image should render with no props 1`] = `
 <div>
   <div
-    class="nft-default"
+    class="box nft-default box--display-flex box--flex-direction-row box--width-full box--background-color-background-alternative box--rounded-lg"
     data-testid="nft-default-image"
     tabindex="0"
   >
     <h6
-      class="box mm-text nft-default__text mm-text--body-sm box--flex-direction-row box--color-text-default"
+      class="box mm-text nft-default__text mm-text--body-sm mm-text--ellipsis mm-text--text-align-center box--flex-direction-row box--color-text-default"
     >
       [unknownCollection]
        

ui/components/app/nft-default-image/index.scss

@@ -1,22 +1,17 @@
 .nft-default {
-  background-color: var(--color-background-alternative);
+  padding-top: 100%;
-  padding-top: 100%; // retains 1:1 aspect ratio
   position: relative;
-  width: 100%;
+
+  &--clickable {
+    cursor: pointer;
+  }
 
   &__text {
     overflow: hidden;
-    text-overflow: ellipsis;
-    text-align: center;
     position: absolute;
-    white-space: nowrap;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: calc(100% - 32px);
   }
-
-  &--clickable {
-    cursor: pointer;
-  }
 }

ui/components/app/nft-default-image/nft-default-image.js

@@ -1,26 +1,46 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { TextVariant } from '../../../helpers/constants/design-system';
+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';
 
-export default function NftDefaultImage({ name, tokenId, handleImageClick }) {
+export default function NftDefaultImage({ name, tokenId, clickable = false }) {
   const t = useI18nContext();
-  const Tag = handleImageClick ? 'button' : 'div';
   return (
-    <Tag
+    <Box
       tabIndex={0}
       data-testid="nft-default-image"
       className={classnames('nft-default', {
-        'nft-default--clickable': handleImageClick,
+        'nft-default--clickable': clickable,
       })}
-      onClick={handleImageClick}
+      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"
       >
-      <Text variant={TextVariant.bodySm} as="h6" className="nft-default__text">
         {name ?? t('unknownCollection')} <br /> #{tokenId}
       </Text>
-    </Tag>
+    </Box>
   );
 }
 
@@ -34,7 +54,7 @@ NftDefaultImage.propTypes = {
    */
   tokenId: PropTypes.string,
   /**
-   * The click handler for the NFT default image
+   * Controls the css class for the cursor hover
    */
-  handleImageClick: PropTypes.func,
+  clickable: PropTypes.bool,
 };

ui/components/app/nft-default-image/nft-default-image.stories.js

@@ -11,14 +11,14 @@ export default {
     tokenId: {
       control: 'text',
     },
-    handleImageClick: {
+    clickable: {
-      action: 'handleImageClick',
+      control: 'boolean',
     },
   },
   args: {
     name: null,
     tokenId: '12345',
-    handleImageClick: null,
+    clickable: true,
   },
 };
 
@@ -29,14 +29,3 @@ export const DefaultStory = (args) => (
 );
 
 DefaultStory.storyName = 'Default';
-
-export const HandleImageClick = (args) => (
-  <div style={{ width: 200, height: 200 }}>
-    <NftDefaultImage {...args} />
-  </div>
-);
-
-HandleImageClick.args = {
-  // eslint-disable-next-line no-alert
-  handleImageClick: () => window.alert('NftDefaultImage clicked!'),
-};

ui/components/app/nft-default-image/nft-default-image.test.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { fireEvent } from '@testing-library/react';
 import { renderWithProvider } from '../../../../test/lib/render-helpers';
 import NftDefaultImage from '.';
 
@@ -14,7 +13,7 @@ describe('NFT Default Image', () => {
     const props = {
       name: 'NFT Name',
       tokenId: '123',
-      handleImageClick: jest.fn(),
+      clickable: true,
     };
 
     const { container } = renderWithProvider(<NftDefaultImage {...props} />);
@@ -22,7 +21,7 @@ describe('NFT Default Image', () => {
     expect(container).toMatchSnapshot();
   });
 
-  it('should match snapshot with missing image click handler', () => {
+  it('should match snapshot with missing clickable prop', () => {
     const props = {
       name: 'NFT Name',
       tokenId: '123',
@@ -58,18 +57,17 @@ describe('NFT Default Image', () => {
     expect(nftElement).toBeInTheDocument();
   });
 
-  it('should handle image click', () => {
+  it('does not render component with clickable class when clickable is false', () => {
-    const props = {
+    const { container } = renderWithProvider(
-      handleImageClick: jest.fn(),
+      <NftDefaultImage name="NFT Name" tokenId="123" clickable={false} />,
-    };
-
-    const { queryByTestId } = renderWithProvider(
-      <NftDefaultImage {...props} />,
     );
+    expect(container.firstChild).not.toHaveClass('nft-default--clickable');
+  });
 
-    const nftImageElement = queryByTestId('nft-default-image');
+  it('renders component with clickable class when clickable is true', () => {
-    fireEvent.click(nftImageElement);
+    const { container } = renderWithProvider(
-
+      <NftDefaultImage name="NFT Name" tokenId="123" clickable />,
-    expect(props.handleImageClick).toHaveBeenCalled();
+    );
+    expect(container.firstChild).toHaveClass('nft-default--clickable');
   });
 });

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

@@ -40,7 +40,7 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
     class="box nft-details box--flex-direction-row"
   >
     <div
-      class="nft-details__top-section"
+      class="box nft-details__top-section box--gap-6 box--flex-direction-row"
     >
       <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"

ui/components/app/nft-details/index.scss

@@ -50,6 +50,18 @@ $spacer-break-small: 16px;
     }
   }
 
+  &__nft-item {
+    margin-bottom: $spacer-break-small;
+
+    @include screen-sm-min {
+      margin-right: $spacer-break-large;
+      margin-bottom: 0;
+      max-width: $card-width-break-large;
+      flex: 0 0 $card-width-break-large;
+      height: $card-width-break-large;
+    }
+  }
+
   &__image {
     width: 100%;
     object-fit: contain;

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

@@ -25,6 +25,7 @@ import {
 import { getNftImageAlt } from '../../../helpers/utils/nfts';
 import {
   getCurrentChainId,
+  getCurrentNetwork,
   getIpfsGateway,
   getSelectedIdentity,
 } from '../../../selectors';
@@ -55,6 +56,7 @@ 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';
+import { NftItem } from '../../multichain/nft-item';
 
 export default function NftDetails({ nft }) {
   const {
@@ -75,6 +77,8 @@ export default function NftDetails({ nft }) {
   const ipfsGateway = useSelector(getIpfsGateway);
   const nftContracts = useSelector(getNftContracts);
   const currentNetwork = useSelector(getCurrentChainId);
+  const currentChain = useSelector(getCurrentNetwork);
+
   const [addressCopied, handleAddressCopy] = useCopyToClipboard();
 
   const nftContractName = nftContracts.find(({ address: contractAddress }) =>
@@ -178,7 +182,19 @@ export default function NftDetails({ nft }) {
         }
       />
       <Box className="nft-details">
-        <div className="nft-details__top-section">
+        <Box className="nft-details__top-section" gap={6}>
+          {process.env.MULTICHAIN ? (
+            <Box className="nft-details__nft-item">
+              <NftItem
+                src={image ? nftImageURL : ''}
+                alt={image ? nftImageAlt : ''}
+                name={name}
+                tokenId={tokenId}
+                networkName={currentChain.nickname}
+                networkSrc={currentChain.rpcPrefs?.imageUrl}
+              />
+            </Box>
+          ) : (
             <Card
               padding={0}
               justifyContent={JustifyContent.center}
@@ -194,6 +210,7 @@ export default function NftDetails({ nft }) {
                 <NftDefaultImage name={name} tokenId={tokenId} />
               )}
             </Card>
+          )}
           <Box
             flexDirection={FLEX_DIRECTION.COLUMN}
             className="nft-details__info"
@@ -243,7 +260,7 @@ export default function NftDetails({ nft }) {
             ) : null}
             {inPopUp ? null : renderSendButton()}
           </Box>
-        </div>
+        </Box>
         <Box marginBottom={2}>
           {lastSale ? (
             <>

ui/components/app/nfts-items/index.scss

@@ -46,7 +46,6 @@
     padding: 0;
 
     &-image {
-      border-radius: 4px;
       width: 100%;
       height: 100%;
       cursor: pointer;

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

@@ -5,7 +5,6 @@ import { useHistory } from 'react-router-dom';
 import { isEqual } from 'lodash';
 import Box from '../../ui/box';
 import Typography from '../../ui/typography/typography';
-import Card from '../../ui/card';
 import {
   Color,
   TypographyVariant,
@@ -22,6 +21,7 @@ import {
   getCurrentChainId,
   getIpfsGateway,
   getSelectedAddress,
+  getCurrentNetwork,
 } from '../../../selectors';
 import { ASSET_ROUTE } from '../../../helpers/constants/routes';
 import { getAssetImageURL } from '../../../helpers/utils/util';
@@ -32,6 +32,8 @@ 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 =
   getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
@@ -50,6 +52,7 @@ export default function NftsItems({
   const previousCollectionKeys = usePrevious(collectionsKeys);
   const selectedAddress = useSelector(getSelectedAddress);
   const chainId = useSelector(getCurrentChainId);
+  const currentChain = useSelector(getCurrentNetwork);
   const t = useI18nContext();
 
   useEffect(() => {
@@ -173,7 +176,6 @@ export default function NftsItems({
               const nftImageAlt = getNftImageAlt(nft);
               const handleImageClick = () =>
                 history.push(`${ASSET_ROUTE}/${address}/${tokenId}`);
-
               return (
                 <Box
                   data-testid="nft-wrapper"
@@ -181,16 +183,29 @@ export default function NftsItems({
                   key={`nft-${i}`}
                   className="nfts-items__item-wrapper"
                 >
+                  {process.env.MULTICHAIN ? (
+                    <NftItem
+                      src={nftImage}
+                      alt={nftImageAlt}
+                      name={name}
+                      tokenId={tokenId}
+                      networkName={currentChain.nickname}
+                      networkSrc={currentChain.rpcPrefs?.imageUrl}
+                      onClick={handleImageClick}
+                      clickable
+                    />
+                  ) : (
                     <Card
+                      className="nfts-items__item-wrapper__card"
                       padding={0}
                       justifyContent={JustifyContent.center}
-                    className="nfts-items__item-wrapper__card"
                     >
                       {nftImage ? (
                         <button
                           className="nfts-items__item"
                           style={{
                             backgroundColor,
+                            borderRadius: 4,
                           }}
                           onClick={handleImageClick}
                         >
@@ -206,9 +221,11 @@ export default function NftsItems({
                           name={name}
                           tokenId={tokenId}
                           handleImageClick={handleImageClick}
+                          clickable
                         />
                       )}
                     </Card>
+                  )}
                 </Box>
               );
             })}

ui/components/multichain/multichain-components.scss

@@ -15,3 +15,4 @@
 @import 'network-list-item/';
 @import 'network-list-menu/';
 @import 'product-tour-popover/product-tour-popover';
+@import 'nft-item/nft-item';

ui/components/multichain/nft-item/index.js

@@ -0,0 +1 @@
+export { NftItem } from './nft-item';

ui/components/multichain/nft-item/nft-item.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import NftDefaultImage from '../../app/nft-default-image/nft-default-image';
+import {
+  AvatarNetwork,
+  BadgeWrapper,
+  BadgeWrapperAnchorElementShape,
+} from '../../component-library';
+import {
+  BackgroundColor,
+  Display,
+  JustifyContent,
+  Size,
+} from '../../../helpers/constants/design-system';
+import Box from '../../ui/box/box';
+
+export const NftItem = ({
+  alt,
+  name,
+  src,
+  networkName,
+  networkSrc,
+  tokenId,
+  onClick,
+  clickable = false,
+}) => {
+  return (
+    <Box
+      className="nft-item__container"
+      data-testid="nft-item"
+      as="button"
+      onClick={onClick}
+    >
+      <BadgeWrapper
+        className={classnames('nft-item__badge-wrapper', {
+          'nft-item__badge-wrapper__clickable': clickable,
+        })}
+        anchorElementShape={BadgeWrapperAnchorElementShape.circular}
+        positionObj={{ top: -4, right: -4 }}
+        display={Display.BLOCK}
+        badge={
+          <AvatarNetwork
+            className="nft-item__network-badge"
+            data-testid="nft-network-badge"
+            size={Size.SM}
+            name={networkName}
+            src={networkSrc}
+            borderWidth={2}
+            borderColor={BackgroundColor.backgroundDefault}
+            /* We are using BackgroundColor.backgroundDefault here because
+             * there is no equivalent BorderColor to get the "cutout" effect
+             */
+          />
+        }
+      >
+        {src ? (
+          <Box
+            className="nft-item__item nft-item__item-image"
+            data-testid="nft-image"
+            as="img"
+            src={src}
+            alt={alt}
+            display={Display.Block}
+            justifyContent={JustifyContent.center}
+          />
+        ) : (
+          <NftDefaultImage
+            className="nft-item__default-image"
+            data-testid="nft-default-image"
+            name={name}
+            tokenId={tokenId}
+            clickable={clickable}
+          />
+        )}
+      </BadgeWrapper>
+    </Box>
+  );
+};
+
+NftItem.propTypes = {
+  src: PropTypes.string,
+  alt: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  networkName: PropTypes.string.isRequired,
+  networkSrc: PropTypes.string.isRequired,
+  tokenId: PropTypes.string.isRequired,
+  onClick: PropTypes.func,
+  clickable: PropTypes.bool,
+};

ui/components/multichain/nft-item/nft-item.scss

@@ -0,0 +1,27 @@
+.nft-item {
+  &__container {
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    border-radius: 8px;
+    cursor: unset;
+  }
+
+  &__badge-wrapper {
+    max-width: 100%;
+    position: relative;
+    align-self: center;
+    cursor: unset;
+
+    &__clickable {
+      cursor: pointer;
+    }
+  }
+
+  &__item-image {
+    border-radius: 8px;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+  }
+}

ui/components/multichain/nft-item/nft-item.stories.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { NftItem } from './nft-item';
+
+export default {
+  title: 'Components/Multichain/NftItem',
+  argTypes: {
+    alt: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+    src: {
+      control: 'text',
+    },
+    networkName: {
+      control: 'text',
+    },
+    networkSrc: {
+      control: 'text',
+    },
+    tokenId: {
+      control: 'text',
+    },
+    onClick: {
+      action: 'onClick',
+    },
+  },
+  args: {
+    alt: 'Join Archer and his 6,969 frens as they take a trip further down the rabbit hole in search of a world with vibrant art, great vibes, and psychedelic tales.',
+    name: 'Monkey Trip #2422',
+    src: 'https://i.seadn.io/gcs/files/878e670c38e0f02e58bf730c51c30d0c.jpg',
+    networkName: 'Ethereum Mainnet',
+    networkSrc: './images/eth_logo.png',
+    tokenId: '2422',
+  },
+};
+
+export const DefaultStory = (args) => <NftItem {...args} />;
+
+DefaultStory.storyName = 'Default';

ui/components/multichain/nft-item/nft-item.test.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { NftItem } from '.';
+
+describe('NftItem component', () => {
+  const mockOnClick = jest.fn();
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders correctly with an image source', () => {
+    const { getByTestId } = render(
+      <NftItem
+        alt="Test Alt"
+        backgroundColor="red"
+        name="Test NFT"
+        src="test-src"
+        networkName="Test Network"
+        networkSrc="test-network-src"
+        tokenId="1"
+        onClick={mockOnClick}
+      />,
+    );
+
+    expect(getByTestId('nft-item')).toBeInTheDocument();
+    expect(getByTestId('nft-network-badge')).toBeInTheDocument();
+    expect(getByTestId('nft-image')).toBeInTheDocument();
+    expect(getByTestId('nft-image')).toHaveAttribute('src', 'test-src');
+  });
+
+  it('renders correctly with default image when no image source is provided', () => {
+    const { getByTestId, queryByTestId } = render(
+      <NftItem
+        alt="Test Alt"
+        backgroundColor="red"
+        name="Test NFT"
+        src=""
+        networkName="Test Network"
+        networkSrc="test-network-src"
+        tokenId="1"
+        onClick={mockOnClick}
+      />,
+    );
+
+    expect(getByTestId('nft-item')).toBeInTheDocument();
+    expect(getByTestId('nft-network-badge')).toBeInTheDocument();
+    expect(queryByTestId('nft-image')).not.toBeInTheDocument();
+    expect(getByTestId('nft-default-image')).toBeInTheDocument();
+  });
+
+  it('calls onClick when the NFT image is clicked', () => {
+    const { getByTestId } = render(
+      <NftItem
+        alt="Test Alt"
+        backgroundColor="red"
+        name="Test NFT"
+        src="test-src"
+        networkName="Test Network"
+        networkSrc="test-network-src"
+        tokenId="1"
+        onClick={mockOnClick}
+      />,
+    );
+
+    fireEvent.click(getByTestId('nft-image'));
+    expect(mockOnClick).toHaveBeenCalled();
+  });
+});