A Voting DAPP on PARASTATE TestNet

Step 1: Setting up Metamask

Install MetaMask extension using Google Chrome browser. (!Important)
Step 2: Adding a Custom RPC Endpoint
Go to the Networks, then Custom RPC to connect to the ParaState TestNet.
The example below shows the configuration

Click now on the Save button and your configuration should be done!

Step 3: Open the BUIDL IDE tool in any browser. http://buidl.secondstate.io/

Step 4: Add some test STATE token in your wallet using the official ParaState test net faucet http://faucet.parastate.io.

Note: These token are only for testing purpose, they have no value on MainNet or any Exchange.

ALL SET :)
Now, Start Coding
Step 4.1 :
You can Choose Compile version(Not Necessary).
It provides the text and image URL to be voted on and keeps a record of votes. The vote() the method is called by voters to vote thumb up or down.

pragma solidity ^0.4.26;
contract Vote {
string public greeting;
string public photoUrl;
mapping (address => int) votes;
uint ups;
uint downs;
constructor(string _greeting, string _photoUrl) public {
greeting = _greeting;
photoUrl = _photoUrl;
}
function vote (int _choice) public {
require (votes[msg.sender] == 0);
require (_choice == 1 || _choice == -1);
votes[msg.sender] = _choice;
if (_choice == 1) ups++;
if (_choice == -1) downs++;
}
function getVotes () view public returns (uint, uint) {
return (ups, downs);
}
function getVote (address _addr) view public returns (int) {
return votes[_addr];
}
}

Then Next, copy and paste the following HTML code into the HTML editor.

<div class=”container”>
 <br/>
 <div class=”jumbotron”>
 <p class=”lead” id=”greeting”></p>
 <div id=”imageDiv” style=”display:none”>
 <img id=”image” src=”” class=”img-fluid img-thumbnail”/>
 </div>
 <hr/>
 <p id=”votes” style=”display:none”>
 <span id=”ups”></span> voted 👍 |
 <span id=”downs”></span> voted 👎
 </p>
 <form id=”form” class=”form-inline” style=”display:none”>
 <button id=”voteUp” type=”button” onclick=”return vote(1);” class=”btn btn-secondary mb-2">👍</button>
 <button id=”voteDown” type=”button” onclick=”return vote(-1);” class=”btn btn-secondary mb-2">👎</button>
 </form>
 <div id=”formSubmitted” style=”display:none”>Please wait 2 seconds …</div>
 <div id=”myVoteUp” style=”display:none”>You have already voted 👍</div>
 <div id=”myVoteDown” style=”display:none”>You have already voted 👎</div>
 </div>
</div>

Then, Copy and paste the following JavaScript code into the JS editor.

var instance = null;
window.addEventListener(‘web3Ready’, function() {
 var contract = web3.ss.contract(abi);
 instance = contract.at(cAddr);
 reload();
});
function reload() {
 instance.greeting(function (e, r) {
 $(“#greeting”).html(r);
 });
 instance.photoUrl(function (e, r) {
 if (!e && r) {
 $(“#imageDiv”).css(“display”, “block”);
 $(“#image”).attr(“src”, r);
 }
 });
 instance.getVotes(function (e, r) {
 if (!e && (r[0] > 0 || r[1] > 0)) {
 $(“#votes”).css(“display”, “block”);
 $(“#ups”).text(r[0]);
 $(“#downs”).text(r[1]);
 }
 });
$(“#form”).css(“display”, “none”);
 $(“#formSubmitted”).css(“display”, “none”);
 web3.ss.getAccounts(function (e, address) {
 if (!e) {
 instance.getVote(address, function (ee, r) {
 if (r == 1) {
 $(“#myVoteUp”).css(“display”, “block”);
 } else if (r == -1) {
 $(“#myVoteDown”).css(“display”, “block”);
 } else {
 $(“#form”).css(“display”, “block”);
 }
 });
 }
 });
}
function vote (choice) {
 web3.ss.getAccounts(function (e, address) {
 if (!e) {
 $(“#form”).css(“display”, “none”);
 $(“#formSubmitted”).css(“display”, “block”);
 instance.vote(choice, function (ee, result) {
 if (ee) {
 window.alert(“Failed for “ + address);
 }
 });
 setTimeout(function () {
 reload ();
 }, 2 * 1000);
 }
 });
 return false;
}

Click on Run to see the dapp in action! You can now vote thumb up or down inside BUIDL.

Just click on the Publish button and give the dapp a name. Once published, you can share the published URL with the public to vote

Finish. Congratulation You Build your First DAPP.