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

Confirm rejecting multiple transactions with modal

This commit is contained in:
Whymarrh Whitby 2018-09-24 02:37:19 -02:30
parent 7610248f8c
commit 2e35c05f14
8 changed files with 103 additions and 4 deletions

View File

@ -790,6 +790,9 @@
"rejectTxsN": { "rejectTxsN": {
"message": "Reject $1 transactions" "message": "Reject $1 transactions"
}, },
"rejectTxsDescription": {
"message": "You are about to batch reject $1 transactions."
},
"rejected": { "rejected": {
"message": "Rejected" "message": "Rejected"
}, },

View File

@ -28,6 +28,7 @@ import ConfirmCustomizeGasModal from './customize-gas'
import CancelTransaction from './cancel-transaction' import CancelTransaction from './cancel-transaction'
import WelcomeBeta from './welcome-beta' import WelcomeBeta from './welcome-beta'
import TransactionDetails from './transaction-details' import TransactionDetails from './transaction-details'
import RejectTransactions from './reject-transactions'
const modalContainerBaseStyle = { const modalContainerBaseStyle = {
transform: 'translate3d(-50%, 0, 0px)', transform: 'translate3d(-50%, 0, 0px)',
@ -378,6 +379,19 @@ const MODALS = {
}, },
}, },
REJECT_TRANSACTIONS: {
contents: h(RejectTransactions),
mobileModalStyle: {
...modalContainerMobileStyle,
},
laptopModalStyle: {
...modalContainerLaptopStyle,
},
contentStyle: {
borderRadius: '8px',
},
},
DEFAULT: { DEFAULT: {
contents: [], contents: [],
mobileModalStyle: {}, mobileModalStyle: {},

View File

@ -0,0 +1 @@
export { default } from './reject-transactions.container'

View File

@ -0,0 +1,6 @@
.reject-transactions {
&__description {
text-align: center;
font-size: .875rem;
}
}

View File

@ -0,0 +1,45 @@
import PropTypes from 'prop-types'
import React, { PureComponent } from 'react'
import Modal from '../../modal'
export default class RejectTransactionsModal extends PureComponent {
static contextTypes = {
t: PropTypes.func.isRequired,
}
static propTypes = {
onSubmit: PropTypes.func.isRequired,
hideModal: PropTypes.func.isRequired,
unapprovedTxCount: PropTypes.number.isRequired,
}
onSubmit = async () => {
const { onSubmit, hideModal } = this.props
await onSubmit()
hideModal()
}
render () {
const { t } = this.context
const { hideModal, unapprovedTxCount } = this.props
return (
<Modal
headerText={t('rejectTxsN', [unapprovedTxCount])}
onClose={hideModal}
onSubmit={this.onSubmit}
onCancel={hideModal}
submitText={t('reject')}
cancelText={t('cancel')}
submitType="secondary"
>
<div>
<div className="reject-transactions__description">
{ t('rejectTxsDescription', [unapprovedTxCount]) }
</div>
</div>
</Modal>
)
}
}

View File

@ -0,0 +1,17 @@
import { connect } from 'react-redux'
import { compose } from 'recompose'
import RejectTransactionsModal from './reject-transactions.component'
import withModalProps from '../../../higher-order-components/with-modal-props'
const mapStateToProps = (state, ownProps) => {
const { unapprovedTxCount } = ownProps
return {
unapprovedTxCount,
}
}
export default compose(
withModalProps,
connect(mapStateToProps),
)(RejectTransactionsModal)

View File

@ -44,6 +44,7 @@ export default class ConfirmTransactionBase extends Component {
sendTransaction: PropTypes.func, sendTransaction: PropTypes.func,
showCustomizeGasModal: PropTypes.func, showCustomizeGasModal: PropTypes.func,
showTransactionConfirmedModal: PropTypes.func, showTransactionConfirmedModal: PropTypes.func,
showRejectTransactionsConfirmationModal: PropTypes.func,
toAddress: PropTypes.string, toAddress: PropTypes.string,
tokenData: PropTypes.object, tokenData: PropTypes.object,
tokenProps: PropTypes.object, tokenProps: PropTypes.object,
@ -252,13 +253,22 @@ export default class ConfirmTransactionBase extends Component {
} }
handleCancelAll () { handleCancelAll () {
const { cancelAllTransactions, history, clearConfirmTransaction } = this.props const {
cancelAllTransactions,
clearConfirmTransaction,
history,
showRejectTransactionsConfirmationModal,
unapprovedTxCount,
} = this.props
cancelAllTransactions() showRejectTransactionsConfirmationModal({
.then(() => { unapprovedTxCount,
async onSubmit () {
await cancelAllTransactions()
clearConfirmTransaction() clearConfirmTransaction()
history.push(DEFAULT_ROUTE) history.push(DEFAULT_ROUTE)
}) },
})
} }
handleCancel () { handleCancel () {

View File

@ -111,6 +111,9 @@ const mapDispatchToProps = dispatch => {
updateGasAndCalculate: ({ gasLimit, gasPrice }) => { updateGasAndCalculate: ({ gasLimit, gasPrice }) => {
return dispatch(updateGasAndCalculate({ gasLimit, gasPrice })) return dispatch(updateGasAndCalculate({ gasLimit, gasPrice }))
}, },
showRejectTransactionsConfirmationModal: ({ onSubmit, unapprovedTxCount }) => {
return dispatch(showModal({ name: 'REJECT_TRANSACTIONS', onSubmit, unapprovedTxCount }))
},
cancelTransaction: ({ id }) => dispatch(cancelTx({ id })), cancelTransaction: ({ id }) => dispatch(cancelTx({ id })),
cancelAllTransactions: (txList) => dispatch(cancelTxs(txList)), cancelAllTransactions: (txList) => dispatch(cancelTxs(txList)),
sendTransaction: txData => dispatch(updateAndApproveTx(txData)), sendTransaction: txData => dispatch(updateAndApproveTx(txData)),