compute and display checksummed hash in selected-account component (#5255)

2 files changed, 20 insertions, 3 deletions

diff --git a/ui/app/components/selected-account/selected-account.component.js b/ui/app/components/selected-account/selected-account.component.js
index 55b935ee0..4f98df9b6 100644
--- a/ui/app/components/selected-account/selected-account.component.js
+++ b/ui/app/components/selected-account/selected-account.component.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import copyToClipboard from 'copy-to-clipboard'
-import { addressSlicer } from '../../util'
+import { addressSlicer, checksumAddress } from '../../util'
 
 const Tooltip = require('../tooltip-v2.js').default
 
@@ -22,6 +22,7 @@ class SelectedAccount extends Component {
   render () {
     const { t } = this.context
     const { selectedAddress, selectedIdentity } = this.props
+    const checksummedAddress = checksumAddress(selectedAddress)
 
     return (
       <div className="selected-account">
@@ -34,14 +35,14 @@ class SelectedAccount extends Component {
             onClick={() => {
               this.setState({ copied: true })
               setTimeout(() => this.setState({ copied: false }), 3000)
-              copyToClipboard(selectedAddress)
+              copyToClipboard(checksummedAddress)
             }}
           >
             <div className="selected-account__name">
               { selectedIdentity.name }
             </div>
             <div className="selected-account__address">
-              { addressSlicer(selectedAddress) }
+              { addressSlicer(checksummedAddress) }
             </div>
           </div>
         </Tooltip>
diff --git a/ui/app/components/selected-account/tests/selected-account-component.test.js b/ui/app/components/selected-account/tests/selected-account-component.test.js
new file mode 100644
index 000000000..78a94d1c8
--- /dev/null
+++ b/ui/app/components/selected-account/tests/selected-account-component.test.js
@@ -0,0 +1,16 @@
+import React from 'react'
+import assert from 'assert'
+import { render } from 'enzyme'
+import SelectedAccount from '../selected-account.component'
+
+describe('SelectedAccount Component', () => {
+  it('should render checksummed address', () => {
+    const wrapper = render(<SelectedAccount
+      selectedAddress="0x1b82543566f41a7db9a9a75fc933c340ffb55c9d"
+      selectedIdentity={{ name: 'testName' }}
+    />, { context: { t: () => {}}})
+    // Checksummed version of address is displayed
+    assert.equal(wrapper.find('.selected-account__address').text(), '0x1B82...5C9D')
+    assert.equal(wrapper.find('.selected-account__name').text(), 'testName')
+  })
+})