implement basic badges/certifications/flair (#3665)

* sms verification: Certifications component

* sms verification: actions & reducers for certifications

* sms verification: put Certifications component into place

* sms verification: show certification icons

* sms verification: show certification titles

* sms verification: default icon for certifications

* sms verificaiton: lint issue 👕, fix testnet detection

The sms verification store got created when `isTestnet` (from the
Redux state) was still `undefined`.

* move certification helpers into middleware file

* connect Certifications to Redux

* don't pass certifications as prop

* move default certification icon into assets

* separate file for BadgeReg.sol

* don't pass certifications as prop

* Fix import name

* make BadgeReg a class

* make certifications middleware a class

* Certifications: pass in certifications of account

js/src/views/Account/Header/header.js

@@ -18,6 +18,7 @@ import React, { Component, PropTypes } from 'react';
 
 import { Balance, Container, ContainerTitle, IdentityIcon, IdentityName, Tags } from '../../../ui';
 import CopyToClipboard from '../../../ui/CopyToClipboard';
+import Certifications from '../../../ui/Certifications';
 
 import styles from './header.css';
 
@@ -32,6 +33,7 @@ export default class Header extends Component {
   }
 
   render () {
+    const { api } = this.context;
     const { account, balance } = this.props;
     const { address, meta, uuid } = account;
 
@@ -67,6 +69,10 @@ export default class Header extends Component {
             <Balance
               account={ account }
               balance={ balance } />
+            <Certifications
+              account={ account.address }
+              dappsUrl={ api.dappsUrl }
+            />
           </div>
         </Container>
       </div>

js/src/views/Account/account.js

@@ -64,12 +64,6 @@ class Account extends Component {
   }
 
   componentDidMount () {
-    const { api } = this.context;
-    const { address } = this.props.params;
-    const { isTestnet } = this.props;
-
-    const verificationStore = new VerificationStore(api, address, isTestnet);
-    this.setState({ verificationStore });
     this.setVisibleAccounts();
   }
 
@@ -80,6 +74,15 @@ class Account extends Component {
     if (prevAddress !== nextAddress) {
       this.setVisibleAccounts(nextProps);
     }
+
+    const { isTestnet } = nextProps;
+    if (typeof isTestnet === 'boolean' && !this.state.verificationStore) {
+      const { api } = this.context;
+      const { address } = nextProps.params;
+      this.setState({
+        verificationStore: new VerificationStore(api, address, isTestnet)
+      });
+    }
   }
 
   componentWillUnmount () {
@@ -115,7 +118,8 @@ class Account extends Component {
         <Page>
           <Header
             account={ account }
-            balance={ balance } />
+            balance={ balance }
+          />
           <Transactions
             accounts={ accounts }
             address={ address } />

js/src/views/Contract/contract.js

@@ -132,7 +132,8 @@ class Contract extends Component {
         <Page>
           <Header
             account={ account }
-            balance={ balance } />
+            balance={ balance }
+          />
           <Queries
             contract={ contract }
             values={ queryValues } />
@@ -447,7 +448,10 @@ function mapStateToProps (state) {
 }
 
 function mapDispatchToProps (dispatch) {
-  return bindActionCreators({ newError, setVisibleAccounts }, dispatch);
+  return bindActionCreators({
+    newError,
+    setVisibleAccounts
+  }, dispatch);
 }
 
 export default connect(