Confirm rejecting multiple transactions with modal

feature/default_network_editable
Whymarrh Whitby 6 years ago
parent 7610248f8c
commit 2e35c05f14
  1. 3
      app/_locales/en/messages.json
  2. 14
      ui/app/components/modals/modal.js
  3. 1
      ui/app/components/modals/reject-transactions/index.js
  4. 6
      ui/app/components/modals/reject-transactions/index.scss
  5. 45
      ui/app/components/modals/reject-transactions/reject-transactions.component.js
  6. 17
      ui/app/components/modals/reject-transactions/reject-transactions.container.js
  7. 18
      ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
  8. 3
      ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js

@ -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: {},

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

@ -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,13 +253,22 @@ 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)
})
},
})
}
handleCancel () {

@ -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…
Cancel
Save