chore(web): add getLocalRounds function to work with the fact that disputeKitDispute is now an array

Author: alcercu

web/src/components/DisputeCard/index.tsx

@@ -14,6 +14,7 @@ import { useVotingHistory } from "queries/useVotingHistory";
 import DisputeInfo from "./DisputeInfo";
 import PeriodBanner from "./PeriodBanner";
 import { isUndefined } from "utils/index";
+import { getLocalRounds } from "utils/getLocalRounds";
 
 const StyledCard = styled(Card)`
   width: 100%;
@@ -104,7 +105,7 @@ const DisputeCard: React.FC<IDisputeCard> = ({ id, arbitrated, period, lastPerio
   const courtName = courtPolicy?.name;
   const category = disputeTemplate ? disputeTemplate.category : undefined;
   const { data: votingHistory } = useVotingHistory(id);
-  const localRounds = votingHistory?.dispute?.disputeKitDispute?.localRounds;
+  const localRounds = getLocalRounds(votingHistory?.dispute?.disputeKitDispute);
   const navigate = useNavigate();
   return (
     <>

web/src/components/Verdict/DisputeTimeline.tsx

@@ -2,15 +2,16 @@ import React, { useMemo } from "react";
 import { useParams } from "react-router-dom";
 import styled, { useTheme } from "styled-components";
 import { _TimelineItem1, CustomTimeline } from "@kleros/ui-components-library";
+import CalendarIcon from "assets/svgs/icons/calendar.svg";
+import ClosedCaseIcon from "assets/svgs/icons/check-circle-outline.svg";
+import AppealedCaseIcon from "assets/svgs/icons/close-circle.svg";
 import { Periods } from "consts/periods";
 import { ClassicRound } from "src/graphql/graphql";
-import { getVoteChoice } from "pages/Cases/CaseDetails/Voting/VotingHistory";
 import { DisputeDetailsQuery, useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery";
 import { useDisputeTemplate } from "queries/useDisputeTemplate";
 import { useVotingHistory } from "queries/useVotingHistory";
-import CalendarIcon from "assets/svgs/icons/calendar.svg";
-import ClosedCaseIcon from "assets/svgs/icons/check-circle-outline.svg";
-import AppealedCaseIcon from "assets/svgs/icons/close-circle.svg";
+import { getVoteChoice } from "pages/Cases/CaseDetails/Voting/VotingHistory";
+import { getLocalRounds } from "utils/getLocalRounds";
 
 const Container = styled.div`
   display: flex;
