Use contact name instead of address during send flow (#7971)

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) } }
     )

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({

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),
   }
 }
 

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>