Merge pull request #1884 from kleros/fix/verdict-answer-decoding

fix(web): verdict-answer-decoding

Author: alcercu

web/src/components/Verdict/FinalDecision.tsx

@@ -93,13 +93,14 @@ const FinalDecision: React.FC<IFinalDecision> = ({ arbitrable }) => {
   const localRounds = getLocalRounds(votingHistory?.dispute?.disputeKitDispute);
   const ruled = disputeDetails?.dispute?.ruled ?? false;
   const periodIndex = Periods[disputeDetails?.dispute?.period ?? "evidence"];
-  const { data: currentRulingArray } = useReadKlerosCoreCurrentRuling({
+  const { data: currentRulingArray, isLoading: isLoadingCurrentRuling } = useReadKlerosCoreCurrentRuling({
     query: { refetchInterval: REFETCH_INTERVAL },
     args: [BigInt(id ?? 0)],
     chainId: DEFAULT_CHAIN,
   });
-  const currentRuling = Number(currentRulingArray?.[0]);
-  const answer = populatedDisputeData?.answers?.[currentRuling! - 1];
+  const currentRuling = Number(currentRulingArray?.[0] ?? 0);
+
+  const answer = populatedDisputeData?.answers?.find((answer) => BigInt(answer.id) === BigInt(currentRuling));
   const rounds = votingHistory?.dispute?.rounds;
   const jurorRewardsDispersed = useMemo(() => Boolean(rounds?.every((round) => round.jurorRewardsDispersed)), [rounds]);
   const buttonText = useMemo(() => {
@@ -122,13 +123,21 @@ const FinalDecision: React.FC<IFinalDecision> = ({ arbitrable }) => {
         {ruled && (
           <JuryContainer>
             <JuryDecisionTag>The jury decided in favor of:</JuryDecisionTag>
-            <AnswerDisplay {...{ answer, currentRuling }} />
+            {isLoadingCurrentRuling ? (
+              <Skeleton height={14} width={60} />
+            ) : (
+              <AnswerDisplay {...{ answer, currentRuling }} />
+            )}
           </JuryContainer>
         )}
         {!ruled && periodIndex > 1 && localRounds?.at(localRounds.length - 1)?.totalVoted > 0 && (
           <JuryContainer>
             <JuryDecisionTag>This option is winning:</JuryDecisionTag>
-            <AnswerDisplay {...{ answer, currentRuling }} />
+            {isLoadingCurrentRuling ? (
+              <Skeleton height={14} width={60} />
+            ) : (
+              <AnswerDisplay {...{ answer, currentRuling }} />
+            )}
           </JuryContainer>
         )}
       </VerdictContainer>

web/src/hooks/useClassicAppealContext.tsx

@@ -133,11 +133,11 @@ const getCurrentLocalRound = (dispute?: ClassicAppealQuery["dispute"]) => {
 };
 
 const getOptions = (dispute?: DisputeDetails, classicDispute?: ClassicAppealQuery["dispute"]) => {
-  if (!dispute) return [];
+  if (!dispute || Object.keys(dispute).length === 0) return [];
   const currentLocalRound = getCurrentLocalRound(classicDispute);
   const classicAnswers = currentLocalRound?.answers;
 
-  const options = dispute.answers.map((answer) => {
+  const options = dispute.answers?.map((answer) => {
     const classicAnswer = classicAnswers?.find((classicAnswer) => BigInt(classicAnswer.answerId) == BigInt(answer.id));
     // converting hexadecimal id to stringified bigint to match id fomr subgraph
     return {