aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorWhymarrh Whitby <whymarrh.whitby@gmail.com>2018-09-24 13:07:19 +0800
committerWhymarrh Whitby <whymarrh.whitby@gmail.com>2018-10-02 00:14:54 +0800
commit2e35c05f148a823d04b5a0009afd45b3fcd1d3fa (patch)
tree503dedcb95b80db7ef435c7ca1f68a65f1126933
parent7610248f8c09f9fb86da700ae2818e9b4bd07832 (diff)
downloadtangerine-wallet-browser-2e35c05f148a823d04b5a0009afd45b3fcd1d3fa.tar
tangerine-wallet-browser-2e35c05f148a823d04b5a0009afd45b3fcd1d3fa.tar.gz
tangerine-wallet-browser-2e35c05f148a823d04b5a0009afd45b3fcd1d3fa.tar.bz2
tangerine-wallet-browser-2e35c05f148a823d04b5a0009afd45b3fcd1d3fa.tar.lz
tangerine-wallet-browser-2e35c05f148a823d04b5a0009afd45b3fcd1d3fa.tar.xz
tangerine-wallet-browser-2e35c05f148a823d04b5a0009afd45b3fcd1d3fa.tar.zst
tangerine-wallet-browser-2e35c05f148a823d04b5a0009afd45b3fcd1d3fa.zip
Confirm rejecting multiple transactions with modal
-rw-r--r--app/_locales/en/messages.json3
-rw-r--r--ui/app/components/modals/modal.js14
-rw-r--r--ui/app/components/modals/reject-transactions/index.js1
-rw-r--r--ui/app/components/modals/reject-transactions/index.scss6
-rw-r--r--ui/app/components/modals/reject-transactions/reject-transactions.component.js45
-rw-r--r--ui/app/components/modals/reject-transactions/reject-transactions.container.js17
-rw-r--r--ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js18
-rw-r--r--ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js3
8 files changed, 103 insertions, 4 deletions
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 6f99c50e1..e963fc5bd 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -790,6 +790,9 @@
"rejectTxsN": {
"message": "Reject $1 transactions"
},
+ "rejectTxsDescription": {
+ "message": "You are about to batch reject $1 transactions."
+ },
"rejected": {
"message": "Rejected"
},
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index 6054002c8..15ca9deaa 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -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: {},
diff --git a/ui/app/components/modals/reject-transactions/index.js b/ui/app/components/modals/reject-transactions/index.js
new file mode 100644
index 000000000..fcdc372b6
--- /dev/null
+++ b/ui/app/components/modals/reject-transactions/index.js
@@ -0,0 +1 @@
+export { default } from './reject-transactions.container'
diff --git a/ui/app/components/modals/reject-transactions/index.scss b/ui/app/components/modals/reject-transactions/index.scss
new file mode 100644
index 000000000..753466883
--- /dev/null
+++ b/ui/app/components/modals/reject-transactions/index.scss
@@ -0,0 +1,6 @@
+.reject-transactions {
+ &__description {
+ text-align: center;
+ font-size: .875rem;
+ }
+}
diff --git a/ui/app/components/modals/reject-transactions/reject-transactions.component.js b/ui/app/components/modals/reject-transactions/reject-transactions.component.js
new file mode 100644
index 000000000..84b13cffb
--- /dev/null
+++ b/ui/app/components/modals/reject-transactions/reject-transactions.component.js
@@ -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>
+ )
+ }
+}
diff --git a/ui/app/components/modals/reject-transactions/reject-transactions.container.js b/ui/app/components/modals/reject-transactions/reject-transactions.container.js
new file mode 100644
index 000000000..81e98d3ff
--- /dev/null
+++ b/ui/app/components/modals/reject-transactions/reject-transactions.container.js
@@ -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)
diff --git a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
index 7de147d79..707dad62d 100644
--- a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
@@ -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 () {
diff --git a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js
index 5fbd127c3..2e7677a45 100644
--- a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js
+++ b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js
@@ -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)),