(Add NewTutorial) Create React dapp w/ MM SDK and Wagmi (#1659)

Author: httpJunkie

static/sdk-connect-extension.mp4

@@ -428,6 +428,11 @@ const sidebar = {
           label: "Create a simple dapp",
           id: "tutorials/javascript-dapp-simple",
         },
+        {
+          type: "doc",
+          label: "Create a dapp with the SDK and Wagmi",
+          id: "tutorials/react-dapp-sdk-wagmi",
+        },
       ],
     },
     {

static/sdk-connect-mobile.mp4

@@ -15,10 +15,9 @@ Import MetaMask SDK into your React dapp to enable your users to
 easily connect to the MetaMask browser extension and MetaMask Mobile.
 The SDK for React has the [same prerequisites](../index.md#prerequisites) as for standard JavaScript.
 
-:::info React UI
+:::info MetaMask SDK + Wagmi
 This page provides instructions for using the standard `@metamask/sdk-react` package.
-Alternatively, you can use the [`@metamask/sdk-react-ui`](react-ui.md) package to easily use
-[wagmi](https://wagmi.sh/) hooks and a pre-styled UI button component for connecting to MetaMask.
+Alternatively, you can use [wagmi](https://wagmi.sh/) hooks and follow our tutorial on setting up MetaMask SDK using Create Wagmi or our Consensys Create Web3 CLI to scaffold a project that comes configured with Viem, Wagmi and MetaMask SDK.
 :::
 
 ## Steps

wallet-sidebar.js

@@ -60,7 +60,7 @@ To use the Infura API to make read-only requests, specify your Infura API key us
 in your dapp.
 
 ```javascript
-infuraAPIKey: "YOUR-API-KEY"
+infuraAPIKey: "<YOUR-API-KEY>"
 ```
 
 ## Use custom nodes
@@ -87,7 +87,7 @@ SDK in your dapp.
 
 ```javascript
 sdkOptions={{
-  infuraAPIKey: "YOUR-API-KEY",
+  infuraAPIKey: "<YOUR-API-KEY>",
   readonlyRPCMap: {
     "0x539": "http://localhost:8545",
   },
@@ -110,12 +110,12 @@ The following is an example of using both the Infura API and custom nodes with t
 
 ```javascript
 sdkOptions={{
-  infuraAPIKey: "YOUR-API-KEY",
+  infuraAPIKey: "<YOUR-API-KEY>",
   readonlyRPCMap: {
     // Custom node.
     "0x539": "http://localhost:8545",
     // Override Infura Mainnet.
-    "0x1": "https://mainnet.infura.io/v3/YOUR-API-KEY",
+    "0x1": "https://mainnet.infura.io/v3/<YOUR-API-KEY>",
   },
   defaultReadOnlyChainId: "0x1",
   // Other options.