Celo: Build a simple voting DApp with Foundry, Next.js, and Web3.js

// SPDX-License-Identifier: MIT

// Celo only supports up to 0.8.19 due to the new Push0 opcode
pragma solidity >=0.8.0 <=0.8.19;

/// @title A simple voting contract
/// @notice This contract allows users to vote for pre-defined candidates
/// @dev This contract uses mappings to store candidate and voter information
contract Voting {
    struct Candidate {
        string name;
        uint voteCount;
    }

    mapping(uint => Candidate) public candidates;
    mapping(address => bool) public voters;
    uint public candidatesCount;

    event CandidateAdded(uint indexed candidateId, string name);
    event Voted(address indexed voter, uint indexed candidateId);

    /// @notice Constructor to initialize the contract with default candidates
    constructor() {
        addCandidate("Luna");
        addCandidate("Orion");
    }

    /// @notice Adds a new candidate to the candidates list
    /// @dev This function is private and can only be called within the contract
    /// @param _name The name of the candidate to add
    function addCandidate(string memory _name) private {
        candidatesCount++;
        candidates[candidatesCount] = Candidate(_name, 0);
        emit CandidateAdded(candidatesCount, _name);
    }

    /// @notice Allows a user to vote for a candidate
    /// @dev This function checks if the voter has already voted and if the candidate ID is valid
    /// @param _candidateId The ID of the candidate to vote for
    function vote(uint _candidateId) public {
        require(!voters[msg.sender], "Already voted.");
        require(
            _candidateId > 0 && _candidateId <= candidatesCount,
            "Invalid candidate."
        );

        voters[msg.sender] = true;
        candidates[_candidateId].voteCount++;
        emit Voted(msg.sender, _candidateId);
    }

    /// @notice Returns the name and vote count of a candidate
    /// @dev This function retrieves candidate information based on the candidate ID
    /// @param _candidateId The ID of the candidate to retrieve
    /// @return name The name of the candidate
    /// @return voteCount The vote count of the candidate
    function getCandidate(
        uint _candidateId
    ) public view returns (string memory name, uint voteCount) {
        Candidate memory candidate = candidates[_candidateId];
        return (candidate.name, candidate.voteCount);
    }
}

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.19;

import {Test} from "../lib/forge-std/src/Test.sol";
import {Voting} from "../src/Voting.sol";

contract VotingTest is Test {
    Voting voting;

    // The setUp function runs before each test function
    // It creates a new instance of the Voting contract to ensure each test starts with a fresh contract
    function setUp() public {
        voting = new Voting();
    }

    // This test checks that a voter cannot vote more than once
    function testCannotVoteTwice() public {
        // Cast the first vote for candidate with ID 1
        voting.vote(1);

        // Expect the next vote attempt from the same voter to revert with "Already voted." message
        vm.expectRevert(bytes("Already voted."));

        // Attempt to vote again for the same candidate, which should fail
        voting.vote(1);
    }

    // This test checks that a voter cannot vote for an invalid candidate
    function testCannotVoteInvalidCandidate() public {
        // Expect the vote attempt for an invalid candidate ID (3) to revert with "Invalid candidate." message
        // The contract is deployed with 2 candidates
        vm.expectRevert(bytes("Invalid candidate."));

        // Attempt to vote for a non-existent candidate, which should fail
        voting.vote(3);
    }
}

"use client";
import { useEffect, useState } from "react";
import { Web3 } from "web3";

// You node URL and chain ID
const nodeUrl = "YOUR_CHAINSTACK_CELO_URL";
const chainId = "0xa4ec"; // 42220 Chain ID for Celo

// Add the address of your smart contract
const contractAddress = "YOUR_DEPLOYED_SMART_CONTRACT";

const contractAbi = [
  { type: "constructor", inputs: [], stateMutability: "nonpayable" },
  {
    type: "function",
    name: "candidates",
    inputs: [{ name: "", type: "uint256", internalType: "uint256" }],
    outputs: [
      { name: "name", type: "string", internalType: "string" },
      { name: "voteCount", type: "uint256", internalType: "uint256" },
    ],
    stateMutability: "view",
  },
  {
    type: "function",
    name: "candidatesCount",
    inputs: [],
    outputs: [{ name: "", type: "uint256", internalType: "uint256" }],
    stateMutability: "view",
  },
  {
    type: "function",
    name: "getCandidate",
    inputs: [
      { name: "_candidateId", type: "uint256", internalType: "uint256" },
    ],
    outputs: [
      { name: "name", type: "string", internalType: "string" },
      { name: "voteCount", type: "uint256", internalType: "uint256" },
    ],
    stateMutability: "view",
  },
  {
    type: "function",
    name: "vote",
    inputs: [
      { name: "_candidateId", type: "uint256", internalType: "uint256" },
    ],
    outputs: [],
    stateMutability: "nonpayable",
  },
  {
    type: "function",
    name: "voters",
    inputs: [{ name: "", type: "address", internalType: "address" }],
    outputs: [{ name: "", type: "bool", internalType: "bool" }],
    stateMutability: "view",
  },
  {
    type: "event",
    name: "CandidateAdded",
    inputs: [
      {
        name: "candidateId",
        type: "uint256",
        indexed: true,
        internalType: "uint256",
      },
      { name: "name", type: "string", indexed: false, internalType: "string" },
    ],
    anonymous: false,
  },
  {
    type: "event",
    name: "Voted",
    inputs: [
      {
        name: "voter",
        type: "address",
        indexed: true,
        internalType: "address",
      },
      {
        name: "candidateId",
        type: "uint256",
        indexed: true,
        internalType: "uint256",
      },
    ],
    anonymous: false,
  },
];

