SDK updates part 2: Add intro sections

docs/whats-new.md

@@ -82,7 +82,7 @@ of the [MetaMask developer page](https://metamask.io/developer/).
   ([#1274](https://github.com/MetaMask/metamask-docs/pull/1274))
 - Documented [Snaps cron jobs](/snaps/features/cron-jobs).
   ([#1271](https://github.com/MetaMask/metamask-docs/pull/1271))
-- Updated [how to connect to MetaMask](/wallet/how-to/connect) with vanilla TypeScript and React
+- Updated [how to connect to MetaMask](/wallet/connect/wallet-api) with vanilla TypeScript and React
   TypeScript instructions.
   ([#1247](https://github.com/MetaMask/metamask-docs/pull/1247))
 
@@ -101,7 +101,7 @@ of the [MetaMask developer page](https://metamask.io/developer/).
 - Documented [Snap-defined timeouts](/snaps/reference/permissions/#snap-defined-timeouts).
   ([#1224](https://github.com/MetaMask/metamask-docs/pull/1224) and
   [#1227](https://github.com/MetaMask/metamask-docs/pull/1227))
-- Restructured Wallet documentation to emphasize [connecting using EIP-6963](/wallet/how-to/connect).
+- Restructured Wallet documentation to emphasize [connecting using EIP-6963](/wallet/connect/wallet-api).
   ([#1214](https://github.com/MetaMask/metamask-docs/pull/1214))
 - Documented [Snaps custom name resolution](/snaps/features/custom-name-resolution).
   ([#924](https://github.com/MetaMask/metamask-docs/pull/924))
@@ -152,7 +152,7 @@ of the [MetaMask developer page](https://metamask.io/developer/).
 - Restructured and improved [Wallet documentation](/wallet) and introduced "Wallet API" terminology.
   ([#1114](https://github.com/MetaMask/metamask-docs/pull/1114) and
   [#1125](https://github.com/MetaMask/metamask-docs/pull/1125))
-- Documented [how to detect multiple wallets using EIP-6963](/wallet/how-to/connect).
+- Documented [how to detect multiple wallets using EIP-6963](/wallet/connect/wallet-api).
   ([#1094](https://github.com/MetaMask/metamask-docs/pull/1094))
 - Documented [how to communicate errors in Snaps](/snaps/how-to/communicate-errors).
   ([#1117](https://github.com/MetaMask/metamask-docs/pull/1117))

wallet-sidebar.js

@@ -4,12 +4,33 @@
 const sidebar = {
   walletSidebar: [
     "index",
+    {
+      type: "category",
+      label: "Connect to MetaMask",
+      link: {type: "doc", id: "connect/index"},
+      items: [
+        {
+          type: "doc",
+          id: "connect/sdk",
+        },
+        {
+          type: "category",
+          label: "Third-party libraries",
+          collapsed: false,
+          items: [{ type: "autogenerated", dirName: "connect/3rd-party-libraries" }],
+        },
+        {
+          type: "doc",
+          id: "connect/wallet-api",
+        },
+      ],
+      collapsed: false,
+    },
     {
       type: "category",
       label: "How to",
       link: { type: "generated-index", slug: "/how-to" },
       items: [{ type: "autogenerated", dirName: "how-to" }],
-      collapsed: false,
     },
     {
       type: "category",

wallet/concepts/sdk/android.md → wallet/concepts/android.md

@@ -1,29 +1,28 @@
 ---
-sidebar_position: 2
+sidebar_position: 4
 description: Learn about the Android SDK architecture.
 tags:
   - Android SDK
 ---
 
 # Android SDK architecture
 
-The Android version of [MetaMask SDK](index.md) enables your users to easily connect with their
+The Android version of [MetaMask SDK](../how-to/use-sdk/index.md) enables your users to easily connect with their
 MetaMask Mobile wallet.
 The [architecture](#architecture) and [connection flow](#connection-flow) of
 the Android SDK differs from the other SDK platforms.
 
 :::tip Get started
-
-- Get started by [setting up the SDK in your Android dapp](../../how-to/use-sdk/mobile/android.md).
+- Get started by [setting up the SDK in your Android dapp](../how-to/use-sdk/mobile/android.md).
 - See the [example Android dapp](https://github.com/MetaMask/metamask-android-sdk/tree/main/app) in
   the Android SDK GitHub repository for advanced use cases.
-  :::
+:::
 
 ## Architecture
 
 The following diagram outlines the high-level architecture of the Android SDK:
 
-![Android SDK architecture diagram](../../assets/sdk-android-architecture.png)
+![Android SDK architecture diagram](../assets/sdk-android-architecture.png)
 
 The MetaMask Android SDK consists of two components:
 
@@ -48,7 +47,7 @@ in Kotlin) using different mechanisms depending on the direction of communicatio
 
 The following diagram outlines the communication flow between the Android client SDK and server SDK:
 
-![Android SDK communication diagram](../../assets/sdk-android-communication.png)
+![Android SDK communication diagram](../assets/sdk-android-communication.png)
 
 The flow is as follows:
 

wallet/concepts/architecture.md

@@ -9,7 +9,7 @@ The following diagram outlines the high-level architecture of the MetaMask web3
 
 ![Architecture diagram](../assets/web3-architecture.png)
 
-Using [MetaMask SDK](sdk/index.md), dapps built on multiple platforms can connect to their users' Ethereum
+Using [MetaMask SDK](../how-to/use-sdk/index.md), dapps built on multiple platforms can connect to their users' Ethereum
 accounts through the MetaMask browser extension and MetaMask Mobile.
 Dapps can send [Wallet API](wallet-api.md) requests to the users' MetaMask wallet clients.
 MetaMask then responds to these requests directly or uses [Infura](https://www.infura.io/) (or

wallet/concepts/sdk/connections.md → wallet/concepts/connections.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 1
+sidebar_position: 3
 sidebar_label: SDK connections
 description: Learn about how a dapp with the SDK installed connects to MetaMask.
 tags:
@@ -11,7 +11,7 @@ tags:
 
 # MetaMask SDK connections
 
-This page provides details on how a dapp with [MetaMask SDK](index.md) installed connects to a
+This page provides details on how a dapp with [MetaMask SDK](../how-to/use-sdk/index.md) installed connects to a
 user's MetaMask wallet.
 
 ## Initial connection flow

wallet/concepts/convenience-libraries.md

@@ -1,6 +1,6 @@
 ---
 description: Learn about convenience libraries.
-sidebar_position: 4
+sidebar_position: 5
 ---
 
 # Convenience libraries
@@ -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-sdk/3rd-party-libraries/web3-onboard.md)
+You can also [use Web3-Onboard with MetaMask SDK](../connect/3rd-party-libraries/web3-onboard.md)
 in your JavaScript dapp.

wallet/concepts/signing-methods.md

@@ -1,6 +1,6 @@
 ---
 description: Learn about the RPC methods for signing transactions in MetaMask.
-sidebar_position: 5
+sidebar_position: 6
 ---
 
 # Signing methods

wallet/concepts/smart-contracts.md

@@ -1,6 +1,6 @@
 ---
 description: Learn about interacting with smart contracts.
-sidebar_position: 7
+sidebar_position: 8
 ---
 
 # Smart contracts

wallet/concepts/wallet-api.md

@@ -28,7 +28,7 @@ MetaMask supports [EIP-6963](https://eips.ethereum.org/EIPS/eip-6963), which int
 alternative wallet detection mechanism to the `window.ethereum` injected provider.
 This alternative mechanism enables dapps to support [wallet interoperability](wallet-interoperability.md)
 by discovering multiple injected wallet providers in a user's browser.
-We recommend [using this mechanism to connect to MetaMask](../how-to/connect/index.md).
+We recommend [using this mechanism to connect to MetaMask](../connect/index.md).
 
 You can access the provider API using the selected EIP-6963 provider object.
 Throughout this documentation, we refer to the selected provider using `provider`.
@@ -83,15 +83,12 @@ The following methods are restricted:
   Granting permission for `eth_accounts` also grants permissions for the following methods:
 
   - [`eth_sendTransaction`](/wallet/reference/eth_sendTransaction)
-
   - [`personal_sign`](/wallet/reference/personal_sign)
-
   - [`eth_signTypedData_v4`](/wallet/reference/eth_signTypedData_v4)
-
   :::caution important
   To access accounts, we recommend using [`eth_requestAccounts`](/wallet/reference/eth_requestAccounts),
   which automatically asks for permission to use `eth_accounts` by calling `wallet_requestPermissions` internally.
-  See [how to access a user's accounts](../how-to/connect/access-accounts.md) for more information.
+  See [how to access a user's accounts](../how-to/access-accounts.md) for more information.
   :::
 
 - [`wallet_snap`](/snaps/reference/wallet-api-for-snaps/#wallet_snap) - Gaining permission requires

wallet/concepts/wallet-interoperability.md

@@ -1,6 +1,6 @@
 ---
 description: Learn about wallet interoperability.
-sidebar_position: 6
+sidebar_position: 7
 ---
 
 # Wallet interoperability
@@ -27,14 +27,14 @@ provided from each installed wallet:
   </video>
 </p>
 
-You can [connect to MetaMask using EIP-6963](../how-to/connect/index.md) and see the
+You can [connect to MetaMask using EIP-6963](../connect/wallet-api.md) and see the
 [EIP-6963 Vite React + TypeScript demo](https://github.com/MetaMask/vite-react-ts-eip-6963/tree/main)
 for more information.
 
 ## EIP-6963 interfaces
 
 Wallets that support EIP-6963 implement and expose the following standardized interfaces.
-When [connecting to MetaMask using EIP-6963](../how-to/connect/index.md), it's important to review
+When [connecting to MetaMask using EIP-6963](../connect/wallet-api.md), it's important to review
 and understand these interfaces.
 
 ### Provider info
@@ -125,6 +125,6 @@ See the [list of wallets that support EIP-6963](https://github.com/WalletConnect
 ## Backwards compatibility
 
 Dapps that do not support EIP-6963 can still
-[detect MetaMask using the `window.ethereum` provider](/wallet/tutorials/javascript-dapp-simple).
+[detect MetaMask using the `window.ethereum` provider](../tutorials/javascript-dapp-simple.md).
 However, we recommend adding support to improve the user experience for multiple installed wallets.
 Read more about [EIP-6963 backwards compatibility](https://eips.ethereum.org/EIPS/eip-6963#backwards-compatibility).