feat: allow choosing the disputekit in the resolver flow

Author: kemuru

web/src/context/NewDisputeContext.tsx

@@ -47,6 +47,7 @@ interface IDisputeData extends IDisputeTemplate {
   numberOfJurors: number;
   arbitrationCost?: string;
   aliasesArray?: AliasArray[];
+  disputeKitId?: number;
 }
 
 interface INewDisputeContext {
@@ -71,6 +72,7 @@ const getInitialDisputeData = (): IDisputeData => ({
     { title: "", id: "2", description: "" },
   ],
   aliasesArray: [{ name: "", address: "", id: "1" }],
+  disputeKitId: 1,
   version: "1.0",
 });
 
@@ -117,7 +119,7 @@ export const NewDisputeProvider: React.FC<{ children: React.ReactNode }> = ({ ch
 
 const constructDisputeTemplate = (disputeData: IDisputeData) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { courtId, numberOfJurors, arbitrationCost, ...baseTemplate } = disputeData;
+  const { courtId, numberOfJurors, arbitrationCost, disputeKitId, ...baseTemplate } = disputeData;
 
   if (!isUndefined(baseTemplate.aliasesArray)) {
     baseTemplate.aliasesArray = baseTemplate.aliasesArray.filter((item) => item.address !== "" && item.isValid);

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

@@ -42,13 +42,16 @@ const SubmitDisputeButton: React.FC = () => {
     return userBalance && userBalance.value < arbitrationCost;
   }, [userBalance, disputeData]);
 
-  // TODO: decide which dispute kit to use
   const { data: submitCaseConfig, error } = useSimulateDisputeResolverCreateDisputeForTemplate({
     query: {
       enabled: !insufficientBalance && isTemplateValid(disputeTemplate),
     },
     args: [
-      prepareArbitratorExtradata(disputeData.courtId ?? "1", disputeData.numberOfJurors ?? "", 1),
+      prepareArbitratorExtradata(
+        disputeData.courtId ?? "1",
+        disputeData.numberOfJurors ?? "",
+        disputeData.disputeKitId ?? 1
+      ),
       JSON.stringify(disputeTemplate),
       "",
       BigInt(disputeTemplate.answers.length),

web/src/pages/Resolver/Parameters/Court.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from "react";
 import styled, { css } from "styled-components";
 
-import { AlertMessage, DropdownCascader } from "@kleros/ui-components-library";
+import { AlertMessage, DropdownCascader, DropdownSelect } from "@kleros/ui-components-library";
 
 import { useNewDisputeContext } from "context/NewDisputeContext";
 import { rootCourtToItems, useCourtTree } from "hooks/queries/useCourtTree";
@@ -14,6 +14,7 @@ import { StyledSkeleton } from "components/StyledSkeleton";
 import Header from "pages/Resolver/Header";
 
 import NavigationButtons from "../NavigationButtons";
+import { isKlerosNeo, isKlerosUniversity, isTestnetDeployment } from "src/consts";
 
 const Container = styled.div`
   display: flex;
@@ -49,28 +50,56 @@ const AlertMessageContainer = styled.div`
   margin-top: 24px;
 `;
 
+const StyledDropdownSelect = styled(DropdownSelect)`
+  width: 84vw;
+  margin-top: 24px;
+  ${landscapeStyle(
+    () => css`
+      width: ${responsiveSize(442, 700, 900)};
+    `
+  )}
+`;
+
 const Court: React.FC = () => {
   const { disputeData, setDisputeData } = useNewDisputeContext();
   const { data } = useCourtTree();
   const items = useMemo(() => !isUndefined(data?.court) && [rootCourtToItems(data.court)], [data]);
 
-  const handleWrite = (courtId: string) => {
-    setDisputeData({ ...disputeData, courtId: courtId });
+  const disputeKitOptions = useMemo(() => {
+    if (isKlerosUniversity()) return [{ text: "Classic Dispute Kit", value: 1 }];
+    if (isKlerosNeo()) return [{ text: "Classic Dispute Kit", value: 1 }];
+    if (isTestnetDeployment()) return [{ text: "Classic Dispute Kit", value: 1 }];
+    const options = [{ text: "Classic Dispute Kit", value: 1 }];
+    if (disputeData.courtId === "1") options.push({ text: "Shutter Dispute Kit", value: 2 });
+    return options;
+  }, [disputeData.courtId]);
+
+  const handleCourtWrite = (courtId: string) => {
+    const newDisputeKitId = courtId === "1" ? (disputeData.disputeKitId ?? 1) : 1;
+    setDisputeData({ ...disputeData, courtId, disputeKitId: newDisputeKitId });
   };
 
+  const handleDisputeKitChange = (newValue: string | number) =>
+    setDisputeData({ ...disputeData, disputeKitId: Number(newValue) });
+
   return (
     <Container>
       <Header text="Select a court to arbitrate the case" />
       {items ? (
         <StyledDropdownCascader
           items={items}
-          onSelect={(path: string | number) => typeof path === "string" && handleWrite(path.split("/").pop()!)}
+          onSelect={(path: string | number) => typeof path === "string" && handleCourtWrite(path.split("/").pop()!)}
           placeholder="Select Court"
           value={`/courts/${disputeData.courtId}`}
         />
       ) : (
         <StyledSkeleton width={240} height={42} />
       )}
+      <StyledDropdownSelect
+        defaultValue={disputeData.disputeKitId ?? 1}
+        items={disputeKitOptions}
+        callback={handleDisputeKitChange}
+      />
       <AlertMessageContainer>
         <AlertMessage
           title="Check the courts available beforehand"
@@ -82,4 +111,5 @@ const Court: React.FC = () => {
     </Container>
   );
 };
+
 export default Court;