3 files changed, 35 insertions, 7 deletions
diff --git a/ui/app/actions.js b/ui/app/actions.js
index 1231fc296..a6730db7f 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -349,9 +349,25 @@ function navigateToNewAccountScreen () {
   }
 }
 
-function addNewAccount () {
+function addNewAccount (oldIdentities) {
   log.debug(`background.addNewAccount`)
-  return callBackgroundThenUpdate(background.addNewAccount)
+  return (dispatch) => {
+    dispatch(actions.showLoadingIndication())
+    return new Promise((resolve, reject) => {
+      background.addNewAccount((err, { identities: newIdentities}) => {
+        if (err) {
+          dispatch(actions.displayWarning(err.message))
+          return reject(err)
+        }
+        const newAccountAddress = Object.keys(newIdentities).find(address => !oldIdentities[address])
+
+        dispatch(actions.hideLoadingIndication())
+
+        forceUpdateMetamaskState(dispatch)
+        return resolve(newAccountAddress)
+      })
+    });
+  }
 }
 
 function showInfoPage () {
diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js
index 910f3c0ca..1adc9e7c7 100644
--- a/ui/app/components/modals/new-account-modal.js
+++ b/ui/app/components/modals/new-account-modal.js
@@ -8,6 +8,7 @@ function mapStateToProps (state) {
   return {
     network: state.metamask.network,
     address: state.metamask.selectedAddress,
+    identities: state.metamask.identities,
   }
 }
 
@@ -19,9 +20,12 @@ function mapDispatchToProps (dispatch) {
     hideModal: () => {
       dispatch(actions.hideModal())
     },
-    createAccount: () => {
-      dispatch(actions.addNewAccount())
-      dispatch(actions.hideModal())
+    createAccount: (identities, newAccountName) => {
+      dispatch(actions.addNewAccount(identities))
+        .then((newAccountAddress) => {
+          dispatch(actions.saveAccountLabel(newAccountAddress, newAccountName))
+          dispatch(actions.hideModal())
+        })
     },
   }
 }
@@ -29,11 +33,18 @@ function mapDispatchToProps (dispatch) {
 inherits(NewAccountModal, Component)
 function NewAccountModal () {
   Component.call(this)
+
+  this.state = {
+    newAccountName: ''
+  }
 }
 
 module.exports = connect(mapStateToProps, mapDispatchToProps)(NewAccountModal)
 
 NewAccountModal.prototype.render = function () {
+  const { identities } = this.props
+  const { newAccountName } = this.state
+
   return h('div', {}, [
     h('div.new-account-modal-wrapper', {
     }, [
@@ -52,6 +63,7 @@ NewAccountModal.prototype.render = function () {
       h('div.new-account-input-wrapper', {}, [
         h('input.new-account-input', {
           placeholder: 'E.g. My new account',
+          onChange: (event) => this.setState({ newAccountName: event.target.value })
         }, []),
       ]),
 
@@ -65,7 +77,7 @@ NewAccountModal.prototype.render = function () {
 
       h('div.new-account-modal-content.button', {}, [
         h('button.btn-clear', {
-          onClick: this.props.createAccount
+          onClick: () => this.props.createAccount(identities, newAccountName)
         }, [
           'SAVE',
         ]),
diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss
index 5e3f9cc08..c0a5aa1ef 100644
--- a/ui/app/css/itcss/components/modal.scss
+++ b/ui/app/css/itcss/components/modal.scss
@@ -325,7 +325,7 @@
   border: 1px solid $alto;
   width: 100%;
   font-size: 1em;
-  color: $alto;
+  color: $dusty-gray;
   font-family: Montserrat Light;
   font-size: 17px;
   margin: 0 60px;