[MMI] Added code fencing in account details modal and selected accounts (#18070)

* Added code fencing in account details modal and selected accounts * Fixed pipeline issues * Remove one code fence
2024-12-23 09:52:26 +01:00 · 2023-05-05 11:28:27 +02:00 · 2023-05-05 11:28:27 +02:00 · c7bb906b03
commit c7bb906b03
parent f0fd1772ee
5 changed files with 132 additions and 6 deletions
--- a/ui/components/app/modals/account-details-modal/account-details-modal.component.js
+++ b/ui/components/app/modals/account-details-modal/account-details-modal.component.js
@ -8,6 +8,10 @@ import EditableLabel from '../../../ui/editable-label';
 import Button from '../../../ui/button';
 import { getURLHostName } from '../../../../helpers/utils/util';
 import { isHardwareKeyring } from '../../../../helpers/utils/hardware';
+///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+import CustodyLabels from '../../../institutional/custody-labels/custody-labels';
+import { toChecksumHexAddress } from '../../../../../shared/modules/hexstring-utils';
+///: END:ONLY_INCLUDE_IN
 import {
  MetaMetricsEventCategory,
  MetaMetricsEventLinkType,
@ -28,6 +32,10 @@ export default class AccountDetailsModal extends Component {
    history: PropTypes.object,
    hideModal: PropTypes.func,
    blockExplorerLinkText: PropTypes.object,
+    ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+    accountType: PropTypes.string,
+    custodyAccountDetails: PropTypes.object,
+    ///: END:ONLY_INCLUDE_IN
  };

  static contextTypes = {
@ -46,6 +54,10 @@ export default class AccountDetailsModal extends Component {
      history,
      hideModal,
      blockExplorerLinkText,
+      ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+      accountType,
+      custodyAccountDetails,
+      ///: END:ONLY_INCLUDE_IN
    } = this.props;
    const { name, address } = selectedIdentity;

@ -59,6 +71,17 @@ export default class AccountDetailsModal extends Component {
      exportPrivateKeyFeatureEnabled = false;
    }

+    ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+    if (keyring?.type?.search('Custody') !== -1) {
+      exportPrivateKeyFeatureEnabled = false;
+    }
+    const showCustodyLabels = accountType === 'custody';
+    const custodyLabels = custodyAccountDetails
+      ? custodyAccountDetails[toChecksumHexAddress(selectedIdentity.address)]
+          ?.labels
+      : {};
+    ///: END:ONLY_INCLUDE_IN
+
    const routeToAddBlockExplorerUrl = () => {
      hideModal();
      history.push(`${NETWORKS_ROUTE}#blockExplorerUrl`);
@ -88,7 +111,11 @@ export default class AccountDetailsModal extends Component {
          onSubmit={(label) => setAccountLabel(address, label)}
          accounts={this.props.accounts}
        />
-
+        {
+          ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+          showCustodyLabels && <CustodyLabels labels={custodyLabels} />
+          ///: END:ONLY_INCLUDE_IN
+        }
        <QrView
          Qr={{
            data: address,
--- a/ui/components/app/modals/account-details-modal/account-details-modal.container.js
+++ b/ui/components/app/modals/account-details-modal/account-details-modal.container.js
@ -12,7 +12,13 @@ import {
  getCurrentChainId,
  getMetaMaskAccountsOrdered,
  getBlockExplorerLinkText,
+  ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+  getAccountType,
+  ///: END:ONLY_INCLUDE_IN
 } from '../../../../selectors';
+///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+import { getCustodyAccountDetails } from '../../../../selectors/institutional/selectors';
+///: END:ONLY_INCLUDE_IN
 import AccountDetailsModal from './account-details-modal.component';

 const mapStateToProps = (state) => {
@ -23,6 +29,10 @@ const mapStateToProps = (state) => {
    rpcPrefs: getRpcPrefsForCurrentProvider(state),
    accounts: getMetaMaskAccountsOrdered(state),
    blockExplorerLinkText: getBlockExplorerLinkText(state, true),
+    ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+    accountType: getAccountType(state),
+    custodyAccountDetails: getCustodyAccountDetails(state),
+    ///: END:ONLY_INCLUDE_IN
  };
 };

--- a/ui/components/app/selected-account/snapshots/selected-account-component.test.js.snap
+++ b/ui/components/app/selected-account/snapshots/selected-account-component.test.js.snap
@ -29,6 +29,14 @@ exports[`SelectedAccount Component should match snapshot 1`] = `
            class="selected-account__address"
          >
            0x0DC...E7bc
+            <div
+              class="selected-account__copy"
+            >
+              <span
+                class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-icon-alternative"
+                style="mask-image: url('./images/icons/undefined.svg');"
+              />
+            </div>
            <div
              class="selected-account__copy"
            >
--- a/ui/components/app/selected-account/selected-account.component.js
+++ b/ui/components/app/selected-account/selected-account.component.js
@ -6,6 +6,11 @@ import { shortenAddress } from '../../../helpers/utils/util';
 import Tooltip from '../../ui/tooltip';
 import { toChecksumHexAddress } from '../../../../shared/modules/hexstring-utils';
 import { SECOND } from '../../../../shared/constants/time';
+///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+import { getEnvironmentType } from '../../../../app/scripts/lib/util';
+import { ENVIRONMENT_TYPE_POPUP } from '../../../../shared/constants/app';
+import CustodyLabels from '../../institutional/custody-labels/custody-labels';
+///: END:ONLY_INCLUDE_IN
 import { Icon, IconName, IconSize } from '../../component-library';
 import { IconColor } from '../../../helpers/constants/design-system';

@ -20,6 +25,12 @@ class SelectedAccount extends Component {

  static propTypes = {
    selectedIdentity: PropTypes.object.isRequired,
+    ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+    accountType: PropTypes.string,
+    accountDetails: PropTypes.object,
+    provider: PropTypes.object,
+    isCustodianSupportedChain: PropTypes.bool,
+    ///: END:ONLY_INCLUDE_IN
  };

  componentDidMount() {
@ -35,21 +46,57 @@ class SelectedAccount extends Component {

  render() {
    const { t } = this.context;
-    const { selectedIdentity } = this.props;
+    const {
+      selectedIdentity,
+      ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+      accountType,
+      accountDetails,
+      provider,
+      isCustodianSupportedChain,
+      ///: END:ONLY_INCLUDE_IN
+    } = this.props;
+
    const checksummedAddress = toChecksumHexAddress(selectedIdentity.address);

+    let title = this.state.copied
+      ? t('copiedExclamation')
+      : t('copyToClipboard');
+
+    let showAccountCopyIcon = true;
+
+    ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+    const custodyLabels = accountDetails
+      ? accountDetails[toChecksumHexAddress(selectedIdentity.address)]?.labels
+      : {};
+    const showCustodyLabels =
+      getEnvironmentType() !== ENVIRONMENT_TYPE_POPUP &&
+      accountType === 'custody' &&
+      custodyLabels;
+
+    const tooltipText = this.state.copied
+      ? t('copiedExclamation')
+      : t('copyToClipboard');
+
+    title = isCustodianSupportedChain
+      ? tooltipText
+      : t('custodyWrongChain', [provider.nickname || provider.type]);
+
+    showAccountCopyIcon = isCustodianSupportedChain;
+    ///: END:ONLY_INCLUDE_IN
+
    return (
      <div className="selected-account">
        <Tooltip
          wrapperClassName="selected-account__tooltip-wrapper"
          position="bottom"
-          title={
-            this.state.copied ? t('copiedExclamation') : t('copyToClipboard')
-          }
+          title={title}
        >
          <button
            className="selected-account__clickable"
            data-testid="selected-account-click"
+            ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+            disabled={!isCustodianSupportedChain}
+            ///: END:ONLY_INCLUDE_IN
            onClick={() => {
              this.setState({ copied: true });
              this.copyTimeout = setTimeout(
@ -63,7 +110,23 @@ class SelectedAccount extends Component {
              {selectedIdentity.name}
            </div>
            <div className="selected-account__address">
+              {
+                ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+                showCustodyLabels && <CustodyLabels labels={custodyLabels} />
+                ///: END:ONLY_INCLUDE_IN
+              }
              {shortenAddress(checksummedAddress)}
+              {showAccountCopyIcon && (
+                <div className="selected-account__copy">
+                  <Icon
+                    name={
+                      this.state.copied ? IconName.COPY_SUCCESS : IconName.COPY
+                    }
+                    size={IconSize.SM}
+                    color={IconColor.iconAlternative}
+                  />
+                </div>
+              )}
              <div className="selected-account__copy">
                <Icon
                  name={
--- a/ui/components/app/selected-account/selected-account.container.js
+++ b/ui/components/app/selected-account/selected-account.container.js
@ -1,10 +1,28 @@
 import { connect } from 'react-redux';
-import { getSelectedIdentity } from '../../../selectors';
+import {
+  getSelectedIdentity,
+  ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+  getAccountType,
+  ///: END:ONLY_INCLUDE_IN
+} from '../../../selectors';
+///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+import {
+  getCustodyAccountDetails,
+  getIsCustodianSupportedChain,
+} from '../../../selectors/institutional/selectors';
+import { getProviderConfig } from '../../../ducks/metamask/metamask';
+///: END:ONLY_INCLUDE_IN
 import SelectedAccount from './selected-account.component';

 const mapStateToProps = (state) => {
  return {
    selectedIdentity: getSelectedIdentity(state),
+    ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+    accountType: getAccountType(state),
+    accountDetails: getCustodyAccountDetails(state),
+    provider: getProviderConfig(state),
+    isCustodianSupportedChain: getIsCustodianSupportedChain(state),
+    ///: END:ONLY_INCLUDE_IN
  };
 };