show certifications in accounts list

js/src/views/Accounts/List/list.js

@@ -15,13 +15,16 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
 
 import { Container } from '~/ui';
+import { fetchCertifiers, fetchCertifications } from '~/redux/providers/certifications/actions';
 
 import Summary from '../Summary';
 import styles from './list.css';
 
-export default class List extends Component {
+class List extends Component {
   static propTypes = {
     accounts: PropTypes.object,
     walletsOwners: PropTypes.object,
@@ -31,7 +34,11 @@ export default class List extends Component {
     empty: PropTypes.bool,
     order: PropTypes.string,
     orderFallback: PropTypes.string,
-    handleAddSearchToken: PropTypes.func
+    certifications: PropTypes.object.isRequired,
+
+    handleAddSearchToken: PropTypes.func,
+    fetchCertifiers: PropTypes.func.isRequired,
+    fetchCertifications: PropTypes.func.isRequired
   };
 
   render () {
@@ -42,6 +49,14 @@ export default class List extends Component {
     );
   }
 
+  componentWillMount () {
+    const { fetchCertifiers, accounts, fetchCertifications } = this.props;
+    fetchCertifiers();
+    for (let address in accounts) {
+      fetchCertifications(address);
+    }
+  }
+
   renderAccounts () {
     const { accounts, balances, link, empty, handleAddSearchToken, walletsOwners } = this.props;
 
@@ -72,7 +87,9 @@ export default class List extends Component {
             account={ account }
             balance={ balance }
             owners={ owners }
-            handleAddSearchToken={ handleAddSearchToken } />
+            handleAddSearchToken={ handleAddSearchToken }
+            showCertifications
+          />
         </div>
       );
     });
@@ -207,3 +224,20 @@ export default class List extends Component {
       });
   }
 }
+
+function mapStateToProps (state) {
+  const { certifications } = state;
+  return { certifications };
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({
+    fetchCertifiers,
+    fetchCertifications
+  }, dispatch);
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(List);

js/src/views/Accounts/Summary/summary.js

@@ -20,6 +20,7 @@ import { isEqual } from 'lodash';
 import ReactTooltip from 'react-tooltip';
 
 import { Balance, Container, ContainerTitle, IdentityIcon, IdentityName, Tags, Input } from '~/ui';
+import Certifications from '~/ui/Certifications';
 import { nullableProptype } from '~/util/proptypes';
 
 import styles from '../accounts.css';
@@ -35,12 +36,14 @@ export default class Summary extends Component {
     link: PropTypes.string,
     name: PropTypes.string,
     noLink: PropTypes.bool,
+    showCertifications: PropTypes.bool,
     handleAddSearchToken: PropTypes.func,
     owners: nullableProptype(PropTypes.array)
   };
 
   static defaultProps = {
-    noLink: false
+    noLink: false,
+    showCertifications: false
   };
 
   shouldComponentUpdate (nextProps) {
@@ -107,6 +110,7 @@ export default class Summary extends Component {
 
         { this.renderOwners() }
         { this.renderBalance() }
+        { this.renderCertifications() }
       </Container>
     );
   }
@@ -172,4 +176,15 @@ export default class Summary extends Component {
       <Balance balance={ balance } />
     );
   }
+
+  renderCertifications () {
+    const { showCertifications, account } = this.props;
+    if (!showCertifications) {
+      return null;
+    }
+
+    return (
+      <Certifications account={ account.address } />
+    );
+  }
 }