updates to sdk intro + redirects

alexandratran · alexandratran · commit c31ebea62148 · 2025-06-04T14:11:10.000-07:00
diff --git a/sdk-sidebar.js b/sdk-sidebar.js
@@ -13,8 +13,6 @@ const sidebar = {
         id: "index"
       },
       items: [
-        'introduction/supported-platforms',
-        'introduction/supported-networks',
         'introduction/llm-prompt',
       ],
     },
@@ -67,7 +65,10 @@ const sidebar = {
       label: 'Reference',
       collapsible: false,
       collapsed: false,
-      items: ['reference/sdk-options'],
+      items: [
+        'reference/supported-platforms',
+        'reference/sdk-options',
+      ],
     },
   ],
 }
diff --git a/sdk/connect/javascript-dynamic.md b/sdk/connect/javascript-dynamic.md
@@ -2,6 +2,7 @@
 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]
 ---
 
 # Connect to MetaMask using Dynamic SDK
@@ -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.
diff --git a/sdk/connect/javascript-wagmi.md b/sdk/connect/javascript-wagmi.md
@@ -2,6 +2,7 @@
 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]
 ---
 
 # Connect to MetaMask using JavaScript + Wagmi
diff --git a/sdk/connect/javascript-web3auth.md b/sdk/connect/javascript-web3auth.md
@@ -2,6 +2,7 @@
 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]
 ---
 
 # Connect to MetaMask using Web3Auth SDK
@@ -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.
diff --git a/sdk/connect/javascript.md b/sdk/connect/javascript.md
@@ -1,6 +1,7 @@
 ---
 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";
diff --git a/sdk/connect/react-native.md b/sdk/connect/react-native.md
@@ -1,6 +1,7 @@
 ---
 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";
diff --git a/sdk/index.md b/sdk/index.md
@@ -1,42 +1,89 @@
 ---
 slug: /
 description: Introduction page for MetaMask SDK documentation.
+keywords: [connect, MetaMask, SDK, integrate, dapp]
 ---
 
-# Build onchain dapps with MetaMask SDK
+import Button from '@site/src/components/elements/buttons/button'
+import CardList from '@site/src/components/CardList'
 
-MetaMask SDK is a toolkit that allows you to build onchain dapps.
-With the SDK, you can:
+# Seamlessly connect to MetaMask using the SDK
 
-- Authenticate users.
-- Manage wallet states.
-- Handle transactions.
-- Interact with contracts.
+MetaMask SDK is a toolkit that 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 L1/L2 networks.
 
-[Get started by connecting to MetaMask.](connect/javascript-wagmi.md)
+<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>
 
-:::tip Build embedded wallet experiences that work seamlessly with MetaMask
-Introducing our latest [Embedded Wallets SDK](https://web3auth.io/docs) (previously Web3Auth), you can now onboard users
-instantly and design seamless onchain experiences with social logins, passkeys and more.
-:::
-
-## Why use the SDK?
-
-The benefits of using MetaMask SDK include the following:
+## Supported platforms and libraries
 
-- It works on multiple dapp platforms:
-  - Web dapps - Connect to the MetaMask browser extension or use QR codes to connect to MetaMask Mobile.
-  - Mobile dapps - Use deeplinks to connect to MetaMask Mobile.
-- It works with all EVM-compatible L1/L2 networks.
-- It handles onboarding of users.
-- It is battle tested with millions of users on MetaMask.
+You can get started with the SDK on the following dapp platforms or third-party libraries:
 
-## Where do I start?
+<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://docs.reown.com/appkit/overview',
+      title: 'Reown AppKit',
+      description: 'Use SDK features with Reown AppKit.',
+      buttonIcon: 'external-arrow',
+    },
+    {
+      href: 'https://www.rainbowkit.com',
+      title: 'RainbowKit',
+      description: 'Use SDK features with RainbowKit.',
+      buttonIcon: 'external-arrow',
+    },
+    {
+      href: 'https://onboard.blocknative.com',
+      title: 'Web3-Onboard',
+      description: 'Use SDK features with Web3-Onboard.',
+      buttonIcon: 'external-arrow',
+    },
+    {
+      href: 'https://docs.family.co/connectkit',
+      title: 'ConnectKit',
+      description: 'Use SDK features with ConnectKit.',
+      buttonIcon: 'external-arrow',
+    },
+  ]}
+/>
 
