Fix incorrectly showing checksums on non-ETH blockchains

CHANGELOG.md

@@ -10,6 +10,7 @@
 - [#5932](https://github.com/MetaMask/metamask-extension/pull/5932): Fix displayed time and date in the activity log. Remove vreme library, add luxon library.
 - [#5924](https://github.com/MetaMask/metamask-extension/pull/5924): transactions - throw an error if a transaction is generated while the network is loading
 - [#5893](https://github.com/MetaMask/metamask-extension/pull/5893): Add loading network screen
+- [#5973] (https://github.com/MetaMask/metamask-extension/pull/5973): Fix incorrectly showing checksums on non-ETH blockchains (issue 5838)
 
 ## 5.2.2 Wed Dec 12 2018
 

test/e2e/beta/run-drizzle.sh

@@ -28,4 +28,4 @@ fi
 ! kill -15 $npm_run_ganache_start_pid
 ! kill -15 $npm_start_pid
 ! wait $npm_run_ganache_start_pid $npm_start_pid
-exit ${test_status:-}
+exit ${test_status:-}

ui/app/components/modals/account-details-modal.js

@@ -77,6 +77,7 @@ AccountDetailsModal.prototype.render = function () {
       h(QrView, {
         Qr: {
           data: address,
+          network: network,
         },
       }),
 

ui/app/components/qr-code.js

@@ -10,6 +10,7 @@ const { checksumAddress } = require('../util')
 module.exports = connect(mapStateToProps)(QrCodeView)
 
 function mapStateToProps (state) {
+
   return {
     // Qr code is not fetched from state. 'message' and 'data' props are passed instead.
     buyView: state.appState.buyView,
@@ -25,9 +26,10 @@ function QrCodeView () {
 
 QrCodeView.prototype.render = function () {
   const props = this.props
-  const { message, data } = props.Qr
-  const address = `${isHexPrefixed(data) ? 'ethereum:' : ''}${checksumAddress(data)}`
+  const { message, data, network } = props.Qr
+  const address = `${isHexPrefixed(data) ? 'ethereum:' : ''}${checksumAddress(data, network)}`
   const qrImage = qrCode(4, 'M')
+
   qrImage.addData(address)
   qrImage.make()
 
@@ -51,7 +53,7 @@ QrCodeView.prototype.render = function () {
     h(ReadOnlyInput, {
       wrapperClass: 'ellip-address-wrapper',
       inputClass: 'qr-ellip-address',
-      value: checksumAddress(data),
+      value: checksumAddress(data, network),
     }),
   ])
 }

ui/app/components/selected-account/selected-account.component.js

@@ -17,12 +17,13 @@ class SelectedAccount extends Component {
   static propTypes = {
     selectedAddress: PropTypes.string,
     selectedIdentity: PropTypes.object,
+    network: PropTypes.string,
   }
 
   render () {
     const { t } = this.context
-    const { selectedAddress, selectedIdentity } = this.props
-    const checksummedAddress = checksumAddress(selectedAddress)
+    const { selectedAddress, selectedIdentity, network } = this.props
+    const checksummedAddress = checksumAddress(selectedAddress, network)
 
     return (
       <div className="selected-account">

ui/app/components/selected-account/selected-account.container.js

@@ -7,6 +7,7 @@ const mapStateToProps = state => {
   return {
     selectedAddress: selectors.getSelectedAddress(state),
     selectedIdentity: selectors.getSelectedIdentity(state),
+    network: state.metamask.network,
   }
 }
 

ui/app/components/send/send-content/send-to-row/send-to-row.component.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import SendRowWrapper from '../send-row-wrapper/'
 import EnsInput from '../../../ens-input'
 import { getToErrorObject } from './send-to-row.utils.js'
+import { checksumAddress } from '../../../../util'
 
 export default class SendToRow extends Component {
 
@@ -25,7 +26,8 @@ export default class SendToRow extends Component {
     t: PropTypes.func,
   }
 
-  handleToChange (to, nickname = '', toError) {
+  handleToChange (to, nickname = '', toError, network) {
+    to = checksumAddress(to, network)
     const { hasHexData, updateSendTo, updateSendToError, updateGas } = this.props
     const toErrorObject = getToErrorObject(to, toError, hasHexData)
     updateSendTo(to, nickname)
@@ -60,7 +62,7 @@ export default class SendToRow extends Component {
           inError={inError}
           name={'address'}
           network={network}
-          onChange={({ toAddress, nickname, toError }) => this.handleToChange(toAddress, nickname, toError)}
+          onChange={({ toAddress, nickname, toError }) => this.handleToChange(toAddress, nickname, toError, this.props.network)}
           openDropdown={() => openToDropdown()}
           placeholder={this.context.t('recipientAddress')}
           to={to}

ui/app/components/send/send-content/send-to-row/tests/send-to-row-component.test.js

@@ -142,7 +142,7 @@ describe('SendToRow Component', function () {
       assert.equal(SendToRow.prototype.handleToChange.callCount, 1)
       assert.deepEqual(
         SendToRow.prototype.handleToChange.getCall(0).args,
-        ['mockNewTo', 'mockNewNickname', 'mockToError']
+        ['mockNewTo', 'mockNewNickname', 'mockToError', 'mockNetwork' ]
       )
     })
   })

ui/app/components/wallet-view.js

@@ -125,10 +125,10 @@ WalletView.prototype.render = function () {
     showAccountDetailModal,
     hideSidebar,
     identities,
+    network,
   } = this.props
   // temporary logs + fake extra wallets
-
-  const checksummedAddress = checksumAddress(selectedAddress)
+  const checksummedAddress = checksumAddress(selectedAddress, network)
 
   if (!selectedAddress) {
     throw new Error('selectedAddress should not be ' + String(selectedAddress))

ui/app/util.js

@@ -60,6 +60,17 @@ module.exports = {
   getTokenAddressFromTokenObject,
   checksumAddress,
   addressSlicer,
+  isEthNetwork,
+}
+
+function isEthNetwork (netId) {
+  if (!netId) return false
+
+  if (netId === '1' || netId === '3' || netId === '4' || netId === '42') {
+    return true
+  }
+
+  return false
 }
 
 function valuesFor (obj) {
@@ -299,10 +310,12 @@ function getTokenAddressFromTokenObject (token) {
  * Safely checksumms a potentially-null address
  *
  * @param {String} [address] - address to checksum
+ * @param {String} [network] - network id
  * @returns {String} - checksummed address
  */
-function checksumAddress (address) {
-  return address ? ethUtil.toChecksumAddress(address) : ''
+function checksumAddress (address, network) {
+  const checksummed = address ? ethUtil.toChecksumAddress(address) : ''
+  return checksummed && network && !isEthNetwork(network) ? checksummed.toLowerCase() : checksummed
 }
 
 function addressSlicer (address = '') {