1 files changed, 98 insertions, 48 deletions

diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js
index 2775e24fb..00d40a9ee 100644
--- a/ui/app/account-detail.js
+++ b/ui/app/account-detail.js
@@ -5,9 +5,12 @@ const h = require('react-hyperscript')
 const connect = require('react-redux').connect
 const copyToClipboard = require('copy-to-clipboard')
 const actions = require('./actions')
+const addressSummary = require('./util').addressSummary
+const formatBalance = require('./util').formatBalance
 const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
 
 const AccountPanel = require('./components/account-panel')
+const Identicon = require('./components/identicon')
 const transactionList = require('./components/transaction-list')
 const ExportAccountView = require('./components/account-export')
 
@@ -39,66 +42,106 @@ AccountDetailScreen.prototype.render = function() {
 
   return (
 
-    h('.account-detail-section.flex-column.flex-grow', {
-      style: {
-        width: '330px',
-      },
-    }, [
-
-      // subtitle and nav
-      h('.section-title.flex-row.flex-center', [
-        h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', {
-          onClick: this.navigateToAccounts.bind(this),
-        }),
-        h('h2.page-subtitle', 'Account Detail'),
-      ]),
-
-      // account summary, with embedded action buttons
-      h(AccountPanel, {
-        showFullAddress: true,
-        identity: identity,
-        account: account,
-        key: 'accountPanel'
-      }),
+    h('.account-detail-section.flex-column.flex-grow', [
 
-      h('div', {
+      // identicon, label, balance, etc
+      h('.account-data-subsection.flex-column.flex-grow', {
         style: {
-          display: 'flex',
-        }
+          margin: '0 20px',
+        },
       }, [
 
-        h('button', {
-          onClick: () => {
-            copyToClipboard(identity.address)
+        // header - identicon + nav
+        h('.flex-row.flex-space-between', {
+          style: {
+            marginTop: 28,
           },
-        }, 'COPY ADDR'),
-
-        h('button', {
-          onClick: () => {
-            this.props.dispatch(actions.showSendPage())
+        }, [
+
+          // invisible placeholder for later
+          h('i.fa.fa-users.fa-lg.color-orange', {
+            style: {
+              visibility: 'hidden',
+            },
+          }),
+
+          // large identicon
+          h('.identicon-wrapper.flex-column.flex-center.select-none', [
+            h(Identicon, {
+              diameter: 62,
+              address: selected,
+            }),
+          ]),
+
+          // small accounts nav
+          h('i.fa.fa-users.fa-lg.cursor-pointer.color-orange', {
+            onClick: this.navigateToAccounts.bind(this),
+          }),
+
+        ]),
+
+        // account label
+        h('h2.font-medium.color-forest.flex-center', {
+          style: {
+            paddingTop: 8,
+            marginBottom: 32,
           },
-        }, 'SEND'),
+        }, identity && identity.name),
 
-        h('button', {
-          onClick: () => {
-            this.requestAccountExport(identity.address)
+        // address and getter actions
+        h('.flex-row.flex-space-between', {
+          style: {
+            marginBottom: 16,
           },
-        }, 'EXPORT'),
+        }, [
+
+          h('div', {
+            style: {
+              lineHeight: '16px',
+            },
+          }, addressSummary(selected)),
+
+          h('i.fa.fa-download.fa-md.cursor-pointer.color-orange', {
+            onClick: () => this.requestAccountExport(selected),
+          }),
+
+          h('i.fa.fa-qrcode.fa-md.cursor-disabled.color-orange', {
+            onClick: () => console.warn('QRCode not implented...'),
+          }),
+
+          h('i.fa.fa-clipboard.fa-md.cursor-pointer.color-orange', {
+            onClick: () => copyToClipboard(selected),
+          }),
+
+        ]),
+
+        // balance + send
+        h('.flex-row.flex-space-between', [
+
+          h('div', {
+            style: {
+              lineHeight: '50px',
+            },
+          }, formatBalance(account && account.balance)),
+
+          h('button', {
+            onClick: () => this.props.dispatch(actions.showSendPage()),
+          }, 'SEND ETH'),
+
+        ]),
+      
       ]),
 
+      // subview (tx history, pk export confirm)
       h(ReactCSSTransitionGroup, {
-        transitionName: "main",
+        className: 'css-transition-group',
+        transitionName: 'main',
         transitionEnterTimeout: 300,
         transitionLeaveTimeout: 300,
       }, [
         this.subview(),
       ]),
-      // transaction table
-      /*
-      h('section.flex-column', [
-        h('span', 'your transaction history will go here.'),
-      ]),
-      */
+
     ])
   )
 }
@@ -126,10 +169,17 @@ AccountDetailScreen.prototype.transactionList = function() {
   var state = this.props
   var transactions = state.transactions
 
-  return transactionList(transactions
-  .filter(tx => tx.txParams.from === state.address)
-  .filter(tx => tx.txParams.metamaskNetworkId === state.networkVersion)
-  .sort((a, b) => b.time - a.time), state.networkVersion)
+  var txsToRender = transactions
+    // only transactions that are from the current address
+    .filter(tx => tx.txParams.from === state.address)
+    // only transactions that are on the current network
+    .filter(tx => tx.txParams.metamaskNetworkId === state.networkVersion)
+    // only transactions that have a hash
+    .filter(tx => tx.hash)
+    // sort by recency
+    .sort((a, b) => b.time - a.time)
+
+  return transactionList(txsToRender, state.networkVersion)
 }
 
 AccountDetailScreen.prototype.navigateToAccounts = function(event){