Confirm rejecting multiple transactions with modal

2 files changed, 17 insertions, 4 deletions

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)),