refresh certifications automatically (#3878)

* certifications: eth.getLogs -> filters

* linting 👕, indentation

* certifications: fetch filter changes

* certifications: prevent overlapping

* certifications: watch blockNumber to refresh

* fix email certification contract

See ethcore/contracts@d86490e302

* update email certification contract

js/package.json

@@ -135,6 +135,7 @@
     "blockies": "0.0.2",
     "brace": "0.9.0",
     "bytes": "2.4.0",
+    "debounce": "1.0.0",
     "es6-error": "4.0.0",
     "es6-promise": "4.0.5",
     "ethereumjs-tx": "1.1.4",

js/src/modals/Verification/email-store.js

@@ -23,7 +23,7 @@ import VerificationStore, {
 } from './store';
 import { postToServer } from '../../3rdparty/email-verification';
 
-const EMAIL_VERIFICATION = 4; // id in the `BadgeReg.sol` contract
+const EMAIL_VERIFICATION = 7; // id in the `BadgeReg.sol` contract
 
 export default class EmailVerificationStore extends VerificationStore {
   @observable email = '';

js/src/redux/providers/certifications/middleware.js

@@ -15,12 +15,41 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import { uniq } from 'lodash';
+import debounce from 'debounce';
 
 import ABI from '~/contracts/abi/certifier.json';
 import Contract from '~/api/contract';
 import Contracts from '~/contracts';
 import { addCertification, removeCertification } from './actions';
 
+// TODO: move this to a more general place
+const updatableFilter = (api, onFilter) => {
+  let filter = null;
+
+  const update = (address, topics) => {
+    if (filter) {
+      filter = filter.then((filterId) => {
+        api.eth.uninstallFilter(filterId);
+      });
+    }
+    filter = (filter || Promise.resolve())
+      .then(() => api.eth.newFilter({
+        fromBlock: 0,
+        toBlock: 'latest',
+        address,
+        topics
+      }))
+      .then((filterId) => {
+        onFilter(filterId);
+        return filterId;
+      })
+      .catch((err) => {
+        console.error('Failed to create certifications filter:', err);
+      });
+  };
+  return update;
+};
+
 export default class CertificationsMiddleware {
   toMiddleware () {
     const api = Contracts.get()._api;
@@ -29,19 +58,9 @@ export default class CertificationsMiddleware {
     const Confirmed = contract.events.find((e) => e.name === 'Confirmed');
     const Revoked = contract.events.find((e) => e.name === 'Revoked');
 
-    let certifiers = [];
+    return (store) => {
-    let accounts = []; // these are addresses
+      const onLogs = (logs) => {
-
+        logs = contract.parseEventLogs(logs);
-    const fetchConfirmedEvents = (dispatch) => {
-      if (certifiers.length === 0 || accounts.length === 0) return;
-      api.eth.getLogs({
-        fromBlock: 0,
-        toBlock: 'latest',
-        address: certifiers.map((c) => c.address),
-        topics: [ [ Confirmed.signature, Revoked.signature ], accounts ]
-      })
-        .then((logs) => contract.parseEventLogs(logs))
-        .then((logs) => {
         logs.forEach((log) => {
           const certifier = certifiers.find((c) => c.address === log.address);
           if (!certifier) {
@@ -50,18 +69,48 @@ export default class CertificationsMiddleware {
           const { id, name, title, icon } = certifier;
 
           if (log.event === 'Revoked') {
-              dispatch(removeCertification(log.params.who.value, id));
+            store.dispatch(removeCertification(log.params.who.value, id));
           } else {
-              dispatch(addCertification(log.params.who.value, id, name, title, icon));
+            store.dispatch(addCertification(log.params.who.value, id, name, title, icon));
           }
         });
-        })
-        .catch((err) => {
-          console.error('Failed to fetch Confirmed events:', err);
-        });
       };
 
-    return (store) => (next) => (action) => {
+      let filter = null;
+
+      const onFilter = (filterId) => {
+        filter = filterId;
+        api.eth.getFilterLogs(filterId)
+          .then(onLogs)
+          .catch((err) => {
+            console.error('Failed to fetch certifier events:', err);
+          });
+      };
+
+      const fetchChanges = debounce(() => {
+        api.eth.getFilterChanges(filter)
+          .then(onLogs)
+          .catch((err) => {
+            console.error('Failed to fetch new certifier events:', err);
+          });
+      }, 10 * 1000, true);
+      api.subscribe('eth_blockNumber', (err) => {
+        if (err) return;
+        fetchChanges();
+      });
+
+      const updateFilter = updatableFilter(api, onFilter);
+      let certifiers = [];
+      let accounts = []; // these are addresses
+
+      const fetchConfirmedEvents = () => {
+        updateFilter(certifiers.map((c) => c.address), [
+          [ Confirmed.signature, Revoked.signature ],
+          accounts
+        ]);
+      };
+
+      return (next) => (action) => {
         switch (action.type) {
           case 'fetchCertifiers':
             badgeReg.certifierCount().then((count) => {
@@ -70,7 +119,7 @@ export default class CertificationsMiddleware {
                   .then((cert) => {
                     if (!certifiers.some((c) => c.id === cert.id)) {
                       certifiers = certifiers.concat(cert);
-                    fetchConfirmedEvents(store.dispatch);
+                      fetchConfirmedEvents();
                     }
                   })
                   .catch((err) => {
@@ -85,19 +134,20 @@ export default class CertificationsMiddleware {
 
             if (!accounts.includes(address)) {
               accounts = accounts.concat(address);
-            fetchConfirmedEvents(store.dispatch);
+              fetchConfirmedEvents();
             }
 
             break;
           case 'setVisibleAccounts':
             const { addresses } = action;
             accounts = uniq(accounts.concat(addresses));
-          fetchConfirmedEvents(store.dispatch);
+            fetchConfirmedEvents();
 
             break;
           default:
             next(action);
         }
       };
+    };
   }
 }

js/src/ui/Certifications/certifications.css

@@ -22,6 +22,7 @@
 .certification {
   display: inline-block;
   position: relative;
+  margin-top: 1em;
   margin-right: .5em;
   padding: .3em .6em .2em 2.6em;
   border-radius: 1em;