From ff1fc6bed06c65af7786241c707de3527c1cf8c0 Mon Sep 17 00:00:00 2001
From: Edward Penta <eddie.penta@consensys.net>
Date: Wed, 5 Jun 2024 14:33:54 -0400
Subject: [PATCH] fix: flip step 1 & step 2 in wagmi sdk docs

---
 .../use-sdk/3rd-party-libraries/wagmi.md      | 77 ++++++++++---------
 1 file changed, 40 insertions(+), 37 deletions(-)

diff --git a/wallet/how-to/use-sdk/3rd-party-libraries/wagmi.md b/wallet/how-to/use-sdk/3rd-party-libraries/wagmi.md
index 9d539264cfc..c9b9fa68066 100644
--- a/wallet/how-to/use-sdk/3rd-party-libraries/wagmi.md
+++ b/wallet/how-to/use-sdk/3rd-party-libraries/wagmi.md
@@ -23,47 +23,18 @@ the MetaMask browser extension and MetaMask Mobile.
 
 ## Steps
 
-### 1. Configure Wagmi with the MetaMask connector
+### 1. Configure the MetaMask SDK
 
-Configure Wagmi to include MetaMask as a connector and specify the Ethereum chains your dapp will support.
-For example:
+When configuring the MetaMask SDK connector, make sure to configure the proper [SDK options](../../../reference/sdk-js-options.md).
 
 ```javascript
-import { createConfig, http } from "wagmi";
-import { mainnet, sepolia } from "wagmi/chains";
-import { metaMask } from "wagmi/connectors";
-
-export const config = createConfig({
-  chains: [mainnet, sepolia],
-  connectors: [
-    metaMask({
-      dappMetadata: {
-        name: "Example Wagmi dapp",
-      },
-    }),
-  ],
-  transports: {
-    [mainnet.id]: http(),
-    [sepolia.id]: http(),
+const MetaMaskOptions = {
+  dappMetadata: {
+    name: "Example Wagmi dapp",
   },
-});
-```
-
-### 2. Configure the SDK
-
-When configuring the connector, make sure to configure the proper
-[SDK options](../../../reference/sdk-js-options.md).
-
-```javascript
-connectors: [
-  metaMask({
-    dappMetadata: {
-      name: "Example Wagmi dapp",
-    },
-    infuraAPIKey: "YOUR-API-KEY",
-    // Other options.
-  }),
-],
+  infuraAPIKey: "YOUR-API-KEY",
+  // Other options.
+};
 ```
 
 #### Dapp metadata
@@ -85,6 +56,38 @@ Thus, do not enable the [`useDeeplink`](../../../reference/sdk-js-options.md#use
 Using universal links ensures a smoother transition for users accessing your dapp from mobile
 devices, providing a better user experience compared to traditional deeplinking methods.
 
+### 2. Configure Wagmi with the MetaMask connector
+
+Configure Wagmi to include MetaMask as a connector and specify the Ethereum chains your dapp will support. Use the `MetaMaskOptions` you
+created in the previous step when adding the `metaMask` connector.
+For example:
+
+```javascript
+import { createConfig, http } from "wagmi";
+import { mainnet, sepolia } from "wagmi/chains";
+import { metaMask } from "wagmi/connectors";
+
+const MetaMaskOptions = {
+  dappMetadata: {
+    name: "Example Wagmi dapp",
+  },
+  infuraAPIKey: "YOUR-API-KEY",
+  // Other options.
+};
+
+export const config = createConfig({
+  chains: [mainnet, sepolia],
+  connectors: [
+    metaMask(MetaMaskOptions),
+    // Other connectors
+  ],
+  transports: {
+    [mainnet.id]: http(),
+    [sepolia.id]: http(),
+  },
+});
+```
+
 ### 3. Implement contract interaction using `usePrepareContractWrite`
 
 Due to a known issue in Safari where a 500ms timeout can interrupt smart contract interactions, we