Refer to important integration steps in SDK guides

docusaurus.config.js

@@ -182,10 +182,6 @@ const config = {
             from: ["/guide/defining-your-icon", "/wallet/how-to/set-icon"],
             to: "/wallet/how-to/display/icon",
           },
-          {
-            from: "/wallet/how-to/use-3rd-party-integrations/js-infura-api",
-            to: "/wallet/how-to/make-read-only-requests",
-          },
           {
             from: "/wallet/how-to/request-permissions",
             to: "/wallet/how-to/manage-permissions",
@@ -194,6 +190,22 @@ const config = {
             from: ["/guide/mobile-getting-started", "/guide/site-compatibility-checklist", "/guide/mobile-best-practices", "/wallet/how-to/use-mobile", "/wallet/how-to/integrate-with-mobile", "/sdk"],
             to: "/wallet/how-to/use-sdk",
           },
+          {
+            from: "/wallet/how-to/sign-data/connect-and-sign",
+            to: "/wallet/how-to/use-sdk/javascript/connect-and-sign",
+          },
+          {
+            from: ["/wallet/how-to/use-3rd-party-integrations/js-infura-api", "/wallet/how-to/make-read-only-requests"],
+            to: "/wallet/how-to/use-sdk/javascript/make-read-only-requests",
+          },
+          {
+            from: "/wallet/how-to/batch-json-rpc-requests",
+            to: "/wallet/how-to/use-sdk/javascript/batch-json-rpc-requests",
+          },
+          {
+            from: "/wallet/how-to/display/custom-modals",
+            to: "/wallet/how-to/use-sdk/javascript/display-custom-modals",
+          },
           {
             from: "/wallet/how-to/use-3rd-party-integrations/unity-dweb",
             to: "/wallet/how-to/use-sdk/gaming/unity/dweb",

wallet/concepts/sdk/index.md

@@ -38,10 +38,10 @@ Most of these features are not available if you only integrate your dapp directl
 | Connect from a web dapp to the MetaMask extension                                             |        ✅        |      ✅       |
 | Connect from a web dapp to MetaMask Mobile                                                    |        ❌        |      ✅       |
 | Connect from desktop, mobile, and gaming dapps to MetaMask Mobile                             |        ❌        |      ✅       |
-| Use custom RPC methods such as [`connectAndSign`](../../how-to/sign-data/connect-and-sign.md) |        ❌        |      ✅       |
-| [Display custom modals](../../how-to/display/custom-modals.md) in MetaMask                    |        ❌        |      ✅       |
-| [Make read-only requests](../../how-to/make-read-only-requests.md) using the Infura API                 |        ❌        |      ✅       |
-| [Batch multiple RPC requests](../../how-to/batch-json-rpc-requests.md)                        |        ❌        |      ✅       |
+| Use custom RPC methods such as [`connectAndSign`](../../how-to/use-sdk/javascript/connect-and-sign.md) |        ❌        |      ✅       |
+| [Display custom modals](../../how-to/use-sdk/javascript/display-custom-modals.md) in MetaMask                    |        ❌        |      ✅       |
+| [Make read-only requests](../../how-to/use-sdk/javascript/make-read-only-requests.md) using the Infura API                 |        ❌        |      ✅       |
+| [Batch multiple RPC requests](../../how-to/use-sdk/javascript/batch-json-rpc-requests.md)                        |        ❌        |      ✅       |
 
 ## User experience
 

wallet/how-to/onboard-users.md

@@ -1,7 +1,7 @@
 ---
 sidebar_label: Onboard users
 description: Simplify the MetaMask onboarding experience for your users.
-sidebar_position: 10
+sidebar_position: 8
 ---
 
 import Tabs from '@theme/Tabs';

wallet/how-to/run-devnet.md

@@ -1,6 +1,6 @@
 ---
 description: Configure and connect to a Ganache development network.
-sidebar_position: 11
+sidebar_position: 9
 ---
 
 # Run a development network

wallet/how-to/secure-dapp.md

@@ -1,6 +1,6 @@
 ---
 description: Secure your dapp using HTTPS and CSP.
-sidebar_position: 12
+sidebar_position: 10
 ---
 
 # Secure your dapp

wallet/how-to/use-sdk/3rd-party-libraries/wagmi.md

@@ -19,7 +19,7 @@ the MetaMask browser extension and MetaMask Mobile.
 
 - 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](../../make-read-only-requests.md).
+- Create an Infura API key and allowlist to [make read-only requests](../javascript/make-read-only-requests.md).
 
 ## Steps
 
@@ -75,7 +75,7 @@ This option is required when configuring the MetaMask connector with Wagmi.
 #### Infura API key
 
 We recommend specifying the [`infuraAPIKey`](../../../reference/sdk-js-options.md#infuraapikey)
-option to [make read-only requests](../../make-read-only-requests.md) using the Infura API.
+option to [make read-only requests](../javascript/make-read-only-requests.md) using the Infura API.
 Read more about the [benefits of using the Infura API with Wagmi](#benefits-of-using-the-infura-api-with-wagmi).
 
 #### Universal links

wallet/how-to/use-sdk/gaming/unity/connect-and-sign.md

@@ -7,7 +7,7 @@ tags:
 
 # Connect and sign in Unity
 
-You can [connect and sign](../../../sign-data/connect-and-sign.md) in a single interaction from your Unity game.
+You can [connect and sign](../../javascript/connect-and-sign.md) in a single interaction from your Unity game.
 
 ## Prerequisites
 

wallet/how-to/batch-json-rpc-requests.md → wallet/how-to/use-sdk/javascript/batch-json-rpc-requests.md

@@ -7,7 +7,7 @@ tags:
 
 # Batch JSON-RPC requests
 
-You can batch multiple JSON-RPC requests using [MetaMask SDK](../concepts/sdk/index.md).
+You can batch multiple JSON-RPC requests using [MetaMask SDK](../../../concepts/sdk/index.md).
 
 The SDK's `metamask_batch` method enables you to batch multiple JSON-RPC requests in a single call,
 providing a streamlined approach for dapps to interact with EVM networks, and enabling complex
@@ -29,7 +29,7 @@ enhancing the user experience and operational efficiency.
 
 ## Prerequisites
 
-[Set up MetaMask SDK](../how-to/use-sdk/javascript/index.md) in your JavaScript dapp.
+[Set up MetaMask SDK](index.md) in your JavaScript dapp.
 
 ## Use the `metamask_batch` method
 
@@ -53,28 +53,28 @@ The following is an example of using `metamask_batch` to batch
 import { metamask_batch } from "metamask-sdk";
 
 function MyComponent() {
-  const handleBatchRequest = async () => {
-    const batchRequests = [
-      { method: "personal_sign", params: ["message", "address"] },
-      {
-        method: "eth_sendTransaction",
-        params: [
-          {
-            /* transaction parameters */
-          },
-        ],
-      },
-    ];
-
-    try {
-      const results = await metamask_batch(batchRequests);
-      console.log(results); // Process results
-    } catch (error) {
-      console.error("Batch request failed", error);
-    }
-  };
-
-  return <button onClick={handleBatchRequest}>Send Batch Request</button>;
+    const handleBatchRequest = async () => {
+        const batchRequests = [
+            { method: "personal_sign", params: ["message", "address"] },
+            {
+                method: "eth_sendTransaction",
+                params: [
+                    {
+                        /* transaction parameters */
+                    },
+                ],
+            },
+        ];
+    
+        try {
+            const results = await metamask_batch(batchRequests);
+            console.log(results); // Process results
+        } catch (error) {
+            console.error("Batch request failed", error);
+        }
+    };
+
+    return <button onClick={handleBatchRequest}>Send Batch Request</button>;
 }
 ```
 
@@ -89,28 +89,28 @@ The following is an example of using `metamask_batch` to batch
 import { metamask_batch } from "metamask-sdk";
 
 export default {
-  methods: {
-    async sendBatchRequest() {
-      const batchRequests = [
-        { method: "personal_sign", params: ["message", "address"] },
-        {
-          method: "eth_sendTransaction",
-          params: [
-            {
-              /* transaction parameters */
-            },
-          ],
-        },
-      ];
-
-      try {
-        const results = await metamask_batch(batchRequests);
-        console.log(results);
-      } catch (error) {
-        console.error("Error in batch request", error);
-      }
+    methods: {
+        async sendBatchRequest() {
+            const batchRequests = [
+                { method: "personal_sign", params: ["message", "address"] },
+                {
+                    method: "eth_sendTransaction",
+                    params: [
+                        {
+                            /* transaction parameters */
+                        },
+                    ],
+                },
+            ];
+
+            try {
+                const results = await metamask_batch(batchRequests);
+                console.log(results);
+            } catch (error) {
+                console.error("Error in batch request", error);
+            }
+        }
     }
-  }
 }
 </script>
 ```

wallet/how-to/sign-data/connect-and-sign.md → wallet/how-to/use-sdk/javascript/connect-and-sign.md

@@ -1,6 +1,6 @@
 ---
 description: Use MetaMask SDK to connect and sign in a single interaction.
-sidebar_position: 1
+sidebar_position: 7
 tags:
   - JavaScript SDK
   - iOS SDK
@@ -9,7 +9,7 @@ tags:
 # Connect and sign
 
 You can connect to MetaMask and sign data in a single interaction from your JavaScript, iOS,
-Android, or Unity dapp using [MetaMask SDK](../../concepts/sdk/index.md).
+Android, or Unity dapp using [MetaMask SDK](../../../concepts/sdk/index.md).
 
 The SDK's `connectAndSign` method provides a streamlined approach for dapps to interact with MetaMask.
 This method combines the [`eth_requestAccounts`] and [`personal_sign`] RPC methods, executing them sequentially.
@@ -28,11 +28,11 @@ This is useful for various purposes such as authentication and transaction verif
 </p>
 
 The following instructions describe how to connect and sign in JavaScript.
-You can also see the [Unity instructions](../use-sdk/gaming/unity/connect-and-sign.md).
+You can also see the [Unity instructions](../gaming/unity/connect-and-sign.md).
 
 ## Prerequisites
 
-- [MetaMask SDK set up](../use-sdk/javascript/index.md) in your JavaScript dapp.
+- [MetaMask SDK set up](index.md) in your JavaScript dapp.
 
 - MetaMask Mobile version 7.10 or later.
   Your users must have an updated version of MetaMask Mobile for this feature to work correctly.
@@ -50,7 +50,7 @@ const connectAndSign = async () => {
         });
         setResponse(signResult);
     } catch (err) {
-        console.warn(`failed to connect..`, err);
+        console.warn("failed to connect..", err);
     }
 };
 ```

wallet/how-to/display/custom-modals.md → wallet/how-to/use-sdk/javascript/display-custom-modals.md

@@ -1,13 +1,13 @@
 ---
 description: Display custom modals using the JavaScript SDK.
-sidebar_position: 4
+sidebar_position: 10
 tags:
   - JavaScript SDK
 ---
 
 # Display custom modals
 
-You can use [MetaMask SDK](../../concepts/sdk/index.md) to display custom MetaMask modals.
+You can use [MetaMask SDK](../../../concepts/sdk/index.md) to display custom MetaMask modals.
 
 When integrating a web dapp with MetaMask, you can enhance the user experience by customizing the
 logic and user interface of the displayed modals, which initiate user interactions such as prompting
@@ -18,7 +18,7 @@ other web frameworks such as Vue.js or pure HTML/JavaScript.
 ## Prerequisites
 
 MetaMask SDK set up in your JavaScript dapp.
-This example uses the [MetaMask React SDK](../use-sdk/javascript/react/index.md).
+This example uses the [MetaMask React SDK](react/index.md).
 
 ## Steps
 
@@ -40,8 +40,8 @@ export default CustomModal;
 
 ### 2. Implement custom modal logic
 
-When initializing [`MetaMaskProvider`](../use-sdk/javascript/react/index.md#3-wrap-your-project-with-metamaskprovider),
-use the [`modals`](../../reference/sdk-js-options.md#modals) SDK option to set up custom behavior
+When initializing [`MetaMaskProvider`](react/index.md#3-wrap-your-project-with-metamaskprovider),
+use the [`modals`](../../../reference/sdk-js-options.md#modals) SDK option to set up custom behavior
 for scenarios such as when MetaMask isn't installed.
 For example:
 
@@ -99,7 +99,7 @@ MetaMask isn't installed.
 
 <p align="center">
 
-![Custom modal gif](../../assets/custom-modal.gif)
+![Custom modal gif](../../../assets/custom-modal.gif)
 
 </p>
 

wallet/how-to/use-sdk/javascript/index.md

@@ -58,25 +58,24 @@ Instantiate the SDK using any [options](../../../reference/sdk-js-options.md):
 
 ```javascript
 const MMSDK = new MetaMaskSDK({
-  dappMetadata: {
-    name: "JavaScript example dapp",
-    url: window.location.href,
-  },
-  // Other options
+    dappMetadata: {
+        name: "JavaScript example dapp",
+        url: window.location.href,
+    },
+    infuraAPIKey: process.env.INFURA_API_KEY,
+    // Other options
 });
 
 // You can also access via window.ethereum
 const ethereum = MMSDK.getProvider();
 ```
 
-:::note Important SDK options
 - Use [`dappMetadata`](../../../reference/sdk-js-options.md#dappmetadata) to display information
   about your dapp in the MetaMask connection modal.
-- Use [`modals`](../../../reference/sdk-js-options.md#modals) to [customize the logic and UI of
-  the displayed modals](../../display/custom-modals.md).
 - Use [`infuraAPIKey`](../../../reference/sdk-js-options.md#infuraapikey) to
-  [make read-only RPC requests](../../make-read-only-requests.md) from your dapp.
-:::
+  [make read-only RPC requests](make-read-only-requests.md) from your dapp.
+- Use [`modals`](../../../reference/sdk-js-options.md#modals) to [customize the logic and UI of
+  the displayed modals](display-custom-modals.md).
 
 ### 4. Use the SDK
 
@@ -89,6 +88,9 @@ prompts the installation or connection popup to appear.
 ethereum.request({ method: "eth_requestAccounts", params: [] });
 ```
 
+You can also call the SDK's [`connectAndSign`](connect-and-sign.md) method, and
+[batch multiple JSON-RPC requests](batch-json-rpc-requests.md) using the `metamask_batch` method.
+
 ## Example
 
 You can copy the full JavaScript example to get started:
@@ -97,17 +99,18 @@ You can copy the full JavaScript example to get started:
 import { MetaMaskSDK } from "@metamask/sdk";
 
 const MMSDK = new MetaMaskSDK({
-  dappMetadata: {
-    name: "Example JavaScript Dapp",
-    url: window.location.href,
-  },
-  // Other options
+    dappMetadata: {
+        name: "Example JavaScript Dapp",
+        url: window.location.href,
+    },
+    infuraAPIKey: process.env.INFURA_API_KEY,
+    // Other options
 });
 
 // You can also access via window.ethereum
 const ethereum = MMSDK.getProvider();
 
-ethereum.request({ method: 'eth_requestAccounts', params: [] });
+ethereum.request({ method: "eth_requestAccounts", params: [] });
 ```
 
 See the [example JavaScript dapps](https://github.com/MetaMask/metamask-sdk/tree/main/packages/examples)