m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Convert modals to use JSX (#7566)

Browse Source
This commit is contained in:
Whymarrh Whitby 2019-11-27 18:49:48 -03:30 committed by GitHub
parent 867dcc48ee
commit cfd041b364
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 39 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
ui/app/components/app/modals/modal.js
View File

@ -1,5 +1,5 @@
const Component = require('react').Component import React, { Component } from 'react'
const h = require('react-hyperscript')
const inherits = require('util').inherits const inherits = require('util').inherits
const connect = require('react-redux').connect const connect = require('react-redux').connect
const FadeModal = require('boron').FadeModal const FadeModal = require('boron').FadeModal
@ -80,9 +80,7 @@ const accountModalStyle = {
const MODALS = { const MODALS = {
DEPOSIT_ETHER: { DEPOSIT_ETHER: {
contents: [ contents: <DepositEtherModal />,
h(DepositEtherModal, {}, []),
],
onHide: (props) => props.hideWarning(), onHide: (props) => props.hideWarning(),
mobileModalStyle: { mobileModalStyle: {
width: '100%', width: '100%',
@ -115,9 +113,7 @@ const MODALS = {
}, },
ADD_TO_ADDRESSBOOK: { ADD_TO_ADDRESSBOOK: {
contents: [ contents: <AddToAddressBookModal />,
h(AddToAddressBookModal, {}, []),
],
mobileModalStyle: { mobileModalStyle: {
width: '95%', width: '95%',
top: '10%', top: '10%',
@ -144,23 +140,17 @@ const MODALS = {
}, },
ACCOUNT_DETAILS: { ACCOUNT_DETAILS: {
contents: [ contents: <AccountDetailsModal />,
h(AccountDetailsModal, {}, []),
],
...accountModalStyle, ...accountModalStyle,
}, },
EXPORT_PRIVATE_KEY: { EXPORT_PRIVATE_KEY: {
contents: [ contents: <ExportPrivateKeyModal />,
h(ExportPrivateKeyModal, {}, []),
],
...accountModalStyle, ...accountModalStyle,
}, },
HIDE_TOKEN_CONFIRMATION: { HIDE_TOKEN_CONFIRMATION: {
contents: [ contents: <HideTokenConfirmationModal />,
h(HideTokenConfirmationModal, {}, []),
],
mobileModalStyle: { mobileModalStyle: {
width: '95%', width: '95%',
top: getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP ? '52vh' : '36.5vh', top: getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP ? '52vh' : '36.5vh',
@ -172,7 +162,7 @@ const MODALS = {
}, },
CLEAR_APPROVED_ORIGINS: { CLEAR_APPROVED_ORIGINS: {
contents: h(ClearApprovedOrigins), contents: <ClearApprovedOrigins />,
mobileModalStyle: { mobileModalStyle: {
...modalContainerMobileStyle, ...modalContainerMobileStyle,
}, },
@ -185,7 +175,7 @@ const MODALS = {
}, },
METAMETRICS_OPT_IN_MODAL: { METAMETRICS_OPT_IN_MODAL: {
contents: h(MetaMetricsOptInModal), contents: <MetaMetricsOptInModal />,
mobileModalStyle: { mobileModalStyle: {
...modalContainerMobileStyle, ...modalContainerMobileStyle,
width: '100%', width: '100%',
@ -202,12 +192,9 @@ const MODALS = {
}, },
GAS_PRICE_INFO_MODAL: { GAS_PRICE_INFO_MODAL: {
contents: [ // TODO Remove this once our i18n unused messages script detection is better
h(NotifcationModal, { // eslint-disable-next-line react/jsx-curly-brace-presence
header: 'gasPriceNoDenom', contents: <NotifcationModal header={'gasPriceNoDenom'} message={'gasPriceInfoModalContent'} />,
message: 'gasPriceInfoModalContent',
}),
],
mobileModalStyle: { mobileModalStyle: {
width: '95%', width: '95%',
top: getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP ? '52vh' : '36.5vh', top: getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP ? '52vh' : '36.5vh',
@ -219,12 +206,9 @@ const MODALS = {
}, },
GAS_LIMIT_INFO_MODAL: { GAS_LIMIT_INFO_MODAL: {
contents: [ // TODO Remove this once our i18n unused messages script detection is better
h(NotifcationModal, { // eslint-disable-next-line react/jsx-curly-brace-presence
header: 'gasLimit', contents: <NotifcationModal header={'gasLimit'} message={'gasLimitInfoModalContent'} />,
message: 'gasLimitInfoModalContent',
}),
],
mobileModalStyle: { mobileModalStyle: {
width: '95%', width: '95%',
top: getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP ? '52vh' : '36.5vh', top: getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP ? '52vh' : '36.5vh',
@ -236,7 +220,7 @@ const MODALS = {
}, },
CONFIRM_RESET_ACCOUNT: { CONFIRM_RESET_ACCOUNT: {
contents: h(ConfirmResetAccount), contents: <ConfirmResetAccount />,
mobileModalStyle: { mobileModalStyle: {
...modalContainerMobileStyle, ...modalContainerMobileStyle,
}, },
@ -249,7 +233,7 @@ const MODALS = {
}, },
CONFIRM_REMOVE_ACCOUNT: { CONFIRM_REMOVE_ACCOUNT: {
contents: h(ConfirmRemoveAccount), contents: <ConfirmRemoveAccount />,
mobileModalStyle: { mobileModalStyle: {
...modalContainerMobileStyle, ...modalContainerMobileStyle,
}, },
@ -262,7 +246,7 @@ const MODALS = {
}, },
CONFIRM_DELETE_NETWORK: { CONFIRM_DELETE_NETWORK: {
contents: h(ConfirmDeleteNetwork), contents: <ConfirmDeleteNetwork />,
mobileModalStyle: { mobileModalStyle: {
...modalContainerMobileStyle, ...modalContainerMobileStyle,
}, },
@ -275,9 +259,7 @@ const MODALS = {
}, },
CUSTOMIZE_GAS: { CUSTOMIZE_GAS: {
contents: [ contents: <ConfirmCustomizeGasModal />,
h(ConfirmCustomizeGasModal),
],
mobileModalStyle: { mobileModalStyle: {
width: '100vw', width: '100vw',
height: '100vh', height: '100vh',
@ -306,7 +288,7 @@ const MODALS = {
}, },
EDIT_APPROVAL_PERMISSION: { EDIT_APPROVAL_PERMISSION: {
contents: h(EditApprovalPermission), contents: <EditApprovalPermission />,
mobileModalStyle: { mobileModalStyle: {
width: '95vw', width: '95vw',
height: '100vh', height: '100vh',
@ -332,7 +314,7 @@ const MODALS = {
TRANSACTION_CONFIRMED: { TRANSACTION_CONFIRMED: {
disableBackdropClick: true, disableBackdropClick: true,
contents: h(TransactionConfirmed), contents: <TransactionConfirmed />,
mobileModalStyle: { mobileModalStyle: {
...modalContainerMobileStyle, ...modalContainerMobileStyle,
}, },
@ -345,7 +327,7 @@ const MODALS = {
}, },
QR_SCANNER: { QR_SCANNER: {
contents: h(QRScanner), contents: <QRScanner />,
mobileModalStyle: { mobileModalStyle: {
...modalContainerMobileStyle, ...modalContainerMobileStyle,
}, },
@ -358,7 +340,7 @@ const MODALS = {
}, },
CANCEL_TRANSACTION: { CANCEL_TRANSACTION: {
contents: h(CancelTransaction), contents: <CancelTransaction />,
mobileModalStyle: { mobileModalStyle: {
...modalContainerMobileStyle, ...modalContainerMobileStyle,
}, },
@ -371,7 +353,7 @@ const MODALS = {
}, },
REJECT_TRANSACTIONS: { REJECT_TRANSACTIONS: {
contents: h(RejectTransactions), contents: <RejectTransactions />,
mobileModalStyle: { mobileModalStyle: {
...modalContainerMobileStyle, ...modalContainerMobileStyle,
}, },
@ -430,25 +412,26 @@ Modal.prototype.render = function () {
const modalStyle = modal[isMobileView() ? 'mobileModalStyle' : 'laptopModalStyle'] const modalStyle = modal[isMobileView() ? 'mobileModalStyle' : 'laptopModalStyle']
const contentStyle = modal.contentStyle || {} const contentStyle = modal.contentStyle || {}
return h(FadeModal, return (
{ <FadeModal
className: 'modal', className="modal"
keyboard: false, keyboard={false}
onHide: () => { onHide={() => {
if (modal.onHide) { if (modal.onHide) {
modal.onHide(this.props) modal.onHide(this.props)
} }
this.onHide(modal.customOnHideOpts) this.onHide(modal.customOnHideOpts)
}, }}
ref: (ref) => { ref={(ref) => {
this.modalRef = ref this.modalRef = ref
}, }}
modalStyle, modalStyle={modalStyle}
contentStyle, contentStyle={contentStyle}
backdropStyle: BACKDROPSTYLE, backdropStyle={BACKDROPSTYLE}
closeOnClick: !disableBackdropClick, closeOnClick={!disableBackdropClick}
}, >
children, {children}
</FadeModal>
) )
} }