Updated 1 NetworkDisplay component

ui/components/app/confirm-page-container/confirm-page-container-header/__snapshots__/confirm-page-container-header.component.test.js.snap

@@ -24,28 +24,20 @@ exports[`Confirm Detail Row Component should match snapshot 1`] = `
           Edit
         </span>
       </div>
-      <div
-        class="network-display chip chip--with-left-icon chip--border-color-border-muted chip--background-color-undefined chip--max-content"
-        data-testid="network-display"
+      <button
+        class="mm-box mm-picker-network mm-picker-network-div mm-box--padding-right-4 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-border-muted box--border-style-solid box--border-width-1"
       >
         <div
-          class="chip__left-icon"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs 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-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
         >
-          <div
-            class="color-indicator color-indicator--filled color-indicator--color-icon-muted color-indicator--size-lg"
-            data-testid="color-icon-icon-muted"
-          >
-            <i
-              class="color-indicator__icon fa fa-question"
-            />
-          </div>
+          P
         </div>
-        <span
-          class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography chip__label typography--h7 typography--weight-normal typography--style-normal typography--color-text-alternative"
+        <p
+          class="mm-box mm-text mm-text--body-sm mm-text--ellipsis mm-box--color-text-alternative"
         >
           Private network
-        </span>
-      </div>
+        </p>
+      </button>
     </div>
   </div>
 </div>

ui/components/app/confirm-page-container/confirm-page-container-header/confirm-page-container-header.component.js

@@ -1,16 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
 import {
   ENVIRONMENT_TYPE_POPUP,
   ENVIRONMENT_TYPE_NOTIFICATION,
 } from '../../../../../shared/constants/app';
 import { getEnvironmentType } from '../../../../../app/scripts/lib/util';
-import NetworkDisplay from '../../network-display';
 import Identicon from '../../../ui/identicon';
 import { shortenAddress } from '../../../../helpers/utils/util';
 import AccountMismatchWarning from '../../../ui/account-mismatch-warning/account-mismatch-warning.component';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
-import { Icon, IconName } from '../../../component-library';
+import { Icon, IconName, PickerNetwork } from '../../../component-library';
+import { BackgroundColor } from '../../../../helpers/constants/design-system';
+import { getTestNetworkBackgroundColor } from '../../../../selectors';
+import { getProviderConfig } from '../../../../ducks/metamask/metamask';
+import { NETWORK_TYPES } from '../../../../../shared/constants/network';
+import { getNetworkLabelKey } from '../../../../helpers/utils/i18n-helper';
 
 export default function ConfirmPageContainerHeader({
   onEdit,
@@ -21,6 +26,9 @@ export default function ConfirmPageContainerHeader({
 }) {
   const t = useI18nContext();
   const windowType = getEnvironmentType();
+  const { nickname, type: networkType } = useSelector(getProviderConfig);
+  const testNetworkBackgroundColor = useSelector(getTestNetworkBackgroundColor);
+
   const isFullScreen =
     windowType !== ENVIRONMENT_TYPE_NOTIFICATION &&
     windowType !== ENVIRONMENT_TYPE_POPUP;
@@ -64,7 +72,19 @@ export default function ConfirmPageContainerHeader({
             </span>
           </div>
         )}
-        {isFullScreen ? null : <NetworkDisplay />}
+        {isFullScreen ? null : (
+          <PickerNetwork
+            label={
+              networkType === NETWORK_TYPES.RPC
+                ? nickname ?? t('privateNetwork')
+                : t(getNetworkLabelKey(networkType))
+            }
+            backgroundColor={BackgroundColor.transparent}
+            avatarNetworkProps={{
+              backgroundColor: testNetworkBackgroundColor,
+            }}
+          />
+        )}
       </div>
       {children}
     </div>

ui/components/component-library/picker-network/__snapshots__/picker-network.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`PickerNetwork should render the label inside the PickerNetwork 1`] = `
 <div>
   <button
-    class="mm-box mm-picker-network mm-box--padding-right-4 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--background-color-background-alternative mm-box--rounded-pill"
+    class="mm-box mm-picker-network mm-picker-network-div mm-box--padding-right-4 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--background-color-background-alternative mm-box--rounded-pill mm-box--border-color-border-muted box--border-style-solid box--border-width-1"
     data-testid="picker-network"
   >
     <div
@@ -12,14 +12,10 @@ exports[`PickerNetwork should render the label inside the PickerNetwork 1`] = `
       I
     </div>
     <p
-      class="mm-box mm-text mm-text--body-sm mm-text--ellipsis mm-box--color-text-default"
+      class="mm-box mm-text mm-text--body-sm mm-text--ellipsis mm-box--color-text-alternative"
     >
       Imported
     </p>
-    <span
-      class="mm-box mm-picker-network__arrow-down-icon mm-icon mm-icon--size-xs mm-box--display-inline-block mm-box--color-icon-default"
-      style="mask-image: url('./images/icons/arrow-down.svg');"
-    />
   </button>
 </div>
 `;

ui/components/component-library/picker-network/picker-network.scss

@@ -3,8 +3,14 @@
 
   max-width: fit-content;
   height: var(--picker-network-height);
+}
 
+.mm-picker-network-button {
   &:active {
     background-color: var(--color-background-default-hover);
   }
 }
+
+.mm-picker-network-div {
+  cursor: default;
+}

