From a12367ab9bab4de462101243eeedaca1524bd932 Mon Sep 17 00:00:00 2001 From: Alexandra Tran Date: Fri, 30 May 2025 15:13:53 -0700 Subject: [PATCH 1/5] Update SDK connect guides --- sdk-sidebar.js | 22 +++++++++---------- .../javascript-dynamic.md | 4 ++-- .../javascript-wagmi.md | 3 ++- .../javascript-web3auth.md | 4 ++-- sdk/{quickstart => connect}/javascript.md | 3 ++- sdk/{quickstart => connect}/react-native.md | 3 ++- sdk/{introduction/welcome.md => index.md} | 15 ++++++------- wallet/how-to/connect.md | 13 ++++++----- 8 files changed, 34 insertions(+), 33 deletions(-) rename sdk/{quickstart => connect}/javascript-dynamic.md (98%) rename sdk/{quickstart => connect}/javascript-wagmi.md (98%) rename sdk/{quickstart => connect}/javascript-web3auth.md (98%) rename sdk/{quickstart => connect}/javascript.md (97%) rename sdk/{quickstart => connect}/react-native.md (98%) rename sdk/{introduction/welcome.md => index.md} (63%) diff --git a/sdk-sidebar.js b/sdk-sidebar.js index a5f57a6e3ba..1a2a6317717 100644 --- a/sdk-sidebar.js +++ b/sdk-sidebar.js @@ -8,29 +8,27 @@ const sidebar = { label: 'Introduction', collapsible: false, collapsed: false, + link: { + type: "doc", + id: "index" + }, 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/', - }, ], }, { 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', ], }, { 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 57070b30666..71df36df209 100644 --- a/sdk/quickstart/javascript-dynamic.md +++ b/sdk/connect/javascript-dynamic.md @@ -1,10 +1,10 @@ --- -sidebar_label: Dynamic SDK integration +sidebar_label: Dynamic SDK description: Quickstart guide for using MetaMask SDK and Dynamic SDK. toc_max_heading_level: 2 --- -# 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: diff --git a/sdk/quickstart/javascript-wagmi.md b/sdk/connect/javascript-wagmi.md similarity index 98% rename from sdk/quickstart/javascript-wagmi.md rename to sdk/connect/javascript-wagmi.md index 3a4571b0fbc..4e4849565d8 100644 --- a/sdk/quickstart/javascript-wagmi.md +++ b/sdk/connect/javascript-wagmi.md @@ -1,9 +1,10 @@ --- description: Quickstart guide for using the SDK with a JavaScript and Wagmi dapp. toc_max_heading_level: 2 +sidebar_label: JavaScript + Wagmi (recommended) --- -# 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 98% rename from sdk/quickstart/javascript-web3auth.md rename to sdk/connect/javascript-web3auth.md index 937734fe845..400f1b0c375 100644 --- a/sdk/quickstart/javascript-web3auth.md +++ b/sdk/connect/javascript-web3auth.md @@ -1,10 +1,10 @@ --- -sidebar_label: Web3Auth SDK integration +sidebar_label: Web3Auth SDK description: Quickstart guide for using MetaMask SDK and Web3Auth SDK. toc_max_heading_level: 2 --- -# 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: diff --git a/sdk/quickstart/javascript.md b/sdk/connect/javascript.md similarity index 97% rename from sdk/quickstart/javascript.md rename to sdk/connect/javascript.md index 62e58947bd9..6603043b8af 100644 --- a/sdk/quickstart/javascript.md +++ b/sdk/connect/javascript.md @@ -1,11 +1,12 @@ --- description: Quickstart guide for using the SDK with a JavaScript dapp. +sidebar_label: JavaScript --- 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 98% rename from sdk/quickstart/react-native.md rename to sdk/connect/react-native.md index 7d4529e5f73..ec47a843072 100644 --- a/sdk/quickstart/react-native.md +++ b/sdk/connect/react-native.md @@ -1,11 +1,12 @@ --- description: Quickstart guide for using the SDK with a React Native dapp. +sidebar_label: React Native --- 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/introduction/welcome.md b/sdk/index.md similarity index 63% rename from sdk/introduction/welcome.md rename to sdk/index.md index 493462233ab..f1d6183b9ea 100644 --- a/sdk/introduction/welcome.md +++ b/sdk/index.md @@ -1,6 +1,5 @@ --- slug: / -sidebar_label: Welcome description: Introduction page for MetaMask SDK documentation. --- @@ -14,7 +13,7 @@ With the SDK, you can: - Handle transactions. - Interact with contracts. -[Get started with JavaScript and Wagmi.](quickstart/javascript-wagmi.md) +[Get started by connecting to MetaMask.](connect/javascript-wagmi.md) ## Why use the SDK? @@ -29,10 +28,10 @@ The benefits of using MetaMask SDK include the following: ## Where do I start? -You can get started quickly with the following dapp platforms: +You can get started by connecting to MetaMask 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) +- [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) diff --git a/wallet/how-to/connect.md b/wallet/how-to/connect.md index a0bf1f56566..ccb211b1e8d 100644 --- a/wallet/how-to/connect.md +++ b/wallet/how-to/connect.md @@ -1,10 +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 --- # Connect to MetaMask +:::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). +::: + You can connect your dapp to users' MetaMask wallets by detecting MetaMask in their browsers and connecting to their accounts. This page provides instructions for connecting to MetaMask using the wallet detection mechanism @@ -15,11 +20,7 @@ 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 From 088d266528d93e6bc88177d0e972b687f5abb7ba Mon Sep 17 00:00:00 2001 From: Alexandra Tran Date: Tue, 3 Jun 2025 19:17:14 -0700 Subject: [PATCH 2/5] add get started button --- src/pages/index.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 9c5ce534c37..7a60bf79bea 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -11,6 +11,11 @@ export default function Home(): JSX.Element { Date: Wed, 4 Jun 2025 14:11:10 -0700 Subject: [PATCH 3/5] updates to sdk intro + redirects --- sdk-sidebar.js | 7 +- sdk/connect/javascript-dynamic.md | 3 +- sdk/connect/javascript-wagmi.md | 1 + sdk/connect/javascript-web3auth.md | 3 +- sdk/connect/javascript.md | 1 + sdk/connect/react-native.md | 1 + sdk/index.md | 107 +++++++++++++----- sdk/introduction/supported-networks.md | 27 ----- .../supported-platforms.md | 0 .../CardList/CardListItem/index.tsx | 5 +- vercel.json | 16 +++ wallet-sidebar.js | 4 +- wallet/concepts/wallet-interoperability.md | 16 +-- .../{connect.md => connect-extension.md} | 11 +- wallet/index.md | 3 +- 15 files changed, 125 insertions(+), 80 deletions(-) delete mode 100644 sdk/introduction/supported-networks.md rename sdk/{introduction => reference}/supported-platforms.md (100%) rename wallet/how-to/{connect.md => connect-extension.md} (97%) diff --git a/sdk-sidebar.js b/sdk-sidebar.js index 1a2a6317717..cc3812a9b8f 100644 --- 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 index 71df36df209..c30c8230a40 100644 --- 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 index 4e4849565d8..e3f9c8e0b15 100644 --- 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 index 400f1b0c375..cbd3bfb3265 100644 --- 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 index 6603043b8af..21b09d185e0 100644 --- 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 index 5103156ffb3..2a0891974b4 100644 --- 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 index b80e406b382..ce5f9a8be1b 100644 --- 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) +

+