@@ -63,7 +64,7 @@ const useItems = (disputeDetails?: DisputeDetailsQuery, arbitrable?: `0x${string
   const { id } = useParams();
   const { data: votingHistory } = useVotingHistory(id);
   const { data: disputeTemplate } = useDisputeTemplate(id, arbitrable);
-  const localRounds: ClassicRound[] = votingHistory?.dispute?.disputeKitDispute?.localRounds as ClassicRound[];
+  const localRounds: ClassicRound[] = getLocalRounds(votingHistory?.dispute?.disputeKitDispute) as ClassicRound[];
 
   const theme = useTheme();
 

web/src/hooks/queries/useClassicAppealQuery.ts

@@ -34,7 +34,7 @@ const classicAppealQuery = graphql(`
 export const useClassicAppealQuery = (id?: string | number) => {
   const isEnabled = id !== undefined;
 
-  return useQuery({
+  return useQuery<ClassicAppealQuery>({
     queryKey: ["refetchOnBlock", `classicAppealQuery${id}`],
     enabled: isEnabled,
     queryFn: async () => await graphqlQueryFnHelper(classicAppealQuery, { disputeID: id?.toString() }),

web/src/hooks/useClassicAppealContext.tsx

@@ -7,6 +7,7 @@ import { useAppealCost } from "queries/useAppealCost";
 import { useDisputeKitClassicMultipliers } from "queries/useDisputeKitClassicMultipliers";
 import { useClassicAppealQuery, ClassicAppealQuery } from "queries/useClassicAppealQuery";
 import { useCountdown } from "hooks/useCountdown";
+import { getLocalRounds } from "utils/getLocalRounds";
 
 const LoserSideCountdownContext = createContext<number | undefined>(undefined);
 
@@ -100,7 +101,7 @@ export const useOptionsContext = () => useContext(OptionsContext);
 const getCurrentLocalRound = (dispute?: ClassicAppealQuery["dispute"]) => {
   const period = dispute?.period;
   const currentLocalRoundIndex = dispute?.disputeKitDispute?.currentLocalRoundIndex;
-  return dispute?.disputeKitDispute?.localRounds[
+  return getLocalRounds(dispute?.disputeKitDispute)[
     ["appeal", "execution"].includes(period ?? "") ? currentLocalRoundIndex : currentLocalRoundIndex - 1
   ];
 };

web/src/pages/Cases/CaseDetails/Overview.tsx

@@ -15,6 +15,7 @@ import { StyledSkeleton } from "components/StyledSkeleton";
 import DisputeInfo from "components/DisputeCard/DisputeInfo";
 import Verdict from "components/Verdict/index";
 import { useVotingHistory } from "hooks/queries/useVotingHistory";
+import { getLocalRounds } from "utils/getLocalRounds";
 
 const Container = styled.div`
   width: 100%;
@@ -117,7 +118,7 @@ const Overview: React.FC<IOverview> = ({ arbitrable, courtID, currentPeriodIndex
   const { data: disputeDetails } = useDisputeDetailsQuery(id);
   const { data: courtPolicy } = useCourtPolicy(courtID);
   const { data: votingHistory } = useVotingHistory(id);
-  const localRounds = votingHistory?.dispute?.disputeKitDispute?.localRounds;
+  const localRounds = getLocalRounds(votingHistory?.dispute?.disputeKitDispute);
   const courtName = courtPolicy?.name;
   const court = disputeDetails?.dispute?.court;
   const rewards = court ? `≥ ${formatEther(court.feeForJuror)} ETH` : undefined;

web/src/pages/Cases/CaseDetails/Voting/VotingHistory.tsx

@@ -9,6 +9,7 @@ import { useVotingHistory } from "queries/useVotingHistory";
 import { useDisputeTemplate } from "queries/useDisputeTemplate";
 import { shortenAddress } from "utils/shortenAddress";
 import { isUndefined } from "utils/index";
+import { getLocalRounds } from "utils/getLocalRounds";
 
 const Container = styled.div``;
 
@@ -87,7 +88,7 @@ const AccordionContent: React.FC<{
   );
 };
 
-export const getVoteChoice = (vote, answers) => {
+export const getVoteChoice = (vote: number, answers: { title: string }[]) => {
   const selectedAnswer = answers?.[vote - 1]?.title;
   if (vote === 0) {
     return "Refuse to arbitrate";
@@ -104,7 +105,7 @@ const VotingHistory: React.FC<{ arbitrable?: `0x${string}`; isQuestion: boolean
   const [currentTab, setCurrentTab] = useState(0);
   const { data: disputeTemplate } = useDisputeTemplate(id, arbitrable);
   const rounds = votingHistory?.dispute?.rounds;
-  const localRounds = votingHistory?.dispute?.disputeKitDispute?.localRounds;
+  const localRounds = getLocalRounds(votingHistory?.dispute?.disputeKitDispute);
   const answers = disputeTemplate?.answers;
 
   return (
@@ -115,7 +116,7 @@ const VotingHistory: React.FC<{ arbitrable?: `0x${string}`; isQuestion: boolean
           {isQuestion && disputeTemplate.question ? (
             <ReactMarkdown>{disputeTemplate.question}</ReactMarkdown>
           ) : (
-            <ReactMarkdown>The dispute's template is not correct please vote refuse to arbitrate</ReactMarkdown>
+            <ReactMarkdown>{"The dispute's template is not correct please vote refuse to arbitrate"}</ReactMarkdown>
           )}
           <StyledTabs
             currentValue={currentTab}

web/src/utils/getLocalRounds.ts

@@ -0,0 +1,20 @@
+import { VotingHistoryQuery } from "queries/useVotingHistory";
+import { ClassicAppealQuery } from "queries/useClassicAppealQuery";
+
+type IVotingHistoryLocalRounds = NonNullable<
+  NonNullable<VotingHistoryQuery["dispute"]>["disputeKitDispute"]
+>["localRounds"];
+
+type IClassicAppealQueryLocalRounds = NonNullable<
+  NonNullable<ClassicAppealQuery["dispute"]>["disputeKitDispute"]
+>["localRounds"];
+
+type ILocalRounds = IClassicAppealQueryLocalRounds | IVotingHistoryLocalRounds;
+
+interface IDisputeKitDisputes {
+  localRounds: ILocalRounds;
+}
+
+export const getLocalRounds = (disputeKitDisputes: IDisputeKitDisputes | undefined | null) => {
+  return disputeKitDisputes?.reduce<ILocalRounds>((acc: ILocalRounds, { localRounds }) => acc.concat(localRounds), []);
+};