Update Wagmi guide and tutorial (#1669)

* Update Wagmi guide

* remove infuraApiKey prereq

* Update guide and tutorial

* Update guide and tutorial

* edits

* address feedback

---------

Co-authored-by: Edouard Bougon <[email protected]>

Author: alexandratran

wallet/connect/3rd-party-libraries/wagmi.md

@@ -15,61 +15,76 @@ the MetaMask browser extension and MetaMask Mobile.
 
 ## Prerequisites
 
-- Ensure you have a basic understanding of Ethereum smart contracts and React Hooks.
-- Set up a project with [Wagmi](https://wagmi.sh/react/getting-started).
-- Create an Infura API key and allowlist to [make read-only requests](../../how-to/make-read-only-requests.md).
+- [Node.js](https://nodejs.org/en/) version 20+
+- [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm/) version 9+
+- A text editor (for example, [VS Code](https://code.visualstudio.com/))
+- The [MetaMask extension](https://metamask.io/) or
+  [MetaMask Flask](/developer-tools/dashboard/get-started/create-api) installed
+- Basic knowledge of [React](https://react.dev/)
 
-## Configure the MetaMask connector
+## Steps
 
-In your Wagmi project, configure the MetaMask connector:
+### 1. Set up the project
 
-```javascript
+If you don't have an existing Wagmi project, create a new project directory using Wagmi's `create wagmi`
+command with the `vite-react` template:
+
+```bash
+npm create wagmi@latest  --template vite-react
+```
+
+This prompts you for a project name.
+For example, use `mmsdk-wagmi`.
+Once your project is created, navigate into it and install the node module dependencies:
+
+```bash
+cd mmsdk-wagmi && npm install
+```
+
+### 2. Configure the MetaMask connector
+
+In `wagmi.ts`, configure the MetaMask connector with any [parameters](https://wagmi.sh/core/api/connectors/metaMask#parameters).
+Specify [`dappMetadata`](https://wagmi.sh/core/api/connectors/metaMask#dappmetadata), including the `name`, `url`, and `iconUrl`,
+to help identify your dapp within the MetaMask ecosystem.
+
+```typescript title="wagmi.ts"
 import { metaMask } from "wagmi/connectors"
 
 export const config = createConfig({
   chains: [mainnet, sepolia],
   connectors: [
     metaMask({
-      infuraAPIKey: import.meta.env.VITE_INFURA_API_KEY,
+      dappMetadata: {
+        name: "Example Wagmi dapp",
+        url: "https://wagmi.io",
+        iconUrl: "https://wagmi.io/favicon.ico",
+      },
     }),
   ],
   transports: {
     [mainnet.id]: http(),
-    // You can also configure the transcripts to use INFURA_API_KEY directly into the Wagmi config
-    // to share with other providers.
-    // [mainnet.id]: http("https://mainnet.infura.io/v3/...")
     [sepolia.id]: http(),
   },
 })
 ```
 
-Make sure to configure the MetaMask connector with the proper [SDK options](../../reference/sdk-js-options.md).
-
-To provide a better mobile user experience, specify the [`infuraAPIKey`](../../reference/sdk-js-options.md#infuraapikey)
-option to [make read-only requests](../../how-to/make-read-only-requests.md) using the Infura API.
-You can set your Infura API key in environment variables:
-
-```env
-VITE_INFURA_API_KEY=<YOUR-API-KEY>
-```
-
-## Benefits of using the Infura API with Wagmi
+:::note
+By default, if the [EIP-6963](https://eips.ethereum.org/EIPS/eip-6963) MetaMask injected provider is detected,
+this connector will replace it.
+See Wagmi's [`rdns`](https://wagmi.sh/dev/creating-connectors#properties) property for more information.
+:::
 
-Read-only requests are blockchain requests that do not require user wallet interaction.
-Mobile dapps can lose their continuous connection with MetaMask, causing read-only requests to fail. 
-When the mobile wallet is disconnected, the dapp must deeplink into the wallet to "wake up" the connection.
+### 3. Run the dapp
 
-Without setting the `infuraAPIKey`, the dapp might experience issues in mobile environments:
+Start the development server:
 
-![Wagmi errors](../../assets/wagmi-errors.png)
+```bash
+npm run dev
+```
 
-To overcome this limitation in mobile dapps that rely on a continuous connection with MetaMask,
-use the Infura API to make read-only requests.
-This approach offloads the read operations to Infura's nodes, reducing the load on your own
-infrastructure and ensuring high availability and reliability, independent of the user's wallet connection.
+Navigate to the displayed localhost URL to view and test your dapp.
 
-By using the Infura API, you can ensure:
+## Next steps
 
-- **Uninterrupted access** - Continuous network access for read-only requests, regardless of MetaMask's state.
-- **Enhanced stability** - Stabilized dapp functionality by relying on Infura's robust infrastructure
-  rather than the mobile environment's variable connectivity and background processing constraints.
+See the [Create a React dapp with the SDK and Wagmi](../../tutorials/react-dapp-sdk-wagmi.md) tutorial
+for more information about configuring the SDK with Wagmi, and how the dapp behaves out of the box.

wallet/tutorials/react-dapp-sdk-wagmi.md

@@ -42,6 +42,8 @@ custom connect button.
 
 ### 1. Set up the project
 
+Create a new project directory using Wagmi's `create wagmi` command with the `vite-react` template:
+
 <Tabs>
   <TabItem value="pnpm" label="pnpm" default>
 
@@ -59,9 +61,9 @@ npm create wagmi@latest  --template vite-react
   </TabItem>
 </Tabs>
 
-This command prompts you for a project name.
+This prompts you for a project name.
 For example, use `mmsdk-wagmi-tutorial`.
-Once the CLI is complete, change directories into that project and install the node module dependencies:
+Once your project is created, navigate into it and install the node module dependencies:
 
 <Tabs>
   <TabItem value="pnpm" label="pnpm" default>
@@ -100,7 +102,7 @@ This displays a localhost URL in your terminal for easy access to launch in your
   ➜  press h + enter to show help
 ```
 
-#### 1.1. Review the Viem, Wagmi, and MetaMask SDK configuration
+### 2. Review the Wagmi configuration
 
 In `src/main.tsx`, you can find the following `WagmiProvider` which takes a `config` and `QueryClientProvider`.
 
@@ -176,7 +178,7 @@ Out of the box, they have also set up the `injected` wallet provider, `coinbaseW
 
 You'll replace these with the MetaMask connector for the purpose of this tutorial and testing MetaMask SDK.
 
-### 2. Update the Wagmi configuration
+### 3. Update the Wagmi configuration
 
 Modify this configuration to target the Linea testnet and use the MetaMask connector, which is
 Wagmi's built-in support for MetaMask SDK:
@@ -187,7 +189,6 @@ import { lineaSepolia } from "wagmi/chains";
 import { metaMask } from "wagmi/connectors";
 
 export const config = createConfig({
-  multiInjectedProviderDiscovery: false,
   chains: [lineaSepolia],
   connectors: [
     metaMask({
@@ -208,8 +209,6 @@ export const config = createConfig({
 
 This configures Wagmi with the following options:
 
-- `multiInjectedProviderDiscovery` disables automatic discovery of multiple injected wallets,
-  streamlining the wallet selection process.
 - `chains` specifies that the dapp will connect to the Linea Sepolia network.
 - `connectors` uses MetaMask as the primary wallet, and includes some dapp metadata (name, URL, and
   icon) for a branded user experience.
@@ -219,7 +218,7 @@ This configures Wagmi with the following options:
 
 This setup simplifies wallet integration and provides a smooth user experience while working with Linea Sepolia.
 
-### 3. Connect to MetaMask extension or Mobile
+### 4. Connect to MetaMask extension or Mobile
 
 At this point, your dapp displays, and you can connect to and disconnect from MetaMask.
 Your connection experience will be similar to that of using the injected provider, as most web3
@@ -251,121 +250,7 @@ MetaMask Mobile.
   </video>
 </p>
 
-### 3. Configure the SDK
-
-You can configure any [MetaMask JavaScript SDK options](../reference/sdk-js-options.md) within the
-Wagmi configuration.
-
-In `wagmi.ts`, create a variable named `metaMaskSDKOptions`:
-
-```typescript title="wagmi.ts"
-const metaMaskSDKOptions = {
-  infuraAPIKey: "<YOUR-API-KEY>",
-};
-```
-
-:::note
-You can use the [`infuraAPIKey`](../reference/sdk-js-options.md#infuraapikey) option to
-[make direct, read-only JSON-RPC requests](../how-to/make-read-only-requests.md).
-:::
-
-Pass `metaMaskSDKOptions` into the `metaMask()` function in `connectors` and spread its values using
-the `...` operator:
-
-```typescript title="wagmi.ts"
-connectors: [
-  metaMask({
-    dappMetadata: {
-      name: "MetaMask SDK + Wagmi Tutorial",
-      url: "https://wagmi.io",
-      iconUrl: "https://wagmi.io/favicon.ico",
-    },
-    ...metaMaskSDKOptions,
-  }),
-],
-```
-
-### 4. Use additional SDK options
-
-You can configure any number of [SDK options](../reference/sdk-js-options.md) in the
-`metaMaskSDKOptions` object to customize the behavior of the SDK.
-In this section, you'll plug in options one by one to see how it affects the SDK.
-
-#### Immediately check if MetaMask is installed
-
-Use [`checkInstallationImmediately`](../reference/sdk-js-options.md#checkinstallationimmediately) to
-enable or disable immediately checking if MetaMask is installed in the user's browser.
-The default value is `false`.
-Set this to `true`:
-
-```typescript title="wagmi.ts"
-const metaMaskSDKOptions = {
-  checkInstallationImmediately: true,
-};
-```
-
-Disable the MetaMask extension and re-load your dapp.
-When this option is enabled, the SDK immediately checks and notifies the user with a modal that they
-can either install the MetaMask extension or connect to MetaMask Mobile using a QR code.
-
-#### Check if MetaMask is installed before RPC requests
-
-Use [`checkInstallationOnAllCalls`](../reference/sdk-js-options.md#checkinstallationonallcalls) to
-enable or disable checking if MetaMask is installed before each JSON-RPC request.
-The default value is `false`.
-Set this to `true`:
-
-```typescript title="wagmi.ts"
-const metaMaskSDKOptions = {
-  checkInstallationOnAllCalls: true
-};
-```
-
-Disable the MetaMask extension and re-load your dapp.
-Make a read-only RPC request without the `InfuraAPIKey`.
-You'll see a similar modal as in the previous test, but it will notify the user upon making the RPC request.
-
-#### Send anonymous analytics to MetaMask
-
-Use [`enableDebug`](../reference/sdk-js-options.md#enabledebug) to enable or disable sending
-anonymous analytics to MetaMask to help improve the SDK.
-The default value is `true`.
-
-```typescript
-const metaMaskSDKOptions = {
-  enableDebug: true
-};
-```
-
-This setting does not transmit any sensitive data.
-It only sends information that allows MetaMask to analyze and improve the behavior and core
-functionality of the SDK.
-
-#### Map RPC URLs for read-only requests
-
-Use [`readonlyRPCMap`](../reference/sdk-js-options.md#readonlyrpcmap) to map RPC URLS for
-[read-only RPC requests](../how-to/make-read-only-requests.md).
-You can use this option in conjunction with [`infuraAPIKey`](../reference/sdk-js-options.md#infuraapikey)
-and [`defaultReadOnlyChainId`](../reference/sdk-js-options.md#defaultreadonlychainid).
-
-For example, you want to make read-only requests to Mainnet (chain ID `0x1`) using the Infura API,
-and read-only requests to the local testnet (chain ID `0x539`) use a custom node.
-
-`infuraAPIKey` provides access to various networks supported by Infura.
-`readonlyRPCMap` allows access to custom nodes and overrides Infura networks in case of a conflict.
-You can use both the Infura API and custom nodes to make read-only requests by specifying both options:
-
-```typescript
-const metaMaskSDKOptions = {
-  infuraAPIKey: "<YOUR-API-KEY>",
-  readonlyRPCMap: {
-    "0x539": "http://localhost:8545",
-  }
-};
-```
-
-### Conclusion
+## Conclusion
 
 This tutorial walked you through generating a dapp using Create Wagmi, and configuring MetaMask SDK.
-You explored how the SDK works within a React application with Viem and Wagmi, how it behaves out of
-the box, and how to use a few key options to customize its behavior.
+You explored how the SDK works within a React application with Wagmi, and how it behaves out of the box.