Merge pull request #78 from kleros/fix(web)/wagmi-generate

jaybuidl · web-flow · commit 8d0b613fbf37 · 2025-04-21T21:25:39.000+01:00
Fix(web)/wagmi generate
diff --git a/contracts/package.json b/contracts/package.json
@@ -86,6 +86,6 @@
   },
   "dependencies": {
     "@kleros/curate-v2-templates": "workspace:^",
-    "@kleros/kleros-v2-contracts": "^0.9.2"
+    "@kleros/kleros-v2-contracts": "^0.9.3"
   }
 }
diff --git a/web/package.json b/web/package.json
@@ -47,7 +47,7 @@
     "@graphql-codegen/cli": "^4.0.1",
     "@graphql-codegen/client-preset": "^4.2.0",
     "@kleros/curate-v2-tsconfig": "workspace:^",
-    "@kleros/kleros-v2-contracts": "^0.3.2",
+    "@kleros/kleros-v2-contracts": "^0.9.3",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@types/react-modal": "^3.16.3",
diff --git a/web/src/components/ActionButton/Modal/ChallengeItemModal.tsx b/web/src/components/ActionButton/Modal/ChallengeItemModal.tsx
@@ -4,7 +4,6 @@ import Header from "./Header";
 import Buttons from "./Buttons";
 import DepositRequired from "./DepositRequired";
 import Info from "./Info";
-import { useArbitrationCost } from "hooks/useArbitrationCostFromKlerosCore";
 import { useAccount, useBalance, usePublicClient } from "wagmi";
 import { wrapWithToast } from "utils/wrapWithToast";
 import { IBaseModal } from ".";
@@ -18,6 +17,7 @@ import {
   useSimulateCurateV2ChallengeRequest,
   useWriteCurateV2ChallengeRequest,
 } from "hooks/useContract";
+import { useReadKlerosCoreArbitrationCost } from "hooks/contracts/generated";
 
 const ReStyledModal = styled(Modal)`
   gap: 32px;
@@ -66,7 +66,12 @@ const ChallengeItemModal: React.FC<IChallengeItemModal> = ({
       address: registryAddress,
     });
 
-  const { arbitrationCost, isLoading: isLoadingArbCost } = useArbitrationCost(arbitratorExtraData);
+  const { data: arbitrationCost, isLoading: isLoadingArbCost } = useReadKlerosCoreArbitrationCost({
+    query: {
+      enabled: !isUndefined(arbitratorExtraData),
+    },
+    args: [arbitratorExtraData!],
+  });
 
   const depositRequired = useMemo(() => {
     if (!arbitrationCost || !submissionChallengeDeposit || !removalChallengeDeposit) return 0n;
diff --git a/web/src/components/ActionButton/Modal/RemoveModal.tsx b/web/src/components/ActionButton/Modal/RemoveModal.tsx
@@ -6,7 +6,7 @@ import DepositRequired from "./DepositRequired";
 import Info from "./Info";
 import { IBaseModal } from ".";
 import { useAccount, useBalance, usePublicClient } from "wagmi";
-import { useArbitrationCost } from "hooks/useArbitrationCostFromKlerosCore";
+
 import { wrapWithToast } from "utils/wrapWithToast";
 import EvidenceUpload, { Evidence } from "./EvidenceUpload";
 import Modal from "components/Modal";
@@ -17,6 +17,7 @@ import {
   useSimulateCurateV2RemoveItem,
   useWriteCurateV2RemoveItem,
 } from "hooks/useContract";
+import { useReadKlerosCoreArbitrationCost } from "hooks/contracts/generated";
 
 const ReStyledModal = styled(Modal)`
   gap: 32px;
