chore(web): update-transaction-batcher-hook

Author: tractorss

web/src/hooks/useTransactionBatcher.tsx

@@ -1,77 +1,50 @@
-import { encodeFunctionData, type SimulateContractParameters } from "viem";
-import { useAccount, useWriteContract } from "wagmi";
-import { createUseSimulateContract, createUseWriteContract } from "wagmi/codegen";
+import { useCallback } from "react";
 
-import { DEFAULT_CHAIN } from "consts/chains";
+import { encodeFunctionData, type SimulateContractParameters } from "viem";
 
 import { isUndefined } from "src/utils";
 
-const batcherAbi = [
-  {
-    inputs: [
-      {
-        internalType: "address[]",
-        name: "targets",
-        type: "address[]",
-      },
-      {
-        internalType: "uint256[]",
-        name: "values",
-        type: "uint256[]",
-      },
-      {
-        internalType: "bytes[]",
-        name: "datas",
-        type: "bytes[]",
-      },
-    ],
-    name: "batchSend",
-    outputs: [],
-    stateMutability: "payable",
-    type: "function",
-  },
-] as const;
-
-const useBatchSimulate = createUseSimulateContract({
-  abi: batcherAbi,
-  functionName: "batchSend",
-});
-
-export const useBatchWrite = createUseWriteContract({
-  abi: batcherAbi,
-  functionName: "batchSend",
-});
-
-const batcherAddress = {
-  421614: "0xe8061d185D865ce2B2FbCfDa628b5F147d8eB8Ab",
-  42161: "0xE8f028aAc4d4B6A07E62c2C2f7B8818876a0CF2F",
-  100: "0x5ACD2B61ad3d25fa3422f29B0636C69c70f6588f",
-};
+import { useSimulateTransactionBatcherBatchSend, useWriteTransactionBatcherBatchSend } from "./contracts/generated";
 
 export type TransactionBatcherConfig = SimulateContractParameters[];
 
+/**
+ * @param configs SimulateContractParameters[] - an array of useWriteContract Parameters
+ * @description This takes in multiple write calls and batches them into a single transaction
+ * @example useTransactionBatcher([
+ *                 { address : "contract one address",
+ *                   abi : "contract one abi",
+ *                   functionName : "...",
+ *                   args: [...]
+ *                   value: 0
+ *                 },
+ *                 { address : "contract 2 address",
+ *                   abi : "contract 2 abi",
+ *                   functionName : "...",
+ *                   args: [...]
+ *                   value: 0
+ *                 },
+ *                ])
+ */
 const useTransactionBatcher = (configs?: TransactionBatcherConfig) => {
-  const { chainId } = useAccount();
-
-  const validConfigs = configs ?? [];
+  const validatedConfigs = configs ?? [];
   const {
     data: batchConfig,
     isLoading,
     isError,
-  } = useBatchSimulate({
+  } = useSimulateTransactionBatcherBatchSend({
     query: {
       enabled: !isUndefined(configs),
     },
-    address: batcherAddress[chainId ?? DEFAULT_CHAIN],
     args: [
-      validConfigs.map((config) => config?.address),
-      validConfigs.map((config) => config?.value ?? BigInt(0)),
-      validConfigs.map((config) => encodeFunctionData(config)),
+      validatedConfigs.map((config) => config?.address),
+      validatedConfigs.map((config) => config?.value ?? BigInt(0)),
+      validatedConfigs.map((config) => encodeFunctionData(config)),
     ],
   });
-  const { writeContractAsync } = useWriteContract();
+  const { writeContractAsync } = useWriteTransactionBatcherBatchSend();
 
-  const executeBatch = () => batchConfig && writeContractAsync(batchConfig.request);
+  const executeBatch = useCallback(() => writeContractAsync(batchConfig.request), [batchConfig, writeContractAsync]);
   return { executeBatch, batchConfig, isError, isLoading };
 };
 

web/src/pages/Cases/CaseDetails/MaintenanceButtons/DistributeRewards.tsx

@@ -7,7 +7,7 @@ import { Button } from "@kleros/ui-components-library";
 
 import { DEFAULT_CHAIN } from "consts/chains";
 import { klerosCoreAbi, klerosCoreAddress } from "hooks/contracts/generated";
-import useTransactionBatcher, { type TransactionBatcherConfig, useBatchWrite } from "hooks/useTransactionBatcher";
+import useTransactionBatcher, { type TransactionBatcherConfig } from "hooks/useTransactionBatcher";
 import { wrapWithToast } from "utils/wrapWithToast";
 
 import { isUndefined } from "src/utils";
@@ -51,9 +51,7 @@ const DistributeRewards: React.FC<IDistributeRewards> = ({ id, numberOfVotes, ro
     setContractConfigs(argsArr);
   }, [id, roundIndex, numberOfVotes, chainId]);
 
-  const { batchConfig, isLoading: isLoadingConfig, isError } = useTransactionBatcher(contractConfigs);
-
-  const { writeContractAsync: executeBatch } = useBatchWrite();
+  const { executeBatch, isLoading: isLoadingConfig, isError } = useTransactionBatcher(contractConfigs);
 
   const isLoading = useMemo(() => isLoadingConfig || isSending, [isLoadingConfig, isSending]);
   const isDisabled = useMemo(
@@ -62,11 +60,9 @@ const DistributeRewards: React.FC<IDistributeRewards> = ({ id, numberOfVotes, ro
   );
 
   const handleClick = () => {
-    if (!batchConfig) return;
-
     setIsSending(true);
 
-    wrapWithToast(async () => await executeBatch(batchConfig.request), publicClient).finally(() => {
+    wrapWithToast(async () => await executeBatch(), publicClient).finally(() => {
       setIsOpen(false);
     });
   };