Merge pull request #142 from MetaMask/DetailViewFirst

Make account detail view into main view

7 files changed, 74 insertions, 50 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..a2106ea85 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, selectedAccount) => {
       dispatch(this.hideLoadingIndication())
       if (err) {
         dispatch(this.unlockFailed())
       } else {
         dispatch(this.unlockMetamask())
-        dispatch(this.setSelectedAddress())
+        dispatch(this.showAccountDetail(selectedAccount))
       }
     })
   }
@@ -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, selectedAccount) => {
       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(selectedAccount))
       dispatch(this.hideLoadingIndication())
-      dispatch(this.showAccountsPage())
-    })
+   })
   }
 }
 
@@ -276,9 +281,13 @@ function lockMetamask() {
 }
 
 function showAccountDetail(address) {
-  return {
-    type: this.SHOW_ACCOUNT_DETAIL,
-    value: address,
+  return (dispatch) => {
+    _accountManager.setSelectedAddress(address)
+
+    dispatch({
+      type: this.SHOW_ACCOUNT_DETAIL,
+      value: address,
+    })
   }
 }
 
@@ -297,10 +306,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..9fda2ebfc 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: (event) => state.onShowDetail(identity.address, event),
     }, [
 
       // account identicon
@@ -53,9 +53,7 @@ AccountPanel.prototype.render = function() {
 
       // navigate to account detail
       !state.onShowDetail ? null :
-        h('.arrow-right.cursor-pointer', {
-          onClick: state.onShowDetail && state.onShowDetail.bind(null, identity.address),
-        }, [
+        h('.arrow-right.cursor-pointer', [
           h('i.fa.fa-chevron-right.fa-lg'),
         ]),
     ])
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..f522e6042 100644
--- a/ui/app/reducers/app.js
+++ b/ui/app/reducers/app.js
@@ -1,5 +1,6 @@
 const extend = require('xtend')
 const actions = require('../actions')
+const valuesFor = require('../util').valuesFor
 
 module.exports = reduceApp
 
@@ -7,8 +8,9 @@ function reduceApp(state, action) {
 
   // clone and defaults
   var defaultView = {
-    name: 'accounts',
+    name: 'accountDetail',
     detailView: null,
+    context: state.metamask.selectedAccount,
   }
 
   // confirm seed words
@@ -56,6 +58,7 @@ function reduceApp(state, action) {
     return extend(appState, {
       currentView: {
         name: 'config',
+        context: appState.currentView.context,
       },
       transForward: true,
     })
@@ -64,6 +67,7 @@ function reduceApp(state, action) {
     return extend(appState, {
       currentView: {
         name: 'info',
+        context: appState.currentView.context,
       },
       transForward: true,
     })
@@ -120,11 +124,24 @@ 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:
     return extend(appState, {
       currentView: {
         name: 'accountDetail',
-        context: action.value,
+        context: action.value || account,
       },
       accountDetail: {
         accountExport: 'none',