Removed view more button, added account info button.

Also:
- Also fixed bug that caused React warning when rendering the tx history.
- Renamed 'Transactions' to 'History', since it now has more than that.

6 files changed, 70 insertions, 24 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 23d5b3af3..95f9174eb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,13 +2,14 @@
 
 ## Current Master
 
+- Transaction history now has a hard limit.
+- Added info link on account screen that visits Etherscan.
+
 ## 2.9.0 2016-08-22
 
 - Added ShapeShift to the transaction history
 - Added affiliate key to Shapeshift requests
 - 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.
 - Modify balance display logic.
 
 ## 2.8.0 2016-08-15
diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js
index e00a34c4a..4316ff54e 100644
--- a/ui/app/account-detail.js
+++ b/ui/app/account-detail.js
@@ -4,6 +4,7 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const connect = require('react-redux').connect
 const CopyButton = require('./components/copyButton')
+const AccountInfoLink = require('./components/account-info-link')
 const actions = require('./actions')
 const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
 const valuesFor = require('./util').valuesFor
@@ -44,6 +45,7 @@ AccountDetailScreen.prototype.render = function () {
   var selected = props.address || Object.keys(props.accounts)[0]
   var identity = props.identities[selected]
   var account = props.accounts[selected]
+  const { network } = props
 
   return (
 
@@ -127,6 +129,9 @@ AccountDetailScreen.prototype.render = function () {
                   bottom: '15px',
                 },
               }, [
+
+                h(AccountInfoLink, { selected, network }),
+
                 h(CopyButton, {
                   value: ethUtil.toChecksumAddress(selected),
                 }),
@@ -136,16 +141,15 @@ AccountDetailScreen.prototype.render = function () {
                 }, [
                   h('div', {
                     style: {
-                      margin: '5px',
-                    },
+                      display: 'flex',
+                      alignItems: 'center',
+                    }
                   }, [
                     h('img.cursor-pointer.color-orange', {
                       src: 'images/key-32.png',
                       onClick: () => this.requestAccountExport(selected),
                       style: {
-                        margin: '0px 5px',
-                        width: '20px',
-                        height: '20px',
+                        height: '19px',
                       },
                     }),
                   ]),
diff --git a/ui/app/components/account-info-link.js b/ui/app/components/account-info-link.js
new file mode 100644
index 000000000..4fe3b8b5d
--- /dev/null
+++ b/ui/app/components/account-info-link.js
@@ -0,0 +1,42 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const Tooltip = require('./tooltip')
+const genAccountLink = require('../../lib/account-link')
+const extension = require('../../../app/scripts/lib/extension')
+
+module.exports = AccountInfoLink
+
+inherits(AccountInfoLink, Component)
+function AccountInfoLink () {
+  Component.call(this)
+}
+
+AccountInfoLink.prototype.render = function () {
+  const { selected, network } = this.props
+  const title = 'View account on etherscan'
+  const url = genAccountLink(selected, network)
+
+  if (!url) {
+    return null
+  }
+
+  return h('.account-info-link', {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+    },
+  }, [
+
+    h(Tooltip, {
+      title,
+    }, [
+      h('i.fa.fa-info-circle.cursor-pointer.color-orange', {
+        style: {
+          margin: '5px',
+        },
+        onClick () { extension.tabs.create({ url }) },
+      }),
+    ]),
+  ])
+}
diff --git a/ui/app/components/shift-list-item.js b/ui/app/components/shift-list-item.js
index 11e11cd37..c92181d5d 100644
--- a/ui/app/components/shift-list-item.js
+++ b/ui/app/components/shift-list-item.js
@@ -26,6 +26,10 @@ function ShiftListItem () {
 }
 
 ShiftListItem.prototype.render = function () {
+  var props = this.props
+  const { depositAddress, time, i, response } = props
+  const { transaction } = response
+
   return (
     h('.transaction-list-item.flex-row', {
       style: {
diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js
index b03ca11ad..2cd0f0897 100644
--- a/ui/app/components/transaction-list-item.js
+++ b/ui/app/components/transaction-list-item.js
@@ -44,7 +44,6 @@ TransactionListItem.prototype.render = function () {
 
   return (
     h(`.transaction-list-item.flex-row.flex-space-between${isClickable ? '.pointer' : ''}`, {
-      key: `tx-${transaction.id + i}`,
       onClick: (event) => {
         if (isPending) {
           this.props.showTx(transaction.id)
diff --git a/ui/app/components/transaction-list.js b/ui/app/components/transaction-list.js
index 9348b9fc4..8b9004e69 100644
--- a/ui/app/components/transaction-list.js
+++ b/ui/app/components/transaction-list.js
@@ -16,7 +16,6 @@ function TransactionList () {
 
 TransactionList.prototype.render = function () {
   const { txsToRender, network, unconfMsgs, address } = this.props
-  const transactions = txsToRender.concat(unconfMsgs)
   var shapeShiftTxList
   if (network === '1'){
     shapeShiftTxList = this.props.shapeShiftTxList
@@ -47,7 +46,7 @@ TransactionList.prototype.render = function () {
           paddingBottom: '4px',
         },
       }, [
-        'Transactions',
+        'History',
       ]),
 
       h('.tx-list', {
@@ -61,13 +60,22 @@ TransactionList.prototype.render = function () {
 
         transactions.length
           ? transactions.map((transaction, i) => {
+            let key
+            switch (transaction.key) {
+              case 'shapeshift':
+                const { depositAddress, time } = transaction
+                key = `shift-tx-${depositAddress}-${time}-${i}`
+                break
+              default:
+                key = `tx-${transaction.id}-${i}`
+            }
             return h(TransactionListItem, {
-              transaction, i, network,
+              transaction, i, network, key,
               showTx: (txId) => {
                 this.props.viewPendingTx(txId)
               },
             })
-          }).concat(viewMoreButton(accountLink))
+          })
         : h('.flex-center', {
           style: {
             flexDirection: 'column',
@@ -75,21 +83,9 @@ TransactionList.prototype.render = function () {
           },
         }, [
           'No transaction history.',
-          viewMoreButton(accountLink),
         ]),
       ]),
     ])
   )
 }
 
-function viewMoreButton(url) {
-  return url ? h('button', {
-    style: {
-      margin: '10px',
-    },
-    onClick: (ev) => {
-      ev.preventDefault()
-      extension.tabs.create({ url })
-    },
-  }, 'Show More') : null
-}