feat(web): fetch-dispute-kit-data-in-duplication

Author: tractorss

web/src/hooks/queries/useRoundDetailsQuery.ts

@@ -17,6 +17,13 @@ const roundDetailsQuery = graphql(`
       disputeKit {
         id
       }
+      dispute {
+        disputeKitDispute {
+          ... on ClassicDispute {
+            extraData
+          }
+        }
+      }
     }
   }
 `);

web/src/pages/Resolver/Landing/index.tsx

@@ -7,6 +7,7 @@ import { useDebounce } from "react-use";
 import { Button } from "@kleros/ui-components-library";
 
 import { AliasArray, Answer, useNewDisputeContext } from "context/NewDisputeContext";
+import { extraDataToTokenInfo } from "utils/extradataToTokenInfo";
 
 import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery";
 import { usePopulatedDisputeData } from "queries/usePopulatedDisputeData";
@@ -68,6 +69,13 @@ const Landing: React.FC = () => {
     isLoading: isLoadingRound,
   } = useRoundDetailsQuery(debouncedDisputeID, 0);
 
+  const gatedTokenInfo = useMemo(() => {
+    const extradata = roundData?.round?.dispute.disputeKitDispute?.[0].extraData;
+
+    if (isUndefined(extradata)) return;
+    return extraDataToTokenInfo(extradata);
+  }, [roundData]);
+
   const isLoading = useMemo(
     () => isLoadingDispute || isPopulatingDispute || isLoadingRound,
     [isLoadingDispute, isPopulatingDispute, isLoadingRound]
@@ -114,6 +122,7 @@ const Landing: React.FC = () => {
       disputeKitId: parseInt(roundData.round?.disputeKit.id ?? "1", 10),
       answers,
       aliasesArray: aliasesArray ?? disputeData.aliasesArray,
+      disputeKitData: gatedTokenInfo ? { ...gatedTokenInfo, type: "gated" } : undefined,
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [populatedDispute, roundData, isInvalidDispute]);

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

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from "react";
+import React, { useMemo } from "react";
 import styled, { css } from "styled-components";
 
 import { AlertMessage, Checkbox, DropdownCascader, DropdownSelect, Field } from "@kleros/ui-components-library";
@@ -88,7 +88,6 @@ const StyledCheckbox = styled(Checkbox)`
 
 const Court: React.FC = () => {
   const { disputeData, setDisputeData } = useNewDisputeContext();
-  const [isGatedDisputeKit, setIsGatedDisputeKit] = useState(false);
   const { data: courtTree } = useCourtTree();
   const { data: supportedDisputeKits } = useSupportedDisputeKits(disputeData.courtId);
   const items = useMemo(() => !isUndefined(courtTree?.court) && [rootCourtToItems(courtTree.court)], [courtTree]);
@@ -123,7 +122,7 @@ const Court: React.FC = () => {
   };
 
   const handleDisputeKitChange = (newValue: string | number) => {
-    const options = disputeKitOptions.find((dk) => dk.value === String(newValue));
+    const options = disputeKitOptions.find((dk) => String(dk.value) === String(newValue));
     const isNewValueGated = options?.gated ?? false;
     const gatedDisputeKitData: IGatedDisputeData | undefined = isNewValueGated
       ? {
@@ -133,10 +132,14 @@ const Court: React.FC = () => {
           tokenId: "0",
         }
       : undefined;
-    setIsGatedDisputeKit(isNewValueGated);
     setDisputeData({ ...disputeData, disputeKitId: Number(newValue), disputeKitData: gatedDisputeKitData });
   };
 
+  const isGatedDisputeKit = useMemo(() => {
+    const options = disputeKitOptions.find((dk) => String(dk.value) === String(selectedDisputeKitId));
+    return options?.gated ?? false;
+  }, [disputeKitOptions, selectedDisputeKitId]);
+
   const handleTokenAddressChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const currentData = disputeData.disputeKitData as IGatedDisputeData;
     setDisputeData({

web/src/utils/extradataToTokenInfo.ts

@@ -0,0 +1,45 @@
+import { Address, hexToBytes } from "viem";
+
+type GatedTokenInfo = {
+  tokenGate: Address;
+  isERC1155: boolean;
+  tokenId: string;
+};
+
+/**
+ * @dev Decodes token information from encoded extra data.
+ * @param extraData The extraData
+ * @returns GatedTokenInfo object with tokenGate address, isERC1155 flag, and tokenId.
+ */
+export function extraDataToTokenInfo(extraDataHex: `0x${string}`): GatedTokenInfo {
+  const extraDataBytes = hexToBytes(extraDataHex);
+
+  if (extraDataBytes.length < 160) {
+    return {
+      tokenGate: "0x0000000000000000000000000000000000000000",
+      isERC1155: false,
+      tokenId: "0",
+    };
+  }
+
+  // Slot 4 (bytes 96–127): packedTokenGateAndFlag
+  const packedBytes = extraDataBytes.slice(96, 128);
+  const packed = BigInt("0x" + Buffer.from(packedBytes).toString("hex"));
+
+  // Slot 5 (bytes 128–159): tokenId
+  const tokenIdBytes = extraDataBytes.slice(128, 160);
+  const tokenId = BigInt("0x" + Buffer.from(tokenIdBytes).toString("hex"));
+
+  // Extract tokenGate: lower 160 bits
+  const tokenGateBigInt = packed & ((1n << 160n) - 1n); // mask: 0x00..00ffffffffffffffffffffffffffffffffffffffff
+  const tokenGate = `0x${tokenGateBigInt.toString(16).padStart(40, "0")}` as Address;
+
+  // Extract flag: bit 160
+  const isERC1155 = ((packed >> 160n) & 1n) === 1n;
+
+  return {
+    tokenGate,
+    isERC1155,
+    tokenId: tokenId.toString(),
+  };
+}

web/src/utils/prepareArbitratorExtradata.ts

@@ -50,7 +50,6 @@ export const prepareArbitratorExtradata = (
     [subcourtID, noOfVotes, disputeKit]
   ) as `0x{string}`;
   if (!disputeKitData) {
-    console.log("extraData", extraData);
     return extraData;
   }
 
@@ -60,6 +59,5 @@ export const prepareArbitratorExtradata = (
   }
   const encodedDisputeKitData = encoder(disputeKitData as any);
   extraData = ethers.utils.hexConcat([extraData, encodedDisputeKitData]) as `0x{string}`;
-  console.log("extraData", extraData);
   return extraData;
 };