Fix #847 - Don't show account address on token pages (#19740)

Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net>

ui/components/app/wallet-overview/eth-overview.js

@@ -49,7 +49,7 @@ import useRamps from '../../../hooks/experiences/useRamps';
 import { getPortfolioUrl } from '../../../helpers/utils/portfolio';
 import WalletOverview from './wallet-overview';
 
-const EthOverview = ({ className }) => {
+const EthOverview = ({ className, showAddress }) => {
   const dispatch = useDispatch();
   const t = useContext(I18nContext);
   const trackEvent = useContext(MetaMetricsContext);
@@ -121,6 +121,7 @@ const EthOverview = ({ className }) => {
 
   return (
     <WalletOverview
+      showAddress={showAddress}
       balance={
         <Tooltip
           position="top"
@@ -365,10 +366,7 @@ const EthOverview = ({ className }) => {
 
 EthOverview.propTypes = {
   className: PropTypes.string,
-};
-
-EthOverview.defaultProps = {
-  className: undefined,
+  showAddress: PropTypes.bool,
 };
 
 export default EthOverview;

ui/components/app/wallet-overview/token-overview.js

@@ -83,6 +83,7 @@ const TokenOverview = ({ className, token }) => {
 
   return (
     <WalletOverview
+      showAddress={false}
       balance={
         <div className="token-overview__balance">
           <div className="token-overview__primary-container">

ui/components/app/wallet-overview/wallet-overview.js

@@ -7,15 +7,22 @@ import { getSelectedIdentity } from '../../../selectors';
 import { AddressCopyButton } from '../../multichain';
 import Box from '../../ui/box/box';
 
-const WalletOverview = ({ balance, buttons, className }) => {
+const WalletOverview = ({
+  balance,
+  buttons,
+  className,
+  showAddress = false,
+}) => {
   const selectedIdentity = useSelector(getSelectedIdentity);
   const checksummedAddress = toChecksumHexAddress(selectedIdentity?.address);
   return (
     <div className={classnames('wallet-overview', className)}>
       <div className="wallet-overview__balance">
+        {showAddress ? (
           <Box marginTop={2}>
             <AddressCopyButton address={checksummedAddress} shorten />
           </Box>
+        ) : null}
         {balance}
       </div>
       <div className="wallet-overview__buttons">{buttons}</div>
@@ -27,10 +34,7 @@ WalletOverview.propTypes = {
   balance: PropTypes.element.isRequired,
   buttons: PropTypes.element.isRequired,
   className: PropTypes.string,
-};
-
-WalletOverview.defaultProps = {
-  className: undefined,
+  showAddress: PropTypes.bool,
 };
 
 export default WalletOverview;

ui/pages/asset/components/native-asset.js

@@ -64,7 +64,7 @@ export default function NativeAsset({ nativeCurrency }) {
           />
         }
       />
-      <EthOverview className="asset__overview" />
+      <EthOverview className="asset__overview" showAddress={false} />
       <TransactionList hideTokenTransactions />
     </>
   );

ui/pages/home/home.component.js

@@ -778,12 +778,13 @@ export default class Home extends PureComponent {
             <div className="home__balance-wrapper">
               {
                 ///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask)
-                <EthOverview />
+                <EthOverview showAddress />
                 ///: END:ONLY_INCLUDE_IN
               }
               {
                 ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
                 <EthOverview
+                  showAddress
                   mmiPortfolioEnabled={mmiPortfolioEnabled}
                   mmiPortfolioUrl={mmiPortfolioUrl}
                 />