export default function Home() {
  const [candidates, setCandidates] = useState([]);
  const [account, setAccount] = useState("");
  const [isCorrectNetwork, setIsCorrectNetwork] = useState(false);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  useEffect(() => {
    // Load the user's account when the component mounts
    loadAccount();
  }, []);

  useEffect(() => {
    // Load candidates if the user is connected to the correct network
    if (isCorrectNetwork) {
      loadCandidates();
    }
  }, [isCorrectNetwork]);

  const checkNetwork = async (web3) => {
    // Get the current chain ID
    const currentChainId = await web3.eth.getChainId();
    // Check if the user is connected to the correct network
    if (currentChainId !== parseInt(chainId, 16)) {
      // Switch to the correct network if not
      await switchNetwork();
    } else {
      setIsCorrectNetwork(true);
    }
  };

  const switchNetwork = async () => {
    try {
      // Request to switch the network in MetaMask
      await window.ethereum.request({
        method: "wallet_switchEthereumChain",
        params: [{ chainId: chainId }],
      });
      setIsCorrectNetwork(true);
    } catch (switchError) {
      // Handle the error if the network is not available in MetaMask
      if (switchError.code === 4902) {
        setError(
          "This network is not available in your MetaMask, please add it manually"
        );
      }
    }
  };

  const loadAccount = async () => {
    if (window.ethereum) {
      const web3 = new Web3(window.ethereum);
      try {
        // Request the user's accounts from MetaMask
        await window.ethereum.request({ method: "eth_requestAccounts" });
        const accounts = await web3.eth.getAccounts();
        // Set the user's account
        setAccount(accounts[0]);
        // Check if the user is connected to the correct network
        await checkNetwork(web3);
        return accounts[0];
      } catch (error) {
        // Handle the error if the user denies account access
        setError("User denied account access");
        return null;
      }
    } else {
      // Handle the error if MetaMask is not detected
      setError("MetaMask not detected");
      return null;
    }
  };

  const disconnectAccount = () => {
    // Reset the user's account and network status
    setAccount("");
    setIsCorrectNetwork(false);
  };

  const loadCandidates = async () => {
    const web3 = new Web3(nodeUrl);
    const contract = new web3.eth.Contract(contractAbi, contractAddress);
    // Get the total number of candidates from the smart contract
    const candidatesCount = await contract.methods.candidatesCount().call();

    const candidatesArray = [];
    // Fetch each candidate's details from the smart contract
    for (let i = 1; i <= candidatesCount; i++) {
      const candidate = await contract.methods.getCandidate(i).call();
      candidatesArray.push({
        id: i,
        name: candidate[0],
        voteCount: parseInt(candidate[1], 10),
      });
    }
    // Update the state with the list of candidates
    setCandidates(candidatesArray);
    setLoading(false);
  };

  const vote = async (candidateId) => {
    // Load the user's account if not already loaded
    const account = await loadAccount();
    if (!account) return;

    const web3 = new Web3(window.ethereum);
    const contract = new web3.eth.Contract(contractAbi, contractAddress);

    try {
      // Call the vote function in the smart contract
      await contract.methods.vote(candidateId).send({ from: account });
      // Reload the candidates to update the vote counts
      loadCandidates();
    } catch (error) {
      // Handle the error if voting fails
      setError("Error voting: " + error.message);
    }
  };

  return (
    <div className="container mx-auto p-4">
      <h1 className="text-3xl font-bold mb-4">
        Celo Voting App | Dashboard powered by Chainstack
      </h1>
      <h2 className="text-l font-bold mb-4">
        Connect your account and vote for your candidate!
      </h2>
      <h2 className="text-l font-bold mb-4">
        Each account can only vote once.
      </h2>
      {error && <div className="text-red-500 mb-4">{error}</div>}
      {!account ? (
        <div className="mb-4">
          <button
            className="bg-green-500 text-white px-4 py-2 rounded"
            onClick={loadAccount}
          >
            Login with MetaMask
          </button>
        </div>
      ) : (
        <>
          <div className="mb-4">
            <span className="text-lg mr-4">Connected: {account}</span>
            <button
              className="bg-red-500 text-white px-4 py-2 rounded"
              onClick={disconnectAccount}
            >
              Log out
            </button>
          </div>
          {isCorrectNetwork ? (
            loading ? (
              <div>Loading candidates...</div>
            ) : (
              <div className="grid grid-cols-1 gap-4">
                {candidates.map((candidate) => (
                  <div key={candidate.id} className="p-4 border rounded shadow">
                    <span className="text-lg text-white">
                      {candidate.name}: {candidate.voteCount} votes
                    </span>
                    <button
                      className="ml-4 bg-blue-500 text-white px-4 py-2 rounded"
                      onClick={() => vote(candidate.id)}
                    >
                      Vote
                    </button>
                  </div>
                ))}
              </div>
            )
          ) : (
            <div className="text-red-500">
              Please switch to the Celo Alfajores Testnet to vote.
            </div>
          )}
        </>
      )}
    </div>
  );
}