chore(web): migrate-from-wagmi-v1-to-v2

kleros · Sep 6, 2024 · de065b2 · de065b2
1 parent a2e0556
commit de065b2
Show file tree

Hide file tree

Showing 29 changed files with 1,909 additions and 637 deletions.
diff --git a/web/netlify/functions/authUser.ts b/web/netlify/functions/authUser.ts
@@ -9,6 +9,8 @@ import { ETH_SIGNATURE_REGEX } from "consts/index";
 
 import { netlifyUri, netlifyDeployUri, netlifyDeployPrimeUri } from "src/generatedNetlifyInfo.json";
 import { Database } from "src/types/supabase-notification";
+import { ethers } from "ethers";
+import { isProductionDeployment } from "consts/processEnvConst";
 
 const authUser = async (event) => {
   try {
@@ -74,9 +76,14 @@ const authUser = async (event) => {
     }
 
     try {
-      await siweMessage.verify({ signature, nonce: nonceData.nonce, time: new Date().toISOString() });
+      // If the main Alchemy API key is permissioned, it won't work in a Netlify Function so we use a dedicated API key
+      const alchemyApiKey = process.env.ALCHEMY_FUNCTIONS_API_KEY ?? process.env.ALCHEMY_API_KEY;
+      const alchemyChain = isProductionDeployment() ? "arb-mainnet" : "arb-sepolia";
+      const alchemyRpcURL = `https://${alchemyChain}.g.alchemy.com/v2/${alchemyApiKey}`;
+      const provider = new ethers.providers.JsonRpcProvider(alchemyRpcURL);
+      await siweMessage.verify({ signature, nonce: nonceData.nonce, time: new Date().toISOString() }, { provider });
     } catch (err) {
-      throw new Error("Invalid signer");
+      throw new Error("Invalid signer: " + JSON.stringify(err));
     }
 
     const { error } = await supabase.from("user-nonce").delete().match({ address: lowerCaseAddress });

diff --git a/web/package.json b/web/package.json
@@ -58,7 +58,7 @@
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "@typescript-eslint/utils": "^5.62.0",
-    "@wagmi/cli": "^1.5.2",
+    "@wagmi/cli": "^2.1.15",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^8.10.0",
     "eslint-plugin-react": "^7.33.2",
@@ -83,6 +83,7 @@
     "@tanstack/react-query": "^4.28.0",
     "@web3modal/ethereum": "^2.7.1",
     "@web3modal/react": "^2.2.2",
+    "@web3modal/wagmi": "^5.1.6",
     "@yornaath/batshit": "^0.9.0",
     "amqplib": "^0.10.3",
     "chart.js": "^3.9.1",
@@ -112,7 +113,7 @@
     "siwe": "^2.3.2",
     "styled-components": "^5.3.11",
     "subgraph-status": "^1.2.3",
-    "viem": "^1.21.4",
-    "wagmi": "^1.4.13"
+    "viem": "^2.21.2",
+    "wagmi": "^2.12.8"
   }
 }
diff --git a/web/src/app.tsx b/web/src/app.tsx
@@ -7,7 +7,6 @@ import Web3Provider from "context/Web3Provider";
 import IsListViewProvider from "context/IsListViewProvider";
 import QueryClientProvider from "context/QueryClientProvider";
 import StyledComponentsProvider from "context/StyledComponentsProvider";
-import RefetchOnBlock from "context/RefetchOnBlock";
 import Layout from "layout/index";
 import Home from "./pages/Home";
 import AllLists from "./pages/AllLists";
