4 files changed, 59 insertions, 4 deletions

diff --git a/ui/app/actions.js b/ui/app/actions.js
index d4fd7553b..4e0435ade 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -75,6 +75,8 @@ var actions = {
   // account detail screen
   SHOW_SEND_PAGE: 'SHOW_SEND_PAGE',
   showSendPage: showSendPage,
+  ADD_TO_ADDRESS_BOOK: 'ADD_TO_ADDRESS_BOOK',
+  addToAddressBook: addToAddressBook,
   REQUEST_ACCOUNT_EXPORT: 'REQUEST_ACCOUNT_EXPORT',
   requestExportAccount: requestExportAccount,
   EXPORT_ACCOUNT: 'EXPORT_ACCOUNT',
@@ -696,6 +698,19 @@ function setRpcTarget (newRpc) {
   }
 }
 
+// Calls the addressBookController to add a new address. 
+function addToAddressBook (recipient, nickname) {
+  log.debug(`background.addToAddressBook`)
+  return (dispatch) => {
+    background.setAddressBook(recipient, nickname, (err, result) => {
+      if (err) {
+        log.error(err)
+        return dispatch(self.displayWarning('Address book failed to update'))
+      }
+    })
+  }
+}
+
 function setProviderType (type) {
   log.debug(`background.setProviderType`)
   background.setProviderType(type)
diff --git a/ui/app/components/ens-input.js b/ui/app/components/ens-input.js
index ffc4eab4a..d5348ea62 100644
--- a/ui/app/components/ens-input.js
+++ b/ui/app/components/ens-input.js
@@ -21,6 +21,7 @@ function EnsInput () {
 EnsInput.prototype.render = function () {
   const props = this.props
   const opts = extend(props, {
+    list: 'addresses',
     onChange: () => {
       const network = this.props.network
       let resolverAddress = networkResolvers[network]
@@ -46,6 +47,28 @@ EnsInput.prototype.render = function () {
     style: { width: '100%' },
   }, [
     h('input.large-input', opts),
+    // The address book functionality.
+    h('datalist',
+      {
+        id: 'addresses',
+      },
+      [
+        // Corresponds to the addresses owned.
+        Object.keys(props.identities).map((key) => {
+          let identity = props.identities[key]
+          return h('option', {
+            value: identity.address,
+            label: identity.name,
+          })
+        }),
+        // Corresponds to previously sent-to addresses.
+        props.addressBook.map((identity) => {
+          return h('option', {
+            value: identity.address,
+            label: identity.name,
+          })
+        }),
+      ]),
     this.ensIcon(),
   ])
 }
@@ -80,11 +103,13 @@ EnsInput.prototype.lookupEnsName = function () {
       this.setState({
         loadingEns: false,
         ensResolution: address,
+        nickname: recipient.trim(),
         hoverText: address + '\nClick to Copy',
       })
     }
   })
   .catch((reason) => {
+    log.error(reason)
     return this.setState({
       loadingEns: false,
       ensFailure: true,
@@ -95,10 +120,13 @@ EnsInput.prototype.lookupEnsName = function () {
 
 EnsInput.prototype.componentDidUpdate = function (prevProps, prevState) {
   const state = this.state || {}
-  const { ensResolution } = state
+  const ensResolution = state.ensResolution
+  // If an address is sent without a nickname, meaning not from ENS or from
+  // the user's own accounts, a default of a one-space string is used.
+  const nickname = state.nickname || ' '
   if (ensResolution && this.props.onChange &&
       ensResolution !== prevState.ensResolution) {
-    this.props.onChange(ensResolution)
+    this.props.onChange(ensResolution, nickname)
   }
 }
 
diff --git a/ui/app/reducers/metamask.js b/ui/app/reducers/metamask.js
index a3c07d977..10d3b0461 100644
--- a/ui/app/reducers/metamask.js
+++ b/ui/app/reducers/metamask.js
@@ -19,6 +19,7 @@ function reduceMetamask (state, action) {
     noActiveNotices: true,
     lastUnreadNotice: undefined,
     frequentRpcList: [],
+    addressBook: [],
   }, state.metamask)
 
   switch (action.type) {
diff --git a/ui/app/send.js b/ui/app/send.js
index a281a5fcf..eb32d5e06 100644
--- a/ui/app/send.js
+++ b/ui/app/send.js
@@ -20,6 +20,7 @@ function mapStateToProps (state) {
     identities: state.metamask.identities,
     warning: state.appState.warning,
     network: state.metamask.network,
+    addressBook: state.metamask.addressBook,
   }
 
   result.error = result.warning && result.warning.split('.')[0]
@@ -44,6 +45,8 @@ SendTransactionScreen.prototype.render = function () {
   var account = state.account
   var identity = state.identity
   var network = state.network
+  var identities = state.identities
+  var addressBook = state.addressBook
 
   return (
 
@@ -153,6 +156,8 @@ SendTransactionScreen.prototype.render = function () {
           placeholder: 'Recipient Address',
           onChange: this.recipientDidChange.bind(this),
           network,
+          identities,
+          addressBook,
         }),
       ]),
 
@@ -222,13 +227,17 @@ SendTransactionScreen.prototype.back = function () {
   this.props.dispatch(actions.backToAccountDetail(address))
 }
 
-SendTransactionScreen.prototype.recipientDidChange = function (recipient) {
-  this.setState({ recipient })
+SendTransactionScreen.prototype.recipientDidChange = function (recipient, nickname) {
+  this.setState({
+    recipient: recipient,
+    nickname: nickname,
+  })
 }
 
 SendTransactionScreen.prototype.onSubmit = function () {
   const state = this.state || {}
   const recipient = state.recipient || document.querySelector('input[name="address"]').value
+  const nickname = state.nickname || ' '
   const input = document.querySelector('input[name="amount"]').value
   const value = util.normalizeEthStringToWei(input)
   const txData = document.querySelector('input[name="txData"]').value
@@ -257,6 +266,8 @@ SendTransactionScreen.prototype.onSubmit = function () {
 
   this.props.dispatch(actions.hideWarning())
 
+  this.props.dispatch(actions.addToAddressBook(recipient, nickname))
+
   var txParams = {
     from: this.props.address,
     value: '0x' + value.toString(16),