[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>
2024-12-22 17:33:23 +01:00 · 2023-05-17 16:58:00 +02:00 · 2023-05-17 16:58:00 +02:00 · ebc887021e
commit ebc887021e
parent 804d352d58
11 changed files with 358 additions and 14 deletions
--- a/app/_locales/en/messages.json
+++ b/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"
  },
--- a/app/build-types/mmi/images/icons/compliance.svg
+++ b/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>
--- a/app/build-types/mmi/images/icons/custody.svg
+++ b/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>
--- a/app/build-types/mmi/images/icons/portfolio-dashboard.svg
+++ b/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>
--- a/shared/constants/metametrics.ts
+++ b/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',
--- a/ui/components/app/account-menu/snapshots/account-menu.test.js.snap
+++ b/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"
    />
--- a/ui/components/app/account-menu/account-menu.component.js
+++ b/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"
-              data-testid="account-menu__balance"
-              value={identity.balance}
-              type={PRIMARY}
-            />
+            {
+              ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+              <>
+                {labels && (
+                  <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)
--- a/ui/components/app/account-menu/account-menu.container.js
+++ b/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
  };
 }

--- a/ui/components/app/account-menu/account-menu.test.js
+++ b/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', () => {
--- a/ui/components/component-library/icon/icon.types.ts
+++ b/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',
--- a/ui/components/multichain/account-list-menu/account-list-menu.js
+++ b/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';
-// TODO: Replace ICON_NAMES with IconName when ButtonBase/Buttons have been updated
-import { ICON_NAMES } from '../../component-library/icon/deprecated';
+import {
+  IconName,
+  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>