Confirm rejecting multiple transactions with modal

4 files changed, 69 insertions, 0 deletions

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)