Make all addresses EIP-55 compliant (#5379)

* Make all addresses EIP-55 compliant

* Checksum autocompleted address but not during input

3 files changed, 14 insertions, 8 deletions

diff --git a/ui/app/components/qr-code.js b/ui/app/components/qr-code.js
index 3b2c62f49..d3242ddf5 100644
--- a/ui/app/components/qr-code.js
+++ b/ui/app/components/qr-code.js
@@ -26,7 +26,7 @@ function QrCodeView () {
 QrCodeView.prototype.render = function () {
   const props = this.props
   const { message, data } = props.Qr
-  const address = `${isHexPrefixed(data) ? 'ethereum:' : ''}${data}`
+  const address = `${isHexPrefixed(data) ? 'ethereum:' : ''}${checksumAddress(data)}`
   const qrImage = qrCode(4, 'M')
   qrImage.addData(address)
   qrImage.make()
diff --git a/ui/app/components/send/to-autocomplete/to-autocomplete.js b/ui/app/components/send/to-autocomplete/to-autocomplete.js
index 49ebf49d9..39d15dfa7 100644
--- a/ui/app/components/send/to-autocomplete/to-autocomplete.js
+++ b/ui/app/components/send/to-autocomplete/to-autocomplete.js
@@ -5,6 +5,7 @@ const inherits = require('util').inherits
 const AccountListItem = require('../account-list-item/account-list-item.component').default
 const connect = require('react-redux').connect
 const Tooltip = require('../../tooltip')
+const checksumAddress = require('../../../util').checksumAddress
 
 ToAutoComplete.contextTypes = {
   t: PropTypes.func,
@@ -48,7 +49,7 @@ ToAutoComplete.prototype.renderDropdown = function () {
         account,
         className: 'account-list-item__dropdown',
         handleClick: () => {
-          onChange(account.address)
+          onChange(checksumAddress(account.address))
           closeDropdown()
         },
         icon: this.getListItemIcon(account.address, to),
diff --git a/ui/app/components/sender-to-recipient/sender-to-recipient.component.js b/ui/app/components/sender-to-recipient/sender-to-recipient.component.js
index 61f77224d..e71bd7406 100644
--- a/ui/app/components/sender-to-recipient/sender-to-recipient.component.js
+++ b/ui/app/components/sender-to-recipient/sender-to-recipient.component.js
@@ -5,6 +5,7 @@ import Identicon from '../identicon'
 import Tooltip from '../tooltip-v2'
 import copyToClipboard from 'copy-to-clipboard'
 import { DEFAULT_VARIANT, CARDS_VARIANT } from './sender-to-recipient.constants'
+import { checksumAddress } from '../../util'
 
 const variantHash = {
   [DEFAULT_VARIANT]: 'sender-to-recipient--default',
@@ -40,7 +41,7 @@ export default class SenderToRecipient extends PureComponent {
     return !this.props.addressOnly && (
       <div className="sender-to-recipient__sender-icon">
         <Identicon
-          address={this.props.senderAddress}
+          address={checksumAddress(this.props.senderAddress)}
           diameter={24}
         />
       </div>
@@ -50,6 +51,7 @@ export default class SenderToRecipient extends PureComponent {
   renderSenderAddress () {
     const { t } = this.context
     const { senderName, senderAddress, addressOnly } = this.props
+    const checksummedSenderAddress = checksumAddress(senderAddress)
 
     return (
       <Tooltip
@@ -60,7 +62,7 @@ export default class SenderToRecipient extends PureComponent {
         onHidden={() => this.setState({ senderAddressCopied: false })}
       >
       <div className="sender-to-recipient__name">
-        { addressOnly ? `${t('from')}: ${senderAddress}` : senderName }
+        { addressOnly ? `${t('from')}: ${checksummedSenderAddress}` : senderName }
       </div>
     </Tooltip>
     )
@@ -68,11 +70,12 @@ export default class SenderToRecipient extends PureComponent {
 
   renderRecipientIdenticon () {
     const { recipientAddress, assetImage } = this.props
+    const checksummedRecipientAddress = checksumAddress(recipientAddress)
 
     return !this.props.addressOnly && (
       <div className="sender-to-recipient__sender-icon">
         <Identicon
-          address={recipientAddress}
+          address={checksummedRecipientAddress}
           diameter={24}
           image={assetImage}
         />
@@ -83,13 +86,14 @@ export default class SenderToRecipient extends PureComponent {
   renderRecipientWithAddress () {
     const { t } = this.context
     const { recipientName, recipientAddress, addressOnly } = this.props
+    const checksummedRecipientAddress = checksumAddress(recipientAddress)
 
     return (
       <div
         className="sender-to-recipient__party sender-to-recipient__party--recipient sender-to-recipient__party--recipient-with-address"
         onClick={() => {
           this.setState({ recipientAddressCopied: true })
-          copyToClipboard(recipientAddress)
+          copyToClipboard(checksummedRecipientAddress)
         }}
       >
         { this.renderRecipientIdenticon() }
@@ -103,7 +107,7 @@ export default class SenderToRecipient extends PureComponent {
           <div className="sender-to-recipient__name">
             {
               addressOnly
-                ? `${t('to')}: ${recipientAddress}`
+                ? `${t('to')}: ${checksummedRecipientAddress}`
                 : (recipientName || this.context.t('newContract'))
             }
           </div>
@@ -147,6 +151,7 @@ export default class SenderToRecipient extends PureComponent {
 
   render () {
     const { senderAddress, recipientAddress, variant } = this.props
+    const checksummedSenderAddress = checksumAddress(senderAddress)
 
     return (
       <div className={classnames(variantHash[variant])}>
@@ -154,7 +159,7 @@ export default class SenderToRecipient extends PureComponent {
           className={classnames('sender-to-recipient__party sender-to-recipient__party--sender')}
           onClick={() => {
             this.setState({ senderAddressCopied: true })
-            copyToClipboard(senderAddress)
+            copyToClipboard(checksummedSenderAddress)
           }}
         >
           { this.renderSenderIdenticon() }