1 files changed, 9 insertions, 3 deletions
diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js
index 137cccf37..a02849d0e 100644
--- a/ui/app/components/tx-list.js
+++ b/ui/app/components/tx-list.js
@@ -8,6 +8,7 @@ const TxListItem = require('./tx-list-item')
 const ShiftListItem = require('./shift-list-item')
 const { formatBalance, formatDate } = require('../util')
 const { showConfTxPage } = require('../actions')
+const classnames = require('classnames')
 
 module.exports = connect(mapStateToProps, mapDispatchToProps)(TxList)
 
@@ -97,18 +98,23 @@ TxList.prototype.renderTransactionListItem = function (transaction, conversionRa
     address,
     transactionAmount,
     transactionHash,
-    className: '.tx-list-item.tx-list-clickable',
     conversionRate,
   }
 
-  if (transactionStatus === 'unapproved') {
+  const isUnapproved = transactionStatus === 'unapproved';
+
+  if (isUnapproved) {
     opts.onClick = () => showConfTxPage({id: transActionId})
-    opts.className += '.tx-list-pending-item-container'
     opts.transactionStatus = 'Not Started'
   } else if (transactionHash) {
     opts.onClick = () => this.view(transactionHash, transactionNetworkId)
   }
 
+  opts.className = classnames('.tx-list-item', {
+    '.tx-list-pending-item-container': isUnapproved,
+    '.tx-list-clickable': Boolean(transactionHash) || isUnapproved,
+  })
+
   return h(TxListItem, opts)
 }