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:
parent
7610248f8c
commit
2e35c05f14
@ -790,6 +790,9 @@
|
||||
"rejectTxsN": {
|
||||
"message": "Reject $1 transactions"
|
||||
},
|
||||
"rejectTxsDescription": {
|
||||
"message": "You are about to batch reject $1 transactions."
|
||||
},
|
||||
"rejected": {
|
||||
"message": "Rejected"
|
||||
},
|
||||
|
@ -28,6 +28,7 @@ import ConfirmCustomizeGasModal from './customize-gas'
|
||||
import CancelTransaction from './cancel-transaction'
|
||||
import WelcomeBeta from './welcome-beta'
|
||||
import TransactionDetails from './transaction-details'
|
||||
import RejectTransactions from './reject-transactions'
|
||||
|
||||
const modalContainerBaseStyle = {
|
||||
transform: 'translate3d(-50%, 0, 0px)',
|
||||
@ -378,6 +379,19 @@ const MODALS = {
|
||||
},
|
||||
},
|
||||
|
||||
REJECT_TRANSACTIONS: {
|
||||
contents: h(RejectTransactions),
|
||||
mobileModalStyle: {
|
||||
...modalContainerMobileStyle,
|
||||
},
|
||||
laptopModalStyle: {
|
||||
...modalContainerLaptopStyle,
|
||||
},
|
||||
contentStyle: {
|
||||
borderRadius: '8px',
|
||||
},
|
||||
},
|
||||
|
||||
DEFAULT: {
|
||||
contents: [],
|
||||
mobileModalStyle: {},
|
||||
|
1
ui/app/components/modals/reject-transactions/index.js
Normal file
1
ui/app/components/modals/reject-transactions/index.js
Normal file
@ -0,0 +1 @@
|
||||
export { default } from './reject-transactions.container'
|
6
ui/app/components/modals/reject-transactions/index.scss
Normal file
6
ui/app/components/modals/reject-transactions/index.scss
Normal file
@ -0,0 +1,6 @@
|
||||
.reject-transactions {
|
||||
&__description {
|
||||
text-align: center;
|
||||
font-size: .875rem;
|
||||
}
|
||||
}
|
@ -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>
|
||||
)
|
||||
}
|
||||
}
|
@ -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)
|
@ -44,6 +44,7 @@ export default class ConfirmTransactionBase extends Component {
|
||||
sendTransaction: PropTypes.func,
|
||||
showCustomizeGasModal: PropTypes.func,
|
||||
showTransactionConfirmedModal: PropTypes.func,
|
||||
showRejectTransactionsConfirmationModal: PropTypes.func,
|
||||
toAddress: PropTypes.string,
|
||||
tokenData: PropTypes.object,
|
||||
tokenProps: PropTypes.object,
|
||||
@ -252,12 +253,21 @@ export default class ConfirmTransactionBase extends Component {
|
||||
}
|
||||
|
||||
handleCancelAll () {
|
||||
const { cancelAllTransactions, history, clearConfirmTransaction } = this.props
|
||||
const {
|
||||
cancelAllTransactions,
|
||||
clearConfirmTransaction,
|
||||
history,
|
||||
showRejectTransactionsConfirmationModal,
|
||||
unapprovedTxCount,
|
||||
} = this.props
|
||||
|
||||
cancelAllTransactions()
|
||||
.then(() => {
|
||||
showRejectTransactionsConfirmationModal({
|
||||
unapprovedTxCount,
|
||||
async onSubmit () {
|
||||
await cancelAllTransactions()
|
||||
clearConfirmTransaction()
|
||||
history.push(DEFAULT_ROUTE)
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
|
@ -111,6 +111,9 @@ const mapDispatchToProps = 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 })),
|
||||
cancelAllTransactions: (txList) => dispatch(cancelTxs(txList)),
|
||||
sendTransaction: txData => dispatch(updateAndApproveTx(txData)),
|
||||
|
Loading…
Reference in New Issue
Block a user