Hello World !
In this week of learning was spent in advancement of building our voting Dapp. Starting from where we left off, we see now we made some new navigation pages and a navbar. Each page represent a method of solidity contract let's go thru them one by one. We'll use the same folder approach. Just know one thing we had our own server running locally to connect with our frontend.
1) Candidate [GetCandidateList.jsx , RegisterCandidate.jsx]
We just use const candidateList = await contractInstance.getCandidateList(); to get candidateList and populate it in our state, then show it on screen. In registerCandidate we'll get some candidate data from frontend and hit an endpoint to send it to blockchain.
2) Election Commision
We are yet to write code in it.
3) Voter [GetVoterList.jsx , RegisterVoter.jsx]
We just use const candidateList = await contractInstance.getCandidateList(); in GetVoterList to get list of voters from blockchain and use RegisterVoter.jsx same way as RegisterCandidate.jsx to give data to blockchain via endpoint / server.
4) components / ElectionCommision [AnnounceWinner.jsx , DisplayResult.jsx , EmergencyDeclare.jsx , VotingStatus.jsx , VotingTimePeriod.jsx]
The files just implement the solidity function with the same name. The crux of each file is this : get web3State from context, get contractInstance from it, now use instance to call these functions and get desired data.
5) components / Navigation
You might have guessed it, it's for navigation , just look at it's code.
import { Link } from "react-router-dom";
const Navigation = () =>{
return(
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/register-voter">Register Voter</Link></li>
<li><Link to="/register-candidate">Register Candidate</Link></li>
<li><Link to="/voter-list">Voter List</Link></li>
<li><Link to="/candidate-list">Candidate List</Link></li>
<li><Link to="/election-commision">Election Commision</Link></li>
</ul>
)
}
export default Navigation;
6) components / Voter [castVote.jsx]
Implement castVote method we used in solidity. For getting required data to pass as parameter to the method, let us use frontend to get data from user , i.e, VoterId and CandidateId.
My 2 cents :
Remember to know which contract you used for deployment of contract as we cant use this address to cast vote or stand in election (remember this address will be election commision.).
We can also use remix for deployment but once you close the tab it'll be stopped so refer my proxy article to know how to deploy application on sepolia test network.
Console is your best friend, use it for debugging. When debugging frontend console.log prints data in browser console while it prints in Code editor console (here VS code terminal).
and that's all folks, stay tuned for more.
Top comments (0)