feat(web): appeal-fee-rewards-button

Author: tractorss

web/src/hooks/queries/useClassicAppealQuery.ts

@@ -27,6 +27,8 @@ const classicAppealQuery = graphql(`
             winningChoice
             paidFees
             fundedChoices
+            appealFeesDispersed
+            totalFeeDispersed
           }
         }
       }

web/src/hooks/useTransactionBatcher.tsx

@@ -53,7 +53,11 @@ const useTransactionBatcher = (
   });
   const { writeContractAsync } = useWriteTransactionBatcherBatchSend();
 
-  const executeBatch = useCallback(() => writeContractAsync(batchConfig.request), [batchConfig, writeContractAsync]);
+  const executeBatch = useCallback(
+    (config: NonNullable<typeof batchConfig>) => writeContractAsync(config?.request),
+    [writeContractAsync]
+  );
+
   return { executeBatch, batchConfig, isError, isLoading };
 };
 

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

@@ -41,7 +41,7 @@ const DistributeRewards: React.FC<IDistributeRewards> = ({ id, roundIndex, setIs
 
   useEffect(() => {
     const rounds = maintenanceData?.dispute?.rounds;
-    if (!id || !roundIndex || !rounds) return;
+    if (isUndefined(id) || isUndefined(roundIndex) || isUndefined(rounds)) return;
 
     const baseArgs = {
       abi: klerosCoreAbi,
@@ -60,6 +60,7 @@ const DistributeRewards: React.FC<IDistributeRewards> = ({ id, roundIndex, setIs
 
   const {
     executeBatch,
+    batchConfig,
     isLoading: isLoadingConfig,
     isError,
   } = useTransactionBatcher(contractConfigs, {
@@ -73,10 +74,11 @@ const DistributeRewards: React.FC<IDistributeRewards> = ({ id, roundIndex, setIs
   );
 
   const handleClick = () => {
-    if (!publicClient) return;
+    if (!publicClient || !batchConfig) return;
     setIsSending(true);
 
-    wrapWithToast(async () => await executeBatch(), publicClient).finally(() => {
+    wrapWithToast(async () => await executeBatch(batchConfig), publicClient).finally(() => {
+      setIsSending(false);
       setIsOpen(false);
     });
   };

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

@@ -50,7 +50,11 @@ const PassPeriodButton: React.FC<IPassPeriodButton> = ({ id, setIsOpen, period }
   const isLoading = useMemo(() => isLoadingConfig || isSending, [isLoadingConfig, isSending]);
   const isDisabled = useMemo(
     () =>
-      isUndefined(id) || isError || isLoading || period === Period.Execution || (period === Period.Evidence && isDrawn),
+      isUndefined(id) ||
+      isError ||
+      isLoading ||
+      period === Period.Execution ||
+      (period === Period.Evidence && !isDrawn),
     [id, isError, isLoading, period, isDrawn]
   );
   const handleClick = () => {

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

@@ -0,0 +1,108 @@
+import React, { useEffect, useMemo, useState } from "react";
+import styled from "styled-components";
+
+import { useAccount, usePublicClient } from "wagmi";
+
+import { Button } from "@kleros/ui-components-library";
+
+import { DEFAULT_CHAIN } from "consts/chains";
+import { disputeKitClassicAbi, disputeKitClassicAddress } from "hooks/contracts/generated";
+import useTransactionBatcher, { type TransactionBatcherConfig } from "hooks/useTransactionBatcher";
+import { getLocalRounds } from "utils/getLocalRounds";
+import { wrapWithToast } from "utils/wrapWithToast";
+
+import { useClassicAppealQuery } from "queries/useClassicAppealQuery";
+import useDisputeMaintenanceQuery from "queries/useDisputeMaintenanceQuery";
+
+import { Period } from "src/graphql/graphql";
+import { isUndefined } from "src/utils";
+
+import { IBaseMaintenanceButton } from ".";
+
+const StyledButton = styled(Button)`
+  width: 100%;
+`;
+
+interface IWithdrawAppealFees extends IBaseMaintenanceButton {
+  roundIndex?: number;
+  period?: string;
+  ruled?: boolean;
+}
+
+const WithdrawAppealFees: React.FC<IWithdrawAppealFees> = ({ id, roundIndex, setIsOpen, period, ruled }) => {
+  const [isSending, setIsSending] = useState(false);
+  const [contractConfigs, setContractConfigs] = useState<TransactionBatcherConfig>();
+  const publicClient = usePublicClient();
+  const { chainId } = useAccount();
+
+  const { data: maintenanceData } = useDisputeMaintenanceQuery(id);
+  const { data: appealData } = useClassicAppealQuery(id);
+
+  const localRounds = useMemo(() => getLocalRounds(appealData?.dispute?.disputeKitDispute), [appealData]);
+  console.log({ localRounds });
+
+  const feeDispersed = useMemo(
+    () =>
+      localRounds ? localRounds.slice(0, localRounds.length - 1).every((round) => round.appealFeesDispersed) : false,
+    [localRounds]
+  );
+
+  const filteredContributions = useMemo(() => {
+    const deDuplicatedContributions = [
+      ...new Set(maintenanceData?.contributions.filter((contribution) => !contribution.rewardWithdrawn)),
+    ];
+
+    return deDuplicatedContributions;
+  }, [maintenanceData]);
+
+  useEffect(() => {
+    if (isUndefined(id) || isUndefined(roundIndex)) return;
+
+    const baseArgs = {
+      abi: disputeKitClassicAbi,
+      address: disputeKitClassicAddress[chainId ?? DEFAULT_CHAIN],
+      functionName: "withdrawFeesAndRewards",
+    };
+
+    const argsArr: TransactionBatcherConfig = [];
+
+    for (const contribution of filteredContributions) {
+      for (let round = roundIndex; round >= 0; round--) {
+        argsArr.push({
+          ...baseArgs,
+          args: [BigInt(id), contribution.contributor.id, BigInt(round), contribution.choice],
+        });
+      }
+    }
+
+    setContractConfigs(argsArr);
+  }, [id, roundIndex, chainId, filteredContributions]);
+
+  const {
+    executeBatch,
+    batchConfig,
+    isLoading: isLoadingConfig,
+    isError,
+  } = useTransactionBatcher(contractConfigs, {
+    enabled: !isUndefined(period) && period === Period.Execution && Boolean(ruled) && !feeDispersed,
+  });
+
+  const isLoading = useMemo(() => isLoadingConfig || isSending, [isLoadingConfig, isSending]);
+  const isDisabled = useMemo(
+    () => isUndefined(id) || isError || isLoading || period !== Period.Execution || feeDispersed || !ruled,
+    [id, isError, isLoading, period, feeDispersed, ruled]
+  );
+
+  const handleClick = () => {
+    if (!publicClient || !batchConfig) return;
+    setIsSending(true);
+
+    wrapWithToast(async () => await executeBatch(batchConfig), publicClient).finally(() => {
+      setIsSending(false);
+      setIsOpen(false);
+    });
+  };
+  return <StyledButton text="Appeal Rewards" small isLoading={isLoading} disabled={isDisabled} onClick={handleClick} />;
+};
+
+export default WithdrawAppealFees;

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

@@ -16,6 +16,7 @@ import DrawButton from "./DrawButton";
 import ExecuteRulingButton from "./ExecuteRuling";
 import MenuButton from "./MenuButton";
 import PassPeriodButton from "./PassPeriodButton";
+import WithdrawAppealFees from "./WithdrawAppealFees";
 
 const Container = styled.div`
   width: 36px;
@@ -110,12 +111,18 @@ const MaintenanceButtons: React.FC = () => {
                   period={dispute?.period}
                 />
                 <PassPeriodButton {...{ id, setIsOpen }} period={dispute?.period} />
+                <ExecuteRulingButton {...{ id, setIsOpen }} period={dispute?.period} ruled={dispute?.ruled} />
                 <DistributeRewards
                   {...{ id, setIsOpen }}
                   roundIndex={dispute?.currentRoundIndex}
                   period={dispute?.period}
                 />
-                <ExecuteRulingButton {...{ id, setIsOpen }} period={dispute?.period} ruled={dispute?.ruled} />
+                <WithdrawAppealFees
+                  {...{ id, setIsOpen }}
+                  roundIndex={parseInt(dispute?.currentRoundIndex, 10)}
+                  period={dispute?.period}
+                  ruled={dispute?.ruled}
+                />
               </>
             </EnsureChain>
           </PopupContainer>

web/src/utils/getLocalRounds.ts

@@ -1,20 +1,12 @@
-import { ClassicAppealQuery } from "queries/useClassicAppealQuery";
-import { VotingHistoryQuery } from "queries/useVotingHistory";
-
-type IVotingHistoryLocalRounds = NonNullable<
-  NonNullable<VotingHistoryQuery["dispute"]>["disputeKitDispute"]
->["localRounds"];
-
-type IClassicAppealQueryLocalRounds = NonNullable<
-  NonNullable<ClassicAppealQuery["dispute"]>["disputeKitDispute"]
->["localRounds"];
-
-type ILocalRounds = IClassicAppealQueryLocalRounds | IVotingHistoryLocalRounds;
-
-interface IDisputeKitDisputes {
-  localRounds: ILocalRounds;
+interface DisputeKitDispute<T> {
+  localRounds: T[];
 }
 
-export const getLocalRounds = (disputeKitDisputes: IDisputeKitDisputes | undefined | null) => {
-  return disputeKitDisputes?.reduce<ILocalRounds>((acc: ILocalRounds, { localRounds }) => acc.concat(localRounds), []);
+/**
+ * @param disputeKitDisputes an array of dispute kit disputes with field localRounds
+ * @returns a flattened array of localRounds
+ */
+export const getLocalRounds = <T>(disputeKitDisputes: DisputeKitDispute<T>[] | undefined | null): T[] => {
+  if (!disputeKitDisputes) return [];
+  return disputeKitDisputes.flatMap(({ localRounds }) => localRounds);
 };