Merge pull request #1094 from MetaMask/dev

Version 3.2.0

5 files changed, 89 insertions, 25 deletions

diff --git a/ui/app/accounts/account-list-item.js b/ui/app/accounts/account-list-item.js
index 16019c88a..2a3c13d05 100644
--- a/ui/app/accounts/account-list-item.js
+++ b/ui/app/accounts/account-list-item.js
@@ -15,9 +15,10 @@ function AccountListItem () {
 }
 
 AccountListItem.prototype.render = function () {
-  const { identity, selectedAccount, accounts, onShowDetail } = this.props
+  const { identity, selectedAddress, accounts, onShowDetail } = this.props
 
-  const isSelected = selectedAccount === identity.address
+  const checksumAddress = identity && identity.address && ethUtil.toChecksumAddress(identity.address)
+  const isSelected = selectedAddress === identity.address
   const account = accounts[identity.address]
   const selectedClass = isSelected ? '.selected' : ''
 
@@ -48,7 +49,7 @@ AccountListItem.prototype.render = function () {
             overflow: 'hidden',
             textOverflow: 'ellipsis',
           },
-        }, ethUtil.toChecksumAddress(identity.address)),
+        }, checksumAddress),
         h(EthBalance, {
           value: account && account.balance,
           style: {
@@ -65,7 +66,7 @@ AccountListItem.prototype.render = function () {
         },
       }, [
         h(CopyButton, {
-          value: ethUtil.toChecksumAddress(identity.address),
+          value: checksumAddress,
         }),
       ]),
     ])
diff --git a/ui/app/accounts/import/index.js b/ui/app/accounts/import/index.js
index 18a6b985c..96350852a 100644
--- a/ui/app/accounts/import/index.js
+++ b/ui/app/accounts/import/index.js
@@ -6,11 +6,11 @@ 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',
+  'JSON File',
 ]
 
 module.exports = connect(mapStateToProps)(AccountImportSubview)
