Merge pull request #983 from kleros/feat(web)/improve-voting-logic

alcercu · web-flow · commit 1fdb2e3be10b · 2023-06-27T17:22:09.000+02:00
Feat(web): use round index when voting
diff --git a/web/package.json b/web/package.json
@@ -60,7 +60,7 @@
   },
   "dependencies": {
     "@kleros/kleros-v2-contracts": "workspace:^",
-    "@kleros/ui-components-library": "^1.9.2",
+    "@kleros/ui-components-library": "^2.5.2",
     "@sentry/react": "^7.55.2",
     "@sentry/tracing": "^7.55.2",
     "@types/react-modal": "^3.16.0",
diff --git a/web/src/graphql/gql.ts b/web/src/graphql/gql.ts
@@ -23,9 +23,9 @@ const documents = {
     types.CourtPolicyUriDocument,
   '\n  query CourtTree {\n    court(id: "1") {\n      name\n      id\n      children(orderBy: name) {\n        name\n        id\n        children {\n          name\n          id\n          children {\n            name\n            id\n            children {\n              name\n              id\n              children {\n                name\n                id\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n':
     types.CourtTreeDocument,
-  "\n  query DisputeDetails($disputeID: ID!) {\n    dispute(id: $disputeID) {\n      court {\n        id\n        timesPerPeriod\n        hiddenVotes\n        feeForJuror\n      }\n      arbitrated {\n        id\n      }\n      period\n      ruled\n      lastPeriodChange\n    }\n  }\n":
+  "\n  query DisputeDetails($disputeID: ID!) {\n    dispute(id: $disputeID) {\n      court {\n        id\n        timesPerPeriod\n        hiddenVotes\n        feeForJuror\n      }\n      arbitrated {\n        id\n      }\n      period\n      ruled\n      lastPeriodChange\n      currentRound {\n        id\n      }\n      currentRoundIndex\n    }\n  }\n":
     types.DisputeDetailsDocument,
-  "\n  query Draw($address: String, $disputeID: String) {\n    draws(where: { dispute: $disputeID, juror: $address }) {\n      voteID\n    }\n  }\n":
+  "\n  query Draw($address: String, $disputeID: String, $roundID: String) {\n    draws(where: { dispute: $disputeID, juror: $address, round: $roundID }) {\n      voteID\n    }\n  }\n":
     types.DrawDocument,
   "\n  query Evidences($evidenceGroup: String) {\n    evidences(where: { evidenceGroup: $evidenceGroup }, orderBy: id, orderDirection: asc) {\n      id\n      evidence\n      sender {\n        id\n      }\n    }\n  }\n":
     types.EvidencesDocument,
@@ -83,14 +83,14 @@ export function graphql(
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(
-  source: "\n  query DisputeDetails($disputeID: ID!) {\n    dispute(id: $disputeID) {\n      court {\n        id\n        timesPerPeriod\n        hiddenVotes\n        feeForJuror\n      }\n      arbitrated {\n        id\n      }\n      period\n      ruled\n      lastPeriodChange\n    }\n  }\n"
-): (typeof documents)["\n  query DisputeDetails($disputeID: ID!) {\n    dispute(id: $disputeID) {\n      court {\n        id\n        timesPerPeriod\n        hiddenVotes\n        feeForJuror\n      }\n      arbitrated {\n        id\n      }\n      period\n      ruled\n      lastPeriodChange\n    }\n  }\n"];
+  source: "\n  query DisputeDetails($disputeID: ID!) {\n    dispute(id: $disputeID) {\n      court {\n        id\n        timesPerPeriod\n        hiddenVotes\n        feeForJuror\n      }\n      arbitrated {\n        id\n      }\n      period\n      ruled\n      lastPeriodChange\n      currentRound {\n        id\n      }\n      currentRoundIndex\n    }\n  }\n"
+): (typeof documents)["\n  query DisputeDetails($disputeID: ID!) {\n    dispute(id: $disputeID) {\n      court {\n        id\n        timesPerPeriod\n        hiddenVotes\n        feeForJuror\n      }\n      arbitrated {\n        id\n      }\n      period\n      ruled\n      lastPeriodChange\n      currentRound {\n        id\n      }\n      currentRoundIndex\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(
-  source: "\n  query Draw($address: String, $disputeID: String) {\n    draws(where: { dispute: $disputeID, juror: $address }) {\n      voteID\n    }\n  }\n"
-): (typeof documents)["\n  query Draw($address: String, $disputeID: String) {\n    draws(where: { dispute: $disputeID, juror: $address }) {\n      voteID\n    }\n  }\n"];
+  source: "\n  query Draw($address: String, $disputeID: String, $roundID: String) {\n    draws(where: { dispute: $disputeID, juror: $address, round: $roundID }) {\n      voteID\n    }\n  }\n"
+): (typeof documents)["\n  query Draw($address: String, $disputeID: String, $roundID: String) {\n    draws(where: { dispute: $disputeID, juror: $address, round: $roundID }) {\n      voteID\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
diff --git a/web/src/graphql/graphql.ts b/web/src/graphql/graphql.ts
@@ -3661,14 +3661,17 @@ export type DisputeDetailsQuery = {
     period: Period;
     ruled: boolean;
     lastPeriodChange: any;
+    currentRoundIndex: any;
     court: { __typename?: "Court"; id: string; timesPerPeriod: Array<any>; hiddenVotes: boolean; feeForJuror: any };
     arbitrated: { __typename?: "Arbitrable"; id: string };
+    currentRound: { __typename?: "Round"; id: string };
   } | null;
 };
 
 export type DrawQueryVariables = Exact<{
   address?: InputMaybe<Scalars["String"]["input"]>;
   disputeID?: InputMaybe<Scalars["String"]["input"]>;
+  roundID?: InputMaybe<Scalars["String"]["input"]>;
 }>;
 
 export type DrawQuery = { __typename?: "Query"; draws: Array<{ __typename?: "Draw"; voteID: any }> };
@@ -4142,6 +4145,15 @@ export const DisputeDetailsDocument = {
                 { kind: "Field", name: { kind: "Name", value: "period" } },
                 { kind: "Field", name: { kind: "Name", value: "ruled" } },
                 { kind: "Field", name: { kind: "Name", value: "lastPeriodChange" } },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "currentRound" },
+                  selectionSet: {
+                    kind: "SelectionSet",
+                    selections: [{ kind: "Field", name: { kind: "Name", value: "id" } }],
+                  },
+                },
+                { kind: "Field", name: { kind: "Name", value: "currentRoundIndex" } },
               ],
             },
           },
