Show recipient alias in confirm header if exists (#6944)

ui/app/components/app/confirm-page-container/confirm-page-container.component.js

@@ -24,6 +24,7 @@ export default class ConfirmPageContainer extends Component {
     fromName: PropTypes.string,
     toAddress: PropTypes.string,
     toName: PropTypes.string,
+    toNickname: PropTypes.string,
     // Content
     contentComponent: PropTypes.node,
     errorKey: PropTypes.string,
@@ -68,6 +69,7 @@ export default class ConfirmPageContainer extends Component {
       fromName,
       fromAddress,
       toName,
+      toNickname,
       toAddress,
       disabled,
       errorKey,
@@ -126,6 +128,7 @@ export default class ConfirmPageContainer extends Component {
             senderAddress={fromAddress}
             recipientName={toName}
             recipientAddress={toAddress}
+            recipientNickname={toNickname}
             assetImage={renderAssetImage ? assetImage : undefined}
           />
         </ConfirmPageContainerHeader>

ui/app/components/ui/sender-to-recipient/sender-to-recipient.component.js

@@ -19,6 +19,7 @@ export default class SenderToRecipient extends PureComponent {
     senderAddress: PropTypes.string,
     recipientName: PropTypes.string,
     recipientAddress: PropTypes.string,
+    recipientNickname: PropTypes.string,
     t: PropTypes.func,
     variant: PropTypes.oneOf([DEFAULT_VARIANT, CARDS_VARIANT, FLAT_VARIANT]),
     addressOnly: PropTypes.bool,
@@ -88,7 +89,7 @@ export default class SenderToRecipient extends PureComponent {
 
   renderRecipientWithAddress () {
     const { t } = this.context
-    const { recipientName, recipientAddress, addressOnly, onRecipientClick } = this.props
+    const { recipientName, recipientAddress, recipientNickname, addressOnly, onRecipientClick } = this.props
     const checksummedRecipientAddress = checksumAddress(recipientAddress)
 
     return (
@@ -114,7 +115,7 @@ export default class SenderToRecipient extends PureComponent {
             {
               addressOnly
                 ? `${t('to')}: ${checksummedRecipientAddress}`
-                : (recipientName || this.context.t('newContract'))
+                : (recipientNickname || recipientName || this.context.t('newContract'))
             }
           </div>
         </Tooltip>

ui/app/pages/confirm-transaction-base/confirm-transaction-base.component.js

@@ -59,6 +59,7 @@ export default class ConfirmTransactionBase extends Component {
     tokenData: PropTypes.object,
     tokenProps: PropTypes.object,
     toName: PropTypes.string,
+    toNickname: PropTypes.string,
     transactionStatus: PropTypes.string,
     txData: PropTypes.object,
     unapprovedTxCount: PropTypes.number,
@@ -529,6 +530,7 @@ export default class ConfirmTransactionBase extends Component {
       fromAddress,
       toName,
       toAddress,
+      toNickname,
       methodData,
       valid: propsValid = true,
       errorMessage,
@@ -551,13 +553,13 @@ export default class ConfirmTransactionBase extends Component {
     const { name } = methodData
     const { valid, errorKey } = this.getErrorKey()
     const { totalTx, positionOfCurrentTx, nextTxId, prevTxId, showNavigation, firstTx, lastTx, ofText, requestsWaitingText } = this.getNavigateTxData()
-
     return (
       <ConfirmPageContainer
         fromName={fromName}
         fromAddress={fromAddress}
         toName={toName}
         toAddress={toAddress}
+        toNickname={toNickname}
         showEdit={onEdit && !isTxReprice}
         // In the event that the key is falsy (and inherently invalid), use a fallback string
         action={getMethodName(name) || this.context.tOrKey(transactionCategory) || this.context.t('contractInteraction')}

ui/app/pages/confirm-transaction-base/confirm-transaction-base.container.js

@@ -37,6 +37,7 @@ const mapStateToProps = (state, ownProps) => {
   const {
     conversionRate,
     identities,
+    addressBook,
     currentCurrency,
     selectedAddress,
     selectedAddressTxList,
@@ -75,6 +76,8 @@ const mapStateToProps = (state, ownProps) => {
         : addressSlicer(checksumAddress(toAddress))
     )
 
+  const addressBookObject = addressBook[checksumAddress(toAddress)]
+  const toNickname = addressBookObject ? addressBookObject.name : ''
   const isTxReprice = Boolean(lastGasPrice)
   const transactionStatus = transaction ? transaction.status : ''
 
@@ -115,6 +118,7 @@ const mapStateToProps = (state, ownProps) => {
     fromName,
     toAddress,
     toName,
+    toNickname,
     ethTransactionAmount,
     ethTransactionFee,
     ethTransactionTotal,

ui/app/pages/send/send-footer/tests/send-footer-container.test.js

@@ -38,6 +38,7 @@ proxyquire('../send-footer.container.js', {
     getSendEditingTransactionId: (s) => `mockEditingTransactionId:${s}`,
     getSendFromObject: (s) => `mockFromObject:${s}`,
     getSendTo: (s) => `mockTo:${s}`,
+    getSendToNickname: (s) => `mockToNickname:${s}`,
     getSendToAccounts: (s) => `mockToAccounts:${s}`,
     getTokenBalance: (s) => `mockTokenBalance:${s}`,
     getSendHexData: (s) => `mockHexData:${s}`,