fix: shutter flash

web/src/hooks/useVotingContext.tsx

@@ -3,10 +3,16 @@ import React, { useContext, createContext, useMemo } from "react";
 import { useParams } from "react-router-dom";
 import { useAccount } from "wagmi";
 
-import { REFETCH_INTERVAL } from "consts/index";
-import { useReadDisputeKitClassicIsVoteActive } from "hooks/contracts/generated";
+import { REFETCH_INTERVAL, DisputeKits } from "consts/index";
+import {
+  useReadDisputeKitClassicIsVoteActive,
+  useReadDisputeKitShutterIsVoteActive,
+  useReadDisputeKitGatedIsVoteActive,
+  useReadDisputeKitGatedShutterIsVoteActive,
+} from "hooks/contracts/generated";
 import { useDisputeDetailsQuery } from "hooks/queries/useDisputeDetailsQuery";
 import { useDrawQuery } from "hooks/queries/useDrawQuery";
+import { useDisputeKitAddresses } from "hooks/useDisputeKitAddresses";
 import { isUndefined } from "utils/index";
 
 interface IVotingContext {
@@ -35,16 +41,70 @@ export const VotingContextProvider: React.FC<{ children: React.ReactNode }> = ({
   const { data: drawData, isLoading } = useDrawQuery(address?.toLowerCase(), id, disputeData?.dispute?.currentRound.id);
   const roundId = disputeData?.dispute?.currentRoundIndex;
   const voteId = drawData?.draws?.[0]?.voteIDNum;
-  const { data: hasVoted } = useReadDisputeKitClassicIsVoteActive({
+
+  const disputeKitAddress = disputeData?.dispute?.currentRound?.disputeKit?.address;
+  const { disputeKitName } = useDisputeKitAddresses({ disputeKitAddress });
+
+  const hookArgs = [BigInt(id ?? 0), roundId, voteId] as const;
+  const isEnabled = !isUndefined(roundId) && !isUndefined(voteId);
+
+  // Add a hook call for each DisputeKit
+  const classicVoteResult = useReadDisputeKitClassicIsVoteActive({
+    query: {
+      enabled: isEnabled && disputeKitName === DisputeKits.Classic,
+      refetchInterval: REFETCH_INTERVAL,
+    },
+    args: hookArgs,
+  });
+
+  const shutterVoteResult = useReadDisputeKitShutterIsVoteActive({
     query: {
-      enabled: !isUndefined(roundId) && !isUndefined(voteId),
+      enabled: isEnabled && disputeKitName === DisputeKits.Shutter,
       refetchInterval: REFETCH_INTERVAL,
     },
-    args: [BigInt(id ?? 0), roundId, voteId],
+    args: hookArgs,
   });
 
+  const gatedVoteResult = useReadDisputeKitGatedIsVoteActive({
+    query: {
+      enabled: isEnabled && disputeKitName === DisputeKits.Gated,
+      refetchInterval: REFETCH_INTERVAL,
+    },
+    args: hookArgs,
+  });
+
+  const gatedShutterVoteResult = useReadDisputeKitGatedShutterIsVoteActive({
+    query: {
+      enabled: isEnabled && disputeKitName === DisputeKits.GatedShutter,
+      refetchInterval: REFETCH_INTERVAL,
+    },
+    args: hookArgs,
+  });
+
+  // Add a return for each DisputeKit
+  const hasVoted = useMemo(() => {
+    switch (disputeKitName) {
+      case DisputeKits.Classic:
+        return classicVoteResult.data;
+      case DisputeKits.Shutter:
+        return shutterVoteResult.data;
+      case DisputeKits.Gated:
+        return gatedVoteResult.data;
+      case DisputeKits.GatedShutter:
+        return gatedShutterVoteResult.data;
+      default:
+        return undefined;
+    }
+  }, [
+    disputeKitName,
+    classicVoteResult.data,
+    shutterVoteResult.data,
+    gatedVoteResult.data,
+    gatedShutterVoteResult.data,
+  ]);
+
   const wasDrawn = useMemo(() => !isUndefined(drawData) && drawData.draws.length > 0, [drawData]);
-  const isHiddenVotes = useMemo(() => disputeData?.dispute?.court.hiddenVotes, [disputeData]);
+  const isHiddenVotes = useMemo(() => disputeData?.dispute?.court.hiddenVotes ?? false, [disputeData]);
   const isCommitPeriod = useMemo(() => disputeData?.dispute?.period === "commit", [disputeData]);
   const isVotingPeriod = useMemo(() => disputeData?.dispute?.period === "vote", [disputeData]);
 

web/src/pages/Cases/CaseDetails/Voting/Shutter/index.tsx

@@ -26,11 +26,17 @@ const Shutter: React.FC<IShutter> = ({ arbitrable, setIsOpen, dispute, currentPe
   const { isCommitPeriod, isVotingPeriod, commited } = useVotingContext();
   const voteIDs = useMemo(() => drawData?.draws?.map((draw) => draw.voteIDNum) as string[], [drawData]);
 
-  return id && isCommitPeriod && !commited ? (
-    <ShutterCommit {...{ arbitrable, setIsOpen, voteIDs, refetch, dispute, currentPeriodIndex, isGated }} />
-  ) : id && isVotingPeriod ? (
-    <Reveal {...{ setIsOpen, voteIDs, isGated }} />
-  ) : null;
+  const shouldShowCommit = id && isCommitPeriod && !commited;
+  const shouldShowReveal = id && isVotingPeriod;
+
+  return (
+    <>
+      {shouldShowCommit && (
+        <ShutterCommit {...{ arbitrable, setIsOpen, voteIDs, refetch, dispute, currentPeriodIndex, isGated }} />
+      )}
+      {shouldShowReveal && <Reveal {...{ setIsOpen, voteIDs, isGated }} />}
+    </>
+  );
 };
 
 export default Shutter;