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

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

3 files changed, 53 insertions, 0 deletions

diff --git a/ui/app/components/modals/transaction-details/index.js b/ui/app/components/modals/transaction-details/index.js
new file mode 100644
index 000000000..1fc42c662
--- /dev/null
+++ b/ui/app/components/modals/transaction-details/index.js
@@ -0,0 +1 @@
+export { default } from './transaction-details.container'
diff --git a/ui/app/components/modals/transaction-details/transaction-details.component.js b/ui/app/components/modals/transaction-details/transaction-details.component.js
new file mode 100644
index 000000000..ef438d01f
--- /dev/null
+++ b/ui/app/components/modals/transaction-details/transaction-details.component.js
@@ -0,0 +1,48 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import Modal from '../../modal'
+import TransactionListItemDetails from '../../transaction-list-item-details'
+import { hexToDecimal } from '../../../helpers/conversions.util'
+
+export default class TransactionConfirmed extends PureComponent {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    hideModal: PropTypes.func,
+    transaction: PropTypes.object,
+    onRetry: PropTypes.func,
+    showRetry: PropTypes.bool,
+    onCancel: PropTypes.func,
+    showCancel: PropTypes.bool,
+  }
+
+  handleSubmit = () => {
+    this.props.hideModal()
+  }
+
+  render () {
+    const { t } = this.context
+    const { transaction, onRetry, showRetry, onCancel, showCancel } = this.props
+    const { txParams: { nonce } = {} } = transaction
+    const decimalNonce = nonce && hexToDecimal(nonce)
+
+    return (
+      <Modal
+        onSubmit={this.handleSubmit}
+        onClose={this.handleSubmit}
+        submitText={t('ok')}
+        headerText={t('transactionWithNonce', [`#${decimalNonce}`])}
+      >
+        <TransactionListItemDetails
+          transaction={transaction}
+          onRetry={() => onRetry()}
+          showRetry={showRetry}
+          onCancel={() => onCancel()}
+          showCancel={showCancel}
+        />
+      </Modal>
+    )
+  }
+}
diff --git a/ui/app/components/modals/transaction-details/transaction-details.container.js b/ui/app/components/modals/transaction-details/transaction-details.container.js
new file mode 100644
index 000000000..f212920bb
--- /dev/null
+++ b/ui/app/components/modals/transaction-details/transaction-details.container.js
@@ -0,0 +1,4 @@
+import TransactionDetails from './transaction-details.component'
+import withModalProps from '../../../higher-order-components/with-modal-props'
+
+export default withModalProps(TransactionDetails)