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