@@ -4168,6 +4180,11 @@ export const DrawDocument = {
           variable: { kind: "Variable", name: { kind: "Name", value: "disputeID" } },
           type: { kind: "NamedType", name: { kind: "Name", value: "String" } },
         },
+        {
+          kind: "VariableDefinition",
+          variable: { kind: "Variable", name: { kind: "Name", value: "roundID" } },
+          type: { kind: "NamedType", name: { kind: "Name", value: "String" } },
+        },
       ],
       selectionSet: {
         kind: "SelectionSet",
@@ -4192,6 +4209,11 @@ export const DrawDocument = {
                       name: { kind: "Name", value: "juror" },
                       value: { kind: "Variable", name: { kind: "Name", value: "address" } },
                     },
+                    {
+                      kind: "ObjectField",
+                      name: { kind: "Name", value: "round" },
+                      value: { kind: "Variable", name: { kind: "Name", value: "roundID" } },
+                    },
                   ],
                 },
               },
diff --git a/web/src/hooks/queries/useDisputeDetailsQuery.ts b/web/src/hooks/queries/useDisputeDetailsQuery.ts
@@ -18,6 +18,10 @@ const disputeDetailsQuery = graphql(`
       period
       ruled
       lastPeriodChange
+      currentRound {
+        id
+      }
+      currentRoundIndex
     }
   }
 `);
