feat: improve loading states

Author: JohnGuilding

plugins/maciVoting/components/PollCard.tsx

@@ -3,16 +3,40 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { useMaci } from "../hooks/useMaci";
 import { VoteOption } from "../utils/types";
 import { PleaseWaitSpinner } from "@/components/please-wait";
+import { PUBLIC_MACI_ADDRESS } from "@/constants";
+import { getPoll } from "@maci-protocol/sdk/browser";
+import { useEthersSigner } from "../hooks/useEthersSigner";
 
 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 [voteEnded, setVoteEnded] = useState(false);
+
+  const disabled = isLoading || voteEnded;
 
   useEffect(() => {
     setError(maciError);
   }, [maciError]);
 
+  useEffect(() => {
+    if (!signer) {
+      return;
+    }
+
+    const checkVoteEnded = async () => {
+      const poll = await getPoll({
+        maciAddress: PUBLIC_MACI_ADDRESS,
+        pollId,
+        signer,
+      });
+      setVoteEnded(Number(poll.endDate) < Date.now() * 1000);
+    };
+
+    checkVoteEnded();
+  }, [voteEnded, setVoteEnded, pollId, signer]);
+
   useEffect(() => {
     setPollId(pollId);
   }, [pollId, setPollId]);
@@ -64,25 +88,25 @@ const PollCard = ({ pollId }: { pollId: bigint }) => {
               <div className="flex flex-row gap-x-1">
                 <Button
                   onClick={() => onClickVote(VoteOption.Yes)}
-                  disabled={isLoading}
+                  disabled={disabled}
                   size="sm"
-                  variant={isLoading ? "tertiary" : "success"}
+                  variant={disabled ? "tertiary" : "success"}
                 >
                   Yes
                 </Button>
                 <Button
                   onClick={() => onClickVote(VoteOption.No)}
-                  disabled={isLoading}
+                  disabled={disabled}
                   size="sm"
-                  variant={isLoading ? "tertiary" : "critical"}
+                  variant={disabled ? "tertiary" : "critical"}
                 >
                   No
                 </Button>
                 <Button
                   onClick={() => onClickVote(VoteOption.Abstain)}
-                  disabled={isLoading}
+                  disabled={disabled}
                   size="sm"
-                  variant={isLoading ? "tertiary" : "warning"}
+                  variant={disabled ? "tertiary" : "warning"}
                 >
                   Abstain
                 </Button>

plugins/maciVoting/components/finalize/finalizeAction.tsx

@@ -1,74 +1,59 @@
-import { useEffect, useMemo } from "react";
+import { useMemo } from "react";
 import { useCoordinator } from "../../hooks/useCoordinator";
 import { Button } from "@aragon/ods";
-import { useAlerts } from "@/context/Alerts";
 import { PleaseWaitSpinner } from "@/components/please-wait";
+import { If } from "@/components/if";
 
 interface IFinalizeActionProps {
   pollId: number;
 }
 
 export const FinalizeAction: React.FC<IFinalizeActionProps> = ({ pollId }) => {
   const { finalizeStatus, finalizeProposal } = useCoordinator();
-  const { addAlert } = useAlerts();
 
   const finalizationMessage = useMemo(() => {
     switch (finalizeStatus) {
       case "notStarted":
         return "";
       case "merging":
         return <PleaseWaitSpinner fullMessage="Merging poll..." />;
-      case "merged":
-        return "The poll has been merged.";
       case "proving":
         return <PleaseWaitSpinner fullMessage="Generating proofs..." />;
-      case "proved":
-        return "The proofs have been generated.";
       case "submitting":
         return <PleaseWaitSpinner fullMessage="Submitting proofs..." />;
       case "submitted":
-        return "The proofs have been submitted. You can now execute the proposal.";
+        return "";
       default:
         return "";
     }
   }, [finalizeStatus]);
 
-  useEffect(() => {
-    if (finalizeStatus === "notStarted") return;
-    if (finalizeStatus === "merged") {
-      addAlert("Votes merged", {
-        description: "The votes have been merged.",
-        type: "success",
-      });
-    }
-    if (finalizeStatus === "proved") {
-      addAlert("Votes proved", {
-        description: "The votes have been proved.",
-        type: "success",
-      });
-    }
-    if (finalizeStatus === "submitted") {
-      addAlert("Votes submitted", {
-        description: "The votes have been submitted.",
-        type: "success",
-      });
-    }
-  }, [addAlert, finalizeStatus]);
-
   return (
     <div className="overflow-hidden rounded-xl bg-neutral-0 pb-2 shadow-neutral">
-      <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)}>
-            Finalize
-          </Button>
+      <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)}>
+              Finalize
+            </Button>
+          </div>
+          <p className="text-base leading-normal text-neutral-500 md:text-lg">
+            The poll must have ended in order for it to be finalized.
+          </p>
+          <p className="text-sm text-info-500">{finalizationMessage}</p>
+        </div>
+      </If>
+      <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">Poll Finalized</p>
+          </div>
+          <p className="text-base leading-normal text-neutral-500 md:text-lg">
+            The poll has been finalized. You can now execute the proposal.
+          </p>
         </div>
-        <p className="text-base leading-normal text-neutral-500 md:text-lg">
-          The poll must have ended in order for it to be finalized.
-        </p>
-        <p className="text-sm text-info-500">{finalizationMessage}</p>
-      </div>
+      </If>
     </div>
   );
 };

plugins/maciVoting/contexts/CoordinatorContext.tsx

@@ -11,13 +11,15 @@ import {
 } from "./types";
 import { useEthersSigner } from "../hooks/useEthersSigner";
 import { toBackendChainFormat } from "../utils/chains";
+import { useAlerts } from "@/context/Alerts";
 
 export const CoordinatorContext = createContext<ICoordinatorContextType | undefined>(undefined);
 
 export const CoordinatorProvider = ({ children }: { children: ReactNode }) => {
   const [finalizeStatus, setFinalizeStatus] = useState<FinalizeStatus>("notStarted");
 
   const signer = useEthersSigner();
+  const { addAlert } = useAlerts();
 
   const merge = useCallback(async (pollId: number): Promise<TCoordinatorServiceResult<boolean>> => {
     let response: Response;
@@ -72,7 +74,7 @@ export const CoordinatorProvider = ({ children }: { children: ReactNode }) => {
             poll: pollId,
             maciContractAddress: PUBLIC_MACI_ADDRESS,
             mode: EMode.NON_QV,
-            blocksPerBatch: 20,
+            blocksPerBatch: 1000,
             chain: toBackendChainFormat(PUBLIC_CHAIN_NAME),
           }),
         });
@@ -189,31 +191,53 @@ export const CoordinatorProvider = ({ children }: { children: ReactNode }) => {
         const mergeResult = await merge(pollId);
         if (!mergeResult.success) {
           setFinalizeStatus("notStarted");
+          addAlert("Failed to merge", {
+            description: "Failed to merge. Please try again.",
+            type: "error",
+          });
           return;
         }
       }
-      setFinalizeStatus("merged");
+      addAlert("Votes merged", {
+        description: "The votes have been merged.",
+        type: "success",
+      });
 
       setFinalizeStatus("proving");
       const proveResult = await generateProofs({
         pollId,
       });
       if (!proveResult.success) {
         setFinalizeStatus("notStarted");
+        addAlert("Failed to generate proofs", {
+          description: "The proofs have not been generated. Please try again.",
+          type: "error",
+        });
         return;
       }
-      setFinalizeStatus("proved");
+      addAlert("Votes proved", {
+        description: "The votes have been proved.",
+        type: "success",
+      });
 
       setFinalizeStatus("submitting");
       const submitResult = await submit(pollId);
       if (!submitResult.success) {
         setFinalizeStatus("notStarted");
+        addAlert("Failed to submit proofs", {
+          description: "The proofs have not been submitted. Please try again.",
+          type: "error",
+        });
         return;
       }
       setFinalizeStatus("submitted");
+      addAlert("Votes submitted", {
+        description: "The votes have been submitted.",
+        type: "success",
+      });
       return;
     },
