Display AccountCard name via IdentityName (#4235)

* Display AccountCard name via IdentityName

* Pass name through (catches registry reverse display)

js/src/ui/AccountCard/accountCard.js

@@ -19,6 +19,7 @@ import ReactDOM from 'react-dom';
 import keycode from 'keycode';
 
 import IdentityIcon from '~/ui/IdentityIcon';
+import IdentityName from '~/ui/IdentityName';
 import Tags from '~/ui/Tags';
 
 import { fromWei } from '~/api/util/wei';
@@ -41,12 +42,8 @@ export default class AccountCard extends Component {
   render () {
     const { account } = this.props;
     const { copied } = this.state;
-
-    const { address, name, description, meta = {} } = account;
-
-    const displayName = (name && name.toUpperCase()) || address;
+    const { address, description, meta = {}, name } = account;
     const { tags = [] } = meta;
-
     const classes = [ styles.account ];
 
     if (copied) {
@@ -65,12 +62,16 @@ export default class AccountCard extends Component {
         <IdentityIcon address={ address } />
         <div className={ styles.accountInfo }>
           <div className={ styles.accountName }>
-            <span>{ displayName }</span>
+            <IdentityName
+              address={ address }
+              name={ name }
+              unknown
+            />
           </div>
 
           { this.renderTags(tags, address) }
           { this.renderDescription(description) }
-          { this.renderAddress(displayName, address) }
+          { this.renderAddress(address) }
           { this.renderBalance(address) }
         </div>
       </div>
@@ -89,11 +90,7 @@ export default class AccountCard extends Component {
     );
   }
 
-  renderAddress (name, address) {
-    if (name === address) {
-      return null;
-    }
-
+  renderAddress (address) {
     return (
       <div className={ styles.addressContainer }>
         <span

js/src/ui/AccountCard/accountCard.spec.js

@@ -0,0 +1,104 @@
+// Copyright 2015, 2016 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { shallow } from 'enzyme';
+import React from 'react';
+import sinon from 'sinon';
+
+import AccountCard from './';
+
+const TEST_ADDRESS = '0x1234567890123456789012345678901234567890';
+const TEST_NAME = 'Jimmy';
+
+let component;
+let onClick;
+let onFocus;
+
+function render (props = {}) {
+  if (!props.account) {
+    props.account = {
+      address: TEST_ADDRESS,
+      description: 'testDescription',
+      name: TEST_NAME,
+      meta: {}
+    };
+  }
+
+  onClick = sinon.stub();
+  onFocus = sinon.stub();
+
+  component = shallow(
+    <AccountCard
+      { ...props }
+      onClick={ onClick }
+      onFocus={ onFocus }
+    />
+  );
+
+  return component;
+}
+
+describe('ui/AccountCard', () => {
+  beforeEach(() => {
+    render();
+  });
+
+  it('renders defaults', () => {
+    expect(component).to.be.ok;
+  });
+
+  describe('components', () => {
+    describe('IdentityIcon', () => {
+      let icon;
+
+      beforeEach(() => {
+        icon = component.find('Connect(IdentityIcon)');
+      });
+
+      it('renders the icon', () => {
+        expect(icon.length).to.equal(1);
+      });
+
+      it('passes the address through', () => {
+        expect(icon.props().address).to.equal(TEST_ADDRESS);
+      });
+    });
+
+    describe('IdentityName', () => {
+      let name;
+
+      beforeEach(() => {
+        name = component.find('Connect(IdentityName)');
+      });
+
+      it('renders the name', () => {
+        expect(name.length).to.equal(1);
+      });
+
+      it('passes the address through', () => {
+        expect(name.props().address).to.equal(TEST_ADDRESS);
+      });
+
+      it('passes the name through', () => {
+        expect(name.props().name).to.equal(TEST_NAME);
+      });
+
+      it('renders unknown (no name)', () => {
+        expect(name.props().unknown).to.be.true;
+      });
+    });
+  });
+});

js/src/ui/IdentityName/identityName.spec.js

@@ -25,6 +25,7 @@ const ADDR_A = '0x123456789abcdef0123456789A';
 const ADDR_B = '0x123456789abcdef0123456789B';
 const ADDR_C = '0x123456789abcdef0123456789C';
 const ADDR_NULL = '0x0000000000000000000000000000000000000000';
+const NAME_JIMMY = 'Jimmy Test';
 const STORE = {
   dispatch: sinon.stub(),
   subscribe: sinon.stub(),
@@ -53,7 +54,6 @@ function render (props) {
 }
 
 describe('ui/IdentityName', () => {
-  describe('rendering', () => {
   it('renders defaults', () => {
     expect(render({ address: ADDR_A })).to.be.ok;
   });
@@ -79,8 +79,20 @@ describe('ui/IdentityName', () => {
 
     it('renders unknown with flag', () => {
       expect(
-          render({ address: ADDR_C, unknown: true }
-        ).find('FormattedMessage').props().id).to.equal('ui.identityName.unnamed');
+        render({ address: ADDR_C, unknown: true }).find('FormattedMessage').props().id
+      ).to.equal('ui.identityName.unnamed');
+    });
+
+    it('renders name when not found and passed', () => {
+      expect(
+        render({ address: ADDR_C, name: NAME_JIMMY }).text()
+      ).to.equal(NAME_JIMMY.toUpperCase());
+    });
+
+    it('renders name when not found, unknown and passed', () => {
+      expect(
+        render({ address: ADDR_C, name: NAME_JIMMY, unknown: true }).text()
+      ).to.equal(NAME_JIMMY.toUpperCase());
     });
 
     it('renders 0x000...000 as null', () => {
@@ -89,5 +101,4 @@ describe('ui/IdentityName', () => {
       ).to.equal('ui.identityName.null');
     });
   });
-  });
 });