Merge pull request #913 from kleros/refactor(web)/ethers-to-viem-marinos-files

Refactor(web)/ethers to viem marinos files

Author: alcercu

web/src/hooks/useParsedAmount.ts

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { parseUnits } from "viem";
 
-export function useParsedAmount(amount: string): bigint {
-  return useMemo(() => (amount === "" ? 0n : parseUnits(`${parseInt(amount)}`, 18)), [amount]);
+export function useParsedAmount(amount: `${number}`): bigint {
+  return useMemo(() => parseUnits(amount, 18), [amount]);
 }

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

@@ -4,10 +4,7 @@ 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 {
-  usePrepareDisputeKitClassicFundAppeal,
-  useDisputeKitClassicFundAppeal,
-} from "hooks/contracts/generated";
+import { usePrepareDisputeKitClassicFundAppeal, useDisputeKitClassicFundAppeal } from "hooks/contracts/generated";
 import { wrapWithToast } from "utils/wrapWithToast";
 import { useParsedAmount } from "hooks/useParsedAmount";
 import {
@@ -16,15 +13,13 @@ import {
   useFundingContext,
 } from "hooks/useClassicAppealContext";
 import { notUndefined } from "utils/index";
-import { BigNumber } from "ethers";
 
 const Fund: React.FC = () => {
   const loserSideCountdown = useLoserSideCountdownContext();
   const { fundedChoices, winningChoice } = useFundingContext();
   const needFund =
     notUndefined([loserSideCountdown, fundedChoices]) &&
-    (loserSideCountdown! > 0 ||
-      (fundedChoices!.length > 0 && !fundedChoices?.includes(winningChoice!)));
+    (loserSideCountdown! > 0 || (fundedChoices!.length > 0 && !fundedChoices?.includes(winningChoice!)));
   const { id } = useParams();
   const { address, isDisconnected } = useAccount();
   const { data: balance } = useBalance({
@@ -39,13 +34,10 @@ const Fund: React.FC = () => {
   const { selectedOption } = useSelectedOptionContext();
   const { config: fundAppealConfig } = usePrepareDisputeKitClassicFundAppeal({
     enabled: notUndefined([id, selectedOption]),
-    args: [BigNumber.from(id), BigNumber.from(selectedOption)],
-    overrides: {
-      value: parsedAmount,
-    },
+    args: [BigInt(id!), BigInt(selectedOption!)],
+    value: parsedAmount,
   });
-  const { writeAsync: fundAppeal } =
-    useDisputeKitClassicFundAppeal(fundAppealConfig);
+  const { writeAsync: fundAppeal } = useDisputeKitClassicFundAppeal(fundAppealConfig);
   return needFund ? (
     <div>
       <label>How much ETH do you want to contribute?</label>
@@ -59,12 +51,7 @@ const Fund: React.FC = () => {
           placeholder="Amount to fund"
         />
         <StyledButton
-          disabled={
-            isDisconnected ||
-            isSending ||
-            !balance ||
-            parsedAmount.gt(balance.value)
-          }
+          disabled={isDisconnected || isSending || !balance || parsedAmount > balance.value}
           text={isDisconnected ? "Connect to Fund" : "Fund"}
           onClick={() => {
             if (fundAppeal) {

web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/StageOne.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import styled from "styled-components";
-import { BigNumber } from "ethers";
 import StageExplainer from "../StageExplainer";
 import OptionCard from "../../OptionCard";
 import {
@@ -11,12 +10,7 @@ import {
 } from "hooks/useClassicAppealContext";
 
 const StageOne: React.FC = () => {
-  const {
-    paidFees,
-    winningChoice,
-    loserRequiredFunding,
-    winnerRequiredFunding,
-  } = useFundingContext();
+  const { paidFees, winningChoice, loserRequiredFunding, winnerRequiredFunding } = useFundingContext();
   const options = useOptionsContext();
   const loserSideCountdown = useLoserSideCountdownContext();
   const { selectedOption, setSelectedOption } = useSelectedOptionContext();
@@ -34,14 +28,8 @@ const StageOne: React.FC = () => {
               text={answer}
               selected={i === selectedOption}
               winner={i.toString() === winningChoice}
-              funding={
-                paidFees[i] ? BigNumber.from(paidFees[i]) : BigNumber.from(0)
-              }
-              required={
-                i.toString() === winningChoice
-                  ? winnerRequiredFunding
-                  : loserRequiredFunding
-              }
+              funding={paidFees[i] ? BigInt(paidFees[i]) : 0n}
+              required={i.toString() === winningChoice ? winnerRequiredFunding : loserRequiredFunding}
               onClick={() => setSelectedOption(i)}
             />
           ))}

web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/StageTwo.tsx

@@ -1,52 +1,37 @@
 import React, { useEffect } from "react";
 import styled from "styled-components";
-import { BigNumber } from "ethers";
 import OptionCard from "../../OptionCard";
-import {
-  useFundingContext,
-  useOptionsContext,
-  useSelectedOptionContext,
-} from "hooks/useClassicAppealContext";
+import { useFundingContext, useOptionsContext, useSelectedOptionContext } from "hooks/useClassicAppealContext";
 import { notUndefined } from "utils/index";
 
 const StageOne: React.FC = () => {
-  const { paidFees, winningChoice, winnerRequiredFunding, fundedChoices } =
-    useFundingContext();
+  const { paidFees, winningChoice, winnerRequiredFunding, fundedChoices } = useFundingContext();
   const options = useOptionsContext();
   const { selectedOption, setSelectedOption } = useSelectedOptionContext();
   useEffect(() => {
-    if (notUndefined(winningChoice))
-      setSelectedOption(parseInt(winningChoice!));
+    if (notUndefined(winningChoice)) setSelectedOption(parseInt(winningChoice!));
   });
   return (
     <Container>
       {notUndefined([winningChoice, fundedChoices, paidFees]) &&
       fundedChoices!.length > 0 &&
       !fundedChoices?.includes(winningChoice!) ? (
         <>
-          <label>
-            Loser deadline has finalized, you can only fund the current winner.
-          </label>
+          <label>Loser deadline has finalized, you can only fund the current winner.</label>
           <OptionsContainer>
             <OptionCard
               text={options![winningChoice!]}
               selected={winningChoice === selectedOption}
               winner={true}
-              funding={
-                paidFees![winningChoice!]
-                  ? BigNumber.from(paidFees![winningChoice!])
-                  : BigNumber.from(0)
-              }
+              funding={paidFees![winningChoice!] ? BigInt(paidFees![winningChoice!]) : 0n}
               required={winnerRequiredFunding!}
               canBeSelected={false}
               onClick={() => setSelectedOption(parseInt(winningChoice!, 10))}
             />
           </OptionsContainer>
         </>
       ) : (
-        <label>
-          No losing option has been funded in time, winner is maintained.
-        </label>
+        <label>No losing option has been funded in time, winner is maintained.</label>
       )}
     </Container>
   );

web/src/pages/Cases/CaseDetails/Appeal/OptionCard.tsx

@@ -3,12 +3,12 @@ import styled from "styled-components";
 import { useMeasure } from "react-use";
 import { Card, Radio, LinearProgress } from "@kleros/ui-components-library";
 import Gavel from "svgs/icons/gavel.svg";
-import { BigNumber, utils } from "ethers";
+import { formatEther } from "viem";
 
 interface IOptionCard extends React.HTMLAttributes<HTMLDivElement> {
   text: string;
-  funding: BigNumber;
-  required: BigNumber;
+  funding: bigint;
+  required: bigint;
   winner?: boolean;
   selected?: boolean;
   canBeSelected?: boolean;
@@ -38,18 +38,12 @@ const OptionCard: React.FC<IOptionCard> = ({
       </TopContainer>
       <LabelContainer>
         <label>
-          {funding.gte(required)
+          {funding >= required
             ? "Fully funded!"
-            : utils.formatEther(funding) +
-              " out of " +
-              utils.formatEther(required) +
-              "ETH required"}
+            : formatEther(funding) + " out of " + formatEther(required) + "ETH required"}
         </label>
       </LabelContainer>
-      <LinearProgress
-        progress={funding.mul(100).div(required).toNumber()}
-        width={width}
-      />
+      <LinearProgress progress={Number((funding * 100n) / required)} width={width} />
     </StyledCard>
   );
 };

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

@@ -1,23 +1,19 @@
 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 { useDisputeKitClassic } from "hooks/contracts/generated";
 import { wrapWithToast, OPTIONS as toastOptions } from "utils/wrapWithToast";
 import { uploadFormDataToIPFS } from "utils/uploadFormDataToIPFS";
+import { useWalletClient } from "wagmi";
+import { prepareWriteDisputeKitClassic } from "hooks/contracts/generated";
 
 const SubmitEvidenceModal: React.FC<{
   isOpen: boolean;
   evidenceGroup: string;
   close: () => void;
 }> = ({ isOpen, evidenceGroup, close }) => {
-  const { data: signer } = useSigner();
-  const disputeKit = useDisputeKitClassic({
-    signerOrProvider: signer,
-  });
+  const { data: walletClient } = useWalletClient();
   const [isSending, setIsSending] = useState(false);
   const [message, setMessage] = useState("");
   return (
@@ -31,24 +27,26 @@ const SubmitEvidenceModal: React.FC<{
           isLoading={isSending}
           disabled={isSending}
           onClick={() => {
-            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));
-            }
+            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"];
+                  const { request } = await prepareWriteDisputeKitClassic({
+                    functionName: "submitEvidence",
+                    args: [BigInt(evidenceGroup), cid],
+                  });
+                  await wrapWithToast(walletClient!.writeContract(request)).then(() => {
+                    setMessage("");
+                    close();
+                  });
+                }
+              })
+              .catch()
+              .finally(() => setIsSending(false));
           }}
         />
       </ButtonArea>