diff --git a/web/src/components/Verdict/Answer.tsx b/web/src/components/Verdict/Answer.tsx new file mode 100644 index 000000000..2f6335779 --- /dev/null +++ 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 = ({ answer, currentRuling }) => { + return ( + <> + {answer ? ( +
+ {answer.title} + {answer.description} +
+ ) : ( + <>{currentRuling !== 0 ?

Answer 0x{currentRuling}

:

Refuse to Arbitrate

} + )} + + ); +}; +export default AnswerDisplay; diff --git a/web/src/components/Verdict/FinalDecision.tsx b/web/src/components/Verdict/FinalDecision.tsx index 489fe585f..f69ef86ac 100644 --- 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 = ({ 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 = ({ arbitrable }) => { - - {ruled ? ( + {ruled && ( + The jury decided in favor of: - ) : ( + + + )} + {!ruled && periodIndex > 1 && localRounds?.at(localRounds.length - 1)?.totalVoted > 0 && ( + This option is winning: - )} - {answer ? ( -
- {answer.title} - {answer.description} -
- ) : ( - <>{currentRuling !== 0 ?

Answer 0x{currentRuling}

:

Refuse to Arbitrate

} - )} -
+ +
+ )} {isLoading && !isDisconnected ? ( diff --git a/web/src/pages/Cases/CaseDetails/Voting/Classic/Vote.tsx b/web/src/pages/Cases/CaseDetails/Voting/Classic/Vote.tsx index 0adc7d087..075c3f2d9 100644 --- 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 = ({ 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 index b79a57dfb..84242f47c 100644 --- 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 {rounds && localRounds && disputeDetails ? ( <> - {isQuestion && disputeDetails.question ? ( - {disputeDetails.question} - ) : ( - {isError ? RPC_ERROR : INVALID_DISPUTE_DATA_ERROR} + {isQuestion && ( + <> + {disputeDetails.question ? ( + {disputeDetails.question} + ) : ( + {isError ? RPC_ERROR : INVALID_DISPUTE_DATA_ERROR} + )} + )}