-    [checkMergeStatus, generateProofs, merge, signer, submit]
+    [addAlert, checkMergeStatus, generateProofs, merge, signer, submit]
   );
 
   const value = useMemo<ICoordinatorContextType>(

plugins/maciVoting/contexts/MaciContext.tsx

@@ -19,6 +19,7 @@ import { useEthersSigner } from "../hooks/useEthersSigner";
 import { keccak256, stringToHex, type Hex } from "viem";
 import { VoteOption } from "../utils/types";
 import { useAlerts } from "@/context/Alerts";
+import { unixTimestampToDate } from "../utils/formatPollDate";
 
 export const DEFAULT_SG_DATA = "0x0000000000000000000000000000000000000000000000000000000000000000";
 export const DEFAULT_IVCP_DATA = "0x0000000000000000000000000000000000000000000000000000000000000000";
@@ -262,27 +263,55 @@ export const MaciProvider = ({ children }: { children: ReactNode }) => {
           break;
       }
 
-      await publish({
-        publicKey: maciKeypair.publicKey.serialize(),
-        stateIndex: BigInt(pollStateIndex),
-        voteOptionIndex,
-        nonce: 1n,
-        pollId,
-        newVoteWeight: 1n,
+      const poll = await getPoll({
         maciAddress: PUBLIC_MACI_ADDRESS,
-        privateKey: maciKeypair.privateKey.serialize(),
+        pollId,
         signer,
       });
+      if (!poll) {
+        return;
+      }
+
+      try {
+        await publish({
+          publicKey: maciKeypair.publicKey.serialize(),
+          stateIndex: BigInt(pollStateIndex),
+          voteOptionIndex,
+          nonce: 1n,
+          pollId,
+          newVoteWeight: 1n,
+          maciAddress: PUBLIC_MACI_ADDRESS,
+          privateKey: maciKeypair.privateKey.serialize(),
+          signer,
+        });
+      } catch (error: any) {
+        let message: string | undefined;
+        if (error.message.includes("0xa47dcd48")) {
+          const endDate = poll.endDate;
+          message = `The voting period finished at ${unixTimestampToDate(endDate)}. You can no longer submit a vote.`;
+        }
+        if (error.message.includes("0x256eadc8")) {
+          const startDate = poll.startDate;
+          message = `The voting period has not begun. It will start at ${unixTimestampToDate(startDate)}`;
+        }
+
+        setIsLoading(false);
+        setError(message ?? "There was an error submitting your vote");
+        addAlert("Failure submitting vote", {
+          description: message ?? "Error submitting vote",
+          type: "error",
+        });
+        return;
+      }
 
       setIsLoading(false);
       setError(undefined);
-
       addAlert("Vote submitted", {
         description: "Your vote is in the ballot. You can submit another vote to override it.",
         type: "success",
       });
     },
-    [addAlert, hasJoinedPoll, maciKeypair, pollId, signer, pollStateIndex]
+    [signer, maciKeypair, pollId, pollStateIndex, hasJoinedPoll, addAlert]
   );
 
   // check if user is connected

plugins/maciVoting/contexts/types.ts

@@ -1,5 +1,5 @@
 import { type Keypair } from "@maci-protocol/domainobjs";
-import { IProof, ITallyData } from "@maci-protocol/sdk/browser";
+import { type IProof, type ITallyData } from "@maci-protocol/sdk/browser";
 import { type VoteOption } from "../utils/types";
 
 export interface IVoteArgs {
@@ -18,7 +18,7 @@ export interface IGenerateProofsArgs {
   pollId: number;
 }
 
-export type FinalizeStatus = "notStarted" | "merging" | "merged" | "proving" | "proved" | "submitting" | "submitted";
+export type FinalizeStatus = "notStarted" | "merging" | "proving" | "submitting" | "submitted";
 
 export interface ICoordinatorContextType {
   finalizeStatus: FinalizeStatus;

plugins/maciVoting/utils/formatPollDate.ts

@@ -0,0 +1,11 @@
+import { type BigNumberish } from "ethers";
+
+export function unixTimestampToDate(timestamp: BigNumberish) {
+  return new Date(Number(timestamp) * 1000).toLocaleString(undefined, {
+    year: "numeric",
+    month: "numeric",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}