SDK section improvements

sdk-sidebar.js

@@ -4,33 +4,21 @@
 const sidebar = {
   sdkSidebar: [
     {
-      type: 'category',
+      type: 'doc',
       label: 'Introduction',
-      collapsible: false,
-      collapsed: false,
-      items: [
-        'introduction/welcome',
-        'introduction/supported-platforms',
-        'introduction/supported-networks',
-        'introduction/llm-prompt',
-        {
-          type: 'link',
-          label: 'Try demo dapp',
-          href: 'https://metamask-sdk-examples.vercel.app/',
-        },
-      ],
+      id: "index",
     },
     {
       type: 'category',
-      label: 'Quickstart',
+      label: 'Connect to MetaMask',
       collapsible: false,
       collapsed: false,
       items: [
-        'quickstart/javascript-wagmi',
-        'quickstart/javascript',
-        'quickstart/javascript-dynamic',
-        'quickstart/javascript-web3auth',
-        'quickstart/react-native',
+        'connect/javascript-wagmi',
+        'connect/javascript',
+        'connect/javascript-dynamic',
+        'connect/javascript-web3auth',
+        'connect/react-native',
       ],
     },
     {
@@ -69,7 +57,11 @@ const sidebar = {
       label: 'Reference',
       collapsible: false,
       collapsed: false,
-      items: ['reference/sdk-options'],
+      items: [
+        'reference/llm-prompt',
+        'reference/supported-platforms',
+        'reference/sdk-options',
+      ],
     },
   ],
 }

sdk/quickstart/javascript-dynamic.md → sdk/connect/javascript-dynamic.md

@@ -1,10 +1,11 @@
 ---
-sidebar_label: Dynamic SDK integration
+sidebar_label: Dynamic SDK
 description: Quickstart guide for using MetaMask SDK and Dynamic SDK.
 toc_max_heading_level: 2
+keywords: [connect, MetaMask, Dynamic, SDK, dapp]
 ---
 
-# MetaMask SDK + Dynamic SDK integration
+# Connect to MetaMask using Dynamic SDK
 
 Get started with MetaMask SDK and [Dynamic SDK](https://docs.dynamic.xyz/introduction/welcome).
 You can set up the SDKs in the following ways:
@@ -19,7 +20,7 @@ You can set up the SDKs in the following ways:
 
 Features include:
 
-- **MetaMask SDK built into Dynamic** - Use MetaMask SDK features directly within the Dynamic SDK.
+- **MetaMask SDK built into Dynamic** - Use MetaMask SDK features directly within Dynamic SDK.
 - **Wallet connection** - Connect to MetaMask wallet with enhanced features.
 - **Mobile experience** - Optimized for both desktop and mobile users.
 - **TypeScript support** - Full type safety and modern development experience.

sdk/quickstart/javascript-wagmi.md → sdk/connect/javascript-wagmi.md

@@ -1,9 +1,11 @@
 ---
 description: Quickstart guide for using the SDK with a JavaScript and Wagmi dapp.
 toc_max_heading_level: 2
+sidebar_label: JavaScript + Wagmi (recommended)
+keywords: [connect, MetaMask, JavaScript, Wagmi, SDK, dapp]
 ---
 
-# JavaScript + Wagmi (recommended)
+# Connect to MetaMask using JavaScript + Wagmi
 
 Get started with MetaMask SDK in a JavaScript and Wagmi dapp.
 You can set up the SDK in the following ways:

sdk/quickstart/javascript-web3auth.md → sdk/connect/javascript-web3auth.md

@@ -1,10 +1,11 @@
 ---
-sidebar_label: Web3Auth SDK integration
+sidebar_label: Web3Auth SDK
 description: Quickstart guide for using MetaMask SDK and Web3Auth SDK.
 toc_max_heading_level: 2
+keywords: [connect, MetaMask, Web3Auth, SDK, dapp]
 ---
 
-# MetaMask SDK + Web3Auth SDK integration
+# Connect to MetaMask using Web3Auth SDK
 
 Get started with MetaMask SDK and [Web3Auth SDK](https://web3auth.io/docs/).
 You can set up the SDKs in the following ways:
@@ -18,7 +19,7 @@ You can set up the SDKs in the following ways:
 
 Features include:
 
-- **MetaMask SDK built into Web3Auth** - Use MetaMask SDK features directly within the Web3Auth SDK.
+- **MetaMask SDK built into Web3Auth** - Use MetaMask SDK features directly within Web3Auth SDK.
 - **Web3Auth social login** - Enable users to sign in with an email or social media account.
 - **Wallet connection** - Connect to MetaMask wallet with enhanced features.
 - **Mobile experience** - Optimized for both desktop and mobile users.

sdk/quickstart/javascript.md → sdk/connect/javascript.md

@@ -1,11 +1,13 @@
 ---
 description: Quickstart guide for using the SDK with a JavaScript dapp.
+sidebar_label: JavaScript
+keywords: [connect, MetaMask, JavaScript, SDK, dapp]
 ---
 
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
 
-# JavaScript
+# Connect to MetaMask using JavaScript
 
 Get started with MetaMask SDK in your JavaScript dapp.
 

sdk/quickstart/react-native.md → sdk/connect/react-native.md

@@ -1,11 +1,13 @@
 ---
 description: Quickstart guide for using the SDK with a React Native dapp.
+sidebar_label: React Native
+keywords: [connect, MetaMask, React, Native, SDK, dapp]
 ---
 
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
 
-# React Native
+# Connect to MetaMask using React Native
 
 Get started with MetaMask SDK in your React Native or Expo dapp.
 

sdk/index.md

@@ -0,0 +1,84 @@
+---
+slug: /
+description: Introduction page for MetaMask SDK documentation.
+keywords: [connect, MetaMask, SDK, integrate, dapp]
+---
+
+import Button from '@site/src/components/elements/buttons/button'
+import CardList from '@site/src/components/CardList'
+
+# Seamlessly connect to MetaMask using the SDK
+
+MetaMask SDK enables a fast, reliable, and seamless connection from your dapp to the MetaMask extension and MetaMask Mobile.
+With the SDK, you can easily onboard users and interact with their accounts on desktop or mobile, across all EVM networks.
+
+<p align="center">
+  <Button
+    as="a"
+    href="connect/javascript-wagmi"
+    label="Get started with the SDK"
+    icon="arrow-right"
+    style={{
+            '--button-color-hover': 'var(--general-black)',
+            '--button-text-color-hover': 'var(--general-white)',
+          }}
+  />
+</p>
+
+## Why use the SDK?
+
+MetaMask SDK gives your dapp a powerful upgrade:
+
+- **Cross-platform, cross-browser support** - One integration covers both desktop and mobile, all major browsers, and the MetaMask Mobile app—streamlining your user onboarding and eliminating edge cases.
+- **Mobile connection that just works** - Say goodbye to clunky "open in in-app browser" flows.
+  The SDK enables a native connection from any mobile browser (Safari, Chrome, etc.) directly to MetaMask Mobile, using secure deeplinking and session management.
+- **Production-ready, battle-tested** - MetaMask SDK is used in high-volume dapps across DeFi, NFTs, gaming, and more—ensuring stability, speed, and a smooth developer experience.
+- **Multichain-ready by design** - Today, the SDK supports all EVM networks.
+  Coming soon: Seamless connection to non-EVM chains like Solana and Bitcoin.
+  Futureproof your dapp with a single integration.
+
+## Supported platforms and libraries
+
+MetaMask SDK is available in a variety of ways to make integration as easy as possible.
+You can access it directly via npm, through popular developer libraries like Wagmi, or as part of popular convenience libraries.
+
+<CardList
+  items={[
+    {
+      href: 'connect/javascript-wagmi',
+      title: 'JavaScript + Wagmi (recommended)',
+      description: 'Use the CLI or template to set up the SDK in a Next.js and Wagmi dapp.',
+    },
+    {
+      href: 'connect/javascript',
+      title: 'JavaScript',
+      description: 'Set up the SDK in a JavaScript dapp.',
+    },
+    {
+      href: 'connect/javascript-dynamic',
+      title: 'Dynamic SDK',
+      description: 'Use the CLI or template to set up Dynamic SDK in a Next.js dapp. Use MetaMask SDK features with Dynamic.',
+    },
+    {
+      href: 'connect/javascript-web3auth',
+      title: 'Web3Auth SDK',
+      description: 'Use the CLI or template to set up Web3Auth SDK in a Next.js dapp. Use MetaMask SDK features with Web3Auth.',
+    },
+    {
+      href: 'connect/react-native',
+      title: 'React Native',
+      description: 'Set up the SDK in a React Native or Expo dapp.',
+    },
+    {
+      href: 'https://onboard.blocknative.com',
+      title: 'Web3-Onboard',
+      description: 'Use SDK features with Web3-Onboard.',
+      buttonIcon: 'external-arrow',
+    }
+  ]}
+/>
+
+:::tip Build embedded wallet experiences that work seamlessly with MetaMask
+Introducing our latest [Embedded Wallets SDK](connect/javascript-web3auth.md) (Web3Auth), you can now onboard users
+instantly and design seamless onchain experiences with social logins, passkeys and more.
+:::

src/components/CardList/CardListItem/index.tsx

@@ -15,14 +15,15 @@ export interface CardItem {
   description?: ReactNode
   href?: string
   flaskOnly?: boolean
+  buttonIcon?: 'arrow-right' | 'external-arrow'
 }
 
 interface CardListItemProps {
   item: CardItem
 }
 
 export default function CardListItem({ item }: CardListItemProps) {
-  const { title, description, href, flaskOnly } = item
+  const { title, description, href, flaskOnly, buttonIcon = 'arrow-right' } = item
   const [isHovered, setIsHovered] = useState(false)
   const { colorMode } = useColorMode()
   const [theme, setTheme] = useState('')
@@ -66,7 +67,7 @@ export default function CardListItem({ item }: CardListItemProps) {
                 as="button"
                 label={false}
                 type={theme === 'dark' ? 'secondary' : 'primary'}
-                icon="arrow-right"
+                icon={buttonIcon}
                 style={
                   theme === 'dark'
                     ? {

src/pages/index.tsx

@@ -11,6 +11,11 @@ export default function Home(): JSX.Element {
       <Hero
         title={siteConfig.title}
         description={"Build with the world's leading self-custodial crypto wallet."}
+        button={{
+          label: 'Get Started',
+          href: '/sdk',
+          icon: 'arrow-right',
+        }}
       />
       <CardSection
         colorPalette="purple"

vercel.json

@@ -46,6 +46,26 @@
       "source": "/wallet/how-to/access-provider/",
       "destination": "/wallet/"
     },
+    {
+      "source": "/wallet/how-to/connect/",
+      "destination": "/sdk/"
+    },
+    {
+      "source": "/sdk/quickstart/:path*",
+      "destination": "/sdk/connect/:path*"
+    },
+    {
+      "source": "/sdk/introduction/supported-platforms/",
+      "destination": "/sdk/reference/supported-platforms/"
+    },
+    {
+      "source": "/sdk/introduction/llm-prompt/",
+      "destination": "/sdk/reference/llm-prompt/"
+    },
+    {
+      "source": "/sdk/introduction/supported-networks/",
+      "destination": "/sdk/"
+    },
     {
       "source": "/wallet/how-to/use-3rd-party-integrations/",
       "destination": "/sdk/"

wallet-sidebar.js

@@ -17,8 +17,8 @@ const sidebar = {
       items: [
         {
           type: "doc",
-          label: "Connect to MetaMask",
-          id: "how-to/connect"
+          label: "Connect to the extension",
+          id: "how-to/connect-extension"
         },
         {
           type: "doc",

wallet/concepts/wallet-api.md

@@ -27,7 +27,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.md).
+We recommend [using this mechanism to connect to MetaMask](../how-to/connect-extension.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`.