From 3bbbe133111053467843bab2f78319fa7bb181d4 Mon Sep 17 00:00:00 2001
From: ryanml <rlanese@asu.edu>
Date: Tue, 11 Feb 2020 07:40:15 -0800
Subject: [PATCH] Use contact name instead of address during send flow (#7971)

---
 .../transaction-list-item-details.component.test.js |  8 ++++++++
 .../transaction-list-item-details.component.js      |  6 ++++++
 .../transaction-list-item-details.container.js      | 13 ++++++++++++-
 .../sender-to-recipient.component.js                |  2 +-
 4 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/ui/app/components/app/transaction-list-item-details/tests/transaction-list-item-details.component.test.js b/ui/app/components/app/transaction-list-item-details/tests/transaction-list-item-details.component.test.js
index 2111c890d..abba1b08c 100644
--- a/ui/app/components/app/transaction-list-item-details/tests/transaction-list-item-details.component.test.js
+++ b/ui/app/components/app/transaction-list-item-details/tests/transaction-list-item-details.component.test.js
@@ -35,6 +35,8 @@ describe('TransactionListItemDetails Component', () => {
         senderAddress="0x2"
         tryReverseResolveAddress={() => {}}
         transactionGroup={transactionGroup}
+        senderNickname="sender-nickname"
+        recipientNickname="recipient-nickname"
       />,
       { context: { t: (str1, str2) => (str2 ? str1 + str2 : str1) } }
     )
@@ -77,6 +79,8 @@ describe('TransactionListItemDetails Component', () => {
         tryReverseResolveAddress={() => {}}
         transactionGroup={transactionGroup}
         showSpeedUp
+        senderNickname="sender-nickname"
+        recipientNickname="recipient-nickname"
       />,
       { context: { t: (str1, str2) => (str2 ? str1 + str2 : str1) } }
     )
@@ -112,6 +116,8 @@ describe('TransactionListItemDetails Component', () => {
         senderAddress="0x2"
         tryReverseResolveAddress={() => {}}
         transactionGroup={transactionGroup}
+        senderNickname="sender-nickname"
+        recipientNickname="recipient-nickname"
       />,
       { context: { t: (str1, str2) => (str2 ? str1 + str2 : str1) } }
     )
@@ -150,6 +156,8 @@ describe('TransactionListItemDetails Component', () => {
         senderAddress="0x2"
         tryReverseResolveAddress={() => {}}
         transactionGroup={transactionGroup}
+        senderNickname="sender-nickname"
+        recipientNickname="recipient-nickname"
       />,
       { context: { t: (str1, str2) => (str2 ? str1 + str2 : str1) } }
     )
diff --git a/ui/app/components/app/transaction-list-item-details/transaction-list-item-details.component.js b/ui/app/components/app/transaction-list-item-details/transaction-list-item-details.component.js
index 29634e023..d193f9fb9 100644
--- a/ui/app/components/app/transaction-list-item-details/transaction-list-item-details.component.js
+++ b/ui/app/components/app/transaction-list-item-details/transaction-list-item-details.component.js
@@ -35,6 +35,8 @@ export default class TransactionListItemDetails extends PureComponent {
     rpcPrefs: PropTypes.object,
     senderAddress: PropTypes.string.isRequired,
     tryReverseResolveAddress: PropTypes.func.isRequired,
+    senderNickname: PropTypes.string.isRequired,
+    recipientNickname: PropTypes.string.isRequired,
   }
 
   state = {
@@ -146,6 +148,8 @@ export default class TransactionListItemDetails extends PureComponent {
       rpcPrefs: { blockExplorerUrl } = {},
       senderAddress,
       isEarliestNonce,
+      senderNickname,
+      recipientNickname,
     } = this.props
     const { primaryTransaction: transaction } = transactionGroup
     const { hash } = transaction
@@ -212,6 +216,8 @@ export default class TransactionListItemDetails extends PureComponent {
               addressOnly
               recipientEns={recipientEns}
               recipientAddress={recipientAddress}
+              recipientNickname={recipientNickname}
+              senderName={senderNickname}
               senderAddress={senderAddress}
               onRecipientClick={() => {
                 this.context.metricsEvent({
diff --git a/ui/app/components/app/transaction-list-item-details/transaction-list-item-details.container.js b/ui/app/components/app/transaction-list-item-details/transaction-list-item-details.container.js
index 50f93f497..2a7cea51f 100644
--- a/ui/app/components/app/transaction-list-item-details/transaction-list-item-details.container.js
+++ b/ui/app/components/app/transaction-list-item-details/transaction-list-item-details.container.js
@@ -2,18 +2,29 @@ import { connect } from 'react-redux'
 import TransactionListItemDetails from './transaction-list-item-details.component'
 import { checksumAddress } from '../../../helpers/utils/util'
 import { tryReverseResolveAddress } from '../../../store/actions'
+import { getAddressBook } from '../../../selectors/selectors'
 
 const mapStateToProps = (state, ownProps) => {
   const { metamask } = state
   const {
     ensResolutionsByAddress,
   } = metamask
-  const { recipientAddress } = ownProps
+  const { recipientAddress, senderAddress } = ownProps
   const address = checksumAddress(recipientAddress)
   const recipientEns = ensResolutionsByAddress[address] || ''
+  const addressBook = getAddressBook(state)
+
+  const getNickName = (address) => {
+    const entry = addressBook.find((contact) => {
+      return address.toLowerCase() === contact.address.toLowerCase()
+    })
+    return entry && entry.name || ''
+  }
 
   return {
     recipientEns,
+    senderNickname: getNickName(senderAddress),
+    recipientNickname: getNickName(recipientAddress),
   }
 }
 
diff --git a/ui/app/components/ui/sender-to-recipient/sender-to-recipient.component.js b/ui/app/components/ui/sender-to-recipient/sender-to-recipient.component.js
index a7597e36b..2780456d6 100644
--- a/ui/app/components/ui/sender-to-recipient/sender-to-recipient.component.js
+++ b/ui/app/components/ui/sender-to-recipient/sender-to-recipient.component.js
@@ -78,7 +78,7 @@ export default class SenderToRecipient extends PureComponent {
         <div className="sender-to-recipient__name">
           {
             addressOnly
-              ? <span>{`${t('from')}: ${checksummedSenderAddress}`}</span>
+              ? <span>{`${t('from')}: ${senderName || checksummedSenderAddress}`}</span>
               : senderName
           }
         </div>