Allow importing of private key strings

Fixes #1021

A top-right menu item now allows `Account Import`.  It has a menu (with one item for now) that allows importing a private key string.

Errors are displayed, and a success navigates the user to their account list, where the imported account is labeled `LOOSE`.

4 files changed, 95 insertions, 8 deletions

diff --git a/ui/app/accounts/import/index.js b/ui/app/accounts/import/index.js
index a7c3252cd..18a6b985c 100644
--- a/ui/app/accounts/import/index.js
+++ b/ui/app/accounts/import/index.js
@@ -7,12 +7,17 @@ import Select from 'react-select'
 // Subviews
 const JsonImportView = require('./json.js')
 const SeedImportView = require('./seed.js')
+const PrivateKeyImportView = require('./private-key.js')
+
+const menuItems = [
+  'Private Key',
+]
 
 module.exports = connect(mapStateToProps)(AccountImportSubview)
 
 function mapStateToProps (state) {
   return {
-    types: state.metamask.keyringTypes,
+    menuItems,
   }
 }
 
@@ -24,7 +29,7 @@ function AccountImportSubview () {
 AccountImportSubview.prototype.render = function () {
   const props = this.props
   const state = this.state || {}
-  const { types } = props
+  const { menuItems } = props
   const { type } = state
 
   return (
@@ -50,8 +55,8 @@ AccountImportSubview.prototype.render = function () {
         h(Select, {
           name: 'import-type-select',
           clearable: false,
-          value: type || types[0],
-          options: types.map((type) => {
+          value: type || menuItems[0],
+          options: menuItems.map((type) => {
             return {
               value: type,
               label: type,
@@ -71,11 +76,15 @@ AccountImportSubview.prototype.render = function () {
 AccountImportSubview.prototype.renderImportView = function() {
   const props = this.props
   const state = this.state || {}
-  const { type } = state || props.types[0]
+  const { type } = state
+  const { menuItems } = props
+  const current = type || menuItems[0]
 
-  switch (type) {
+  switch (current) {
     case 'HD Key Tree':
       return h(SeedImportView)
+    case 'Private Key':
+      return h(PrivateKeyImportView)
     default:
       return h(JsonImportView)
   }
diff --git a/ui/app/accounts/import/private-key.js b/ui/app/accounts/import/private-key.js
new file mode 100644
index 000000000..6b988a76b
--- /dev/null
+++ b/ui/app/accounts/import/private-key.js
@@ -0,0 +1,69 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const connect = require('react-redux').connect
+const type = 'Simple Key Pair'
+const actions = require('../../actions')
+
+module.exports = connect(mapStateToProps)(PrivateKeyImportView)
+
+function mapStateToProps (state) {
+  return {
+    error: state.appState.warning,
+  }
+}
+
+inherits(PrivateKeyImportView, Component)
+function PrivateKeyImportView () {
+  Component.call(this)
+}
+
+PrivateKeyImportView.prototype.render = function () {
+  const { error } = this.props
+
+  return (
+    h('div', {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        padding: '5px 15px 0px 15px',
+      },
+    }, [
+      h('span', 'Paste your private key string here'),
+
+      h('input.large-input.letter-spacey', {
+        type: 'password',
+        id: 'private-key-box',
+        onKeyPress: this.createKeyringOnEnter.bind(this),
+        style: {
+          width: 260,
+          marginTop: 12,
+        },
+      }),
+
+      h('button.primary', {
+        onClick: this.createNewKeychain.bind(this),
+        style: {
+          margin: 12,
+        },
+      }, 'Import'),
+
+      error ? h('span.warning', error) : null,
+    ])
+  )
+}
+
+PrivateKeyImportView.prototype.createKeyringOnEnter = function (event) {
+  if (event.key === 'Enter') {
+    event.preventDefault()
+    this.createNewKeychain()
+  }
+}
+
+PrivateKeyImportView.prototype.createNewKeychain = function () {
+  const input = document.getElementById('private-key-box')
+  const privateKey = input.value
+  this.props.dispatch(actions.addNewKeyring(type, [ privateKey ]))
+}
+
diff --git a/ui/app/accounts/index.js b/ui/app/accounts/index.js
index 5ab31a1c0..e6f376735 100644
--- a/ui/app/accounts/index.js
+++ b/ui/app/accounts/index.js
@@ -73,7 +73,8 @@ AccountsScreen.prototype.render = function () {
 
             const simpleAddress = identity.address.substring(2).toLowerCase()
             const keyring = keyrings.find((kr) => {
-              return kr.accounts.includes(simpleAddress)
+              return kr.accounts.includes(simpleAddress) ||
+                kr.accounts.includes(identity.address)
             })
 
             return h(AccountListItem, {
diff --git a/ui/app/actions.js b/ui/app/actions.js
index 87b02966b..7934a329a 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -253,7 +253,15 @@ function requestRevealSeed (password) {
 }
 
 function addNewKeyring (type, opts) {
-  return callBackgroundThenUpdate(background.addNewKeyring, type, opts)
+  return (dispatch) => {
+    dispatch(actions.showLoadingIndication())
+    background.addNewKeyring(type, opts, (err, newState) => {
+      dispatch(actions.hideLoadingIndication())
+      if (err) return dispatch(actions.displayWarning(err.message))
+      dispatch(actions.updateMetamaskState(newState))
+      dispatch(actions.showAccountsPage())
+    })
+  }
 }
 
 function navigateToNewAccountScreen() {