chore(web): rabbit-review

Author: tractorss

web/src/components/DisputeFeatures/Features/ClassicVote.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 
+import { Features } from "consts/disputeFeature";
 import { useNewDisputeContext } from "context/NewDisputeContext";
 
 import { useCourtDetails } from "queries/useCourtDetails";
@@ -22,6 +23,7 @@ const ClassicVote: React.FC<RadioInput> = (props) => {
           : `The jurors' votes are not hidden. 
         Everybody can see the justification and voted choice before the voting period completes.`
       }
+      key={Features.ClassicVote}
     >
       <StyledRadio label={isCommitEnabled ? "Two-steps commit-reveal" : "Classic one step voting"} small {...props} />
     </WithHelpTooltip>

web/src/components/DisputeFeatures/Features/GatedErc1155.tsx

@@ -1,8 +1,9 @@
-import React, { useEffect, useMemo } from "react";
+import React, { Fragment, useEffect, useMemo } from "react";
 import styled from "styled-components";
 
 import { Field } from "@kleros/ui-components-library";
 
+import { Features } from "consts/disputeFeature";
 import { IGatedDisputeData, useNewDisputeContext } from "context/NewDisputeContext";
 import { useERC1155Validation } from "hooks/useTokenAddressValidation";
 
@@ -38,7 +39,7 @@ const GatedErc1155: React.FC<RadioInput> = (props) => {
     error: validationError,
   } = useERC1155Validation({
     address: tokenGateAddress,
-    enabled: validationEnabled,
+    enabled: validationEnabled && props.checked,
   });
 
   const [validationMessage, variant] = useMemo(() => {
@@ -89,7 +90,7 @@ const GatedErc1155: React.FC<RadioInput> = (props) => {
   };
 
   return (
-    <>
+    <Fragment key={Features.GatedErc1155}>
       <WithHelpTooltip
         tooltipMsg="Only jurors who possess the token or NFT indicated below can be selected as jurors for this case.
         Add the token address below."
@@ -114,7 +115,7 @@ const GatedErc1155: React.FC<RadioInput> = (props) => {
           />
         </FieldContainer>
       ) : null}
-    </>
+    </Fragment>
   );
 };
 

web/src/components/DisputeFeatures/Features/GatedErc20.tsx

@@ -1,8 +1,9 @@
-import React, { useEffect, useMemo } from "react";
+import React, { Fragment, useEffect, useMemo } from "react";
 import styled from "styled-components";
 
 import { Field } from "@kleros/ui-components-library";
 
+import { Features } from "consts/disputeFeature";
 import { IGatedDisputeData, useNewDisputeContext } from "context/NewDisputeContext";
 import { useERC20ERC721Validation } from "hooks/useTokenAddressValidation";
 
@@ -79,7 +80,7 @@ const GatedErc20: React.FC<RadioInput> = (props) => {
   };
 
   return (
-    <>
+    <Fragment key={Features.GatedErc20}>
       <WithHelpTooltip
         tooltipMsg="Only jurors who possess the token or NFT indicated below can be selected as jurors for this case.
         Add the token address below."
@@ -98,7 +99,7 @@ const GatedErc20: React.FC<RadioInput> = (props) => {
           />
         </FieldContainer>
       ) : null}
-    </>
+    </Fragment>
   );
 };
 

web/src/components/DisputeFeatures/Features/index.tsx

@@ -19,7 +19,7 @@ export type RadioInput = {
   onClick: () => void;
 };
 
-export type FeatureUI = (props: RadioInput) => JSX.Element;
+export type FeatureUI = React.FC<RadioInput>;
 
 export const StyledRadio = styled(Radio)`
   font-size: 14px;
@@ -33,6 +33,7 @@ export const FeatureUIs: Record<Features, FeatureUI> = {
       tooltipMsg={`The jurors' votes are hidden. 
         Nobody can see them before the voting period completes. 
         (It takes place in one step via Shutter Network)`}
+      key={Features.ShieldedVote}
     >
       <StyledRadio label="Single-step via Shutter Network" small {...props} />
     </WithHelpTooltip>
@@ -41,7 +42,7 @@ export const FeatureUIs: Record<Features, FeatureUI> = {
   [Features.ClassicVote]: (props: RadioInput) => <ClassicVote {...props} />,
 
   [Features.ClassicEligibility]: (props: RadioInput) => (
-    <StyledRadio label="All the jurors in this court" small {...props} />
+    <StyledRadio key={Features.ClassicEligibility} label="All the jurors in this court" small {...props} />
   ),
 
   [Features.GatedErc20]: (props: RadioInput) => <GatedErc20 {...props} />,

web/src/consts/disputeFeature.ts

@@ -25,11 +25,6 @@ export interface DisputeKit {
    * if either subset matches the selected feature array this dispute kit is selected
    */
   featureSets: Features[][];
-  /**
-   * If true => kit accepts any subset of a featureSet.
-   * If false => must be an exact match.
-   */
-  allowSubset?: boolean;
 
   type: "general" | "gated";
 }
@@ -62,7 +57,6 @@ export const disputeKits: DisputeKits = [
       [Features.ClassicVote, Features.GatedErc20],
       [Features.ClassicVote, Features.GatedErc1155],
     ],
-    allowSubset: true,
     type: "gated",
   },
   {
@@ -71,7 +65,6 @@ export const disputeKits: DisputeKits = [
       [Features.ShieldedVote, Features.GatedErc20],
       [Features.ShieldedVote, Features.GatedErc1155],
     ],
-    allowSubset: true,
     type: "gated",
   },
 ];
@@ -86,12 +79,6 @@ function arraysEqual(a: Features[], b: Features[]): boolean {
   return normalize(a) === normalize(b);
 }
 
-/** Check if `a` is a superset of `b` */
-function includesAll(a: Features[], b: Features[]): boolean {
-  const setA = new Set(a);
-  return b.every((x) => setA.has(x));
-}
-
 /**
  * Toggle a feature, ensuring radio behavior per group
  * @returns the updated selected features array
@@ -119,10 +106,7 @@ export function toggleFeature(selected: Features[], feature: Features, groups: F
 export function findMatchingKits(selected: Features[], kits: DisputeKits): DisputeKit[] {
   return kits.filter((kit) =>
     kit.featureSets.some(
-      (set) =>
-        kit.allowSubset
-          ? includesAll(selected, set) // kit allows subset
-          : arraysEqual(set, selected) // strict exact match
+      (set) => arraysEqual(set, selected) // strict exact match
     )
   );
 }

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

@@ -59,7 +59,7 @@ const FeatureSelection: React.FC = () => {
       if (!defaultKit) return;
 
       // some kits like gated can have two feature sets, one for gatedERC20 and other for ERC1155
-      if (defaultKit?.allowSubset) {
+      if (defaultKit?.featureSets.length > 0) {
         if ((disputeData?.disputeKitData as IGatedDisputeData)?.isERC1155) {
           // defaultKit.featureSets[0][0] - is either Classic or Shutter
           setSelected([defaultKit.featureSets[0][0], Features.GatedErc1155]);
@@ -141,7 +141,7 @@ const FeatureSelection: React.FC = () => {
           <>
             {GroupsUI[groupName]({
               children: (
-                <Fragment>
+                <Fragment key={groupName}>
                   {features.map((feature) =>
                     FeatureUIs[feature]({
                       name: groupName,