UX: Add portfolio button in overview (#19601)

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}

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>

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;