diff options
Diffstat (limited to 'ui/app/components/modals/modal.js')
-rw-r--r-- | ui/app/components/modals/modal.js | 483 |
1 files changed, 0 insertions, 483 deletions
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js deleted file mode 100644 index 5aff4f5e1..000000000 --- a/ui/app/components/modals/modal.js +++ /dev/null @@ -1,483 +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 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 CustomizeGasModal = require('../customize-gas-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 ConfirmCustomizeGasModal from './customize-gas' -import CancelTransaction from './cancel-transaction' -import WelcomeBeta from './welcome-beta' -import RejectTransactions from './reject-transactions' -import ClearApprovedOrigins from './clear-approved-origins' - -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: '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)', - }, - }, - - BETA_UI_NOTIFICATION_MODAL: { - contents: h(WelcomeBeta), - mobileModalStyle: { - ...modalContainerMobileStyle, - }, - laptopModalStyle: { - ...modalContainerLaptopStyle, - }, - contentStyle: { - borderRadius: '8px', - }, - }, - - CLEAR_APPROVED_ORIGINS: { - contents: h(ClearApprovedOrigins), - mobileModalStyle: { - ...modalContainerMobileStyle, - }, - laptopModalStyle: { - ...modalContainerLaptopStyle, - }, - 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)', - }, - }, - - 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(CustomizeGasModal), - ], - mobileModalStyle: { - width: '100vw', - height: '100vh', - top: '0', - transform: 'none', - left: '0', - right: '0', - margin: '0 auto', - }, - laptopModalStyle: { - width: '720px', - height: '377px', - top: '80px', - transform: 'none', - left: '0', - right: '0', - margin: '0 auto', - }, - }, - - CONFIRM_CUSTOMIZE_GAS: { - contents: h(ConfirmCustomizeGasModal), - mobileModalStyle: { - width: '100vw', - height: '100vh', - top: '0', - transform: 'none', - left: '0', - right: '0', - margin: '0 auto', - }, - laptopModalStyle: { - width: '720px', - height: '377px', - top: '80px', - transform: 'none', - left: '0', - right: '0', - margin: '0 auto', - }, - }, - - 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: () => { - dispatch(actions.hideModal()) - }, - 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() - }, - 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 () { - if (this.props.onHideCallback) { - this.props.onHideCallback() - } - this.props.hideModal() -} - -Modal.prototype.hide = function () { - this.modalRef.hide() -} - -Modal.prototype.show = function () { - this.modalRef.show() -} |