Update docs with Wagmi v2 changes

docs/deploying/deploy-nextjs-app.mdx

@@ -48,16 +48,16 @@ The configuration parameters are described below. Make sure to update the values
 
 #### - targetNetworks
 
-Array of blockchain networks where your dapp is deployed. Use values from [`viem/chains`](https://v1.viem.sh/docs/clients/chains.html).
+Array of blockchain networks where your dapp is deployed. Use values from [`viem/chains`](https://viem.sh/docs/chains/introduction.html).
 
 #### - pollingInterval
 
 The interval in milliseconds at which your front-end application polls the RPC servers for fresh data. _Note that this setting does not affect the local network._
 
 #### - alchemyApiKey
 
-Default Alchemy API key from Scaffold-ETH 2 for local testing purposes.  
- It's recommended to obtain your own API key from the [Alchemy Dashboard](https://dashboard.alchemyapi.io/) and store it in this environment variable: `NEXT_PUBLIC_ALCHEMY_API_KEY` in the `\packages\nextjs\.env.local` file.
+Default Alchemy API key from Scaffold-ETH 2 for local testing purposes.
+It's recommended to obtain your own API key from the [Alchemy Dashboard](https://dashboard.alchemyapi.io/) and store it in this environment variable: `NEXT_PUBLIC_ALCHEMY_API_KEY` in the `\packages\nextjs\.env.local` file.
 
 #### - walletConnectProjectId
 

docs/hooks/useScaffoldContract.md

@@ -5,13 +5,13 @@ sidebar_position: 6
 # useScaffoldContract
 
 Use this hook to get your contract instance by providing the contract name. It enables you to interact with your contract methods.
-For reading data or sending transactions, it's recommended to use `useScaffoldContractRead` and `useScaffoldContractWrite`.
+For reading data or sending transactions, it's recommended to use `useScaffoldReadContract` and `useScaffoldWriteContract`.
 
 ```ts
 const { data: yourContract } = useScaffoldContract({
   contractName: "YourContract",
 });
-// Returns the greeting and can be called in any function, unlike useScaffoldContractRead
+// Returns the greeting and can be called in any function, unlike useScaffoldReadContract
 await yourContract?.read.greeting();
 
 // Used to write to a contract and can be called in any function
@@ -35,8 +35,10 @@ This example uses the `useScaffoldContract` hook to obtain a contract instance f
 | Parameter                   | Type                                                               | Description                                                                   |
 | :-------------------------- | :----------------------------------------------------------------- | :---------------------------------------------------------------------------- |
 | **contractName**            | `string`                                                           | Name of the contract.                                                         |
-| **walletClient** (optional) | [`WalletClient`](https://1.x.wagmi.sh/react/hooks/useWalletClient) | Wallet client must be passed in order to call `write` methods of the contract |
+| **walletClient** (optional) | [`WalletClient`](https://wagmi.sh/react/api/hooks/useWalletClient) | Wallet client must be passed in order to call `write` methods of the contract |
 
 ## Return Value
 
-- `data` : Object representing viem's [contract instance](https://v1.viem.sh/docs/contract/getContract.html#return-value). Which can be used to call `read` and `write` of the contract.
+- `data` : Object representing viem's [contract instance](https://viem.sh/docs/contract/getContract.html#return-value). Which can be used to call `read` and `write` of the contract.
+
+- `isLoading` : Boolean indicating if the contract is being loaded.

docs/hooks/useScaffoldReadContract.md

@@ -0,0 +1,34 @@
+---
+sidebar_position: 1
+---
+
+# useScaffoldReadContract
+
+Use this hook to read public variables and get data from read-only functions of your smart contract.
+
+```ts
+const { data: totalCounter } = useScaffoldReadContract({
+  contractName: "YourContract",
+  functionName: "userGreetingCounter",
+  args: ["0xd8da6bf26964af9d7eed9e03e53415d37aa96045"],
+});
+```
+
+This example retrieves the data returned by the `userGreetingCounter` function of the `YourContract` smart contract.
+
+## Configuration
+
+| Parameter            | Type        | Description                                                                                                         |
+| :------------------- | :---------- | :------------------------------------------------------------------------------------------------------------------ |
+| **contractName**     | `string`    | Name of the contract to read from.                                                                                  |
+| **functionName**     | `string`    | Name of the function to call.                                                                                       |
+| **args** (optional)  | `unknown[]` | Array of arguments to pass to the function (if accepts any). Types are inferred from contract's function parameters |
+| **watch** (optional) | `boolean`   | Watches and refreshes data on new blocks. (default : `true`)                                                        |
+
+You can also pass other arguments accepted by [useReadContract wagmi hook](https://wagmi.sh/react/api/hooks/useReadContract#parameters).
+
+## Return Values
+
+- The retrieved data is stored in the `data` property of the returned object.
+- You can refetch the data by calling the `refetch` function.
+- The extended object includes properties inherited from wagmi useReadContract. You can check the [useReadContract return values](https://wagmi.sh/react/api/hooks/useReadContract#return-type) documentation to check the types.

docs/hooks/useScaffoldEventSubscriber.md → docs/hooks/useScaffoldWatchContractEvent.md

@@ -2,18 +2,18 @@
 sidebar_position: 3
 ---
 
-# useScaffoldEventSubscriber
+# useScaffoldWatchContractEvent
 
 Use this hook to subscribe to events emitted by your smart contract, and receive real-time updates when these events are emitted.
 
 ```ts
-useScaffoldEventSubscriber({
+useScaffoldWatchContractEvent({
   contractName: "YourContract",
   eventName: "GreetingChange",
-  // The listener function is called whenever a GreetingChange event is emitted by the contract.
+  // The onLogs function is called whenever a GreetingChange event is emitted by the contract.
   // Parameters emitted by the event can be destructed using the below example
   // for this example: event GreetingChange(address greetingSetter, string newGreeting, bool premium, uint256 value);
-  listener: logs => {
+  onLogs: logs => {
     logs.map(log => {
       const { greetingSetter, value, premium, newGreeting } = log.args;
       console.log("📡 GreetingChange event", greetingSetter, value, premium, newGreeting);
@@ -24,18 +24,18 @@ useScaffoldEventSubscriber({
 
 This example subscribes to the `GreetingChange` event emitted by the `YourContract` smart contract and logs the parameters from the event to the console when it's emitted.
 
-This hook is a wrapper around wagmi's [useContractEvent](https://1.x.wagmi.sh/react/hooks/useContractEvent).
+This hook is a wrapper around wagmi's [useWatchContractEvent](https://wagmi.sh/react/api/hooks/useWatchContractEvent).
 
 ## Configuration
 
 | Parameter        | Type       | Description                                                                                                                                                                                                                                                                                                                                                                           |
 | :--------------- | :--------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | **contractName** | `string`   | Name of the contract to read from.                                                                                                                                                                                                                                                                                                                                                    |
 | **eventName**    | `string`   | Name of the event to read.                                                                                                                                                                                                                                                                                                                                                            |
-| **listener**     | `function` | Callback function to execute when the event is emitted. Accepts an array of `logs` that occurred during the [`pollingInterval`](/deploying/deploy-nextjs-app#--pollinginterval) set at `scaffold.config.ts`. Each array item contains an `args` property, which can be destructured to get the parameters emitted by the event. This function can customized according to your needs. |
+| **onLogs**       | `function` | Callback function to execute when the event is emitted. Accepts an array of `logs` that occurred during the [`pollingInterval`](/deploying/deploy-nextjs-app#--pollinginterval) set at `scaffold.config.ts`. Each array item contains an `args` property, which can be destructured to get the parameters emitted by the event. This function can customized according to your needs. |
 
 :::note
 
-It is recommended to `setState` using [updater function](https://react.dev/reference/react/useState#updating-state-based-on-the-previous-state) in the `listener` function to avoid problems due to caching.
+It is recommended to `setState` using [updater function](https://react.dev/reference/react/useState#updating-state-based-on-the-previous-state) in the `onLogs` function to avoid problems due to caching.
 
 :::

docs/hooks/useScaffoldWriteContract.md

@@ -0,0 +1,56 @@
+---
+sidebar_position: 2
+---
+
+# useScaffoldWriteContract
+
+Use this hook to send a transaction to your smart contract to write data or perform an action.
+
+```ts
+const { writeContractAsync: writeYourContractAsync } = useScaffoldWriteContract("YourContract");
+```
+
+The first argument is name of the contract to write to and the second argument is wagmi's `useWriteContract` hook [parameters object](https://wagmi.sh/react/api/hooks/useWriteContract#parameters).
+
+To send the transaction, you can call the `writeContractAsync` function returned by the hook (which we instance as `writeYourContractAsync`). Here's an example usage:
+
+```tsx
+<button
+  className="btn btn-primary"
+  onClick={async () => {
+    try {
+      await writeYourContractAsync({
+        functionName: "setGreeting",
+        args: ["The value to set"],
+        value: parseEther("0.1"),
+      });
+    } catch (e) {
+      console.error("Error setting greeting:", e);
+    }
+  }}
+>
+  Set Greeting
+</button>
+```
+
+This example sends a transaction to the `YourContract` smart contract to call the `setGreeting` function with the arguments passed in `args`. The `writeContractAsync` function (`writeYourContractAsync` instance) sends the transaction to the smart contract.
+
+Below is the configuration for `writeContractAsync` function:
+
+## Configuration
+
+| Parameter                          | Type        | Description                                                                                                          |
+| :--------------------------------- | :---------- | :------------------------------------------------------------------------------------------------------------------- |
+| **functionName**                   | `string`    | Name of the function to call.                                                                                        |
+| **args** (optional)                | `unknown[]` | Array of arguments to pass to the function (if accepts any). Types are inferred from contract's function parameters. |
+| **value** (optional)               | `bigint`    | Amount of ETH to send with the transaction (for payable functions only).                                             |
+| **onBlockConfirmation** (optional) | `function`  | Callback function to execute when the transaction is confirmed.                                                      |
+| **blockConfirmations** (optional)  | `number`    | Number of block confirmations to wait for before considering transaction to be confirmed (default : 1).              |
+
+You can also pass other arguments accepted by [writeContractAsync from wagmi](https://wagmi.sh/react/api/hooks/useWriteContract#mutate).
+
+## Return Values
+
+- `writeContractAsync` function sends the transaction to the smart contract.
+- `isMining` property indicates whether the transaction is currently being mined.
+- The extended object includes properties inherited from wagmi useWriteContract. You can check the [useWriteContract return values](https://wagmi.sh/react/api/hooks/useWriteContract#return-type) documentation to check the types.

docs/intro.md

@@ -24,8 +24,8 @@ Scaffold-ETH is not a product itself but more of a combination or stack of other
 Here are the main components:
 
 - [**Hardhat**](https://hardhat.org/docs) or [**Foundry**](https://book.getfoundry.sh/) (user's choice) for running local networks, deploying and testing smart contracts.
-- [**Wagmi**](https://1.x.wagmi.sh/react/getting-started) for React Hooks to start working with Ethereum.
-- [**Viem**](https://v1.viem.sh/docs/getting-started.html) as low-level interface that provides primitives to interact with Ethereum. The alternative to ethers.js and web3.js.
+- [**Wagmi**](https://wagmi.sh/react/getting-started) for React Hooks to start working with Ethereum.
+- [**Viem**](https://viem.sh/docs/getting-started.html) as low-level interface that provides primitives to interact with Ethereum. The alternative to ethers.js and web3.js.
 - [**NextJS**](https://nextjs.org/docs) for building a frontend, using many useful pre-made hooks.
 - [**RainbowKit**](https://www.rainbowkit.com/docs/) for adding wallet connection.
 - [**DaisyUI**](https://daisyui.com/docs/) for pre-built [Tailwind CSS](https://tailwindui.com/components) components.

docs/recipes/GetCurrentBalanceFromAccount.md

@@ -54,7 +54,7 @@ export const ConnectedAddressBalance = () => {
 
 ### Step 2: Retrieve the Connected Account
 
-Fetch the Ethereum address of the currently connected account using the [useAccount wagmi hook](https://1.x.wagmi.sh/react/hooks/useAccount) and easily display them using Scaffold ETH-2 [Address](/components/Address) and [Balance](/components/Balance) components.
+Fetch the Ethereum address of the currently connected account using the [useAccount wagmi hook](https://wagmi.sh/react/api/hooks/useAccount) and easily display them using Scaffold ETH-2 [Address](/components/Address) and [Balance](/components/Balance) components.
 
 ```tsx title="components/ConnectedAddressBalance.tsx"
 // highlight-start