Merge pull request #142 from MetaMask/DetailViewFirst

Make account detail view into main view

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 ## Current Master
 
+- Account detail view is now the primary view.
+- The account detail view now has a "Change acct" button which shows the account list.
+- Clicking accounts in the account list now both selects that account and displays that account's detail view.
+- Selected account is now persisted between sessions, so the current account stays selected.
+
 # 1.6.0 2016-04-22
 
 - Pending transactions are now persisted to localStorage and resume even after browser is closed.

app/scripts/lib/config-manager.js

@@ -102,6 +102,17 @@ ConfigManager.prototype.setWallet = function(wallet) {
   this.setData(data)
 }
 
+ConfigManager.prototype.getSelectedAccount = function() {
+  var config = this.getConfig()
+  return config.selectedAccount
+}
+
+ConfigManager.prototype.setSelectedAccount = function(address) {
+  var config = this.getConfig()
+  config.selectedAccount = address
+  this.setConfig(config)
+}
+
 ConfigManager.prototype.getWallet = function() {
   return this.migrator.getData().wallet
 }

app/scripts/lib/idStore.js

@@ -9,7 +9,7 @@ const extend = require('xtend')
 const createId = require('web3-provider-engine/util/random-id')
 const autoFaucet = require('./auto-faucet')
 const configManager = require('./config-manager-singleton')
-const DEFAULT_RPC = 'https://rawtestrpc.metamask.io/'
+const DEFAULT_RPC = 'https://testrpc.metamask.io/'
 
 
 module.exports = IdentityStore
@@ -72,7 +72,7 @@ IdentityStore.prototype.setStore = function(store){
 
 IdentityStore.prototype.clearSeedWordCache = function(cb) {
   configManager.setShowSeedWords(false)
-  cb()
+  cb(null, configManager.getSelectedAccount())
 }
 
 IdentityStore.prototype.getState = function(){
@@ -84,6 +84,7 @@ IdentityStore.prototype.getState = function(){
     seedWords: seedWords,
     unconfTxs: configManager.unconfirmedTxs(),
     transactions: configManager.getTxList(),
+    selectedAddress: configManager.getSelectedAccount(),
   }))
 }
 
@@ -96,7 +97,7 @@ IdentityStore.prototype.getSeedIfUnlocked = function() {
 }
 
 IdentityStore.prototype.getSelectedAddress = function(){
-  return this._currentState.selectedAddress
+  return configManager.getSelectedAccount()
 }
 
 IdentityStore.prototype.setSelectedAddress = function(address){
@@ -105,7 +106,7 @@ IdentityStore.prototype.setSelectedAddress = function(address){
     address = addresses[0]
   }
 
-  this._currentState.selectedAddress = address
+  configManager.setSelectedAccount(address)
   this._didUpdate()
 }
 
@@ -120,7 +121,7 @@ IdentityStore.prototype.submitPassword = function(password, cb){
     if (err) return cb(err)
     // load identities before returning...
     this._loadIdentities()
-    cb()
+    cb(null, configManager.getSelectedAccount())
   })
 }
 

test/unit/actions/restore_vault_test.js

@@ -21,7 +21,7 @@ describe('#recoverFromSeed(password, seed)', function() {
 
   // stub out account manager
   actions._setAccountManager({
-    recoverFromSeed(pw, seed, cb) { cb() },
+    recoverFromSeed(pw, seed, cb) { cb(null, [{}, {}]) },
   })
 
   it('sets metamask.isUnlocked to true', function() {

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.navigateToAccounts.bind(this),
+        }, 'CHANGE ACCT'),
 
-          h('button', {
-            onClick: () => {
-              this.props.dispatch(actions.showSendPage())
-            },
-          }, 'SEND'),
+        h('button', {
+          onClick: () => {
+            copyToClipboard(identity.address)
+          },
+        }, 'COPY ADDR'),
 
-          h('button', {
-            onClick: () => {
-              this.requestAccountExport(identity.address)
-            },
-          }, 'EXPORT'),
-        ]),
+        h('button', {
+          onClick: () => {
+            this.props.dispatch(actions.showSendPage())
+          },
+        }, 'SEND'),
+
+        h('button', {
+          onClick: () => {
+            this.requestAccountExport(identity.address)
+          },
+        }, 'EXPORT'),
       ]),
 
       transactionList(transactions

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))
     })
   }
 }

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'),
         ]),
     ])

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'),

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'),

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,
-
     ])
   )
 }

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',