Merge pull request #200 from MetaMask/AccountCrud

Add ability to add accounts to vault

CHANGELOG.md

@@ -7,6 +7,7 @@
 - Fixed glitchy transitions.
 - Added support for capitalization-based address checksums.
 - Send value is no longer limited by javascript number precision, and is always in ETH.
+- Added ability to generate new accounts.
 
 ## 1.8.4 2016-05-13
 

app/scripts/background.js

@@ -182,6 +182,7 @@ function setupControllerConnection(stream){
     setLocked:          idStore.setLocked.bind(idStore),
     clearSeedWordCache: idStore.clearSeedWordCache.bind(idStore),
     exportAccount:      idStore.exportAccount.bind(idStore),
+    revealAccount:      idStore.revealAccount.bind(idStore),
   })
   stream.pipe(dnode).pipe(stream)
   dnode.on('remote', function(remote){

app/scripts/lib/idStore.js

@@ -115,6 +115,21 @@ IdentityStore.prototype.setSelectedAddress = function(address, cb){
   if (cb) return cb(null, address)
 }
 
+IdentityStore.prototype.revealAccount = function(cb) {
+  let addresses = this._getAddresses()
+  const derivedKey = this._idmgmt.derivedKey
+  const keyStore = this._keyStore
+
+  keyStore.setDefaultHdDerivationPath(this.hdPathString)
+  keyStore.generateNewAddress(derivedKey, 1)
+  configManager.setWallet(keyStore.serialize())
+
+  addresses = this._getAddresses()
+  this._loadIdentities()
+  this._didUpdate()
+  cb(null)
+}
+
 IdentityStore.prototype.getNetwork = function(tries) {
   if (tries === 0) return
   this.web3.version.getNetwork((err, network) => {

ui/app/accounts.js

@@ -9,6 +9,7 @@ const EtherBalance = require('./components/eth-balance')
 const valuesFor = require('./util').valuesFor
 const addressSummary = require('./util').addressSummary
 const formatBalance = require('./util').formatBalance
+const findDOMNode = require('react-dom').findDOMNode
 
 module.exports = connect(mapStateToProps)(AccountsScreen)
 
@@ -20,6 +21,7 @@ function mapStateToProps(state) {
     unconfTxs: state.metamask.unconfTxs,
     selectedAddress: state.metamask.selectedAddress,
     currentDomain: state.appState.currentDomain,
+    scrollToBottom: state.appState.scrollToBottom,
   }
 }
 
@@ -36,13 +38,19 @@ AccountsScreen.prototype.render = function() {
   var actions = {
     onSelect: this.onSelect.bind(this),
     onShowDetail: this.onShowDetail.bind(this),
+    revealAccount: this.onRevealAccount.bind(this),
   }
   return (
 
-    h('.accounts-section.flex-column.flex-grow', [
+    h('.accounts-section.flex-grow', [
 
       // subtitle and nav
-      h('.section-title.flex-column.flex-center', [
+      h('.section-title.flex-center', [
+        h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', {
+          onClick: (event) => {
+            state.dispatch(actions.goHome())
+          }
+        }),
         h('h2.page-subtitle', 'Select Account'),
       ]),
 
@@ -51,12 +59,32 @@ AccountsScreen.prototype.render = function() {
       // identity selection
       h('section.identity-section.flex-column', {
         style: {
+          height: '418px',
           overflowY: 'auto',
           overflowX: 'hidden',
         }
       },
-        identityList.map(renderAccountPanel)
-      ),
+      [
+        identityList.map(renderAccountPanel),
+
+        h('hr.horizontal-line', {key: 'horizontal-line1'}),
+        h('div.footer.hover-white.pointer', {
+          key: 'reveal-account-bar',
+          onClick:() => {
+            actions.revealAccount()
+          },
+          style: {
+            display: 'flex',
+            flex: '1 0 auto',
+            height: '40px',
+            paddint: '10px',
+            justifyContent: 'center',
+            alignItems: 'center',
+          }
+        }, [
+          h('i.fa.fa-chevron-down.fa-lg', {key: ''}),
+        ]),
+      ]),
 
       unconfTxList.length ? (
 
@@ -70,10 +98,7 @@ AccountsScreen.prototype.render = function() {
       ) : (
         null
       ),
-
-
     ])
-
   )
 
   function renderAccountPanel(identity){
@@ -89,7 +114,8 @@ AccountsScreen.prototype.render = function() {
     })
 
     return (
-      h('.accounts-list-option.flex-row.flex-space-between.cursor-pointer', {
+      h('.accounts-list-option.flex-row.flex-space-between.pointer.hover-white', {
+        key: `account-panel-${identity.address}`,
         style: {
           flex: '1 0 auto',
           background: isSelected ? 'white' : 'none',
@@ -120,6 +146,17 @@ AccountsScreen.prototype.render = function() {
   }
 }
 
+// If a new account was revealed, scroll to the bottom
+AccountsScreen.prototype.componentDidUpdate = function(){
+  const scrollToBottom = this.props.scrollToBottom
+
+  if (scrollToBottom) {
+    var container = findDOMNode(this)
+    var scrollable = container.querySelector('.identity-section')
+    scrollable.scrollTop = scrollable.scrollHeight
+  }
+}
+
 AccountsScreen.prototype.navigateToConfTx = function(){
   event.stopPropagation()
   this.props.dispatch(actions.showConfTxPage())
@@ -136,3 +173,7 @@ AccountsScreen.prototype.onShowDetail = function(address, event){
   event.stopPropagation()
   this.props.dispatch(actions.showAccountDetail(address))
 }
+
+AccountsScreen.prototype.onRevealAccount = function() {
+  this.props.dispatch(actions.revealAccount())
+}

ui/app/actions.js

@@ -48,6 +48,8 @@ var actions = {
   SHOW_ACCOUNTS_PAGE: 'SHOW_ACCOUNTS_PAGE',
   SHOW_CONF_TX_PAGE: 'SHOW_CONF_TX_PAGE',
   SHOW_CONF_MSG_PAGE: 'SHOW_CONF_MSG_PAGE',
+  REVEAL_ACCOUNT: 'REVEAL_ACCOUNT',
+  revealAccount: revealAccount,
   // account detail screen
   SHOW_SEND_PAGE: 'SHOW_SEND_PAGE',
   showSendPage: showSendPage,
@@ -175,6 +177,19 @@ function setSelectedAddress(address) {
   }
 }
 
+function revealAccount() {
+  return (dispatch) => {
+    dispatch(this.showLoadingIndication())
+    _accountManager.revealAccount((err) => {
+      dispatch(this.hideLoadingIndication())
+      if (err) return dispatch(this.displayWarning(err.message))
+      dispatch({
+        type: this.REVEAL_ACCOUNT,
+      })
+    })
+  }
+}
+
 function signMsg(msgData) {
   return (dispatch) => {
     dispatch(this.showLoadingIndication())

ui/app/css/lib.css

@@ -107,6 +107,10 @@
   user-select: none;
 }
 
+.hover-white:hover {
+  background: white;
+}
+
 .pointer {
   cursor: pointer;
 }

ui/app/reducers/app.js

@@ -191,6 +191,12 @@ function reduceApp(state, action) {
       transForward: true,
       isLoading: false,
       warning: null,
+      scrollToBottom: false,
+    })
+
+  case actions.REVEAL_ACCOUNT:
+    return extend(appState, {
+      scrollToBottom: true,
     })
 
   case actions.SHOW_CONF_TX_PAGE: