[MMI] Added code fences for account menu (#17965)

* Added code fences for account menu

* updates test and messages json

* clean up

* icons

* icons color correct

* icon size fix

* icon size fix

* adds mmi entries and updates to the new IconName

* clean up

* lint

* clean up

* prettier

* prettier

* camel case

---------

Co-authored-by: Antonio Regadas <antonio.regadas@consensys.net>
Co-authored-by: António Regadas <apregadas@gmail.com>

app/_locales/en/messages.json

@@ -670,6 +670,9 @@
   "coingecko": {
     "message": "CoinGecko"
   },
+  "compliance": {
+    "message": "Compliance"
+  },
   "complianceActivatedDesc": {
     "message": "You can now use compliance in MetaMask Institutional. Receiving AML/CFT analysis within the confirmation screen on all the addresses you interact with."
   },
@@ -730,6 +733,9 @@
   "connectAccountOrCreate": {
     "message": "Connect account or create new"
   },
+  "connectCustodialAccountMenu": {
+    "message": "Connect Custodial Account"
+  },
   "connectCustodialAccountMsg": {
     "message": "Please choose the custodian you want to connect in order to add or refresh a token."
   },
@@ -3167,6 +3173,9 @@
   "portfolio": {
     "message": "Portfolio"
   },
+  "portfolioDashboard": {
+    "message": "Portfolio Dashboard"
+  },
   "portfolioView": {
     "message": "Portfolio view"
   },

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

@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M12.36 6L12.76 8H18V14H14.64L14.24 12H7V6H12.36ZM14 4H5V21H7V14H12.6L13 16H20V6H14.4L14 4Z"
+    fill="black"
+  />
+</svg>

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

@@ -0,0 +1,8 @@
+<svg width="20" height="20" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g id="surface1">
+    <path
+      d="M 10.351562 9.167969 L 10.351562 9.777344 C 10.351562 10.449219 9.835938 11 9.203125 11 L 1.148438 11 C 0.511719 11 0 10.449219 0 9.777344 L 0 1.222656 C 0 0.550781 0.511719 0 1.148438 0 L 9.203125 0 C 9.835938 0 10.351562 0.550781 10.351562 1.222656 L 10.351562 1.832031 L 5.175781 1.832031 C 4.539062 1.832031 4.027344 2.382812 4.027344 3.054688 L 4.027344 7.945312 C 4.027344 8.617188 4.539062 9.167969 5.175781 9.167969 Z M 5.175781 7.945312 L 10.929688 7.945312 L 10.929688 3.054688 L 5.175781 3.054688 Z M 7.476562 6.417969 C 7 6.417969 6.613281 6.007812 6.613281 5.5 C 6.613281 4.992188 7 4.582031 7.476562 4.582031 C 7.953125 4.582031 8.339844 4.992188 8.339844 5.5 C 8.339844 6.007812 7.953125 6.417969 7.476562 6.417969 Z M 7.476562 6.417969 "
+      fill="black"
+    />
+  </g>
+</svg>

app/build-types/mmi/images/icons/portfolio-dashboard.svg

@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M0.75 17.25V15.5083L2.125 14.1333V17.25H0.75ZM4.53125 17.25V11.8417L5.90625 10.4667V17.25H4.53125ZM8.3125 17.25V10.4667L9.6875 11.8646V17.25H8.3125ZM12.0938 17.25V11.8646L13.4688 10.4896V17.25H12.0938ZM15.875 17.25V8.175L17.25 6.8V17.25H15.875ZM0.75 11.8417V9.89375L7.16667 3.52292L10.8333 7.18958L17.25 0.75V2.69792L10.8333 9.1375L7.16667 5.47083L0.75 11.8417Z"
+    fill="black"
+  />
+</svg>

shared/constants/metametrics.ts

@@ -583,7 +583,10 @@ export enum MetaMetricsEventName {
   WalletSetupFailed = 'Wallet Setup Failed',
   WalletCreated = 'Wallet Created',
   ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
-  UserClickedDeepLink = 'User clicked deeplink',
+  UserClickedDeepLink = 'User Clicked Deeplink',
+  UserClickedConnectCustodialAccount = 'Clicked Connect Custodial Account',
+  UserClickedPortfolioButton = 'Clicked Portfolio Button',
+  UserClickedCompliance = 'Clicked Compliance',
   ///: END:ONLY_INCLUDE_IN
   AccountDetailMenuOpened = 'Account Details Menu Opened',
   BlockExplorerLinkClicked = 'Block Explorer Clicked',

ui/components/app/account-menu/__snapshots__/account-menu.test.js.snap

@@ -88,6 +88,41 @@ exports[`Account Menu Render Content should not render keyring label if keyring
             >
               Account 1
             </div>
+            <label
+              class="box mm-text mm-label mm-label--html-for mm-text--body-md mm-text--font-weight-bold box--display-flex box--flex-direction-row box--align-items-center box--color-text-default"
+              for="address-0"
+            />
+            <div
+              class="account-menu__balance-container"
+            >
+              <div
+                class="currency-display-component account-menu__balance"
+                data-testid="account-menu__balance"
+                title="0 ETH"
+              >
+                <span
+                  class="currency-display-component__prefix"
+                />
+                <span
+                  class="currency-display-component__text"
+                >
+                  0
+                </span>
+                <span
+                  class="currency-display-component__suffix"
+                >
+                  ETH
+                </span>
+              </div>
+               
+              <span
+                class="account-menu__address"
+              >
+                 
+                · 
+                0x00
+              </span>
+            </div>
             <div
               class="currency-display-component account-menu__balance"
               data-testid="account-menu__balance"
@@ -168,6 +203,41 @@ exports[`Account Menu Render Content should not render keyring label if keyring
             >
               Imported Account 1
             </div>
+            <label
+              class="box mm-text mm-label mm-label--html-for mm-text--body-md mm-text--font-weight-bold box--display-flex box--flex-direction-row box--align-items-center box--color-text-default"
+              for="address-0"
+            />
+            <div
+              class="account-menu__balance-container"
+            >
+              <div
+                class="currency-display-component account-menu__balance"
+                data-testid="account-menu__balance"
+                title="0 ETH"
+              >
+                <span
+                  class="currency-display-component__prefix"
+                />
+                <span
+                  class="currency-display-component__text"
+                >
+                  0
+                </span>
+                <span
+                  class="currency-display-component__suffix"
+                >
+                  ETH
+                </span>
+              </div>
+               
+              <span
+                class="account-menu__address"
+              >
+                 
+                · 
+                0x1
+              </span>
+            </div>
             <div
               class="currency-display-component account-menu__balance"
               data-testid="account-menu__balance"
@@ -245,6 +315,24 @@ exports[`Account Menu Render Content should not render keyring label if keyring
         Connect hardware wallet
       </div>
     </button>
+    <button
+      class="account-menu__item account-menu__item--clickable"
+    >
+      <div
+        class="account-menu__item__text"
+      >
+        Connect Custodial Account
+      </div>
+    </button>
+    <button
+      class="account-menu__item account-menu__item--clickable"
+    >
+      <div
+        class="account-menu__item__text"
+      >
+        Compliance
+      </div>
+    </button>
     <div
       class="account-menu__divider"
     />

ui/components/app/account-menu/account-menu.component.js

@@ -30,6 +30,10 @@ import {
   ///: BEGIN:ONLY_INCLUDE_IN(snaps)
   NOTIFICATIONS_ROUTE,
   ///: END:ONLY_INCLUDE_IN
+  ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+  CUSTODY_ACCOUNT_ROUTE,
+  COMPLIANCE_FEATURE_ROUTE,
+  ///: END:ONLY_INCLUDE_IN
 } from '../../../helpers/constants/routes';
 import TextField from '../../ui/text-field';
 
@@ -38,6 +42,12 @@ import SearchIcon from '../../ui/icon/search-icon';
 import { SUPPORT_LINK } from '../../../../shared/lib/ui-utils';
 import { IconColor } from '../../../helpers/constants/design-system';
 import { Icon, IconName, IconSize } from '../../component-library';
+///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+import { shortenAddress } from '../../../helpers/utils/util';
+import CustodyLabels from '../../institutional/custody-labels';
+import { toChecksumHexAddress } from '../../../../shared/modules/hexstring-utils';
+///: END:ONLY_INCLUDE_IN
+
 import KeyRingLabel from './keyring-label';
 
 export function AccountMenuItem(props) {
@@ -91,6 +101,11 @@ export default class AccountMenu extends Component {
     ///: BEGIN:ONLY_INCLUDE_IN(snaps)
     unreadNotificationsCount: PropTypes.number,
     ///: END:ONLY_INCLUDE_IN
+    ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+    custodyAccountDetails: PropTypes.object,
+    mmiPortfolioEnabled: PropTypes.bool,
+    mmiPortfolioUrl: PropTypes.string,
+    ///: END:ONLY_INCLUDE_IN
   };
 
   accountsRef;
@@ -173,6 +188,9 @@ export default class AccountMenu extends Component {
       setSelectedAccount,
       addressConnectedSubjectMap,
       originOfCurrentTab,
+      ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+      custodyAccountDetails,
+      ///: END:ONLY_INCLUDE_IN
     } = this.props;
     const { searchQuery } = this.state;
 
@@ -205,6 +223,13 @@ export default class AccountMenu extends Component {
         addressConnectedSubjectMap[identity.address] || {};
       const iconAndNameForOpenSubject = addressSubjects[originOfCurrentTab];
 
+      ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+      const labels = custodyAccountDetails
+        ? custodyAccountDetails[toChecksumHexAddress(identity.address)]
+            ?.labels || []
+        : [];
+      ///: END:ONLY_INCLUDE_IN
+
       return (
         <button
           className="account-menu__account account-menu__item--clickable"
@@ -233,12 +258,41 @@ export default class AccountMenu extends Component {
           <Identicon address={identity.address} diameter={24} />
           <div className="account-menu__account-info">
             <div className="account-menu__name">{identity.name || ''}</div>
-            <UserPreferencedCurrencyDisplay
+            {
-              className="account-menu__balance"
+              ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
-              data-testid="account-menu__balance"
+              <>
-              value={identity.balance}
+                {labels && (
-              type={PRIMARY}
+                  <CustodyLabels
-            />
+                    labels={labels}
+                    background="transparent"
+                    hideNetwork
+                  />
+                )}
+                <div className="account-menu__balance-container">
+                  <UserPreferencedCurrencyDisplay
+                    className="account-menu__balance"
+                    data-testid="account-menu__balance"
+                    value={identity.balance}
+                    type={PRIMARY}
+                  />{' '}
+                  <span className="account-menu__address">
+                    {' '}
+                    · {shortenAddress(identity.address)}
+                  </span>
+                </div>
+              </>
+              ///: END:ONLY_INCLUDE_IN
+            }
+            {
+              ///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask)
+              <UserPreferencedCurrencyDisplay
+                className="account-menu__balance"
+                data-testid="account-menu__balance"
+                value={identity.balance}
+                type={PRIMARY}
+              />
+              ///: END:ONLY_INCLUDE_IN
+            }
           </div>
           <KeyRingLabel keyring={keyring} />
           {iconAndNameForOpenSubject ? (
@@ -313,6 +367,10 @@ export default class AccountMenu extends Component {
       ///: BEGIN:ONLY_INCLUDE_IN(snaps)
       unreadNotificationsCount,
       ///: END:ONLY_INCLUDE_IN
+      ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+      mmiPortfolioEnabled,
+      mmiPortfolioUrl,
+      ///: END:ONLY_INCLUDE_IN
     } = this.props;
 
     if (!isAccountMenuOpen) {
@@ -413,6 +471,76 @@ export default class AccountMenu extends Component {
           }
           text={t('connectHardwareWallet')}
         />
+        {
+          ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+          <>
+            <AccountMenuItem
+              onClick={() => {
+                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);
+                }
+              }}
+              Icon={
+                <Icon
+                  name={IconName.Custody}
+                  color={IconColor.primaryDefault}
+                />
+              }
+              text={t('connectCustodialAccountMenu')}
+            />
+            {mmiPortfolioEnabled && (
+              <AccountMenuItem
+                onClick={() => {
+                  toggleAccountMenu();
+                  trackEvent({
+                    category: MetaMetricsEventCategory.Navigation,
+                    event: MetaMetricsEventName.UserClickedPortfolioButton,
+                  });
+                  window.open(mmiPortfolioUrl, '_blank');
+                }}
+                Icon={
+                  <Icon
+                    name={IconName.MmmiPortfolioDashboard}
+                    color={IconColor.primaryDefault}
+                  />
+                }
+                text={t('portfolioDashboard')}
+              />
+            )}
+            <AccountMenuItem
+              onClick={() => {
+                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);
+                }
+              }}
+              Icon={
+                <Icon
+                  name={IconName.Compliance}
+                  color={IconColor.primaryDefault}
+                />
+              }
+              text={t('compliance')}
+            />
+          </>
+          ///: END:ONLY_INCLUDE_IN
+        }
         <div className="account-menu__divider" />
         {
           ///: BEGIN:ONLY_INCLUDE_IN(snaps)

ui/components/app/account-menu/account-menu.container.js

@@ -1,6 +1,13 @@
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { withRouter } from 'react-router-dom';
+///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+import {
+  getMmiPortfolioEnabled,
+  getMmiPortfolioUrl,
+  getCustodyAccountDetails,
+} from '../../../selectors/institutional/selectors';
+///: END:ONLY_INCLUDE_IN
 import {
   toggleAccountMenu,
   setSelectedAccount,
@@ -45,6 +52,11 @@ function mapStateToProps(state) {
     ///: BEGIN:ONLY_INCLUDE_IN(snaps)
     unreadNotificationsCount,
     ///: END:ONLY_INCLUDE_IN
+    ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+    mmiPortfolioUrl: getMmiPortfolioUrl(state),
+    mmiPortfolioEnabled: getMmiPortfolioEnabled(state),
+    custodyAccountDetails: getCustodyAccountDetails(state),
+    ///: END:ONLY_INCLUDE_IN
   };
 }
 

ui/components/app/account-menu/account-menu.test.js

@@ -74,7 +74,7 @@ describe('Account Menu', () => {
     it('renders user preference currency display balance from account balance', () => {
       const accountBalance = screen.queryAllByTestId('account-menu__balance');
 
-      expect(accountBalance).toHaveLength(2);
+      expect(accountBalance).toHaveLength(4);
     });
 
     it('simulate click', () => {

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

@@ -105,6 +105,9 @@ export enum IconName {
   PasswordCheck = 'password-check',
   People = 'people',
   ProgrammingArrows = 'programming-arrows',
+  MmmiPortfolioDashboard = 'portfolio-dashboard',
+  Compliance = 'compliance',
+  Custody = 'custody',
   Question = 'question',
   Received = 'received',
   Refresh = 'refresh',

ui/components/multichain/account-list-menu/account-list-menu.js

@@ -4,9 +4,12 @@ import { useHistory } from 'react-router-dom';
 import Fuse from 'fuse.js';
 import { useDispatch, useSelector } from 'react-redux';
 import Box from '../../ui/box/box';
-import { ButtonLink, TextFieldSearch, Text } from '../../component-library';
+import {
-// TODO: Replace ICON_NAMES with IconName when ButtonBase/Buttons have been updated
+  IconName,
-import { ICON_NAMES } from '../../component-library/icon/deprecated';
+  ButtonLink,
+  TextFieldSearch,
+  Text,
+} from '../../component-library';
 import { AccountListItem } from '..';
 import {
   BLOCK_SIZES,
@@ -16,6 +19,12 @@ 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,
@@ -32,6 +41,10 @@ import {
   IMPORT_ACCOUNT_ROUTE,
   NEW_ACCOUNT_ROUTE,
   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';
 import { ENVIRONMENT_TYPE_POPUP } from '../../../../shared/constants/app';
@@ -47,6 +60,11 @@ 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('');
 
   let searchResults = accounts;
@@ -144,7 +162,7 @@ export const AccountListMenu = ({ onClose }) => {
           <Box marginBottom={4}>
             <ButtonLink
               size={Size.SM}
-              startIconName={ICON_NAMES.ADD}
+              startIconName={IconName.Add}
               onClick={() => {
                 dispatch(toggleAccountMenu());
                 trackEvent({
@@ -164,7 +182,7 @@ export const AccountListMenu = ({ onClose }) => {
           <Box marginBottom={4}>
             <ButtonLink
               size={Size.SM}
-              startIconName={ICON_NAMES.IMPORT}
+              startIconName={IconName.Import}
               onClick={() => {
                 dispatch(toggleAccountMenu());
                 trackEvent({
@@ -184,7 +202,7 @@ export const AccountListMenu = ({ onClose }) => {
           <Box>
             <ButtonLink
               size={Size.SM}
-              startIconName={ICON_NAMES.HARDWARE}
+              startIconName={IconName.Hardware}
               onClick={() => {
                 dispatch(toggleAccountMenu());
                 trackEvent({
@@ -206,6 +224,69 @@ 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>
         </Box>
       </Box>