Up wagmi, viem and rainbowkit (#1049)

Author: technophile-04

packages/nextjs/app/debug/_components/contract/WriteOnlyFunctionForm.tsx

@@ -4,7 +4,7 @@ import { useEffect, useState } from "react";
 import { InheritanceTooltip } from "./InheritanceTooltip";
 import { Abi, AbiFunction } from "abitype";
 import { Address, TransactionReceipt } from "viem";
-import { useAccount, useWaitForTransactionReceipt, useWriteContract } from "wagmi";
+import { useAccount, useConfig, useWaitForTransactionReceipt, useWriteContract } from "wagmi";
 import {
   ContractInput,
   TxReceipt,
@@ -16,6 +16,7 @@ import {
 import { IntegerInput } from "~~/components/scaffold-eth";
 import { useTransactor } from "~~/hooks/scaffold-eth";
 import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
+import { simulateContractWriteAndNotifyError } from "~~/utils/scaffold-eth/contract";
 
 type WriteOnlyFunctionFormProps = {
   abi: Abi;
@@ -41,17 +42,21 @@ export const WriteOnlyFunctionForm = ({
 
   const { data: result, isPending, writeContractAsync } = useWriteContract();
 
+  const wagmiConfig = useConfig();
+
   const handleWrite = async () => {
     if (writeContractAsync) {
       try {
-        const makeWriteWithParams = () =>
-          writeContractAsync({
-            address: contractAddress,
-            functionName: abiFunction.name,
-            abi: abi,
-            args: getParsedContractFunctionArgs(form),
-            value: BigInt(txValue),
-          });
+        const writeContractObj = {
+          address: contractAddress,
+          functionName: abiFunction.name,
+          abi: abi,
+          args: getParsedContractFunctionArgs(form),
+          value: BigInt(txValue),
+        };
+        await simulateContractWriteAndNotifyError({ wagmiConfig, writeContractParams: writeContractObj });
+
+        const makeWriteWithParams = () => writeContractAsync(writeContractObj);
         await writeTxn(makeWriteWithParams);
         onChange();
       } catch (e: any) {

packages/nextjs/hooks/scaffold-eth/useScaffoldWriteContract.ts

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { MutateOptions } from "@tanstack/react-query";
 import { Abi, ExtractAbiFunctionNames } from "abitype";
-import { Config, UseWriteContractParameters, useAccount, useWriteContract } from "wagmi";
+import { Config, UseWriteContractParameters, useAccount, useConfig, useWriteContract } from "wagmi";
 import { WriteContractErrorType, WriteContractReturnType } from "wagmi/actions";
 import { WriteContractVariables } from "wagmi/query";
 import { useSelectedNetwork } from "~~/hooks/scaffold-eth";
@@ -13,6 +13,7 @@ import {
   ScaffoldWriteContractOptions,
   ScaffoldWriteContractVariables,
   UseScaffoldWriteConfig,
+  simulateContractWriteAndNotifyError,
 } from "~~/utils/scaffold-eth/contract";
 
 type ScaffoldWriteContractReturnType<TContractName extends ContractName> = Omit<
@@ -60,6 +61,8 @@ export function useScaffoldWriteContract<TContractName extends ContractName>(
       : (configOrName as UseScaffoldWriteConfig<TContractName>);
   const { contractName, chainId, writeContractParams: finalWriteContractParams } = finalConfig;
 
+  const wagmiConfig = useConfig();
+
   useEffect(() => {
     if (typeof configOrName === "string") {
       console.warn(
@@ -105,13 +108,20 @@ export function useScaffoldWriteContract<TContractName extends ContractName>(
     try {
       setIsMining(true);
       const { blockConfirmations, onBlockConfirmation, ...mutateOptions } = options || {};
+
+      const writeContractObject = {
+        abi: deployedContractData.abi as Abi,
+        address: deployedContractData.address,
+        ...variables,
+      } as WriteContractVariables<Abi, string, any[], Config, number>;
+
+      if (!finalConfig?.disableSimulate) {
+        await simulateContractWriteAndNotifyError({ wagmiConfig, writeContractParams: writeContractObject });
+      }
+
       const makeWriteWithParams = () =>
         wagmiContractWrite.writeContractAsync(
-          {
-            abi: deployedContractData.abi as Abi,
-            address: deployedContractData.address,
-            ...variables,
-          } as WriteContractVariables<Abi, string, any[], Config, number>,
+          writeContractObject,
           mutateOptions as
             | MutateOptions<
                 WriteContractReturnType,

packages/nextjs/package.json

@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.1.5",
-    "@rainbow-me/rainbowkit": "2.1.6",
+    "@rainbow-me/rainbowkit": "2.2.3",
     "@tanstack/react-query": "^5.59.15",
     "@uniswap/sdk-core": "^5.8.2",
     "@uniswap/v2-sdk": "^4.6.1",
@@ -32,8 +32,8 @@
     "react-dom": "^18.3.1",
     "react-hot-toast": "^2.4.0",
     "usehooks-ts": "^3.1.0",
-    "viem": "2.21.32",
-    "wagmi": "2.12.23",
+    "viem": "2.23.0",
+    "wagmi": "2.14.11",
     "zustand": "^5.0.0"
   },
   "devDependencies": {

packages/nextjs/utils/scaffold-eth/common.ts

@@ -1,4 +1,5 @@
 // To be used in JSON.stringify when a field might be bigint
+
 // https://wagmi.sh/react/faq#bigint-serialization
 export const replacer = (_key: string, value: unknown) => (typeof value === "bigint" ? value.toString() : value);
 

packages/nextjs/utils/scaffold-eth/contract.ts

@@ -1,4 +1,6 @@
+import { getParsedError } from "./getParsedError";
 import { AllowedChainIds } from "./networks";
+import { notification } from "./notification";
 import { MutateOptions } from "@tanstack/react-query";
 import {
   Abi,
@@ -23,7 +25,7 @@ import {
   WriteContractErrorType,
 } from "viem";
 import { Config, UseReadContractParameters, UseWatchContractEventParameters, UseWriteContractParameters } from "wagmi";
-import { WriteContractParameters, WriteContractReturnType } from "wagmi/actions";
+import { WriteContractParameters, WriteContractReturnType, simulateContract } from "wagmi/actions";
 import { WriteContractVariables } from "wagmi/query";
 import deployedContractsData from "~~/contracts/deployedContracts";
 import externalContractsData from "~~/contracts/externalContracts";
@@ -175,6 +177,7 @@ export type UseDeployedContractConfig<TContractName extends ContractName> = {
 export type UseScaffoldWriteConfig<TContractName extends ContractName> = {
   contractName: TContractName;
   chainId?: AllowedChainIds;
+  disableSimulate?: boolean;
   writeContractParams?: UseWriteContractParameters;
 };
 
@@ -328,3 +331,19 @@ export type UseScaffoldEventHistoryData<
   | undefined;
 
 export type AbiParameterTuple = Extract<AbiParameter, { type: "tuple" | `tuple[${string}]` }>;
+
+export const simulateContractWriteAndNotifyError = async ({
+  wagmiConfig,
+  writeContractParams: params,
+}: {
+  wagmiConfig: Config;
+  writeContractParams: WriteContractVariables<Abi, string, any[], Config, number>;
+}) => {
+  try {
+    await simulateContract(wagmiConfig, params);
+  } catch (error) {
+    const parsedError = getParsedError(error);
+    notification.error(parsedError);
+    throw error;
+  }
+};