fix(web): dispute-resolver-template-validation

Author: tractorss

web/src/context/NewDisputeContext.tsx

@@ -2,13 +2,15 @@ import React, { createContext, useState, useContext, useMemo } from "react";
 
 import { Address } from "viem";
 
+import { DEFAULT_CHAIN } from "consts/chains";
+import { disputeResolverAddress, 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;
 };
 
@@ -26,7 +28,7 @@ export interface IDisputeTemplate {
   arbitrableChainID?: string;
   arbitratorAddress?: string;
   arbitratorChainID?: string;
-  category?: string;
+  category: string;
   description: string;
   frontendUrl?: string;
   lang?: string;
@@ -35,6 +37,7 @@ export interface IDisputeTemplate {
   specification?: string;
   title: string;
   aliases?: Alias;
+  version: string;
   // attachment: Attachment;
   // type: string;
 }
@@ -62,11 +65,13 @@ const initialDisputeData: IDisputeData = {
   title: "",
   description: "",
   question: "",
+  category: "",
   answers: [
-    { title: "", id: "1" },
-    { title: "", id: "2" },
+    { title: "", id: "1", description: "" },
+    { title: "", id: "2", description: "" },
   ],
   aliasesArray: [{ name: "", address: "", id: "1" }],
+  version: "1.0",
 };
 const initialDisputeTemplate = initialDisputeData as IDisputeTemplate;
 
@@ -127,7 +132,17 @@ 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;
 
+  // in future if we support chain switching these would need to be calculated from connected 'chainId'
+  baseTemplate.arbitrableAddress = disputeResolverAddress[DEFAULT_CHAIN];
+  baseTemplate.arbitrableChainID = DEFAULT_CHAIN.toString();
+  baseTemplate.arbitratorAddress = klerosCoreAddress[DEFAULT_CHAIN];
+  baseTemplate.arbitratorChainID = DEFAULT_CHAIN.toString();
+
   return baseTemplate as IDisputeTemplate;
 };

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

@@ -17,7 +17,8 @@ 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) =>
@@ -28,6 +29,7 @@ const NextButton: React.FC<INextButton> = ({ nextRoute }) => {
     (location.pathname.includes("/resolver/title") && !disputeData.title) ||
     (location.pathname.includes("/resolver/description") && !disputeData.description) ||
     (location.pathname.includes("/resolver/court") && !disputeData.courtId) ||
+    (location.pathname.includes("/resolver/category") && !disputeData.category) ||
     (location.pathname.includes("/resolver/jurors") && !disputeData.arbitrationCost) ||
     (location.pathname.includes("/resolver/voting-options") && !areVotingOptionsFilled) ||
     (location.pathname.includes("/resolver/notable-persons") && !areFilledAddressesValid) ||

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/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)}