Alexander Tseung
7 years ago
committed by
Alexander Tseung
parent
f4d833cb09
commit
cc73d869fe
@ -0,0 +1,54 @@ |
||||
import React, { Component } from 'react' |
||||
import PropTypes from 'prop-types' |
||||
import Button from '../../button' |
||||
|
||||
class ConfirmResetAccount extends Component { |
||||
static propTypes = { |
||||
hideModal: PropTypes.func.isRequired, |
||||
resetAccount: PropTypes.func.isRequired, |
||||
} |
||||
|
||||
static contextTypes = { |
||||
t: PropTypes.func, |
||||
} |
||||
|
||||
handleReset () { |
||||
this.props.resetAccount() |
||||
.then(() => this.props.hideModal()) |
||||
} |
||||
|
||||
render () { |
||||
const { t } = this.context |
||||
|
||||
return ( |
||||
<div className="modal-container"> |
||||
<div className="modal-container__content"> |
||||
<div className="modal-container__title"> |
||||
{ `${t('resetAccount')}?` } |
||||
</div> |
||||
<div className="modal-container__description"> |
||||
{ t('resetAccountDescription') } |
||||
</div> |
||||
</div> |
||||
<div className="modal-container__footer"> |
||||
<Button |
||||
type="default" |
||||
className="modal-container__footer-button" |
||||
onClick={() => this.props.hideModal()} |
||||
> |
||||
{ t('nevermind') } |
||||
</Button> |
||||
<Button |
||||
type="secondary" |
||||
className="modal-container__footer-button" |
||||
onClick={() => this.handleReset()} |
||||
> |
||||
{ t('reset') } |
||||
</Button> |
||||
</div> |
||||
</div> |
||||
) |
||||
} |
||||
} |
||||
|
||||
export default ConfirmResetAccount |
||||
@ -0,0 +1,13 @@ |
||||
import { connect } from 'react-redux' |
||||
import ConfirmResetAccount from './confirm-reset-account.component' |
||||
|
||||
const { hideModal, resetAccount } = require('../../../actions') |
||||
|
||||
const mapDispatchToProps = dispatch => { |
||||
return { |
||||
hideModal: () => dispatch(hideModal()), |
||||
resetAccount: () => dispatch(resetAccount()), |
||||
} |
||||
} |
||||
|
||||
export default connect(null, mapDispatchToProps)(ConfirmResetAccount) |
||||
@ -0,0 +1,2 @@ |
||||
import ConfirmResetAccount from './confirm-reset-account.container' |
||||
module.exports = ConfirmResetAccount |
||||
@ -1 +1,52 @@ |
||||
@import './transaction-confirmed/index'; |
||||
.modal-container { |
||||
width: 100%; |
||||
height: 100%; |
||||
background-color: #fff; |
||||
display: flex; |
||||
flex-flow: column; |
||||
border-radius: 8px; |
||||
|
||||
&__title { |
||||
font-size: 1.5rem; |
||||
font-weight: 500; |
||||
padding: 16px 0; |
||||
text-align: center; |
||||
} |
||||
|
||||
&__description { |
||||
text-align: center; |
||||
font-size: .875rem; |
||||
} |
||||
|
||||
&__content { |
||||
overflow-y: auto; |
||||
flex: 1; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
padding: 32px; |
||||
|
||||
@media screen and (max-width: 575px) { |
||||
justify-content: center; |
||||
padding: 28px 20px; |
||||
} |
||||
} |
||||
|
||||
&__footer { |
||||
display: flex; |
||||
flex-flow: row; |
||||
justify-content: center; |
||||
border-top: 1px solid #d2d8dd; |
||||
padding: 16px; |
||||
flex: 0 0 auto; |
||||
|
||||
&-button { |
||||
min-width: 0; |
||||
margin-right: 16px; |
||||
|
||||
&:last-of-type { |
||||
margin-right: 0; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
@ -1,46 +0,0 @@ |
||||
const { Component } = require('react') |
||||
const PropTypes = require('prop-types') |
||||
const h = require('react-hyperscript') |
||||
const connect = require('react-redux').connect |
||||
const actions = require('../../../actions') |
||||
const NotifcationModal = require('../notification-modal') |
||||
|
||||
class ConfirmResetAccount extends Component { |
||||
render () { |
||||
const { resetAccount } = this.props |
||||
|
||||
return h(NotifcationModal, { |
||||
header: 'Are you sure you want to reset account?', |
||||
message: h('div', [ |
||||
|
||||
h('span', `Resetting is for developer use only. This button wipes the current account's transaction history,
|
||||
which is used to calculate the current account nonce. `),
|
||||
|
||||
h('a.notification-modal__link', { |
||||
href: 'http://metamask.helpscoutdocs.com/article/36-resetting-an-account', |
||||
target: '_blank', |
||||
onClick (event) { global.platform.openWindow({ url: event.target.href }) }, |
||||
}, 'Read more.'), |
||||
|
||||
]), |
||||
showCancelButton: true, |
||||
showConfirmButton: true, |
||||
onConfirm: resetAccount, |
||||
|
||||
}) |
||||
} |
||||
} |
||||
|
||||
ConfirmResetAccount.propTypes = { |
||||
resetAccount: PropTypes.func, |
||||
} |
||||
|
||||
const mapDispatchToProps = dispatch => { |
||||
return { |
||||
resetAccount: () => { |
||||
dispatch(actions.resetAccount()) |
||||
}, |
||||
} |
||||
} |
||||
|
||||
module.exports = connect(null, mapDispatchToProps)(ConfirmResetAccount) |
||||
@ -0,0 +1,2 @@ |
||||
import Notification from './notification.container' |
||||
module.exports = Notification |
||||
@ -0,0 +1,30 @@ |
||||
import React from 'react' |
||||
import PropTypes from 'prop-types' |
||||
import Button from '../../button' |
||||
|
||||
const Notification = (props, context) => { |
||||
return ( |
||||
<div className="modal-container"> |
||||
{ props.children } |
||||
<div className="modal-container__footer"> |
||||
<Button |
||||
type="primary" |
||||
onClick={() => props.onHide()} |
||||
> |
||||
{ context.t('ok') } |
||||
</Button> |
||||
</div> |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
Notification.propTypes = { |
||||
onHide: PropTypes.func.isRequired, |
||||
children: PropTypes.element, |
||||
} |
||||
|
||||
Notification.contextTypes = { |
||||
t: PropTypes.func, |
||||
} |
||||
|
||||
export default Notification |
||||
@ -0,0 +1,38 @@ |
||||
import { connect } from 'react-redux' |
||||
import Notification from './notification.component' |
||||
|
||||
const { hideModal } = require('../../../actions') |
||||
|
||||
const mapStateToProps = state => { |
||||
const { appState: { modal: { modalState: { props } } } } = state |
||||
const { onHide } = props |
||||
return { |
||||
onHide, |
||||
} |
||||
} |
||||
|
||||
const mapDispatchToProps = dispatch => { |
||||
return { |
||||
hideModal: () => dispatch(hideModal()), |
||||
} |
||||
} |
||||
|
||||
const mergeProps = (stateProps, dispatchProps, ownProps) => { |
||||
const { onHide, ...otherStateProps } = stateProps |
||||
const { hideModal, ...otherDispatchProps } = dispatchProps |
||||
|
||||
return { |
||||
...otherStateProps, |
||||
...otherDispatchProps, |
||||
...ownProps, |
||||
onHide: () => { |
||||
hideModal() |
||||
|
||||
if (onHide && typeof onHide === 'function') { |
||||
onHide() |
||||
} |
||||
}, |
||||
} |
||||
} |
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(Notification) |
||||
@ -1,2 +1,2 @@ |
||||
import TransactionConfirmed from './transaction-confirmed.container' |
||||
import TransactionConfirmed from './transaction-confirmed.component' |
||||
module.exports = TransactionConfirmed |
||||
|
||||
@ -1,21 +0,0 @@ |
||||
.transaction-confirmed { |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
padding: 32px; |
||||
|
||||
&__title { |
||||
font-size: 2rem; |
||||
padding: 16px 0; |
||||
} |
||||
|
||||
&__description { |
||||
text-align: center; |
||||
font-size: .875rem; |
||||
line-height: 1.5rem; |
||||
} |
||||
|
||||
@media screen and (max-width: 575px) { |
||||
justify-content: center; |
||||
} |
||||
} |
||||
@ -1,20 +0,0 @@ |
||||
import { connect } from 'react-redux' |
||||
import TransactionConfirmed from './transaction-confirmed.component' |
||||
|
||||
const { hideModal } = require('../../../actions') |
||||
|
||||
const mapStateToProps = state => { |
||||
const { appState: { modal: { modalState: { props } } } } = state |
||||
const { onHide } = props |
||||
return { |
||||
onHide, |
||||
} |
||||
} |
||||
|
||||
const mapDispatchToProps = dispatch => { |
||||
return { |
||||
hideModal: () => dispatch(hideModal()), |
||||
} |
||||
} |
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(TransactionConfirmed) |
||||
@ -0,0 +1,2 @@ |
||||
import WelcomeBeta from './welcome-beta.component' |
||||
module.exports = WelcomeBeta |
||||
@ -0,0 +1,23 @@ |
||||
import React from 'react' |
||||
import PropTypes from 'prop-types' |
||||
|
||||
const TransactionConfirmed = (props, context) => { |
||||
const { t } = context |
||||
|
||||
return ( |
||||
<div className="modal-container__content"> |
||||
<div className="modal-container__title"> |
||||
{ `${t('uiWelcome')}` } |
||||
</div> |
||||
<div className="modal-container__description"> |
||||
{ t('uiWelcomeMessage') } |
||||
</div> |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
TransactionConfirmed.contextTypes = { |
||||
t: PropTypes.func, |
||||
} |
||||
|
||||
export default TransactionConfirmed |
||||
Loading…
Reference in new issue