Enhance JS section {WIP} (#2450)

* Enhance JS section Add viem, web3, ethers support * Feat EVM Structure changes (#2538) * fix some cursor issues and use mm connect package * fix links, slight file restructure * add wagmi tabs + edits * update redirects * fix link --------- Co-authored-by: Alexandra Carrillo <[email protected]>
MetaMask · alexandratran · Sep 23, 2025 · Sep 24, 2025 · Sep 24, 2025 · Sep 25, 2025
commit b4716d67c5e46db94937c9b6c824cc1eb8817e57
@@ -125,7 +125,7 @@ const config = {
   markdown: {
     mermaid: true,
     hooks: {
-      onBrokenMarkdownLinks: 'throw',
+      onBrokenMarkdownLinks: 'warn',
     },
   },
   themes: ['@docusaurus/theme-mermaid'],

@@ -99,7 +99,7 @@ const sessionAccount = privateKeyToAccount("0x...");
 Currently, Advanced Permissions do not support automatically upgrading a MetaMask user's account to a [MetaMask smart account](../../concepts/smart-accounts.md). Therefore, you must 
 ensure that the user is upgraded to a smart account before requesting Advanced Permissions.
 
-If the user has not yet been upgraded, you can handle the upgrade [programmatically](/sdk/evm/connect/guides/javascript/send-transactions/batch-transactions) or ask the 
+If the user has not yet been upgraded, you can handle the upgrade [programmatically](/sdk/evm/connect/guides/send-transactions/batch-transactions) or ask the 
 user to [switch to a smart account manually](https://support.metamask.io/configure/accounts/switch-to-or-revert-from-a-smart-account/#how-to-switch-to-a-metamask-smart-account).
 
 :::info Why is a Smart Account upgrade is required?

@@ -100,7 +100,7 @@ const sessionAccount = privateKeyToAccount("0x...");
 Currently, ERC-7715 does not support automatically upgrading a MetaMask user's account to a [MetaMask smart account](../../concepts/smart-accounts.md). Therefore, you must 
 ensure that the user is upgraded to a smart account before requesting ERC-7715 permissions.
 
-If the user has not yet been upgraded, you can handle the upgrade [programmatically](/sdk/evm/connect/guides/javascript/send-transactions/batch-transactions) or ask the 
+If the user has not yet been upgraded, you can handle the upgrade [programmatically](/sdk/evm/connect/guides/send-transactions/batch-transactions) or ask the 
 user to [switch to a smart account manually](https://support.metamask.io/configure/accounts/switch-to-or-revert-from-a-smart-account/#how-to-switch-to-a-metamask-smart-account).
 
 :::info Why is a Smart Account upgrade is required?

@@ -49,76 +49,72 @@ const sdkSidebar = {
   ],
   evm: [
     'evm/index',
+    {
+      type: 'category',
+      label: 'Quickstart',
+      collapsible: false,
+      collapsed: false,
+      items: [
+        'evm/connect/quickstart/javascript',
+        'evm/connect/quickstart/wagmi',
+        'evm/connect/quickstart/rainbowkit',
+        'evm/connect/quickstart/connectkit',
+        'evm/connect/quickstart/react-native',
+        'evm/connect/quickstart/dynamic',
+        'evm/connect/quickstart/web3auth',
+      ],
+    },
     {
       type: 'category',
       label: 'Guides',
       collapsible: false,
       collapsed: false,
       items: [
+        'evm/connect/guides/manage-user-accounts',
+        'evm/connect/guides/manage-networks',
+        {
+          type: 'category',
+          label: 'Send transactions',
+          collapsible: true,
+          collapsed: true,
+          link: { type: "doc", id: "evm/connect/guides/send-transactions/index" },
+          items: [
+            'evm/connect/guides/send-transactions/batch-transactions',
+          ],
+        },
         {
           type: 'category',
-          label: 'JavaScript',
+          label: 'Sign data',
           collapsible: true,
           collapsed: true,
-          link: { type: "doc", id: "evm/connect/guides/javascript/index" },
+          link: { type: "doc", id: "evm/connect/guides/sign-data/index" },
           items: [
-            'evm/connect/guides/javascript/manage-user-accounts',
-            'evm/connect/guides/javascript/manage-networks',
-            {
-              type: 'category',
-              label: 'Send transactions',
-              collapsible: true,
-              collapsed: true,
-              link: { type: "doc", id: "evm/connect/guides/javascript/send-transactions/index" },
-              items: [
-                'evm/connect/guides/javascript/send-transactions/batch-transactions',
-              ],
-            },
-            {
-              type: 'category',
-              label: 'Sign data',
-              collapsible: true,
-              collapsed: true,
-              link: { type: "doc", id: "evm/connect/guides/javascript/sign-data/index" },
-              items: [
-                'evm/connect/guides/javascript/sign-data/siwe',
-              ],
-            },
-            'evm/connect/guides/javascript/batch-requests',
-            'evm/connect/guides/javascript/interact-with-contracts',
-            'evm/connect/guides/javascript/use-deeplinks',
-            'evm/connect/guides/javascript/display-tokens',
-            {
-              type: 'category',
-              label: 'Best practices',
-              collapsible: true,
-              collapsed: true,
-              items: [
-                'evm/connect/guides/javascript/best-practices/display',
-                'evm/connect/guides/javascript/best-practices/run-devnet',
-                'evm/connect/guides/javascript/best-practices/production-readiness',
-              ],
-            },
+            'evm/connect/guides/sign-data/siwe',
           ],
         },
+        'evm/connect/guides/interact-with-contracts',
         {
           type: 'category',
-          label: 'Wagmi',
+          label: 'MetaMask exclusive',
           collapsible: true,
           collapsed: true,
-          link: { type: "doc", id: "evm/connect/guides/wagmi/index" },
           items: [
-            'evm/connect/guides/wagmi/manage-user-accounts',
-            'evm/connect/guides/wagmi/manage-networks',
-            'evm/connect/guides/wagmi/send-transactions',
-            'evm/connect/guides/wagmi/interact-with-contracts',
+            'evm/connect/guides/metamask-exclusive/batch-requests',
+            'evm/connect/guides/metamask-exclusive/use-deeplinks',
+            'evm/connect/guides/metamask-exclusive/display-tokens',
+          ],
+        },
+        {
+          type: 'category',
+          label: 'Best practices',
+          collapsible: true,
+          collapsed: true,
+          items: [
+            'evm/connect/guides/best-practices/display',
+            'evm/connect/guides/best-practices/run-devnet',
+            'evm/connect/guides/best-practices/production-readiness',
           ],
         },
-        'evm/connect/guides/rainbowkit',
-        'evm/connect/guides/connectkit',
-        'evm/connect/guides/react-native',
-        'evm/connect/guides/dynamic',
-        'evm/connect/guides/web3auth',
       ],
     },
     {
@@ -132,7 +128,7 @@ const sdkSidebar = {
           label: "Create a wallet AI agent",
           href: "/tutorials/create-wallet-ai-agent"
         },
-        { 
+        {
           type: "link",
           label: "Upgrade an EOA to a smart account",
           href: "/tutorials/upgrade-eoa-to-smart-account"
@@ -152,7 +148,7 @@ const sdkSidebar = {
           label: "JSON-RPC API",
           collapsible: true,
           collapsed: true,
-          link: { type: "doc",  id: "evm/connect/reference/json-rpc-api/index" },
+          link: { type: "doc", id: "evm/connect/reference/json-rpc-api/index" },
           items: [
             "evm/connect/reference/json-rpc-api/wallet_sendCalls",
             "evm/connect/reference/json-rpc-api/eth_signTypedData_v4",

@@ -44,6 +44,6 @@ For example:
 
 - **Clear feedback** - Display user friendly messages when wallet connection or transaction errors occur (for example, network switch failures or user rejections).
 
-- **Event management** - If you're using Vanilla JavaScript, handle MetaMask events such as [`chainChanged`](../../../reference/provider-api.md#chainchanged)
-  and [`accountsChanged`](../../../reference/provider-api.md#accountschanged) to promptly update the UI and internal state.
+- **Event management** - If you're using Vanilla JavaScript, handle MetaMask events such as [`chainChanged`](../../reference/provider-api.md#chainchanged)
+  and [`accountsChanged`](../../reference/provider-api.md#accountschanged) to promptly update the UI and internal state.
   If you're using Wagmi, you generally don't need to handle MetaMask events, because the hooks will handle the events for you.
@@ -83,7 +83,7 @@ Follow these steps to connect MetaMask to Hardhat Network.
 
    :::tip
    Alternatively, you can add Hardhat Network to MetaMask using
-   [`wallet_addEthereumChain`](../../../reference/json-rpc-api/index.md).
+   [`wallet_addEthereumChain`](../../reference/json-rpc-api/index.md).
    :::
 
 ## Reset your local nonce calculation