Merge pull request #1485 from kleros/fix(web)/fix-case-ongoing-details

Fix(web)/fix case ongoing details
kleros · Feb 6, 2024 · ad24ce1 · ad24ce1
2 parents b2eccc6 + 5db5e17
commit ad24ce1
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 23 deletions.
diff --git a/web/src/components/Verdict/Answer.tsx b/web/src/components/Verdict/Answer.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import { Answer } from "@kleros/kleros-sdk/src/dataMappings/utils/disputeDetailsTypes";
+import styled from "styled-components";
+
+const AnswerTitle = styled.h3`
+  margin: 0;
+`;
+interface IAnswer {
+  answer?: Answer;
+  currentRuling: number;
+}
+const AnswerDisplay: React.FC<IAnswer> = ({ answer, currentRuling }) => {
+  return (
+    <>
+      {answer ? (
+        <div>
+          <AnswerTitle>{answer.title}</AnswerTitle>
+          <small>{answer.description}</small>
+        </div>
+      ) : (
+        <>{currentRuling !== 0 ? <h3>Answer 0x{currentRuling}</h3> : <h3>Refuse to Arbitrate</h3>}</>
+      )}
+    </>
+  );
+};
+export default AnswerDisplay;
diff --git a/web/src/components/Verdict/FinalDecision.tsx b/web/src/components/Verdict/FinalDecision.tsx
@@ -11,6 +11,10 @@ import { responsiveSize } from "styles/responsiveSize";
 import { useVotingContext } from "hooks/useVotingContext";
 import Skeleton from "react-loading-skeleton";
 import { useAccount } from "wagmi";
+import AnswerDisplay from "./Answer";
+import { useVotingHistory } from "hooks/queries/useVotingHistory";
+import { getLocalRounds } from "utils/getLocalRounds";
+import { Periods } from "consts/periods";
 
 const Container = styled.div`
   width: 100%;
@@ -42,10 +46,6 @@ const StyledButton = styled(LightButton)`
   padding-top: 0px;
 `;
 
-const AnswerTitle = styled.h3`
-  margin: 0;
-`;
-
 const Divider = styled.hr`
   display: flex;
   border: none;
@@ -64,7 +64,10 @@ const FinalDecision: React.FC<IFinalDecision> = ({ arbitrable }) => {
   const { data: populatedDisputeData } = usePopulatedDisputeData(id, arbitrable);
   const { data: disputeDetails } = useDisputeDetailsQuery(id);
   const { wasDrawn, hasVoted, isLoading, isCommitPeriod, isVotingPeriod, commited, isHiddenVotes } = useVotingContext();
+  const { data: votingHistory } = useVotingHistory(id);
+  const localRounds = getLocalRounds(votingHistory?.dispute?.disputeKitDispute);
   const ruled = disputeDetails?.dispute?.ruled ?? false;
+  const periodIndex = Periods[disputeDetails?.dispute?.period ?? "evidence"];
   const navigate = useNavigate();
   const { data: currentRulingArray } = useKlerosCoreCurrentRuling({ args: [BigInt(id ?? 0)], watch: true });
   const currentRuling = Number(currentRulingArray?.[0]);
@@ -81,21 +84,18 @@ const FinalDecision: React.FC<IFinalDecision> = ({ arbitrable }) => {
     <Container>
       <VerdictBanner ruled={ruled} />
 
-      <JuryContainer>
-        {ruled ? (
+      {ruled && (
+        <JuryContainer>
           <JuryDecisionTag>The jury decided in favor of:</JuryDecisionTag>
-        ) : (
+          <AnswerDisplay {...{ answer, currentRuling }} />
+        </JuryContainer>
+      )}
+      {!ruled && periodIndex > 1 && localRounds?.at(localRounds.length - 1)?.totalVoted > 0 && (
+        <JuryContainer>
           <JuryDecisionTag>This option is winning:</JuryDecisionTag>
-        )}
-        {answer ? (
-          <div>
-            <AnswerTitle>{answer.title}</AnswerTitle>
-            <small>{answer.description}</small>
-          </div>
-        ) : (
-          <>{currentRuling !== 0 ? <h3>Answer 0x{currentRuling}</h3> : <h3>Refuse to Arbitrate</h3>}</>
-        )}
-      </JuryContainer>
+          <AnswerDisplay {...{ answer, currentRuling }} />
+        </JuryContainer>
+      )}
       <Divider />
       {isLoading && !isDisconnected ? (
         <Skeleton width={250} height={20} />

diff --git a/web/src/pages/Cases/CaseDetails/Voting/Classic/Vote.tsx b/web/src/pages/Cases/CaseDetails/Voting/Classic/Vote.tsx
@@ -40,8 +40,8 @@ const Vote: React.FC<IVote> = ({ arbitrable, voteIDs, setIsOpen }) => {
         ],
       });
       if (walletClient) {
-        await wrapWithToast(async () => await walletClient.writeContract(request), publicClient).then(() => {
-          setIsOpen(true);
+        await wrapWithToast(async () => await walletClient.writeContract(request), publicClient).then(({ status }) => {
+          setIsOpen(status);
         });
       }
     },

diff --git a/web/src/pages/Cases/CaseDetails/Voting/VotingHistory.tsx b/web/src/pages/Cases/CaseDetails/Voting/VotingHistory.tsx
@@ -69,10 +69,14 @@ const VotingHistory: React.FC<{ arbitrable?: `0x${string}`; isQuestion: boolean
       </Header>
       {rounds && localRounds && disputeDetails ? (
         <>
-          {isQuestion && disputeDetails.question ? (
-            <ReactMarkdown>{disputeDetails.question}</ReactMarkdown>
-          ) : (
-            <ReactMarkdown>{isError ? RPC_ERROR : INVALID_DISPUTE_DATA_ERROR}</ReactMarkdown>
+          {isQuestion && (
+            <>
+              {disputeDetails.question ? (
+                <ReactMarkdown>{disputeDetails.question}</ReactMarkdown>
+              ) : (
+                <ReactMarkdown>{isError ? RPC_ERROR : INVALID_DISPUTE_DATA_ERROR}</ReactMarkdown>
+              )}
+            </>
           )}
           <StyledTabs
             currentValue={currentTab}