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;