Merge pull request #43 from privacy-scaling-explorations/fix/nico/ui-secondary-comments

Fix/nico/UI secondary comments

Author: NicoSerranoP

hooks/useSwitchChain.ts

@@ -0,0 +1,27 @@
+import { PUBLIC_CHAIN } from "@/constants";
+import { useCallback, useMemo } from "react";
+import { useSwitchChain } from "wagmi";
+import { useAccount } from "wagmi";
+
+export function useSwitchToChain() {
+  const { switchChain } = useSwitchChain();
+  const { chain } = useAccount();
+
+  const isCorrectChain = useMemo(() => {
+    if (!chain) return false;
+
+    return chain.id === PUBLIC_CHAIN.id;
+  }, [chain]);
+
+  const switchToChain = useCallback(async () => {
+    if (isCorrectChain) return;
+
+    try {
+      switchChain({ chainId: PUBLIC_CHAIN.id });
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error("Failed to switch chain:", error);
+    }
+  }, [isCorrectChain, switchChain]);
+  return { switchToChain, isCorrectChain };
+}

plugins/maciVoting/components/PollCard.tsx

@@ -4,10 +4,11 @@ import { useMaci } from "../hooks/useMaci";
 import { VoteOption } from "../utils/types";
 import { PleaseWaitSpinner } from "@/components/please-wait";
 import { PUBLIC_MACI_ADDRESS } from "@/constants";
-import { getPoll, getResults, type IResult } from "@maci-protocol/sdk/browser";
+import { getPoll } from "@maci-protocol/sdk/browser";
 import { useEthersSigner } from "../hooks/useEthersSigner";
 import { unixTimestampToDate } from "../utils/formatPollDate";
 import { useCoordinator } from "../hooks/useCoordinator";
