Court features selection

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

@@ -0,0 +1,33 @@
+import React from "react";
+
+import { Features } from "consts/disputeFeature";
+import { useNewDisputeContext } from "context/NewDisputeContext";
+
+import { useCourtDetails } from "queries/useCourtDetails";
+
+import WithHelpTooltip from "components/WithHelpTooltip";
+
+import { RadioInput, StyledRadio } from ".";
+
+const ClassicVote: React.FC<RadioInput> = (props) => {
+  const { disputeData } = useNewDisputeContext();
+  const { data: courtData } = useCourtDetails(disputeData.courtId);
+  const isCommitEnabled = Boolean(courtData?.court?.hiddenVotes);
+  return (
+    <WithHelpTooltip
+      tooltipMsg={
+        isCommitEnabled
+          ? `The jurors' votes are hidden. 
+        Nobody can see them before the voting period completes. 
+        (It takes place in two steps commit-reveal)`
+          : `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>
+  );
+};
+
+export default ClassicVote;

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

@@ -0,0 +1,122 @@
+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";
+
+import { isUndefined } from "src/utils";
+
+import WithHelpTooltip from "components/WithHelpTooltip";
+
+import { RadioInput, StyledRadio } from ".";
+
+const FieldContainer = styled.div`
+  width: 100%;
+  padding-left: 32px;
+`;
+
+const StyledField = styled(Field)`
+  width: 100%;
+  margin-top: 8px;
+  margin-bottom: 32px;
+  > small {
+    margin-top: 16px;
+  }
+`;
+
+const GatedErc1155: React.FC<RadioInput> = (props) => {
+  const { disputeData, setDisputeData } = useNewDisputeContext();
+
+  const tokenGateAddress = (disputeData.disputeKitData as IGatedDisputeData)?.tokenGate ?? "";
+  const validationEnabled = !isUndefined(tokenGateAddress) && tokenGateAddress.trim() !== "";
+
+  const {
+    isValidating,
+    isValid,
+    error: validationError,
+  } = useERC1155Validation({
+    address: tokenGateAddress,
+    enabled: validationEnabled && props.checked,
+  });
+
+  const [validationMessage, variant] = useMemo(() => {
+    if (isValidating) return [`Validating ERC-1155 token...`, "info"];
+    else if (validationError) return [validationError, "error"];
+    else if (isValid === true) return [`Valid ERC-1155 token`, "success"];
+    else return [undefined, "info"];
+  }, [isValidating, validationError, isValid]);
+
+  // Update validation state in dispute context
+  useEffect(() => {
+    // this can clash with erc20 check
+    if (!props.checked) return;
+    // Only update if isValid has actually changed
+    if (disputeData.disputeKitData) {
+      const currentData = disputeData.disputeKitData as IGatedDisputeData;
+
+      if (currentData.isTokenGateValid !== isValid) {
+        setDisputeData({
+          ...disputeData,
+          disputeKitData: { ...currentData, isTokenGateValid: isValid },
+        });
+      }
+    }
+  }, [isValid, setDisputeData, props.checked]);
+
+  const handleTokenAddressChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const currentData = disputeData.disputeKitData as IGatedDisputeData;
+
+    setDisputeData({
+      ...disputeData,
+      disputeKitData: {
+        ...currentData,
+        tokenGate: event.target.value,
+        isTokenGateValid: null, // Reset validation state when address changes
+      },
+    });
+  };
+
+  const handleTokenIdChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const currentData = disputeData.disputeKitData as IGatedDisputeData;
+    // DEV: we only update the tokenGate value here, and the disputeKidID,
+    // and type are still handled in Resolver/Court/FeatureSelection.tsx
+    setDisputeData({
+      ...disputeData,
+      disputeKitData: { ...currentData, tokenId: event.target.value },
+    });
+  };
+
+  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."
+      >
+        <StyledRadio label="Jurors owning at least 1 token ERC-1155" small {...props} />
+      </WithHelpTooltip>
+      {props.checked ? (
+        <FieldContainer>
+          <StyledField
+            dir="auto"
+            onChange={handleTokenAddressChange}
+            value={tokenGateAddress}
+            placeholder="Eg. 0xda10009cbd5d07dd0cecc66161fc93d7c9000da1"
+            variant={variant}
+            message={validationMessage}
+          />
+          <StyledField
+            dir="auto"
+            onChange={handleTokenIdChange}
+            value={(disputeData.disputeKitData as IGatedDisputeData)?.tokenId ?? "0"}
+            placeholder="Eg. 1"
+          />
+        </FieldContainer>
+      ) : null}
+    </Fragment>
+  );
+};
+
+export default GatedErc1155;

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

@@ -0,0 +1,106 @@
+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";
+
+import { isUndefined } from "src/utils";
+
+import WithHelpTooltip from "components/WithHelpTooltip";
+
+import { RadioInput, StyledRadio } from ".";
+
+const FieldContainer = styled.div`
+  width: 100%;
+  padding-left: 32px;
+`;
+
+const StyledField = styled(Field)`
+  width: 100%;
+  margin-top: 8px;
+  margin-bottom: 32px;
+  > small {
+    margin-top: 16px;
+  }
+`;
+
+const GatedErc20: React.FC<RadioInput> = (props) => {
+  const { disputeData, setDisputeData } = useNewDisputeContext();
+
+  const tokenGateAddress = (disputeData.disputeKitData as IGatedDisputeData)?.tokenGate ?? "";
+  const validationEnabled = !isUndefined(tokenGateAddress) && tokenGateAddress.trim() !== "";
+
+  const {
+    isValidating,
+    isValid,
+    error: validationError,
+  } = useERC20ERC721Validation({
+    address: tokenGateAddress,
+    enabled: validationEnabled && props.checked,
+  });
+
+  const [validationMessage, variant] = useMemo(() => {
+    if (isValidating) return [`Validating ERC-20 or ERC-721 token...`, "info"];
+    else if (validationError) return [validationError, "error"];
+    else if (isValid === true) return [`Valid ERC-20 or ERC-721 token`, "success"];
+    else return [undefined, "info"];
+  }, [isValidating, validationError, isValid]);
+
+  // Update validation state in dispute context
+  useEffect(() => {
+    // this can clash with erc1155 check
+    if (!props.checked) return;
+    if (disputeData.disputeKitData) {
+      const currentData = disputeData.disputeKitData as IGatedDisputeData;
+
+      if (currentData.isTokenGateValid !== isValid) {
+        setDisputeData({
+          ...disputeData,
+          disputeKitData: { ...currentData, isTokenGateValid: isValid },
+        });
+      }
+    }
+  }, [isValid, setDisputeData, props.checked]);
+
+  const handleTokenAddressChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const currentData = disputeData.disputeKitData as IGatedDisputeData;
+    // DEV: we only update the tokenGate value here, and the disputeKidID,
+    // and type are still handled in Resolver/Court/FeatureSelection.tsx
+    setDisputeData({
+      ...disputeData,
+      disputeKitData: {
+        ...currentData,
+        tokenGate: event.target.value,
+        isTokenGateValid: null, // Reset validation state when address changes
+      },
+    });
+  };
+
+  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."
+      >
+        <StyledRadio label="Jurors owning at least 1 token ERC-20 or ERC-721" small {...props} />
+      </WithHelpTooltip>
+      {props.checked ? (
+        <FieldContainer>
+          <StyledField
+            dir="auto"
+            onChange={handleTokenAddressChange}
+            value={tokenGateAddress}
+            placeholder="Eg. 0xda10009cbd5d07dd0cecc66161fc93d7c9000da1"
+            variant={variant}
+            message={validationMessage}
+          />
+        </FieldContainer>
+      ) : null}
+    </Fragment>
+  );
+};
+
+export default GatedErc20;

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

@@ -0,0 +1,51 @@
+import React from "react";
+import styled from "styled-components";
+
+import { Radio } from "@kleros/ui-components-library";
+
+import { Features } from "consts/disputeFeature";
+
+import WithHelpTooltip from "components/WithHelpTooltip";
+
+import ClassicVote from "./ClassicVote";
+import GatedErc1155 from "./GatedErc1155";
+import GatedErc20 from "./GatedErc20";
+
+export type RadioInput = {
+  name: string;
+  value: Features;
+  checked: boolean;
+  disabled: boolean;
+  onClick: () => void;
+};
+
+export type FeatureUI = React.FC<RadioInput>;
+
+export const StyledRadio = styled(Radio)`
+  font-size: 14px;
+  color: ${({ theme, disabled }) => (disabled ? theme.secondaryText : theme.primaryText)};
+  opacity: ${({ disabled }) => (disabled ? "0.7" : 1)};
+`;
+
+export const FeatureUIs: Record<Features, FeatureUI> = {
+  [Features.ShieldedVote]: (props: RadioInput) => (
+    <WithHelpTooltip
+      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>
+  ),
+
+  [Features.ClassicVote]: (props: RadioInput) => <ClassicVote {...props} />,
+
+  [Features.ClassicEligibility]: (props: RadioInput) => (
+    <StyledRadio key={Features.ClassicEligibility} label="All the jurors in this court" small {...props} />
+  ),
+
+  [Features.GatedErc20]: (props: RadioInput) => <GatedErc20 {...props} />,
+
+  [Features.GatedErc1155]: (props: RadioInput) => <GatedErc1155 {...props} />,
+};

web/src/components/DisputeFeatures/GroupsUI.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import styled from "styled-components";
+
+import { Group } from "consts/disputeFeature";
+
+const Container = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  align-items: start;
+  padding-bottom: 16px;
+`;
+
+const HeaderContainer = styled.div`
+  width: 100%;
+  padding-top: 16px;
+`;
+
+const Header = styled.h2`
+  font-size: 16px;
+  font-weight: 600;
+  margin: 0;
+`;
+
+const SubTitle = styled.p`
+  font-size: 14px;
+  color: ${({ theme }) => theme.secondaryText};
+  padding: 0;
+  margin: 0;
+`;
+
+export type GroupUI = (props: { children: JSX.Element }) => JSX.Element;
+export const GroupsUI: Record<Group, GroupUI> = {
+  [Group.Voting]: ({ children }) => (
+    <Container key={Group.Voting}>
+      <HeaderContainer>
+        <Header>Shielded Voting</Header>
+        <SubTitle>It hides the jurors&apos; votes until the end of the voting period.</SubTitle>
+      </HeaderContainer>
+      {children}
+    </Container>
+  ),
+  [Group.Eligibility]: ({ children }) => (
+    <Container key={Group.Eligibility}>
+      <HeaderContainer>
+        <Header>Jurors Eligibility</Header>
+        <SubTitle>Who can be selected as a juror?.</SubTitle>
+      </HeaderContainer>
+      {children}
+    </Container>
+  ),
+};