catching up with develop

3 files changed, 48 insertions, 13 deletions

diff --git a/ui/app/components/account-menu/index.js b/ui/app/components/account-menu/index.js
index c5b577cfd..fc48b60f3 100644
--- a/ui/app/components/account-menu/index.js
+++ b/ui/app/components/account-menu/index.js
@@ -69,8 +69,8 @@ function mapDispatchToProps (dispatch) {
       dispatch(actions.hideSidebar())
       dispatch(actions.toggleAccountMenu())
     },
-    showRemoveAccountConfirmationModal: (address) => {
-      return dispatch(actions.showModal({ name: 'CONFIRM_REMOVE_ACCOUNT', address }))
+    showRemoveAccountConfirmationModal: (identity) => {
+      return dispatch(actions.showModal({ name: 'CONFIRM_REMOVE_ACCOUNT', identity }))
     },
   }
 }
@@ -193,13 +193,13 @@ AccountMenu.prototype.renderAccounts = function () {
         ]),
 
         this.renderKeyringType(keyring),
-        this.renderRemoveAccount(keyring, identity.address),
+        this.renderRemoveAccount(keyring, identity),
       ],
     )
   })
 }
 
-AccountMenu.prototype.renderRemoveAccount = function (keyring, address) {
+AccountMenu.prototype.renderRemoveAccount = function (keyring, identity) {
   // Any account that's not from the HD wallet Keyring can be removed
   const type = keyring.type
   const isRemovable = type !== 'HD Key Tree'
@@ -209,18 +209,18 @@ AccountMenu.prototype.renderRemoveAccount = function (keyring, address) {
       position: 'bottom',
     }, [
         h('a.remove-account-icon', {
-          onClick: (e) => this.removeAccount(e, address),
+          onClick: (e) => this.removeAccount(e, identity),
         }, ''),
       ])
   }
   return null
 }
 
-AccountMenu.prototype.removeAccount = function (e, address) {
+AccountMenu.prototype.removeAccount = function (e, identity) {
   e.preventDefault()
   e.stopPropagation()
   const { showRemoveAccountConfirmationModal } = this.props
-  showRemoveAccountConfirmationModal(address)
+  showRemoveAccountConfirmationModal(identity)
 }
 
 AccountMenu.prototype.renderKeyringType = function (keyring) {
diff --git a/ui/app/components/modals/confirm-remove-account/confirm-remove-account.component.js b/ui/app/components/modals/confirm-remove-account/confirm-remove-account.component.js
index d6c0c796d..b9dc6364f 100644
--- a/ui/app/components/modals/confirm-remove-account/confirm-remove-account.component.js
+++ b/ui/app/components/modals/confirm-remove-account/confirm-remove-account.component.js
@@ -2,12 +2,15 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import Button from '../../button'
 import { addressSummary } from '../../../util'
+import Identicon from '../../identicon'
+import genAccountLink from '../../../../lib/account-link'
 
 class ConfirmRemoveAccount extends Component {
   static propTypes = {
     hideModal: PropTypes.func.isRequired,
     removeAccount: PropTypes.func.isRequired,
-    address: PropTypes.string.isRequired,
+    identity: PropTypes.object.isRequired,
+    network: PropTypes.string.isRequired,
   }
 
   static contextTypes = {
@@ -15,10 +18,43 @@ class ConfirmRemoveAccount extends Component {
   }
 
   handleRemove () {
-    this.props.removeAccount(this.props.address)
+    this.props.removeAccount(this.props.identity.address)
       .then(() => this.props.hideModal())
   }
 
+  renderSelectedAccount () {
+    const { identity } = this.props
+    return (
+      <div className="modal-container__address">
+        <div className="account_identicon">
+          <Identicon
+              address={identity.address}
+              diameter={32}
+              style={{'marginLeft': '10px'}}
+          />
+        </div>
+        <div className="account_name">
+            <span className="account_label">Name</span>
+            <span className="account_value">{identity.name}</span>
+        </div>
+        <div className="account_address">
+            <span className="account_label">Public Address</span>
+            <span className="account_value">{ addressSummary(identity.address) }</span>
+        </div>
+        <div className="account_link">
+          <a
+            className="hw-account-list__item__link"
+            href={genAccountLink(identity.address, this.props.network)}
+            target={'_blank'}
+            title={this.context.t('etherscanView')}
+          >
+            <img src="images/popout.svg" />
+          </a>
+        </div>
+      </div>
+    )
+  }
+
   render () {
     const { t } = this.context
 
@@ -28,9 +64,7 @@ class ConfirmRemoveAccount extends Component {
           <div className="modal-container__title">
             { `${t('removeAccount')}` }?
           </div>
-          <div className="modal-container__address">
-            {addressSummary(this.props.address)}
-          </div>
+            { this.renderSelectedAccount() }
           <div className="modal-container__description">
             { t('removeAccountDescription') }
             <a className="modal-container__link" rel="noopener noreferrer" target="_blank" href="https://consensys.zendesk.com/hc/en-us/articles/360004180111-What-are-imported-accounts-New-UI-">{ t('learnMore') }</a>
diff --git a/ui/app/components/modals/confirm-remove-account/confirm-remove-account.container.js b/ui/app/components/modals/confirm-remove-account/confirm-remove-account.container.js
index fcb149b3f..4b194c995 100644
--- a/ui/app/components/modals/confirm-remove-account/confirm-remove-account.container.js
+++ b/ui/app/components/modals/confirm-remove-account/confirm-remove-account.container.js
@@ -5,7 +5,8 @@ const { hideModal, removeAccount } = require('../../../actions')
 
 const mapStateToProps = state => {
   return {
-    address: state.appState.modal.modalState.props.address,
+    identity: state.appState.modal.modalState.props.identity,
+    network: state.metamask.network,
   }
 }