2 files changed, 23 insertions, 10 deletions
diff --git a/ui/app/components/transaction-list-item/transaction-list-item.component.js b/ui/app/components/transaction-list-item/transaction-list-item.component.js
index e590e96e0..72389c95b 100644
--- a/ui/app/components/transaction-list-item/transaction-list-item.component.js
+++ b/ui/app/components/transaction-list-item/transaction-list-item.component.js
@@ -12,17 +12,19 @@ import { ETH } from '../../constants/common'
 
 export default class TransactionListItem extends PureComponent {
   static propTypes = {
+    assetImages: PropTypes.object,
     history: PropTypes.object,
-    transaction: PropTypes.object,
-    value: PropTypes.string,
     methodData: PropTypes.object,
-    showRetry: PropTypes.bool,
+    nonceAndDate: PropTypes.string,
     retryTransaction: PropTypes.func,
     setSelectedToken: PropTypes.func,
-    nonceAndDate: PropTypes.string,
+    showCancelModal: PropTypes.func,
+    showCancel: PropTypes.bool,
+    showRetry: PropTypes.bool,
     token: PropTypes.object,
-    assetImages: PropTypes.object,
     tokenData: PropTypes.object,
+    transaction: PropTypes.object,
+    value: PropTypes.string,
   }
 
   state = {
@@ -42,6 +44,11 @@ export default class TransactionListItem extends PureComponent {
     this.setState({ showTransactionDetails: !showTransactionDetails })
   }
 
+  handleCancel = () => {
+    const { transaction: { id, txParams: { gasPrice } } = {}, showCancelModal } = this.props
+    showCancelModal(id, gasPrice)
+  }
+
   handleRetry = () => {
     const {
       transaction: { txParams: { to } = {} },
@@ -100,12 +107,13 @@ export default class TransactionListItem extends PureComponent {
 
   render () {
     const {
-      transaction,
+      assetImages,
       methodData,
-      showRetry,
       nonceAndDate,
-      assetImages,
+      showCancel,
+      showRetry,
       tokenData,
+      transaction,
     } = this.props
     const { txParams = {} } = transaction
     const { showTransactionDetails } = this.state
@@ -153,8 +161,10 @@ export default class TransactionListItem extends PureComponent {
             <div className="transaction-list-item__details-container">
               <TransactionListItemDetails
                 transaction={transaction}
-                showRetry={showRetry && methodData.done}
                 onRetry={this.handleRetry}
+                showRetry={showRetry && methodData.done}
+                onCancel={this.handleCancel}
+                showCancel={showCancel}
               />
             </div>
           )
diff --git a/ui/app/components/transaction-list-item/transaction-list-item.container.js b/ui/app/components/transaction-list-item/transaction-list-item.container.js
index 3db9d40ec..62ed7a73f 100644
--- a/ui/app/components/transaction-list-item/transaction-list-item.container.js
+++ b/ui/app/components/transaction-list-item/transaction-list-item.container.js
@@ -3,7 +3,7 @@ import { withRouter } from 'react-router-dom'
 import { compose } from 'recompose'
 import withMethodData from '../../higher-order-components/with-method-data'
 import TransactionListItem from './transaction-list-item.component'
-import { setSelectedToken, retryTransaction } from '../../actions'
+import { setSelectedToken, retryTransaction, showModal } from '../../actions'
 import { hexToDecimal } from '../../helpers/conversions.util'
 import { getTokenData } from '../../helpers/transactions.util'
 import { formatDate } from '../../util'
@@ -25,6 +25,9 @@ const mapDispatchToProps = dispatch => {
   return {
     setSelectedToken: tokenAddress => dispatch(setSelectedToken(tokenAddress)),
     retryTransaction: transactionId => dispatch(retryTransaction(transactionId)),
+    showCancelModal: (transactionId, originalGasPrice) => {
+      return dispatch(showModal({ name: 'CANCEL_TRANSACTION', transactionId, originalGasPrice }))
+    },
   }
 }