Add notification for dropped retry transactions (#4363)

4 files changed, 89 insertions, 0 deletions

diff --git a/ui/app/components/modals/transaction-confirmed/index.js b/ui/app/components/modals/transaction-confirmed/index.js
new file mode 100644
index 000000000..c8db91388
--- /dev/null
+++ b/ui/app/components/modals/transaction-confirmed/index.js
@@ -0,0 +1,2 @@
+import TransactionConfirmed from './transaction-confirmed.container'
+module.exports = TransactionConfirmed
diff --git a/ui/app/components/modals/transaction-confirmed/index.scss b/ui/app/components/modals/transaction-confirmed/index.scss
new file mode 100644
index 000000000..f8cd1f212
--- /dev/null
+++ b/ui/app/components/modals/transaction-confirmed/index.scss
@@ -0,0 +1,21 @@
+.transaction-confirmed {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 32px;
+
+  &__title {
+    font-size: 2rem;
+    padding: 16px 0;
+  }
+
+  &__description {
+    text-align: center;
+    font-size: .875rem;
+    line-height: 1.5rem;
+  }
+
+  @media screen and (max-width: 575px) {
+    justify-content: center;
+  }
+}
diff --git a/ui/app/components/modals/transaction-confirmed/transaction-confirmed.component.js b/ui/app/components/modals/transaction-confirmed/transaction-confirmed.component.js
new file mode 100644
index 000000000..8d3b288ae
--- /dev/null
+++ b/ui/app/components/modals/transaction-confirmed/transaction-confirmed.component.js
@@ -0,0 +1,46 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import Button from '../../button'
+
+class TransactionConfirmed extends Component {
+  render () {
+    const { t } = this.context
+
+    return (
+      <div className="page-container page-container--full-width page-container--full-height">
+        <div className="page-container__content transaction-confirmed">
+          <img src="images/check-icon.svg" />
+          <div className="transaction-confirmed__title">
+            { `${t('confirmed')}!` }
+          </div>
+          <div className="transaction-confirmed__description">
+            { t('initialTransactionConfirmed') }
+          </div>
+        </div>
+        <div className="page-container__footer">
+          <Button
+            type="primary"
+            className="page-container__footer-button"
+            onClick={() => {
+              this.props.hideModal()
+              this.props.onHide()
+            }}
+          >
+            { t('ok') }
+          </Button>
+        </div>
+      </div>
+    )
+  }
+}
+
+TransactionConfirmed.propTypes = {
+  hideModal: PropTypes.func.isRequired,
+  onHide: PropTypes.func.isRequired,
+}
+
+TransactionConfirmed.contextTypes = {
+  t: PropTypes.func,
+}
+
+export default TransactionConfirmed
diff --git a/ui/app/components/modals/transaction-confirmed/transaction-confirmed.container.js b/ui/app/components/modals/transaction-confirmed/transaction-confirmed.container.js
new file mode 100644
index 000000000..63872f7f2
--- /dev/null
+++ b/ui/app/components/modals/transaction-confirmed/transaction-confirmed.container.js
@@ -0,0 +1,20 @@
+import { connect } from 'react-redux'
+import TransactionConfirmed from './transaction-confirmed.component'
+
+const { hideModal } = require('../../../actions')
+
+const mapStateToProps = state => {
+  const { appState: { modal: { modalState: { props } } } } = state
+  const { onHide } = props
+  return {
+    onHide,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    hideModal: () => dispatch(hideModal()),
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(TransactionConfirmed)