Validator upvoting for DPOS

components/nav.js

@@ -44,7 +44,10 @@ class Nav extends React.Component {
                                     <a href="/ask" className={this.props.path === '/ask' ? 'active': ''}>Ask</a>
                                 </li>
                                 <li className="list-inline-item">
-                                    <a href="/submit">Submit</a>
+                                    <a href="/submit" className={this.props.path === '/submit' ? 'active': ''}>Submit</a>
+                                </li>
+                                <li className="list-inline-item">
+                                    <a href="/validators" className={this.props.path === '/validators' ? 'active': ''}>Validators</a>
                                 </li>
                             </ul>
                         </div>

components/validatorupvote.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import makeRPC from '../utils/rpcUtils'
+import encoding from '../utils/encoding'
+
+class ValidatorUpvote extends React.Component {
+    render() {
+        return (
+            <button className="upvote-btn" onClick={this.props.upvote}>
+                <i className={"mdi mdi-arrow-up-drop-circle-outline"}></i>
+            </button>
+        )
+    }
+}
+
+export default ValidatorUpvote

pages/validators.js

@@ -0,0 +1,85 @@
+import Link from 'next/link'
+import React from 'react'
+import Nav from '../components/nav'
+import encoding from '../utils/encoding'
+import makeRPC from '../utils/rpcUtils'
+import bson from 'bson'
+import Helmet from 'react-helmet'
+import ajaxUtils from '../utils/ajaxUtils';
+import ValidatorUpvote from "../components/validatorupvote";
+
+class Validators extends React.Component {
+    static async getInitialProps({ req }) {
+      const validators = await ajaxUtils.getValidators();
+      return { validators };
+    }
+
+    constructor(props, context) {
+        super(props, context);
+        this.state = { validators: props.validators };
+    }
+
+    async componentDidMount() {
+      const key = localStorage.getItem('mintPK');
+
+        if (!key) {
+            window.location.href = '/signup';
+            return;
+        }
+
+        const secret = encoding.hex2ab(key);
+        const publicKey = encoding.toHexString(nacl.sign.keyPair.fromSecretKey(secret).publicKey).toUpperCase();
+        const user = await ajaxUtils.loadUser(publicKey);
+
+        if (!user) {
+            window.location.href = '/signup';
+            return;
+        }
+
+        this.setState({ user });
+    }
+
+    upvoteValidator = (vid) => {
+      const secret = encoding.hex2ab(localStorage.getItem('mintPK')),
+          publicKey = nacl.util.encodeBase64(nacl.sign.keyPair.fromSecretKey(secret).publicKey);
+      const txBody = {
+        type: "upvoteValidator",
+        entity: {
+          vid: vid,
+          stamp: new Date().getTime(),
+        }
+      };
+      makeRPC(txBody, publicKey, secret, async () => {
+        const validators = await ajaxUtils.getValidators();
+        this.setState({ validators: validators });
+      });
+    }
+
+    render() {
+        return (
+            <div>
+                <Nav user={this.state.user} />
+                <Helmet title="Validators" />
+                <div className="post-list">
+                  <div className="container">
+                      {this.state.validators.map(v =>
+                        <div className="single-post" key={v._id}>
+                          <div className="d-flex flex-row align-items-top">
+                            <div className="upvote-wrap">
+                              <ValidatorUpvote upvote={() => this.upvoteValidator(v.vid)} />
+                            </div>
+                            <div>
+                              <p>Public Key: {v.pubKey}</p>
+                              <p>Power: {v.power}</p>
+                            </div>
+                          </div>
+                        </div>
+                      )}
+                  </div>
+                </div>
+            </div>
+        )
+    }
+}
+
+export default Validators;

routes.js

@@ -1,13 +1,14 @@
 module.exports = () => {
-    return {
-      '/': { page: '/index' },
-      '/newest': { page: '/index' },
-      '/about': { page: '/about' },
-      '/show': { page: '/index' },
-      '/ask': { page: '/index' },
-      '/signup': { page: '/signup' },
-      '/submit': { page: '/submit' },
-      '/post': { page: '/post' },
-      '/comment-reply': { page: '/commentreply' }
-    }
+  return {
+    '/': { page: '/index' },
+    '/newest': { page: '/index' },
+    '/about': { page: '/about' },
+    '/show': { page: '/index' },
+    '/ask': { page: '/index' },
+    '/submit': { page: '/submit' },
+    '/validators': { page: '/validators' },
+    '/signup': { page: '/signup' },
+    '/post': { page: '/post' },
+    '/comment-reply': { page: '/commentreply' }
+  }
 }

routes/site.routes.js

@@ -1,6 +1,6 @@
 const express = require('express');
 const router = express.Router();
-const dbUtil = require('../db'); 
+const dbUtil = require('../db');
 const async = require('async');
 const ObjectId = require('mongodb').ObjectId;
 const _  = require('lodash');
@@ -19,11 +19,11 @@ function unflatten( array, parent, tree ){
 
     if( !_.isEmpty( children )  ){
         if(!parent._id){
-           tree = children;   
+           tree = children;
         }else{
            parent['comments'] = children;
         }
-        _.each( children, function( child ){ unflatten( array, child ) } );                    
+        _.each( children, function( child ){ unflatten( array, child ) } );
     }
 
     return tree;
@@ -56,7 +56,7 @@ router.route('/ajax/get-posts').get((req, res) => {
             db.collection('users').findOne({ _id: post.author }, function(err, user){
                 post.author = user;
                 cb(null, post);
-            });           
+            });
         }, (err, result) => {
             res.json({ posts: result });
         });
@@ -170,4 +170,12 @@ router.route('/ajax/get-comment-upvote-status').get((req, res) => {
     });
 });
 
+router.route('/ajax/validators').get((req, res) => {
+    const db = dbUtil.getDB();
+    const id = req.query.id;
+    db.collection('validators').find({}).toArray((err, docs) => {
+        res.json(docs);
+    });
+});
+
 module.exports = router;

utils/ajaxUtils.js

@@ -19,15 +19,15 @@ export default {
         else if (path === '/ask') {
           url += '?type=askUH';
         }
-        
+
         const response = await fetch(url, {
             method: 'GET',
             headers: {
               'Content-Type': 'application/json'
             },
             credentials: 'same-origin'
           });
-        
+
           const data = await response.json();
           return data.posts;
     },
@@ -39,7 +39,7 @@ export default {
           },
           credentials: 'same-origin'
         });
-    
+
         const data = await response.json();
         return data.user;
     },
@@ -51,7 +51,7 @@ export default {
         },
         credentials: 'same-origin'
       });
-  
+
       const data = await response.json();
       return data.status;
     },
@@ -63,7 +63,7 @@ export default {
         },
         credentials: 'same-origin'
       });
-  
+
       const data = await response.json();
       return data.status;
     },
@@ -75,7 +75,7 @@ export default {
         },
         credentials: 'same-origin'
       });
-  
+
       const data = await response.json();
       return data.post;
     },
@@ -87,8 +87,20 @@ export default {
         },
         credentials: 'same-origin'
       });
-  
+
       const data = await response.json();
       return data.comment;
+    },
+    getValidators: async () => {
+      const response = await fetch(publicRuntimeConfig.baseUrl + '/ajax/validators', {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        credentials: 'same-origin'
+      });
+
+      const data = await response.json();
+      return data;
     }
 }