[MMI] update eth overview component (#18625)

* wip

* adds mmi stake button and portfolio

* removes unnecessary js icon

* prettier

app/_locales/en/messages.json

@@ -3793,6 +3793,9 @@
   "stableLowercase": {
     "message": "stable"
   },
+  "stake": {
+    "message": "Stake"
+  },
   "stateLogError": {
     "message": "Error in retrieving state logs."
   },

app/build-types/mmi/images/icons/stake.svg

@@ -0,0 +1,14 @@
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clipPath="url(#clip0_735_24127)">
+      <path
+        d="M3.99902 19C7.24796 17.5 8.87242 16.75 10.4969 16.75M16.9948 19C13.7458 17.5 12.1214 16.75 10.4969 16.75M10.4969 16.75V11.5M10.4969 11.5L10 10.4091M10.4969 11.5V9.5L10.9967 8.5M10 10.4091C10 10.4091 5.00889 11.0985 2.99935 9.5C1.29118 8.14126 1 4.5 1 4.5C1 4.5 5.55008 3.95155 7.54545 5.90909C8.91802 7.25563 10 10.4091 10 10.4091ZM10.9967 8.5C10.9967 8.5 11.5374 4.11404 13.4959 2.5C15.2137 1.08439 18.9941 1 18.9941 1C18.9941 1 19.1777 5.2683 17.4946 7C15.6792 8.86783 10.9967 8.5 10.9967 8.5Z"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_735_24127">
+        <rect width="20" height="20" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>

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

@@ -4,6 +4,13 @@ import { useDispatch, useSelector } from 'react-redux';
 import classnames from 'classnames';
 import { useHistory, useLocation } from 'react-router-dom';
 
+///: BEGIN:ONLY_INCLUDE_IN(mmi)
+import {
+  getMmiPortfolioEnabled,
+  getMmiPortfolioUrl,
+} from '../../../selectors/institutional/selectors';
+///: END:ONLY_INCLUDE_IN
+
 import Identicon from '../../ui/identicon';
 import { I18nContext } from '../../../contexts/i18n';
 import {
@@ -64,6 +71,56 @@ const EthOverview = ({ className }) => {
   const primaryTokenImage = useSelector(getNativeCurrencyImage);
   const defaultSwapsToken = useSelector(getSwapsDefaultToken);
 
+  ///: BEGIN:ONLY_INCLUDE_IN(mmi)
+  const mmiPortfolioEnabled = useSelector(getMmiPortfolioEnabled);
+  const mmiPortfolioUrl = useSelector(getMmiPortfolioUrl);
+
+  const portfolioEvent = () => {
+    trackEvent({
+      category: 'Navigation',
+      event: 'Clicked Portfolio Button',
+    });
+  };
+
+  const stakingEvent = () => {
+    trackEvent({
+      category: 'Navigation',
+      event: 'Clicked Stake Button',
+    });
+  };
+
+  const renderInstitutionalButtons = () => {
+    return (
+      <>
+        <IconButton
+          className="eth-overview__button"
+          Icon={<Icon name={IconName.Stake} color={IconColor.primaryDefault} />}
+          label={t('stake')}
+          onClick={() => {
+            stakingEvent();
+            global.platform.openTab({
+              url: 'https://metamask-institutional.io/staking',
+            });
+          }}
+        />
+        {mmiPortfolioEnabled && (
+          <IconButton
+            className="eth-overview__button"
+            Icon={
+              <Icon name={IconName.Diagram} color={IconColor.primaryDefault} />
+            }
+            label={t('portfolio')}
+            onClick={() => {
+              portfolioEvent();
+              window.open(mmiPortfolioUrl, '_blank');
+            }}
+          />
+        )}
+      </>
+    );
+  };
+  ///: END:ONLY_INCLUDE_IN
+
   const { openBuyCryptoInPdapp } = useRamps();
 
   return (
@@ -98,7 +155,9 @@ const EthOverview = ({ className }) => {
               {balanceIsCached ? (
                 <span className="eth-overview__cached-star">*</span>
               ) : null}
-              {process.env.MULTICHAIN ? null : (
+              {
+                ///: BEGIN:ONLY_INCLUDE_IN(main,beta,flask)
+                process.env.MULTICHAIN ? null : (
                   <ButtonIcon
                     className="eth-overview__portfolio-button"
                     data-testid="home__portfolio-site"
@@ -127,7 +186,9 @@ const EthOverview = ({ className }) => {
                       );
                     }}
                   />
-              )}
+                )
+                ///: END:ONLY_INCLUDE_IN
+              }
             </div>
             {showFiat && balance && (
               <UserPreferencedCurrencyDisplay
@@ -147,9 +208,13 @@ const EthOverview = ({ className }) => {
       }
       buttons={
         <>
+          {
+            ///: BEGIN:ONLY_INCLUDE_IN(main,beta,flask)
             <IconButton
               className="eth-overview__button"
-            Icon={<Icon name={IconName.Add} color={IconColor.primaryInverse} />}
+              Icon={
+                <Icon name={IconName.Add} color={IconColor.primaryInverse} />
+              }
               disabled={!isBuyableChain}
               data-testid="eth-overview-buy"
               label={t('buy')}
@@ -165,6 +230,15 @@ const EthOverview = ({ className }) => {
                 });
               }}
             />
+            ///: END:ONLY_INCLUDE_IN
+          }
+
+          {
+            ///: BEGIN:ONLY_INCLUDE_IN(mmi)
+            renderInstitutionalButtons()
+            ///: END:ONLY_INCLUDE_IN
+          }
+
           <IconButton
             className="eth-overview__button"
             data-testid="eth-overview-send"
@@ -234,6 +308,8 @@ const EthOverview = ({ className }) => {
                   )
             }
           />
+          {
+            ///: BEGIN:ONLY_INCLUDE_IN(main,beta,flask)
             <IconButton
               className="eth-overview__button"
               disabled={!isBridgeChain}
@@ -274,6 +350,8 @@ const EthOverview = ({ className }) => {
                     )
               }
             />
+            ///: END:ONLY_INCLUDE_IN
+          }
         </>
       }
       className={className}

ui/components/component-library/icon/icon.types.ts

@@ -132,6 +132,7 @@ export enum IconName {
   Snaps = 'snaps',
   Speedometer = 'speedometer',
   Star = 'star',
+  Stake = 'stake',
   Student = 'student',
   SwapHorizontal = 'swap-horizontal',
   SwapVertical = 'swap-vertical',