Readd loose label onto accounts.

ui/app/app.js

@@ -42,6 +42,7 @@ function mapStateToProps (state) {
     identities,
     accounts,
     address,
+    keyrings,
   } = state.metamask
   const selected = address || Object.keys(accounts)[0]
 
@@ -69,6 +70,7 @@ function mapStateToProps (state) {
     // state needed to get account dropdown temporarily rendering from app bar
     identities,
     selected,
+    keyrings,
   }
 }
 
@@ -187,6 +189,7 @@ App.prototype.renderAppBar = function () {
             identities: this.props.identities,
             selected: this.props.selected,
             network: this.props.network,
+            keyrings: this.props.keyrings,
           }, []),
 
           // hamburger

ui/app/components/account-dropdowns.js

@@ -22,12 +22,19 @@ class AccountDropdowns extends Component {
   }
 
   renderAccounts () {
-    const { identities, selected } = this.props
+    const { identities, selected, keyrings } = this.props
 
     return Object.keys(identities).map((key, index) => {
       const identity = identities[key]
       const isSelected = identity.address === selected
 
+      const simpleAddress = identity.address.substring(2).toLowerCase()
+
+      const keyring = keyrings.find((kr) => {
+        return kr.accounts.includes(simpleAddress) ||
+          kr.accounts.includes(identity.address)
+      })
+
       return h(
         DropdownMenuItem,
         {
@@ -51,6 +58,7 @@ class AccountDropdowns extends Component {
               },
             },
           ),
+          this.indicateIfLoose(keyring.type),
           h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, identity.name || ''),
           h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, isSelected ? h('.check', '✓') : null),
         ]
@@ -58,6 +66,13 @@ class AccountDropdowns extends Component {
     })
   }
 
+  indicateIfLoose (type) {
+    try { // Sometimes keyrings aren't loaded yet:
+      const isLoose = type !== 'HD Key Tree'
+      return isLoose ? h('.keyring-label', 'LOOSE') : null
+    } catch (e) { return }
+  }
+
   renderAccountSelector () {
     const { actions } = this.props
     const { accountSelectorActive } = this.state
@@ -136,6 +151,8 @@ class AccountDropdowns extends Component {
     )
   }
 
+
+
   renderAccountOptions () {
     const { actions } = this.props
     const { optionsMenuActive } = this.state
@@ -269,6 +286,7 @@ AccountDropdowns.defaultProps = {
 AccountDropdowns.propTypes = {
   identities: PropTypes.objectOf(PropTypes.object),
   selected: PropTypes.string,
+  keyrings: PropTypes.objectOf(PropTypes.object),
 }
 
 const mapDispatchToProps = (dispatch) => {

ui/app/components/dropdown.js

@@ -32,7 +32,7 @@ class Dropdown extends Component {
           'style',
           `
           li.dropdown-menu-item:hover { color:rgb(225, 225, 225); }
-          li.dropdown-menu-item { color: rgb(185, 185, 185); }
+          li.dropdown-menu-item { color: rgb(185, 185, 185); position: relative }
           `
         ),
         ...children,

ui/app/css/lib.css

@@ -215,12 +215,13 @@ hr.horizontal-line {
   z-index: 1;
   font-size: 11px;
   background: rgba(255,0,0,0.8);
-  bottom: -47px;
   color: white;
+  bottom: 0px;
+  left: -8px;
   border-radius: 10px;
   height: 20px;
   min-width: 20px;
-  position: relative;
+  position: absolute;
   display: flex;
   align-items: center;
   justify-content: center;