@@ -81,10 +81,10 @@ AccountImportSubview.prototype.renderImportView = function() {
   const current = type || menuItems[0]
 
   switch (current) {
-    case 'HD Key Tree':
-      return h(SeedImportView)
     case 'Private Key':
       return h(PrivateKeyImportView)
+    case 'JSON File':
+      return h(JsonImportView)
     default:
       return h(JsonImportView)
   }
diff --git a/ui/app/accounts/import/json.js b/ui/app/accounts/import/json.js
index 22cf95cfd..1c2b331d4 100644
--- a/ui/app/accounts/import/json.js
+++ b/ui/app/accounts/import/json.js
@@ -2,11 +2,15 @@ const inherits = require('util').inherits
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const connect = require('react-redux').connect
+const actions = require('../../actions')
+const FileInput = require('react-simple-file-input').default
 
 module.exports = connect(mapStateToProps)(JsonImportSubview)
 
 function mapStateToProps (state) {
-  return {}
+  return {
+    error: state.appState.warning,
+  }
 }
 
 inherits(JsonImportSubview, Component)
@@ -15,13 +19,80 @@ function JsonImportSubview () {
 }
 
 JsonImportSubview.prototype.render = function () {
+  const { error } = this.props
+
   return (
     h('div', {
       style: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        padding: '5px 15px 0px 15px',
       },
     }, [
-      `Upload your json file here!`,
+
+      h('p', 'Used by a variety of different clients'),
+
+      h(FileInput, {
+        readAs: 'text',
+        onLoad: this.onLoad.bind(this),
+        style: {
+          margin: '20px 0px 12px 20px',
+          fontSize: '15px',
+        },
+      }),
+
+      h('input.large-input.letter-spacey', {
+        type: 'password',
+        placeholder: 'Enter password',
+        id: 'json-password-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,
     ])
   )
 }
 
+JsonImportSubview.prototype.onLoad = function (event, file) {
+  this.setState({file: file, fileContents: event.target.result})
+}
+
+JsonImportSubview.prototype.createKeyringOnEnter = function (event) {
+  if (event.key === 'Enter') {
+    event.preventDefault()
+    this.createNewKeychain()
+  }
+}
+
+JsonImportSubview.prototype.createNewKeychain = function () {
+  const state = this.state
+  const { fileContents } = state
+
+  if (!fileContents) {
+    const message = 'You must select a file to import.'
+    return this.props.dispatch(actions.displayWarning(message))
+  }
+
+  const passwordInput = document.getElementById('json-password-box')
+  const password = passwordInput.value
+
+  if (!password) {
+    const message = 'You must enter a password for the selected file.'
+    return this.props.dispatch(actions.displayWarning(message))
+  }
+
+  this.props.dispatch(actions.importNewAccount('JSON File', [ fileContents, password ]))
+}
+
diff --git a/ui/app/accounts/import/private-key.js b/ui/app/accounts/import/private-key.js
index 6b988a76b..b139a0374 100644
--- a/ui/app/accounts/import/private-key.js
+++ b/ui/app/accounts/import/private-key.js
@@ -2,7 +2,6 @@ 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)
@@ -64,6 +63,6 @@ PrivateKeyImportView.prototype.createKeyringOnEnter = function (event) {
 PrivateKeyImportView.prototype.createNewKeychain = function () {
   const input = document.getElementById('private-key-box')
   const privateKey = input.value
-  this.props.dispatch(actions.addNewKeyring(type, [ privateKey ]))
+  this.props.dispatch(actions.importNewAccount('Private Key', [ privateKey ]))
 }
 
diff --git a/ui/app/accounts/index.js b/ui/app/accounts/index.js
index e6f376735..e236a4e85 100644
--- a/ui/app/accounts/index.js
+++ b/ui/app/accounts/index.js
@@ -10,16 +10,16 @@ const AccountListItem = require('./account-list-item')
 module.exports = connect(mapStateToProps)(AccountsScreen)
 
 function mapStateToProps (state) {
-  const pendingTxs = valuesFor(state.metamask.unconfTxs)
+  const pendingTxs = valuesFor(state.metamask.unapprovedTxs)
   .filter(tx => tx.txParams.metamaskNetworkId === state.metamask.network)
-  const pendingMsgs = valuesFor(state.metamask.unconfMsgs)
+  const pendingMsgs = valuesFor(state.metamask.unapprovedMsgs)
   const pending = pendingTxs.concat(pendingMsgs)
 
   return {
     accounts: state.metamask.accounts,
     identities: state.metamask.identities,
-    unconfTxs: state.metamask.unconfTxs,
-    selectedAccount: state.metamask.selectedAccount,
+    unapprovedTxs: state.metamask.unapprovedTxs,
+    selectedAddress: state.metamask.selectedAddress,
     scrollToBottom: state.appState.scrollToBottom,
     pending,
     keyrings: state.metamask.keyrings,
@@ -35,7 +35,7 @@ AccountsScreen.prototype.render = function () {
   const props = this.props
   const { keyrings } = props
   const identityList = valuesFor(props.identities)
-  const unconfTxList = valuesFor(props.unconfTxs)
+  const unapprovedTxList = valuesFor(props.unapprovedTxs)
 
   return (
 
@@ -80,7 +80,7 @@ AccountsScreen.prototype.render = function () {
             return h(AccountListItem, {
               key: `acct-panel-${identity.address}`,
               identity,
-              selectedAccount: this.props.selectedAccount,
+              selectedAddress: this.props.selectedAddress,
               accounts: this.props.accounts,
               onShowDetail: this.onShowDetail.bind(this),
               pending,
@@ -107,7 +107,7 @@ AccountsScreen.prototype.render = function () {
           h('hr.horizontal-line'),
         ]),
 
-      unconfTxList.length ? (
+      unapprovedTxList.length ? (
 
         h('.unconftx-link.flex-row.flex-center', {
           onClick: this.navigateToConfTx.bind(this),
@@ -139,13 +139,6 @@ AccountsScreen.prototype.navigateToConfTx = function () {
   this.props.dispatch(actions.showConfTxPage())
 }
 
-AccountsScreen.prototype.onSelect = function (address, event) {
-  event.stopPropagation()
-  // if already selected, deselect
-  if (this.props.selectedAccount === address) address = null
-  this.props.dispatch(actions.setSelectedAccount(address))
-}
-
 AccountsScreen.prototype.onShowDetail = function (address, event) {
   event.stopPropagation()
   this.props.dispatch(actions.showAccountDetail(address))