[MMI] adds mmi logic in home view (#18960)

* adds mmi logic to home container

* adds code fences to home component

* adds code fences to home component

* lint fix

* lint fix

* updates fences and runs prettier

* version bump

* clean up code fence

package.json

@@ -231,6 +231,7 @@
     "@keystonehq/metamask-airgapped-keyring": "^0.9.2",
     "@lavamoat/snow": "^1.5.0",
     "@material-ui/core": "^4.11.0",
+    "@metamask-institutional/portfolio-dashboard": "1.1.2",
     "@metamask/address-book-controller": "^2.0.0",
     "@metamask/announcement-controller": "^3.0.0",
     "@metamask/approval-controller": "^2.1.0",

ui/pages/home/home.component.js

@@ -55,9 +55,14 @@ import {
   CONFIRMATION_V_NEXT_ROUTE,
   ADD_NFT_ROUTE,
   ONBOARDING_SECURE_YOUR_WALLET_ROUTE,
+  ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+  CONFIRM_INSTITUTIONAL_FEATURE_CONNECT,
+  CONFIRM_ADD_CUSTODIAN_TOKEN,
+  INTERACTIVE_REPLACEMENT_TOKEN_PAGE,
+  ///: END:ONLY_INCLUDE_IN
 } from '../../helpers/constants/routes';
 import ZENDESK_URLS from '../../helpers/constants/zendesk-url';
-///: BEGIN:ONLY_INCLUDE_IN(build-main)
+///: BEGIN:ONLY_INCLUDE_IN(build-main,build-mmi)
 import { SUPPORT_LINK } from '../../../shared/lib/ui-utils';
 ///: END:ONLY_INCLUDE_IN
 ///: BEGIN:ONLY_INCLUDE_IN(build-beta)
@@ -71,12 +76,25 @@ function shouldCloseNotificationPopup({
   isNotification,
   totalUnapprovedCount,
   isSigningQRHardwareTransaction,
+  ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+  waitForConfirmDeepLinkDialog,
+  institutionalConnectRequests,
+  ///: END:ONLY_INCLUDE_IN
 }) {
-  return (
+  let shouldCLose =
     isNotification &&
     totalUnapprovedCount === 0 &&
-    !isSigningQRHardwareTransaction
+    !isSigningQRHardwareTransaction;
-  );
+
+  ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+  shouldCLose &&=
+    // MMI User must be shown a deeplink
+    !waitForConfirmDeepLinkDialog &&
+    // MMI User is connecting to custodian or compliance
+    institutionalConnectRequests.length === 0;
+  ///: END:ONLY_INCLUDE_IN
+
+  return shouldCLose;
 }
 
 export default class Home extends PureComponent {
@@ -152,6 +170,14 @@ export default class Home extends PureComponent {
     clearNewNetworkAdded: PropTypes.func,
     setActiveNetwork: PropTypes.func,
     onboardedInThisUISession: PropTypes.bool,
+    ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+    institutionalConnectRequests: PropTypes.arrayOf(PropTypes.object),
+    mmiPortfolioEnabled: PropTypes.bool,
+    mmiPortfolioUrl: PropTypes.string,
+    modalOpen: PropTypes.bool,
+    setWaitForConfirmDeepLinkDialog: PropTypes.func,
+    waitForConfirmDeepLinkDialog: PropTypes.bool,
+    ///: END:ONLY_INCLUDE_IN
   };
 
   state = {
@@ -188,6 +214,55 @@ export default class Home extends PureComponent {
     }
   }
 
+  ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+  checkInstitutionalConnectRequest() {
+    const { history, institutionalConnectRequests } = this.props;
+    if (
+      institutionalConnectRequests &&
+      institutionalConnectRequests.length > 0 &&
+      institutionalConnectRequests[0].feature === 'custodian'
+    ) {
+      if (
+        institutionalConnectRequests[0].method ===
+        'metamaskinstitutional_reauthenticate'
+      ) {
+        history.push(INTERACTIVE_REPLACEMENT_TOKEN_PAGE);
+      } else if (
+        institutionalConnectRequests[0].method ===
+        'metamaskinstitutional_authenticate'
+      ) {
+        history.push(CONFIRM_ADD_CUSTODIAN_TOKEN);
+      }
+    } else if (
+      institutionalConnectRequests &&
+      institutionalConnectRequests.length > 0 &&
+      institutionalConnectRequests[0].feature !== 'custodian'
+    ) {
+      history.push(CONFIRM_INSTITUTIONAL_FEATURE_CONNECT);
+    }
+  }
+
+  shouldCloseCurrentWindow() {
+    const {
+      isNotification,
+      modalOpen,
+      totalUnapprovedCount,
+      institutionalConnectRequests,
+      waitForConfirmDeepLinkDialog,
+    } = this.props;
+
+    if (
+      isNotification &&
+      totalUnapprovedCount === 0 &&
+      institutionalConnectRequests.length === 0 &&
+      !waitForConfirmDeepLinkDialog &&
+      !modalOpen
+    ) {
+      global.platform.closeCurrentWindow();
+    }
+  }
+  ///: END:ONLY_INCLUDE_IN
+
   checkStatusAndNavigate() {
     const {
       firstPermissionsRequestId,
@@ -200,6 +275,11 @@ export default class Home extends PureComponent {
       swapsFetchParams,
       pendingConfirmations,
     } = this.props;
+
+    ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+    this.shouldCloseCurrentWindow();
+    ///: END:ONLY_INCLUDE_IN
+
     if (!isNotification && showAwaitingSwapScreen) {
       history.push(AWAITING_SWAP_ROUTE);
     } else if (!isNotification && haveSwapsQuotes) {
@@ -215,10 +295,22 @@ export default class Home extends PureComponent {
     } else if (pendingConfirmations.length > 0) {
       history.push(CONFIRMATION_V_NEXT_ROUTE);
     }
+    ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+    this.checkInstitutionalConnectRequest();
+    ///: END:ONLY_INCLUDE_IN
   }
 
   componentDidMount() {
     this.checkStatusAndNavigate();
+
+    ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+    const { setWaitForConfirmDeepLinkDialog } = this.props;
+
+    window.addEventListener('beforeunload', () => {
+      // If user closes notification window manually, change waitForConfirmDeepLinkDialog to false
+      setWaitForConfirmDeepLinkDialog(false);
+    });
+    ///: END:ONLY_INCLUDE_IN
   }
 
   static getDerivedStateFromProps(props) {
@@ -625,6 +717,10 @@ export default class Home extends PureComponent {
       completedOnboarding,
       onboardedInThisUISession,
       newNetworkAddedConfigurationId,
+      ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+      mmiPortfolioEnabled,
+      mmiPortfolioUrl,
+      ///: END:ONLY_INCLUDE_IN
     } = this.props;
 
     if (forgottenPassword) {
@@ -653,6 +749,9 @@ export default class Home extends PureComponent {
           exact
         />
         <div className="home__container">
+          {
+            ///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask)
+          }
           {showWhatsNew ? <WhatsNewPopup onClose={hideWhatsNewPopup} /> : null}
           {!showWhatsNew && showRecoveryPhraseReminder ? (
             <RecoveryPhraseReminder
@@ -666,10 +765,25 @@ export default class Home extends PureComponent {
           {isPopup && !connectedStatusPopoverHasBeenShown
             ? this.renderPopover()
             : null}
+          {
+            ///: END:ONLY_INCLUDE_IN
+          }
           <div className="home__main-view">
             {process.env.MULTICHAIN ? null : <MenuBar />}
             <div className="home__balance-wrapper">
-              <EthOverview />
+              {
+                ///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask)
+                <EthOverview />
+                ///: END:ONLY_INCLUDE_IN
+              }
+              {
+                ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+                <EthOverview
+                  mmiPortfolioEnabled={mmiPortfolioEnabled}
+                  mmiPortfolioUrl={mmiPortfolioUrl}
+                />
+                ///: END:ONLY_INCLUDE_IN
+              }
             </div>
             <Tabs
               t={this.context.t}
@@ -709,19 +823,23 @@ export default class Home extends PureComponent {
                   />
                 </Box>
               </Tab>
-              <Tab
+              {
-                activeClassName="home__tab--active"
+                ///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask)
-                className="home__tab"
+                <Tab
-                data-testid="home__nfts-tab"
+                  activeClassName="home__tab--active"
-                name={this.context.t('nfts')}
+                  className="home__tab"
-                tabKey="nfts"
+                  data-testid="home__nfts-tab"
-              >
+                  name={this.context.t('nfts')}
-                <NftsTab
+                  tabKey="nfts"
-                  onAddNFT={() => {
+                >
-                    history.push(ADD_NFT_ROUTE);
+                  <NftsTab
-                  }}
+                    onAddNFT={() => {
-                />
+                      history.push(ADD_NFT_ROUTE);
-              </Tab>
+                    }}
+                  />
+                </Tab>
+                ///: END:ONLY_INCLUDE_IN
+              }
               <Tab
                 activeClassName="home__tab--active"
                 className="home__tab"
@@ -734,7 +852,7 @@ export default class Home extends PureComponent {
             </Tabs>
             <div className="home__support">
               {
-                ///: BEGIN:ONLY_INCLUDE_IN(build-main)
+                ///: BEGIN:ONLY_INCLUDE_IN(build-main,build-mmi)
                 t('needHelp', [
                   <a
                     href={SUPPORT_LINK}

ui/pages/home/home.container.js

@@ -2,6 +2,15 @@ import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 import { ApprovalType } from '@metamask/controller-utils';
+///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+import {
+  getMmiPortfolioEnabled,
+  getMmiPortfolioUrl,
+} from '@metamask-institutional/portfolio-dashboard';
+import { mmiActionsFactory } from '../../store/institutional/institution-background';
+import { getWaitForConfirmDeepLinkDialog } from '../../selectors/institutional/selectors';
+import { getInstitutionalConnectRequests } from '../../ducks/institutional/institutional';
+///: END:ONLY_INCLUDE_IN
 import {
   activeTabHasPermissions,
   getFirstPermissionRequest,
@@ -79,6 +88,9 @@ const mapStateToProps = (state) => {
   const totalUnapprovedCount = getTotalUnapprovedCount(state);
   const swapsEnabled = getSwapsFeatureIsLive(state);
   const pendingConfirmations = getUnapprovedTemplatedConfirmations(state);
+  ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+  const institutionalConnectRequests = getInstitutionalConnectRequests(state);
+  ///: END:ONLY_INCLUDE_IN
 
   const envType = getEnvironmentType();
   const isPopup = envType === ENVIRONMENT_TYPE_POPUP;
@@ -155,50 +167,68 @@ const mapStateToProps = (state) => {
     newTokensImported: getNewTokensImported(state),
     newNetworkAddedConfigurationId: appState.newNetworkAddedConfigurationId,
     onboardedInThisUISession: appState.onboardedInThisUISession,
+    ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+    waitForConfirmDeepLinkDialog: getWaitForConfirmDeepLinkDialog(state),
+    institutionalConnectRequests,
+    modalOpen: state.appState.modal.open,
+    mmiPortfolioUrl: getMmiPortfolioUrl(state),
+    mmiPortfolioEnabled: getMmiPortfolioEnabled(state),
+    notificationsToShow: getSortedAnnouncementsToShow(state).length > 0,
+    ///: END:ONLY_INCLUDE_IN
   };
 };
 
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = (dispatch) => {
-  closeNotificationPopup: () => closeNotificationPopup(),
+  ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
-  ///: BEGIN:ONLY_INCLUDE_IN(snaps)
+  const mmiActions = mmiActionsFactory();
-  removeSnapError: async (id) => await removeSnapError(id),
   ///: END:ONLY_INCLUDE_IN
-  setConnectedStatusPopoverHasBeenShown: () =>
+
-    dispatch(setConnectedStatusPopoverHasBeenShown()),
+  return {
-  onTabClick: (name) => dispatch(setDefaultHomeActiveTabName(name)),
+    closeNotificationPopup: () => closeNotificationPopup(),
-  setWeb3ShimUsageAlertDismissed: (origin) =>
+    ///: BEGIN:ONLY_INCLUDE_IN(snaps)
-    setWeb3ShimUsageAlertDismissed(origin),
+    removeSnapError: async (id) => await removeSnapError(id),
-  disableWeb3ShimUsageAlert: () =>
+    ///: END:ONLY_INCLUDE_IN
-    setAlertEnabledness(AlertTypes.web3ShimUsage, false),
+    setConnectedStatusPopoverHasBeenShown: () =>
-  hideWhatsNewPopup: () => dispatch(hideWhatsNewPopup()),
+      dispatch(setConnectedStatusPopoverHasBeenShown()),
-  setRecoveryPhraseReminderHasBeenShown: () =>
+    onTabClick: (name) => dispatch(setDefaultHomeActiveTabName(name)),
-    dispatch(setRecoveryPhraseReminderHasBeenShown()),
+    setWeb3ShimUsageAlertDismissed: (origin) =>
-  setRecoveryPhraseReminderLastShown: (lastShown) =>
+      setWeb3ShimUsageAlertDismissed(origin),
-    dispatch(setRecoveryPhraseReminderLastShown(lastShown)),
+    disableWeb3ShimUsageAlert: () =>
-  setTermsOfUseLastAgreed: (lastAgreed) => {
+      setAlertEnabledness(AlertTypes.web3ShimUsage, false),
-    dispatch(setTermsOfUseLastAgreed(lastAgreed));
+    hideWhatsNewPopup: () => dispatch(hideWhatsNewPopup()),
-  },
+    setRecoveryPhraseReminderHasBeenShown: () =>
-  setOutdatedBrowserWarningLastShown: (lastShown) => {
+      dispatch(setRecoveryPhraseReminderHasBeenShown()),
-    dispatch(setOutdatedBrowserWarningLastShown(lastShown));
+    setRecoveryPhraseReminderLastShown: (lastShown) =>
-  },
+      dispatch(setRecoveryPhraseReminderLastShown(lastShown)),
-  setNewNftAddedMessage: (message) => {
+    setTermsOfUseLastAgreed: (lastAgreed) => {
-    dispatch(setRemoveNftMessage(''));
+      dispatch(setTermsOfUseLastAgreed(lastAgreed));
-    dispatch(setNewNftAddedMessage(message));
+    },
-  },
+    setOutdatedBrowserWarningLastShown: (lastShown) => {
-  setRemoveNftMessage: (message) => {
+      dispatch(setOutdatedBrowserWarningLastShown(lastShown));
-    dispatch(setNewNftAddedMessage(''));
+    },
-    dispatch(setRemoveNftMessage(message));
+    setNewNftAddedMessage: (message) => {
-  },
+      dispatch(setRemoveNftMessage(''));
-  setNewTokensImported: (newTokens) => {
+      dispatch(setNewNftAddedMessage(message));
-    dispatch(setNewTokensImported(newTokens));
+    },
-  },
+    setRemoveNftMessage: (message) => {
-  clearNewNetworkAdded: () => {
+      dispatch(setNewNftAddedMessage(''));
-    dispatch(setNewNetworkAdded({}));
+      dispatch(setRemoveNftMessage(message));
-  },
+    },
-  setActiveNetwork: (networkConfigurationId) => {
+    setNewTokensImported: (newTokens) => {
-    dispatch(setActiveNetwork(networkConfigurationId));
+      dispatch(setNewTokensImported(newTokens));
-  },
+    },
-});
+    clearNewNetworkAdded: () => {
+      dispatch(setNewNetworkAdded({}));
+    },
+    setActiveNetwork: (networkConfigurationId) => {
+      dispatch(setActiveNetwork(networkConfigurationId));
+    },
+    ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+    setWaitForConfirmDeepLinkDialog: (wait) =>
+      dispatch(mmiActions.setWaitForConfirmDeepLinkDialog(wait)),
+    ///: END:ONLY_INCLUDE_IN
+  };
+};
 
 export default compose(
   withRouter,

yarn.lock

@@ -3614,6 +3614,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@metamask-institutional/portfolio-dashboard@npm:1.1.2":
+  version: 1.1.2
+  resolution: "@metamask-institutional/portfolio-dashboard@npm:1.1.2"
+  checksum: f2e1ec83fe0411f4d2e67dfdf2183f89667f34ae862425ece7b5cd0f4099eb7ae091910d67a3f15b7b5982e87bc80e9f668c25072c3bc5a977377fce14357cd3
+  languageName: node
+  linkType: hard
+
 "@metamask/abi-utils@npm:^1.1.0":
   version: 1.1.1
   resolution: "@metamask/abi-utils@npm:1.1.1"
@@ -24173,6 +24180,7 @@ __metadata:
     "@lavamoat/lavapack": ^5.0.0
     "@lavamoat/snow": ^1.5.0
     "@material-ui/core": ^4.11.0
+    "@metamask-institutional/portfolio-dashboard": 1.1.2
     "@metamask/address-book-controller": ^2.0.0
     "@metamask/announcement-controller": ^3.0.0
     "@metamask/approval-controller": ^2.1.0