feat(finalize): fix small ui bugs

Author: NicoSerranoP

bun.lock

@@ -21,6 +21,7 @@
         "dompurify": "^3.2.5",
         "ethers": "^6.14.4",
         "ipfs-http-client": "^60.0.1",
+        "lucide-react": "^0.525.0",
         "multiformats": "^13.3.3",
         "next": "14.2.4",
         "react": "^18.2.0",
@@ -2018,6 +2019,8 @@
 
     "lru_map": ["lru_map@0.3.3", "", {}, "sha512-Pn9cox5CsMYngeDbmChANltQl+5pi6XmTrraMSzhPmMBbmgcxmqWry0U3PGapCU1yB4/LqCcom7qhHZiF/jGfQ=="],
 
+    "lucide-react": ["lucide-react@0.525.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Tm1txJ2OkymCGkvwoHt33Y2JpN5xucVq1slHcgE6Lk0WjDfjgKWor5CdVER8U6DvcfMwh4M8XxmpTiyzfmfDYQ=="],
+
     "make-error": ["make-error@1.3.6", "", {}, "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw=="],
 
     "makeerror": ["makeerror@1.0.12", "", { "dependencies": { "tmpl": "1.0.5" } }, "sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg=="],

context/Alerts.tsx

@@ -36,6 +36,8 @@ export const AlertProvider: React.FC<{ children: React.ReactNode }> = ({ childre
       // Update the existing one
       setAlerts((curAlerts) => {
         const [prevAlert] = curAlerts.splice(idx, 1);
+        if (!prevAlert) return curAlerts;
+
         clearTimeout(prevAlert.dismissTimeout);
         const timeout = alertOptions?.timeout ?? DEFAULT_ALERT_TIMEOUT;
         prevAlert.dismissTimeout = setTimeout(() => removeAlert(prevAlert.id), timeout);

plugins/maciVoting/components/PollCard.tsx

@@ -1,22 +1,20 @@
 import { Button, Card, Heading } from "@aragon/ods";
-import { useCallback, useEffect, useMemo, useState, useRef } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useMaci } from "../hooks/useMaci";
 import { VoteOption } from "../utils/types";
 import { PleaseWaitSpinner } from "@/components/please-wait";
-import { useEthersSigner } from "../hooks/useEthersSigner";
 import { unixTimestampToDate } from "../utils/formatPollDate";
 import { useGetPollData } from "../hooks/useGetPollData";
 import { VoteResultCard } from "./VoteResultCard";
 
 const PollCard = ({ pollId }: { pollId: bigint }) => {
   // check if the user joined the poll
   const { setPollId, onJoinPoll, onVote, isRegistered, hasJoinedPoll, isLoading, error: maciError } = useMaci();
-  const signer = useEthersSigner();
+
   const [error, setError] = useState<string | undefined>(undefined);
   const [voteOption, setVoteOption] = useState<VoteOption | undefined>(undefined);
 
-  const { data: { voteStartDate, tallied, voteEnded, disabled, results } = {}, isLoading: isLoadingPollData } =
-    useGetPollData(pollId);
+  const { data: { voteStartDate, tallied, voteEnded, disabled, results } = {} } = useGetPollData(pollId);
 
   useEffect(() => {
     setError(maciError);
@@ -92,13 +90,7 @@ const PollCard = ({ pollId }: { pollId: bigint }) => {
             </div>
           )}
           <p>The voting period has ended. Here are the results:</p>
-          <VoteResultCard
-            results={{
-              yes: Number(results[0].value),
-              no: Number(results[1].value),
-              abstain: Number(results[2].value),
-            }}
-          />
+          <VoteResultCard pollId={pollId} />
         </Card>
       </div>
     );

plugins/maciVoting/components/VoteResultCard.tsx

@@ -1,35 +1,36 @@
 "use client";
 
-import { CheckCircle, XCircle, MinusCircle, Trophy, Sparkles, AlertTriangle } from "lucide-react";
-import { useEffect, useState } from "react";
+import { CheckCircle, XCircle, MinusCircle } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
 import classNames from "classnames";
+import { useGetPollData } from "../hooks/useGetPollData";
 
 type WinnerType = "yes" | "no" | "abstain" | "tie";
 
 interface VoteResultCardProps {
-  results: {
-    yes: number;
-    no: number;
-    abstain: number;
-  };
+  pollId: bigint;
 }
 
-export const VoteResultCard = ({ results }: VoteResultCardProps) => {
+export const VoteResultCard = ({ pollId }: VoteResultCardProps) => {
+  const { data: { results } = {} } = useGetPollData(pollId);
   const [isVisible, setIsVisible] = useState(false);
 
-  const total = results.yes + results.no + results.abstain;
-  const yesPercentage = total > 0 ? (results.yes / total) * 100 : 0;
-  const noPercentage = total > 0 ? (results.no / total) * 100 : 0;
+  const yes = results ? Number(results[0].value) : 0;
+  const no = results ? Number(results[1].value) : 0;
+  const abstain = results ? Number(results[2].value) : 0;
 
-  const getWinner = () => {
-    if (results.yes > results.no) return "yes";
-    if (results.no > results.yes) return "no";
-    return "tie";
-  };
+  const total = yes + no + abstain;
 
-  const winner: WinnerType = getWinner();
+  const yesPercentage = total > 0 ? (yes / total) * 100 : 0;
+  const noPercentage = total > 0 ? (no / total) * 100 : 0;
 
-  const getWinnerConfig = () => {
+  const winner = useMemo<WinnerType>(() => {
+    if (yes > no) return "yes";
+    if (no > yes) return "no";
+    return "tie";
+  }, [yes, no]);
+
+  const config = useMemo(() => {
     switch (winner) {
       case "yes":
         return {
@@ -44,9 +45,7 @@ export const VoteResultCard = ({ results }: VoteResultCardProps) => {
           percentage: 50,
         };
     }
-  };
-
-  const config = getWinnerConfig();
+  }, [noPercentage, winner, yesPercentage]);
 
   useEffect(() => {
     setIsVisible(true);
@@ -109,7 +108,7 @@ export const VoteResultCard = ({ results }: VoteResultCardProps) => {
                   fontWeight: winner === "yes" ? 700 : winner === "no" ? 700 : 400,
                 }}
               >
-                {results.yes}
+                {yes}
               </div>
               <div className={`text-sm ${textClass("yes")}`}>Yes</div>
             </div>
@@ -122,7 +121,7 @@ export const VoteResultCard = ({ results }: VoteResultCardProps) => {
                   fontWeight: winner === "no" ? 700 : winner === "yes" ? 700 : 400,
                 }}
               >
-                {results.no}
+                {no}
               </div>
               <div className={`text-sm ${textClass("no")}`}>No</div>
             </div>
@@ -135,7 +134,7 @@ export const VoteResultCard = ({ results }: VoteResultCardProps) => {
                   fontWeight: 400,
                 }}
               >
-                {results.abstain}
+                {abstain}
               </div>
               <div className={`text-sm ${textClass("abstain")}`}>Abstain</div>
             </div>

plugins/maciVoting/components/finalize/finalizeAction.tsx

@@ -1,17 +1,15 @@
 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";
+import { useCoordinatorFinalize } from "../../hooks/useCoordinatorFinalize";
 
 interface IFinalizeActionProps {
   pollId: number;
 }
 
 export const FinalizeAction: React.FC<IFinalizeActionProps> = ({ pollId }) => {
-  const router = useRouter();
-  const { finalizeStatus, finalizeProposal } = useCoordinator();
+  const { finalizeStatus, finalizeProposal } = useCoordinatorFinalize(pollId);
 
   const finalizationMessage = useMemo(() => {
     switch (finalizeStatus) {
@@ -31,9 +29,8 @@ export const FinalizeAction: React.FC<IFinalizeActionProps> = ({ pollId }) => {
   }, [finalizeStatus]);
 
   const onClickFinalize = useCallback(async () => {
-    await finalizeProposal(pollId);
-    router.reload();
-  }, [finalizeProposal, pollId, router]);
+    await finalizeProposal();
+  }, [finalizeProposal]);
 
   return (
     <div className="overflow-hidden rounded-xl bg-neutral-0 pb-2 shadow-neutral">

plugins/maciVoting/contexts/CoordinatorContext.tsx

@@ -1,16 +1,17 @@
 import { EMode } from "@maci-protocol/core";
-import { getPoll, isTallied, type ITallyData, Poll__factory as PollFactory } from "@maci-protocol/sdk/browser";
+import { type ITallyData } from "@maci-protocol/sdk/browser";
 import { PUBLIC_CHAIN_NAME, PUBLIC_COORDINATOR_SERVICE_URL, PUBLIC_MACI_ADDRESS } from "@/constants";
-import { createContext, type ReactNode, useCallback, useMemo, useState } from "react";
+import { createContext, type ReactNode, useCallback, useMemo } from "react";
 import {
   type TCoordinatorServiceResult,
   type IGenerateData,
   type ICoordinatorContextType,
-  type FinalizeStatus,
+  type IFinalizeProposalArgs,
 } from "./types";
 import { useEthersSigner } from "../hooks/useEthersSigner";
 import { toBackendChainFormat } from "../utils/chains";
 import { useAlerts } from "@/context/Alerts";
+import { useMaci } from "../hooks/useMaci";
 
 export const CoordinatorContext = createContext<ICoordinatorContextType | undefined>(undefined);
 
@@ -44,8 +45,7 @@ async function makeCoordinatorServicePostRequest<T>(url: string, body: string):
 }
 
 export const CoordinatorProvider = ({ children }: { children: ReactNode }) => {
-  const [finalizeStatus, setFinalizeStatus] = useState<FinalizeStatus>("notStarted");
-
+  const { checkMergeStatus, checkIsTallied } = useMaci();
   const signer = useEthersSigner();
   const { addAlert } = useAlerts();
 
@@ -84,42 +84,12 @@ export const CoordinatorProvider = ({ children }: { children: ReactNode }) => {
     );
   }, []);
 
-  const checkMergeStatus = useCallback(
-    async (pollId: number) => {
-      const { address: pollAddress } = await getPoll({
-        maciAddress: PUBLIC_MACI_ADDRESS,
-        pollId,
-        signer,
-      });
-      const poll = PollFactory.connect(pollAddress, signer);
-      return await poll.stateMerged();
-    },
-    [signer]
-  );
-
-  const checkIsTallied = useCallback(
-    async (pollId: number) => {
-      if (!signer) {
-        // eslint-disable-next-line no-console
-        console.log("No signer");
-        return false;
-      }
-
-      const isPollTallied = await isTallied({
-        maciAddress: PUBLIC_MACI_ADDRESS,
-        pollId: pollId.toString(),
-        signer,
-      });
-      return isPollTallied;
-    },
-    [signer]
-  );
-
   const finalizeProposal = useCallback(
-    async (pollId: number) => {
+    async ({ pollId, setFinalizeStatus }: IFinalizeProposalArgs) => {
       if (!signer) {
         // eslint-disable-next-line no-console
         console.log("No signer");
+        return;
       }
 
       const isTallied = await checkIsTallied(pollId);
@@ -185,11 +155,9 @@ export const CoordinatorProvider = ({ children }: { children: ReactNode }) => {
 
   const value = useMemo<ICoordinatorContextType>(
     () => ({
-      finalizeStatus,
-      checkIsTallied,
       finalizeProposal,
     }),
-    [finalizeStatus, checkIsTallied, finalizeProposal]
+    [finalizeProposal]
   );
 
   return <CoordinatorContext.Provider value={value as ICoordinatorContextType}>{children}</CoordinatorContext.Provider>;

plugins/maciVoting/contexts/MaciContext.tsx

@@ -11,6 +11,8 @@ import {
   getPoll,
   publish,
   getSignedupUserData,
+  Poll__factory as PollFactory,
+  isTallied,
 } from "@maci-protocol/sdk/browser";
 import { PUBLIC_MACI_ADDRESS, PUBLIC_MACI_DEPLOYMENT_BLOCK } from "@/constants";
 import { useAccount, usePublicClient, useSignMessage } from "wagmi";
@@ -330,6 +332,37 @@ export const MaciProvider = ({ children }: { children: ReactNode }) => {
     [signer, maciKeypair, pollId, pollStateIndex, hasJoinedPoll, addAlert, initialVoiceCredits]
   );
 
+  const checkIsTallied = useCallback(
+    async (pollId: number) => {
+      if (!signer) {
+        // eslint-disable-next-line no-console
+        console.log("No signer");
+        return false;
+      }
+
+      const isPollTallied = await isTallied({
+        maciAddress: PUBLIC_MACI_ADDRESS,
+        pollId: pollId.toString(),
+        signer,
+      });
+      return isPollTallied;
+    },
+    [signer]
+  );
+
+  const checkMergeStatus = useCallback(
+    async (pollId: number) => {
+      const { address: pollAddress } = await getPoll({
+        maciAddress: PUBLIC_MACI_ADDRESS,
+        pollId,
+        signer,
+      });
+      const poll = PollFactory.connect(pollAddress, signer);
+      return await poll.stateMerged();
+    },
+    [signer]
+  );
+
   // check if user is connected
   useEffect(() => {
     setError(undefined);
@@ -529,6 +562,8 @@ export const MaciProvider = ({ children }: { children: ReactNode }) => {
       onSignup,
       onJoinPoll,
       onVote,
+      checkIsTallied,
+      checkMergeStatus,
     }),
     [
       isLoading,
@@ -544,6 +579,8 @@ export const MaciProvider = ({ children }: { children: ReactNode }) => {
       onSignup,
       onJoinPoll,
       onVote,
+      checkIsTallied,
+      checkMergeStatus,
     ]
   );
 

plugins/maciVoting/contexts/types.ts

@@ -16,10 +16,13 @@ export type TCoordinatorServiceResult<T, E = Error> = { success: true; data: T }
 
 export type FinalizeStatus = "notStarted" | "merging" | "proving" | "submitting" | "submitted";
 
+export interface IFinalizeProposalArgs {
+  pollId: number;
+  setFinalizeStatus: (status: FinalizeStatus) => void;
+}
+
 export interface ICoordinatorContextType {
-  finalizeStatus: FinalizeStatus;
-  checkIsTallied: (pollId: number) => Promise<boolean>;
-  finalizeProposal: (pollId: number) => Promise<void>;
+  finalizeProposal: (args: IFinalizeProposalArgs) => Promise<void>;
 }
 
 export interface IMaciContextType {
@@ -37,4 +40,6 @@ export interface IMaciContextType {
   onSignup: () => Promise<void>;
   onJoinPoll: (pollId: bigint) => Promise<void>;
   onVote: (option: VoteOption) => Promise<void>;
+  checkIsTallied: (pollId: number) => Promise<boolean>;
+  checkMergeStatus: (pollId: number) => Promise<boolean>;
 }