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
@ -761,4 +761,51 @@ div.message-container > div:first-child {
|
|||||||
right: 17.5px;
|
right: 17.5px;
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
cursor: pointer;
|
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 HideTokenConfirmationModal = require('./hide-token-confirmation-modal')
|
||||||
const CustomizeGasModal = require('../customize-gas-modal')
|
const CustomizeGasModal = require('../customize-gas-modal')
|
||||||
const NotifcationModal = require('./notification-modal')
|
const NotifcationModal = require('./notification-modal')
|
||||||
|
const ConfirmResetAccount = require('./notification-modals/confirm-reset-account')
|
||||||
|
|
||||||
const accountModalStyle = {
|
const accountModalStyle = {
|
||||||
mobileModalStyle: {
|
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: {
|
NEW_ACCOUNT: {
|
||||||
contents: [
|
contents: [
|
||||||
h(NewAccountModal, {}, []),
|
h(NewAccountModal, {}, []),
|
||||||
|
@ -9,26 +9,47 @@ class NotificationModal extends Component {
|
|||||||
const {
|
const {
|
||||||
header,
|
header,
|
||||||
message,
|
message,
|
||||||
|
showCancelButton = false,
|
||||||
|
showConfirmButton = false,
|
||||||
|
hideModal,
|
||||||
|
onConfirm,
|
||||||
} = this.props
|
} = this.props
|
||||||
|
|
||||||
|
const showButtons = showCancelButton || showConfirmButton
|
||||||
|
|
||||||
return h('div', [
|
return h('div', [
|
||||||
h('div.notification-modal-wrapper', {
|
h('div.notification-modal__wrapper', {
|
||||||
}, [
|
}, [
|
||||||
|
|
||||||
h('div.notification-modal-header', {}, [
|
h('div.notification-modal__header', {}, [
|
||||||
header,
|
header,
|
||||||
]),
|
]),
|
||||||
|
|
||||||
h('div.notification-modal-message-wrapper', {}, [
|
h('div.notification-modal__message-wrapper', {}, [
|
||||||
h('div.notification-modal-message', {}, [
|
h('div.notification-modal__message', {}, [
|
||||||
message,
|
message,
|
||||||
]),
|
]),
|
||||||
]),
|
]),
|
||||||
|
|
||||||
h('div.modal-close-x', {
|
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 = {
|
NotificationModal.propTypes = {
|
||||||
hideModal: PropTypes.func,
|
hideModal: PropTypes.func,
|
||||||
header: PropTypes.string,
|
header: PropTypes.string,
|
||||||
message: PropTypes.string,
|
message: PropTypes.node,
|
||||||
|
showCancelButton: PropTypes.bool,
|
||||||
|
showConfirmButton: PropTypes.bool,
|
||||||
|
onConfirm: PropTypes.func,
|
||||||
}
|
}
|
||||||
|
|
||||||
const mapDispatchToProps = dispatch => {
|
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,38 +547,54 @@
|
|||||||
|
|
||||||
//Notification Modal
|
//Notification Modal
|
||||||
|
|
||||||
.notification-modal-wrapper {
|
.notification-modal {
|
||||||
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-header {
|
&__wrapper {
|
||||||
background: $wild-sand;
|
display: flex;
|
||||||
width: 100%;
|
flex-direction: column;
|
||||||
display: flex;
|
justify-content: flex-start;
|
||||||
justify-content: center;
|
align-items: center;
|
||||||
padding: 30px;
|
position: relative;
|
||||||
font-size: 22px;
|
border: 1px solid $alto;
|
||||||
color: $nile-blue;
|
box-shadow: 0 0 2px 2px $alto;
|
||||||
height: 79px;
|
font-family: Roboto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notification-modal-message {
|
&__header {
|
||||||
padding: 20px;
|
background: $wild-sand;
|
||||||
}
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 30px;
|
||||||
|
font-size: 22px;
|
||||||
|
color: $nile-blue;
|
||||||
|
height: 79px;
|
||||||
|
}
|
||||||
|
|
||||||
.notification-modal-message {
|
&__message {
|
||||||
width: 100%;
|
padding: 20px;
|
||||||
display: flex;
|
width: 100%;
|
||||||
justify-content: center;
|
display: flex;
|
||||||
font-size: 17px;
|
justify-content: center;
|
||||||
color: $nile-blue;
|
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
|
// Deposit Ether Modal
|
||||||
|
@ -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 () {
|
renderSettingsContent () {
|
||||||
const { warning, isMascara } = this.props
|
const { warning, isMascara } = this.props
|
||||||
|
|
||||||
@ -262,6 +280,7 @@ class Settings extends Component {
|
|||||||
this.renderStateLogs(),
|
this.renderStateLogs(),
|
||||||
this.renderSeedWords(),
|
this.renderSeedWords(),
|
||||||
!isMascara && this.renderOldUI(),
|
!isMascara && this.renderOldUI(),
|
||||||
|
this.renderResetAccount(),
|
||||||
this.renderBlockieOptIn(),
|
this.renderBlockieOptIn(),
|
||||||
])
|
])
|
||||||
)
|
)
|
||||||
@ -387,6 +406,7 @@ Settings.propTypes = {
|
|||||||
displayWarning: PropTypes.func,
|
displayWarning: PropTypes.func,
|
||||||
revealSeedConfirmation: PropTypes.func,
|
revealSeedConfirmation: PropTypes.func,
|
||||||
setFeatureFlagToBeta: PropTypes.func,
|
setFeatureFlagToBeta: PropTypes.func,
|
||||||
|
showResetAccountConfirmationModal: PropTypes.func,
|
||||||
warning: PropTypes.string,
|
warning: PropTypes.string,
|
||||||
goHome: PropTypes.func,
|
goHome: PropTypes.func,
|
||||||
isMascara: PropTypes.bool,
|
isMascara: PropTypes.bool,
|
||||||
@ -412,6 +432,9 @@ const mapDispatchToProps = dispatch => {
|
|||||||
return dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL'))
|
return dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL'))
|
||||||
.then(() => dispatch(actions.setNetworkEndpoints(OLD_UI_NETWORK_TYPE)))
|
.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