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:
parent
f39222c9af
commit
cd976a2765
@ -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;
|
||||
}
|
@ -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, {}, []),
|
||||
|
@ -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 => {
|
||||
|
@ -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)
|
@ -547,7 +547,9 @@
|
||||
|
||||
//Notification Modal
|
||||
|
||||
.notification-modal-wrapper {
|
||||
.notification-modal {
|
||||
|
||||
&__wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
@ -558,7 +560,7 @@
|
||||
font-family: Roboto;
|
||||
}
|
||||
|
||||
.notification-modal-header {
|
||||
&__header {
|
||||
background: $wild-sand;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@ -569,11 +571,8 @@
|
||||
height: 79px;
|
||||
}
|
||||
|
||||
.notification-modal-message {
|
||||
&__message {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.notification-modal-message {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -581,6 +580,23 @@
|
||||
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
|
||||
.deposit-ether-modal {
|
||||
border-radius: 8px;
|
||||
|
@ -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' }))
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user