[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

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,

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
   };
 };
 

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"
             >

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={
+          title={title}
-            this.state.copied ? t('copiedExclamation') : t('copyToClipboard')
-          }
         >
           <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={

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
   };
 };