Link user from transaction list to etherscan if they have a transaction hash.

3 files changed, 34 insertions, 4 deletions

diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js
index 85699ceeb..62127b153 100644
--- a/ui/app/components/tx-list-item.js
+++ b/ui/app/components/tx-list-item.js
@@ -1,6 +1,7 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
+const prefixForNetwork = require('../../lib/etherscan-prefix-for-network')
 const Identicon = require('./identicon')
 
 module.exports = TxListItem
@@ -24,7 +25,7 @@ TxListItem.prototype.render = function () {
     dateString,
     address,
     transactionAmount,
-    className
+    className,
   } = this.props
 
   return h(`div${className || ''}`, {
@@ -89,4 +90,3 @@ TxListItem.prototype.render = function () {
     ]) // holding on icon from design
   ])
 }
-
diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js
index 654b95416..6a0849daf 100644
--- a/ui/app/components/tx-list.js
+++ b/ui/app/components/tx-list.js
@@ -2,6 +2,7 @@ const Component = require('react').Component
 const connect = require('react-redux').connect
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
+const prefixForNetwork = require('../../lib/etherscan-prefix-for-network')
 const selectors = require('../selectors')
 const TxListItem = require('./tx-list-item')
 const { formatBalance, formatDate } = require('../util')
@@ -71,6 +72,8 @@ TxList.prototype.renderTransactionListItem = function (transaction) {
     transactionStatus: transaction.status,
     transactionAmount: formatBalance(transaction.txParams.value, 6),
     transActionId: transaction.id,
+    transactionHash: transaction.hash,
+    transactionNetworkId: transaction.metamaskNetworkId,
   }
 
   const {
@@ -79,6 +82,8 @@ TxList.prototype.renderTransactionListItem = function (transaction) {
     transactionAmount,
     dateString,
     transActionId,
+    transactionHash,
+    transactionNetworkId,
   } = props
   const { showConfTxPage } = this.props
 
@@ -90,13 +95,33 @@ TxList.prototype.renderTransactionListItem = function (transaction) {
     dateString,
     address,
     transactionAmount,
+    transactionHash,
+    className: '.tx-list-clickable',
   }
 
   if (transactionStatus === 'unapproved') {
     opts.onClick = () => showConfTxPage({id: transActionId})
-    opts.className = '.tx-list-pending-item-container'
+    opts.className += '.tx-list-pending-item-container'
+  }
+  else if (transactionHash) {
+    opts.onClick = () => this.view(transactionHash, transactionNetworkId)
   }
 
   return h(TxListItem, opts)
 }
 
+TxList.prototype.view = function (txHash, network) {
+  const url = etherscanLinkFor(txHash, network)
+  if (url) {
+    navigateTo(url)
+  }
+}
+
+function navigateTo (url) {
+  global.platform.openWindow({ url })
+}
+
+function etherscanLinkFor (txHash, network) {
+  const prefix = prefixForNetwork(network)
+  return `https://${prefix}etherscan.io/tx/${txHash}`
+}
diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss
index ba2f631ae..f3bba574e 100644
--- a/ui/app/css/itcss/components/transaction-list.scss
+++ b/ui/app/css/itcss/components/transaction-list.scss
@@ -71,7 +71,7 @@
   }
 }
 
-.tx-list-pending-item-container {
+.tx-list-clickable {
   cursor: pointer;
 
   &:hover {
@@ -79,6 +79,11 @@
   }
 }
 
+.tx-list-pending-item-container {
+  cursor: pointer;
+  opacity: 0.5;
+}
+
 .tx-list-date-wrapper {
   flex: 1 1 auto;