Added view more button to transaction list

Visible at the end of the transaction list, or if no transactions are listed, displayed right after the `No Transactions` message.

CHANGELOG.md

@@ -3,6 +3,8 @@
 ## Current Master
 
 - Added feature to reflect current conversion rates of current vault balance.
+- Transaction history now has a hard limit.
+- Added a link to view more account info after transaction history.
 
 ## 2.8.0 2016-08-15
 

test/unit/account-link-test.js

@@ -0,0 +1,12 @@
+var assert = require('assert')
+var linkGen = require('../../ui/lib/account-link')
+
+describe('account-link', function() {
+
+  it('adds testnet prefix to morden test network', function() {
+    var result = linkGen('account', '2')
+    assert.notEqual(result.indexOf('testnet'), -1, 'testnet injected')
+    assert.notEqual(result.indexOf('account'), -1, 'account included')
+  })
+
+})

ui/app/account-detail.js

@@ -248,6 +248,7 @@ AccountDetailScreen.prototype.transactionList = function () {
     network,
     unconfTxs,
     unconfMsgs,
+    address,
     viewPendingTx: (txId) => {
       this.props.dispatch(actions.viewPendingTx(txId))
     },

ui/app/components/transaction-list.js

@@ -1,6 +1,8 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
+const genAccountLink = require('../../lib/account-link')
+const extension = require('../../../app/scripts/lib/extension')
 
 const TransactionListItem = require('./transaction-list-item')
 
@@ -13,9 +15,10 @@ function TransactionList () {
 }
 
 TransactionList.prototype.render = function () {
-  const { txsToRender, network, unconfMsgs } = this.props
+  const { txsToRender, network, unconfMsgs, address } = this.props
   const transactions = txsToRender.concat(unconfMsgs)
   .sort((a, b) => b.time - a.time)
+  const accountLink = genAccountLink(address, network)
 
   return (
 
@@ -45,11 +48,11 @@ TransactionList.prototype.render = function () {
       h('.tx-list', {
         style: {
           overflowY: 'auto',
-          height: '305px',
+          height: '300px',
           padding: '0 20px',
           textAlign: 'center',
         },
-      }, (
+      }, [
 
         transactions.length
           ? transactions.map((transaction, i) => {
@@ -59,13 +62,29 @@ TransactionList.prototype.render = function () {
                 this.props.viewPendingTx(txId)
               },
             })
-          })
-        : [h('.flex-center', {
+          }).concat(viewMoreButton(accountLink))
+        : h('.flex-center', {
           style: {
+            flexDirection: 'column',
             height: '100%',
           },
-        }, 'No transaction history...')]
-      )),
+        }, [
+          'No transaction history.',
+          viewMoreButton(accountLink),
+        ]),
+      ]),
     ])
   )
 }
+
+function viewMoreButton(url) {
+  return url ? h('button', {
+    style: {
+      margin: '10px',
+    },
+    onClick: (ev) => {
+      ev.preventDefault()
+      extension.tabs.create({ url })
+    }
+  }, 'View More') : null
+}

ui/lib/account-link.js

@@ -0,0 +1,18 @@
+module.exports = function(address, network) {
+  const net = parseInt(network)
+  let link
+
+  switch (net) {
+    case 1: // main net
+      link = `http://etherscan.io/address/${address}`
+      break
+    case 2: // morden test net
+      link = `http://testnet.etherscan.io/address/${address}`
+      break
+    default:
+      link = ''
+      break
+  }
+
+  return link
+}