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/ui/Certifications/certifications.css

@@ -0,0 +1,46 @@
+/* Copyright 2015, 2016 Ethcore (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/>.
+*/
+
+.certifications {
+  margin-top: 1em;
+}
+
+.certification {
+  display: inline-block;
+  position: relative;
+  margin-right: .5em;
+  padding: .3em .6em .2em 2.6em;
+  border-radius: 1em;
+  line-height: 1em;
+  text-transform: uppercase;
+  background-color: rgba(255, 255, 255, 0.07);
+}
+
+.certification:last-child {
+  margin-right: 0;
+}
+
+.icon {
+  position: absolute;
+  top: -.25em;
+  left: 0;
+  width: 2em;
+  height: 2em;
+  margin: 0;
+  padding: 0;
+  border-radius: 1em;
+}

js/src/ui/Certifications/certifications.js

@@ -0,0 +1,87 @@
+// Copyright 2015, 2016 Ethcore (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 React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import { hashToImageUrl } from '../../redux/providers/imagesReducer';
+import { fetchCertifications } from '../../redux/providers/certifications/actions';
+
+import defaultIcon from '../../../assets/images/certifications/unknown.svg';
+
+import styles from './certifications.css';
+
+class Certifications extends Component {
+  static propTypes = {
+    account: PropTypes.string.isRequired,
+    certifications: PropTypes.array.isRequired,
+    dappsUrl: PropTypes.string.isRequired,
+
+    fetchCertifications: PropTypes.func.isRequired
+  }
+
+  componentWillMount () {
+    const { account, fetchCertifications } = this.props;
+    fetchCertifications(account);
+  }
+
+  render () {
+    const { certifications } = this.props;
+
+    if (certifications.length === 0) {
+      return null;
+    }
+
+    return (
+      <div className={ styles.certifications }>
+        { certifications.map(this.renderCertification) }
+      </div>
+    );
+  }
+
+  renderCertification = (certification) => {
+    const { name, title, icon } = certification;
+    const { dappsUrl } = this.props;
+
+    const classNames = `${styles.certification} ${!icon ? styles.noIcon : ''}`;
+    const img = icon ? dappsUrl + hashToImageUrl(icon) : defaultIcon;
+    return (
+      <div className={ classNames } key={ name }>
+        <img className={ styles.icon } src={ img } />
+        <div className={ styles.text }>{ title || name }</div>
+      </div>
+    );
+  }
+}
+
+function mapStateToProps (_, initProps) {
+  const { account } = initProps;
+
+  return (state) => {
+    const certifications = state.certifications[account] || [];
+    return { certifications };
+  };
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({ fetchCertifications }, dispatch);
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Certifications);

js/src/ui/Certifications/index.js

@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (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/>.
+
+export default from './certifications';

js/src/ui/index.js

@@ -23,6 +23,7 @@ import Badge from './Badge';
 import Balance from './Balance';
 import BlockStatus from './BlockStatus';
 import Button from './Button';
+import Certifications from './Certifications';
 import ConfirmDialog from './ConfirmDialog';
 import Container, { Title as ContainerTitle } from './Container';
 import ContextProvider from './ContextProvider';
@@ -55,6 +56,7 @@ export {
   Balance,
   BlockStatus,
   Button,
+  Certifications,
   ConfirmDialog,
   Container,
   ContainerTitle,