Merge pull request #5282 from MetaMask/tx-cancel-ui

Add Cancel Transaction feature. Refactor modals. Add Transaction Details modal.

4 files changed, 67 insertions, 21 deletions

diff --git a/ui/app/components/modals/transaction-confirmed/index.js b/ui/app/components/modals/transaction-confirmed/index.js
index cee8da7f8..7776b969e 100644
--- a/ui/app/components/modals/transaction-confirmed/index.js
+++ b/ui/app/components/modals/transaction-confirmed/index.js
@@ -1,2 +1 @@
-import TransactionConfirmed from './transaction-confirmed.component'
-module.exports = TransactionConfirmed
+export { default } from './transaction-confirmed.container'
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..c97371fb6
--- /dev/null
+++ b/ui/app/components/modals/transaction-confirmed/index.scss
@@ -0,0 +1,22 @@
+.transaction-confirmed {
+  &__title {
+    font-size: 1.5rem;
+    font-weight: 500;
+    padding: 16px 0;
+    text-align: center;
+  }
+
+  &__description {
+    text-align: center;
+    font-size: .875rem;
+  }
+
+  &__content {
+    overflow-y: auto;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 16px;
+  }
+}
diff --git a/ui/app/components/modals/transaction-confirmed/transaction-confirmed.component.js b/ui/app/components/modals/transaction-confirmed/transaction-confirmed.component.js
index c1c8a2976..0a98eb1a1 100644
--- a/ui/app/components/modals/transaction-confirmed/transaction-confirmed.component.js
+++ b/ui/app/components/modals/transaction-confirmed/transaction-confirmed.component.js
@@ -1,24 +1,45 @@
-import React from 'react'
+import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
+import Modal from '../../modal'
 
-const TransactionConfirmed = (props, context) => {
-  const { t } = context
+export default class TransactionConfirmed extends PureComponent {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
 
-  return (
-    <div className="modal-container__content">
-      <img src="images/check-icon.svg" />
-      <div className="modal-container__title">
-        { `${t('confirmed')}!` }
-      </div>
-      <div className="modal-container__description">
-        { t('initialTransactionConfirmed') }
-      </div>
-    </div>
-  )
-}
+  static propTypes = {
+    onSubmit: PropTypes.func,
+    hideModal: PropTypes.func,
+  }
 
-TransactionConfirmed.contextTypes = {
-  t: PropTypes.func,
-}
+  handleSubmit = () => {
+    const { hideModal, onSubmit } = this.props
+
+    hideModal()
 
-export default TransactionConfirmed
+    if (onSubmit && typeof onSubmit === 'function') {
+      onSubmit()
+    }
+  }
+
+  render () {
+    const { t } = this.context
+
+    return (
+      <Modal
+        onSubmit={this.handleSubmit}
+        submitText={t('ok')}
+      >
+        <div className="transaction-confirmed__content">
+          <img src="images/check-icon.svg" />
+          <div className="transaction-confirmed__title">
+            { `${t('confirmed')}!` }
+          </div>
+          <div className="transaction-confirmed__description">
+            { t('initialTransactionConfirmed') }
+          </div>
+        </div>
+      </Modal>
+    )
+  }
+}
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..d4e39681a
--- /dev/null
+++ b/ui/app/components/modals/transaction-confirmed/transaction-confirmed.container.js
@@ -0,0 +1,4 @@
+import TransactionConfirmed from './transaction-confirmed.component'
+import withModalProps from '../../../higher-order-components/with-modal-props'
+
+export default withModalProps(TransactionConfirmed)