diff --git a/sdk-sidebar.js b/sdk-sidebar.js
index a5f57a6e3ba..382b6d9c992 100644
--- a/sdk-sidebar.js
+++ b/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',
+ ],
},
],
}
diff --git a/sdk/quickstart/javascript-dynamic.md b/sdk/connect/javascript-dynamic.md
similarity index 98%
rename from sdk/quickstart/javascript-dynamic.md
rename to sdk/connect/javascript-dynamic.md
index b3b2ade04da..8421f03af0b 100644
--- a/sdk/quickstart/javascript-dynamic.md
+++ b/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.
diff --git a/sdk/quickstart/javascript-wagmi.md b/sdk/connect/javascript-wagmi.md
similarity index 97%
rename from sdk/quickstart/javascript-wagmi.md
rename to sdk/connect/javascript-wagmi.md
index 3a4571b0fbc..e3f9c8e0b15 100644
--- a/sdk/quickstart/javascript-wagmi.md
+++ b/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:
diff --git a/sdk/quickstart/javascript-web3auth.md b/sdk/connect/javascript-web3auth.md
similarity index 97%
rename from sdk/quickstart/javascript-web3auth.md
rename to sdk/connect/javascript-web3auth.md
index bdee33ece8e..676596b8e4e 100644
--- a/sdk/quickstart/javascript-web3auth.md
+++ b/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.
diff --git a/sdk/quickstart/javascript.md b/sdk/connect/javascript.md
similarity index 96%
rename from sdk/quickstart/javascript.md
rename to sdk/connect/javascript.md
index 62e58947bd9..21b09d185e0 100644
--- a/sdk/quickstart/javascript.md
+++ b/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.
diff --git a/sdk/quickstart/react-native.md b/sdk/connect/react-native.md
similarity index 97%
rename from sdk/quickstart/react-native.md
rename to sdk/connect/react-native.md
index 727642262ba..2a0891974b4 100644
--- a/sdk/quickstart/react-native.md
+++ b/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.
diff --git a/sdk/index.md b/sdk/index.md
new file mode 100644
index 00000000000..0507cae7b20
--- /dev/null
+++ b/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.
+
+
+
+
+
+## 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.
+
+
+
+:::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
deleted file mode 100644
index b974d150d85..00000000000
--- a/sdk/introduction/supported-networks.md
+++ /dev/null
@@ -1,27 +0,0 @@
----
-description: Supported EVM networks for MetaMask SDK.
----
-
-# Supported networks
-
-MetaMask SDK works with all EVM-compatible L1/L2 networks, including:
-
-- Ethereum
-- Linea
-- Base
-- Optimism
-- Polygon
-- Arbitrum
-- Avalanche
-- BNB Chain
-
-See [Chainlist](https://chainlist.org/) for the full list of supported networks.
-
-:::tip
-For production deployments, it's important to use reliable RPC providers instead of public nodes.
-We recommend using services like [MetaMask Developer](https://developer.metamask.io/) to ensure better reliability and performance.
-:::
-
-:::note
-You can also connect to some non-EVM networks, including [Starknet](/wallet/how-to/use-non-evm-networks/starknet/), using MetaMask Snaps.
-:::
diff --git a/sdk/introduction/welcome.md b/sdk/introduction/welcome.md
deleted file mode 100644
index 363ab43a141..00000000000
--- a/sdk/introduction/welcome.md
+++ /dev/null
@@ -1,43 +0,0 @@
----
-slug: /
-sidebar_label: Welcome
-description: Introduction page for MetaMask SDK documentation.
----
-
-# Build onchain dapps with MetaMask SDK
-
-MetaMask SDK is a toolkit that allows you to build onchain dapps.
-With the SDK, you can:
-
-- Authenticate users.
-- Manage wallet states.
-- Handle transactions.
-- Interact with contracts.
-
-[Get started with JavaScript and Wagmi.](quickstart/javascript-wagmi.md)
-
-:::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:
-
-- 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.
-
-## Where do I start?
-
-You can get started quickly with the following dapp platforms:
-
-- [JavaScript + Wagmi (recommended)](quickstart/javascript-wagmi.md)
-- [JavaScript](quickstart/javascript.md)
-- [Dynamic SDK integration](quickstart/javascript-dynamic.md)
-- [Web3Auth SDK integration](quickstart/javascript-web3auth.md)
-- [React Native](quickstart/react-native.md)
diff --git a/sdk/introduction/llm-prompt.md b/sdk/reference/llm-prompt.md
similarity index 100%
rename from sdk/introduction/llm-prompt.md
rename to sdk/reference/llm-prompt.md
diff --git a/sdk/introduction/supported-platforms.md b/sdk/reference/supported-platforms.md
similarity index 100%
rename from sdk/introduction/supported-platforms.md
rename to sdk/reference/supported-platforms.md
diff --git a/src/components/CardList/CardListItem/index.tsx b/src/components/CardList/CardListItem/index.tsx
index a2dcb456a3e..8697c588507 100644
--- a/src/components/CardList/CardListItem/index.tsx
+++ b/src/components/CardList/CardListItem/index.tsx
@@ -15,6 +15,7 @@ export interface CardItem {
description?: ReactNode
href?: string
flaskOnly?: boolean
+ buttonIcon?: 'arrow-right' | 'external-arrow'
}
interface CardListItemProps {
@@ -22,7 +23,7 @@ interface CardListItemProps {
}
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/src/pages/index.tsx b/src/pages/index.tsx
index 9d938a71f10..8e7b4ba8282 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -11,6 +11,11 @@ export default function Home(): JSX.Element {
-You can [connect to MetaMask using EIP-6963](../how-to/connect.md) and see the
+You can [connect to MetaMask using EIP-6963](../how-to/connect-extension.md) and see the
[EIP-6963 Vite React + TypeScript demo](https://github.com/MetaMask/vite-react-ts-eip-6963/tree/main)
for more information.
## EIP-6963 interfaces
Wallets that support EIP-6963 implement and expose the following standardized interfaces.
-When [connecting to MetaMask using EIP-6963](../how-to/connect.md), it's important to review
+When [connecting to MetaMask using EIP-6963](../how-to/connect-extension.md), it's important to review
and understand these interfaces.
### Provider info
@@ -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/access-accounts.md b/wallet/how-to/access-accounts.md
index d5bbe980113..aff91c27010 100644
--- a/wallet/how-to/access-accounts.md
+++ b/wallet/how-to/access-accounts.md
@@ -31,7 +31,7 @@ You can also access users' accounts on some [non-EVM networks](/wallet/how-to/us
:::caution Important
This section describes how to create a single connect button.
-When connecting to multiple wallets, use the [Connect to MetaMask](connect.md) guide to create
+When connecting to multiple wallets, use the [Connect to the MetaMask extension](connect-extension.md) guide to create
multiple connect buttons.
:::
diff --git a/wallet/how-to/connect.md b/wallet/how-to/connect-extension.md
similarity index 95%
rename from wallet/how-to/connect.md
rename to wallet/how-to/connect-extension.md
index a0bf1f56566..7ee77760baf 100644
--- a/wallet/how-to/connect.md
+++ b/wallet/how-to/connect-extension.md
@@ -1,9 +1,15 @@
---
-description: Connect to MetaMask using the Wallet API and EIP-6963.
+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) instead.
+:::
You can connect your dapp to users' MetaMask wallets by detecting MetaMask in their browsers and
connecting to their accounts.
@@ -15,21 +21,17 @@ This approach allows you to detect multiple installed wallets and connect to the
Learn more about EIP-6963 in [Wallet interoperability](../concepts/wallet-interoperability.md).
:::
-:::tip
-To connect to MetaMask without using EIP-6963, see the [Create a simple dapp](../tutorials/javascript-dapp-simple.md) tutorial.
-:::
-
-You can connect to MetaMask [using third-party libraries](#connect-to-metamask-using-third-party-libraries)
+You can connect to the MetaMask browser extension [using third-party libraries](#connect-to-metamask-using-third-party-libraries)
or [directly using Vite](#connect-to-metamask-directly-using-vite).
## Connect to MetaMask using third-party libraries
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
index 44a17f00de8..bfca4d0ba3e 100644
--- 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
@@ -24,7 +25,7 @@ interact with users' EVM accounts, and implements standard interfaces like
MetaMask also supports non-EVM networks, including native support for [Solana](how-to/use-non-evm-networks/solana.md).
-[Get started by connecting to MetaMask.](how-to/connect.md)
+[Get started with the Wallet API.](how-to/connect-extension.md)
## Wallet API vs. SDK
diff --git a/wallet/reference/provider-api.md b/wallet/reference/provider-api.md
index b19040b953b..c5be480d94a 100644
--- a/wallet/reference/provider-api.md
+++ b/wallet/reference/provider-api.md
@@ -13,7 +13,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](../concepts/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`.
diff --git a/wallet/tutorials/javascript-dapp-simple.md b/wallet/tutorials/javascript-dapp-simple.md
index c765b6f6407..b8fff49a6e2 100644
--- a/wallet/tutorials/javascript-dapp-simple.md
+++ b/wallet/tutorials/javascript-dapp-simple.md
@@ -9,7 +9,7 @@ It demonstrates the basics of connecting to MetaMask: detecting the MetaMask pro
:::caution Learning tutorial
This tutorial is for educational purposes and connects to MetaMask using the legacy provider object, `window.ethereum`, for the sake of simplicity.
-For deployment in a production environment, we recommend [connecting to MetaMask using EIP-6963](../how-to/connect.md) instead.
+For deployment in a production environment, we recommend [connecting to MetaMask using EIP-6963](../how-to/connect-extension.md) instead.
[EIP-6963](https://eips.ethereum.org/EIPS/eip-6963) introduces an alternative wallet detection mechanism to the `window.ethereum` provider, and enables dapps to support [wallet interoperability](../concepts/wallet-interoperability.md).
@@ -86,7 +86,7 @@ Update `index.html` to include the script:
:::caution
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).
+In production environments, we recommend [connecting to MetaMask using EIP-6963](../how-to/connect-extension.md).
:::
Install the `@metamask/detect-provider` module in your project directory: