UX Multichain: Added background color of test networks (#20032)

* added background color to token list item

* updated badge color for nft-item

* updated nft-item tests

ui/components/multichain/app-header/app-header.js

@@ -41,6 +41,7 @@ import {
   getOriginOfCurrentTab,
   getSelectedIdentity,
   getShowProductTour,
+  getTestNetworkBackgroundColor,
   ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
   getSelectedAddress,
   ///: END:ONLY_INCLUDE_IN
@@ -89,8 +90,8 @@ export const AppHeader = ({ location }) => {
 
   // Used for network icon / dropdown
   const currentNetwork = useSelector(getCurrentNetwork);
+  const testNetworkBackgroundColor = useSelector(getTestNetworkBackgroundColor);
 
-  // Used to get the environment and connection status
   const popupStatus = getEnvironmentType() === ENVIRONMENT_TYPE_POPUP;
   const showStatus =
     getEnvironmentType() === ENVIRONMENT_TYPE_POPUP &&
@@ -206,6 +207,9 @@ export const AppHeader = ({ location }) => {
                 <Box className="multichain-app-header__contents__container">
                   <Tooltip title={currentNetwork?.nickname} position="right">
                     <PickerNetwork
+                      avatarNetworkProps={{
+                        backgroundColor: testNetworkBackgroundColor,
+                      }}
                       className="multichain-app-header__contents--avatar-network"
                       ref={menuRef}
                       as="button"
@@ -225,6 +229,9 @@ export const AppHeader = ({ location }) => {
               ) : (
                 <div>
                   <PickerNetwork
+                    avatarNetworkProps={{
+                      backgroundColor: testNetworkBackgroundColor,
+                    }}
                     margin={2}
                     label={currentNetwork?.nickname}
                     src={currentNetwork?.rpcPrefs?.imageUrl}
@@ -411,6 +418,9 @@ export const AppHeader = ({ location }) => {
             >
               <div>
                 <PickerNetwork
+                  avatarNetworkProps={{
+                    backgroundColor: testNetworkBackgroundColor,
+                  }}
                   label={currentNetwork?.nickname}
                   src={currentNetwork?.rpcPrefs?.imageUrl}
                   onClick={(e) => {

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import { useSelector } from 'react-redux';
 import NftDefaultImage from '../../app/nft-default-image/nft-default-image';
 import {
   AvatarNetwork,
@@ -14,6 +15,7 @@ import {
   JustifyContent,
   Size,
 } from '../../../helpers/constants/design-system';
+import { getTestNetworkBackgroundColor } from '../../../selectors';
 
 export const NftItem = ({
   alt,
@@ -25,6 +27,7 @@ export const NftItem = ({
   onClick,
   clickable = false,
 }) => {
+  const testNetworkBackgroundColor = useSelector(getTestNetworkBackgroundColor);
   return (
     <Box
       className="nft-item__container"
@@ -42,6 +45,7 @@ export const NftItem = ({
         badge={
           <AvatarNetwork
             className="nft-item__network-badge"
+            backgroundColor={testNetworkBackgroundColor}
             data-testid="nft-network-badge"
             size={Size.SM}
             name={networkName}

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

@@ -1,70 +1,49 @@
 import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
+import configureStore from 'redux-mock-store';
+import { fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
+import mockState from '../../../../test/data/mock-state.json';
+import { renderWithProvider } from '../../../../test/lib/render-helpers';
 import { NftItem } from '.';
 
 describe('NftItem component', () => {
-  const mockOnClick = jest.fn();
+  const store = configureStore()(mockState);
+  describe('render', () => {
+    const props = {
+      alt: 'Test Alt',
+      backgroundColor: 'red',
+      name: 'Test NFT',
+      src: 'test-src',
+      networkName: 'Test Network',
+      networkSrc: 'test-network-src',
+      tokenId: '1',
+      onClick: jest.fn(),
+    };
 
-  afterEach(() => {
+    it('renders correctly with an image source', () => {
-    jest.clearAllMocks();
+      const { getByTestId } = renderWithProvider(<NftItem {...props} />, store);
-  });
 
-  it('renders correctly with an image source', () => {
+      expect(getByTestId('nft-item')).toBeInTheDocument();
-    const { getByTestId } = render(
+      expect(getByTestId('nft-network-badge')).toBeInTheDocument();
-      <NftItem
+      expect(getByTestId('nft-image')).toBeInTheDocument();
-        alt="Test Alt"
+      expect(getByTestId('nft-image')).toHaveAttribute('src', 'test-src');
-        backgroundColor="red"
+    });
-        name="Test NFT"
-        src="test-src"
-        networkName="Test Network"
-        networkSrc="test-network-src"
-        tokenId="1"
-        onClick={mockOnClick}
-      />,
-    );
 
-    expect(getByTestId('nft-item')).toBeInTheDocument();
+    it('renders correctly with default image when no image source is provided', () => {
-    expect(getByTestId('nft-network-badge')).toBeInTheDocument();
+      const { getByTestId, queryByTestId } = renderWithProvider(
-    expect(getByTestId('nft-image')).toBeInTheDocument();
+        <NftItem {...props} src="" />,
-    expect(getByTestId('nft-image')).toHaveAttribute('src', 'test-src');
+        store,
-  });
+      );
 
-  it('renders correctly with default image when no image source is provided', () => {
+      expect(queryByTestId('nft-image')).not.toBeInTheDocument();
-    const { getByTestId, queryByTestId } = render(
+      expect(getByTestId('nft-default-image')).toBeInTheDocument();
-      <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();
+    it('calls onClick when the NFT image is clicked', () => {
-    expect(getByTestId('nft-network-badge')).toBeInTheDocument();
+      const { getByTestId } = renderWithProvider(<NftItem {...props} />, store);
-    expect(queryByTestId('nft-image')).not.toBeInTheDocument();
-    expect(getByTestId('nft-default-image')).toBeInTheDocument();
-  });
 
-  it('calls onClick when the NFT image is clicked', () => {
+      fireEvent.click(getByTestId('nft-image'));
-    const { getByTestId } = render(
+      expect(props.onClick).toHaveBeenCalled();
-      <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();
   });
 });

ui/components/multichain/token-list-item/token-list-item.js

@@ -25,6 +25,7 @@ import {
   getCurrentChainId,
   getCurrentNetwork,
   getNativeCurrencyImage,
+  getTestNetworkBackgroundColor,
 } from '../../../selectors';
 import Tooltip from '../../ui/tooltip';
 import { useI18nContext } from '../../../hooks/useI18nContext';
@@ -50,6 +51,8 @@ export const TokenListItem = ({
 
   // Used for badge icon
   const currentNetwork = useSelector(getCurrentNetwork);
+  const testNetworkBackgroundColor = useSelector(getTestNetworkBackgroundColor);
+
   return (
     <Box
       className={classnames('multichain-token-list-item', className)}
@@ -86,6 +89,7 @@ export const TokenListItem = ({
               size={Size.XS}
               name={currentNetwork?.nickname}
               src={currentNetwork?.rpcPrefs?.imageUrl}
+              backgroundColor={testNetworkBackgroundColor}
               borderColor={
                 primaryTokenImage
                   ? BorderColor.borderMuted

ui/selectors/selectors.js

@@ -92,6 +92,7 @@ import {
   getValueFromWeiHex,
   hexToDecimal,
 } from '../../shared/modules/conversion.utils';
+import { BackgroundColor } from '../helpers/constants/design-system';
 ///: BEGIN:ONLY_INCLUDE_IN(snaps)
 import { SNAPS_VIEW_ROUTE } from '../helpers/constants/routes';
 import { getPermissionSubjects } from './permissions';
@@ -603,6 +604,18 @@ export function getShowTestNetworks(state) {
   return Boolean(showTestNetworks);
 }
 
+export function getTestNetworkBackgroundColor(state) {
+  const currentNetwork = state.metamask.providerConfig.ticker;
+  switch (true) {
+    case currentNetwork?.includes(GOERLI_DISPLAY_NAME):
+      return BackgroundColor.goerli;
+    case currentNetwork?.includes(SEPOLIA_DISPLAY_NAME):
+      return BackgroundColor.sepolia;
+    default:
+      return undefined;
+  }
+}
+
 export function getDisabledRpcMethodPreferences(state) {
   return state.metamask.disabledRpcMethodPreferences;
 }