+import { useResults } from "../hooks/useResults";
 
 const PollCard = ({ pollId }: { pollId: bigint }) => {
   // check if the user joined the poll
@@ -18,8 +19,7 @@ const PollCard = ({ pollId }: { pollId: bigint }) => {
   const [voteStartDate, setVoteStartDate] = useState(0);
   const [voteEnded, setVoteEnded] = useState(false);
   const [voteOption, setVoteOption] = useState<VoteOption | undefined>(undefined);
-  const [results, setResults] = useState<IResult[] | undefined>(undefined);
-  const [tallied, setTallied] = useState(false);
+  const { results, tallied } = useResults(pollId);
 
   const disabled = useMemo(() => {
     return isLoading || voteEnded || voteStartDate > Math.round(Date.now() / 1000);
@@ -47,30 +47,8 @@ const PollCard = ({ pollId }: { pollId: bigint }) => {
       setVoteEnded(endDate < now);
     };
 
-    const checkPollTallied = async () => {
-      const isTallied = await checkIsTallied(Number(pollId));
-      setTallied(isTallied);
-    };
-
-    const getPollResults = async () => {
-      const contractResults = await getResults({
-        maciAddress: PUBLIC_MACI_ADDRESS,
-        pollId: pollId.toString(),
-        signer,
-      });
-      setResults(contractResults);
-    };
-
     checkVoteEnded();
-
-    if (voteEnded) {
-      checkPollTallied();
-    }
-
-    if (tallied) {
-      getPollResults();
-    }
-  }, [voteEnded, setVoteEnded, pollId, signer, checkIsTallied, tallied, getResults]);
+  }, [voteEnded, setVoteEnded, pollId, signer, checkIsTallied, tallied]);
 
   useEffect(() => {
     setPollId(pollId);

plugins/maciVoting/components/finalize/finalizeAction.tsx

@@ -1,14 +1,16 @@
-import { useMemo } from "react";
+import { useCallback, useMemo } from "react";
 import { useCoordinator } from "../../hooks/useCoordinator";
 import { Button } from "@aragon/ods";
 import { PleaseWaitSpinner } from "@/components/please-wait";
 import { If } from "@/components/if";
+import { useRouter } from "next/router";
 
 interface IFinalizeActionProps {
   pollId: number;
 }
 
 export const FinalizeAction: React.FC<IFinalizeActionProps> = ({ pollId }) => {
+  const router = useRouter();
   const { finalizeStatus, finalizeProposal } = useCoordinator();
 
   const finalizationMessage = useMemo(() => {
@@ -28,13 +30,18 @@ export const FinalizeAction: React.FC<IFinalizeActionProps> = ({ pollId }) => {
     }
   }, [finalizeStatus]);
 
+  const onClickFinalize = useCallback(async () => {
+    await finalizeProposal(pollId);
+    router.reload();
+  }, [finalizeProposal, pollId, router]);
+
   return (
     <div className="overflow-hidden rounded-xl bg-neutral-0 pb-2 shadow-neutral">
       <If condition={finalizeStatus !== "submitted"}>
         <div className="flex flex-col gap-y-2 px-4 py-4 md:gap-y-3 md:px-6 md:py-6">
           <div className="flex justify-between gap-x-2 gap-y-2">
             <p className="text-xl leading-tight text-neutral-800 md:text-2xl">Finalize Poll</p>
-            <Button size="md" disabled={finalizeStatus !== "notStarted"} onClick={() => finalizeProposal(pollId)}>
+            <Button size="md" disabled={finalizeStatus !== "notStarted"} onClick={onClickFinalize}>
               Finalize
             </Button>
           </div>

plugins/maciVoting/contexts/MaciContext.tsx

@@ -268,10 +268,10 @@ export const MaciProvider = ({ children }: { children: ReactNode }) => {
 
       let voteOptionIndex: bigint;
       switch (option) {
-        case VoteOption.No:
+        case VoteOption.Yes:
           voteOptionIndex = 0n;
           break;
-        case VoteOption.Yes:
+        case VoteOption.No:
           voteOptionIndex = 1n;
           break;
         case VoteOption.Abstain:
@@ -477,7 +477,8 @@ export const MaciProvider = ({ children }: { children: ReactNode }) => {
         return;
       }
 
-      if (!pollId) {
+      // if it is the first poll then !pollId = false because !0n = false
+      if (!pollId && pollId !== 0n) {
         return;
       }
 

plugins/maciVoting/hooks/useProposalVariantStatus.tsx

@@ -2,6 +2,8 @@ import { useState, useEffect } from "react";
 import { type Proposal } from "@/plugins/maciVoting/utils/types";
 import { type ProposalStatus } from "@aragon/ods";
 import dayjs from "dayjs";
+import { useCoordinator } from "./useCoordinator";
+import { useResults } from "./useResults";
 
 export const useProposalVariantStatus = (proposal: Proposal) => {
   const [status, setStatus] = useState({ variant: "", label: "" });
@@ -24,24 +26,48 @@ export const useProposalVariantStatus = (proposal: Proposal) => {
 
 export const useProposalStatus = (proposal: Proposal) => {
   const [status, setStatus] = useState<ProposalStatus>();
+  const { checkIsTallied } = useCoordinator();
+  const { results } = useResults(proposal ? proposal.pollId : undefined);
 
   useEffect(() => {
-    if (!proposal || !proposal?.parameters || !proposal?.tally) return;
-
-    const isExecuted = proposal.executed;
-    const endDate = dayjs(Number(proposal.parameters.endDate) * 1000);
-    const isActive = dayjs().isBefore(endDate);
-
-    if (isExecuted) {
-      setStatus("executed");
-    } else if (isActive) {
-      setStatus("active");
-    } else if (!isActive) {
-      setStatus("rejected");
-    } else {
-      setStatus("accepted");
-    }
-  }, [proposal, proposal?.tally, proposal?.executed]);
+    (async () => {
+      if (!proposal || !proposal?.parameters || !proposal?.tally) return;
+
+      const isExecuted = proposal.executed;
+      const endDate = dayjs(Number(proposal.parameters.endDate) * 1000);
+      const isActive = dayjs().isBefore(endDate);
+      const isTallied = await checkIsTallied(Number(proposal.pollId));
+
+      if (isExecuted) {
+        setStatus("executed");
+      } else if (isActive) {
+        setStatus("active");
+      } else if (!isTallied) {
+        setStatus("pending");
+      } else if (isTallied) {
+        if (!results) {
+          setStatus("pending");
+          return;
+        }
+
+        const yesFlag = results[0].isSet;
+        const noFlag = results[1].isSet;
+
+        if (!yesFlag && !noFlag) {
+          setStatus("pending");
+        }
+
+        const yesVotes = results[0].value;
+        const noVotes = results[1].value;
+
+        if (yesVotes > noVotes) {
+          setStatus("accepted");
+        } else {
+          setStatus("rejected");
+        }
+      }
+    })();
+  }, [proposal, checkIsTallied, results]);
 
   return status;
 };

plugins/maciVoting/hooks/useResults.tsx

@@ -0,0 +1,71 @@
+import { PUBLIC_MACI_ADDRESS } from "@/constants";
+import { getPoll, getResults, type IResult } from "@maci-protocol/sdk/browser";
+import { useEffect, useState } from "react";
+import { useEthersSigner } from "./useEthersSigner";
+import { useCoordinator } from "./useCoordinator";
+
+export const useResults = (pollId?: bigint) => {
+  const { checkIsTallied } = useCoordinator();
+  const signer = useEthersSigner();
+
+  const [results, setResults] = useState<IResult[] | undefined>(undefined);
+  const [tallied, setTallied] = useState(false);
+
+  useEffect(() => {
+    (async () => {
+      if (!signer || !pollId) {
+        return;
+      }
+
+      try {
+        const { endDate } = await getPoll({
+          maciAddress: PUBLIC_MACI_ADDRESS,
+          pollId,
+          signer,
+        });
+        const now = Math.round(Date.now() / 1000);
+        const voteEnded = Number(endDate) < now;
+        if (!voteEnded) {
+          setTallied(false);
+          return;
+        }
+
+        const isTallied = await checkIsTallied(Number(pollId));
+        setTallied(isTallied);
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.log(error);
+        // TODO: handle error if poll does not exist
+        //console.log(error.message);
+        return;
+      }
+    })();
+  }, [checkIsTallied, pollId, signer]);
+
+  useEffect(() => {
+    (async () => {
+      if (!signer || !pollId) {
+        return;
+      }
+
+      if (!tallied) {
+        return;
+      }
+
+      try {
+        const resultsData = await getResults({
+          maciAddress: PUBLIC_MACI_ADDRESS,
+          pollId: pollId.toString(),
+          signer,
+        });
+
+        setResults(resultsData);
+      } catch (err) {
+        // eslint-disable-next-line no-console
+        console.error("Error fetching results:", err);
+      }
+    })();
+  }, [pollId, signer, checkIsTallied, tallied]);
+
+  return { results, tallied };
+};

plugins/maciVoting/index.tsx

@@ -3,14 +3,22 @@ import ProposalCreate from "./pages/new";
 import ProposalList from "./pages/proposal-list";
 import ProposalDetail from "./pages/proposal";
 import { useUrl } from "@/hooks/useUrl";
-import type { ReactNode } from "react";
+import { useEffect, type ReactNode } from "react";
 import { MaciProvider } from "./contexts/MaciContext";
 import { CoordinatorProvider } from "./contexts/CoordinatorContext";
+import { useSwitchToChain } from "@/hooks/useSwitchChain";
 export default function PluginPage() {
+  const { isCorrectChain, switchToChain } = useSwitchToChain();
   // Select the inner pages to display depending on the URL hash
   const { hash } = useUrl();
   let content: ReactNode;
 
+  useEffect(() => {
+    if (!isCorrectChain) {
+      switchToChain();
+    }
+  }, [isCorrectChain, switchToChain]);
+
   if (!hash || hash === "#/") content = <ProposalList />;
   else if (hash === "#/new") content = <ProposalCreate />;
   else if (hash.startsWith("#/proposals/")) {