-You can get started by connecting to MetaMask with the following dapp platforms:
-
-- [JavaScript + Wagmi (recommended)](connect/javascript-wagmi.md)
-- [JavaScript](connect/javascript.md)
-- [Dynamic SDK](connect/javascript-dynamic.md)
-- [Web3Auth SDK](connect/javascript-web3auth.md)
-- [React Native](connect/react-native.md)
+:::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.
+:::
diff --git a/sdk/introduction/supported-networks.md b/sdk/introduction/supported-networks.md
diff --git a/sdk/reference/supported-platforms.md b/sdk/reference/supported-platforms.md
diff --git a/src/components/CardList/CardListItem/index.tsx b/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'
                     ? {
diff --git a/vercel.json b/vercel.json
@@ -46,6 +46,22 @@
       "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/supported-networks/",
+      "destination": "/sdk/"
+    },
     {
       "source": "/wallet/how-to/use-3rd-party-integrations/",
       "destination": "/sdk/"
diff --git a/wallet-sidebar.js b/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",
diff --git a/wallet/concepts/wallet-interoperability.md b/wallet/concepts/wallet-interoperability.md
@@ -79,10 +79,12 @@ interface EIP6963RequestProviderEvent extends Event {
 
 The following third-party libraries support EIP-6963:
 
-- [Wagmi 2+](https://wagmi.sh)
-- [Web3Modal 3+](https://docs.walletconnect.com/web3modal/about)
+- [Wagmi 2+](/sdk/connect/javascript-wagmi)
+- [Reown AppKit](https://docs.reown.com/appkit/overview)
 - [MIPD Store](https://github.com/wevm/mipd)
-- [RainbowKit](https://www.rainbowkit.com/)
+- [RainbowKit](https://www.rainbowkit.com)
+- [Web3-Onboard](https://onboard.blocknative.com)
+- [ConnectKit](https://docs.family.co/connectkit)
 
 ### MIPD Store
 
@@ -97,8 +99,7 @@ supports TypeScript types.
 
 :::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+](https://wagmi.sh).
+If you intend to support discovery of other wallets, we recommend using a third-party library such as [Wagmi](/sdk/connect/javascript-wagmi).
 :::
 
 [MetaMask SDK](/sdk) automatically checks for the presence of the MetaMask extension via EIP-6963.
@@ -109,10 +110,9 @@ By adhering to the standards set by EIP-6963, the SDK unambiguously identifies a
 MetaMask, resolving potential conflicts that might arise with other wallet extensions, ensuring a
 more stable and reliable interaction for users.
 
-The SDK is also being integrated into [Wagmi 2+](https://wagmi.sh/), which supports EIP-6963.
+The SDK is also integrated into third-party libraries, like [Wagmi](/sdk/connect/javascript-wagmi), which support 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+.
+discovery of other wallets, we recommend using third-party libraries.
 
 ## Wallet support
 
diff --git a/wallet/how-to/connect-extension.md b/wallet/how-to/connect-extension.md
@@ -1,13 +1,14 @@
 ---
 description: Connect to the MetaMask extension using the Wallet API and EIP-6963.
 toc_max_heading_level: 4
+keywords: [extension, API]
 ---
 
-# Connect to MetaMask
+# Connect to the MetaMask extension
 
 :::tip Building a cross-platform or mobile dapp?
 For cross-platform development, mobile integration, or advanced features like QR codes and 
-deeplinking, connect to MetaMask using [**MetaMask SDK**](/sdk/connect/javascript-wagmi).
+deeplinking, connect to MetaMask using [**MetaMask SDK**](/sdk) instead.
 :::
 
 You can connect your dapp to users' MetaMask wallets by detecting MetaMask in their browsers and
@@ -27,10 +28,10 @@ or [directly using Vite](#connect-to-metamask-directly-using-vite).
 
 You can connect to MetaMask using the following third-party libraries that support EIP-6963:
 
-- [Wagmi 2+](https://wagmi.sh)
-- [Web3Modal 3+](https://docs.walletconnect.com/web3modal/about)
+- [Wagmi 2+](/sdk/connect/javascript-wagmi)
+- [Reown AppKit](https://docs.reown.com/appkit/overview)
 - [MIPD Store](https://github.com/wevm/mipd)
-- [RainbowKit](https://www.rainbowkit.com)
+- [RainbowKit](https://rainbowkit.com/docs/introduction)
 - [Web3-Onboard](https://onboard.blocknative.com)
 - [ConnectKit](https://docs.family.co/connectkit)
 
diff --git a/wallet/index.md b/wallet/index.md
@@ -1,9 +1,10 @@
 ---
 slug: /
 description: Introduction page for the Wallet API documentation.
+keywords: [extension, api]
 ---
 
-# Integrate your dapp with the MetaMask wallet
+# Integrate your dapp with MetaMask using the Wallet API
 
 :::tip Building a cross-platform or mobile dapp?
 For cross-platform development, mobile integration, or advanced features like QR codes and 
