Write Vote & Fetch Proposals Function

In this step, we will be writing the Vote and Fetch Proposals functions to wrap up our frontend components of the Voting dApp!

To begin, head over to the src/HomeDAO.tsx file and scroll down until you see the //Step F - Write Vote Yes Logic comment.

Proceed to overwrite the voteYes function with the following code snippet.

const voteYes = async (index: number) => {
  //Step F - Write Vote Yes Logic
  try {
    const accounts = await provider?.request({
      method: MethodsBase.ACCOUNTS,
    });

    if (!accounts) throw new Error("No accounts");

    const account = accounts?.tDVW?.[0];

    if (!account) throw new Error("No account");

    const createVoteInput: IVoteInput = {
      voter: account,
      proposalId: index,
      vote: true,
    };

    await DAOContract?.callSendMethod(
      "VoteOnProposal",
      account,
      createVoteInput
    );
    alert("Voted on Proposal");
    setHasVoted(true);
  } catch (error) {
    console.error(error, "=====error");
  }
};

In this code snippet, notice that the function takes in an index input parameter. This index parameter represents the specific proposal id that a user intends to vote on!

Next, we will proceed to fetch our wallet address from the configured Portkey provider. We will then create a "createVoteInput" parameter which contains the user’s wallet address, proposal Id of the proposal to be voted on and a boolean true value to represent a Yes vote.

Next, we will invoke the "VoteOnProposal" function from our deployed smart contract parsing in our wallet address and the "createVoteInput" as input parameters!

Upon a successful vote, we will then update the state variable and prompt an alert that the proposal has been voted on!

You should notice that the voteNo function works the same way with the only difference that the boolean is a false value!

Lastly, we will be writing the Fetch Proposals useEffect hook which renders all the proposals on the landing page!

Proceed to scroll down until you see the //Step G - Use Effect to Fetch Proposals comment and overwrite the useEffect hook with the following code snippet.

useEffect(() => {
  //Step G - Use Effect to Fetch Proposals
  const fetchProposals = async () => {
    try {
      const accounts = await provider?.request({
        method: MethodsBase.ACCOUNTS,
      });

      if (!accounts) throw new Error("No accounts");

      const account = accounts?.tDVW?.[0];

      if (!account) throw new Error("No account");

      const proposalResponse = await DAOContract?.callViewMethod<IProposals>(
        "GetAllProposals",
        ""
      );

      setProposals(proposalResponse?.data);
      alert("Fetched Proposals");
    } catch (error) {
      console.error(error, "===error");
    }
  };

  fetchProposals();
}, [DAOContract, hasVoted, isConnected, joinedDAO]);

In this code snippet, we first define the fetchProposals function that first fetches our wallet account address.

Next, we will invoke the GetAllProposals function from our deployed smart contract that returns a list of proposals created by members of the DAO!

We will then update the state variable and prompt an alert that the proposals have been fetched!

Now that we have written all the necessary frontend functions and components, we are ready to run the Voting dApp application in the next step!