[MMI] update eth overview component (#18625)

* wip * adds mmi stake button and portfolio * removes unnecessary js icon * prettier
2024-12-22 17:33:23 +01:00 · 2023-04-21 12:16:09 +01:00 · 2023-04-21 12:16:09 +01:00 · 4f4e9fb29c
commit 4f4e9fb29c
parent 16d8fc2908
4 changed files with 182 additions and 86 deletions
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@ -3793,6 +3793,9 @@
  "stableLowercase": {
    "message": "stable"
  },
+  "stake": {
+    "message": "Stake"
+  },
  "stateLogError": {
    "message": "Error in retrieving state logs."
  },
--- a/app/build-types/mmi/images/icons/stake.svg
+++ b/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>
--- a/ui/components/app/wallet-overview/eth-overview.js
+++ b/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
-                  className="eth-overview__portfolio-button"
-                  data-testid="home__portfolio-site"
-                  color={IconColor.primaryDefault}
-                  iconName={IconName.Diagram}
-                  ariaLabel={t('portfolio')}
-                  size={ButtonIconSize.Lg}
-                  onClick={() => {
-                    const portfolioUrl = process.env.PORTFOLIO_URL;
-                    global.platform.openTab({
-                      url: `${portfolioUrl}?metamaskEntry=ext`,
-                    });
-                    trackEvent(
-                      {
-                        category: MetaMetricsEventCategory.Home,
-                        event: MetaMetricsEventName.PortfolioLinkClicked,
-                        properties: {
-                          url: portfolioUrl,
+              {
+                ///: BEGIN:ONLY_INCLUDE_IN(main,beta,flask)
+                process.env.MULTICHAIN ? null : (
+                  <ButtonIcon
+                    className="eth-overview__portfolio-button"
+                    data-testid="home__portfolio-site"
+                    color={IconColor.primaryDefault}
+                    iconName={IconName.Diagram}
+                    ariaLabel={t('portfolio')}
+                    size={ButtonIconSize.Lg}
+                    onClick={() => {
+                      const portfolioUrl = process.env.PORTFOLIO_URL;
+                      global.platform.openTab({
+                        url: `${portfolioUrl}?metamaskEntry=ext`,
+                      });
+                      trackEvent(
+                        {
+                          category: MetaMetricsEventCategory.Home,
+                          event: MetaMetricsEventName.PortfolioLinkClicked,
+                          properties: {
+                            url: portfolioUrl,
+                          },
                        },
-                      },
-                      {
-                        contextPropsIntoEventProperties: [
-                          MetaMetricsContextProp.PageTitle,
-                        ],
-                      },
-                    );
-                  }}
-                />
-              )}
+                        {
+                          contextPropsIntoEventProperties: [
+                            MetaMetricsContextProp.PageTitle,
+                          ],
+                        },
+                      );
+                    }}
+                  />
+                )
+                ///: END:ONLY_INCLUDE_IN
+              }
            </div>
            {showFiat && balance && (
              <UserPreferencedCurrencyDisplay
@ -147,24 +208,37 @@ const EthOverview = ({ className }) => {
      }
      buttons={
        <>
-          <IconButton
-            className="eth-overview__button"
-            Icon={<Icon name={IconName.Add} color={IconColor.primaryInverse} />}
-            disabled={!isBuyableChain}
-            data-testid="eth-overview-buy"
-            label={t('buy')}
-            onClick={() => {
-              openBuyCryptoInPdapp();
-              trackEvent({
-                event: MetaMetricsEventName.NavBuyButtonClicked,
-                category: MetaMetricsEventCategory.Navigation,
-                properties: {
-                  location: 'Home',
-                  text: 'Buy',
-                },
-              });
-            }}
-          />
+          {
+            ///: BEGIN:ONLY_INCLUDE_IN(main,beta,flask)
+            <IconButton
+              className="eth-overview__button"
+              Icon={
+                <Icon name={IconName.Add} color={IconColor.primaryInverse} />
+              }
+              disabled={!isBuyableChain}
+              data-testid="eth-overview-buy"
+              label={t('buy')}
+              onClick={() => {
+                openBuyCryptoInPdapp();
+                trackEvent({
+                  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"
-            disabled={!isBridgeChain}
-            data-testid="eth-overview-bridge"
-            Icon={
-              <Icon name={IconName.Bridge} color={IconColor.primaryInverse} />
-            }
-            label={t('bridge')}
-            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',
-                  },
-                });
+          {
+            ///: BEGIN:ONLY_INCLUDE_IN(main,beta,flask)
+            <IconButton
+              className="eth-overview__button"
+              disabled={!isBridgeChain}
+              data-testid="eth-overview-bridge"
+              Icon={
+                <Icon name={IconName.Bridge} color={IconColor.primaryInverse} />
              }
-            }}
-            tooltipRender={
-              isBridgeChain
-                ? null
-                : (contents) => (
-                    <Tooltip
-                      title={t('currentlyUnavailable')}
-                      position="bottom"
-                    >
-                      {contents}
-                    </Tooltip>
-                  )
-            }
-          />
+              label={t('bridge')}
+              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',
+                    },
+                  });
+                }
+              }}
+              tooltipRender={
+                isBridgeChain
+                  ? null
+                  : (contents) => (
+                      <Tooltip
+                        title={t('currentlyUnavailable')}
+                        position="bottom"
+                      >
+                        {contents}
+                      </Tooltip>
+                    )
+              }
+            />
+            ///: END:ONLY_INCLUDE_IN
+          }
        </>
      }
      className={className}
--- a/ui/components/component-library/icon/icon.types.ts
+++ b/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',