From 80bfb5b501a8a8d96a3e24e0ba28e1f093ca5482 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ant=C3=B3nio=20Regadas?= Date: Fri, 23 Jun 2023 10:55:31 +0100 Subject: [PATCH] [MMI] rearrange mmi account menu options (#19635) * adds the portfolio dashboard option and compliance to the global menu * undo change --- .../account-list-menu/account-list-menu.js | 107 +++++---------- .../multichain/global-menu/global-menu.js | 123 ++++++++++++++---- 2 files changed, 124 insertions(+), 106 deletions(-) diff --git a/ui/components/multichain/account-list-menu/account-list-menu.js b/ui/components/multichain/account-list-menu/account-list-menu.js index 1461c8a83..40d6b9df6 100644 --- 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')} - + { > {t('hardwareWallet')} - { - ///: BEGIN:ONLY_INCLUDE_IN(build-mmi) - <> - { - 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')} - - {mmiPortfolioEnabled && ( - { - dispatch(toggleAccountMenu()); - trackEvent({ - category: MetaMetricsEventCategory.Navigation, - event: - MetaMetricsEventName.UserClickedPortfolioButton, - }); - window.open(mmiPortfolioUrl, '_blank'); - }} - > - {t('portfolioDashboard')} - - )} - { - 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')} - - - ///: END:ONLY_INCLUDE_IN - } + { + ///: BEGIN:ONLY_INCLUDE_IN(build-mmi) + + { + 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')} + + + ///: END:ONLY_INCLUDE_IN + } ) : null} diff --git a/ui/components/multichain/global-menu/global-menu.js b/ui/components/multichain/global-menu/global-menu.js index 71d8dc6ae..6d813aa72 100644 --- 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')} - { - 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 && ( + { + trackEvent({ + category: MetaMetricsEventCategory.Navigation, + event: MetaMetricsEventName.UserClickedPortfolioButton, + }); + window.open(mmiPortfolioUrl, '_blank'); + closeMenu(); + }} + data-testid="global-menu-mmi-portfolio" + > + {t('portfolioDashboard')} + + )} + + { + 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')} + + + ///: END:ONLY_INCLUDE_IN + } + + { + ///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask) + { + 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')} - + { + contextPropsIntoEventProperties: [ + MetaMetricsContextProp.PageTitle, + ], + }, + ); + closeMenu(); + }} + data-testid="global-menu-portfolio" + > + {t('portfolioView')} + + ///: END:ONLY_INCLUDE_IN + } + {getEnvironmentType() === ENVIRONMENT_TYPE_FULLSCREEN ? null : (