Merge pull request #1005 from MetaMask/dev

Merge dev into master!

2 files changed, 35 insertions, 21 deletions

diff --git a/ui/app/accounts/account-list-item.js b/ui/app/accounts/account-list-item.js
index 4e0d69ed7..16019c88a 100644
--- a/ui/app/accounts/account-list-item.js
+++ b/ui/app/accounts/account-list-item.js
@@ -15,19 +15,21 @@ function AccountListItem () {
 }
 
 AccountListItem.prototype.render = function () {
-  const identity = this.props.identity
-  var isSelected = this.props.selectedAddress === identity.address
-  var account = this.props.accounts[identity.address]
+  const { identity, selectedAccount, accounts, onShowDetail } = this.props
+
+  const isSelected = selectedAccount === identity.address
+  const account = accounts[identity.address]
   const selectedClass = isSelected ? '.selected' : ''
 
   return (
     h(`.accounts-list-option.flex-row.flex-space-between.pointer.hover-white${selectedClass}`, {
       key: `account-panel-${identity.address}`,
-      onClick: (event) => this.props.onShowDetail(identity.address, event),
+      onClick: (event) => onShowDetail(identity.address, event),
     }, [
 
       h('.identicon-wrapper.flex-column.flex-center.select-none', [
         this.pendingOrNot(),
+        this.indicateIfLoose(),
         h(Identicon, {
           address: identity.address,
           imageify: true,
@@ -48,7 +50,7 @@ AccountListItem.prototype.render = function () {
           },
         }, ethUtil.toChecksumAddress(identity.address)),
         h(EthBalance, {
-          value: account.balance,
+          value: account && account.balance,
           style: {
             lineHeight: '7px',
             marginTop: '10px',
@@ -70,6 +72,14 @@ AccountListItem.prototype.render = function () {
   )
 }
 
+AccountListItem.prototype.indicateIfLoose = function () {
+  try { // Sometimes keyrings aren't loaded yet:
+    const type = this.props.keyring.type
+    const isLoose = type !== 'HD Key Tree'
+    return isLoose ? h('.keyring-label', 'LOOSE') : null
+  } catch (e) { return }
+}
+
 AccountListItem.prototype.pendingOrNot = function () {
   const pending = this.props.pending
   if (pending.length === 0) return null
diff --git a/ui/app/accounts/index.js b/ui/app/accounts/index.js
index 7551c498e..edb15eafe 100644
--- a/ui/app/accounts/index.js
+++ b/ui/app/accounts/index.js
@@ -19,9 +19,10 @@ function mapStateToProps (state) {
     accounts: state.metamask.accounts,
     identities: state.metamask.identities,
     unconfTxs: state.metamask.unconfTxs,
-    selectedAddress: state.metamask.selectedAddress,
+    selectedAccount: state.metamask.selectedAccount,
     scrollToBottom: state.appState.scrollToBottom,
     pending,
+    keyrings: state.metamask.keyrings,
   }
 }
 
@@ -31,14 +32,11 @@ function AccountsScreen () {
 }
 
 AccountsScreen.prototype.render = function () {
-  var state = this.props
-  var identityList = valuesFor(state.identities)
-  var unconfTxList = valuesFor(state.unconfTxs)
-  var actions = {
-    onSelect: this.onSelect.bind(this),
-    onShowDetail: this.onShowDetail.bind(this),
-    goHome: this.goHome.bind(this),
-  }
+  const props = this.props
+  const { keyrings } = props
+  const identityList = valuesFor(props.identities)
+  const unconfTxList = valuesFor(props.unconfTxs)
+
   return (
 
     h('.accounts-section.flex-grow', [
@@ -46,7 +44,7 @@ AccountsScreen.prototype.render = function () {
       // subtitle and nav
       h('.section-title.flex-center', [
         h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', {
-          onClick: actions.goHome,
+          onClick: this.goHome.bind(this),
         }),
         h('h2.page-subtitle', 'Select Account'),
       ]),
@@ -73,13 +71,19 @@ AccountsScreen.prototype.render = function () {
               }
             })
 
+            const simpleAddress = identity.address.substring(2).toLowerCase()
+            const keyring = keyrings.find((kr) => {
+              return kr.accounts.includes(simpleAddress)
+            })
+
             return h(AccountListItem, {
               key: `acct-panel-${identity.address}`,
               identity,
-              selectedAddress: this.props.selectedAddress,
+              selectedAccount: this.props.selectedAccount,
               accounts: this.props.accounts,
               onShowDetail: this.onShowDetail.bind(this),
               pending,
+              keyring,
             })
           }),
 
@@ -87,7 +91,7 @@ AccountsScreen.prototype.render = function () {
           h('div.footer.hover-white.pointer', {
             key: 'reveal-account-bar',
             onClick: () => {
-              this.onRevealAccount()
+              this.addNewAccount()
             },
             style: {
               display: 'flex',
@@ -137,8 +141,8 @@ AccountsScreen.prototype.navigateToConfTx = function () {
 AccountsScreen.prototype.onSelect = function (address, event) {
   event.stopPropagation()
   // if already selected, deselect
-  if (this.props.selectedAddress === address) address = null
-  this.props.dispatch(actions.setSelectedAddress(address))
+  if (this.props.selectedAccount === address) address = null
+  this.props.dispatch(actions.setSelectedAccount(address))
 }
 
 AccountsScreen.prototype.onShowDetail = function (address, event) {
@@ -146,8 +150,8 @@ AccountsScreen.prototype.onShowDetail = function (address, event) {
   this.props.dispatch(actions.showAccountDetail(address))
 }
 
-AccountsScreen.prototype.onRevealAccount = function () {
-  this.props.dispatch(actions.revealAccount())
+AccountsScreen.prototype.addNewAccount = function () {
+  this.props.dispatch(actions.addNewAccount(0))
 }
 
 AccountsScreen.prototype.goHome = function () {