Slight restructure of sdk content (#1127)

* Slight restructure of sdk content

* add redirects

* add js sdk tag

* minor edit

* fix redirect

docusaurus.config.js

@@ -134,6 +134,7 @@ const config = {
       "@docusaurus/plugin-client-redirects",
       {
         fromExtensions: ["html", "htm"],
+        // These redirects are (mostly) organized in the same order as the sidebar.
         redirects: [
           {
             from: ["/guide", "/guide/common-terms", "/guide/contributors", "/wallet/how-to/get-started-building", "/wallet/how-to/set-up-dev-environment", "/guide/create-dapp", "/guide/getting-started", "/wallet/category/get-started", "/wallet/get-started/set-up-dev-environment", "/wallet/how-to/get-started-building/set-up-dev-environment"],
@@ -151,6 +152,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/use-3rd-party-integrations/unity-dweb",
+            to: "/wallet/how-to/use-sdk/gaming/unity/dweb",
+          },
+          {
+            from: "/wallet/how-to/use-3rd-party-integrations/unity-infura",
+            to: "/wallet/how-to/use-sdk/gaming/unity/infura",
+          },
+          {
+            from: "/wallet/how-to/use-3rd-party-integrations",
+            to: "/wallet/how-to/use-sdk/3rd-party-libraries",
+          },
+          {
+            from: "/wallet/how-to/use-3rd-party-integrations/web3-onboard",
+            to: "/wallet/how-to/use-sdk/3rd-party-libraries/web3-onboard",
+          },
           {
             from: ["/wallet/get-started/detect-metamask", "/wallet/how-to/connect/detect-metamask", "/wallet/how-to/detect-metamask", "/wallet/how-to/discover-multiple-wallets"],
             to: "/wallet/how-to/detect-wallet",
@@ -187,6 +204,10 @@ 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",
@@ -196,8 +217,8 @@ const config = {
             to: "/wallet/how-to/access-provider",
           },
           {
-            from: "/guide/initializing-dapps",
-            to: "/wallet/how-to/interact-with-smart-contracts",
+            from: ["/guide/initializing-dapps", "/wallet/how-to/interact-with-smart-contracts"],
+            to: "/wallet/concepts/smart-contracts",
           },
           {
             from: "/guide/ethereum-provider",
@@ -334,10 +355,16 @@ const config = {
         }, []),
         createRedirects(existingPath) {
           if (existingPath.includes("/use-sdk")) {
+            // Redirect from /connect/set-up-sdk/X to /use-sdk/X
             return [
               existingPath.replace("/use-sdk", "/connect/set-up-sdk"),
             ];
           }
+          if (existingPath.includes("/use-sdk/gaming/unity")) {
+            return [
+              existingPath.replace("/use-sdk/gaming/unity", "/interact-with-smart-contracts/unity"),
+            ];
+          }
           if (existingPath.includes("/features/custom-evm-accounts")) {
             return [
               existingPath.replace("/features/custom-evm-accounts", "/how-to/use-keyring-api"),

wallet/concepts/convenience-libraries.md

@@ -22,5 +22,5 @@ seamless connection from your dapp to MetaMask.
 It onboards users smoothly from multiple dapp platforms using the MetaMask browser extension or
 MetaMask Mobile, and your dapp can call any [Wallet API](wallet-api.md) methods with the SDK installed.
 
-You can also [use Web3-Onboard with MetaMask SDK](../how-to/use-3rd-party-integrations/web3-onboard.md)
+You can also [use Web3-Onboard with MetaMask SDK](../how-to/use-sdk/3rd-party-libraries/web3-onboard.md)
 in your JavaScript dapp.

wallet/concepts/sdk/index.md

@@ -30,14 +30,15 @@ MetaMask using the SDK.
 Most of these features are not available if you only integrate your dapp directly using the
 [Wallet API](../wallet-api.md).
 
-| Feature                                                                                                  | Wallet API only | MetaMask SDK |
-|----------------------------------------------------------------------------------------------------------|:---------------:|:------------:|
-| 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)            |        ❌        |      ✅       |
-| [Batch multiple RPC requests](../../how-to/batch-json-rpc-requests.md)                                   |        ❌        |      ✅       |
-| [Make read-only requests](../../how-to/use-3rd-party-integrations/js-infura-api.md) using the Infura API |        ❌        |      ✅       |
+| Feature                                                                                       | Wallet API only | MetaMask SDK |
+|-----------------------------------------------------------------------------------------------|:---------------:|:------------:|
+| 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)                        |        ❌        |      ✅       |
 
 ## User experience
 
@@ -150,7 +151,7 @@ It also supports deeplinking on mobile platforms, as demonstrated in the followi
 </p>
 
 :::tip Get started
-- Get started by [setting up the SDK in your Unity game](../../how-to/use-sdk/gaming/unity.md).
+- Get started by [setting up the SDK in your Unity game](../../how-to/use-sdk/gaming/unity/index.md).
 - See the [Unity demo game with the SDK installed](https://assetstore.unity.com/packages/decentralization/demo-game-dragon-crasher-with-metamask-sdk-infura-and-truffle-249789)
   for advanced use cases.
 :::

wallet/how-to/interact-with-smart-contracts/index.md → wallet/concepts/smart-contracts.md

@@ -1,13 +1,13 @@
 ---
-description: Enable your dapp to interact with smart contracts.
-sidebar_position: 10
+description: Learn about interacting with smart contracts.
+sidebar_position: 7
 ---
 
-# Interact with smart contracts
+# Smart contracts
 
-This is a high-level overview of how to interact with smart contracts.
+This is a high-level overview of interacting with smart contracts.
 You can also see how to
-[interact with smart contracts from your Unity game](unity/index.md).
+[interact with smart contracts from your Unity game](../how-to/use-sdk/gaming/unity/smart-contracts/index.md).
 
 To interact with a smart contract, your dapp needs the following information:
 

wallet/how-to/access-provider.md

@@ -1,6 +1,6 @@
 ---
 description: Access a user's MetaMask provider using metamask-extension-provider.
-sidebar_position: 9
+sidebar_position: 12
 ---
 
 # Access a user's MetaMask provider

wallet/how-to/add-network.md

@@ -1,11 +1,11 @@
 ---
 description: Prompt a user to add or switch to an Ethereum network.
-sidebar_position: 7
+sidebar_position: 8
 ---
 
 # Add a network
 
-In some cases, such as when [interacting with smart contracts](interact-with-smart-contracts/index.md),
+In some cases, such as when [interacting with smart contracts](../concepts/smart-contracts.md),
 your dapp must connect a user to a new network in MetaMask.
 Instead of the user [adding a new network manually](https://support.metamask.io/hc/en-us/articles/360043227612-How-to-add-a-custom-network-RPC#h_01G63GGJ83DGDRCS2ZWXM37CV5),
 which requires them to configure RPC URLs and chain IDs, your dapp can use the

wallet/how-to/batch-json-rpc-requests.md

@@ -1,6 +1,8 @@
 ---
 description: Batch multiple JSON-RPC requests using MetaMask SDK.
-sidebar_position: 9
+sidebar_position: 10
+tags:
+  - JavaScript SDK
 ---
 
 # Batch JSON-RPC requests

wallet/how-to/display/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "Display in MetaMask",
-  "position": 6,
+  "position": 7,
   "link": {
     "type": "generated-index",
     "slug": "how-to/display",

wallet/how-to/display/custom-modals.md

@@ -7,7 +7,7 @@ tags:
 
 # Display custom modals
 
-Use [MetaMask SDK](../../concepts/sdk/index.md) to display custom MetaMask modals in your JavaScript dapp.
+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

wallet/how-to/use-3rd-party-integrations/js-infura-api.md → wallet/how-to/make-read-only-requests.md

@@ -1,15 +1,14 @@
 ---
-sidebar_position: 2
+sidebar_position: 9
 description: Use Infura and custom nodes to make direct, read-only requests in your JavaScript dapp.
 tags:
   - JavaScript SDK
 ---
 
-# Make read-only requests in JavaScript
+# Make read-only requests
 
-You can use the [Infura API](https://docs.infura.io/) from your JavaScript dapp with
-[MetaMask SDK](../use-sdk/javascript/index.md) installed to make direct, read-only
-JSON-RPC requests.
+You can use the [Infura API](https://docs.infura.io/) from your dapp with
+[MetaMask SDK](../concepts/sdk/index.md) installed to make direct, read-only JSON-RPC requests.
 
 Direct, read-only JSON-RPC requests are blockchain requests that do not require user wallet interaction.
 Your dapp can directly call most [JSON-RPC API methods](/wallet/reference/json-rpc-api), bypassing
@@ -52,12 +51,12 @@ Configure your dapp to make read-only requests using the [Infura API](#use-the-i
   We recommend using all allowlist options to maximize the security of your API key and dapp.
   :::
 
-- [MetaMask SDK set up](../use-sdk/javascript/index.md) in your JavaScript dapp.
+- [MetaMask SDK set up](use-sdk/javascript/index.md) in your JavaScript dapp.
 
 ## Use the Infura API
 
 To use the Infura API to make read-only requests, specify your Infura API key using the
-[`infuraAPIKey`](../../reference/sdk-js-options.md#infuraapikey) option when instantiating the SDK
+[`infuraAPIKey`](../reference/sdk-js-options.md#infuraapikey) option when instantiating the SDK
 in your dapp.
 
 ```javascript
@@ -68,7 +67,7 @@ infuraAPIKey: "YOUR-API-KEY"
 
 To use your own node (for example, with [Hardhat](https://hardhat.org/)) to make read-only requests,
 specify your node's chain ID and RPC URL using the
-[`readonlyRPCMap`](../../reference/sdk-js-options.md#readonlyrpcmap) option when instantiating the
+[`readonlyRPCMap`](../reference/sdk-js-options.md#readonlyrpcmap) option when instantiating the
 SDK in your dapp.
 
 ```javascript
@@ -82,8 +81,8 @@ In this example, chain ID `0x539` maps to the custom node's RPC URL.
 ## Use the Infura API and custom nodes
 
 You can use both the Infura API and custom nodes to make read-only requests by specifying both the
-[`infuraAPIKey`](../../reference/sdk-js-options.md#infuraapikey) and
-[`readonlyRPCMap`](../../reference/sdk-js-options.md#readonlyrpcmap) options when instantiating the
+[`infuraAPIKey`](../reference/sdk-js-options.md#infuraapikey) and
+[`readonlyRPCMap`](../reference/sdk-js-options.md#readonlyrpcmap) options when instantiating the
 SDK in your dapp.
 
 ```javascript
@@ -125,5 +124,5 @@ sdkOptions={{
 
 In this example, read-only requests to Mainnet (chain ID `0x1`) use the Infura API, while read-only
 requests to the local testnet (chain ID `0x539`) use the custom node.
-[`defaultReadOnlyChainId`](../../reference/sdk-js-options.md#defaultreadonlychainid) enables making
+[`defaultReadOnlyChainId`](../reference/sdk-js-options.md#defaultreadonlychainid) enables making
 read-only requests before the user connects to MetaMask, and specifies to make those requests to Mainnet.

wallet/how-to/manage-permissions.md

@@ -1,6 +1,6 @@
 ---
 description: Request and revoke permissions to call restricted methods.
-sidebar_position: 8
+sidebar_position: 11
 ---
 
 # Manage permissions

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: 12
+sidebar_position: 13
 ---
 
 # Use the MetaMask onboarding library

wallet/how-to/run-devnet.md

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

wallet/how-to/secure-dapp.md

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

wallet/how-to/send-transactions.md

@@ -1,6 +1,6 @@
 ---
 description: Send transactions using eth_sendTransaction.
-sidebar_position: 4
+sidebar_position: 5
 ---
 
 # Send transactions

wallet/how-to/sign-data/index.md

@@ -1,6 +1,6 @@
 ---
 description: Sign data using eth_signTypedData_v4 and personal_sign.
-sidebar_position: 5
+sidebar_position: 6
 ---
 
 # Sign data

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

@@ -0,0 +1,14 @@
+---
+sidebar_label: Third-party libraries
+sidebar_position: 4
+description: Set up the SDK using third-party libraries.
+tags:
+  - JavaScript SDK
+---
+
+# Use MetaMask SDK with third-party libraries
+
+Use [MetaMask SDK](../../../concepts/sdk/index.md) with the following third-party libraries:
+
+- [Web3-Onboard](web3-onboard.md)
+- Wagmi (coming soon)

wallet/how-to/use-3rd-party-integrations/web3-onboard.md → wallet/how-to/use-sdk/3rd-party-libraries/web3-onboard.md

@@ -1,6 +1,7 @@
 ---
 description: Integrate MetaMask SDK with Web3-Onboard in your JavaScript dapp.
 sidebar_position: 1
+sidebar_label: Web3-Onboard
 tags:
   - JavaScript SDK
 ---
@@ -12,7 +13,7 @@ of onboarding users into dapps.
 It provides a smooth user interface, a variety of wallet integrations, and is highly customizable to
 meet the needs of your dapp.
 
-You can integrate [MetaMask SDK](../../concepts/sdk/index.md) into your dapp alongside Web3-Onboard,
+You can integrate [MetaMask SDK](../../../concepts/sdk/index.md) into your dapp alongside Web3-Onboard,
 using the Web3-Onboard MetaMask module, to enable your users to easily connect to the MetaMask
 browser extension and MetaMask Mobile.
 
@@ -40,8 +41,8 @@ import metamaskSDK from "@web3-onboard/metamask";
 
 ### 3. Instantiate the module
 
-Instantiate the module using any [JavaScript SDK options](../../reference/sdk-js-options.md), for
-example, [`dappMetadata`](../../reference/sdk-js-options.md#dappmetadata):
+Instantiate the module using any [JavaScript SDK options](../../../reference/sdk-js-options.md), for
+example, [`dappMetadata`](../../../reference/sdk-js-options.md#dappmetadata):
 
 ```javascript
 const metamaskSDKWallet = metamaskSDK({

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

@@ -12,5 +12,5 @@ Import [MetaMask SDK](../../../concepts/sdk/index.md) into your gaming dapp to e
 to easily connect with their MetaMask Mobile wallet.
 See the instructions for the following gaming platforms:
 
-- [Unity](unity.md)
+- [Unity](unity/index.md)
 - [Unreal Engine](unreal-engine.md) (coming soon)

wallet/how-to/use-3rd-party-integrations/unity-dweb.md → wallet/how-to/use-sdk/gaming/unity/dweb.md

@@ -1,5 +1,6 @@
 ---
 sidebar_position: 4
+sidebar_label: Enable human-readable addresses
 description: Integrate Decentraweb into your Unity game to enable human-readable addresses.
 tags:
   - Unity SDK
@@ -8,13 +9,13 @@ tags:
 # Enable human-readable addresses in Unity
 
 You can integrate the [Decentraweb](https://decentraweb.org/) name resolver into your Unity game
-with [MetaMask SDK](../use-sdk/gaming/unity.md) installed.
+with [MetaMask SDK](index.md) installed.
 Decentraweb maps human-readable names to machine-readable identifiers, such as Ethereum addresses.
 Integrating Decentraweb into your game allows users to interact with addresses in a more user-friendly way.
 
 ## Prerequisites
 
-[MetaMask SDK set up](../use-sdk/gaming/unity.md) in your Unity game.
+[MetaMask SDK set up](index.md) in your Unity game.
 
 ## Initialize the integration wrapper