diff --git a/web/src/hooks/queries/useDisputeTemplate.ts b/web/src/hooks/queries/useDisputeTemplate.ts
@@ -2,7 +2,7 @@ import useSWRImmutable from "swr/immutable";
 import { usePublicClient } from "wagmi";
 import { getIArbitrableV2 } from "hooks/contracts/generated";
 
-export const useDisputeTemplate = (disputeID?: string, arbitrableAddress?: `0x{string}`) => {
+export const useDisputeTemplate = (disputeID?: string, arbitrableAddress?: `0x${string}`) => {
   const publicClient = usePublicClient();
   return useSWRImmutable(
     () => (arbitrableAddress ? `DisputeTemplate${disputeID}${arbitrableAddress}` : false),
diff --git a/web/src/hooks/queries/useDrawQuery.ts b/web/src/hooks/queries/useDrawQuery.ts
@@ -4,16 +4,16 @@ import { DrawQuery } from "src/graphql/graphql";
 export type { DrawQuery };
 
 const drawQuery = graphql(`
-  query Draw($address: String, $disputeID: String) {
-    draws(where: { dispute: $disputeID, juror: $address }) {
+  query Draw($address: String, $disputeID: String, $roundID: String) {
+    draws(where: { dispute: $disputeID, juror: $address, round: $roundID }) {
       voteID
     }
   }
 `);
 
-export const useDrawQuery = (address?: string | null, disputeID?: string) => {
+export const useDrawQuery = (address?: string | null, disputeID?: string, roundID?: string) => {
   return useSWR<DrawQuery>({
     query: drawQuery,
-    variables: { address, disputeID },
+    variables: { address, disputeID, roundID },
   });
 };
diff --git a/web/src/pages/Cases/CaseDetails/Voting/Binary.tsx b/web/src/pages/Cases/CaseDetails/Voting/Binary.tsx
@@ -1,12 +1,13 @@
 import React, { useMemo, useState } from "react";
 import styled from "styled-components";
 import { useParams } from "react-router-dom";
+import { useWalletClient } from "wagmi";
 import { Button, Textarea } from "@kleros/ui-components-library";
-import { useDisputeTemplate } from "queries/useDisputeTemplate";
+import { prepareWriteDisputeKitClassic } from "hooks/contracts/generated";
 import { wrapWithToast } from "utils/wrapWithToast";
-import { useWalletClient } from "wagmi";
+import { useDisputeTemplate } from "queries/useDisputeTemplate";
+import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery";
 import { EnsureChain } from "components/EnsureChain";
-import { prepareWriteDisputeKitClassic } from "hooks/contracts/generated";
 
 const Container = styled.div`
   width: 100%;
@@ -43,11 +44,12 @@ const RefuseToArbitrateContainer = styled.div`
   justify-content: center;
 `;
 
-const Binary: React.FC<{ arbitrable?: string; voteIDs: string[] }> = ({ arbitrable, voteIDs }) => {
+const Binary: React.FC<{ arbitrable: `0x${string}`; voteIDs: string[] }> = ({ arbitrable, voteIDs }) => {
   const { id } = useParams();
   const parsedDisputeID = BigInt(id ?? 0);
   const parsedVoteIDs = useMemo(() => voteIDs.map((voteID) => BigInt(voteID)), [voteIDs]);
   const { data: disputeTemplate } = useDisputeTemplate(id, arbitrable);
+  const { data: disputeData } = useDisputeDetailsQuery(id);
   const [chosenOption, setChosenOption] = useState(-1);
   const [isSending, setIsSending] = useState(false);
   const [justification, setJustification] = useState("");
@@ -58,7 +60,13 @@ const Binary: React.FC<{ arbitrable?: string; voteIDs: string[] }> = ({ arbitrab
     setChosenOption(voteOption);
     const { request } = await prepareWriteDisputeKitClassic({
       functionName: "castVote",
-      args: [parsedDisputeID, parsedVoteIDs, BigInt(voteOption), 0n, justification],
+      args: [
+        parsedDisputeID,
+        parsedVoteIDs,
+        BigInt(voteOption),
+        BigInt(disputeData?.dispute?.currentRoundIndex),
+        justification,
+      ],
     });
     if (walletClient) {
       wrapWithToast(walletClient.writeContract(request)).finally(() => {
diff --git a/web/src/pages/Cases/CaseDetails/Voting/VotingHistory.tsx b/web/src/pages/Cases/CaseDetails/Voting/VotingHistory.tsx
@@ -35,8 +35,18 @@ const StyledBox = styled(Box)`
 const StyledAccordion = styled(Accordion)`
   width: 100%;
   > * > button {
+    justify-content: unset;
+    padding: 11.5px 18px;
     background-color: ${({ theme }) => theme.whiteBackground} !important;
     border: 1px solid ${({ theme }) => theme.stroke} !important;
+    > p {
+      margin-left: 12px;
+      margin-right: auto;
+      color: ${({ theme }) => theme.primaryText};
+    }
+    > svg {
+      fill: ${({ theme }) => theme.primaryText} !important;
+    }
   }
   > * > div > div {
     padding: 8px 16px;
@@ -75,7 +85,7 @@ const JustificationContainer = styled.div`
   }
 `;
 
-const VotingHistory: React.FC<{ arbitrable?: string }> = ({ arbitrable }) => {
+const VotingHistory: React.FC<{ arbitrable?: `0x${string}` }> = ({ arbitrable }) => {
   const { id } = useParams();
   const { data: votingHistory } = useVotingHistory(id);
   const [currentTab, setCurrentTab] = useState(0);
@@ -108,7 +118,7 @@ const VotingHistory: React.FC<{ arbitrable?: string }> = ({ arbitrable }) => {
             items={
               localRounds.at(currentTab)?.votes.map((vote) => ({
                 title: shortenAddress(vote.juror.id),
-                Icon: <Jazzicon diameter={24} seed={jsNumberForAddress(vote.juror.id)} />,
+                icon: <Jazzicon diameter={20} seed={jsNumberForAddress(vote.juror.id)} />,
                 body: (
                   <AccordionContent
                     choice={vote.choice === 0 ? "Refuse to arbitrate" : disputeTemplate.answers[vote.choice - 1].title}
diff --git a/web/src/pages/Cases/CaseDetails/Voting/index.tsx b/web/src/pages/Cases/CaseDetails/Voting/index.tsx
@@ -1,25 +1,23 @@
 import React from "react";
 import { useParams } from "react-router-dom";
 import { useAccount } from "wagmi";
+import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery";
 import { useDrawQuery } from "queries/useDrawQuery";
 import Binary from "./Binary";
 import VotingHistory from "./VotingHistory";
 import { Periods } from "consts/periods";
+import { isUndefined } from "utils/index";
 
 const Voting: React.FC<{
-  arbitrable?: string;
+  arbitrable?: `0x${string}`;
   currentPeriodIndex?: number;
 }> = ({ arbitrable, currentPeriodIndex }) => {
   const { address } = useAccount();
   const { id } = useParams();
-  const { data } = useDrawQuery(address?.toLowerCase(), id);
-  return data &&
-    currentPeriodIndex === Periods.vote &&
-    data.draws?.length > 0 ? (
-    <Binary
-      {...{ arbitrable }}
-      voteIDs={data.draws.map((draw) => draw.voteID)}
-    />
+  const { data: disputeData } = useDisputeDetailsQuery(id);
+  const { data } = useDrawQuery(address?.toLowerCase(), id, disputeData?.dispute?.currentRound.id);
+  return data && !isUndefined(arbitrable) && currentPeriodIndex === Periods.vote && data.draws?.length > 0 ? (
+    <Binary {...{ arbitrable }} voteIDs={data.draws.map((draw) => draw.voteID)} />
   ) : (
     <VotingHistory {...{ arbitrable }} />
   );
diff --git a/web/src/pages/Cases/CaseDetails/index.tsx b/web/src/pages/Cases/CaseDetails/index.tsx
@@ -16,7 +16,7 @@ const CaseDetails: React.FC = () => {
   const { data } = useDisputeDetailsQuery(id);
   const dispute = data?.dispute;
   const currentPeriodIndex = dispute ? Periods[dispute.period] : 0;
-  const arbitrable = dispute?.arbitrated.id;
+  const arbitrable = dispute?.arbitrated.id as `0x${string}`;
 
   return (
     <Container>
diff --git a/web/src/styles/themes.ts b/web/src/styles/themes.ts
@@ -1,4 +1,7 @@
+import { lightTheme as componentsLightTheme, darkTheme as componentsDarkTheme } from "@kleros/ui-components-library";
+
 export const lightTheme = {
+  ...componentsLightTheme,
   primaryPurple: "#4D00B4",
   secondaryPurple: "#9013FE",
   mediumPurple: "#F8F1FF",
@@ -34,6 +37,7 @@ export const lightTheme = {
 };
 
 export const darkTheme = {
+  ...componentsDarkTheme,
   primaryPurple: "#7E1BD4",
   secondaryPurple: "#B45FFF",
   mediumPurple: "#390F6C",
diff --git a/yarn.lock b/yarn.lock
@@ -4042,7 +4042,7 @@ __metadata:
     "@kleros/kleros-v2-eslint-config": "workspace:^"
     "@kleros/kleros-v2-prettier-config": "workspace:^"
     "@kleros/kleros-v2-tsconfig": "workspace:^"
-    "@kleros/ui-components-library": ^1.9.2
+    "@kleros/ui-components-library": ^2.5.2
     "@netlify/functions": ^1.6.0
     "@parcel/transformer-svg-react": ~2.8.0
     "@parcel/watcher": ~2.1.0
@@ -4094,9 +4094,9 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@kleros/ui-components-library@npm:^1.9.2":
-  version: 1.9.2
-  resolution: "@kleros/ui-components-library@npm:1.9.2"
+"@kleros/ui-components-library@npm:^2.5.2":
+  version: 2.5.2
+  resolution: "@kleros/ui-components-library@npm:2.5.2"
   dependencies:
     "@datepicker-react/hooks": ^2.8.4
     "@swc/helpers": ^0.3.2
@@ -4107,12 +4107,13 @@ __metadata:
     simplebar: ^5.3.6
     simplebar-react: ^2.3.6
     smooth-scroll-into-view-if-needed: ^1.1.33
+    usehooks-ts: ^2.9.1
   peerDependencies:
     react: ^18.0.0
     react-dom: ^18.0.0
     react-is: ^18.0.0
     styled-components: ^5.3.3
-  checksum: 42dfddf1bf2e09be7f9350c173b371b29fdf22b25fb56c6500685d33bc63369ef316c05f0a8b7e81217abbab82557f8300de45357c6ec0d388882ca9d9c3c849
+  checksum: 159a999c4e13fb288f1594a677f325002552a06cf3c01e5139a16e2749a795934c3876e7e62eb0401ebeec85dec3ae9c66d9a14ff83de8134c58b0eadbbe6883
   languageName: node
   linkType: hard
 
@@ -28259,6 +28260,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"usehooks-ts@npm:^2.9.1":
+  version: 2.9.1
+  resolution: "usehooks-ts@npm:2.9.1"
+  peerDependencies:
+    react: ^16.8.0  || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0  || ^17.0.0 || ^18.0.0
+  checksum: 36f1e4142ce23bc019b81d2e93aefd7f2c350abcf255598c21627114a69a2f2f116b35dc3a353375f09c6e4c9b704a04f104e3d10e98280545c097feca66c30a
+  languageName: node
+  linkType: hard
+
 "utf-8-validate@npm:^5.0.2":
   version: 5.0.10
   resolution: "utf-8-validate@npm:5.0.10"

Original file line number	Diff line number	Diff line change
@@ -18,6 +18,10 @@ const disputeDetailsQuery = graphql(`
`18`	`18`	`period`
`19`	`19`	`ruled`
`20`	`20`	`lastPeriodChange`
	`21`	`+ currentRound {`
	`22`	`+ id`
	`23`	`+ }`
	`24`	`+ currentRoundIndex`
`21`	`25`	`}`
`22`	`26`	`}`
`23`	`27`	`);