Show checksummed addresses throughout the UI

1 files changed, 7 insertions, 6 deletions

diff --git a/ui/app/components/qr-code.js b/ui/app/components/qr-code.js
index 83885539c..3b2c62f49 100644
--- a/ui/app/components/qr-code.js
+++ b/ui/app/components/qr-code.js
@@ -3,8 +3,9 @@ const h = require('react-hyperscript')
 const qrCode = require('qrcode-npm').qrcode
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
-const isHexPrefixed = require('ethereumjs-util').isHexPrefixed
+const { isHexPrefixed } = require('ethereumjs-util')
 const ReadOnlyInput = require('./readonly-input')
+const { checksumAddress } = require('../util')
 
 module.exports = connect(mapStateToProps)(QrCodeView)
 
@@ -24,16 +25,16 @@ function QrCodeView () {
 
 QrCodeView.prototype.render = function () {
   const props = this.props
-  const Qr = props.Qr
-  const address = `${isHexPrefixed(Qr.data) ? 'ethereum:' : ''}${Qr.data}`
+  const { message, data } = props.Qr
+  const address = `${isHexPrefixed(data) ? 'ethereum:' : ''}${data}`
   const qrImage = qrCode(4, 'M')
   qrImage.addData(address)
   qrImage.make()
 
   return h('.div.flex-column.flex-center', [
-    Array.isArray(Qr.message)
+    Array.isArray(message)
       ? h('.message-container', this.renderMultiMessage())
-      : Qr.message && h('.qr-header', Qr.message),
+      : message && h('.qr-header', message),
 
     this.props.warning ? this.props.warning && h('span.error.flex-center', {
       style: {
@@ -50,7 +51,7 @@ QrCodeView.prototype.render = function () {
     h(ReadOnlyInput, {
       wrapperClass: 'ellip-address-wrapper',
       inputClass: 'qr-ellip-address',
-      value: Qr.data,
+      value: checksumAddress(data),
     }),
   ])
 }