1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 01:39:44 +01:00

Add reset account button to new UI.

This commit is contained in:
Dan 2018-02-08 13:48:25 -03:30
parent f39222c9af
commit cd976a2765
6 changed files with 204 additions and 35 deletions

View File

@ -762,3 +762,50 @@ div.message-container > div:first-child {
font-family: sans-serif;
cursor: pointer;
}
.notification-modal__wrapper {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
position: relative;
border: 1px solid #dedede;
box-shadow: 0 0 2px 2px #dedede;
font-family: Roboto;
}
.notification-modal__header {
background: #f6f6f6;
width: 100%;
display: flex;
justify-content: center;
padding: 30px;
font-size: 22px;
color: #1b344d;
height: 79px;
}
.notification-modal__message {
padding: 20px;
width: 100%;
display: flex;
justify-content: center;
font-size: 17px;
color: #1b344d;
}
.notification-modal__buttons {
display: flex;
justify-content: space-evenly;
width: 100%;
margin-bottom: 24px;
padding: 0px 42px;
}
.notification-modal__buttons__btn {
cursor: pointer;
}
.notification-modal__link {
color: #2f9ae0;
}

View File

@ -18,6 +18,7 @@ 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 ConfirmResetAccount = require('./notification-modals/confirm-reset-account')
const accountModalStyle = {
mobileModalStyle: {
@ -202,6 +203,18 @@ const MODALS = {
},
},
CONFIRM_RESET_ACCOUNT: {
contents: h(ConfirmResetAccount),
mobileModalStyle: {
width: '95%',
top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
},
laptopModalStyle: {
width: '473px',
top: 'calc(33% + 45px)',
},
},
NEW_ACCOUNT: {
contents: [
h(NewAccountModal, {}, []),

View File

@ -9,26 +9,47 @@ class NotificationModal extends Component {
const {
header,
message,
showCancelButton = false,
showConfirmButton = false,
hideModal,
onConfirm,
} = this.props
const showButtons = showCancelButton || showConfirmButton
return h('div', [
h('div.notification-modal-wrapper', {
h('div.notification-modal__wrapper', {
}, [
h('div.notification-modal-header', {}, [
h('div.notification-modal__header', {}, [
header,
]),
h('div.notification-modal-message-wrapper', {}, [
h('div.notification-modal-message', {}, [
h('div.notification-modal__message-wrapper', {}, [
h('div.notification-modal__message', {}, [
message,
]),
]),
h('div.modal-close-x', {
onClick: this.props.hideModal,
onClick: hideModal,
}),
showButtons && h('div.notification-modal__buttons', [
showCancelButton && h('div.btn-cancel.notification-modal__buttons__btn', {
onClick: hideModal,
}, 'Cancel'),
showConfirmButton && h('div.btn-clear.notification-modal__buttons__btn', {
onClick: () => {
onConfirm()
hideModal()
},
}, 'Confirm'),
]),
]),
])
}
@ -37,7 +58,10 @@ class NotificationModal extends Component {
NotificationModal.propTypes = {
hideModal: PropTypes.func,
header: PropTypes.string,
message: PropTypes.string,
message: PropTypes.node,
showCancelButton: PropTypes.bool,
showConfirmButton: PropTypes.bool,
onConfirm: PropTypes.func,
}
const mapDispatchToProps = dispatch => {

View File

@ -0,0 +1,46 @@
const { Component } = require('react')
const PropTypes = require('prop-types')
const h = require('react-hyperscript')
const { connect } = require('react-redux')
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)

View File

@ -547,38 +547,54 @@
//Notification Modal
.notification-modal-wrapper {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
position: relative;
border: 1px solid $alto;
box-shadow: 0 0 2px 2px $alto;
font-family: Roboto;
}
.notification-modal {
.notification-modal-header {
background: $wild-sand;
width: 100%;
display: flex;
justify-content: center;
padding: 30px;
font-size: 22px;
color: $nile-blue;
height: 79px;
}
&__wrapper {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
position: relative;
border: 1px solid $alto;
box-shadow: 0 0 2px 2px $alto;
font-family: Roboto;
}
.notification-modal-message {
padding: 20px;
}
&__header {
background: $wild-sand;
width: 100%;
display: flex;
justify-content: center;
padding: 30px;
font-size: 22px;
color: $nile-blue;
height: 79px;
}
.notification-modal-message {
width: 100%;
display: flex;
justify-content: center;
font-size: 17px;
color: $nile-blue;
&__message {
padding: 20px;
width: 100%;
display: flex;
justify-content: center;
font-size: 17px;
color: $nile-blue;
}
&__buttons {
display: flex;
justify-content: space-evenly;
width: 100%;
margin-bottom: 24px;
padding: 0px 42px;
&__btn {
cursor: pointer;
}
}
&__link {
color: $curious-blue;
}
}
// Deposit Ether Modal

View File

@ -250,6 +250,24 @@ class Settings extends Component {
)
}
renderResetAccount () {
const { showResetAccountConfirmationModal } = this.props
return h('div.settings__content-row', [
h('div.settings__content-item', 'Reset Account'),
h('div.settings__content-item', [
h('div.settings__content-item-col', [
h('button.settings__clear-button.settings__clear-button--orange', {
onClick (event) {
event.preventDefault()
showResetAccountConfirmationModal()
},
}, 'Reset Account'),
]),
]),
])
}
renderSettingsContent () {
const { warning, isMascara } = this.props
@ -262,6 +280,7 @@ class Settings extends Component {
this.renderStateLogs(),
this.renderSeedWords(),
!isMascara && this.renderOldUI(),
this.renderResetAccount(),
this.renderBlockieOptIn(),
])
)
@ -387,6 +406,7 @@ Settings.propTypes = {
displayWarning: PropTypes.func,
revealSeedConfirmation: PropTypes.func,
setFeatureFlagToBeta: PropTypes.func,
showResetAccountConfirmationModal: PropTypes.func,
warning: PropTypes.string,
goHome: PropTypes.func,
isMascara: PropTypes.bool,
@ -412,6 +432,9 @@ const mapDispatchToProps = dispatch => {
return dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL'))
.then(() => dispatch(actions.setNetworkEndpoints(OLD_UI_NETWORK_TYPE)))
},
showResetAccountConfirmationModal: () => {
return dispatch(actions.showModal({ name: 'CONFIRM_RESET_ACCOUNT' }))
},
}
}