@@ -21,10 +20,9 @@ import { SubmitListProvider } from "./context/SubmitListContext";
 const App: React.FC = () => {
   return (
     <StyledComponentsProvider>
-      <QueryClientProvider>
-        <RefetchOnBlock />
+      <Web3Provider>
         <GraphqlBatcherProvider>
-          <Web3Provider>
+          <QueryClientProvider>
             <IsListViewProvider>
               <SubmitListProvider>
                 <SubmitItemProvider>
@@ -47,9 +45,9 @@ const App: React.FC = () => {
                 </SubmitItemProvider>
               </SubmitListProvider>
             </IsListViewProvider>
-          </Web3Provider>
+          </QueryClientProvider>
         </GraphqlBatcherProvider>
-      </QueryClientProvider>
+      </Web3Provider>
     </StyledComponentsProvider>
   );
 };

diff --git a/web/src/components/ActionButton/ExecuteButton.tsx b/web/src/components/ActionButton/ExecuteButton.tsx
@@ -2,9 +2,9 @@ import { Button } from "@kleros/ui-components-library";
 import React, { useState } from "react";
 import { Address } from "viem";
 import { usePublicClient } from "wagmi";
-import { useCurateV2ExecuteRequest, usePrepareCurateV2ExecuteRequest } from "hooks/contracts/generated";
 import { wrapWithToast } from "utils/wrapWithToast";
 import { EnsureChain } from "../EnsureChain";
+import { useSimulateCurateV2ExecuteRequest, useWriteCurateV2ExecuteRequest } from "hooks/useContract";
 
 interface IExecuteButton {
   registryAddress: Address;
@@ -17,28 +17,21 @@ const ExecuteButton: React.FC<IExecuteButton> = ({ registryAddress, itemId, refe
   const [isExecuting, setIsExecuting] = useState(false);
 
   const {
-    config,
+    data: config,
     isError,
     isLoading: isPreparingConfig,
-    //@ts-ignore
-  } = usePrepareCurateV2ExecuteRequest({ address: registryAddress, args: [itemId as `0x${string}`] });
-  const { writeAsync: executeRequest, isLoading } = useCurateV2ExecuteRequest(config);
+  } = useSimulateCurateV2ExecuteRequest({ address: registryAddress, args: [itemId as `0x${string}`] });
+  const { writeContractAsync: executeRequest, isLoading } = useWriteCurateV2ExecuteRequest();
   return (
     <EnsureChain>
       <Button
         text="Execute"
         disabled={isLoading || isError || isExecuting || isPreparingConfig || disabled}
         isLoading={isLoading || isExecuting}
         onClick={() => {
-          if (!executeRequest) return;
+          if (!executeRequest || !config || !publicClient) return;
           setIsExecuting(true);
-          wrapWithToast(
-            async () =>
-              await executeRequest().then((response) => {
-                return response.hash;
-              }),
-            publicClient
-          )
+          wrapWithToast(async () => await executeRequest(config.request), publicClient)
             .then(() => refetch())
             .catch(() => {})
             .finally(() => setIsExecuting(false));

diff --git a/web/src/components/ActionButton/Modal/ChallengeItemModal.tsx b/web/src/components/ActionButton/Modal/ChallengeItemModal.tsx
@@ -4,20 +4,20 @@ import Header from "./Header";
 import Buttons from "./Buttons";
 import DepositRequired from "./DepositRequired";
 import Info from "./Info";
-import {
-  useCurateV2ChallengeRequest,
-  useCurateV2GetArbitratorExtraData,
-  useCurateV2RemovalChallengeBaseDeposit,
-  useCurateV2SubmissionChallengeBaseDeposit,
-  usePrepareCurateV2ChallengeRequest,
-} from "hooks/contracts/generated";
 import { useArbitrationCost } from "hooks/useArbitrationCostFromKlerosCore";
 import { useAccount, useBalance, usePublicClient } from "wagmi";
 import { wrapWithToast } from "utils/wrapWithToast";
 import { IBaseModal } from ".";
 import EvidenceUpload, { Evidence } from "./EvidenceUpload";
 import Modal from "components/Modal";
 import { isUndefined } from "src/utils";
+import {
+  useReadCurateV2GetArbitratorExtraData,
+  useReadCurateV2RemovalChallengeBaseDeposit,
+  useReadCurateV2SubmissionChallengeBaseDeposit,
+  useSimulateCurateV2ChallengeRequest,
+  useWriteCurateV2ChallengeRequest,
+} from "hooks/useContract";
 
 const ReStyledModal = styled(Modal)`
   gap: 32px;
@@ -54,18 +54,15 @@ const ChallengeItemModal: React.FC<IChallengeItemModal> = ({
 
   const { data: userBalance, isLoading: isBalanceLoading } = useBalance({ address });
 
-  const { data: arbitratorExtraData, isLoading: isLoadingExtradata } = useCurateV2GetArbitratorExtraData({
-    // @ts-ignore
+  const { data: arbitratorExtraData, isLoading: isLoadingExtradata } = useReadCurateV2GetArbitratorExtraData({
     address: registryAddress,
   });
 
   const { data: submissionChallengeDeposit, isLoading: isSubmissionChallengeDepositLoading } =
-    //@ts-ignore
-    useCurateV2SubmissionChallengeBaseDeposit({ address: registryAddress });
+    useReadCurateV2SubmissionChallengeBaseDeposit({ address: registryAddress });
 
   const { data: removalChallengeDeposit, isLoading: isRemovalChallengeDepositLoading } =
-    useCurateV2RemovalChallengeBaseDeposit({
-      //@ts-ignore
+    useReadCurateV2RemovalChallengeBaseDeposit({
       address: registryAddress,
     });
 
@@ -86,16 +83,14 @@ const ChallengeItemModal: React.FC<IChallengeItemModal> = ({
     return userBalance?.value < depositRequired;
   }, [depositRequired, userBalance, isEvidenceUploading, isEvidenceValid]);
 
-  const { config } = usePrepareCurateV2ChallengeRequest({
-    enabled: !isUndefined(itemId) && !isUndefined(evidence) && !isDisabled,
-    //@ts-ignore
+  const { data: config } = useSimulateCurateV2ChallengeRequest({
+    query: { enabled: !isUndefined(itemId) && !isUndefined(evidence) && !isDisabled },
     address: registryAddress,
-    functionName: "challengeRequest",
     args: [itemId as `0x${string}`, JSON.stringify(evidence)],
     value: depositRequired,
   });
 
-  const { writeAsync: challengeRequest } = useCurateV2ChallengeRequest(config);
+  const { writeContractAsync: challengeRequest } = useWriteCurateV2ChallengeRequest();
 
   const isLoading = useMemo(
     () =>
@@ -129,9 +124,9 @@ const ChallengeItemModal: React.FC<IChallengeItemModal> = ({
         isDisabled={isDisabled || isChallengingItem}
         isLoading={isLoading}
         callback={() => {
-          if (challengeRequest) {
+          if (challengeRequest && publicClient && config) {
             setIsChallengingItem(true);
-            wrapWithToast(async () => await challengeRequest().then((response) => response.hash), publicClient)
+            wrapWithToast(async () => await challengeRequest(config.request), publicClient)
               .then(() => {
                 refetch();
                 toggleModal();

diff --git a/web/src/components/ActionButton/Modal/RemoveModal.tsx b/web/src/components/ActionButton/Modal/RemoveModal.tsx
@@ -6,18 +6,17 @@ import DepositRequired from "./DepositRequired";
 import Info from "./Info";
 import { IBaseModal } from ".";
 import { useAccount, useBalance, usePublicClient } from "wagmi";
-import {
-  useCurateV2GetArbitratorExtraData,
-  useCurateV2RemovalBaseDeposit,
-  useCurateV2RemoveItem,
-  usePrepareCurateV2RemoveItem,
-} from "hooks/contracts/generated";
 import { useArbitrationCost } from "hooks/useArbitrationCostFromKlerosCore";
 import { wrapWithToast } from "utils/wrapWithToast";
 import EvidenceUpload, { Evidence } from "./EvidenceUpload";
-import { uploadFileToIPFS } from "utils/uploadFileToIPFS";
 import Modal from "components/Modal";
 import { isUndefined } from "src/utils";
+import {
+  useReadCurateV2GetArbitratorExtraData,
+  useReadCurateV2RemovalBaseDeposit,
+  useSimulateCurateV2RemoveItem,
+  useWriteCurateV2RemoveItem,
+} from "hooks/useContract";
 
 const ReStyledModal = styled(Modal)`
   gap: 32px;
@@ -41,13 +40,11 @@ const RemoveModal: React.FC<IRemoveModal> = ({ toggleModal, isItem, registryAddr
 
   const { data: userBalance, isLoading: isBalanceLoading } = useBalance({ address });
 
-  const { data: arbitratorExtraData, isLoading: isLoadingExtradata } = useCurateV2GetArbitratorExtraData({
-    //@ts-ignore
+  const { data: arbitratorExtraData, isLoading: isLoadingExtradata } = useReadCurateV2GetArbitratorExtraData({
     address: registryAddress,
   });
 
-  const { data: removalDeposit, isLoading: isRemovalDepositLoading } = useCurateV2RemovalBaseDeposit({
-    //@ts-ignore
+  const { data: removalDeposit, isLoading: isRemovalDepositLoading } = useReadCurateV2RemovalBaseDeposit({
     address: registryAddress,
   });
 
@@ -65,16 +62,14 @@ const RemoveModal: React.FC<IRemoveModal> = ({ toggleModal, isItem, registryAddr
     return userBalance?.value < depositRequired;
   }, [depositRequired, userBalance, isEvidenceUploading, isEvidenceValid]);
 
-  const { config } = usePrepareCurateV2RemoveItem({
-    enabled: !isDisabled || !isUndefined(evidence),
-    //@ts-ignore
+  const { data: config } = useSimulateCurateV2RemoveItem({
+    query: { enabled: !isDisabled && !isUndefined(evidence) },
     address: registryAddress,
-    functionName: "removeItem",
     args: [itemId as `0x${string}`, JSON.stringify(evidence)],
     value: depositRequired,
   });
 
-  const { writeAsync: removeItem } = useCurateV2RemoveItem(config);
+  const { writeContractAsync: removeItem } = useWriteCurateV2RemoveItem();
   const isLoading = useMemo(
     () =>
       isBalanceLoading ||
@@ -105,9 +100,9 @@ const RemoveModal: React.FC<IRemoveModal> = ({ toggleModal, isItem, registryAddr
         isDisabled={isDisabled || isRemovingItem}
         isLoading={isLoading}
         callback={() => {
-          if (removeItem) {
+          if (removeItem && publicClient && config) {
             setIsRemovingItem(true);
-            wrapWithToast(async () => await removeItem().then((response) => response.hash), publicClient)
+            wrapWithToast(async () => await removeItem(config.request), publicClient)
               .then((res) => {
                 refetch();
                 toggleModal();

diff --git a/web/src/components/ActionButton/Modal/ResubmitModal.tsx b/web/src/components/ActionButton/Modal/ResubmitModal.tsx
@@ -6,16 +6,16 @@ import DepositRequired from "./DepositRequired";
 import Info from "./Info";
 import { IBaseModal } from ".";
 import { useAccount, useBalance, usePublicClient } from "wagmi";
-import {
-  useCurateV2AddItem,
-  useCurateV2GetArbitratorExtraData,
-  useCurateV2SubmissionBaseDeposit,
-  usePrepareCurateV2AddItem,
-} from "hooks/contracts/generated";
 import { useArbitrationCost } from "hooks/useArbitrationCostFromKlerosCore";
 import { wrapWithToast } from "utils/wrapWithToast";
 import { useItemDetailsQuery } from "hooks/queries/useItemDetailsQuery";
 import Modal from "components/Modal";
+import {
+  useReadCurateV2GetArbitratorExtraData,
+  useReadCurateV2SubmissionBaseDeposit,
+  useSimulateCurateV2AddItem,
+  useWriteCurateV2AddItem,
+} from "hooks/useContract";
 
 const ReStyledModal = styled(Modal)`
   gap: 32px;
@@ -36,13 +36,11 @@ const ResubmitModal: React.FC<ISubmitModal> = ({ toggleModal, isItem, registryAd
   const { data: userBalance, isLoading: isBalanceLoading } = useBalance({ address });
   const { data: itemData, isLoading: isItemDataLoading } = useItemDetailsQuery(`${itemId}@${registryAddress}`);
 
-  const { data: arbitratorExtraData, isLoading: isLoadingExtradata } = useCurateV2GetArbitratorExtraData({
-    // @ts-ignore
+  const { data: arbitratorExtraData, isLoading: isLoadingExtradata } = useReadCurateV2GetArbitratorExtraData({
     address: registryAddress,
   });
 
-  const { data: removalDeposit, isLoading: isSubmissionDepositLoading } = useCurateV2SubmissionBaseDeposit({
-    //@ts-ignore
+  const { data: removalDeposit, isLoading: isSubmissionDepositLoading } = useReadCurateV2SubmissionBaseDeposit({
     address: registryAddress,
   });
 
@@ -64,15 +62,16 @@ const ResubmitModal: React.FC<ISubmitModal> = ({ toggleModal, isItem, registryAd
     return userBalance?.value < depositRequired;
   }, [depositRequired, userBalance]);
 
-  const { config, isError } = usePrepareCurateV2AddItem({
-    enabled: address && registryAddress && !isLoading && !isDisabled && !isItemDataLoading,
-    //@ts-ignore
+  const { data: config, isError } = useSimulateCurateV2AddItem({
+    query: {
+      enabled: address && registryAddress && !isLoading && !isDisabled && !isItemDataLoading,
+    },
     address: registryAddress,
     args: [itemData?.item?.data ?? ""],
     value: depositRequired,
   });
 
-  const { writeAsync: resubmitItem } = useCurateV2AddItem(config);
+  const { writeContractAsync: resubmitItem } = useWriteCurateV2AddItem();
 
   return (
     <ReStyledModal {...{ toggleModal }}>
@@ -85,17 +84,10 @@ const ResubmitModal: React.FC<ISubmitModal> = ({ toggleModal, isItem, registryAd
         isDisabled={isDisabled || isError || isResubmittingItem}
         isLoading={isLoading}
         callback={() => {
-          if (!resubmitItem) return;
+          if (!resubmitItem || !config?.request || !publicClient) return;
           setIsResubmittingItem(true);
-          wrapWithToast(
-            async () =>
-              await resubmitItem().then((response) => {
-                return response.hash;
-              }),
-            publicClient
-          )
+          wrapWithToast(async () => await resubmitItem(config.request), publicClient)
             .then((res) => {
-              console.log({ res });
               refetch();
               toggleModal();
             })

diff --git a/web/src/components/ActionButton/index.tsx b/web/src/components/ActionButton/index.tsx
@@ -9,9 +9,9 @@ import styled from "styled-components";
 import { useToggle } from "react-use";
 import Modal, { getModalButtonText } from "./Modal";
 import ExecuteButton from "./ExecuteButton";
-import { useCurateV2ChallengePeriodDuration } from "hooks/contracts/generated";
 import { useQueryClient } from "@tanstack/react-query";
 import { isUndefined } from "src/utils";
+import { useReadCurateV2ChallengePeriodDuration } from "hooks/useContract";
 
 const StyledKlerosIcon = styled(KlerosIcon)`
   path {
@@ -32,8 +32,7 @@ const ActionButton: React.FC<IActionButton> = ({ status, registryAddress, itemId
   const [isModalOpen, toggleModal] = useToggle(false);
 
   const { data: requests, isLoading } = useItemRequests(`${itemId}@${registryAddress}`);
-  //@ts-ignore
-  const { data: challengePeriodDuration } = useCurateV2ChallengePeriodDuration({ address: registryAddress });
+  const { data: challengePeriodDuration } = useReadCurateV2ChallengePeriodDuration({ address: registryAddress });
 
   const latestRequest = requests?.requests?.[requests.requests.length - 1];
   const disputeId = latestRequest?.disputeID;

diff --git a/web/src/components/ChainIcon.tsx b/web/src/components/ChainIcon.tsx
@@ -1,6 +1,5 @@
 import React from "react";
-import { arbitrum, arbitrumSepolia, gnosis, gnosisChiado, polygon, polygonMumbai } from "viem/chains";
-import { mainnet, sepolia } from "wagmi";
+import { arbitrum, arbitrumSepolia, gnosis, gnosisChiado, mainnet, polygon, polygonMumbai, sepolia } from "viem/chains";
 import EthIcon from "svgs/chains/ethereum.svg";
 import PolygonIcon from "svgs/chains/polygon.svg";
 import GnosisIcon from "svgs/chains/gnosis.svg";