From b6f42bacf7282437363b3e05d426e076a96b9be8 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Thu, 15 Jun 2023 08:17:29 -0500
Subject: [PATCH] UX: Add portfolio button in overview (#19601)

---
 .../app/wallet-overview/eth-overview.js       | 33 +++++++++++++++++++
 ui/components/ui/icon-button/icon-button.js   | 12 +++++--
 ui/components/ui/icon-button/icon-button.scss |  2 +-
 3 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/ui/components/app/wallet-overview/eth-overview.js b/ui/components/app/wallet-overview/eth-overview.js
index 7ae199e5b..613693187 100644
--- a/ui/components/app/wallet-overview/eth-overview.js
+++ b/ui/components/app/wallet-overview/eth-overview.js
@@ -364,6 +364,39 @@ const EthOverview = ({ className }) => {
             />
             ///: END:ONLY_INCLUDE_IN
           }
+          {
+            ///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask)
+            <IconButton
+              className="eth-overview__button"
+              data-testid="eth-overview-portfolio"
+              Icon={
+                <Icon
+                  name={IconName.Diagram}
+                  color={IconColor.primaryInverse}
+                />
+              }
+              label={t('portfolio')}
+              onClick={() => {
+                const url = getPortfolioUrl(
+                  '',
+                  'ext_portfolio_button',
+                  metaMetricsId,
+                );
+                global.platform.openTab({ url });
+                trackEvent({
+                  category: MetaMetricsEventCategory.Navigation,
+                  event: MetaMetricsEventName.PortfolioLinkClicked,
+                  properties: {
+                    location: 'Home',
+                    text: 'Portfolio',
+                    chain_id: chainId,
+                    token_symbol: 'ETH',
+                  },
+                });
+              }}
+            />
+            ///: END:ONLY_INCLUDE_IN
+          }
         </>
       }
       className={className}
diff --git a/ui/components/ui/icon-button/icon-button.js b/ui/components/ui/icon-button/icon-button.js
index b0a5b1b25..c6eb9062a 100644
--- a/ui/components/ui/icon-button/icon-button.js
+++ b/ui/components/ui/icon-button/icon-button.js
@@ -1,9 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { Text } from '../../component-library';
+import { TextVariant } from '../../../helpers/constants/design-system';
+import Tooltip from '../tooltip/tooltip';
 
 const defaultRender = (inner) => inner;
-
 export default function IconButton({
   onClick,
   Icon,
@@ -26,7 +28,13 @@ export default function IconButton({
       {renderWrapper(
         <>
           <div className="icon-button__circle">{Icon}</div>
-          <span>{label}</span>
+          <Text ellipsis variant={TextVariant.bodySm}>
+            {label.length > 12 ? (
+              <Tooltip title={label}>{label}</Tooltip>
+            ) : (
+              label
+            )}
+          </Text>
         </>,
       )}
     </button>
diff --git a/ui/components/ui/icon-button/icon-button.scss b/ui/components/ui/icon-button/icon-button.scss
index 8769d532c..14c0a9eaf 100644
--- a/ui/components/ui/icon-button/icon-button.scss
+++ b/ui/components/ui/icon-button/icon-button.scss
@@ -4,7 +4,7 @@
   align-items: center;
   background-color: unset;
   text-align: center;
-  width: 73px;
+  width: 60px;
 
   @include H7;