Confirm rejecting multiple transactions with modal

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