Merge branch 'master' into i#563forgotPassword

10 files changed, 110 insertions, 29 deletions

diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js
index 836f4bcb9..486a1a633 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',
                       },
                     }),
                   ]),
@@ -244,6 +248,7 @@ AccountDetailScreen.prototype.transactionList = function () {
     network,
     unconfTxs,
     unconfMsgs,
+    address,
     shapeShiftTxList,
     viewPendingTx: (txId) => {
       this.props.dispatch(actions.viewPendingTx(txId))
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/mascot.js b/ui/app/components/mascot.js
index ddd51f8ba..f2b00262b 100644
--- a/ui/app/components/mascot.js
+++ b/ui/app/components/mascot.js
@@ -14,8 +14,9 @@ function Mascot () {
     pxNotRatio: true,
     width: 200,
     height: 200,
+    staticImage: './images/icon-512.png',
   })
-  if (!this.logo) return
+  if (!this.logo.webGLSupport) return
   this.refollowMouse = debounce(this.logo.setFollowMouse.bind(this.logo, true), 1000)
   this.unfollowMouse = this.logo.setFollowMouse.bind(this.logo, false)
 }
@@ -34,19 +35,24 @@ Mascot.prototype.render = function () {
 }
 
 Mascot.prototype.componentDidMount = function () {
-  if (!this.logo) return
   var targetDivId = 'metamask-mascot-container'
   var container = document.getElementById(targetDivId)
-  container.appendChild(this.logo.canvas)
+  if (!this.logo.webGLSupport) {
+    var staticLogo = this.logo.staticLogo
+    staticLogo.style.marginBottom = '40px'
+    container.appendChild(staticLogo)
+  } else {
+    container.appendChild(this.logo.canvas)
+  }
 }
 
 Mascot.prototype.componentWillUnmount = function () {
-  if (!this.logo) return
+  if (!this.logo.webGLSupport) return
   this.logo.canvas.remove()
 }
 
 Mascot.prototype.handleAnimationEvents = function () {
-  if (!this.logo) return
+  if (!this.logo.webGLSupport) return
   // only setup listeners once
   if (this.animations) return
   this.animations = this.props.animationEventEmitter
@@ -55,7 +61,7 @@ Mascot.prototype.handleAnimationEvents = function () {
 }
 
 Mascot.prototype.lookAt = function (target) {
-  if (!this.logo) return
+  if (!this.logo.webGLSupport) return
   this.unfollowMouse()
   this.logo.lookAt(target)
   this.refollowMouse()
diff --git a/ui/app/components/pending-msg-details.js b/ui/app/components/pending-msg-details.js
index adcec596e..16308d121 100644
--- a/ui/app/components/pending-msg-details.js
+++ b/ui/app/components/pending-msg-details.js
@@ -3,7 +3,6 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 
 const AccountPanel = require('./account-panel')
-const readableDate = require('../util').readableDate
 
 module.exports = PendingMsgDetails
 
@@ -24,6 +23,9 @@ PendingMsgDetails.prototype.render = function () {
   return (
     h('div', {
       key: msgData.id,
+      style: {
+        margin: '10px 20px',
+      },
     }, [
 
       // account that will sign
@@ -37,11 +39,6 @@ PendingMsgDetails.prototype.render = function () {
       // message data
       h('.tx-data.flex-column.flex-justify-center.flex-grow.select-none', [
         h('.flex-row.flex-space-between', [
-          h('label.font-small', 'DATE'),
-          h('span.font-small', readableDate(msgData.time)),
-        ]),
-
-        h('.flex-row.flex-space-between', [
           h('label.font-small', 'MESSAGE'),
           h('span.font-small', msgParams.data),
         ]),
diff --git a/ui/app/components/shift-list-item.js b/ui/app/components/shift-list-item.js
index 11e11cd37..38c19eb28 100644
--- a/ui/app/components/shift-list-item.js
+++ b/ui/app/components/shift-list-item.js
@@ -26,6 +26,7 @@ function ShiftListItem () {
 }
 
 ShiftListItem.prototype.render = function () {
+
   return (
     h('.transaction-list-item.flex-row', {
       style: {
@@ -113,7 +114,6 @@ ShiftListItem.prototype.renderUtilComponents = function () {
     default:
       return ''
   }
-
 }
 
 ShiftListItem.prototype.renderInfo = function () {
diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js
index b03ca11ad..1b85464e1 100644
--- a/ui/app/components/transaction-list-item.js
+++ b/ui/app/components/transaction-list-item.js
@@ -19,7 +19,7 @@ function TransactionListItem () {
 }
 
 TransactionListItem.prototype.render = function () {
-  const { transaction, i, network } = this.props
+  const { transaction, network } = this.props
   if (transaction.key === 'shapeshift') {
     if (network === '1') return h(ShiftListItem, transaction)
   }
@@ -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 9bf0f6d81..7e1bedb05 100644
--- a/ui/app/components/transaction-list.js
+++ b/ui/app/components/transaction-list.js
@@ -15,7 +15,7 @@ function TransactionList () {
 TransactionList.prototype.render = function () {
   const { txsToRender, network, unconfMsgs } = this.props
   var shapeShiftTxList
-  if (network === '1'){
+  if (network === '1') {
     shapeShiftTxList = this.props.shapeShiftTxList
   }
   const transactions = !shapeShiftTxList ? txsToRender.concat(unconfMsgs) : txsToRender.concat(unconfMsgs, shapeShiftTxList)
@@ -43,33 +43,46 @@ TransactionList.prototype.render = function () {
           paddingBottom: '4px',
         },
       }, [
-        'Transactions',
+        'History',
       ]),
 
       h('.tx-list', {
         style: {
           overflowY: 'auto',
-          height: '305px',
+          height: '300px',
           padding: '0 20px',
           textAlign: 'center',
         },
-      }, (
+      }, [
 
         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)
               },
             })
           })
-        : [h('.flex-center', {
+        : h('.flex-center', {
           style: {
+            flexDirection: 'column',
             height: '100%',
           },
-        }, 'No transaction history...')]
-      )),
+        }, [
+          'No transaction history.',
+        ]),
+      ]),
     ])
   )
 }
+
diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js
index db876dd9b..43604e8cf 100644
--- a/ui/app/conf-tx.js
+++ b/ui/app/conf-tx.js
@@ -35,7 +35,7 @@ ConfirmTxScreen.prototype.render = function () {
   var unconfMsgs = state.unconfMsgs
   var unconfTxList = txHelper(unconfTxs, unconfMsgs)
   var index = state.index !== undefined ? state.index : 0
-  var txData = unconfTxList[index] || {}
+  var txData = unconfTxList[index] || unconfTxList[0] || {}
 
   return (
 
diff --git a/ui/app/unlock.js b/ui/app/unlock.js
index eeaedc434..b82e46d02 100644
--- a/ui/app/unlock.js
+++ b/ui/app/unlock.js
@@ -3,10 +3,11 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const connect = require('react-redux').connect
 const actions = require('./actions')
-const Mascot = require('./components/mascot')
 const getCaretCoordinates = require('textarea-caret')
 const EventEmitter = require('events').EventEmitter
 
+const Mascot = require('./components/mascot')
+
 module.exports = connect(mapStateToProps)(UnlockScreen)
 
 inherits(UnlockScreen, Component)
diff --git a/ui/lib/account-link.js b/ui/lib/account-link.js
new file mode 100644
index 000000000..eb958e22d
--- /dev/null
+++ b/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
+}