Added ability to nickname wallets locally

The changes are persisted to localstorage, so they cannot be restored on a new computer, but for right now it's a nice organizational feature.

4 files changed, 104 insertions, 14 deletions

diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js
index c708580c4..bae44ec85 100644
--- a/ui/app/account-detail.js
+++ b/ui/app/account-detail.js
@@ -8,12 +8,12 @@ const actions = require('./actions')
 const addressSummary = require('./util').addressSummary
 const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
 
-const AccountPanel = require('./components/account-panel')
 const Identicon = require('./components/identicon')
 const EtherBalance = require('./components/eth-balance')
 const transactionList = require('./components/transaction-list')
 const ExportAccountView = require('./components/account-export')
 const ethUtil = require('ethereumjs-util')
+const EditableLabel = require('./components/editable-label')
 
 module.exports = connect(mapStateToProps)(AccountDetailScreen)
 
@@ -34,12 +34,12 @@ function AccountDetailScreen() {
 }
 
 AccountDetailScreen.prototype.render = function() {
-  var state = this.props
-  var selected = state.address || Object.keys(state.accounts)[0]
-  var identity = state.identities[selected]
-  var account = state.accounts[selected]
-  var accountDetail = state.accountDetail
-  var transactions = state.transactions
+  var props = this.props
+  var selected = props.address || Object.keys(props.accounts)[0]
+  var identity = props.identities[selected]
+  var account = props.accounts[selected]
+  var accountDetail = props.accountDetail
+  var transactions = props.transactions
 
   return (
 
@@ -78,16 +78,28 @@ AccountDetailScreen.prototype.render = function() {
           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', {
+        h('.flex-center', {
           style: {
-            paddingTop: 8,
-            marginBottom: 32,
-          },
-        }, identity && identity.name),
+            height: '62px',
+            paddingTop: '8px',
+          }
+        }, [
+          h(EditableLabel, {
+            textValue: identity ? identity.name : '',
+            state: {
+              isEditingLabel: false,
+            },
+            saveText: (text) => {
+              props.dispatch(actions.saveAccountLabel(selected, text))
+            },
+          }, [
+
+            // What is shown when not editing:
+            h('h2.font-medium.color-forest', identity && identity.name)
+          ]),
+        ]),
 
         // address and getter actions
         h('.flex-row.flex-space-between', {
diff --git a/ui/app/actions.js b/ui/app/actions.js
index 5d6f503e2..9ff05c460 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -59,6 +59,8 @@ var actions = {
   exportAccount: exportAccount,
   SHOW_PRIVATE_KEY: 'SHOW_PRIVATE_KEY',
   showPrivateKey: showPrivateKey,
+  SAVE_ACCOUNT_LABEL: 'SAVE_ACCOUNT_LABEL',
+  saveAccountLabel: saveAccountLabel,
   // tx conf screen
   COMPLETED_TX: 'COMPLETED_TX',
   TRANSACTION_ERROR: 'TRANSACTION_ERROR',
@@ -481,6 +483,22 @@ function showPrivateKey(key) {
   }
 }
 
+function saveAccountLabel(account, label) {
+  return (dispatch) => {
+    dispatch(this.showLoadingIndication())
+    _accountManager.saveAccountLabel(account, label, (err) => {
+      dispatch(this.hideLoadingIndication())
+      if (err) {
+        return dispatch(this.showWarning(err.message))
+      }
+      dispatch({
+        type: this.SAVE_ACCOUNT_LABEL,
+        value: { account, label },
+      })
+    })
+  }
+}
+
 function showSendPage() {
   return {
     type: this.SHOW_SEND_PAGE,
diff --git a/ui/app/components/editable-label.js b/ui/app/components/editable-label.js
new file mode 100644
index 000000000..20e24a9c7
--- /dev/null
+++ b/ui/app/components/editable-label.js
@@ -0,0 +1,52 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const findDOMNode = require('react-dom').findDOMNode
+
+module.exports = EditableLabel
+
+
+inherits(EditableLabel, Component)
+function EditableLabel() {
+  Component.call(this)
+}
+
+EditableLabel.prototype.render = function() {
+  const props = this.props
+  let state = this.state
+
+  if (state && state.isEditingLabel) {
+
+    return h('div.editable-label', [
+      h('input', {
+        defaultValue: props.textValue,
+        onKeyPress:(event) => {
+          this.saveIfEnter(event)
+        },
+      }),
+      h('button', {
+        onClick:() => this.saveText(),
+      }, 'Save')
+    ])
+
+  } else {
+    return h('div', {
+      onClick:(event) => {
+        this.setState({ isEditingLabel: true })
+      },
+    }, this.props.children)
+  }
+}
+
+EditableLabel.prototype.saveIfEnter = function(event) {
+  if (event.key === 'Enter') {
+    this.saveText()
+  }
+}
+
+EditableLabel.prototype.saveText = function() {
+  var container = findDOMNode(this)
+  var text = container.querySelector('.editable-label input').value
+  this.props.saveText(text)
+  this.setState({ isEditingLabel: false, textLabel: text })
+}
diff --git a/ui/app/reducers/metamask.js b/ui/app/reducers/metamask.js
index 8628e84d2..a45327189 100644
--- a/ui/app/reducers/metamask.js
+++ b/ui/app/reducers/metamask.js
@@ -95,6 +95,14 @@ function reduceMetamask(state, action) {
     delete newState.seedWords
     return newState
 
+  case actions.SAVE_ACCOUNT_LABEL:
+    const account = action.value.account
+    const name = action.value.label
+    var id = {}
+    id[account] = extend(metamaskState.identities[account], { name })
+    var identities = extend(metamaskState.identities, id)
+    return extend(metamaskState, { identities })
+
   default:
     return metamaskState