fix(web): answer-id-in-dispute-flow

Author: tractorss

web/src/components/Verdict/DisputeTimeline.tsx

@@ -105,7 +105,7 @@ const useItems = (disputeDetails?: DisputeDetailsQuery, arbitrable?: `0x${string
           const answers = disputeData?.answers;
           acc.push({
             title: `Jury Decision - Round ${index + 1}`,
-            party: isOngoing ? "Voting is ongoing" : getVoteChoice(parsedRoundChoice, answers),
+            party: isOngoing ? "Voting is ongoing" : getVoteChoice(winningChoice, answers),
             subtitle: isOngoing
               ? ""
               : `${formatDate(roundTimeline?.[Periods.vote])} / ${
@@ -124,10 +124,10 @@ const useItems = (disputeDetails?: DisputeDetailsQuery, arbitrable?: `0x${string
               rightSided: true,
               Icon: StyledClosedCircle,
             });
-          } else if (rulingOverride && parsedDisputeFinalRuling !== parsedRoundChoice) {
+          } else if (rulingOverride && dispute.currentRuling !== winningChoice) {
             acc.push({
               title: "Won by Appeal",
-              party: getVoteChoice(parsedDisputeFinalRuling, answers),
+              party: getVoteChoice(dispute.currentRuling, answers),
               subtitle: formatDate(roundTimeline?.[Periods.appeal]),
               rightSided: true,
               Icon: ClosedCaseIcon,

web/src/hooks/queries/useClassicAppealQuery.ts

@@ -25,7 +25,12 @@ const classicAppealQuery = graphql(`
         localRounds {
           ... on ClassicRound {
             winningChoice
-            paidFees
+            answers {
+              answerId
+              count
+              paidFee
+              funded
+            }
             fundedChoices
             appealFeesDispersed
             totalFeeDispersed

web/src/hooks/useClassicAppealContext.tsx

@@ -11,18 +11,21 @@ import { getLocalRounds } from "utils/getLocalRounds";
 import { useAppealCost } from "queries/useAppealCost";
 import { useClassicAppealQuery, ClassicAppealQuery } from "queries/useClassicAppealQuery";
 import { useDisputeKitClassicMultipliers } from "queries/useDisputeKitClassicMultipliers";
+import { Answer, DisputeDetails } from "@kleros/kleros-sdk";
 
+type Option = Answer & { paidFee?: string; funded?: boolean };
 interface ICountdownContext {
   loserSideCountdown?: number;
   winnerSideCountdown?: number;
 }
+
 const CountdownContext = createContext<ICountdownContext>({});
 
-const OptionsContext = createContext<string[] | undefined>(undefined);
+const OptionsContext = createContext<Option[] | undefined>(undefined);
 
 interface ISelectedOptionContext {
-  selectedOption: number | undefined;
-  setSelectedOption: (arg0: number) => void;
+  selectedOption: Option | undefined;
+  setSelectedOption: (arg0: Option) => void;
 }
 const SelectedOptionContext = createContext<ISelectedOptionContext>({
   selectedOption: undefined,
@@ -32,14 +35,13 @@ const SelectedOptionContext = createContext<ISelectedOptionContext>({
 
 interface IFundingContext {
   winningChoice: string | undefined;
-  paidFees: bigint[] | undefined;
   loserRequiredFunding: bigint | undefined;
   winnerRequiredFunding: bigint | undefined;
   fundedChoices: string[] | undefined;
 }
+
 const FundingContext = createContext<IFundingContext>({
   winningChoice: undefined,
-  paidFees: undefined,
   loserRequiredFunding: undefined,
   winnerRequiredFunding: undefined,
   fundedChoices: undefined,
@@ -51,17 +53,16 @@ export const ClassicAppealProvider: React.FC<{
   const { id } = useParams();
   const { data } = useClassicAppealQuery(id);
   const dispute = data?.dispute;
-  const paidFees = getPaidFees(data?.dispute);
   const winningChoice = getWinningChoice(data?.dispute);
   const { data: appealCost } = useAppealCost(id);
   const arbitrable = data?.dispute?.arbitrated.id;
-  const { data: disputeDetails } = usePopulatedDisputeData(id, arbitrable);
+  const { data: disputeDetails } = usePopulatedDisputeData(id, arbitrable as `0x${string}`);
   const { data: multipliers } = useDisputeKitClassicMultipliers();
-  const options = ["Refuse to Arbitrate"].concat(
-    disputeDetails?.answers?.map((answer: { title: string; description: string }) => {
-      return answer.title;
-    })
-  );
+
+  const [selectedOption, setSelectedOption] = useState<Option>();
+
+  const options = useMemo(() => getOptions(disputeDetails, data?.dispute), [disputeDetails, data]);
+
   const loserSideCountdown = useLoserSideCountdown(
     dispute?.lastPeriodChange,
     dispute?.court.timesPerPeriod[Periods.appeal],
@@ -81,7 +82,6 @@ export const ClassicAppealProvider: React.FC<{
     [appealCost, multipliers]
   );
   const fundedChoices = getFundedChoices(data?.dispute);
-  const [selectedOption, setSelectedOption] = useState<number | undefined>();
 
   return (
     <CountdownContext.Provider
@@ -94,12 +94,11 @@ export const ClassicAppealProvider: React.FC<{
           value={useMemo(
             () => ({
               winningChoice,
-              paidFees,
               loserRequiredFunding,
               winnerRequiredFunding,
               fundedChoices,
             }),
-            [winningChoice, paidFees, loserRequiredFunding, winnerRequiredFunding, fundedChoices]
+            [winningChoice, loserRequiredFunding, winnerRequiredFunding, fundedChoices]
           )}
         >
           <OptionsContext.Provider value={options}>{children}</OptionsContext.Provider>
@@ -126,9 +125,22 @@ const getCurrentLocalRound = (dispute?: ClassicAppealQuery["dispute"]) => {
   return getLocalRounds(dispute.disputeKitDispute)[adjustedRoundIndex];
 };
 
-const getPaidFees = (dispute?: ClassicAppealQuery["dispute"]) => {
-  const currentLocalRound = getCurrentLocalRound(dispute);
-  return currentLocalRound?.paidFees.map((amount: string) => BigInt(amount));
+const getOptions = (dispute?: DisputeDetails, classicDispute?: ClassicAppealQuery["dispute"]) => {
+  if (!dispute) return [];
+  const currentLocalRound = getCurrentLocalRound(classicDispute);
+  const classicAnswers = currentLocalRound?.answers;
+
+  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 {
+      ...answer,
+      id: BigInt(answer.id).toString(),
+      paidFee: classicAnswer?.paidFee ?? "0",
+      funded: classicAnswer?.funded ?? false,
+    };
+  });
+  return options;
 };
 
 const getFundedChoices = (dispute?: ClassicAppealQuery["dispute"]) => {

web/src/pages/Cases/CaseDetails/Appeal/AppealHistory.tsx

@@ -25,7 +25,7 @@ interface IAppealHistory {
 
 const AppealHistory: React.FC<IAppealHistory> = ({ isAppealMiniGuideOpen, toggleAppealMiniGuide }) => {
   const options = useOptionsContext();
-  const { winningChoice, paidFees, fundedChoices } = useFundingContext();
+  const { winningChoice, fundedChoices } = useFundingContext();
 
   return options && options.length > 2 ? (
     <div>
@@ -38,13 +38,13 @@ const AppealHistory: React.FC<IAppealHistory> = ({ isAppealMiniGuideOpen, toggle
         />
       </AppealHeader>
       <OptionsContainer>
-        {options.map((option, index) => (
+        {options?.map((option) => (
           <OptionCard
-            key={option + index}
-            text={option}
-            winner={index.toString() === winningChoice}
-            funding={BigInt(paidFees?.[index] ?? "0")}
-            required={fundedChoices?.includes(index.toString()) ? BigInt(paidFees?.[index] ?? "0") : undefined}
+            key={option.id}
+            text={option.title}
+            winner={option.id === winningChoice}
+            funding={BigInt(option.paidFee ?? 0)}
+            required={fundedChoices?.includes(option.id) ? BigInt(option.paidFee ?? 0) : undefined}
             canBeSelected={false}
           />
         ))}

web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx

@@ -73,7 +73,7 @@ const useFundAppeal = (parsedAmount, insufficientBalance) => {
     query: {
       enabled: !isUndefined(id) && !isUndefined(selectedOption) && !insufficientBalance,
     },
-    args: [BigInt(id ?? 0), BigInt(selectedOption ?? 0)],
+    args: [BigInt(id ?? 0), BigInt(selectedOption?.id ?? 0)],
     value: parsedAmount,
   });
 

web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/StageOne.tsx

@@ -29,7 +29,7 @@ interface IStageOne {
 }
 
 const StageOne: React.FC<IStageOne> = ({ setAmount }) => {
-  const { paidFees, winningChoice, loserRequiredFunding, winnerRequiredFunding, fundedChoices } = useFundingContext();
+  const { winningChoice, loserRequiredFunding, winnerRequiredFunding } = useFundingContext();
   const options = useOptionsContext();
   const { loserSideCountdown } = useCountdownContext();
   const { selectedOption, setSelectedOption } = useSelectedOptionContext();
@@ -39,22 +39,21 @@ const StageOne: React.FC<IStageOne> = ({ setAmount }) => {
       <StageExplainer countdown={loserSideCountdown} stage={1} />
       <label> Which option do you want to fund? </label>
       <OptionsContainer>
-        {!isUndefined(paidFees) &&
-          !isUndefined(winnerRequiredFunding) &&
+        {!isUndefined(winnerRequiredFunding) &&
           !isUndefined(loserRequiredFunding) &&
-          options?.map((answer: string, i: number) => {
-            const requiredFunding = i.toString() === winningChoice ? winnerRequiredFunding : loserRequiredFunding;
+          options?.map((option) => {
+            const requiredFunding = option.id === winningChoice ? winnerRequiredFunding : loserRequiredFunding;
             return (
               <OptionCard
-                key={answer}
-                text={answer}
-                selected={i === selectedOption}
-                winner={i.toString() === winningChoice}
-                funding={paidFees[i] ? BigInt(paidFees[i]) : 0n}
+                key={option.id}
+                text={option.title}
+                selected={option.id === selectedOption?.id}
+                winner={option.id === winningChoice}
+                funding={BigInt(option.paidFee ?? 0)}
                 required={requiredFunding}
-                canBeSelected={!fundedChoices?.includes(i.toString())}
+                canBeSelected={!option?.funded}
                 onClick={() => {
-                  setSelectedOption(i);
+                  setSelectedOption(option);
                   setAmount(formatUnitsWei(requiredFunding));
                 }}
               />

web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/StageTwo.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useMemo } from "react";
 import styled from "styled-components";
 
 import Skeleton from "react-loading-skeleton";
@@ -31,31 +31,33 @@ interface IStageTwo {
 }
 
 const StageTwo: React.FC<IStageTwo> = ({ setAmount }) => {
-  const { paidFees, winningChoice, winnerRequiredFunding, fundedChoices } = useFundingContext();
+  const { winningChoice, winnerRequiredFunding, fundedChoices } = useFundingContext();
   const { winnerSideCountdown } = useCountdownContext();
   const options = useOptionsContext();
   const { selectedOption, setSelectedOption } = useSelectedOptionContext();
+  const choice = useMemo(() => options?.find((option) => option.id === winningChoice), [options, winningChoice]);
+
   useEffect(() => {
-    if (!isUndefined(winningChoice)) setSelectedOption(parseInt(winningChoice));
+    if (!isUndefined(choice)) setSelectedOption(choice);
     if (!isUndefined(winnerRequiredFunding)) setAmount(formatUnitsWei(winnerRequiredFunding));
-  }, [winnerRequiredFunding, winningChoice]);
+  }, [winnerRequiredFunding, choice]);
 
   return (
     <Container>
-      {!isUndefined(winningChoice) && !isUndefined(fundedChoices) && !isUndefined(paidFees) ? (
+      {!isUndefined(choice) && !isUndefined(fundedChoices) ? (
         <>
-          {fundedChoices.length > 0 && !fundedChoices.includes(winningChoice) ? (
+          {fundedChoices.length > 0 && !choice.funded ? (
             <>
               <StageExplainer stage={2} countdown={winnerSideCountdown} />
               <OptionsContainer>
                 <OptionCard
-                  text={options![winningChoice!]}
-                  selected={parseInt(winningChoice) === selectedOption}
+                  text={choice.title}
+                  selected={choice.id === selectedOption?.id}
                   winner={true}
-                  funding={paidFees![winningChoice!] ? BigInt(paidFees![winningChoice!]) : 0n}
+                  funding={BigInt(choice.paidFee ?? 0)}
                   required={winnerRequiredFunding!}
                   canBeSelected={false}
-                  onClick={() => setSelectedOption(parseInt(winningChoice!, 10))}
+                  onClick={() => setSelectedOption(choice)}
                 />
               </OptionsContainer>
             </>

web/src/pages/Cases/CaseDetails/Appeal/Classic/StageExplainer.tsx

@@ -1,13 +1,11 @@
 import React from "react";
 import styled from "styled-components";
 
-import Skeleton from "react-loading-skeleton";
-
 import { Box } from "@kleros/ui-components-library";
 
 import HourglassIcon from "svgs/icons/hourglass.svg";
 
-import { useFundingContext, useOptionsContext } from "hooks/useClassicAppealContext";
+import { useOptionsContext } from "hooks/useClassicAppealContext";
 import { secondsToDayHourMinute } from "utils/date";
 import { isUndefined } from "utils/index";
 
@@ -56,7 +54,6 @@ const StageOneExplanation: React.FC = () => (
 );
 
 const StageTwoExplanation: React.FC = () => {
-  const { fundedChoices } = useFundingContext();
   const options = useOptionsContext();
   return (
     <div>
@@ -69,14 +66,8 @@ const StageTwoExplanation: React.FC = () => {
       </label>
       <label>
         {" "}
-        Following choice was funded in the stage 1 :{" "}
-        <small>
-          {!isUndefined(fundedChoices) && !isUndefined(options)
-            ? fundedChoices.map((choice) =>
-                isUndefined(options[choice]) ? <Skeleton key={choice} width={50} height={18} /> : options[choice]
-              )
-            : null}
-        </small>
+        Following choices were funded in the stage 1 :{" "}
+        <small>{options?.map((option) => (option?.funded ? option.title : null))}</small>
       </label>
     </div>
   );

web/src/pages/Cases/CaseDetails/Appeal/Classic/index.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 
 import AppealIcon from "svgs/icons/appeal.svg";
 
-import { useOptionsContext, useSelectedOptionContext } from "hooks/useClassicAppealContext";
+import { useSelectedOptionContext } from "hooks/useClassicAppealContext";
 import { isUndefined } from "utils/index";
 
 import HowItWorks from "components/HowItWorks";
@@ -23,7 +23,6 @@ const Classic: React.FC<IClassic> = ({ isAppealMiniGuideOpen, toggleAppealMiniGu
   const [isPopupOpen, setIsPopupOpen] = useState(false);
   const [amount, setAmount] = useState("");
   const { selectedOption } = useSelectedOptionContext();
-  const options = useOptionsContext();
 
   return (
     <>
@@ -34,7 +33,7 @@ const Classic: React.FC<IClassic> = ({ isAppealMiniGuideOpen, toggleAppealMiniGu
           popupType={PopupType.APPEAL}
           setIsOpen={setIsPopupOpen}
           setAmount={setAmount}
-          option={!isUndefined(options) && !isUndefined(selectedOption) ? options[selectedOption] : ""}
+          option={!isUndefined(selectedOption) ? selectedOption.title : ""}
           amount={amount}
         />
       )}
@@ -48,7 +47,7 @@ const Classic: React.FC<IClassic> = ({ isAppealMiniGuideOpen, toggleAppealMiniGu
       </AppealHeader>
       <label> The jury decision is appealed when two options are fully funded. </label>
       <Options setAmount={setAmount} />
-      <Fund amount={amount} setAmount={setAmount} setIsOpen={setIsPopupOpen} />
+      <Fund amount={amount as `${number}`} setAmount={setAmount} setIsOpen={setIsPopupOpen} />
     </>
   );
 };

web/src/pages/Cases/CaseDetails/Voting/Classic/Commit.tsx

@@ -44,7 +44,7 @@ const Commit: React.FC<ICommit> = ({ arbitrable, voteIDs, setIsOpen, refetch })
   const [_, setSalt] = useLocalStorage(saltKey);
 
   const handleCommit = useCallback(
-    async (choice: number) => {
+    async (choice: bigint) => {
       const message = { message: saltKey };
       const rawSalt = !isUndefined(signingAccount)
         ? await signingAccount.signMessage(message)
@@ -56,12 +56,12 @@ const Commit: React.FC<ICommit> = ({ arbitrable, voteIDs, setIsOpen, refetch })
       if (isUndefined(rawSalt)) return;
 
       const salt = keccak256(rawSalt);
-      setSalt(JSON.stringify({ salt, choice }));
+      setSalt(JSON.stringify({ salt, choice: choice.toString() }));
       const commit = keccak256(encodePacked(["uint256", "uint256"], [BigInt(choice), BigInt(salt)]));
       const { request } = await simulateDisputeKitClassicCastCommit(wagmiConfig, {
         args: [parsedDisputeID, parsedVoteIDs, commit],
       });
-      if (walletClient) {
+      if (walletClient && publicClient) {
         await wrapWithToast(async () => await walletClient.writeContract(request), publicClient).then(({ status }) => {
           setIsOpen(status);
         });