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

finish warning modal UI

This commit is contained in:
brunobar79 2018-07-10 19:19:29 -04:00
parent 9b81180ab1
commit b9c2994d24
9 changed files with 120 additions and 3 deletions

View File

@ -733,6 +733,15 @@
"revert": {
"message": "Revert"
},
"remove": {
"message": "remove"
},
"removeAccount": {
"message": "Remove account?"
},
"removeAccountDescription": {
"message": "This account will be removed from your wallet. Please make sure you have the original seed phrase or private key for this imported account before continuing. You can import or create accounts again from the account drop-down. "
},
"rinkeby": {
"message": "Rinkeby Test Network"
},

View File

@ -68,6 +68,9 @@ function mapDispatchToProps (dispatch) {
dispatch(actions.hideSidebar())
dispatch(actions.toggleAccountMenu())
},
showForgetAccountConfirmationModal: (address) => {
return dispatch(actions.showModal({ name: 'CONFIRM_FORGET_ACCOUNT', address }))
},
}
}
@ -204,7 +207,9 @@ AccountMenu.prototype.renderForgetAccount = function (keyring, address) {
AccountMenu.prototype.forgetAccount = function (e, address) {
e.preventDefault()
e.stopPropagation()
const { showForgetAccountConfirmationModal } = this.props
console.log('should forget address: ', address)
showForgetAccountConfirmationModal(address)
}
AccountMenu.prototype.renderKeyringType = function (keyring) {

View File

@ -0,0 +1,60 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Button from '../../button'
import { addressSummary } from '../../../util'
class ConfirmRemoveAccount extends Component {
static propTypes = {
hideModal: PropTypes.func.isRequired,
removeAccount: PropTypes.func.isRequired,
address: PropTypes.string.isRequired,
}
static contextTypes = {
t: PropTypes.func,
}
handleRemove () {
this.props.removeAccount(this.props.address)
.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('removeAccount')}` }
</div>
<div className="modal-container__address">
{addressSummary(this.props.address)}
</div>
<div className="modal-container__description">
{ t('removeAccountDescription') }
<a className="modal-container__link" rel="noopener noreferrer" target="_blank" href="https://consensys.zendesk.com/hc/en-us/articles/360004180111-What-are-imported-accounts-New-UI-">{ t('learnMore') }</a>
</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.handleRemove()}
>
{ t('remove') }
</Button>
</div>
</div>
)
}
}
export default ConfirmRemoveAccount

View File

@ -0,0 +1,13 @@
import { connect } from 'react-redux'
import ConfirmRemoveAccount from './confirm-remove-account.component'
const { hideModal, removeAccount } = require('../../../actions')
const mapDispatchToProps = dispatch => {
return {
hideModal: () => dispatch(hideModal()),
removeAccount: (address) => dispatch(removeAccount(address)),
}
}
export default connect(null, mapDispatchToProps)(ConfirmRemoveAccount)

View File

@ -0,0 +1,2 @@
import ConfirmRemoveAccount from './confirm-remove-account.container'
module.exports = ConfirmRemoveAccount

View File

@ -18,6 +18,17 @@
font-size: .875rem;
}
&__address {
text-align: center;
font-size: 1rem;
margin-top: 20px;
margin-bottom: 20px;
}
&__link {
color: #2f9ae0;
}
&__content {
overflow-y: auto;
flex: 1;

View File

@ -1,4 +1,5 @@
const Component = require('react').Component
const React = require('react')
const Component = React.Component
const h = require('react-hyperscript')
const inherits = require('util').inherits
const connect = require('react-redux').connect
@ -20,6 +21,7 @@ const HideTokenConfirmationModal = require('./hide-token-confirmation-modal')
const CustomizeGasModal = require('../customize-gas-modal')
const NotifcationModal = require('./notification-modal')
const ConfirmResetAccount = require('./confirm-reset-account')
const ConfirmRemoveAccount = require('./confirm-remove-account')
const TransactionConfirmed = require('./transaction-confirmed')
const WelcomeBeta = require('./welcome-beta')
const Notification = require('./notification')
@ -241,6 +243,19 @@ const MODALS = {
},
},
CONFIRM_FORGET_ACCOUNT: {
contents: h(ConfirmRemoveAccount),
mobileModalStyle: {
...modalContainerMobileStyle,
},
laptopModalStyle: {
...modalContainerLaptopStyle,
},
contentStyle: {
borderRadius: '8px',
},
},
NEW_ACCOUNT: {
contents: [
h(NewAccountModal, {}, []),
@ -370,7 +385,7 @@ Modal.prototype.render = function () {
backdropStyle: BACKDROPSTYLE,
closeOnClick: !disableBackdropClick,
},
children,
React.cloneElement(children, {...this.props.modalState.props}, null),
)
}

View File

@ -88,7 +88,8 @@
.forget-account-icon {
width: 25px;
margin-left: 10px;
padding-left: 10px;
height: 25px;
}
&:hover {

View File

@ -156,6 +156,7 @@
.hw-connect {
&__title {
padding-top: 10px;
font-weight: 500;
}
&__msg {