From f11596710c6459b44c5cde827c39dd2b281adf85 Mon Sep 17 00:00:00 2001
From: Nidhi Kumari <nidhi.kumari@consensys.net>
Date: Fri, 9 Jun 2023 21:30:11 +0530
Subject: [PATCH] UX Multichain: Updated header to use picker network in popup
 view (#19514)

* updated avatar network to use picker network in popup view

* removed unused locale

* fixed the extra gap

* fixed css

* fixed lint error

* updated aria label
---
 .../multichain/app-header/app-header.js       | 40 +++++++++----------
 .../multichain/app-header/app-header.scss     |  4 +-
 2 files changed, 20 insertions(+), 24 deletions(-)

diff --git a/ui/components/multichain/app-header/app-header.js b/ui/components/multichain/app-header/app-header.js
index 8ddaf0ca5..081ed2a1b 100644
--- a/ui/components/multichain/app-header/app-header.js
+++ b/ui/components/multichain/app-header/app-header.js
@@ -20,13 +20,11 @@ import {
 import {
   AlignItems,
   BackgroundColor,
-  BLOCK_SIZES,
-  DISPLAY,
+  BlockSize,
+  Display,
   JustifyContent,
-  Size,
 } from '../../../helpers/constants/design-system';
 import {
-  AvatarNetwork,
   ButtonIcon,
   ButtonIconSize,
   IconName,
@@ -148,7 +146,7 @@ export const AppHeader = ({ location }) => {
     <>
       {isUnlocked && !popupStatus ? (
         <Box
-          display={[DISPLAY.NONE, DISPLAY.FLEX]}
+          display={[Display.None, Display.Flex]}
           alignItems={AlignItems.center}
           margin={2}
           className="multichain-app-header-logo"
@@ -166,12 +164,12 @@ export const AppHeader = ({ location }) => {
         </Box>
       ) : null}
       <Box
-        display={DISPLAY.FLEX}
+        display={Display.Flex}
         className={classnames('multichain-app-header', {
           'multichain-app-header-shadow': !isUnlocked || popupStatus,
         })}
         alignItems={AlignItems.center}
-        width={BLOCK_SIZES.FULL}
+        width={BlockSize.Full}
         backgroundColor={
           !isUnlocked || popupStatus
             ? BackgroundColor.backgroundDefault
@@ -185,7 +183,7 @@ export const AppHeader = ({ location }) => {
                 'multichain-app-header-shadow': isUnlocked && !popupStatus,
               })}
               alignItems={AlignItems.center}
-              width={BLOCK_SIZES.FULL}
+              width={BlockSize.Full}
               backgroundColor={BackgroundColor.backgroundDefault}
               padding={2}
               paddingLeft={4}
@@ -195,21 +193,19 @@ export const AppHeader = ({ location }) => {
               {popupStatus ? (
                 <Box className="multichain-app-header__contents__container">
                   <Tooltip title={currentNetwork?.nickname} position="right">
-                    <AvatarNetwork
+                    <PickerNetwork
                       className="multichain-app-header__contents--avatar-network"
                       ref={menuRef}
                       as="button"
-                      aria-label={t('networkMenu')}
-                      padding={0}
-                      name={currentNetwork?.nickname}
                       src={currentNetwork?.rpcPrefs?.imageUrl}
-                      size={Size.SM}
+                      label={currentNetwork?.nickname}
+                      aria-label={t('networkMenu')}
                       onClick={(e) => {
                         e.stopPropagation();
                         e.preventDefault();
                         networkOpenCallback();
                       }}
-                      display={[DISPLAY.FLEX, DISPLAY.NONE]} // show on popover hide on desktop
+                      display={[Display.Flex, Display.None]} // show on popover hide on desktop
                       disabled={disableNetworkPicker}
                     />
                   </Tooltip>
@@ -225,7 +221,7 @@ export const AppHeader = ({ location }) => {
                       e.preventDefault();
                       networkOpenCallback();
                     }}
-                    display={[DISPLAY.NONE, DISPLAY.FLEX]} // show on desktop hide on popover
+                    display={[Display.None, Display.Flex]} // show on desktop hide on popover
                     className="multichain-app-header__contents__network-picker"
                     disabled={disableNetworkPicker}
                     data-testid="network-display"
@@ -269,11 +265,11 @@ export const AppHeader = ({ location }) => {
                 />
               ) : null}
               <Box
-                display={DISPLAY.FLEX}
+                display={Display.Flex}
                 alignItems={AlignItems.center}
                 justifyContent={JustifyContent.flexEnd}
               >
-                <Box display={DISPLAY.FLEX} gap={4}>
+                <Box display={Display.Flex} gap={4}>
                   {showStatus ? (
                     <Box ref={menuRef}>
                       <ConnectedStatusIndicator
@@ -291,7 +287,7 @@ export const AppHeader = ({ location }) => {
                     ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
                     custodianIcon && (
                       <Box
-                        display={DISPLAY.FLEX}
+                        display={Display.Flex}
                         alignItems={AlignItems.center}
                         className="custody-logo"
                         data-testid="custody-logo"
@@ -333,9 +329,9 @@ export const AppHeader = ({ location }) => {
                   ) : null}
                   <Box
                     ref={menuRef}
-                    display={DISPLAY.FLEX}
+                    display={Display.Flex}
                     justifyContent={JustifyContent.flexEnd}
-                    width={BLOCK_SIZES.FULL}
+                    width={BlockSize.Full}
                   >
                     <ButtonIcon
                       iconName={IconName.MoreVertical}
@@ -390,12 +386,12 @@ export const AppHeader = ({ location }) => {
             </Box>
           ) : (
             <Box
-              display={DISPLAY.FLEX}
+              display={Display.Flex}
               className={classnames('multichain-app-header__lock-contents', {
                 'multichain-app-header-shadow': isUnlocked && !popupStatus,
               })}
               alignItems={AlignItems.center}
-              width={BLOCK_SIZES.FULL}
+              width={BlockSize.Full}
               justifyContent={JustifyContent.spaceBetween}
               backgroundColor={BackgroundColor.backgroundDefault}
               padding={2}
diff --git a/ui/components/multichain/app-header/app-header.scss b/ui/components/multichain/app-header/app-header.scss
index 3946fa4c3..5ed5a9517 100644
--- a/ui/components/multichain/app-header/app-header.scss
+++ b/ui/components/multichain/app-header/app-header.scss
@@ -33,8 +33,8 @@
       max-width: 250px;
     }
 
-    &--avatar-network {
-      padding: 0; // TODO: Remove once https://github.com/MetaMask/metamask-extension/pull/17006 is merged
+    &--avatar-network p {
+      display: none;
     }
 
     &__container {