Display QrCode for accounts, addresses & contracts (#4329)

* Display QrCode for accounts, addresses & contracts * Default size 4 * Fix layouts
openethereum · Jan 27, 2017 · aef699e · aef699e
1 parent 5246d51
commit aef699e
Show file tree

Hide file tree

Showing 3 changed files with 117 additions and 38 deletions.
diff --git a/js/src/views/Account/Header/header.css b/js/src/views/Account/Header/header.css
@@ -14,17 +14,30 @@
 /* You should have received a copy of the GNU General Public License
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
-.balances, .tags {
-  clear: both;
-}
 
 .editicon {
   margin-left: 0.5em;
 }
 
-.floatleft {
+.info {
+  margin: 0 156px 0 0;
+}
+
+.identityIcon {
   float: left;
-  margin-bottom: 0.5em;
+  margin-right: -100%;
+}
+
+.qrcode {
+  float: right;
+  margin-top: 1.5em;
+}
+
+.addressline,
+.infoline,
+.uuidline,
+.title {
+  margin-left: 72px;
 }
 
 .addressline,
@@ -50,3 +63,7 @@
   display: inline-block;
   margin-left: .5em;
 }
+
+.tags {
+  clear: both;
+}
diff --git a/js/src/views/Account/Header/header.js b/js/src/views/Account/Header/header.js
@@ -17,9 +17,7 @@
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Balance, Container, ContainerTitle, IdentityIcon, IdentityName, Tags } from '~/ui';
-import CopyToClipboard from '~/ui/CopyToClipboard';
-import Certifications from '~/ui/Certifications';
+import { Balance, Certifications, Container, CopyToClipboard, ContainerTitle, IdentityIcon, IdentityName, QrCode, Tags } from '~/ui';
 
 import styles from './header.css';
 
@@ -53,8 +51,15 @@ export default class Header extends Component {
     return (
       <div className={ className }>
         <Container>
-          <IdentityIcon address={ address } />
-          <div className={ styles.floatleft }>
+          <QrCode
+            className={ styles.qrcode }
+            value={ address }
+          />
+          <IdentityIcon
+            address={ address }
+            className={ styles.identityIcon }
+          />
+          <div className={ styles.info }>
             { this.renderName() }
             <div className={ [ hideName ? styles.bigaddress : '', styles.addressline ].join(' ') }>
               <CopyToClipboard data={ address } />
@@ -65,17 +70,17 @@ export default class Header extends Component {
               { meta.description }
             </div>
             { this.renderTxCount() }
+            <div className={ styles.balances }>
+              <Balance
+                account={ account }
+                balance={ balance }
+              />
+              <Certifications address={ address } />
+            </div>
           </div>
           <div className={ styles.tags }>
             <Tags tags={ meta.tags } />
           </div>
-          <div className={ styles.balances }>
-            <Balance
-              account={ account }
-              balance={ balance }
-            />
-            <Certifications address={ address } />
-          </div>
           { children }
         </Container>
       </div>
@@ -93,6 +98,7 @@ export default class Header extends Component {
 
     return (
       <ContainerTitle
+        className={ styles.title }
         title={
           <IdentityName
             address={ address }

diff --git a/js/src/views/Account/Header/header.spec.js b/js/src/views/Account/Header/header.spec.js
@@ -68,37 +68,93 @@ describe('views/Account/Header', () => {
     });
 
     describe('sections', () => {
-      it('renders the Balance', () => {
-        render({ balance: { balance: 'testing' } });
-        const balance = component.find('Connect(Balance)');
+      describe('Balance', () => {
+        let balance;
 
-        expect(balance).to.have.length(1);
-        expect(balance.props().account).to.deep.equal(ACCOUNT);
-        expect(balance.props().balance).to.deep.equal({ balance: 'testing' });
+        beforeEach(() => {
+          render({ balance: { balance: 'testing' } });
+          balance = component.find('Connect(Balance)');
+        });
+
+        it('renders', () => {
+          expect(balance).to.have.length(1);
+        });
+
+        it('passes the account', () => {
+          expect(balance.props().account).to.deep.equal(ACCOUNT);
+        });
+
+        it('passes the balance', () => {
+
+        });
       });
 
-      it('renders the Certifications', () => {
-        render();
-        const certs = component.find('Connect(Certifications)');
+      describe('Certifications', () => {
+        let certs;
 
-        expect(certs).to.have.length(1);
-        expect(certs.props().address).to.deep.equal(ACCOUNT.address);
+        beforeEach(() => {
+          render();
+          certs = component.find('Connect(Certifications)');
+        });
+
+        it('renders', () => {
+          expect(certs).to.have.length(1);
+        });
+
+        it('passes the address', () => {
+          expect(certs.props().address).to.deep.equal(ACCOUNT.address);
+        });
       });
 
-      it('renders the IdentityIcon', () => {
-        render();
-        const icon = component.find('Connect(IdentityIcon)');
+      describe('IdentityIcon', () => {
+        let icon;
+
+        beforeEach(() => {
+          render();
+          icon = component.find('Connect(IdentityIcon)');
+        });
+
+        it('renders', () => {
+          expect(icon).to.have.length(1);
+        });
 
-        expect(icon).to.have.length(1);
-        expect(icon.props().address).to.equal(ACCOUNT.address);
+        it('passes the address', () => {
+          expect(icon.props().address).to.deep.equal(ACCOUNT.address);
+        });
       });
 
-      it('renders the Tags', () => {
-        render();
-        const tags = component.find('Tags');
+      describe('QrCode', () => {
+        let qr;
+
+        beforeEach(() => {
+          render();
+          qr = component.find('QrCode');
+        });
+
+        it('renders', () => {
+          expect(qr).to.have.length(1);
+        });
+
+        it('passes the address', () => {
+          expect(qr.props().value).to.deep.equal(ACCOUNT.address);
+        });
+      });
+
+      describe('Tags', () => {
+        let tags;
+
+        beforeEach(() => {
+          render();
+          tags = component.find('Tags');
+        });
+
+        it('renders', () => {
+          expect(tags).to.have.length(1);
+        });
 
-        expect(tags).to.have.length(1);
-        expect(tags.props().tags).to.deep.equal(ACCOUNT.meta.tags);
+        it('passes the tags', () => {
+          expect(tags.props().tags).to.deep.equal(ACCOUNT.meta.tags);
+        });
       });
     });
   });