added ui to remove accounts

3 files changed, 50 insertions, 4 deletions

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 4598d14a5..303a612f1 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -393,6 +393,9 @@
     "message": "must be greater than or equal to $1.",
     "description": "helper for inputting hex as decimal input"
   },
+  "hardware": {
+    "message": "hardware"
+  },
   "here": {
     "message": "here",
     "description": "as in -click here- for more information (goes with troubleTokenBalances)"
diff --git a/ui/app/components/account-menu/index.js b/ui/app/components/account-menu/index.js
index be6963ac4..9530d6aeb 100644
--- a/ui/app/components/account-menu/index.js
+++ b/ui/app/components/account-menu/index.js
@@ -187,16 +187,42 @@ AccountMenu.prototype.renderAccounts = function () {
           h('div.account-menu__balance', formattedBalance),
         ]),
 
-        this.indicateIfLoose(keyring),
+        this.renderKeyringType(keyring),
+        this.renderForgetAccount(keyring, identity.address),
       ],
     )
   })
 }
 
-AccountMenu.prototype.indicateIfLoose = function (keyring) {
+AccountMenu.prototype.renderForgetAccount = function (keyring, address) {
+  // Any account that's not form the HD wallet can be forgotten
+  const type = keyring.type
+  const isForgetable = type !== 'HD Key Tree'
+  return isForgetable ? h('a.forget-account-icon', { onClick: (e) => this.forgetAccount(e, address) }, '') : null
+}
+
+AccountMenu.prototype.forgetAccount = function (e, address) {
+  e.preventDefault()
+  e.stopPropagation()
+  console.log('should forget address: ', address)
+}
+
+AccountMenu.prototype.renderKeyringType = function (keyring) {
   try { // Sometimes keyrings aren't loaded yet:
     const type = keyring.type
-    const isLoose = type !== 'HD Key Tree'
-    return isLoose ? h('.keyring-label.allcaps', this.context.t('imported')) : null
+    let label
+    switch (type) {
+      case 'Trezor Hardware':
+        label = this.context.t('hardware')
+      break
+      case 'Simple Key Pair':
+        label = this.context.t('imported')
+      break
+      default:
+        label = ''
+    }
+
+    return label !== '' ? h('.keyring-label.allcaps', label) : null
+
   } catch (e) { return }
 }
diff --git a/ui/app/css/itcss/components/account-menu.scss b/ui/app/css/itcss/components/account-menu.scss
index 96fba890c..20fc68424 100644
--- a/ui/app/css/itcss/components/account-menu.scss
+++ b/ui/app/css/itcss/components/account-menu.scss
@@ -72,6 +72,7 @@
       background-color: $dusty-gray;
       color: $black;
       font-weight: normal;
+      letter-spacing: .5px;
     }
   }
 
@@ -84,6 +85,22 @@
     @media screen and (max-width: 575px) {
       padding: 12px 14px;
     }
+
+    .forget-account-icon {
+      width: 25px;
+      margin-left: 10px;
+    }
+
+    &:hover {
+      .forget-account-icon::after {
+        content: '\00D7';
+        font-size: 25px;
+        color: $white;
+        cursor: pointer;
+        position: absolute;
+        margin-top: -5px;
+      }
+    }
   }
 
   &__account-info {