docs: Update signing methods and dapp tutorial

wallet/concepts/signing-methods.md

@@ -43,6 +43,60 @@ MetaMask's `personal_sign` doesn't accept a password.
 Use `eth_signTypedData_v4` or `personal_sign`.
 :::
 
+### Migration Guide
+
+To help you migrate from deprecated methods to recommended ones, use this guide:
+
+| Deprecated Method | Recommended Method | Use Case | Benefits |
+|------------------|-------------------|-----------|----------|
+| `eth_sign` | `personal_sign` | Simple text signing, login messages | <ul><li>Phishing protection</li><li>Popular for SIWE</li></ul> |
+| `eth_signTypedData_v1/v3` | `eth_signTypedData_v4` | Structured data signing | <ul><li>Lower chain verification cost</li><li>Better type safety</li></ul> |
+
+#### Example Migration
+
+```javascript
+// OLD: eth_sign
+const msg = 'Hello World';
+const signedMessage = await ethereum.request({
+    method: 'eth_sign',
+    params: [address, msg]
+});
+
+// NEW: personal_sign
+const msg = 'Hello World';
+const signedMessage = await ethereum.request({
+    method: 'personal_sign',
+    params: [msg, address]
+});
+```
+
+```javascript
+// OLD: eth_signTypedData_v3
+const msgParams = {
+    types: {
+        EIP712Domain: [/*...*/],
+        Person: [/*...*/]
+    },
+    // ...
+};
+
+// NEW: eth_signTypedData_v4
+const msgParams = {
+    types: {
+        EIP712Domain: [/*...*/],
+        Person: [/*...*/]
+    },
+    // Additional type safety and features
+    // ...
+};
+```
+
+:::tip Best Practices
+- Always use `personal_sign` for simple text signing
+- Use `eth_signTypedData_v4` for structured data
+- Include clear messages for users about what they're signing
+:::
+
 ### `eth_sign`
 
 `eth_sign` allows signing an arbitrary hash, which means an attacker can use it to request users to

wallet/tutorials/javascript-dapp-simple.md

@@ -84,11 +84,13 @@ Update `index.html` to include the script:
 
 ### 3. Detect MetaMask
 
-:::caution
+:::caution Legacy approach
 The `@metamask/detect-provider` module is deprecated, and is only used here for educational purposes.
 In production environments, we recommend [connecting to MetaMask using EIP-6963](../how-to/connect.md).
 :::
 
+#### Legacy Method (Educational Purpose)
+
 Install the `@metamask/detect-provider` module in your project directory:
 
 ```bash
@@ -103,7 +105,7 @@ mkdir src && touch src/detect.js
 
 In a text editor, add the following code to `src/detect.js` to detect the MetaMask provider using `@metamask/detect-provider`:
 
-```js title="detect.js"
+```javascript
 import detectEthereumProvider from "@metamask/detect-provider"
 
 async function setup() {
@@ -126,6 +128,52 @@ function startApp(provider) {
 window.addEventListener("load", setup)
 ```
 
+#### Recommended Production Method (EIP-6963)
+
+For production use, create a new file `detect-eip6963.js`:
+
+```javascript
+// Initialize a variable to store the MetaMask provider
+let metamaskProvider = null;
+
+// Listen for provider announcements
+window.addEventListener('eip6963:announceProvider', ({ detail: { info, provider } }) => {
+  // Check if the announced provider is MetaMask
+  if (info.rdns.includes('metamask')) {
+    metamaskProvider = provider;
+    console.log('MetaMask detected:', info.name, info.icon);
+  }
+});
+
+// Request providers to announce themselves
+window.dispatchEvent(new Event('eip6963:requestProvider'));
+
+// Function to connect to MetaMask
+async function connectMetaMask() {
+  if (!metamaskProvider) {
+    console.error('MetaMask not found!');
+    return;
+  }
+
+  try {
+    // Request account access
+    const accounts = await metamaskProvider.request({ 
+      method: 'eth_requestAccounts' 
+    });
+    console.log('Connected accounts:', accounts);
+    return accounts;
+  } catch (error) {
+    console.error('Error connecting to MetaMask:', error);
+  }
+}
+
+export { connectMetaMask };
+```
+
+:::tip Production Use
+For production applications, we recommend using the EIP-6963 method above or a third-party library that supports it. See [Connect to MetaMask](../how-to/connect.md) for more options.
+:::
+
 ### 4. Detect a user's network
 
 [Detect the user's network](../how-to/manage-networks/detect-network.md) to ensure all RPC requests