catching up with develop

2 files changed, 41 insertions, 6 deletions

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 d6c0c796..b9dc6364 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 fcb149b3..4b194c99 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,
   }
 }