feat(wip/web): migrate contract interactions to wagmi

Author: alcercu

web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx

@@ -2,9 +2,12 @@ import React, { useState } from "react";
 import styled from "styled-components";
 import { useParams } from "react-router-dom";
 import { useAccount, useBalance } from "wagmi";
+import { useDebounce } from "react-use";
 import { Field, Button } from "@kleros/ui-components-library";
-import { DisputeKitClassic } from "@kleros/kleros-v2-contracts/typechain-types/src/arbitration/dispute-kits/DisputeKitClassic";
-import { useConnectedContract } from "hooks/useConnectedContract";
+import {
+  usePrepareDisputeKitClassicFundAppeal,
+  useDisputeKitClassicFundAppeal,
+} from "hooks/contracts/generated";
 import { wrapWithToast } from "utils/wrapWithToast";
 import { useParsedAmount } from "hooks/useParsedAmount";
 import {
@@ -13,6 +16,7 @@ import {
   useFundingContext,
 } from "hooks/useClassicAppealContext";
 import { notUndefined } from "utils/index";
+import { BigNumber } from "ethers";
 
 const Fund: React.FC = () => {
   const loserSideCountdown = useLoserSideCountdownContext();
@@ -26,15 +30,22 @@ const Fund: React.FC = () => {
   const { data: balance } = useBalance({
     address,
     watch: true,
-    cacheTime: 12_000,
   });
   const [amount, setAmount] = useState("");
-  const parsedAmount = useParsedAmount(amount);
+  const [debouncedAmount, setDebouncedAmount] = useState("");
+  useDebounce(() => setDebouncedAmount(amount), 500, [amount]);
+  const parsedAmount = useParsedAmount(debouncedAmount);
   const [isSending, setIsSending] = useState(false);
-  const disputeKitClassic = useConnectedContract(
-    "DisputeKitClassic"
-  ) as DisputeKitClassic;
   const { selectedOption } = useSelectedOptionContext();
+  const { config: fundAppealConfig } = usePrepareDisputeKitClassicFundAppeal({
+    enabled: notUndefined([id, selectedOption]),
+    args: [BigNumber.from(id), BigNumber.from(selectedOption)],
+    overrides: {
+      value: parsedAmount,
+    },
+  });
+  const { writeAsync: fundAppeal } =
+    useDisputeKitClassicFundAppeal(fundAppealConfig);
   return needFund ? (
     <div>
       <label>How much ETH do you want to contribute?</label>
@@ -54,18 +65,11 @@ const Fund: React.FC = () => {
             !balance ||
             parsedAmount.gt(balance.value)
           }
-          text={typeof balance === "undefined" ? "Connect to Fund" : "Fund"}
+          text={isDisconnected ? "Connect to Fund" : "Fund"}
           onClick={() => {
-            if (
-              typeof selectedOption !== "undefined" &&
-              typeof id !== "undefined"
-            ) {
+            if (fundAppeal) {
               setIsSending(true);
-              wrapWithToast(
-                disputeKitClassic.fundAppeal(id, selectedOption, {
-                  value: parsedAmount,
-                })
-              )
+              wrapWithToast(fundAppeal!())
                 .then(() => {
                   setAmount("");
                   close();

web/src/pages/Cases/CaseDetails/Evidence/SubmitEvidenceModal.tsx

@@ -1,20 +1,23 @@
 import React, { useState } from "react";
 import styled from "styled-components";
+import { BigNumber } from "ethers";
+import { useSigner } from "wagmi";
+import { toast } from "react-toastify";
 import Modal from "react-modal";
 import { Textarea, Button } from "@kleros/ui-components-library";
-import { DisputeKitClassic } from "@kleros/kleros-v2-contracts/typechain-types/src/arbitration/dispute-kits/DisputeKitClassic";
-import { wrapWithToast } from "utils/wrapWithToast";
-import { useConnectedContract } from "hooks/useConnectedContract";
+import { useDisputeKitClassic } from "hooks/contracts/generated";
+import { wrapWithToast, OPTIONS as toastOptions } from "utils/wrapWithToast";
 import { uploadFormDataToIPFS } from "utils/uploadFormDataToIPFS";
 
 const SubmitEvidenceModal: React.FC<{
   isOpen: boolean;
   evidenceGroup: string;
   close: () => void;
 }> = ({ isOpen, evidenceGroup, close }) => {
-  const disputeKit = useConnectedContract(
-    "DisputeKitClassic"
-  ) as DisputeKitClassic;
+  const { data: signer } = useSigner();
+  const disputeKit = useDisputeKitClassic({
+    signerOrProvider: signer,
+  });
   const [isSending, setIsSending] = useState(false);
   const [message, setMessage] = useState("");
   return (
@@ -37,23 +40,29 @@ const SubmitEvidenceModal: React.FC<{
           isLoading={isSending}
           disabled={isSending}
           onClick={() => {
-            setIsSending(true);
-            const formData = constructEvidence(message);
-            uploadFormDataToIPFS(formData)
-              .then(async (res) => {
-                const response = await res.json();
-                if (res.status === 200) {
-                  const cid = "/ipfs/" + response["cid"];
-                  await wrapWithToast(
-                    disputeKit.submitEvidence(evidenceGroup, cid)
-                  ).then(() => {
-                    setMessage("");
-                    close();
-                  });
-                }
-              })
-              .catch()
-              .finally(() => setIsSending(false));
+            if (disputeKit) {
+              setIsSending(true);
+              const formData = constructEvidence(message);
+              toast.info("Uploading to IPFS", toastOptions);
+              uploadFormDataToIPFS(formData)
+                .then(async (res) => {
+                  const response = await res.json();
+                  if (res.status === 200) {
+                    const cid = "/ipfs/" + response["cid"];
+                    await wrapWithToast(
+                      disputeKit.submitEvidence(
+                        BigNumber.from(evidenceGroup),
+                        cid
+                      )
+                    ).then(() => {
+                      setMessage("");
+                      close();
+                    });
+                  }
+                })
+                .catch()
+                .finally(() => setIsSending(false));
+            }
           }}
         />
       </ButtonArea>

web/src/pages/Cases/CaseDetails/Voting/Binary.tsx

@@ -1,24 +1,31 @@
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
 import styled from "styled-components";
 import { useParams } from "react-router-dom";
-import { DisputeKitClassic } from "@kleros/kleros-v2-contracts/typechain-types/src/arbitration/dispute-kits/DisputeKitClassic";
 import { Button, Textarea } from "@kleros/ui-components-library";
-import { useConnectedContract } from "hooks/useConnectedContract";
+import { useDisputeKitClassic } from "hooks/contracts/generated";
 import { useGetMetaEvidence } from "queries/useGetMetaEvidence";
 import { wrapWithToast } from "utils/wrapWithToast";
+import { useSigner } from "wagmi";
+import { BigNumber } from "ethers";
 
 const Binary: React.FC<{ arbitrable?: string; voteIDs: string[] }> = ({
   arbitrable,
   voteIDs,
 }) => {
   const { id } = useParams();
+  const parsedDisputeID = BigNumber.from(id);
+  const parsedVoteIDs = useMemo(
+    () => voteIDs.map((voteID) => BigNumber.from(voteID)),
+    [voteIDs]
+  );
   const { data: metaEvidence } = useGetMetaEvidence(id, arbitrable);
   const [chosenOption, setChosenOption] = useState(-1);
   const [isSending, setIsSending] = useState(false);
   const [justification, setJustification] = useState("");
-  const disputeKit = useConnectedContract(
-    "DisputeKitClassic"
-  ) as DisputeKitClassic;
+  const { data: signer } = useSigner();
+  const disputeKit = useDisputeKitClassic({
+    signerOrProvider: signer,
+  });
   return id ? (
     <Container>
       <MainContainer>
@@ -42,14 +49,22 @@ const Binary: React.FC<{ arbitrable?: string; voteIDs: string[] }> = ({
                 disabled={isSending}
                 isLoading={chosenOption === i + 1}
                 onClick={() => {
-                  setIsSending(true);
-                  setChosenOption(i + 1);
-                  wrapWithToast(
-                    disputeKit.castVote(id, voteIDs, i + 1, 0, justification)
-                  ).finally(() => {
-                    setChosenOption(-1);
-                    setIsSending(false);
-                  });
+                  if (disputeKit) {
+                    setIsSending(true);
+                    setChosenOption(i + 1);
+                    wrapWithToast(
+                      disputeKit!.castVote(
+                        parsedDisputeID,
+                        parsedVoteIDs,
+                        BigNumber.from(i + 1),
+                        BigNumber.from(0),
+                        justification
+                      )
+                    ).finally(() => {
+                      setChosenOption(-1);
+                      setIsSending(false);
+                    });
+                  }
                 }}
               />
             )
@@ -63,14 +78,22 @@ const Binary: React.FC<{ arbitrable?: string; voteIDs: string[] }> = ({
           disabled={isSending}
           isLoading={chosenOption === 0}
           onClick={() => {
-            setIsSending(true);
-            setChosenOption(0);
-            wrapWithToast(
-              disputeKit.castVote(id, voteIDs, 0, 0, justification)
-            ).finally(() => {
-              setChosenOption(-1);
-              setIsSending(false);
-            });
+            if (disputeKit) {
+              setIsSending(true);
+              setChosenOption(0);
+              wrapWithToast(
+                disputeKit.castVote(
+                  parsedDisputeID,
+                  parsedVoteIDs,
+                  BigNumber.from(0),
+                  BigNumber.from(0),
+                  justification
+                )
+              ).finally(() => {
+                setChosenOption(-1);
+                setIsSending(false);
+              });
+            }
           }}
         />
       </RefuseToArbitrateContainer>

web/src/pages/Courts/CourtDetails/StakePanel/InputDisplay.tsx

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import styled from "styled-components";
 import { useParams } from "react-router-dom";
 import { utils } from "ethers";
+import { useDebounce } from "react-use";
 import { useAccount } from "wagmi";
 import { Button, Field } from "@kleros/ui-components-library";
 
@@ -22,7 +23,9 @@ const InputDisplay: React.FC<IInputDisplay> = ({
   setIsSending,
 }) => {
   const [amount, setAmount] = useState("");
-  const parsedAmount = useParsedAmount(amount);
+  const [debouncedAmount, setDebouncedAmount] = useState("");
+  useDebounce(() => setDebouncedAmount(amount), 500, [amount]);
+  const parsedAmount = useParsedAmount(debouncedAmount);
 
   const { id } = useParams();
   const { address } = useAccount();
@@ -55,7 +58,7 @@ const InputDisplay: React.FC<IInputDisplay> = ({
           placeholder={isStaking ? "Amount to stake" : "Amount to withdraw"}
           message={
             isStaking
-              ? "You need two transactions, one to increase allowance, the other to stake."
+              ? "You may need two transactions, one to increase allowance, the other to stake."
               : undefined
           }
           variant="info"
@@ -77,8 +80,6 @@ const InputDisplay: React.FC<IInputDisplay> = ({
     </>
   );
 };
-// onClick={activate}
-// disabled={connecting}
 
 export default InputDisplay;
 

web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx

@@ -1,19 +1,17 @@
 import React, { useMemo } from "react";
 import { useParams } from "react-router-dom";
 import { BigNumber } from "ethers";
-import { Button } from "@kleros/ui-components-library";
 import { useAccount } from "wagmi";
-
+import { Button } from "@kleros/ui-components-library";
+import { usePNKAllowance } from "hooks/queries/usePNKAllowance";
 import {
   useKlerosCore,
   useKlerosCoreSetStake,
   usePrepareKlerosCoreSetStake,
-  usePnkAllowance,
+  usePnkBalanceOf,
   usePnkIncreaseAllowance,
   usePreparePnkIncreaseAllowance,
 } from "hooks/contracts/generated";
-
-import { usePNKBalance } from "queries/usePNKBalance";
 import { useJurorBalance } from "queries/useJurorBalance";
 import { wrapWithToast } from "utils/wrapWithToast";
 import { notUndefined } from "utils/index";
@@ -41,20 +39,19 @@ const StakeWithdrawButton: React.FC<IActionButton> = ({
 }) => {
   const { id } = useParams();
   const { address } = useAccount();
-  const { data: balance } = usePNKBalance(address);
-  const { data: jurorBalance } = useJurorBalance(address, id);
-  const { data: allowance } = usePnkAllowance({
+  const { data: balance } = usePnkBalanceOf({
     enabled: notUndefined(address),
     args: [address!],
     watch: true,
-    cacheOnBlock: true,
   });
+  const { data: jurorBalance } = useJurorBalance(address, id);
+  const { data: allowance } = usePNKAllowance(address);
 
   const isStaking = action === ActionType.stake;
   const isAllowance = isStaking && allowance && allowance.lt(parsedAmount);
 
   const targetStake = useMemo(() => {
-    if (action === ActionType.stake || action === ActionType.allowance) {
+    if (action === ActionType.stake) {
       return jurorBalance?.staked.add(parsedAmount);
     } else {
       return jurorBalance?.staked.sub(parsedAmount);
@@ -64,7 +61,10 @@ const StakeWithdrawButton: React.FC<IActionButton> = ({
   const klerosCore = useKlerosCore();
   const { config: increaseAllowanceConfig } = usePreparePnkIncreaseAllowance({
     enabled: notUndefined([klerosCore, targetStake, allowance]),
-    args: [klerosCore!.address, targetStake!.sub(allowance!)],
+    args: [
+      klerosCore?.address,
+      targetStake?.sub(allowance ?? BigNumber.from(0))!,
+    ],
   });
   const { writeAsync: increaseAllowance } = usePnkIncreaseAllowance(
     increaseAllowanceConfig
@@ -79,8 +79,8 @@ const StakeWithdrawButton: React.FC<IActionButton> = ({
   };
 
   const { config: setStakeConfig } = usePrepareKlerosCoreSetStake({
-    enabled: notUndefined(targetStake),
-    args: [targetStake!, targetStake!],
+    enabled: notUndefined([targetStake, id]),
+    args: [id, targetStake],
   });
   const { writeAsync: setStake } = useKlerosCoreSetStake(setStakeConfig);
   const handleStake = () => {

web/src/utils/wrapWithToast.ts

@@ -14,8 +14,8 @@ export const OPTIONS = {
 export async function wrapWithToast(tx: Promise<any>) {
   toast.info("Transaction initiated", OPTIONS);
   await tx
-    .then((tx) => {
-      tx.wait(2);
+    .then(async (tx) => {
+      await tx.wait(2);
       toast.success("Transaction mined!", OPTIONS);
     })
     .catch((error) => {

web/wagmi.config.ts

@@ -3,6 +3,7 @@ import { react } from "@wagmi/cli/plugins";
 import { arbitrumGoerli } from "wagmi/chains";
 import KlerosCore from "@kleros/kleros-v2-contracts/deployments/arbitrumGoerli/KlerosCore.json" assert { type: "json" };
 import PNK from "@kleros/kleros-v2-contracts/deployments/arbitrumGoerli/PNK.json" assert { type: "json" };
+import DisputeKitClassic from "@kleros/kleros-v2-contracts/deployments/arbitrumGoerli/DisputeKitClassic.json" assert { type: "json" };
 
 export default defineConfig({
   out: "src/hooks/contracts/generated.ts",
@@ -14,6 +15,13 @@ export default defineConfig({
       },
       abi: KlerosCore.abi,
     },
+    {
+      name: "DisputeKitClassic",
+      address: {
+        [arbitrumGoerli.id]: DisputeKitClassic.address,
+      },
+      abi: DisputeKitClassic.abi,
+    },
     {
       name: "PNK",
       address: {