[MMI] rearrange mmi account menu options (#19635)

* adds the portfolio dashboard option and compliance to the global menu * undo change
2024-11-22 01:47:00 +01:00 · 2023-06-23 10:55:31 +01:00 · 2023-06-23 10:55:31 +01:00 · 80bfb5b501
commit 80bfb5b501
parent 93704a8479
2 changed files with 124 additions and 106 deletions
--- a/ui/components/multichain/account-list-menu/account-list-menu.js
+++ b/ui/components/multichain/account-list-menu/account-list-menu.js
@ -3,12 +3,12 @@ import PropTypes from 'prop-types';
 import { useHistory } from 'react-router-dom';
 import Fuse from 'fuse.js';
 import { useDispatch, useSelector } from 'react-redux';
-import Box from '../../ui/box/box';
 import {
  IconName,
  ButtonLink,
  TextFieldSearch,
  Text,
+  Box,
 } from '../../component-library';
 import { AccountListItem, CreateAccount, ImportAccount } from '..';
 import {
@ -19,12 +19,6 @@ import {
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
 import Popover from '../../ui/popover';
-///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
-import {
-  getMmiPortfolioEnabled,
-  getMmiPortfolioUrl,
-} from '../../../selectors/institutional/selectors';
-///: END:ONLY_INCLUDE_IN
 import {
  getSelectedAccount,
  getMetaMaskAccountsOrdered,
@ -41,7 +35,6 @@ import {
  CONNECT_HARDWARE_ROUTE,
  ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
  CUSTODY_ACCOUNT_ROUTE,
-  COMPLIANCE_FEATURE_ROUTE,
  ///: END:ONLY_INCLUDE_IN
 } from '../../../helpers/constants/routes';
 import { getEnvironmentType } from '../../../../app/scripts/lib/util';
@ -58,11 +51,6 @@ export const AccountListMenu = ({ onClose }) => {
  const dispatch = useDispatch();
  const inputRef = useRef();

-  ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
-  const mmiPortfolioUrl = useSelector(getMmiPortfolioUrl);
-  const mmiPortfolioEnabled = useSelector(getMmiPortfolioEnabled);
-  ///: END:ONLY_INCLUDE_IN
-
  const [searchQuery, setSearchQuery] = useState('');
  const [actionMode, setActionMode] = useState('');

@ -233,7 +221,7 @@ export const AccountListMenu = ({ onClose }) => {
                {t('importAccount')}
              </ButtonLink>
            </Box>
-            <Box>
+            <Box marginBottom={4}>
              <ButtonLink
                size={Size.SM}
                startIconName={IconName.Hardware}
@ -258,71 +246,34 @@ export const AccountListMenu = ({ onClose }) => {
              >
                {t('hardwareWallet')}
              </ButtonLink>
-              {
-                ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
-                <>
-                  <ButtonLink
-                    size={Size.SM}
-                    startIconName={IconName.Custody}
-                    onClick={() => {
-                      dispatch(toggleAccountMenu());
-                      trackEvent({
-                        category: MetaMetricsEventCategory.Navigation,
-                        event:
-                          MetaMetricsEventName.UserClickedConnectCustodialAccount,
-                      });
-                      if (getEnvironmentType() === ENVIRONMENT_TYPE_POPUP) {
-                        global.platform.openExtensionInBrowser(
-                          CUSTODY_ACCOUNT_ROUTE,
-                        );
-                      } else {
-                        history.push(CUSTODY_ACCOUNT_ROUTE);
-                      }
-                    }}
-                  >
-                    {t('connectCustodialAccountMenu')}
-                  </ButtonLink>
-                  {mmiPortfolioEnabled && (
-                    <ButtonLink
-                      size={Size.SM}
-                      startIconName={IconName.MmmiPortfolioDashboard}
-                      onClick={() => {
-                        dispatch(toggleAccountMenu());
-                        trackEvent({
-                          category: MetaMetricsEventCategory.Navigation,
-                          event:
-                            MetaMetricsEventName.UserClickedPortfolioButton,
-                        });
-                        window.open(mmiPortfolioUrl, '_blank');
-                      }}
-                    >
-                      {t('portfolioDashboard')}
-                    </ButtonLink>
-                  )}
-                  <ButtonLink
-                    size={Size.SM}
-                    startIconName={IconName.Compliance}
-                    onClick={() => {
-                      dispatch(toggleAccountMenu());
-                      trackEvent({
-                        category: MetaMetricsEventCategory.Navigation,
-                        event: MetaMetricsEventName.UserClickedCompliance,
-                      });
-                      if (getEnvironmentType() === ENVIRONMENT_TYPE_POPUP) {
-                        global.platform.openExtensionInBrowser(
-                          COMPLIANCE_FEATURE_ROUTE,
-                        );
-                      } else {
-                        history.push(COMPLIANCE_FEATURE_ROUTE);
-                      }
-                    }}
-                  >
-                    {t('compliance')}
-                  </ButtonLink>
-                </>
-                ///: END:ONLY_INCLUDE_IN
-              }
            </Box>
+            {
+              ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+              <Box>
+                <ButtonLink
+                  size={Size.SM}
+                  startIconName={IconName.Custody}
+                  onClick={() => {
+                    dispatch(toggleAccountMenu());
+                    trackEvent({
+                      category: MetaMetricsEventCategory.Navigation,
+                      event:
+                        MetaMetricsEventName.UserClickedConnectCustodialAccount,
+                    });
+                    if (getEnvironmentType() === ENVIRONMENT_TYPE_POPUP) {
+                      global.platform.openExtensionInBrowser(
+                        CUSTODY_ACCOUNT_ROUTE,
+                      );
+                    } else {
+                      history.push(CUSTODY_ACCOUNT_ROUTE);
+                    }
+                  }}
+                >
+                  {t('connectCustodialAccountMenu')}
+                </ButtonLink>
+              </Box>
+              ///: END:ONLY_INCLUDE_IN
+            }
          </Box>
        </Box>
      ) : null}
--- a/ui/components/multichain/global-menu/global-menu.js
+++ b/ui/components/multichain/global-menu/global-menu.js
@ -9,6 +9,9 @@ import {
  ///: BEGIN:ONLY_INCLUDE_IN(snaps)
  NOTIFICATIONS_ROUTE,
  ///: END:ONLY_INCLUDE_IN(snaps)
+  ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+  COMPLIANCE_FEATURE_ROUTE,
+  ///: END:ONLY_INCLUDE_IN
 } from '../../../helpers/constants/routes';
 import { lockMetamask } from '../../../store/actions';
 import { useI18nContext } from '../../../hooks/useI18nContext';
@ -20,7 +23,12 @@ import {
 } from '../../component-library';
 import { Menu, MenuItem } from '../../ui/menu';
 import { getEnvironmentType } from '../../../../app/scripts/lib/util';
-import { ENVIRONMENT_TYPE_FULLSCREEN } from '../../../../shared/constants/app';
+import {
+  ENVIRONMENT_TYPE_FULLSCREEN,
+  ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+  ENVIRONMENT_TYPE_POPUP,
+  ///: END:ONLY_INCLUDE_IN
+} from '../../../../shared/constants/app';
 import { SUPPORT_LINK } from '../../../../shared/lib/ui-utils';
 ///: BEGIN:ONLY_INCLUDE_IN(build-beta,build-flask)
 import { SUPPORT_REQUEST_LINK } from '../../../helpers/constants/common';
@ -33,6 +41,12 @@ import {
  MetaMetricsContextProp,
 } from '../../../../shared/constants/metametrics';
 import { getPortfolioUrl } from '../../../helpers/utils/portfolio';
+///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+import {
+  getMmiPortfolioEnabled,
+  getMmiPortfolioUrl,
+} from '../../../selectors/institutional/selectors';
+///: END:ONLY_INCLUDE_IN
 import {
  getMetaMetricsId,
  ///: BEGIN:ONLY_INCLUDE_IN(snaps)
@ -61,6 +75,10 @@ export const GlobalMenu = ({ closeMenu, anchorElement }) => {
  const hasUnapprovedTransactions = useSelector(
    (state) => Object.keys(state.metamask.unapprovedTxs).length > 0,
  );
+  ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+  const mmiPortfolioUrl = useSelector(getMmiPortfolioUrl);
+  const mmiPortfolioEnabled = useSelector(getMmiPortfolioEnabled);
+  ///: END:ONLY_INCLUDE_IN

  ///: BEGIN:ONLY_INCLUDE_IN(snaps)
  const unreadNotificationsCount = useSelector(getUnreadNotificationsCount);
@ -93,34 +111,83 @@ export const GlobalMenu = ({ closeMenu, anchorElement }) => {
      >
        {t('connectedSites')}
      </MenuItem>
-      <MenuItem
-        iconName={IconName.Diagram}
-        onClick={() => {
-          const portfolioUrl = getPortfolioUrl('', 'ext', metaMetricsId);
-          global.platform.openTab({
-            url: portfolioUrl,
-          });
-          trackEvent(
-            {
-              category: MetaMetricsEventCategory.Home,
-              event: MetaMetricsEventName.PortfolioLinkClicked,
-              properties: {
-                url: portfolioUrl,
-                location: 'Global Menu',
+
+      {
+        ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+        <>
+          {mmiPortfolioEnabled && (
+            <MenuItem
+              iconName={IconName.Diagram}
+              onClick={() => {
+                trackEvent({
+                  category: MetaMetricsEventCategory.Navigation,
+                  event: MetaMetricsEventName.UserClickedPortfolioButton,
+                });
+                window.open(mmiPortfolioUrl, '_blank');
+                closeMenu();
+              }}
+              data-testid="global-menu-mmi-portfolio"
+            >
+              {t('portfolioDashboard')}
+            </MenuItem>
+          )}
+
+          <MenuItem
+            iconName={IconName.Compliance}
+            onClick={() => {
+              trackEvent({
+                category: MetaMetricsEventCategory.Navigation,
+                event: MetaMetricsEventName.UserClickedCompliance,
+              });
+              if (getEnvironmentType() === ENVIRONMENT_TYPE_POPUP) {
+                global.platform.openExtensionInBrowser(
+                  COMPLIANCE_FEATURE_ROUTE,
+                );
+              } else {
+                history.push(COMPLIANCE_FEATURE_ROUTE);
+              }
+            }}
+            data-testid="global-menu-mmi-compliance"
+          >
+            {t('compliance')}
+          </MenuItem>
+        </>
+        ///: END:ONLY_INCLUDE_IN
+      }
+
+      {
+        ///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask)
+        <MenuItem
+          iconName={IconName.Diagram}
+          onClick={() => {
+            const portfolioUrl = getPortfolioUrl('', 'ext', metaMetricsId);
+            global.platform.openTab({
+              url: portfolioUrl,
+            });
+            trackEvent(
+              {
+                category: MetaMetricsEventCategory.Home,
+                event: MetaMetricsEventName.PortfolioLinkClicked,
+                properties: {
+                  url: portfolioUrl,
+                  location: 'Global Menu',
+                },
              },
-            },
-            {
-              contextPropsIntoEventProperties: [
-                MetaMetricsContextProp.PageTitle,
-              ],
-            },
-          );
-          closeMenu();
-        }}
-        data-testid="global-menu-portfolio"
-      >
-        {t('portfolioView')}
-      </MenuItem>
+              {
+                contextPropsIntoEventProperties: [
+                  MetaMetricsContextProp.PageTitle,
+                ],
+              },
+            );
+            closeMenu();
+          }}
+          data-testid="global-menu-portfolio"
+        >
+          {t('portfolioView')}
+        </MenuItem>
+        ///: END:ONLY_INCLUDE_IN
+      }
+
      {getEnvironmentType() === ENVIRONMENT_TYPE_FULLSCREEN ? null : (
        <MenuItem
          iconName={IconName.Expand}