Add fallback options for displaying recipient name in the Confirm screen

3 files changed, 24 insertions, 10 deletions

diff --git a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js
index 7db39adec..0c0deff18 100644
--- a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js
+++ b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js
@@ -2,6 +2,7 @@ import { connect } from 'react-redux'
 import { compose } from 'recompose'
 import { withRouter } from 'react-router-dom'
 import R from 'ramda'
+import contractMap from 'eth-contract-metadata'
 import ConfirmTransactionBase from './confirm-transaction-base.component'
 import {
   clearConfirmTransaction,
@@ -16,6 +17,14 @@ import { getHexGasTotal } from '../../../helpers/confirm-transaction/util'
 import { isBalanceSufficient } from '../../send/send.utils'
 import { conversionGreaterThan } from '../../../conversion-util'
 import { MIN_GAS_LIMIT_DEC } from '../../send/send.constants'
+import { addressSlicer } from '../../../util'
+
+const casedContractMap = Object.keys(contractMap).reduce((acc, base) => {
+  return {
+    ...acc,
+    [base.toLowerCase()]: contractMap[base],
+  }
+}, {})
 
 const mapStateToProps = (state, props) => {
   const { toAddress: propsToAddress } = props
@@ -48,7 +57,10 @@ const mapStateToProps = (state, props) => {
   const { balance } = accounts[selectedAddress]
   const { name: fromName } = identities[selectedAddress]
   const toAddress = propsToAddress || txParamsToAddress
-  const toName = identities[toAddress] && identities[toAddress].name
+  const toName = identities[toAddress]
+    ? identities[toAddress].name
+    : casedContractMap[toAddress] ? casedContractMap[toAddress].name : addressSlicer(toAddress)
+
   const isTxReprice = Boolean(lastGasPrice)
 
   const transaction = R.find(({ id }) => id === transactionId)(selectedAddressTxList)
diff --git a/ui/app/components/selected-account/selected-account.component.js b/ui/app/components/selected-account/selected-account.component.js
index 79f0cb93a..6c202141e 100644
--- a/ui/app/components/selected-account/selected-account.component.js
+++ b/ui/app/components/selected-account/selected-account.component.js
@@ -1,17 +1,10 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import copyToClipboard from 'copy-to-clipboard'
+import { addressSlicer } from '../../util'
 
 const Tooltip = require('../tooltip-v2.js')
 
-const addressStripper = (address = '') => {
-  if (address.length < 11) {
-    return address
-  }
-
-  return `${address.slice(0, 6)}...${address.slice(-4)}`
-}
-
 class SelectedAccount extends Component {
   state = {
     copied: false,
@@ -48,7 +41,7 @@ class SelectedAccount extends Component {
               { selectedIdentity.name }
             </div>
             <div className="selected-account__address">
-              { addressStripper(selectedAddress) }
+              { addressSlicer(selectedAddress) }
             </div>
           </div>
         </Tooltip>
diff --git a/ui/app/util.js b/ui/app/util.js
index 8c85c5926..8b194e0c7 100644
--- a/ui/app/util.js
+++ b/ui/app/util.js
@@ -59,6 +59,7 @@ module.exports = {
   allNull,
   getTokenAddressFromTokenObject,
   checksumAddress,
+  addressSlicer,
 }
 
 function valuesFor (obj) {
@@ -303,3 +304,11 @@ function getTokenAddressFromTokenObject (token) {
 function checksumAddress (address) {
   return address ? ethUtil.toChecksumAddress(address) : ''
 }
+
+function addressSlicer (address = '') {
+  if (address.length < 11) {
+    return address
+  }
+
+  return `${address.slice(0, 6)}...${address.slice(-4)}`
+}