Merge pull request #1647 from kleros/refactor/dispute-resolver

Refactor/dispute resolver

Author: jaybuidl

web/src/context/NewDisputeContext.tsx

@@ -1,14 +1,16 @@
-import React, { createContext, useState, useContext, useMemo } from "react";
+import React, { createContext, useState, useContext, useMemo, useCallback } from "react";
 
 import { Address } from "viem";
 
+import { DEFAULT_CHAIN } from "consts/chains";
+import { klerosCoreAddress } from "hooks/contracts/generated";
 import { useLocalStorage } from "hooks/useLocalStorage";
 import { isUndefined } from "utils/index";
 
 export type Answer = {
-  id?: string;
+  id: string;
   title: string;
-  description?: string;
+  description: string;
   reserved?: boolean;
 };
 
@@ -35,6 +37,7 @@ export interface IDisputeTemplate {
   specification?: string;
   title: string;
   aliases?: Alias;
+  version: string;
   // attachment: Attachment;
   // type: string;
 }
@@ -62,29 +65,24 @@ const initialDisputeData: IDisputeData = {
   title: "",
   description: "",
   question: "",
+  category: "",
   answers: [
-    { title: "", id: "1" },
-    { title: "", id: "2" },
-  ],
-  aliasesArray: [
-    { name: "", address: "", id: "1" },
-    { name: "", address: "", id: "2" },
+    { title: "", id: "1", description: "" },
+    { title: "", id: "2", description: "" },
   ],
+  aliasesArray: [{ name: "", address: "", id: "1" }],
+  version: "1.0",
 };
-const initialDisputeTemplate = initialDisputeData as IDisputeTemplate;
 
-const NewDisputeContext = createContext<INewDisputeContext>({
-  disputeData: initialDisputeData,
-  setDisputeData: () => {},
-  disputeTemplate: initialDisputeTemplate,
-  resetDisputeData: () => {},
-  isSubmittingCase: false,
-  setIsSubmittingCase: () => {},
-  isPolicyUploading: false,
-  setIsPolicyUploading: () => {},
-});
+const NewDisputeContext = createContext<INewDisputeContext | undefined>(undefined);
 
-export const useNewDisputeContext = () => useContext(NewDisputeContext);
+export const useNewDisputeContext = () => {
+  const context = useContext(NewDisputeContext);
+  if (!context) {
+    throw new Error("Context Provider not found.");
+  }
+  return context;
+};
 
 export const NewDisputeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [disputeData, setDisputeData] = useLocalStorage<IDisputeData>("disputeData", initialDisputeData);
