[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,36 +155,40 @@ const EthOverview = ({ className }) => {
               {balanceIsCached ? (
                 <span className="eth-overview__cached-star">*</span>
               ) : null}
-              {process.env.MULTICHAIN ? null : (
+              {
-                <ButtonIcon
+                ///: BEGIN:ONLY_INCLUDE_IN(main,beta,flask)
-                  className="eth-overview__portfolio-button"
+                process.env.MULTICHAIN ? null : (
-                  data-testid="home__portfolio-site"
+                  <ButtonIcon
-                  color={IconColor.primaryDefault}
+                    className="eth-overview__portfolio-button"
-                  iconName={IconName.Diagram}
+                    data-testid="home__portfolio-site"
-                  ariaLabel={t('portfolio')}
+                    color={IconColor.primaryDefault}
-                  size={ButtonIconSize.Lg}
+                    iconName={IconName.Diagram}
-                  onClick={() => {
+                    ariaLabel={t('portfolio')}
-                    const portfolioUrl = process.env.PORTFOLIO_URL;
+                    size={ButtonIconSize.Lg}
-                    global.platform.openTab({
+                    onClick={() => {
-                      url: `${portfolioUrl}?metamaskEntry=ext`,
+                      const portfolioUrl = process.env.PORTFOLIO_URL;
-                    });
+                      global.platform.openTab({
-                    trackEvent(
+                        url: `${portfolioUrl}?metamaskEntry=ext`,
-                      {
+                      });
-                        category: MetaMetricsEventCategory.Home,
+                      trackEvent(
-                        event: MetaMetricsEventName.PortfolioLinkClicked,
+                        {
-                        properties: {
+                          category: MetaMetricsEventCategory.Home,
-                          url: portfolioUrl,
+                          event: MetaMetricsEventName.PortfolioLinkClicked,
+                          properties: {
+                            url: portfolioUrl,
+                          },
                         },
-                      },
+                        {
-                      {
+                          contextPropsIntoEventProperties: [
-                        contextPropsIntoEventProperties: [
+                            MetaMetricsContextProp.PageTitle,
-                          MetaMetricsContextProp.PageTitle,
+                          ],
-                        ],
+                        },
-                      },
+                      );
-                    );
+                    }}
-                  }}
+                  />
-                />
+                )
-              )}
+                ///: END:ONLY_INCLUDE_IN
+              }
             </div>
             {showFiat && balance && (
               <UserPreferencedCurrencyDisplay
@@ -147,24 +208,37 @@ const EthOverview = ({ className }) => {
       }
       buttons={
         <>
-          <IconButton
+          {
-            className="eth-overview__button"
+            ///: BEGIN:ONLY_INCLUDE_IN(main,beta,flask)
-            Icon={<Icon name={IconName.Add} color={IconColor.primaryInverse} />}
+            <IconButton
-            disabled={!isBuyableChain}
+              className="eth-overview__button"
-            data-testid="eth-overview-buy"
+              Icon={
-            label={t('buy')}
+                <Icon name={IconName.Add} color={IconColor.primaryInverse} />
-            onClick={() => {
+              }
-              openBuyCryptoInPdapp();
+              disabled={!isBuyableChain}
-              trackEvent({
+              data-testid="eth-overview-buy"
-                event: MetaMetricsEventName.NavBuyButtonClicked,
+              label={t('buy')}
-                category: MetaMetricsEventCategory.Navigation,
+              onClick={() => {
-                properties: {
+                openBuyCryptoInPdapp();
-                  location: 'Home',
+                trackEvent({
-                  text: 'Buy',
+                  event: MetaMetricsEventName.NavBuyButtonClicked,
-                },
+                  category: MetaMetricsEventCategory.Navigation,
-              });
+                  properties: {
-            }}
+                    location: 'Home',
-          />
+                    text: 'Buy',
+                  },
+                });
+              }}
+            />
+            ///: 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,46 +308,50 @@ const EthOverview = ({ className }) => {
                   )
             }
           />
-          <IconButton
+          {
-            className="eth-overview__button"
+            ///: BEGIN:ONLY_INCLUDE_IN(main,beta,flask)
-            disabled={!isBridgeChain}
+            <IconButton
-            data-testid="eth-overview-bridge"
+              className="eth-overview__button"
-            Icon={
+              disabled={!isBridgeChain}
-              <Icon name={IconName.Bridge} color={IconColor.primaryInverse} />
+              data-testid="eth-overview-bridge"
-            }
+              Icon={
-            label={t('bridge')}
+                <Icon name={IconName.Bridge} color={IconColor.primaryInverse} />
-            onClick={() => {
-              if (isBridgeChain) {
-                const portfolioUrl = process.env.PORTFOLIO_URL;
-                const bridgeUrl = `${portfolioUrl}/bridge`;
-                global.platform.openTab({
-                  url: `${bridgeUrl}?metamaskEntry=ext_bridge_button${
-                    location.pathname.includes('asset') ? '&token=native' : ''
-                  }`,
-                });
-                trackEvent({
-                  category: MetaMetricsEventCategory.Navigation,
-                  event: MetaMetricsEventName.BridgeLinkClicked,
-                  properties: {
-                    location: 'Home',
-                    text: 'Bridge',
-                  },
-                });
               }
-            }}
+              label={t('bridge')}
-            tooltipRender={
+              onClick={() => {
-              isBridgeChain
+                if (isBridgeChain) {
-                ? null
+                  const portfolioUrl = process.env.PORTFOLIO_URL;
-                : (contents) => (
+                  const bridgeUrl = `${portfolioUrl}/bridge`;
-                    <Tooltip
+                  global.platform.openTab({
-                      title={t('currentlyUnavailable')}
+                    url: `${bridgeUrl}?metamaskEntry=ext_bridge_button${
-                      position="bottom"
+                      location.pathname.includes('asset') ? '&token=native' : ''
-                    >
+                    }`,
-                      {contents}
+                  });
-                    </Tooltip>
+                  trackEvent({
-                  )
+                    category: MetaMetricsEventCategory.Navigation,
-            }
+                    event: MetaMetricsEventName.BridgeLinkClicked,
-          />
+                    properties: {
+                      location: 'Home',
+                      text: 'Bridge',
+                    },
+                  });
+                }
+              }}
+              tooltipRender={
+                isBridgeChain
+                  ? null
+                  : (contents) => (
+                      <Tooltip
+                        title={t('currentlyUnavailable')}
+                        position="bottom"
+                      >
+                        {contents}
+                      </Tooltip>
+                    )
+              }
+            />
+            ///: 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',