Update "Wallet Interoperability" and "Discover Multiple Wallets" pages

docusaurus.config.js

@@ -300,8 +300,8 @@ const config = {
             to: "/wallet/how-to/get-started-building/secure-dapp",
           },
           {
-            from: "/wallet/get-started/detect-metamask",
-            to: "/wallet/how-to/connect/detect-metamask",
+            from: ["/wallet/get-started/detect-metamask", "/wallet/how-to/connect/detect-metamask"],
+            to: "/wallet/how-to/connect/detect-wallet/metamask",
           },
           {
             from: "/wallet/get-started/detect-network",
@@ -383,6 +383,10 @@ const config = {
             from: ["/snaps/concepts/lifecycle", "/snaps/concepts/user-interface"],
             to: "/snaps/concepts/overview",
           },
+          {
+            from: "/wallet/how-to/discover-multiple-wallets",
+            to: "/wallet/how-to/connect/detect-wallet/multiple-wallets",
+          },
         ].reduce((acc, item) => {
           acc.push(item);
           acc.push({ from: item.from + ".html", to: item.to });

wallet/concepts/wallet-interoperabilty.md

@@ -6,43 +6,74 @@ sidebar_position: 6
 # Wallet interoperability
 
 A web dapp can integrate with multiple wallets simultaneously by adding support for
-[EIP-6963](https://eips.ethereum.org/EIPS/eip-6963), which improves the user experience when the
-user has multiple wallet browser extensions installed.
-EIP-6963 introduces an alternative discovery mechanism to the [`window.ethereum` injected provider](apis.md#ethereum-provider-api),
-enabling dapps to discover multiple injected wallet providers in a user's browser.
-We recommend using this new mechanism for provider discovery.
+[EIP-6963](https://eips.ethereum.org/EIPS/eip-6963), which introduces an alternative discovery
+mechanism to the [`window.ethereum`](apis.md#ethereum-provider-api) injected provider.
+This discovery is enabled by using the standardized events and interfaces defined by EIP-6963.
+
+The following is a visual demo of the user experience, showing the data provided from each installed wallet:
 
 <p align="center">
   <video width="100%" controls>
-    <source src="/eip-6963.mov" />
+    <source src="/eip-6963.mp4" />
   </video>
 </p>
 
-You can add support for connecting to the MetaMask browser extension via EIP-6963 in the following ways:
+Learn [how to detect multiple wallets](../how-to/connect/detect-wallet/metamask.md#detect-multiple-wallets)
+and see the
+[EIP-6963 Vite React + TypeScript demo](https://github.com/MetaMask/vite-react-ts-eip-6963/tree/main)
+for more information.
+
+## Third-party library support
+
+The following third-party libraries support EIP-6963:
+
+- [MetaMask SDK](../how-to/connect/set-up-sdk/javascript/index.md)
+
+  :::note
+  MetaMask SDK does not support connecting to non-MetaMask wallets via EIP-6963.
+  If you intend to support discovery of other wallets, we recommend using other methods of adding
+  EIP-6963 support such as Wagmi 2+.
+  :::
+
+- [Wagmi 2+](https://wagmi.sh)
+
+- [Web3Modal 3+](https://docs.walletconnect.com/web3modal/about)
+
+- [MIPD Store](https://github.com/wevm/mipd)
+
+### MetaMask SDK
+
+The [MetaMask JavaScript SDK](../how-to/connect/set-up-sdk/javascript/index.md) automatically checks
+for the presence of the MetaMask extension via EIP-6963.
+This eliminates the need for manual configuration or detection methods, simplifying the initial
+setup process for both developers and users.
+
+By adhering to the standards set by EIP-6963, the SDK unambiguously identifies and connects to
+MetaMask, resolving potential conflicts that might arise with other wallet extensions, ensuring a
+more stable and reliable interaction for users.
 
-- [Set up MetaMask SDK](../how-to/connect/set-up-sdk/javascript/index.md) in your dapp.
-  The SDK connects to the MetaMask extension via EIP-6963 by default, and we recommend using this method.
-- [Directly update your dapp code](../how-to/discover-multiple-wallets.md) to support EIP-6963.
-- Use third-party libraries that support EIP-6963.
+The SDK is also being integrated into [Wagmi 2+](https://wagmi.sh/), which supports EIP-6963.
+The SDK on its own supports connecting *only* to MetaMask via EIP-6963, so if you intend to support
+discovery of other wallets, we recommend using other methods of adding EIP-6963 support, such as
+Wagmi 2+.
 
-Alternatively, you can use [convenience libraries](convenience-libraries.md) that support wallet
-interoperability.
-We recommend using the SDK for the best MetaMask user experience.
+### MIPD Store
 
-:::note
-MetaMask SDK doesn't support connecting to non-MetaMask wallets via EIP-6963.
-If you intend to support discovery of other wallets, we recommend using other methods of adding
-EIP-6963 support.
-:::
+The [MIPD Store](https://github.com/wevm/mipd) stores the wallet providers and enables you to
+subscribe to the store and retrieve the providers.
+Unlike Wagmi and Web3-Onboard, which are libraries that provide components and connectors for
+multiple wallets and depend on MetaMask SDK for integration, the MIPD Store is a utility library
+that makes it easier to work with EIP-6963 and supports TypeScript types.
 
-## Community support
+## Wallet support
 
-The alternative discovery mechanism works for wallets that have implemented support for EIP-6963.
+The EIP-6963 alternative discovery mechanism works for wallets that have implemented support for EIP-6963.
 This includes MetaMask, Coinbase, Trust Wallet, OKX, and other major wallets.
 See the [list of wallets that support EIP-6963](https://github.com/WalletConnect/EIP6963/blob/master/src/utils/constants.ts).
 
 ## Backwards compatibility
 
-Dapps that do not support EIP-6963 can still detect MetaMask using the `window.ethereum` provider.
+Dapps that do not support EIP-6963 can still
+[detect MetaMask using the `window.ethereum` provider](../how-to/connect/detect-wallet/metamask.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).

wallet/how-to/connect/detect-wallet/_category_.json

@@ -0,0 +1,8 @@
+{
+  "label": "Detect wallet",
+  "position": 2,
+  "link": {
+    "type": "generated-index",
+    "slug": "how-to/connect/detect-wallet"
+  }
+}

wallet/how-to/connect/detect-metamask.md → wallet/how-to/connect/detect-wallet/metamask.md

@@ -1,6 +1,6 @@
 ---
 description: Detect the MetaMask Ethereum provider object.
-sidebar_position: 2
+sidebar_position: 1
 ---
 
 # Detect MetaMask
@@ -17,23 +17,20 @@ if (typeof window.ethereum !== 'undefined') {
 }
 ```
 
-:::tip
-To differentiate MetaMask from other Ethereum-compatible browsers, you can detect MetaMask using the
-[`window.ethereum.isMetaMask`](../../reference/provider-api.md#windowethereumismetamask) property.
-:::
+You can use the [`@metamask/detect-provider`](https://github.com/MetaMask/detect-provider) module to
+detect the MetaMask Ethereum provider.
 
-:::caution Important
+:::tip Detect multiple wallets
 MetaMask supports [EIP-6963](https://eips.ethereum.org/EIPS/eip-6963), which introduces an
 alternative discovery mechanism to the `window.ethereum` injected provider.
-This alternative mechanism enables dapps to support [wallet interoperability](../../concepts/wallet-interoperabilty.md)
-by discovering multiple injected wallet providers in a user's browser.
-We recommend [setting up SDK](../connect/set-up-sdk/javascript/index.md), which supports EIP-6963 by default.
+This alternative mechanism enables dapps to [detect multiple wallets](multiple-wallets.md) in
+the user's browser.
+We recommend detecting multiple wallets to improve the user experience.
 :::
 
-## Use @metamask/detect-provider
+## Steps
 
-You can use the [`@metamask/detect-provider`](https://github.com/MetaMask/detect-provider) module to
-detect the MetaMask Ethereum provider on any platform or browser.
+### 1. Install @metamask/detect-provider
 
 Use [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) to install
 `@metamask/detect-provider` in your project directory:
@@ -42,6 +39,8 @@ Use [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) to
 npm i @metamask/detect-provider
 ```
 
+### 2. Detect the provider
+
 For example, the following code detects the provider using `@metamask/detect-provider`:
 
 ```javascript title="index.js"
@@ -68,42 +67,3 @@ function startApp(provider) {
   // Access the decentralized web!
 }
 ```
-
-### Compile the module
-
-Use a bundler such as [Webpack](https://github.com/webpack/webpack) to compile the module and create
-an output script.
-Install Webpack in your project directory:
-
-```bash
-npm i --save-dev webpack
-```
-
-Install the Webpack CLI:
-
-```bash
-npm i --save-dev webpack-cli
-```
-
-Compile the module:
-
-```bash
-npx webpack
-```
-
-:::note
-When compiling the module, you might need to pass CLI options such as
-[`--experiments-top-level-await`](https://webpack.js.org/configuration/experiments/).
-You can alternatively specify options in a configuration file as follows:
-
-```javascript title="webpack.config.cjs"
-module.exports = {
-    experiments: {
-        topLevelAwait: true,
-    },
-};
-```
-:::
-
-Run `npx webpack` again upon any changes to `index.js`.
-See [Webpack's Getting Started guide](https://webpack.js.org/guides/getting-started/) for more information.