ui/components/component-library/picker-network/picker-network.tsx

@@ -1,13 +1,6 @@
 import React from 'react';
 import classnames from 'classnames';
-import {
-  AlignItems,
-  BorderRadius,
-  TextVariant,
-  IconColor,
-  BackgroundColor,
-  Display,
-} from '../../../helpers/constants/design-system';
+import { BoxProps, PolymorphicRef } from '../box';
 import {
   AvatarNetwork,
   AvatarNetworkSize,
@@ -17,7 +10,16 @@ import {
   IconSize,
   Text,
 } from '..';
-import { BoxProps, PolymorphicRef } from '../box';
+import {
+  AlignItems,
+  BorderRadius,
+  TextVariant,
+  IconColor,
+  BackgroundColor,
+  Display,
+  BorderColor,
+  TextColor,
+} from '../../../helpers/constants/design-system';
 import {
   PickerNetworkComponent,
   PickerNetworkProps,
@@ -30,42 +32,61 @@ export const PickerNetwork: PickerNetworkComponent = React.forwardRef(
       avatarNetworkProps,
       iconProps,
       label,
+      labelColor,
       src,
+      backgroundColor,
       ...props
     }: PickerNetworkProps<C>,
     ref?: PolymorphicRef<C>,
   ) => {
     return (
       <Box
-        className={classnames('mm-picker-network', className)}
+        className={classnames(
+          'mm-picker-network',
+          `${
+            props.onClick ? 'mm-picker-network-button' : 'mm-picker-network-div'
+          }`,
+          className,
+        )}
         ref={ref}
         as="button"
-        backgroundColor={BackgroundColor.backgroundAlternative}
+        backgroundColor={
+          backgroundColor ?? BackgroundColor.backgroundAlternative
+        }
         alignItems={AlignItems.center}
         paddingLeft={2}
         paddingRight={4}
         gap={2}
         borderRadius={BorderRadius.pill}
         display={Display.Flex}
+        borderColor={
+          props.onClick ? BorderColor.borderDefault : BorderColor.borderMuted
+        }
         {...(props as BoxProps<C>)}
       >
         <AvatarNetwork
           className="mm-picker-network__avatar-network"
           src={src}
           name={label}
-          size={AvatarNetworkSize.Xs}
+          size={avatarNetworkProps?.size ?? AvatarNetworkSize.Xs}
           {...avatarNetworkProps}
         />
-        <Text ellipsis variant={TextVariant.bodySm}>
+        <Text
+          ellipsis
+          variant={TextVariant.bodySm}
+          color={labelColor ?? TextColor.textAlternative}
+        >
           {label}
         </Text>
-        <Icon
-          className="mm-picker-network__arrow-down-icon"
-          name={IconName.ArrowDown}
-          color={IconColor.iconDefault}
-          size={IconSize.Xs}
-          {...iconProps}
-        />
+        {props.onClick ? (
+          <Icon
+            className="mm-picker-network__arrow-down-icon"
+            name={IconName.ArrowDown}
+            color={IconColor.iconDefault}
+            size={IconSize.Xs}
+            {...iconProps}
+          />
+        ) : null}
       </Box>
     );
   },

ui/components/component-library/picker-network/picker-network.types.ts

@@ -4,6 +4,10 @@ import type {
 } from '../box';
 import { IconProps } from '../icon/icon.types';
 import { AvatarNetworkProps } from '../avatar-network/avatar-network.types';
+import {
+  BackgroundColor,
+  TextColor,
+} from '../../../helpers/constants/design-system';
 
 export interface PickerNetworkStyleUtilityProps extends StyleUtilityProps {
   /**
@@ -26,6 +30,14 @@ export interface PickerNetworkStyleUtilityProps extends StyleUtilityProps {
    * The text content of the PickerNetwork component
    */
   label: string;
+  /**
+   * The text color of the label in PickerNetwork component
+   */
+  labelColor?: TextColor;
+  /**
+   * The background color of the whole container
+   */
+  backgroundColor?: BackgroundColor;
 }
 
 export type PickerNetworkProps<C extends React.ElementType> =

ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap

@@ -207,7 +207,7 @@ exports[`App Header should match snapshot 1`] = `
     >
       <div>
         <button
-          class="mm-box mm-picker-network multichain-app-header__contents__network-picker mm-box--margin-2 mm-box--padding-right-4 mm-box--padding-left-2 mm-box--display-none mm-box--sm:display-flex mm-box--gap-2 mm-box--align-items-center mm-box--background-color-background-alternative mm-box--rounded-pill"
+          class="mm-box mm-picker-network mm-picker-network-button multichain-app-header__contents__network-picker mm-box--margin-2 mm-box--padding-right-4 mm-box--padding-left-2 mm-box--display-none mm-box--sm:display-flex mm-box--gap-2 mm-box--align-items-center mm-box--background-color-background-alternative mm-box--rounded-pill mm-box--border-color-border-default box--border-style-solid box--border-width-1"
           data-testid="network-display"
           disabled=""
         >
@@ -217,7 +217,7 @@ exports[`App Header should match snapshot 1`] = `
             C
           </div>
           <p
-            class="mm-box mm-text mm-text--body-sm mm-text--ellipsis mm-box--color-text-default"
+            class="mm-box mm-text mm-text--body-sm mm-text--ellipsis mm-box--color-text-alternative"
           >
             Chain 5
           </p>