@@ -47,8 +48,12 @@ const RemoveModal: React.FC<IRemoveModal> = ({ toggleModal, isItem, registryAddr
   const { data: removalDeposit, isLoading: isRemovalDepositLoading } = useReadCurateV2RemovalBaseDeposit({
     address: registryAddress,
   });
-
-  const { arbitrationCost, isLoading: isLoadingArbCost } = useArbitrationCost(arbitratorExtraData);
+  const { data: arbitrationCost, isLoading: isLoadingArbCost } = useReadKlerosCoreArbitrationCost({
+    query: {
+      enabled: !isUndefined(arbitratorExtraData),
+    },
+    args: [arbitratorExtraData!],
+  });
 
   const depositRequired = useMemo(() => {
     if (!arbitrationCost || !removalDeposit) return 0n;
diff --git a/web/src/components/ActionButton/Modal/ResubmitModal.tsx b/web/src/components/ActionButton/Modal/ResubmitModal.tsx
@@ -6,7 +6,7 @@ import DepositRequired from "./DepositRequired";
 import Info from "./Info";
 import { IBaseModal } from ".";
 import { useAccount, useBalance, usePublicClient } from "wagmi";
-import { useArbitrationCost } from "hooks/useArbitrationCostFromKlerosCore";
+
 import { wrapWithToast } from "utils/wrapWithToast";
 import { useItemDetailsQuery } from "hooks/queries/useItemDetailsQuery";
 import Modal from "components/Modal";
@@ -16,6 +16,8 @@ import {
   useSimulateCurateV2AddItem,
   useWriteCurateV2AddItem,
 } from "hooks/useContract";
+import { useReadKlerosCoreArbitrationCost } from "hooks/contracts/generated";
+import { isUndefined } from "src/utils";
 
 const ReStyledModal = styled(Modal)`
   gap: 32px;
@@ -52,7 +54,12 @@ const ResubmitModal: React.FC<ISubmitModal> = ({ toggleModal, isItem, registryAd
     address: registryAddress,
   });
 
-  const { arbitrationCost, isLoading: isLoadingArbCost } = useArbitrationCost(arbitratorExtraData);
+  const { data: arbitrationCost, isLoading: isLoadingArbCost } = useReadKlerosCoreArbitrationCost({
+    query: {
+      enabled: !isUndefined(arbitratorExtraData),
+    },
+    args: [arbitratorExtraData!],
+  });
 
   const depositRequired = useMemo(() => {
     if (!arbitrationCost || !removalDeposit) return 0n;
diff --git a/web/src/hooks/useArbitrationCostFromKlerosCore.ts b/web/src/hooks/useArbitrationCostFromKlerosCore.ts
diff --git a/web/src/pages/SubmitItem/Header/index.tsx b/web/src/pages/SubmitItem/Header/index.tsx
@@ -9,9 +9,10 @@ import Skeleton from "react-loading-skeleton";
 import { useParams } from "react-router-dom";
 import { useSubmitItemContext } from "context/SubmitItemContext";
 import { formatUnitsWei, formatValue } from "utils/format";
-import { useArbitrationCost } from "hooks/useArbitrationCostFromKlerosCore";
+
 import { useReadCurateV2GetArbitratorExtraData, useReadCurateV2SubmissionBaseDeposit } from "hooks/useContract";
 import { isUndefined } from "src/utils";
+import { useReadKlerosCoreArbitrationCost } from "hooks/contracts/generated";
 
 const Container = styled.div`
   display: flex;
@@ -97,7 +98,12 @@ const Header: React.FC<IHeader> = ({}) => {
     address: listAddress as `0x${string}`,
   });
 
-  const { arbitrationCost } = useArbitrationCost(arbitratorExtraData);
+  const { data: arbitrationCost } = useReadKlerosCoreArbitrationCost({
+    query: {
+      enabled: !isUndefined(arbitratorExtraData),
+    },
+    args: [arbitratorExtraData!],
+  });
 
   useEffect(() => {
     if (isUndefined(deposit) || isUndefined(arbitrationCost)) return;
diff --git a/web/src/pages/SubmitList/AdvancedParameters/ArbitrationParameters.tsx b/web/src/pages/SubmitList/AdvancedParameters/ArbitrationParameters.tsx
@@ -9,10 +9,11 @@ import Skeleton from "react-loading-skeleton";
 import ETH from "svgs/icons/eth-round.svg";
 import LightButton from "components/LightButton";
 import { useSubmitListContext } from "context/SubmitListContext";
-import { useArbitrationCost } from "hooks/useArbitrationCostFromKlerosCore";
+
 import { prepareArbitratorExtradata } from "utils/prepareArbitratorExtradata";
 import { formatEther, isAddress } from "viem";
 import { KLEROS_ARBITRATOR, KLEROS_GOVERNOR } from "consts/arbitration";
+import { useReadKlerosCoreArbitrationCost } from "hooks/contracts/generated";
 
 const Container = styled.div`
   display: flex;
@@ -79,9 +80,9 @@ const AbritrationParameters: React.FC = () => {
     [listData.governor]
   );
 
-  const { arbitrationCost } = useArbitrationCost(
-    prepareArbitratorExtradata(listData.courtId ?? "1", listData.numberOfJurors)
-  );
+  const { data: arbitrationCost } = useReadKlerosCoreArbitrationCost({
+    args: [prepareArbitratorExtradata(listData.courtId ?? "1", listData.numberOfJurors)],
+  });
 
   useEffect(
     () => setListData({ ...listData, arbitrationCost: formatEther((arbitrationCost as bigint) ?? "") }),
diff --git a/web/src/pages/SubmitList/NavigationButtons/SubmitListButton.tsx b/web/src/pages/SubmitList/NavigationButtons/SubmitListButton.tsx
@@ -8,7 +8,6 @@ import styled from "styled-components";
 import CheckCircle from "svgs/icons/check-circle-outline.svg";
 import ClosedCircleIcon from "components/StyledIcons/ClosedCircleIcon";
 import { ListProgress, useSubmitListContext } from "context/SubmitListContext";
-import { useArbitrationCost } from "hooks/useArbitrationCostFromKlerosCore";
 import { isUndefined } from "utils/index";
 import { wrapWithToast } from "utils/wrapWithToast";
 import { formatUnitsWei } from "utils/format";
@@ -26,7 +25,12 @@ import {
   useReadCurateV2SubmissionBaseDeposit,
   useWriteCurateV2AddItem,
 } from "hooks/useContract";
-import { curateV2Abi, useSimulateCurateFactoryDeploy, useWriteCurateFactoryDeploy } from "hooks/contracts/generated";
+import {
+  curateV2Abi,
+  useReadKlerosCoreArbitrationCost,
+  useSimulateCurateFactoryDeploy,
+  useWriteCurateFactoryDeploy,
+} from "hooks/contracts/generated";
 import { ErrorButtonMessage } from "components/ActionButton/Modal/Buttons/ErrorButtonMessage";
 
 const StyledCheckCircle = styled(CheckCircle)`
@@ -61,7 +65,13 @@ const SubmitListButton: React.FC = () => {
   const { data: submissionBaseDeposit } = useReadCurateV2SubmissionBaseDeposit({
     address: MAIN_CURATE_ADDRESS as `0x${string}`,
   });
-  const { arbitrationCost, isLoading: isLoadingArbCost } = useArbitrationCost(arbitratorExtraData);
+
+  const { data: arbitrationCost, isLoading: isLoadingArbCost } = useReadKlerosCoreArbitrationCost({
+    query: {
+      enabled: !isUndefined(arbitratorExtraData),
+    },
+    args: [arbitratorExtraData!],
+  });
 
   const totalCostToSubmit = useMemo(() => {
     if (isUndefined(arbitrationCost) || isUndefined(submissionBaseDeposit)) return;
diff --git a/web/wagmi.config.ts b/web/wagmi.config.ts
@@ -4,17 +4,69 @@ import { readdir, readFile } from "fs/promises";
 import { parse, join } from "path";
 import { Chain } from "wagmi/chains";
 import dotenv from "dotenv";
+import {
+  arbitrumSepoliaDevnet as arbitratorDevnet,
+  arbitrumSepolia as arbitratorTestnet,
+  arbitrum as arbitratorMainnet,
+} from "@kleros/kleros-v2-contracts/cjs/deployments";
 
 dotenv.config();
 
-const readArtifacts = async (viemChainName: string, hardhatChainName?: string) => {
+type ArbitratorContracts = {
+  default: {
+    contracts: {
+      KlerosCore: {
+        address: `0x${string}`;
+        abi: any[];
+      };
+      SortitionModule: {
+        address: `0x${string}`;
+        abi: any[];
+      };
+      EvidenceModule: {
+        address: `0x${string}`;
+        abi: any[];
+      };
+      DisputeTemplateRegistry: {
+        address: `0x${string}`;
+        abi: any[];
+      };
+    };
+  };
+};
+
+const addArbitratorContract = ({
+  results,
+  chain,
+  name,
+  contract,
+}: {
+  results: ContractConfig[];
+  chain: Chain;
+  name: string;
+  contract: { address: `0x${string}`; abi: any[] };
+}) => {
+  results.push({
+    name,
+    address: {
+      [chain.id]: contract.address as `0x{string}`,
+    },
+    abi: contract.abi,
+  });
+};
+
+const readArtifacts = async (
+  viemChainName: string,
+  hardhatChainName: string,
+  arbitratorContracts: ArbitratorContracts
+) => {
   const chains = await import("wagmi/chains");
   const chain = chains[viemChainName] as Chain;
   if (!chain) {
     throw new Error(`Viem chain ${viemChainName} not found`);
   }
 
-  const directoryPath = `../contracts/deployments/${hardhatChainName ?? viemChainName}`;
+  const directoryPath = `../contracts/deployments/${hardhatChainName}`;
   const files = await readdir(directoryPath);
 
   const results: ContractConfig[] = [];
@@ -34,53 +86,47 @@ const readArtifacts = async (viemChainName: string, hardhatChainName?: string) =
     }
   }
 
-  // read external contracts, Ex :- KlerosCore, EvidenceModule
-  const externalContractsdirectoryPath = `../node_modules/@kleros/kleros-v2-contracts/deployments/${
-    hardhatChainName ?? viemChainName
-  }`;
-  const externalfiles = await readdir(externalContractsdirectoryPath);
-  for (const file of externalfiles) {
-    const { name, ext } = parse(file);
-    if (ext === ".json") {
-      const filePath = join(externalContractsdirectoryPath, file);
-      const fileContent = await readFile(filePath, "utf-8");
-      const jsonContent = JSON.parse(fileContent);
-      results.push({
-        name,
-        address: {
-          [chain.id]: jsonContent.address as `0x{string}`,
-        },
-        abi: jsonContent.abi,
-      });
-    }
-  }
+  const { KlerosCore, SortitionModule, EvidenceModule, DisputeTemplateRegistry } =
+    arbitratorContracts.default.contracts;
+
+  const arbitratorContractConfigs = [
+    { name: "KlerosCore", contract: KlerosCore },
+    { name: "SortitionModule", contract: SortitionModule },
+    { name: "EvidenceModule", contract: EvidenceModule },
+    { name: "DisputeTemplateRegistry", contract: DisputeTemplateRegistry },
+  ];
+
+  arbitratorContractConfigs.forEach(({ name, contract }) => addArbitratorContract({ results, chain, name, contract }));
 
   return results;
 };
 
 const getConfig = async (): Promise<Config> => {
   const deployment = process.env.REACT_APP_DEPLOYMENT ?? "devnet";
-
   let viemNetwork: string;
   let hardhatNetwork: string;
+  let arbitratorContracts;
   switch (deployment) {
     case "devnet":
       viemNetwork = "arbitrumSepolia";
       hardhatNetwork = "arbitrumSepoliaDevnet";
+      arbitratorContracts = arbitratorDevnet;
       break;
     case "testnet":
       viemNetwork = "arbitrumSepolia";
       hardhatNetwork = "arbitrumSepolia";
+      arbitratorContracts = arbitratorTestnet;
       break;
     case "mainnet":
       viemNetwork = "arbitrum";
       hardhatNetwork = "arbitrum";
+      arbitratorContracts = arbitratorMainnet;
       break;
     default:
       throw new Error(`Unknown deployment ${deployment}`);
   }
 
-  const deploymentContracts = await readArtifacts(viemNetwork, hardhatNetwork);
+  const deploymentContracts = await readArtifacts(viemNetwork, hardhatNetwork, arbitratorContracts);
 
   return {
     out: "src/hooks/contracts/generated.ts",
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -86,6 +86,6 @@`
`86`	`86`	`},`
`87`	`87`	`"dependencies": {`
`88`	`88`	`"@kleros/curate-v2-templates": "workspace:^",`
`89`		`- "@kleros/kleros-v2-contracts": "^0.9.2"`
	`89`	`+ "@kleros/kleros-v2-contracts": "^0.9.3"`
`90`	`90`	`}`
`91`	`91`	`}`