Add notification for dropped retry transactions (#4363)

6 files changed, 124 insertions, 1 deletions

diff --git a/ui/app/components/modals/index.scss b/ui/app/components/modals/index.scss
new file mode 100644
index 000000000..ec6207f7e
--- /dev/null
+++ b/ui/app/components/modals/index.scss
@@ -0,0 +1 @@
+@import './transaction-confirmed/index';
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index 43dcd20ae..841189277 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -20,6 +20,7 @@ const HideTokenConfirmationModal = require('./hide-token-confirmation-modal')
 const CustomizeGasModal = require('../customize-gas-modal')
 const NotifcationModal = require('./notification-modal')
 const ConfirmResetAccount = require('./notification-modals/confirm-reset-account')
+const TransactionConfirmed = require('./transaction-confirmed')
 
 const accountModalStyle = {
   mobileModalStyle: {
@@ -265,6 +266,37 @@ const MODALS = {
     },
   },
 
+  TRANSACTION_CONFIRMED: {
+    disableBackdropClick: true,
+    contents: [
+      h(TransactionConfirmed, {}, []),
+    ],
+    mobileModalStyle: {
+      width: '100%',
+      height: '100%',
+      transform: 'none',
+      left: '0',
+      right: '0',
+      margin: '0 auto',
+      boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)',
+      top: '0',
+      display: 'flex',
+    },
+    laptopModalStyle: {
+      width: '344px',
+      transform: 'translate3d(-50%, 0, 0px)',
+      top: '15%',
+      border: '1px solid #CCCFD1',
+      borderRadius: '8px',
+      backgroundColor: '#FFFFFF',
+      boxShadow: '0 2px 22px 0 rgba(0,0,0,0.2)',
+    },
+    contentStyle: {
+      borderRadius: '8px',
+      height: '100%',
+    },
+  },
+
   DEFAULT: {
     contents: [],
     mobileModalStyle: {},
@@ -306,7 +338,7 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(Modal)
 Modal.prototype.render = function () {
   const modal = MODALS[this.props.modalState.name || 'DEFAULT']
 
-  const children = modal.contents
+  const { contents: children, disableBackdropClick = false } = modal
   const modalStyle = modal[isMobileView() ? 'mobileModalStyle' : 'laptopModalStyle']
   const contentStyle = modal.contentStyle || {}
 
@@ -326,6 +358,7 @@ Modal.prototype.render = function () {
       modalStyle,
       contentStyle,
       backdropStyle: BACKDROPSTYLE,
+      closeOnClick: !disableBackdropClick,
     },
     children,
   )
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)