@@ -93,9 +91,9 @@ export const NewDisputeProvider: React.FC<{ children: React.ReactNode }> = ({ ch
 
   const disputeTemplate = useMemo(() => constructDisputeTemplate(disputeData), [disputeData]);
 
-  const resetDisputeData = () => {
+  const resetDisputeData = useCallback(() => {
     setDisputeData(initialDisputeData);
-  };
+  }, [setDisputeData]);
 
   const contextValues = useMemo(
     () => ({
@@ -108,14 +106,15 @@ export const NewDisputeProvider: React.FC<{ children: React.ReactNode }> = ({ ch
       isPolicyUploading,
       setIsPolicyUploading,
     }),
-    [disputeData, disputeTemplate, resetDisputeData, isSubmittingCase, isPolicyUploading]
+    [disputeData, disputeTemplate, resetDisputeData, isSubmittingCase, isPolicyUploading, setDisputeData]
   );
 
   return <NewDisputeContext.Provider value={contextValues}>{children}</NewDisputeContext.Provider>;
 };
 
 const constructDisputeTemplate = (disputeData: IDisputeData) => {
-  const baseTemplate = { ...disputeData };
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { courtId, numberOfJurors, arbitrationCost, ...baseTemplate } = disputeData;
 
   if (!isUndefined(baseTemplate.aliasesArray)) {
     baseTemplate.aliasesArray = baseTemplate.aliasesArray.filter((item) => item.address !== "" && item.isValid);
@@ -130,7 +129,14 @@ const constructDisputeTemplate = (disputeData: IDisputeData) => {
       baseTemplate.aliases = aliases;
     }
   }
+
+  for (const answer of baseTemplate.answers) {
+    answer.id = "0x" + BigInt(answer.id).toString(16);
+  }
   if (!isUndefined(baseTemplate.policyURI) && baseTemplate.policyURI === "") delete baseTemplate.policyURI;
 
+  baseTemplate.arbitratorAddress = klerosCoreAddress[DEFAULT_CHAIN];
+  baseTemplate.arbitratorChainID = DEFAULT_CHAIN.toString();
+
   return baseTemplate as IDisputeTemplate;
 };

web/src/pages/Resolver/NavigationButtons/NextButton.tsx

@@ -17,11 +17,12 @@ const NextButton: React.FC<INextButton> = ({ nextRoute }) => {
 
   //checks if each answer is filled in
   const areVotingOptionsFilled =
-    disputeData.question !== "" && disputeData.answers.every((answer) => answer.title !== "");
+    disputeData.question !== "" &&
+    disputeData.answers.every((answer) => answer.title !== "" && answer.description !== "");
 
   //check if any filled address or ens is invalid
-  const areFilledAddressesValid = disputeData?.aliasesArray?.every(
-    (alias) => alias.address !== "" && alias.isValid && alias.name !== ""
+  const areFilledAddressesValid = disputeData?.aliasesArray?.every((alias) =>
+    alias.address === "" && alias.name === "" ? true : alias.isValid
   );
 
   const isButtonDisabled =

web/src/pages/Resolver/NavigationButtons/SubmitDisputeButton.tsx

@@ -96,7 +96,8 @@ const SubmitDisputeButton: React.FC = () => {
 
 const isTemplateValid = (disputeTemplate: IDisputeTemplate) => {
   const areVotingOptionsFilled =
-    disputeTemplate.question !== "" && disputeTemplate.answers.every((answer) => answer.title !== "");
+    disputeTemplate.question !== "" &&
+    disputeTemplate.answers.every((answer) => answer.title !== "" && answer.description !== "");
 
   return (disputeTemplate.title &&
     disputeTemplate.description &&

web/src/pages/Resolver/Parameters/NotablePersons/index.tsx

@@ -43,7 +43,7 @@ const NotablePersons: React.FC = () => {
       <StyledPlusMinusField
         currentValue={disputeData.aliasesArray?.length ?? 2}
         updateValue={updateNumberOfAliases}
-        minValue={2}
+        minValue={1}
       />
       <NavigationButtons prevRoute="/resolver/voting-options" nextRoute="/resolver/policy" />
     </Container>

web/src/pages/Resolver/Parameters/VotingOptions/OptionsFields.tsx

@@ -43,15 +43,15 @@ const OptionsFields: React.FC = () => {
   const { disputeData, setDisputeData } = useNewDisputeContext();
 
   const updateOptions = (value: number) => {
-    let defaultAnswer: Answer = { title: "", id: value.toString() };
-    let answers = disputeData.answers;
+    const defaultAnswer: Answer = { title: "", id: value.toString(), description: "" };
+    const answers = disputeData.answers;
 
     if (value < answers?.length) return setDisputeData({ ...disputeData, answers: answers.splice(0, value) });
     if (value > answers?.length) return setDisputeData({ ...disputeData, answers: [...answers, defaultAnswer] });
   };
 
   const handleOptionWrite = (event: React.ChangeEvent<HTMLInputElement>, key: number) => {
-    let answers = disputeData.answers;
+    const answers = disputeData.answers;
     answers[key] = { ...answers[key], [event.target.name]: event.target.value };
     setDisputeData({ ...disputeData, answers });
   };
@@ -69,7 +69,7 @@ const OptionsFields: React.FC = () => {
             />
             <LabeledInput
               name="description"
-              label="Option Description (Optional)"
+              label="Option Description"
               placeholder={`Description for Option ${index + 1}`}
               value={answer.description ?? ""}
               onChange={(event) => handleOptionWrite(event, index)}

web/src/pages/Resolver/index.tsx

@@ -73,19 +73,6 @@ const MiddleContentContainer = styled.div`
   position: relative;
 `;
 
-const StyledLabel = styled.label`
-  display: none;
-
-  ${landscapeStyle(
-    () => css`
-      display: flex;
-      color: ${({ theme }) => theme.secondaryPurple};
-      margin-bottom: 20px;
-      padding-left: ${responsiveSize(25, 65)};
-    `
-  )}
-`;
-
 const DisputeResolver: React.FC = () => {
   const location = useLocation();
   const [isDisputeResolverMiniGuideOpen, toggleDisputeResolverMiniGuide] = useToggle(false);