Merge pull request #114 from vbaranov/color-for-vote-scale

(Fix) visualize if validator already voted

src/assets/stylesheets/ballots/base.scss

@@ -106,6 +106,14 @@
     &--vote {
       @extend %_button;
 
+      &-label {
+        cursor: default;
+      }
+
+      &-label-right {
+        margin-left: auto !important;
+      }
+
       &_yes {
         margin-right: 15px;
         background-color: fade-out(#08b3f2, 0.9);

src/assets/stylesheets/vote-scale.scss

@@ -6,6 +6,10 @@
   border-radius: 3px;
   background-color: fade-out(#e5eef9, 0.5);
 
+  &-not-finalized {
+    background-color: #ffffff;
+  }
+
   &--fill {
     height: 100%;
     border-radius: 3px;

src/components/BallotCard.jsx

@@ -34,6 +34,7 @@ export class BallotCard extends React.Component {
     @observable progress;
     @observable totalVoters;
     @observable isFinalized;
+    @observable hasAlreadyVoted;
     @observable memo;
 
     @computed get finalizeButtonDisplayName() {
@@ -191,6 +192,18 @@ export class BallotCard extends React.Component {
         this.creator = fullName ? fullName : _miningKey;
     }
 
+    @action("validator has already voted")
+    getHasAlreadyVoted = async () => {
+        const { contractsStore, id, votingType } = this.props;
+        let _hasAlreadyVoted = false;
+        try {
+            _hasAlreadyVoted = await this.getContract(contractsStore, votingType).hasAlreadyVoted(id, contractsStore.votingKey);
+        } catch(e) {
+            console.log(e.message);
+        }
+        this.hasAlreadyVoted = _hasAlreadyVoted;
+    }
+
     isValidVote = async () => {
         const { contractsStore, id, votingType } = this.props;
         let _isValidVote;
@@ -336,10 +349,12 @@ export class BallotCard extends React.Component {
     constructor(props) {
         super(props);
         this.isFinalized = false;
+        this.hasAlreadyVoted = false;
         this.getTimes();
         this.getCreator();
         this.getTotalVoters();
         this.getProgress();
+        this.getHasAlreadyVoted();
         this.getIsFinalized();
         this.getMemo();
     }
@@ -356,7 +371,7 @@ export class BallotCard extends React.Component {
 
     showCard = () => {
         let { commonStore } = this.props;
-        let checkToFinalizeFilter = commonStore.isToFinalizeFilter ? !this.isFinalized && this.timeToFinish.val == 0 : true;
+        let checkToFinalizeFilter = commonStore.isToFinalizeFilter ? !this.isFinalized && this.timeToFinish.val == 0 && this.timeToStart.val == 0 : true;
         let show = commonStore.isActiveFilter ? !this.isFinalized : checkToFinalizeFilter;
         return show;
     }
@@ -401,6 +416,9 @@ export class BallotCard extends React.Component {
         let { contractsStore, votingType, children, isSearchPattern } = this.props;
         let isFromSearch = (this.isCreatorPattern() || this.isMemoPattern() || isSearchPattern);
         let ballotClass = (this.showCard() && isFromSearch) ? this.isFinalized ? "ballots-i" : "ballots-i ballots-i-not-finalized" : "ballots-i display-none";
+        let voteScaleClass = this.isFinalized ? "vote-scale" : "vote-scale vote-scale-not-finalized";
+        let hasAlreadyVotedLabel = <div className="ballots-i--vote ballots-i--vote-label ballots-i--vote-label-right ballots-i--vote_no">You already voted</div>;
+        let showHasAlreadyVotedLabel = this.hasAlreadyVoted ? hasAlreadyVotedLabel : "";
         const threshold = this.getThreshold(contractsStore, votingType);
         return (
           <div className={ballotClass}>
@@ -432,7 +450,7 @@ export class BallotCard extends React.Component {
                   <p className="vote-scale--value">No</p>
                   <p className="vote-scale--votes">Votes: {this.votesAgainstNumber}</p>
                   <p className="vote-scale--percentage">{this.votesAgainstPercents}%</p>
-                  <div className="vote-scale">
+                  <div className={voteScaleClass}>
                     <div className="vote-scale--fill vote-scale--fill_yes" style={{width: `${this.votesAgainstPercents}%`}}></div>
                   </div>
                 </div>
@@ -442,7 +460,7 @@ export class BallotCard extends React.Component {
                   <p className="vote-scale--value">Yes</p>
                   <p className="vote-scale--votes">Votes: {this.votesForNumber}</p>
                   <p className="vote-scale--percentage">{this.votesForPercents}%</p>
-                  <div className="vote-scale">
+                  <div className={voteScaleClass}>
                     <div className="vote-scale--fill vote-scale--fill_no" style={{width: `${this.votesForPercents}%`}}></div>
                   </div>
                 </div>
@@ -461,7 +479,8 @@ export class BallotCard extends React.Component {
                 <button type="button" onClick={(e) => this.finalize(e)} className={this.finalizeButtonClass}>{this.finalizeButtonDisplayName}</button>
                 <p>{this.finalizeDescription}</p>
               </div>
-              <div type="button" className="ballots-i--vote ballots-i--vote_no">{this.typeName(votingType)} Ballot ID: {this.props.id}</div>
+              {showHasAlreadyVotedLabel}
+              <div className="ballots-i--vote ballots-i--vote-label ballots-i--vote_no">{this.typeName(votingType)} Ballot ID: {this.props.id}</div>
             </div>
           </div>
         );

src/components/Header.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 
 export const Header = ({netId}) => {
-	console.log("netId: ", netId)
 	let headerClassName = netId === '77' ? 'sokol' : '';
 	const logoClassName = netId === '77' ? 'header-logo-sokol' : 'header-logo';
 	return(

src/contracts/VotingToChangeKeys.contract.js

@@ -58,6 +58,10 @@ export default class VotingToChangeKeys {
     return this.votingToChangeKeysInstance.methods.getIsFinalized(_id).call();
   }
 
+  hasAlreadyVoted(_id, votingKey) {
+    return this.votingToChangeKeysInstance.methods.hasAlreadyVoted(_id, votingKey).call();
+  }
+
   isValidVote(_id, votingKey) {
     return this.votingToChangeKeysInstance.methods.isValidVote(_id, votingKey).call();
   }

src/contracts/VotingToChangeMinThreshold.contract.js

@@ -54,6 +54,10 @@ export default class VotingToChangeMinThreshold {
     return this.votingToChangeMinThresholdInstance.methods.getIsFinalized(_id).call();
   }
 
+  hasAlreadyVoted(_id, votingKey) {
+    return this.votingToChangeMinThresholdInstance.methods.hasAlreadyVoted(_id, votingKey).call();
+  }
+
   isValidVote(_id, votingKey) {
     return this.votingToChangeMinThresholdInstance.methods.isValidVote(_id, votingKey).call();
   }

src/contracts/VotingToChangeProxy.contract.js

@@ -54,6 +54,10 @@ export default class VotingToChangeProxy {
     return this.votingToChangeProxyInstance.methods.getIsFinalized(_id).call();
   }
 
+  hasAlreadyVoted(_id, votingKey) {
+    return this.votingToChangeProxyInstance.methods.hasAlreadyVoted(_id, votingKey).call();
+  }
+
   isValidVote(_id, votingKey) {
     return this.votingToChangeProxyInstance.methods.isValidVote(_id, votingKey).call();
   }

src/index.js

@@ -48,14 +48,14 @@ class AppMainRouter extends Component {
 
       await Promise.all([setPoaConsensus, setBallotsStorage, setVotingToChangeKeys, setVotingToChangeMinThreshold, setVotingToChangeProxy, setValidatorMetadata])
 
-      await contractsStore.getAllBallots();
       await contractsStore.setMiningKey(web3Config);
+      await contractsStore.setVotingKey(web3Config);
+      await contractsStore.getAllBallots();
 
       contractsStore.getValidatorsLength();
       contractsStore.getKeysBallotThreshold();
       contractsStore.getMinThresholdBallotThreshold();
       contractsStore.getProxyBallotThreshold();
-      contractsStore.setVotingKey(web3Config);
       contractsStore.getValidatorActiveBallots();
       contractsStore.getAllValidatorMetadata();
       console.log("votingKey", contractsStore.votingKey);