aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/components/modals/modal.js
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app/components/modals/modal.js')
-rw-r--r--ui/app/components/modals/modal.js511
1 files changed, 0 insertions, 511 deletions
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
deleted file mode 100644
index 8ab599a71..000000000
--- a/ui/app/components/modals/modal.js
+++ /dev/null
@@ -1,511 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const connect = require('react-redux').connect
-const FadeModal = require('boron').FadeModal
-const actions = require('../../actions')
-const { resetCustomData: resetCustomGasData } = require('../../ducks/gas.duck')
-const isMobileView = require('../../../lib/is-mobile-view')
-const { getEnvironmentType } = require('../../../../app/scripts/lib/util')
-const { ENVIRONMENT_TYPE_POPUP } = require('../../../../app/scripts/lib/enums')
-
-// Modal Components
-const BuyOptions = require('./buy-options-modal')
-const DepositEtherModal = require('./deposit-ether-modal')
-const AccountDetailsModal = require('./account-details-modal')
-const EditAccountNameModal = require('./edit-account-name-modal')
-const ExportPrivateKeyModal = require('./export-private-key-modal')
-const NewAccountModal = require('./new-account-modal')
-const ShapeshiftDepositTxModal = require('./shapeshift-deposit-tx-modal.js')
-const HideTokenConfirmationModal = require('./hide-token-confirmation-modal')
-const NotifcationModal = require('./notification-modal')
-const QRScanner = require('./qr-scanner')
-
-import ConfirmRemoveAccount from './confirm-remove-account'
-import ConfirmResetAccount from './confirm-reset-account'
-import TransactionConfirmed from './transaction-confirmed'
-import CancelTransaction from './cancel-transaction'
-
-import MetaMetricsOptInModal from './metametrics-opt-in-modal'
-import RejectTransactions from './reject-transactions'
-import ClearApprovedOrigins from './clear-approved-origins'
-import ConfirmCustomizeGasModal from '../gas-customization/gas-modal-page-container'
-
-const modalContainerBaseStyle = {
- transform: 'translate3d(-50%, 0, 0px)',
- border: '1px solid #CCCFD1',
- borderRadius: '8px',
- backgroundColor: '#FFFFFF',
- boxShadow: '0 2px 22px 0 rgba(0,0,0,0.2)',
-}
-
-const modalContainerLaptopStyle = {
- ...modalContainerBaseStyle,
- width: '344px',
- top: '15%',
-}
-
-const modalContainerMobileStyle = {
- ...modalContainerBaseStyle,
- width: '309px',
- top: '12.5%',
-}
-
-const accountModalStyle = {
- mobileModalStyle: {
- width: '95%',
- // top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
- boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
- borderRadius: '4px',
- top: '10%',
- transform: 'none',
- left: '0',
- right: '0',
- margin: '0 auto',
- },
- laptopModalStyle: {
- width: '360px',
- // top: 'calc(33% + 45px)',
- boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
- borderRadius: '4px',
- top: '10%',
- transform: 'none',
- left: '0',
- right: '0',
- margin: '0 auto',
- },
- contentStyle: {
- borderRadius: '4px',
- },
-}
-
-const MODALS = {
- BUY: {
- contents: [
- h(BuyOptions, {}, []),
- ],
- mobileModalStyle: {
- width: '95%',
- // top: isPopupOrNotification() === 'popup' ? '48vh' : '36.5vh',
- transform: 'none',
- left: '0',
- right: '0',
- margin: '0 auto',
- boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)',
- top: '10%',
- },
- laptopModalStyle: {
- width: '66%',
- maxWidth: '550px',
- top: 'calc(10% + 10px)',
- left: '0',
- right: '0',
- margin: '0 auto',
- boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)',
- transform: 'none',
- },
- },
-
- DEPOSIT_ETHER: {
- contents: [
- h(DepositEtherModal, {}, []),
- ],
- onHide: (props) => props.hideWarning(),
- mobileModalStyle: {
- width: '100%',
- height: '100%',
- transform: 'none',
- left: '0',
- right: '0',
- margin: '0 auto',
- boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)',
- top: '0',
- display: 'flex',
- },
- laptopModalStyle: {
- width: 'initial',
- maxWidth: '850px',
- top: 'calc(10% + 10px)',
- left: '0',
- right: '0',
- margin: '0 auto',
- boxShadow: '0 0 6px 0 rgba(0,0,0,0.3)',
- borderRadius: '7px',
- transform: 'none',
- height: 'calc(80% - 20px)',
- overflowY: 'hidden',
- },
- contentStyle: {
- borderRadius: '7px',
- height: '100%',
- },
- },
-
- EDIT_ACCOUNT_NAME: {
- contents: [
- h(EditAccountNameModal, {}, []),
- ],
- mobileModalStyle: {
- width: '95%',
- // top: isPopupOrNotification() === 'popup' ? '48vh' : '36.5vh',
- top: '10%',
- boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
- transform: 'none',
- left: '0',
- right: '0',
- margin: '0 auto',
- },
- laptopModalStyle: {
- width: '375px',
- // top: 'calc(30% + 10px)',
- top: '10%',
- boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
- transform: 'none',
- left: '0',
- right: '0',
- margin: '0 auto',
- },
- },
-
- ACCOUNT_DETAILS: {
- contents: [
- h(AccountDetailsModal, {}, []),
- ],
- ...accountModalStyle,
- },
-
- EXPORT_PRIVATE_KEY: {
- contents: [
- h(ExportPrivateKeyModal, {}, []),
- ],
- ...accountModalStyle,
- },
-
- SHAPESHIFT_DEPOSIT_TX: {
- contents: [
- h(ShapeshiftDepositTxModal),
- ],
- ...accountModalStyle,
- },
-
- HIDE_TOKEN_CONFIRMATION: {
- contents: [
- h(HideTokenConfirmationModal, {}, []),
- ],
- mobileModalStyle: {
- width: '95%',
- top: getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP ? '52vh' : '36.5vh',
- },
- laptopModalStyle: {
- width: '449px',
- top: 'calc(33% + 45px)',
- },
- },
-
- CLEAR_APPROVED_ORIGINS: {
- contents: h(ClearApprovedOrigins),
- mobileModalStyle: {
- ...modalContainerMobileStyle,
- },
- laptopModalStyle: {
- ...modalContainerLaptopStyle,
- },
- contentStyle: {
- borderRadius: '8px',
- },
- },
-
- METAMETRICS_OPT_IN_MODAL: {
- contents: h(MetaMetricsOptInModal),
- mobileModalStyle: {
- ...modalContainerMobileStyle,
- width: '100%',
- height: '100%',
- top: '0px',
- },
- laptopModalStyle: {
- ...modalContainerLaptopStyle,
- top: '10%',
- },
- contentStyle: {
- borderRadius: '8px',
- },
- },
-
- OLD_UI_NOTIFICATION_MODAL: {
- contents: [
- h(NotifcationModal, {
- header: 'oldUI',
- message: 'oldUIMessage',
- }),
- ],
- mobileModalStyle: {
- width: '95%',
- top: getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP ? '52vh' : '36.5vh',
- },
- laptopModalStyle: {
- width: '449px',
- top: 'calc(33% + 45px)',
- },
- },
-
- GAS_PRICE_INFO_MODAL: {
- contents: [
- h(NotifcationModal, {
- header: 'gasPriceNoDenom',
- message: 'gasPriceInfoModalContent',
- }),
- ],
- mobileModalStyle: {
- width: '95%',
- top: getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP ? '52vh' : '36.5vh',
- },
- laptopModalStyle: {
- width: '449px',
- top: 'calc(33% + 45px)',
- },
- },
-
- GAS_LIMIT_INFO_MODAL: {
- contents: [
- h(NotifcationModal, {
- header: 'gasLimit',
- message: 'gasLimitInfoModalContent',
- }),
- ],
- mobileModalStyle: {
- width: '95%',
- top: getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP ? '52vh' : '36.5vh',
- },
- laptopModalStyle: {
- width: '449px',
- top: 'calc(33% + 45px)',
- },
- },
-
- CONFIRM_RESET_ACCOUNT: {
- contents: h(ConfirmResetAccount),
- mobileModalStyle: {
- ...modalContainerMobileStyle,
- },
- laptopModalStyle: {
- ...modalContainerLaptopStyle,
- },
- contentStyle: {
- borderRadius: '8px',
- },
- },
-
- CONFIRM_REMOVE_ACCOUNT: {
- contents: h(ConfirmRemoveAccount),
- mobileModalStyle: {
- ...modalContainerMobileStyle,
- },
- laptopModalStyle: {
- ...modalContainerLaptopStyle,
- },
- contentStyle: {
- borderRadius: '8px',
- },
- },
-
- NEW_ACCOUNT: {
- contents: [
- h(NewAccountModal, {}, []),
- ],
- mobileModalStyle: {
- width: '95%',
- // top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
- top: '10%',
- transform: 'none',
- left: '0',
- right: '0',
- margin: '0 auto',
- },
- laptopModalStyle: {
- width: '449px',
- // top: 'calc(33% + 45px)',
- top: '10%',
- transform: 'none',
- left: '0',
- right: '0',
- margin: '0 auto',
- },
- },
-
- CUSTOMIZE_GAS: {
- contents: [
- h(ConfirmCustomizeGasModal),
- ],
- mobileModalStyle: {
- width: '100vw',
- height: '100vh',
- top: '0',
- transform: 'none',
- left: '0',
- right: '0',
- margin: '0 auto',
- },
- laptopModalStyle: {
- width: 'auto',
- height: '0px',
- top: '80px',
- left: '0px',
- transform: 'none',
- margin: '0 auto',
- position: 'relative',
- },
- contentStyle: {
- borderRadius: '8px',
- },
- customOnHideOpts: {
- action: resetCustomGasData,
- args: [],
- },
- },
-
- TRANSACTION_CONFIRMED: {
- disableBackdropClick: true,
- contents: h(TransactionConfirmed),
- mobileModalStyle: {
- ...modalContainerMobileStyle,
- },
- laptopModalStyle: {
- ...modalContainerLaptopStyle,
- },
- contentStyle: {
- borderRadius: '8px',
- },
- },
-
- QR_SCANNER: {
- contents: h(QRScanner),
- mobileModalStyle: {
- ...modalContainerMobileStyle,
- },
- laptopModalStyle: {
- ...modalContainerLaptopStyle,
- },
- contentStyle: {
- borderRadius: '8px',
- },
- },
-
- CANCEL_TRANSACTION: {
- contents: h(CancelTransaction),
- mobileModalStyle: {
- ...modalContainerMobileStyle,
- },
- laptopModalStyle: {
- ...modalContainerLaptopStyle,
- },
- contentStyle: {
- borderRadius: '8px',
- },
- },
-
- REJECT_TRANSACTIONS: {
- contents: h(RejectTransactions),
- mobileModalStyle: {
- ...modalContainerMobileStyle,
- },
- laptopModalStyle: {
- ...modalContainerLaptopStyle,
- },
- contentStyle: {
- borderRadius: '8px',
- },
- },
-
- DEFAULT: {
- contents: [],
- mobileModalStyle: {},
- laptopModalStyle: {},
- },
-}
-
-const BACKDROPSTYLE = {
- backgroundColor: 'rgba(0, 0, 0, 0.5)',
-}
-
-function mapStateToProps (state) {
- return {
- active: state.appState.modal.open,
- modalState: state.appState.modal.modalState,
- }
-}
-
-function mapDispatchToProps (dispatch) {
- return {
- hideModal: (customOnHideOpts) => {
- dispatch(actions.hideModal())
- if (customOnHideOpts && customOnHideOpts.action) {
- dispatch(customOnHideOpts.action(...customOnHideOpts.args))
- }
- },
- hideWarning: () => {
- dispatch(actions.hideWarning())
- },
-
- }
-}
-
-// Global Modal Component
-inherits(Modal, Component)
-function Modal () {
- Component.call(this)
-}
-
-module.exports = connect(mapStateToProps, mapDispatchToProps)(Modal)
-
-Modal.prototype.render = function () {
- const modal = MODALS[this.props.modalState.name || 'DEFAULT']
-
- const { contents: children, disableBackdropClick = false } = modal
- const modalStyle = modal[isMobileView() ? 'mobileModalStyle' : 'laptopModalStyle']
- const contentStyle = modal.contentStyle || {}
-
- return h(FadeModal,
- {
- className: 'modal',
- keyboard: false,
- onHide: () => {
- if (modal.onHide) {
- modal.onHide(this.props)
- }
- this.onHide(modal.customOnHideOpts)
- },
- ref: (ref) => {
- this.modalRef = ref
- },
- modalStyle,
- contentStyle,
- backdropStyle: BACKDROPSTYLE,
- closeOnClick: !disableBackdropClick,
- },
- children,
- )
-}
-
-Modal.prototype.componentWillReceiveProps = function (nextProps) {
- if (nextProps.active) {
- this.show()
- } else if (this.props.active) {
- this.hide()
- }
-}
-
-Modal.prototype.onHide = function (customOnHideOpts) {
- if (this.props.onHideCallback) {
- this.props.onHideCallback()
- }
- this.props.hideModal(customOnHideOpts)
-}
-
-Modal.prototype.hide = function () {
- this.modalRef.hide()
-}
-
-Modal.prototype.show = function () {
- this.modalRef.show()
-}
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-11 07:01:57 +0800