fix: voting-results-and-display

web/src/components/Verdict/DisputeTimeline.tsx

@@ -4,6 +4,7 @@ import styled, { useTheme } from "styled-components";
 import { _TimelineItem1, CustomTimeline } from "@kleros/ui-components-library";
 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";
@@ -78,13 +79,13 @@ const useItems = (disputeDetails?: DisputeDetailsQuery, arbitrable?: `0x${string
       return localRounds?.reduce<TimelineItems>(
         (acc, { winningChoice }, index) => {
           const parsedRoundChoice = parseInt(winningChoice);
+
           const eventDate = getCaseEventTimes(lastPeriodChange, currentPeriodIndex, courtTimePeriods, false);
           const icon = dispute.ruled && !rulingOverride && index === localRounds.length - 1 ? ClosedCaseIcon : "";
-
+          const answers = disputeTemplate?.answers;
           acc.push({
             title: `Jury Decision - Round ${index + 1}`,
-            party:
-              parsedRoundChoice !== 0 ? disputeTemplate?.answers?.[parsedRoundChoice - 1].title : "Refuse to Arbitrate",
+            party: getVoteChoice(parsedRoundChoice, answers),
             subtitle: eventDate,
             rightSided: true,
             variant: theme.secondaryPurple,
@@ -102,10 +103,7 @@ const useItems = (disputeDetails?: DisputeDetailsQuery, arbitrable?: `0x${string
           } else if (rulingOverride && parsedDisputeFinalRuling !== parsedRoundChoice) {
             acc.push({
               title: "Won by Appeal",
-              party:
-                parsedDisputeFinalRuling !== 0
-                  ? disputeTemplate?.answers?.[parsedDisputeFinalRuling - 1].title
-                  : "Refuse to Arbitrate",
+              party: getVoteChoice(parsedDisputeFinalRuling, answers),
               subtitle: eventDate,
               rightSided: true,
               Icon: ClosedCaseIcon,

web/src/components/Verdict/FinalDecision.tsx

@@ -101,7 +101,7 @@ const FinalDecision: React.FC<IFinalDecision> = ({ arbitrable }) => {
             <small>{answer.description}</small>
           </div>
         ) : (
-          <h3>Refuse to Arbitrate</h3>
+          <>{currentRuling !== 0 ? <h3>Answer 0x{currentRuling}</h3> : <h3>Refuse to Arbitrate</h3>}</>
         )}
       </JuryContainer>
       <Divider />

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

@@ -8,6 +8,7 @@ import BalanceIcon from "svgs/icons/law-balance.svg";
 import { useVotingHistory } from "queries/useVotingHistory";
 import { useDisputeTemplate } from "queries/useDisputeTemplate";
 import { shortenAddress } from "utils/shortenAddress";
+import { isUndefined } from "utils/index";
 
 const Container = styled.div``;
 
@@ -86,19 +87,36 @@ const JustificationContainer = styled.div`
   }
 `;
 
-const VotingHistory: React.FC<{ arbitrable?: `0x${string}` }> = ({ arbitrable }) => {
+export const getVoteChoice = (vote, answers) => {
+  const selectedAnswer = answers?.[vote - 1]?.title;
+  if (vote === 0) {
+    return "Refuse to arbitrate";
+  } else if (!isUndefined(selectedAnswer)) {
+    return selectedAnswer;
+  } else {
+    return `Answer 0x${vote}`;
+  }
+};
+
+const VotingHistory: React.FC<{ arbitrable?: `0x${string}`; isQuestion: boolean }> = ({ arbitrable, isQuestion }) => {
   const { id } = useParams();
   const { data: votingHistory } = useVotingHistory(id);
   const [currentTab, setCurrentTab] = useState(0);
   const { data: disputeTemplate } = useDisputeTemplate(id, arbitrable);
   const rounds = votingHistory?.dispute?.rounds;
   const localRounds = votingHistory?.dispute?.disputeKitDispute?.localRounds;
+  const answers = disputeTemplate?.answers;
+
   return (
     <Container>
       <h1>Voting History</h1>
       {rounds && localRounds && disputeTemplate && (
         <>
-          <ReactMarkdown>{disputeTemplate.question}</ReactMarkdown>
+          {isQuestion && disputeTemplate.question ? (
+            <ReactMarkdown>{disputeTemplate.question}</ReactMarkdown>
+          ) : (
+            <ReactMarkdown>The dispute's template is not correct please vote refuse to arbitrate</ReactMarkdown>
+          )}
           <StyledTabs
             currentValue={currentTab}
             items={rounds.map((_, i) => ({
@@ -124,7 +142,7 @@ const VotingHistory: React.FC<{ arbitrable?: `0x${string}` }> = ({ arbitrable })
                 icon: <Identicon size="20" string={vote.juror.id} />,
                 body: (
                   <AccordionContent
-                    choice={vote.choice === 0 ? "Refuse to arbitrate" : disputeTemplate.answers[vote.choice - 1].title}
+                    choice={getVoteChoice(parseInt(vote.choice), answers)}
                     justification={vote.justification || ""}
                   />
                 ),

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

@@ -60,9 +60,12 @@ const Voting: React.FC<{
       currentPeriodIndex === Periods.vote &&
       drawData.draws?.length > 0 &&
       !voted ? (
-        <Classic {...{ arbitrable }} setIsOpen={setIsPopupOpen} voteIDs={drawData.draws.map((draw) => draw.voteID)} />
+        <>
+          <VotingHistory {...{ arbitrable }} isQuestion={false} />
+          <Classic {...{ arbitrable }} setIsOpen={setIsPopupOpen} voteIDs={drawData.draws.map((draw) => draw.voteID)} />
+        </>
       ) : (
-        <VotingHistory {...{ arbitrable }} />
+        <VotingHistory {...{ arbitrable }} isQuestion={true} />
       )}
     </>
   );