feat(maci): cache joinedPoll data

Author: NicoSerranoP

.env.example

@@ -14,7 +14,7 @@ NEXT_PUBLIC_SECONDS_PER_BLOCK="1"
 NEXT_PUBLIC_COORDINATOR_SERVICE_URL="http://localhost:3000/v1"
 
 # UX improvements
-NEXT_MINIMUM_START_DELAY_IN_SECONDS="60" # coordinator service scheduler needs a bit of time to process
+NEXT_MINIMUM_START_DELAY_IN_SECONDS="30"
 
 # Network and services
 NEXT_PUBLIC_CHAIN_NAME="arbitrumSepolia"

plugins/maciVoting/components/PollCard.tsx

@@ -18,7 +18,7 @@ const PollCard = ({ pollId }: { pollId: bigint }) => {
   const [voteOption, setVoteOption] = useState<VoteOption | undefined>(undefined);
 
   const { data: { voteStartDate, tallied, voteEnded, disabled, results } = {} } = useGetPollData(pollId);
-  const { joinPollFunction, hasJoinedPoll, joinedPollData } = useJoinPoll(pollId);
+  const { joinPollFunction, hasJoinedPoll, joinedPollData, isLoading: isLoadingJoinedPoll } = useJoinPoll(pollId);
   const { voteFunction } = useVote();
 
   useEffect(() => {
@@ -56,7 +56,7 @@ const PollCard = ({ pollId }: { pollId: bigint }) => {
       const { pollStateIndex, voiceCredits } = joinedPollData;
 
       setVoteOption(option);
-      voteFunction(pollId, pollStateIndex, voiceCredits, option)
+      await voteFunction(pollId, pollStateIndex, voiceCredits, option)
         .catch((error) => {
           setError(error.message);
         })
@@ -69,14 +69,17 @@ const PollCard = ({ pollId }: { pollId: bigint }) => {
   );
 
   const buttonMessage = useMemo(() => {
+    if (isLoadingJoinedPoll) {
+      return <PleaseWaitSpinner fullMessage="Checking user status..." />;
+    }
     if (hasJoinedPoll) {
       return "Already joined poll";
     }
     if (isLoading) {
       return <PleaseWaitSpinner fullMessage="Joining poll..." />;
     }
     return "Join poll";
-  }, [hasJoinedPoll, isLoading]);
+  }, [isLoadingJoinedPoll, hasJoinedPoll, isLoading]);
 
   if (voteEnded && !tallied)
     return (
@@ -140,7 +143,7 @@ const PollCard = ({ pollId }: { pollId: bigint }) => {
             In order to submit your vote you need to join the poll using your locally generated MACI public key and your
             authorized wallet.
           </p>
-          <Button onClick={onClickJoinPoll} disabled={hasJoinedPoll || isLoading}>
+          <Button onClick={onClickJoinPoll} disabled={hasJoinedPoll || isLoading || isLoadingJoinedPoll}>
             {buttonMessage}
           </Button>
         </div>

plugins/maciVoting/contexts/MaciContext.tsx

@@ -87,7 +87,7 @@ export const MaciProvider = ({ children }: { children: ReactNode }) => {
 
         setMaciKeypair(keypair);
       } catch (error) {
-        setError("Error creating keypair");
+        setError("Error creating keypair. Please go to MACI Voting and try again.");
         setIsLoading(false);
         return;
       }

plugins/maciVoting/hooks/poll/useJoinPoll.tsx

@@ -1,114 +1,145 @@
 import { PUBLIC_MACI_ADDRESS, PUBLIC_MACI_DEPLOYMENT_BLOCK } from "@/constants";
 import { generateMaciStateTreeWithEndKey, getJoinedUserData, joinPoll } from "@maci-protocol/sdk/browser";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { usePublicClient } from "wagmi";
 import { DEFAULT_IVCP_DATA, DEFAULT_SG_DATA } from "../../contexts/MaciContext";
 import { clientToSigner, useEthersSigner } from "../useEthersSigner";
 import { useMaci } from "../useMaci";
 import { type IJoinPollData } from "../../contexts/types";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 
 export const useJoinPoll = (pollId?: bigint) => {
   const signer = useEthersSigner();
   const publicClient = usePublicClient();
+  const queryClient = useQueryClient();
   const { maciKeypair, isRegistered, stateIndex, artifacts } = useMaci();
 
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | undefined>();
-  const [hasJoinedPoll, setHasJoinedPoll] = useState(false);
-  const [joinedPollData, setJoinedPollData] = useState<IJoinPollData | undefined>();
+  // Keep track of newly joined poll data that will be returned when joining a poll
+  const [newlyJoinedPollData, setNewlyJoinedPollData] = useState<IJoinPollData | undefined>();
 
-  // check if the user has joined the poll
-  useEffect(() => {
-    (async () => {
+  // Query key for consistent cache access
+  const joinedUserQueryKey = useMemo(
+    () => ["joinedUserData", pollId?.toString(), maciKeypair?.publicKey.serialize()],
+    [pollId, maciKeypair]
+  );
+
+  // check if the user has joined the poll using useQuery
+  const { data: joinedPollData, isLoading: isLoadingQuery } = useQuery({
+    queryKey: joinedUserQueryKey,
+    queryFn: async () => {
       if (!pollId || !publicClient || !maciKeypair || !isRegistered || !artifacts) {
-        return;
+        return null;
       }
 
-      // TODO: use useQuery for this
+      setIsLoading(true);
+      try {
+        const publicSigner = clientToSigner(publicClient);
 
-      const publicSigner = clientToSigner(publicClient);
+        const joinedUser = await getJoinedUserData({
+          maciAddress: PUBLIC_MACI_ADDRESS,
+          pollPublicKey: maciKeypair.publicKey.serialize(),
+          signer: publicSigner,
+          startBlock: PUBLIC_MACI_DEPLOYMENT_BLOCK,
+          pollId,
+        });
 
-      const joinedUser = await getJoinedUserData({
-        maciAddress: PUBLIC_MACI_ADDRESS,
-        pollPublicKey: maciKeypair.publicKey.serialize(),
-        signer: publicSigner,
-        startBlock: PUBLIC_MACI_DEPLOYMENT_BLOCK,
-        pollId,
-      }).catch((error) => {
+        if (joinedUser && joinedUser.isJoined) {
+          return {
+            pollStateIndex: joinedUser.pollStateIndex ?? "",
+            voiceCredits: joinedUser.voiceCredits ?? "0",
+            // these two attributes are returned only when the user joins the poll
+            nullifier: "",
+            hash: "",
+          };
+        }
+      } catch (error) {
         // eslint-disable-next-line no-console
-        console.log("Error checking if user has joined poll", error);
-        return;
-      });
-
-      console.log("joinedUser", joinedUser);
-      console.log("pollId", pollId);
-
-      if (joinedUser && joinedUser.isJoined) {
-        setHasJoinedPoll(true);
-        setJoinedPollData({
-          pollStateIndex: joinedUser.pollStateIndex ?? "",
-          voiceCredits: joinedUser.voiceCredits ?? "0",
-          // these two attributes are returned only when the user joins the poll
-          nullifier: "",
-          hash: "",
-        });
+        console.error("Error checking if user has joined poll", error);
       }
-    })();
-  }, [artifacts, isRegistered, maciKeypair, pollId, publicClient]);
+
+      setIsLoading(false);
+      return null;
+    },
+    enabled: Boolean(pollId && publicClient && maciKeypair && isRegistered && artifacts),
+    staleTime: Infinity, // Cache forever as mentioned by user
+    gcTime: Infinity, // Keep in cache forever
+  });
 
   const joinPollFunction = useCallback(async () => {
     if (!pollId || !signer || !maciKeypair || !isRegistered || !artifacts) {
-      setHasJoinedPoll(false);
       return;
     }
 
-    const stateTree = await generateMaciStateTreeWithEndKey({
-      maciContractAddress: PUBLIC_MACI_ADDRESS,
-      signer,
-      userPublicKey: maciKeypair.publicKey,
-      startBlock: PUBLIC_MACI_DEPLOYMENT_BLOCK,
-    });
-
-    const inclusionProof = stateTree.signUpTree.generateProof(Number(stateIndex));
-
-    const joinedData = await joinPoll({
-      maciAddress: PUBLIC_MACI_ADDRESS,
-      privateKey: maciKeypair.privateKey.serialize(),
-      signer,
-      pollId,
-      inclusionProof: inclusionProof,
-      pollJoiningZkey: artifacts.zKey as unknown as string,
-      pollWasm: artifacts.wasm as unknown as string,
-      sgDataArg: DEFAULT_SG_DATA,
-      ivcpDataArg: DEFAULT_IVCP_DATA,
-      blocksPerBatch: 1000,
-    }).catch((error) => {
-      if (error.message.includes("0xa3281672")) {
+    if (joinedPollData) {
+      setNewlyJoinedPollData(joinedPollData);
+    }
+
+    setIsLoading(true);
+    setError(undefined);
+
+    try {
+      const stateTree = await generateMaciStateTreeWithEndKey({
+        maciContractAddress: PUBLIC_MACI_ADDRESS,
+        signer,
+        userPublicKey: maciKeypair.publicKey,
+        startBlock: PUBLIC_MACI_DEPLOYMENT_BLOCK,
+      });
+
+      const inclusionProof = stateTree.signUpTree.generateProof(Number(stateIndex));
+
+      const joinedData = await joinPoll({
+        maciAddress: PUBLIC_MACI_ADDRESS,
+        privateKey: maciKeypair.privateKey.serialize(),
+        signer,
+        pollId,
+        inclusionProof: inclusionProof,
+        pollJoiningZkey: artifacts.zKey as unknown as string,
+        pollWasm: artifacts.wasm as unknown as string,
+        sgDataArg: DEFAULT_SG_DATA,
+        ivcpDataArg: DEFAULT_IVCP_DATA,
+        blocksPerBatch: 1000,
+      });
+
+      if (joinedData) {
+        setNewlyJoinedPollData(joinedData);
+        // After successfully joining, manually invalidate the query to trigger a refetch
+        queryClient.invalidateQueries({ queryKey: joinedUserQueryKey });
+      }
+    } catch (error: any) {
+      if (error.message?.includes("0xa3281672")) {
         // 0xa3281672 -> signature of BalanceTooLow()
         setError(`Address balance is too low to join the poll`);
-        setIsLoading(false);
-        return;
+      } else {
+        // eslint-disable-next-line no-console
+        console.error("Error joining poll", error);
+        setError("Error joining poll");
       }
-      // eslint-disable-next-line no-console
-      console.log("Error joining poll", error);
-      setError("Error joining poll");
-      return;
-    });
-
-    if (!joinedData) {
-      setHasJoinedPoll(false);
-      return;
+    } finally {
+      setIsLoading(false);
     }
+  }, [
+    pollId,
+    signer,
+    maciKeypair,
+    isRegistered,
+    artifacts,
+    joinedPollData,
+    stateIndex,
+    queryClient,
+    joinedUserQueryKey,
+  ]);
 
-    setHasJoinedPoll(true);
-    setJoinedPollData(joinedData);
-  }, [artifacts, isRegistered, maciKeypair, pollId, signer, stateIndex]);
+  // Use the query data or the newly joined data if available
+  const effectiveJoinedPollData = newlyJoinedPollData ?? joinedPollData;
+  const effectiveHasJoinedPoll = Boolean(effectiveJoinedPollData);
 
   return {
-    isLoading,
+    isLoading: isLoading || isLoadingQuery,
     error,
-    hasJoinedPoll,
-    joinedPollData,
+    hasJoinedPoll: effectiveHasJoinedPoll,
+    joinedPollData: effectiveJoinedPollData,
     joinPollFunction,
   };
 };

plugins/maciVoting/hooks/useGetPollData.tsx

@@ -56,16 +56,6 @@ export const useGetPollData = (pollId?: string | bigint) => {
           // eslint-disable-next-line no-console
           console.log(error);
         }
-
-        /*
-        const blockNumber = await publicSigner.provider.getBlockNumber();
-        console.log("🔍 Current block number:", blockNumber);
-        console.log("pollId", pollId);
-        console.log("voteEnded", voteEnded);
-        console.log("tallied", tallied);
-        console.log("results", results);
-        console.log("date", new Date());
-        */
       }
 
       return {