diff --git a/ui/components/multichain/account-picker/account-picker.js b/ui/components/multichain/account-picker/account-picker.js index 278f0b54d7c9..74b68f18797d 100644 --- a/ui/components/multichain/account-picker/account-picker.js +++ b/ui/components/multichain/account-picker/account-picker.js @@ -2,6 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { useSelector } from 'react-redux'; import { toChecksumHexAddress } from '@metamask/controller-utils'; +import classnames from 'classnames'; import { Box, AvatarAccount, @@ -32,6 +33,7 @@ export const AccountPicker = ({ name, onClick, disabled, + className = '', showAddress = false, }) => { const useBlockie = useSelector(getUseBlockie); @@ -39,7 +41,7 @@ export const AccountPicker = ({ return ( { { gap={2} > {popupStatus ? ( - - - - { - e.stopPropagation(); - e.preventDefault(); - networkOpenCallback(); - }} - display={[Display.Flex, Display.None]} // show on popover hide on desktop - disabled={disableNetworkPicker} - /> - - + + + { + e.stopPropagation(); + e.preventDefault(); + networkOpenCallback(); + }} + display={[Display.Flex, Display.None]} // show on popover hide on desktop + disabled={disableNetworkPicker} + /> + ) : ( - - { - e.stopPropagation(); - e.preventDefault(); - networkOpenCallback(); - }} - display={[Display.None, Display.Flex]} // show on desktop hide on popover - className="multichain-app-header__contents__network-picker" - disabled={disableNetworkPicker} - data-testid="network-display" - /> - + showNetworkPicker && ( + + { + e.stopPropagation(); + e.preventDefault(); + networkOpenCallback(); + }} + display={[Display.None, Display.Flex]} // show on desktop hide on popover + className="multichain-app-header__contents__network-picker" + disabled={disableNetworkPicker} + data-testid="network-display" + /> + + ) )} {showProductTour && popupStatus && @@ -303,6 +307,11 @@ export const AppHeader = ({ location }) => { }} disabled={disableAccountPicker} showAddress={Boolean(process.env.MULTICHAIN)} + className={classnames({ + 'multichain-app-header__account-picker': Boolean( + process.env.MULTICHAIN, + ), + })} /> ) : null}