Allow editing account name in account details modal

1 files changed, 13 insertions, 8 deletions

diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js
index 37a62e1c0..e3c936702 100644
--- a/ui/app/components/modals/account-details-modal.js
+++ b/ui/app/components/modals/account-details-modal.js
@@ -7,6 +7,7 @@ const AccountModalContainer = require('./account-modal-container')
 const { getSelectedIdentity, getSelectedAddress } = require('../../selectors')
 const genAccountLink = require('../../../lib/account-link.js')
 const QrView = require('../qr-code')
+const EditableLabel = require('../editable-label')
 
 function mapStateToProps (state) {
   return {
@@ -23,6 +24,7 @@ function mapDispatchToProps (dispatch) {
       dispatch(actions.showModal({ name: 'EXPORT_PRIVATE_KEY' }))
     },
     hideModal: () => dispatch(actions.hideModal()),
+    saveAccountLabel: (address, label) => dispatch(actions.saveAccountLabel(address, label)),
   }
 }
 
@@ -41,14 +43,19 @@ AccountDetailsModal.prototype.render = function () {
     selectedIdentity,
     network,
     showExportPrivateKeyModal,
-    hideModal,
+    saveAccountLabel,
   } = this.props
   const { name, address } = selectedIdentity
 
   return h(AccountModalContainer, {}, [
+      h(EditableLabel, {
+        className: 'account-modal__name',
+        defaultValue: name,
+        onSubmit: label => saveAccountLabel(address, label),
+      }),
+
       h(QrView, {
         Qr: {
-          message: name,
           data: address,
         },
       }),
@@ -57,14 +64,12 @@ AccountDetailsModal.prototype.render = function () {
 
       h('button.btn-clear', {
         onClick: () => global.platform.openWindow({ url: genAccountLink(address, network) }),
-      }, [ 'View account on Etherscan' ]),
+      }, 'View account on Etherscan'),
 
       // Holding on redesign for Export Private Key functionality
       h('button.btn-clear', {
-        onClick: () => {
-          showExportPrivateKeyModal()
-        },
-      }, [ 'Export private key' ]),
-      
+        onClick: () => showExportPrivateKeyModal(),
+      }, 'Export private key'),
+
   ])
 }