[MMI] Add MMI modals with their styles to the app/modals (#18621)

* Added code fences

* Fixing code fences

* Fixed paths

* Fixing issues

* Fixed imports

* removes fences in scss file and un-needed prop

---------

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

ui/components/app/modals/index.scss

@@ -12,6 +12,11 @@
 @import 'convert-token-to-nft-modal/index';
 @import 'contract-details-modal/index';
 @import 'hold-to-reveal-modal/index';
+@import '../../institutional/confirm-remove-jwt-modal/index';
+@import '../../institutional/custody-confirm-link-modal/index';
+@import '../../institutional/compliance-modal/index';
+@import '../../institutional/compliance-details/index';
+@import '../../institutional/transaction-failed-modal/index';
 @import 'eth-sign-modal/index';
 
 .modal {

ui/components/app/modals/modal.js

@@ -6,9 +6,20 @@ import * as actions from '../../../store/actions';
 import isMobileView from '../../../helpers/utils/is-mobile-view';
 import { getEnvironmentType } from '../../../../app/scripts/lib/util';
 import { ENVIRONMENT_TYPE_POPUP } from '../../../../shared/constants/app';
+///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+import { mmiActionsFactory } from '../../../store/institutional/institution-background';
+///: END:ONLY_INCLUDE_IN
 
 // Modal Components
 import AddNetworkModal from '../../../pages/onboarding-flow/add-network-modal';
+///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+import ConfirmRemoveJWT from '../../institutional/confirm-remove-jwt-modal';
+import TransactionFailed from '../../institutional/transaction-failed-modal';
+import CustodyConfirmLink from '../../institutional/custody-confirm-link-modal';
+import InteractiveReplacementTokenModal from '../../institutional/interactive-replacement-token-modal';
+import ComplianceModal from '../../institutional/compliance-modal';
+import ComplianceDetailsModal from '../../institutional/compliance-details';
+///: END:ONLY_INCLUDE_IN
 import AccountDetailsModal from './account-details-modal';
 import ExportPrivateKeyModal from './export-private-key-modal';
 import HideTokenConfirmationModal from './hide-token-confirmation-modal';
@@ -26,7 +37,6 @@ import EditApprovalPermission from './edit-approval-permission';
 import NewAccountModal from './new-account-modal';
 import CustomizeNonceModal from './customize-nonce';
 import ConvertTokenToNftModal from './convert-token-to-nft-modal/convert-token-to-nft-modal';
-
 import EthSignModal from './eth-sign-modal/eth-sign-modal';
 
 const modalContainerBaseStyle = {
@@ -77,6 +87,34 @@ const accountModalStyle = {
   },
 };
 
+///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+const custodyConfirmModalStyle = {
+  mobileModalStyle: {
+    width: '95%',
+    boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
+    borderRadius: '4px',
+    top: '30%',
+    transform: 'none',
+    left: '0',
+    right: '0',
+    margin: '0 auto',
+  },
+  laptopModalStyle: {
+    width: '360px',
+    boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
+    borderRadius: '4px',
+    top: '30%',
+    transform: 'none',
+    left: '0',
+    right: '0',
+    margin: '0 auto',
+  },
+  contentStyle: {
+    borderRadius: '4px',
+  },
+};
+///: END:ONLY_INCLUDE_IN
+
 const MODALS = {
   ONBOARDING_ADD_NETWORK: {
     contents: <AddNetworkModal />,
@@ -291,6 +329,82 @@ const MODALS = {
     },
   },
 
+  ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+  COMPLIANCE: {
+    contents: <ComplianceModal />,
+    onHide: (props) => props.hideWarning(),
+    mobileModalStyle: {
+      ...modalContainerMobileStyle,
+    },
+    laptopModalStyle: {
+      ...modalContainerLaptopStyle,
+    },
+    contentStyle: {
+      borderRadius: '8px',
+    },
+  },
+
+  COMPLIANCE_DETAILS: {
+    contents: <ComplianceDetailsModal />,
+    onHide: (props) => props.hideWarning(),
+    mobileModalStyle: {
+      ...modalContainerMobileStyle,
+    },
+    laptopModalStyle: {
+      ...modalContainerLaptopStyle,
+    },
+    contentStyle: {
+      padding: '0px',
+      borderRadius: '8px',
+    },
+  },
+
+  CONFIRM_REMOVE_JWT: {
+    contents: <ConfirmRemoveJWT />,
+    mobileModalStyle: {
+      ...modalContainerMobileStyle,
+    },
+    laptopModalStyle: {
+      ...modalContainerLaptopStyle,
+    },
+    contentStyle: {
+      borderRadius: '8px',
+    },
+  },
+
+  TRANSACTION_FAILED: {
+    disableBackdropClick: true,
+    contents: <TransactionFailed />,
+    mobileModalStyle: {
+      ...modalContainerMobileStyle,
+    },
+    laptopModalStyle: {
+      ...modalContainerLaptopStyle,
+    },
+    contentStyle: {
+      borderRadius: '8px',
+    },
+  },
+
+  CUSTODY_CONFIRM_LINK: {
+    contents: <CustodyConfirmLink />,
+    ...custodyConfirmModalStyle,
+  },
+
+  INTERACTIVE_REPLACEMENT_TOKEN_MODAL: {
+    contents: <InteractiveReplacementTokenModal />,
+    mobileModalStyle: {
+      ...modalContainerMobileStyle,
+    },
+    laptopModalStyle: {
+      ...modalContainerLaptopStyle,
+    },
+    contentStyle: {
+      borderRadius: '8px',
+    },
+  },
+  ///: END:ONLY_INCLUDE_IN
+
   DEFAULT: {
     contents: [],
     mobileModalStyle: {},
@@ -310,6 +424,9 @@ function mapStateToProps(state) {
 }
 
 function mapDispatchToProps(dispatch) {
+  ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+  const mmiActions = mmiActionsFactory();
+  ///: END:ONLY_INCLUDE_IN
   return {
     hideModal: (customOnHideOpts) => {
       dispatch(actions.hideModal());
@@ -320,6 +437,10 @@ function mapDispatchToProps(dispatch) {
     hideWarning: () => {
       dispatch(actions.hideWarning());
     },
+    ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+    setWaitForConfirmDeepLinkDialog: (wait) =>
+      dispatch(mmiActions.setWaitForConfirmDeepLinkDialog(wait)),
+    ///: END:ONLY_INCLUDE_IN
   };
 }
 
@@ -329,6 +450,9 @@ class Modal extends Component {
     hideModal: PropTypes.func.isRequired,
     hideWarning: PropTypes.func.isRequired,
     modalState: PropTypes.object.isRequired,
+    ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+    setWaitForConfirmDeepLinkDialog: PropTypes.func,
+    ///: END:ONLY_INCLUDE_IN
   };
 
   hide() {
@@ -359,6 +483,11 @@ class Modal extends Component {
         keyboard={false}
         onHide={() => {
           if (modal.onHide) {
+            ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+            if (this.props.modalState.name === 'CUSTODY_CONFIRM_LINK') {
+              this.props.setWaitForConfirmDeepLinkDialog(false);
+            }
+            ///: END:ONLY_INCLUDE_IN
             modal.onHide({
               hideWarning: this.props.hideWarning,
             });