Add card id + have live clockwatch

jsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+      "experimentalDecorators": true
+  }
+}

package-lock.json

@@ -4588,6 +4588,13 @@
             }
           }
         },
+        "string_decoder": {
+          "version": "1.0.1",
+          "bundled": true,
+          "requires": {
+            "safe-buffer": "5.0.1"
+          }
+        },
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
@@ -4597,13 +4604,6 @@
             "strip-ansi": "3.0.1"
           }
         },
-        "string_decoder": {
-          "version": "1.0.1",
-          "bundled": true,
-          "requires": {
-            "safe-buffer": "5.0.1"
-          }
-        },
         "stringstream": {
           "version": "0.0.5",
           "bundled": true,
@@ -10293,6 +10293,14 @@
       "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
       "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM="
     },
+    "string_decoder": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
+      "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
+      "requires": {
+        "safe-buffer": "5.1.1"
+      }
+    },
     "string-length": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/string-length/-/string-length-1.0.1.tgz",
@@ -10335,14 +10343,6 @@
         "function-bind": "1.1.1"
       }
     },
-    "string_decoder": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
-      "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
-      "requires": {
-        "safe-buffer": "5.1.1"
-      }
-    },
     "stringstream": {
       "version": "0.0.5",
       "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",

src/App.js

@@ -38,9 +38,10 @@ class App extends Component {
     const { commonStore } = this.props;
     const currentPath = this.props.location.pathname;
     let showNavPan = 
-    currentPath == `${commonStore.rootPath}` 
-    || currentPath == `${commonStore.rootPath}/`
-    || currentPath == `${commonStore.rootPath}/active`;
+    currentPath === `${commonStore.rootPath}` 
+    || currentPath === "/"
+    || currentPath === `${commonStore.rootPath}/`
+    || currentPath === `${commonStore.rootPath}/active`;
     return showNavPan;
   }
 
@@ -61,6 +62,7 @@ class App extends Component {
         {loading}
         <Header />
         {nav}
+        <Route exact path={`/`} render={this.onBallotsRender}/>
         <Route exact path={`${commonStore.rootPath}/`} render={this.onBallotsRender}/>
         <Route exact path={`${commonStore.rootPath}/active`} render={this.onActiveBallotsRender}/>
         <Route path={`${commonStore.rootPath}/new`} render={this.onNewBallotRender}/>

src/assets/App.css

@@ -772,7 +772,11 @@ button {
 
 .ballots-footer {
   display: flex;
-  align-items: center; }
+  align-items: center;
+  justify-content: space-between; }
+  .ballots-footer-left {
+    display: inline-flex;
+    align-items: center; }
   @media screen and (max-width: 768px) {
     .ballots-footer {
       padding-top: 20px; } }

src/assets/stylesheets/ballots/footer.scss

@@ -1,7 +1,12 @@
 .ballots-footer {
   display: flex;
   align-items: center;
+  justify-content: space-between;
 
+  &-left {
+    display: inline-flex;
+    align-items: center;
+  }
   @media screen and (max-width: $tablet-width) {
     padding-top: $tablet-indent;
   }

src/components/BallotKeysCard.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import moment from 'moment';
-import { observable, action, computed } from "mobx";
+import { observable, action, computed, autorun } from "mobx";
 import { inject, observer } from "mobx-react";
 import { toAscii } from "../helpers";
 import { constants } from "../constants";
@@ -265,6 +265,15 @@ export class BallotKeysCard extends React.Component {
     this.getProgress();
     this.getIsFinalized();
   }
+  componentDidMount() {
+    this.interval = setInterval(() => {
+      this.calcTimeToFinish()
+    }, 1000)
+  }
+
+  componentWillUnmount() {
+    window.clearInterval(this.interval);
+  }
 
   hideCard = () => {
     let { commonStore } = this.props;
@@ -360,8 +369,11 @@ export class BallotKeysCard extends React.Component {
         </div>
         <hr />
         <div className="ballots-footer">
-          <button type="button" onClick={(e) => this.finalize(e)} className="ballots-footer-finalize">Finalize ballot</button>
-          <p>{constants.CARD_FINALIZE_DESCRIPTION}</p>
+          <div className="ballots-footer-left">
+            <button type="button" onClick={(e) => this.finalize(e)} className="ballots-footer-finalize">Finalize ballot</button>
+            <p>{constants.CARD_FINALIZE_DESCRIPTION}</p>
+          </div>
+          <div type="button" className="ballots-i--vote ballots-i--vote_no">Ballot ID: {this.props.id}</div>
         </div>
       </div>
     );

src/contracts/addresses.js

@@ -1,11 +1,11 @@
-const local = {
-    VOTING_TO_CHANGE_KEYS_ADDRESS: '0x758492834ed6454f41d6d3d6b73d6e46d4555429',
-    VOTING_TO_CHANGE_MIN_THRESHOLD: '0xcbf043db3498b5064bd62341be0c0e3fb0344b1b',
-    VOTING_TO_CHANGE_PROXY: '0xcb3f870269a3f7215eb87d9548ee5b7eff6396dd',
-    BALLOTS_STORAGE_ADDRESS: '0x144947d78b932ea0dff14d75e1f7cd1b2f131426',
-    METADATA_ADDRESS: '0x3111c94b9243a8a99d5a867e00609900e437e2c0',
-    POA_ADDRESS: '0xf472e0e43570b9afaab67089615080cf7c20018d',
-}
+// const local = {
+//     VOTING_TO_CHANGE_KEYS_ADDRESS: '0x758492834ed6454f41d6d3d6b73d6e46d4555429',
+//     VOTING_TO_CHANGE_MIN_THRESHOLD: '0xcbf043db3498b5064bd62341be0c0e3fb0344b1b',
+//     VOTING_TO_CHANGE_PROXY: '0xcb3f870269a3f7215eb87d9548ee5b7eff6396dd',
+//     BALLOTS_STORAGE_ADDRESS: '0x144947d78b932ea0dff14d75e1f7cd1b2f131426',
+//     METADATA_ADDRESS: '0x3111c94b9243a8a99d5a867e00609900e437e2c0',
+//     POA_ADDRESS: '0xf472e0e43570b9afaab67089615080cf7c20018d',
+// }
 
 const CORE_ADDRESSES = {
     VOTING_TO_CHANGE_KEYS_ADDRESS: '0x49df4ec19243263e5db22da5865b4f482b8323a0',
@@ -30,9 +30,9 @@ module.exports = (netId) => {
         case '77':
             return SOKOL_ADDRESSES
         case '99':
-            return local
+            return CORE_ADDRESSES
         default:
-            return local
+            return CORE_ADDRESSES
     }
 }
 

src/getWeb3.js

@@ -29,7 +29,7 @@ let getWeb3 = () => {
               errorMsg = constants.WRONG_NETWORK_MSG
               console.log('This is an unknown network.', netId)
           }
-          document.title = `${netIdName} - POA governance dApp`
+          document.title = `${netIdName} - POA Network Governance DApp`
           var defaultAccount = web3.eth.defaultAccount || null;
           if(defaultAccount === null){
             reject({message: constants.NO_METAMASK_MSG})

src/stores/ContractsStore.js

@@ -19,7 +19,6 @@ import "babel-polyfill";
 
 class ContractsStore {
 	@observable activeKeysBallotsIDs;
-	@observable validatorLimits;
 	@observable poaConsensus;
 	@observable ballotsStorage;
 	@observable votingToChangeKeys;