From 804d352d58ceea6398a1b8e2605cb862a83e8d9b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Albert=20Oliv=C3=A9?= Date: Wed, 17 May 2023 16:57:46 +0200 Subject: [PATCH] [MMI] Add MMI modals with their styles to the app/modals (#18621) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 Co-authored-by: António Regadas --- ui/components/app/modals/index.scss | 5 + ui/components/app/modals/modal.js | 131 +++++++++++++++++- .../{compliance-modal.scss => index.scss} | 0 3 files changed, 135 insertions(+), 1 deletion(-) rename ui/components/institutional/compliance-modal/{compliance-modal.scss => index.scss} (100%) diff --git a/ui/components/app/modals/index.scss b/ui/components/app/modals/index.scss index 00d6391ad..7aa398288 100644 --- a/ui/components/app/modals/index.scss +++ b/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 { diff --git a/ui/components/app/modals/modal.js b/ui/components/app/modals/modal.js index 2c8aed6a6..93680aa1c 100644 --- a/ui/components/app/modals/modal.js +++ b/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: , @@ -291,6 +329,82 @@ const MODALS = { }, }, + ///: BEGIN:ONLY_INCLUDE_IN(build-mmi) + COMPLIANCE: { + contents: , + onHide: (props) => props.hideWarning(), + mobileModalStyle: { + ...modalContainerMobileStyle, + }, + laptopModalStyle: { + ...modalContainerLaptopStyle, + }, + contentStyle: { + borderRadius: '8px', + }, + }, + + COMPLIANCE_DETAILS: { + contents: , + onHide: (props) => props.hideWarning(), + mobileModalStyle: { + ...modalContainerMobileStyle, + }, + laptopModalStyle: { + ...modalContainerLaptopStyle, + }, + contentStyle: { + padding: '0px', + borderRadius: '8px', + }, + }, + + CONFIRM_REMOVE_JWT: { + contents: , + mobileModalStyle: { + ...modalContainerMobileStyle, + }, + laptopModalStyle: { + ...modalContainerLaptopStyle, + }, + contentStyle: { + borderRadius: '8px', + }, + }, + + TRANSACTION_FAILED: { + disableBackdropClick: true, + contents: , + mobileModalStyle: { + ...modalContainerMobileStyle, + }, + laptopModalStyle: { + ...modalContainerLaptopStyle, + }, + contentStyle: { + borderRadius: '8px', + }, + }, + + CUSTODY_CONFIRM_LINK: { + contents: , + ...custodyConfirmModalStyle, + }, + + INTERACTIVE_REPLACEMENT_TOKEN_MODAL: { + contents: , + 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, }); diff --git a/ui/components/institutional/compliance-modal/compliance-modal.scss b/ui/components/institutional/compliance-modal/index.scss similarity index 100% rename from ui/components/institutional/compliance-modal/compliance-modal.scss rename to ui/components/institutional/compliance-modal/index.scss