Make account detail view the primary view

 - When unlocking, the first account is now selected by default and displayed as the main view.
 - There is now a "CHANGE ACCT" button on the detail view to show the accounts list.
 - Clicking an account from the accounts list now navigates to the detail view and selects that account.
 - Config/Info screen "back" buttons now fire a new action, `GO_HOME`, which is configured to navigate to the accountDetail view, putting that logic in one place.
 - When locking and unlocking again, the first account is always displayed, eventually we should persist the selection.

7 files changed, 72 insertions, 44 deletions

diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js
index 025644efe..57f932a2b 100644
--- a/ui/app/account-detail.js
+++ b/ui/app/account-detail.js
@@ -10,12 +10,11 @@ const transactionList = require('./components/transaction-list')
 module.exports = connect(mapStateToProps)(AccountDetailScreen)
 
 function mapStateToProps(state) {
-  var accountDetail = state.appState.accountDetail
   return {
     identities: state.metamask.identities,
     accounts: state.metamask.accounts,
     address: state.appState.currentView.context,
-    accountDetail: accountDetail,
+    accountDetail: state.appState.accountDetail,
     transactions: state.metamask.transactions,
     networkVersion: state.networkVersion,
   }
@@ -26,7 +25,6 @@ function AccountDetailScreen() {
   Component.call(this)
 }
 
-
 AccountDetailScreen.prototype.render = function() {
   var state = this.props
   var identity = state.identities[state.address]
@@ -40,9 +38,6 @@ AccountDetailScreen.prototype.render = function() {
 
       // 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'),
       ]),
 
@@ -51,28 +46,35 @@ AccountDetailScreen.prototype.render = function() {
         showFullAddress: true,
         identity: identity,
         account: account,
+      }, []),
+
+      h('div', {
+        style: {
+          display: 'flex',
+        }
       }, [
-        h('.flex-row.flex-space-around', [
-          // h('button', 'GET ETH'), DISABLED UNTIL WORKING
-
-          h('button', {
-            onClick: () => {
-              copyToClipboard(identity.address)
-            },
-          }, 'COPY ADDR'),
-
-          h('button', {
-            onClick: () => {
-              this.props.dispatch(actions.showSendPage())
-            },
-          }, 'SEND'),
-
-          h('button', {
-            onClick: () => {
-              this.requestAccountExport(identity.address)
-            },
-          }, 'EXPORT'),
-        ]),
+
+        h('button', {
+          onClick: this.navigateToAccounts.bind(this),
+        }, 'CHANGE ACCT'),
+
+        h('button', {
+          onClick: () => {
+            copyToClipboard(identity.address)
+          },
+        }, 'COPY ADDR'),
+
+        h('button', {
+          onClick: () => {
+            this.props.dispatch(actions.showSendPage())
+          },
+        }, 'SEND'),
+
+        h('button', {
+          onClick: () => {
+            this.requestAccountExport(identity.address)
+          },
+        }, 'EXPORT'),
       ]),
 
       transactionList(transactions
diff --git a/ui/app/actions.js b/ui/app/actions.js
index 339c28be3..e2d81883f 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -1,4 +1,6 @@
 var actions = {
+  GO_HOME: 'GO_HOME',
+  goHome: goHome,
   // remote state
   UPDATE_METAMASK_STATE: 'UPDATE_METAMASK_STATE',
   updateMetamaskState: updateMetamaskState,
@@ -87,24 +89,29 @@ var actions = {
 
 module.exports = actions
 
-
 var _accountManager = null
 function _setAccountManager(accountManager){
   _accountManager = accountManager
 }
 
+function goHome() {
+  return {
+    type: this.GO_HOME,
+  }
+}
+
 // async actions
 
 function tryUnlockMetamask(password) {
   return (dispatch) => {
     dispatch(this.unlockInProgress())
-    _accountManager.submitPassword(password, (err) => {
+    _accountManager.submitPassword(password, (err, accounts) => {
       dispatch(this.hideLoadingIndication())
       if (err) {
         dispatch(this.unlockFailed())
       } else {
         dispatch(this.unlockMetamask())
-        dispatch(this.setSelectedAddress())
+        dispatch(this.showAccountDetail(accounts[0].address))
       }
     })
   }
@@ -123,7 +130,7 @@ function recoverFromSeed(password, seed) {
   return (dispatch) => {
     // dispatch(this.createNewVaultInProgress())
     dispatch(this.showLoadingIndication())
-    _accountManager.recoverFromSeed(password, seed, (err, result) => {
+    _accountManager.recoverFromSeed(password, seed, (err, accounts) => {
       if (err) {
         dispatch(this.hideLoadingIndication())
         var message = err.message
@@ -131,11 +138,9 @@ function recoverFromSeed(password, seed) {
       }
 
       dispatch(this.unlockMetamask())
-      dispatch(this.setSelectedAddress())
-      dispatch(this.updateMetamaskState(result))
+      dispatch(this.showAccountDetail(accounts[0].address))
       dispatch(this.hideLoadingIndication())
-      dispatch(this.showAccountsPage())
-    })
+   })
   }
 }
 
@@ -297,10 +302,10 @@ function clearSeedWordCache() {
 function confirmSeedWords() {
   return (dispatch) => {
     dispatch(this.showLoadingIndication())
-    _accountManager.clearSeedWordCache((err) => {
+    _accountManager.clearSeedWordCache((err, accounts) => {
       dispatch(this.clearSeedWordCache())
       console.log('Seed word cache cleared.')
-      dispatch(this.setSelectedAddress())
+      dispatch(this.showAccountDetail(accounts[0].address))
     })
   }
 }
diff --git a/ui/app/components/account-panel.js b/ui/app/components/account-panel.js
index 4e433b87d..9de29cd91 100644
--- a/ui/app/components/account-panel.js
+++ b/ui/app/components/account-panel.js
@@ -25,7 +25,7 @@ AccountPanel.prototype.render = function() {
       style: {
         flex: '1 0 auto',
       },
-      onClick: state.onSelect && state.onSelect.bind(null, identity.address),
+      onClick: state.onShowDetail && state.onShowDetail.bind(null, identity.address),
     }, [
 
       // account identicon
diff --git a/ui/app/config.js b/ui/app/config.js
index f4eecf7f8..ded065bf8 100644
--- a/ui/app/config.js
+++ b/ui/app/config.js
@@ -31,7 +31,7 @@ ConfigScreen.prototype.render = function() {
       h('.section-title.flex-row.flex-center', [
         h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', {
           onClick: (event) => {
-            state.dispatch(actions.showAccountsPage())
+            state.dispatch(actions.goHome())
           }
         }),
         h('h2.page-subtitle', 'Configuration'),
diff --git a/ui/app/info.js b/ui/app/info.js
index ae8c6efc5..f6311b4cb 100644
--- a/ui/app/info.js
+++ b/ui/app/info.js
@@ -26,7 +26,7 @@ InfoScreen.prototype.render = function() {
       h('.section-title.flex-row.flex-center', [
         h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', {
           onClick: (event) => {
-            state.dispatch(actions.showAccountsPage())
+            state.dispatch(actions.goHome())
           }
         }),
         h('h2.page-subtitle', 'Info'),
diff --git a/ui/app/loading.js b/ui/app/loading.js
index 47b758cb6..9288256de 100644
--- a/ui/app/loading.js
+++ b/ui/app/loading.js
@@ -19,7 +19,6 @@ function LoadingIndicator() {
 }
 
 LoadingIndicator.prototype.render = function() {
-  console.dir(this.props)
   var isLoading = this.props.isLoading
 
   return (
@@ -44,7 +43,6 @@ LoadingIndicator.prototype.render = function() {
           src: 'images/loading.svg',
         }),
       ]) : null,
-
     ])
   )
 }
diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js
index 582583185..d3d5ad638 100644
--- a/ui/app/reducers/app.js
+++ b/ui/app/reducers/app.js
@@ -1,14 +1,18 @@
 const extend = require('xtend')
 const actions = require('../actions')
+const valuesFor = require('../util').valuesFor
 
 module.exports = reduceApp
 
 function reduceApp(state, action) {
 
   // clone and defaults
+  var accounts = valuesFor(state.metamask.accounts)
+  var account = accounts.length ? valuesFor(state.metamask.accounts)[0].address : null
   var defaultView = {
-    name: 'accounts',
+    name: 'accountDetail',
     detailView: null,
+    context: account,
   }
 
   // confirm seed words
@@ -56,6 +60,7 @@ function reduceApp(state, action) {
     return extend(appState, {
       currentView: {
         name: 'config',
+        context: appState.currentView.context,
       },
       transForward: true,
     })
@@ -64,6 +69,7 @@ function reduceApp(state, action) {
     return extend(appState, {
       currentView: {
         name: 'info',
+        context: appState.currentView.context,
       },
       transForward: true,
     })
@@ -120,11 +126,28 @@ function reduceApp(state, action) {
       activeAddress: action.value,
     })
 
+  case actions.GO_HOME:
+    return extend(appState, {
+      currentView: {
+        name: 'accountDetail',
+        context: appState.currentView.context,
+      },
+      accountDetail: {
+        accountExport: 'none',
+        privateKey: '',
+      },
+      transForward: false,
+    })
+
+
   case actions.SHOW_ACCOUNT_DETAIL:
+    var account = action.value || valuesFor(state.metamask.accounts)[0].address
+
     return extend(appState, {
+      isLoading: account ? false : true,
       currentView: {
         name: 'accountDetail',
-        context: action.value,
+        context: account,
       },
       accountDetail: {
         accountExport: 'none',