Merge pull request #3768 from ethcore/jr-use-badge-reg

get certifications from BadgeReg, show them in accounts overview

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

@@ -23,10 +23,6 @@ import Certifications from '~/ui/Certifications';
 import styles from './header.css';
 
 export default class Header extends Component {
-  static contextTypes = {
-    api: PropTypes.object
-  };
-
   static propTypes = {
     account: PropTypes.object,
     balance: PropTypes.object,
@@ -44,7 +40,6 @@ export default class Header extends Component {
   };
 
   render () {
-    const { api } = this.context;
     const { account, balance, className, children, hideName } = this.props;
     const { address, meta, uuid } = account;
 
@@ -85,7 +80,6 @@ export default class Header extends Component {
               balance={ balance } />
             <Certifications
               account={ account.address }
-              dappsUrl={ api.dappsUrl }
             />
           </div>
           { children }

js/src/views/Account/account.js

@@ -31,6 +31,7 @@ import shapeshiftBtn from '~/../assets/images/shapeshift-btn.png';
 import Header from './Header';
 import Transactions from './Transactions';
 import { setVisibleAccounts } from '~/redux/providers/personalActions';
+import { fetchCertifiers, fetchCertifications } from '~/redux/providers/certifications/actions';
 
 import SMSVerificationStore from '~/modals/Verification/sms-store';
 import EmailVerificationStore from '~/modals/Verification/email-store';
@@ -44,6 +45,8 @@ class Account extends Component {
 
   static propTypes = {
     setVisibleAccounts: PropTypes.func.isRequired,
+    fetchCertifiers: PropTypes.func.isRequired,
+    fetchCertifications: PropTypes.func.isRequired,
     images: PropTypes.object.isRequired,
 
     params: PropTypes.object,
@@ -63,6 +66,7 @@ class Account extends Component {
   }
 
   componentDidMount () {
+    this.props.fetchCertifiers();
     this.setVisibleAccounts();
   }
 
@@ -80,9 +84,10 @@ class Account extends Component {
   }
 
   setVisibleAccounts (props = this.props) {
-    const { params, setVisibleAccounts } = props;
+    const { params, setVisibleAccounts, fetchCertifications } = props;
     const addresses = [ params.address ];
     setVisibleAccounts(addresses);
+    fetchCertifications(params.address);
   }
 
   render () {
@@ -353,7 +358,9 @@ function mapStateToProps (state) {
 
 function mapDispatchToProps (dispatch) {
   return bindActionCreators({
-    setVisibleAccounts
+    setVisibleAccounts,
+    fetchCertifiers,
+    fetchCertifications
   }, dispatch);
 }
 

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

@@ -15,22 +15,29 @@
 // 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,
     balances: PropTypes.object,
-    link: PropTypes.string,
-    search: PropTypes.array,
+    certifications: PropTypes.object.isRequired,
     empty: PropTypes.bool,
+    link: PropTypes.string,
     order: PropTypes.string,
     orderFallback: PropTypes.string,
+    search: PropTypes.array,
+    walletsOwners: PropTypes.object,
+
+    fetchCertifiers: PropTypes.func.isRequired,
+    fetchCertifications: PropTypes.func.isRequired,
     handleAddSearchToken: PropTypes.func
   };
 
@@ -42,8 +49,16 @@ export default class List extends Component {
     );
   }
 
+  componentWillMount () {
+    const { accounts, fetchCertifiers, fetchCertifications } = this.props;
+    fetchCertifiers();
+    for (let address in accounts) {
+      fetchCertifications(address);
+    }
+  }
+
   renderAccounts () {
-    const { accounts, balances, link, empty, handleAddSearchToken, walletsOwners } = this.props;
+    const { accounts, balances, empty, link, walletsOwners, handleAddSearchToken } = this.props;
 
     if (empty) {
       return (
@@ -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

@@ -21,6 +21,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';
@@ -36,12 +37,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) {
@@ -115,6 +118,7 @@ export default class Summary extends Component {
 
         { this.renderOwners() }
         { this.renderBalance() }
+        { this.renderCertifications() }
       </Container>
     );
   }
@@ -181,4 +185,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 } />
+    );
+  }
 }