1 files changed, 21 insertions, 1 deletions
diff --git a/ui/app/components/transaction-list-item-details/transaction-list-item-details.component.js b/ui/app/components/transaction-list-item-details/transaction-list-item-details.component.js
index f65ff4d55..13cb51349 100644
--- a/ui/app/components/transaction-list-item-details/transaction-list-item-details.component.js
+++ b/ui/app/components/transaction-list-item-details/transaction-list-item-details.component.js
@@ -13,7 +13,9 @@ export default class TransactionListItemDetails extends PureComponent {
   }
 
   static propTypes = {
+    onCancel: PropTypes.func,
     onRetry: PropTypes.func,
+    showCancel: PropTypes.bool,
     showRetry: PropTypes.bool,
     transaction: PropTypes.object,
   }
@@ -27,6 +29,13 @@ export default class TransactionListItemDetails extends PureComponent {
     this.setState({ showTransactionDetails: true })
   }
 
+  handleCancel = event => {
+    const { onCancel } = this.props
+
+    event.stopPropagation()
+    onCancel()
+  }
+
   handleRetry = event => {
     const { onRetry } = this.props
 
@@ -36,7 +45,7 @@ export default class TransactionListItemDetails extends PureComponent {
 
   render () {
     const { t } = this.context
-    const { transaction, showRetry } = this.props
+    const { transaction, showCancel, showRetry } = this.props
     const { txParams: { to, from } = {} } = transaction
 
     return (
@@ -55,6 +64,17 @@ export default class TransactionListItemDetails extends PureComponent {
                 </Button>
               )
             }
+            {
+              showCancel && (
+                <Button
+                  type="raised"
+                  onClick={this.handleCancel}
+                  className="transaction-list-item-details__header-button"
+                >
+                  { t('cancel') }
+                </Button>
+              )
+            }
             <Button
               type="raised"
               onClick={this.handleEtherscanClick}