diff --git a/docusaurus.config.js b/docusaurus.config.js index 3fc3f5327ec..cf4d93db973 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -136,232 +136,132 @@ const config = { fromExtensions: ["html", "htm"], redirects: [ { - from: "/guide/", - to: "/wallet/", + from: ["/guide", "/guide/common-terms", "/guide/contributors", "/wallet/how-to/get-started-building", "/wallet/how-to/set-up-dev-environment", "/guide/create-dapp", "/guide/getting-started", "/wallet/category/get-started", "/wallet/get-started/set-up-dev-environment", "/wallet/how-to/get-started-building/set-up-dev-environment"], + to: "/wallet", }, { - from: "/guide/getting-started", - to: "/wallet/how-to/get-started-building/set-up-dev-environment", + from: "/wallet/how-to/connect", + to: "/wallet/quickstart/javascript", }, { - from: "/guide/common-terms", - to: "/wallet/", + from: "/wallet/category/how-to", + to: "/wallet/how-to", }, { - from: "/guide/initializing-dapps", - to: "/wallet/how-to/interact-with-smart-contracts", + from: ["/guide/mobile-getting-started", "/guide/site-compatibility-checklist", "/guide/mobile-best-practices", "/wallet/how-to/use-mobile", "/wallet/how-to/integrate-with-mobile", "/sdk"], + to: "/wallet/how-to/use-sdk", }, { - from: "/guide/accessing-accounts", - to: "/wallet/how-to/connect/access-accounts", + from: ["/wallet/get-started/detect-metamask", "/wallet/how-to/connect/detect-metamask", "/wallet/how-to/detect-metamask", "/wallet/how-to/discover-multiple-wallets"], + to: "/wallet/how-to/detect-wallet", }, { - from: "/guide/sending-transactions", - to: "/wallet/how-to/send-transactions", + from: ["/wallet/get-started/detect-network", "/wallet/how-to/connect/detect-network"], + to: "/wallet/how-to/detect-network", }, { - from: "/guide/ethereum-provider", - to: "/wallet/reference/provider-api", + from: ["/guide/accessing-accounts", "/wallet/how-to/connect/access-accounts", "/wallet/get-started/access-accounts"], + to: "/wallet/how-to/access-accounts", }, { - from: "/guide/provider-migration", - to: "/wallet/concepts/apis", - }, - { - from: "/guide/rpc-api", - to: "/wallet/reference/json-rpc-api", + from: "/guide/sending-transactions", + to: "/wallet/how-to/send-transactions", }, { from: "/guide/signing-data", to: "/wallet/how-to/sign-data", }, { - from: "/guide/registering-function-names", - to: "/wallet/how-to/display/method-names", + from: "/wallet/how-to/use-siwe", + to: "/wallet/how-to/sign-data/siwe", }, { - from: "/guide/registering-your-token", + from: ["/guide/registering-your-token", "/wallet/how-to/register-token"], to: "/wallet/how-to/display/tokens", }, { - from: "/guide/defining-your-icon", + from: ["/guide/registering-function-names", "/wallet/how-to/register-method-names"], + to: "/wallet/how-to/display/method-names", + }, + { + from: ["/guide/defining-your-icon", "/wallet/how-to/set-icon"], to: "/wallet/how-to/display/icon", }, { - from: "/guide/onboarding-library", - to: "/wallet/how-to/onboard-users", + from: "/wallet/how-to/request-permissions", + to: "/wallet/how-to/manage-permissions", }, { from: "/guide/metamask-extension-provider", to: "/wallet/how-to/access-provider", }, { - from: "/guide/mobile-getting-started", - to: "/wallet/how-to/connect/set-up-sdk", - }, - { - from: "/guide/site-compatibility-checklist", - to: "/wallet/how-to/connect/set-up-sdk", - }, - { - from: "/guide/mobile-best-practices", - to: "/wallet/how-to/connect/set-up-sdk", - }, - { - from: "/guide/snaps", - to: "/snaps/", - }, - { - from: "/guide/snaps-development-guide", - to: "/snaps/how-to/develop-a-snap", + from: "/guide/initializing-dapps", + to: "/wallet/how-to/interact-with-smart-contracts", }, { - from: "/guide/snaps-concepts", - to: "/snaps/concepts", + from: "/guide/ethereum-provider", + to: "/wallet/reference/provider-api", }, { - from: ["/guide/snaps-rpc-api", "/snaps/reference/rpc-api"], - to: "/snaps/reference/snaps-api", + from: ["/guide/onboarding-library", "/wallet/how-to/use-onboarding-library"], + to: "/wallet/how-to/onboard-users", }, { - from: "/guide/snaps-permissions", - to: "/snaps/how-to/request-permissions", + from: ["/wallet/get-started/run-development-network", "/wallet/how-to/get-started-building/run-devnet"], + to: "/wallet/how-to/run-devnet", }, { - from: ["/guide/snaps-exports", "/snaps/reference/exports"], - to: "/snaps/reference/entry-points", + from: "/wallet/how-to/get-started-building/secure-dapp", + to: "/wallet/how-to/secure-dapp", }, { - from: "/guide/snaps-patching-dependencies", - to: "/snaps/how-to/troubleshoot", + from: "/wallet/category/concepts", + to: "/wallet/concepts", }, { - from: "/guide/create-dapp", - to: "/wallet/how-to/get-started-building/set-up-dev-environment", + from: ["/guide/provider-migration", "/wallet/concepts/provider-api", "/wallet/concepts/rpc-api", "/wallet/how-to/migrate-api"], + to: "/wallet/concepts/apis", }, { - from: "/guide/contributors", - to: "/wallet/", + from: "/wallet/category/tutorials", + to: "/wallet/tutorials", }, { from: "/wallet/tutorials/simple-react-dapp", to: "/wallet/tutorials/react-dapp-local-state", }, - { - from: "/wallet/category/how-to", - to: "/wallet/how-to", - }, - { - from: "/wallet/category/concepts", - to: "/wallet/concepts", - }, - { - from: "/wallet/category/tutorials", - to: "/wallet/tutorials", - }, { from: "/wallet/category/reference", to: "/wallet/reference", }, { - from: "/snaps/category/get-started", - to: "/snaps/get-started", - }, - { - from: "/snaps/category/how-to", - to: "/snaps/how-to", - }, - { - from: "/snaps/category/concepts", - to: "/snaps/concepts", - }, - { - from: "/snaps/category/tutorials", - to: "/snaps/tutorials", - }, - { - from: "/snaps/category/reference", - to: "/snaps/reference", - }, - { - from: "/wallet/category/get-started", - to: "/wallet/how-to/get-started-building", - }, - { - from: "/wallet/get-started/set-up-dev-environment", - to: "/wallet/how-to/get-started-building/set-up-dev-environment", - }, - { - from: "/wallet/get-started/run-development-network", - to: "/wallet/how-to/get-started-building/run-devnet", - }, - { - from: "/wallet/how-to/secure-dapp", - to: "/wallet/how-to/get-started-building/secure-dapp", - }, - { - from: ["/wallet/get-started/detect-metamask", "/wallet/how-to/connect/detect-metamask"], - to: "/wallet/how-to/connect/detect-wallet/metamask", - }, - { - from: "/wallet/get-started/detect-network", - to: "/wallet/how-to/connect/detect-network", - }, - { - from: "/wallet/get-started/access-accounts", - to: "/wallet/how-to/connect/access-accounts", - }, - { - from: "/wallet/how-to/use-siwe", - to: "/wallet/how-to/sign-data/siwe", - }, - { - from: "/wallet/how-to/use-mobile", - to: "/wallet/how-to/connect/set-up-sdk", - }, - { - from: "/wallet/how-to/use-onboarding-library", - to: "/wallet/how-to/onboard-users", - }, - { - from: "/wallet/how-to/register-token", - to: "/wallet/how-to/display/tokens", - }, - { - from: "/wallet/how-to/register-method-names", - to: "/wallet/how-to/display/method-names", - }, - { - from: "/wallet/how-to/set-icon", - to: "/wallet/how-to/display/icon", - }, - { - from: "/wallet/concepts/provider-api", - to: "/wallet/concepts/apis", + from: ["/guide/rpc-api", "/wallet/reference/rpc-api"], + to: "/wallet/reference/json-rpc-api", }, { - from: "/wallet/concepts/rpc-api", - to: "/wallet/concepts/apis", + from: "/guide/snaps", + to: "/snaps", }, { - from: "/wallet/how-to/integrate-with-mobile", - to: "/wallet/how-to/connect/set-up-sdk", + from: "/snaps/category/get-started", + to: "/snaps/get-started", }, { - from: "/wallet/how-to/migrate-api", - to: "/wallet/concepts/apis", + from: "/snaps/get-started/install-snaps", + to: "/snaps/get-started/install-flask", }, { - from: "/sdk", - to: "/wallet/how-to/connect/set-up-sdk", + from: "/snaps/category/how-to", + to: "/snaps/how-to", }, { - from: "/wallet/reference/rpc-api", - to: "/wallet/reference/json-rpc-api", + from: "/guide/snaps-development-guide", + to: "/snaps/how-to/develop-a-snap", }, { - from: "/wallet/how-to/request-permissions", - to: "/wallet/how-to/manage-permissions", + from: "/guide/snaps-permissions", + to: "/snaps/how-to/request-permissions", }, { from: "/snaps/tutorials/custom-evm-accounts", @@ -372,30 +272,42 @@ const config = { to: "/snaps/how-to/use-3rd-party-snaps", }, { - from: "/snaps/get-started/install-snaps", - to: "/snaps/get-started/install-flask", + from: "/guide/snaps-patching-dependencies", + to: "/snaps/how-to/troubleshoot", + }, + { + from: ["/guide/snaps-concepts", "/snaps/category/concepts", "/snaps/concepts/lifecycle", "/snaps/concepts/user-interface"], + to: "/snaps/concepts/overview", }, { from: "/snaps/concepts/anatomy", to: "/snaps/concepts/files", }, { - from: ["/snaps/concepts/lifecycle", "/snaps/concepts/user-interface"], - to: "/snaps/concepts/overview", + from: "/snaps/category/tutorials", + to: "/snaps/tutorials", }, { - from: "/wallet/how-to/discover-multiple-wallets", - to: "/wallet/how-to/connect/detect-wallet/multiple-wallets", + from: "/snaps/category/reference", + to: "/snaps/reference", + }, + { + from: ["/guide/snaps-rpc-api", "/snaps/reference/rpc-api"], + to: "/snaps/reference/snaps-api", }, + { + from: ["/guide/snaps-exports", "/snaps/reference/exports"], + to: "/snaps/reference/entry-points", + } ].reduce((acc, item) => { acc.push(item); acc.push({ from: item.from + ".html", to: item.to }); return acc; }, []), createRedirects(existingPath) { - if (existingPath.includes("/connect/set-up-sdk")) { + if (existingPath.includes("/use-sdk")) { return [ - existingPath.replace("/connect/set-up-sdk", "/use-sdk"), + existingPath.replace("/use-sdk", "/connect/set-up-sdk"), ]; } return undefined; @@ -415,10 +327,6 @@ const config = { themeConfig: /** @type {import('@docusaurus/preset-classic').ThemeConfig} */ ({ - // Metadata array here for the open graph image tag - metadata: [ - { name: 'og:image', content: '/img/metamaskog.jpeg' }, - ], navbar: { title: " │ ‎ Documentation", logo: { @@ -433,7 +341,7 @@ const config = { label: "Wallet", }, { - to: "/wallet/how-to/connect/set-up-sdk", + to: "/wallet/how-to/use-sdk", label: "SDK", }, { diff --git a/src/components/CardList/CardListItem/index.tsx b/src/components/CardList/CardListItem/index.tsx index 4e381482232..71b4164c47a 100644 --- a/src/components/CardList/CardListItem/index.tsx +++ b/src/components/CardList/CardListItem/index.tsx @@ -19,7 +19,7 @@ export default function CardListItem({ item }: CardListItemProps): JSX.Element { const cardContent = ( <> {item.title && ( -

+

{item.icon && ( )} diff --git a/src/components/SnapsSection.tsx b/src/components/SnapsSection.tsx index 5ffd165f1c1..6cff9906830 100644 --- a/src/components/SnapsSection.tsx +++ b/src/components/SnapsSection.tsx @@ -3,7 +3,7 @@ import Card, { type CardItem } from "@site/src/components/Card"; const CardList: CardItem[] = [ { - title: "🏁 Get started with Snaps", + title: "🏁 Snaps quickstart", link: "/snaps/get-started/quickstart", description: (<> Get started quickly by creating and customizing a simple Snap, using the Snaps template built @@ -19,10 +19,10 @@ const CardList: CardItem[] = [ ), }, { - title: "🌐 Snaps JSON-RPC API", - link: "/snaps/reference/rpc-api", + title: "🌐 Snaps API", + link: "/snaps/reference/snaps-api", description: (<> - Use the Snaps JSON-RPC API to modify the functionality of MetaMask and communicate between dapps and Snaps. + Use the Snaps API to modify the functionality of MetaMask and communicate between dapps and Snaps. ), }, ]; diff --git a/src/components/WalletSection.tsx b/src/components/WalletSection.tsx index d20b9211f0f..5aafe430d18 100644 --- a/src/components/WalletSection.tsx +++ b/src/components/WalletSection.tsx @@ -3,24 +3,24 @@ import Card, { type CardItem } from "@site/src/components/Card"; const CardList: CardItem[] = [ { - title: "🏁 Get started building a dapp", - link: "/wallet/how-to/get-started-building", + title: "🏁 Wallet quickstart", + link: "/wallet/quickstart", description: (<> - If you're new to dapp development, get started building a new dapp from scratch to integrate with MetaMask. + Get started quickly by integrating your existing JavaScript or React dapp with the MetaMask wallet. ), }, { - title: "↔️ Connect your dapp to MetaMask", - link: "/wallet/how-to/connect", + title: "⚙️ Wallet tutorials", + link: "/wallet/tutorials", description: (<> - Connect your dapp to MetaMask by setting up MetaMask SDK and accessing users' Ethereum accounts. + Follow the step-by-step tutorials to create a simple React dapp and integrate it with MetaMask. ), }, { - title: "🛠️ Use advanced MetaMask features", - link: "/wallet/how-to", + title: "🌐 MetaMask JSON-RPC API", + link: "/wallet/reference/json-rpc-api", description: (<> - Optimize your dapp for MetaMask by using MetaMask-specific API methods, such as signing typed data. + Use the MetaMask JSON-RPC API to interact with your users' Ethereum accounts. ), }, ]; diff --git a/src/css/custom.css b/src/css/custom.css index fdd4f9ccf9e..29a27350ae5 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -95,6 +95,14 @@ h4 { font-weight: 500; } +.navbar__brand:hover, .navbar__brand:active { + color: var(--ifm-navbar-link-color); +} + +[data-theme="dark"] .navbar__brand:hover, .navbar__brand:active { + color: var(--ifm-navbar-link-color); +} + .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); diff --git a/wallet-sidebar.js b/wallet-sidebar.js index 1314093f7b9..f8223787062 100644 --- a/wallet-sidebar.js +++ b/wallet-sidebar.js @@ -4,6 +4,12 @@ const sidebar = { walletSidebar: [ "index", + { + type: "category", + label: "Quickstart", + link: { type: "generated-index", slug: "/quickstart" }, + items: [{ type: "autogenerated", dirName: "quickstart" }], + }, { type: "category", label: "How to", diff --git a/wallet/concepts/apis.md b/wallet/concepts/apis.md index ed03466248a..a4e8bde4a53 100644 --- a/wallet/concepts/apis.md +++ b/wallet/concepts/apis.md @@ -1,5 +1,5 @@ --- -sidebar_position: 3 +sidebar_position: 2 description: Learn about the MetaMask Ethereum provider API. --- @@ -43,15 +43,6 @@ The MetaMask Ethereum provider API contains the following: View the [provider API reference](../reference/provider-api.md) for all the provider properties, methods, and events. -:::tip Use MetaMask SDK with the provider API -You can call the provider API from a dapp without [MetaMask SDK](sdk/index.md) installed, but we -recommend using the SDK to enable users to easily connect to the MetaMask browser extension and -MetaMask Mobile. -The SDK supports multiple dapp platforms including mobile and gaming dapps. - -Get started by [setting up the SDK](../how-to/connect/set-up-sdk/index.md). -::: - ## JSON-RPC API MetaMask uses the [`window.ethereum.request(args)`](../reference/provider-api.md#windowethereumrequestargs) diff --git a/wallet/concepts/convenience-libraries.md b/wallet/concepts/convenience-libraries.md index 94aebf721ff..e4e903f3ad0 100644 --- a/wallet/concepts/convenience-libraries.md +++ b/wallet/concepts/convenience-libraries.md @@ -17,14 +17,11 @@ some developers use a convenience library for interacting with the provider, suc [Embark](https://framework.embarklabs.io/). You can refer to those tools' documentation to use them. -:::tip Use MetaMask SDK -We recommend using [MetaMask SDK](sdk/index.md), which provides a reliable, secure, and seamless -connection from your dapp to the MetaMask wallet. +You can [use MetaMask SDK](../how-to/use-sdk/index.md), which provides a reliable, secure, and +seamless connection from your dapp to MetaMask. It onboards users smoothly from multiple dapp platforms using the MetaMask browser extension or MetaMask Mobile, and your dapp can call any [provider API method](../reference/provider-api.md) with the SDK installed. -Get started by [setting up the SDK](../how-to/connect/set-up-sdk/index.md). -::: You can also [use Web3-Onboard with MetaMask SDK](../how-to/use-3rd-party-integrations/web3-onboard.md) in your JavaScript dapp. diff --git a/wallet/concepts/sdk/android.md b/wallet/concepts/sdk/android.md index 9b4fd4ae362..d6ed5282fb9 100644 --- a/wallet/concepts/sdk/android.md +++ b/wallet/concepts/sdk/android.md @@ -13,7 +13,7 @@ The [architecture](#architecture) and [connection flow](#connection-flow) of the Android SDK differs from the other SDK platforms. :::tip Get started -- Get started by [setting up the SDK in your Android dapp](../../how-to/connect/set-up-sdk/mobile/android.md). +- Get started by [setting up the SDK in your Android dapp](../../how-to/use-sdk/mobile/android.md). - See the [example Android dapp](https://github.com/MetaMask/metamask-android-sdk/tree/main/app) in the Android SDK GitHub repository for advanced use cases. ::: diff --git a/wallet/concepts/sdk/index.md b/wallet/concepts/sdk/index.md index 91909840538..28754fe1764 100644 --- a/wallet/concepts/sdk/index.md +++ b/wallet/concepts/sdk/index.md @@ -1,6 +1,6 @@ --- description: Learn about MetaMask SDK. -sidebar_position: 2 +sidebar_position: 3 tags: - JavaScript SDK - iOS SDK @@ -12,32 +12,32 @@ tags: MetaMask SDK is a library that provides a reliable, secure, and seamless connection from your dapp to the MetaMask browser extension and MetaMask Mobile. -You can install the SDK in existing dapps, and call any [provider API](../apis.md) methods from -your dapp. - -:::tip Get started -MetaMask SDK is the recommended method of integrating your dapp with MetaMask. -You can get started by [setting up the SDK](../../how-to/connect/set-up-sdk/index.md). -::: +You can install the SDK in existing dapps, and call any +[provider API methods](../../reference/provider-api.md) from your dapp. +Get started [using the SDK](../../how-to/use-sdk/index.md). ## Benefits of MetaMask SDK -Before MetaMask SDK, there were three ways to connect a dapp to a user's MetaMask wallet: - -1. Connect from a web dapp in a desktop browser to the MetaMask browser extension -2. Connect from a web dapp in MetaMask Mobile's in-app browser to MetaMask Mobile -3. Use third-party libraries to connect a mobile dapp to MetaMask Mobile - -With MetaMask SDK, there are more ways to connect: - -1. Connect from a web dapp in a desktop browser to the MetaMask browser extension or to MetaMask Mobile -2. Connect from a web dapp in a mobile browser to MetaMask Mobile -3. Connect from desktop, mobile, and gaming dapps to MetaMask Mobile - MetaMask SDK enables your dapp to provide a seamless user experience for MetaMask users, from multiple dapp platforms, without relying on third-party libraries. -Moreover, the SDK uses the [Ethereum provider](../apis.md#ethereum-provider-api) that developers are -already used to, so existing dapps work out of the box with the SDK. +By integrating your dapp using the SDK, millions of MetaMask Mobile users can connect to their +preferred MetaMask client. +The SDK uses the [Ethereum provider](../apis.md#ethereum-provider-api), so existing dapps work out +of the box with the SDK. + +The following table outlines some of the features available when you integrate your dapp with +MetaMask using the SDK. +Most of these features are not available if you only integrate your dapp directly using the MetaMask +provider API. + +| Feature | MetaMask provider API only | MetaMask SDK | +|----------------------------------------------------------------------------------------------------------|:--------------------------:|:------------:| +| Connect from a web dapp to the MetaMask extension | ✅ | ✅ | +| Connect from a web dapp to MetaMask Mobile | ❌ | ✅ | +| Connect from desktop, mobile, and gaming dapps to MetaMask Mobile | ❌ | ✅ | +| Use custom RPC methods such as [`connectAndSign`](../../how-to/sign-data/connect-and-sign.md) | ❌ | ✅ | +| [Batch multiple RPC requests](../../how-to/batch-json-rpc-requests.md) | ❌ | ✅ | +| [Make read-only requests](../../how-to/use-3rd-party-integrations/js-infura-api.md) using the Infura API | ❌ | ✅ | ## User experience @@ -58,7 +58,7 @@ to MetaMask Mobile using a QR code.

:::tip Get started -- Get started by [setting up the SDK in your web dapp](../../how-to/connect/set-up-sdk/javascript/index.md). +- Get started by [setting up the SDK in your web dapp](../../how-to/use-sdk/javascript/index.md). - See the [example JavaScript dapps](https://github.com/MetaMask/metamask-sdk/tree/main/packages/examples) in the JavaScript SDK GitHub repository for advanced use cases. ::: @@ -77,7 +77,7 @@ This happens for all actions that need user approval.

:::tip Get started -- Get started by [setting up the SDK in your web dapp](../../how-to/connect/set-up-sdk/javascript/index.md). +- Get started by [setting up the SDK in your web dapp](../../how-to/use-sdk/javascript/index.md). - See the [example JavaScript dapps](https://github.com/MetaMask/metamask-sdk/tree/main/packages/examples) in the JavaScript SDK GitHub repository for advanced use cases. ::: @@ -96,7 +96,7 @@ This happens for all actions that need user approval.

:::tip Get started -- Get started by [setting up the SDK in your iOS dapp](../../how-to/connect/set-up-sdk/mobile/ios.md). +- Get started by [setting up the SDK in your iOS dapp](../../how-to/use-sdk/mobile/ios.md). - See the [example iOS dapp](https://github.com/MetaMask/metamask-ios-sdk) in the iOS SDK GitHub repository for advanced use cases. ::: @@ -115,7 +115,7 @@ This happens for all actions that need user approval.

:::tip Get started -- Get started by [setting up the SDK in your Android dapp](../../how-to/connect/set-up-sdk/mobile/android.md). +- Get started by [setting up the SDK in your Android dapp](../../how-to/use-sdk/mobile/android.md). - See the [example Android dapp](https://github.com/MetaMask/metamask-android-sdk/tree/main/app) in the Android SDK GitHub repository and the [Android SDK architecture](android.md) for more information. ::: @@ -132,7 +132,7 @@ scan with their MetaMask Mobile app.

:::tip Get started -- Get started by [setting up the SDK in your Node.js dapp](../../how-to/connect/set-up-sdk/javascript/nodejs.md). +- Get started by [setting up the SDK in your Node.js dapp](../../how-to/use-sdk/javascript/nodejs.md). - See the [example Node.js dapp](https://github.com/MetaMask/metamask-sdk/tree/main/packages/examples/nodejs) in the Node.js SDK GitHub repository for advanced use cases. ::: @@ -150,7 +150,7 @@ It also supports deeplinking on mobile platforms, as demonstrated in the followi

:::tip Get started -- Get started by [setting up the SDK in your Unity game](../../how-to/connect/set-up-sdk/gaming/unity.md). +- Get started by [setting up the SDK in your Unity game](../../how-to/use-sdk/gaming/unity.md). - See the [Unity demo game with the SDK installed](https://assetstore.unity.com/packages/decentralization/demo-game-dragon-crasher-with-metamask-sdk-infura-and-truffle-249789) for advanced use cases. ::: diff --git a/wallet/concepts/wallet-interoperabilty.md b/wallet/concepts/wallet-interoperabilty.md index 1b9deec67b4..033d0c5778b 100644 --- a/wallet/concepts/wallet-interoperabilty.md +++ b/wallet/concepts/wallet-interoperabilty.md @@ -18,7 +18,7 @@ The following is a visual demo of the user experience, showing the data provided

-Learn [how to detect multiple wallets](../how-to/connect/detect-wallet/metamask.md#detect-multiple-wallets) +Learn [how to detect multiple wallets](../how-to/detect-wallet/metamask.md#detect-multiple-wallets) and see the [EIP-6963 Vite React + TypeScript demo](https://github.com/MetaMask/vite-react-ts-eip-6963/tree/main) for more information. @@ -27,7 +27,7 @@ for more information. The following third-party libraries support EIP-6963: -- [MetaMask SDK](../how-to/connect/set-up-sdk/javascript/index.md) +- [MetaMask SDK](../how-to/use-sdk/javascript/index.md) :::note MetaMask SDK does not support connecting to non-MetaMask wallets via EIP-6963. @@ -43,7 +43,7 @@ The following third-party libraries support EIP-6963: ### MetaMask SDK -The [MetaMask JavaScript SDK](../how-to/connect/set-up-sdk/javascript/index.md) automatically checks +The [MetaMask JavaScript SDK](../how-to/use-sdk/javascript/index.md) automatically checks for the presence of the MetaMask extension via EIP-6963. This eliminates the need for manual configuration or detection methods, simplifying the initial setup process for both developers and users. @@ -74,6 +74,6 @@ See the [list of wallets that support EIP-6963](https://github.com/WalletConnect ## Backwards compatibility Dapps that do not support EIP-6963 can still -[detect MetaMask using the `window.ethereum` provider](../how-to/connect/detect-wallet/metamask.md). +[detect MetaMask using the `window.ethereum` provider](../how-to/detect-wallet/metamask.md). However, we recommend adding support to improve the user experience for multiple installed wallets. Read more about [EIP-6963 backwards compatibility](https://eips.ethereum.org/EIPS/eip-6963#backwards-compatibility). diff --git a/wallet/how-to/connect/access-accounts.md b/wallet/how-to/access-accounts.md similarity index 90% rename from wallet/how-to/connect/access-accounts.md rename to wallet/how-to/access-accounts.md index 915f37da6a1..8303e8da0cd 100644 --- a/wallet/how-to/connect/access-accounts.md +++ b/wallet/how-to/access-accounts.md @@ -6,14 +6,14 @@ sidebar_position: 4 # Access a user's accounts User accounts are used in a variety of contexts in Ethereum, including as identifiers and for -[signing transactions](../sign-data/index.md). +[signing transactions](sign-data/index.md). To request a signature from a user or have a user approve a transaction, your dapp can access the user's accounts using the [`eth_requestAccounts`](/wallet/reference/eth_requestaccounts) RPC method. :::info note `eth_requestAccounts` internally calls [`wallet_requestPermissions`](/wallet/reference/wallet_requestPermissions) -to [request permission](../manage-permissions.md) to call the restricted +to [request permission](manage-permissions.md) to call the restricted [`eth_accounts`](/wallet/reference/eth_accounts) method. ::: @@ -83,11 +83,10 @@ async function getAccount() { Use the [`eth_accounts`](/wallet/reference/eth_accounts) RPC method to handle user accounts. -Listen to the [`accountsChanged`](../../reference/provider-api.md#accountschanged) provider event to +Listen to the [`accountsChanged`](../reference/provider-api.md#accountschanged) provider event to be notified when the user changes accounts. -In the [example project script](../get-started-building/set-up-dev-environment.md#example), the following code handles user -accounts and detects when the user changes accounts: +The following code handles user accounts and detects when the user changes accounts: ```javascript title="index.js" let currentAccount = null; @@ -135,4 +134,4 @@ This is useful as a method for users to log out (or disconnect) from your dapp. You can then use [`wallet_getPermissions`](/wallet/reference/wallet_getPermissions) to determine whether the user is connected or disconnected to your dapp. -See [how to revoke permissions](../manage-permissions.md#revoke-permissions-example) for an example. +See [how to revoke permissions](manage-permissions.md#revoke-permissions-example) for an example. diff --git a/wallet/how-to/access-provider.md b/wallet/how-to/access-provider.md index 0845d83292c..c808bc2a3db 100644 --- a/wallet/how-to/access-provider.md +++ b/wallet/how-to/access-provider.md @@ -1,6 +1,6 @@ --- description: Access a user's MetaMask provider using metamask-extension-provider. -sidebar_position: 10 +sidebar_position: 9 --- # Access a user's MetaMask provider diff --git a/wallet/how-to/add-network.md b/wallet/how-to/add-network.md index 52bdf6044ad..1d2fc394f80 100644 --- a/wallet/how-to/add-network.md +++ b/wallet/how-to/add-network.md @@ -1,6 +1,6 @@ --- description: Prompt a user to add or switch to an Ethereum network. -sidebar_position: 8 +sidebar_position: 7 --- # Add a network diff --git a/wallet/how-to/batch-json-rpc-requests.md b/wallet/how-to/batch-json-rpc-requests.md index 2d8eaf8d308..2b1b7c30079 100644 --- a/wallet/how-to/batch-json-rpc-requests.md +++ b/wallet/how-to/batch-json-rpc-requests.md @@ -27,7 +27,7 @@ enhancing the user experience and operational efficiency. ## Prerequisites -[Set up MetaMask SDK](../how-to/connect/set-up-sdk/javascript/index.md) in your JavaScript dapp. +[Set up MetaMask SDK](../how-to/use-sdk/javascript/index.md) in your JavaScript dapp. ## Use the metamask_batch method diff --git a/wallet/how-to/connect/_category_.json b/wallet/how-to/connect/_category_.json deleted file mode 100644 index f100d30a81e..00000000000 --- a/wallet/how-to/connect/_category_.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "label": "Connect to MetaMask", - "position": 3, - "link": { - "type": "generated-index", - "slug": "how-to/connect", - "description": "Once you have your dapp set up, perform these functions to connect to MetaMask." - } -} diff --git a/wallet/how-to/connect/detect-network.md b/wallet/how-to/detect-network.md similarity index 94% rename from wallet/how-to/connect/detect-network.md rename to wallet/how-to/detect-network.md index 2fc76e16176..0c0b4e24994 100644 --- a/wallet/how-to/connect/detect-network.md +++ b/wallet/how-to/detect-network.md @@ -10,7 +10,7 @@ to the currently connected network. Use the [`eth_chainId`](/wallet/reference/eth_chainId) RPC method to detect the chain ID of the user's current network. -Listen to the [`chainChanged`](../../reference/provider-api.md#chainchanged) provider event to +Listen to the [`chainChanged`](../reference/provider-api.md#chainchanged) provider event to detect when the user changes networks. For example, the following code detects a user's network and when the user changes networks: diff --git a/wallet/how-to/connect/detect-wallet/_category_.json b/wallet/how-to/detect-wallet/_category_.json similarity index 69% rename from wallet/how-to/connect/detect-wallet/_category_.json rename to wallet/how-to/detect-wallet/_category_.json index 6b591eb4574..b1f10250308 100644 --- a/wallet/how-to/connect/detect-wallet/_category_.json +++ b/wallet/how-to/detect-wallet/_category_.json @@ -3,6 +3,6 @@ "position": 2, "link": { "type": "generated-index", - "slug": "how-to/connect/detect-wallet" + "slug": "how-to/detect-wallet" } } diff --git a/wallet/how-to/connect/detect-wallet/metamask.md b/wallet/how-to/detect-wallet/metamask.md similarity index 100% rename from wallet/how-to/connect/detect-wallet/metamask.md rename to wallet/how-to/detect-wallet/metamask.md diff --git a/wallet/how-to/connect/detect-wallet/multiple-wallets.md b/wallet/how-to/detect-wallet/multiple-wallets.md similarity index 98% rename from wallet/how-to/connect/detect-wallet/multiple-wallets.md rename to wallet/how-to/detect-wallet/multiple-wallets.md index 4c71ab4c730..db21cb6f0b9 100644 --- a/wallet/how-to/connect/detect-wallet/multiple-wallets.md +++ b/wallet/how-to/detect-wallet/multiple-wallets.md @@ -9,7 +9,7 @@ sidebar_position: 2 for multiple wallets, shifting from relying solely on [`window.ethereum`](metamask.md) for wallet detection. If a user has multiple wallet browser extensions installed, your web dapp can support -[wallet interoperability](../../../concepts/wallet-interoperabilty.md) by adding support for +[wallet interoperability](../../concepts/wallet-interoperabilty.md) by adding support for EIP-6963, which enables your dapp to detect and connect to multiple installed wallets. You can [use third-party libraries](#use-third-party-libraries) or directly [implement EIP-6963](#implement-eip-6963) in your dapp. @@ -18,7 +18,7 @@ You can [use third-party libraries](#use-third-party-libraries) or directly You can add support for EIP-6963 by using the following third-party libraries: -- [MetaMask SDK](../set-up-sdk/javascript/index.md) +- [MetaMask SDK](../use-sdk/javascript/index.md) :::note MetaMask SDK does not support connecting to non-MetaMask wallets via EIP-6963. diff --git a/wallet/how-to/display/_category_.json b/wallet/how-to/display/_category_.json index ce70ada5944..548053a5c09 100644 --- a/wallet/how-to/display/_category_.json +++ b/wallet/how-to/display/_category_.json @@ -1,6 +1,6 @@ { "label": "Display in MetaMask", - "position": 5, + "position": 6, "link": { "type": "generated-index", "slug": "how-to/display", diff --git a/wallet/how-to/display/custom-modals.md b/wallet/how-to/display/custom-modals.md index 8c654a94237..71c3a3921d7 100644 --- a/wallet/how-to/display/custom-modals.md +++ b/wallet/how-to/display/custom-modals.md @@ -18,7 +18,7 @@ other web frameworks such as Vue.js or pure HTML/JavaScript. ## Prerequisites MetaMask SDK set up in your JavaScript dapp. -This example uses the [MetaMask React SDK](../connect/set-up-sdk/javascript/react/index.md). +This example uses the [MetaMask React SDK](../use-sdk/javascript/react/index.md). ## Steps @@ -40,7 +40,7 @@ export default CustomModal; ### 2. Implement custom modal logic -When initializing [`MetaMaskProvider`](../connect/set-up-sdk/javascript/react/index.md#3-wrap-your-project-with-metamaskprovider), +When initializing [`MetaMaskProvider`](../use-sdk/javascript/react/index.md#3-wrap-your-project-with-metamaskprovider), use the [`modals`](../../reference/sdk-js-options.md#modals) SDK option to set up custom behavior for scenarios such as when MetaMask isn't installed. For example: diff --git a/wallet/how-to/display/tokens.md b/wallet/how-to/display/tokens.md index b16e10f54ac..36e37bd5714 100644 --- a/wallet/how-to/display/tokens.md +++ b/wallet/how-to/display/tokens.md @@ -68,7 +68,7 @@ try { :::note If the chain ID of your token doesn't match the user's network, they can get unexpected results. -We recommend [detecting the user's network chain ID](../connect/detect-network.md) and +We recommend [detecting the user's network chain ID](../detect-network.md) and [prompting them to switch chains](/wallet/reference/wallet_switchethereumchain), if necessary. ::: diff --git a/wallet/how-to/get-started-building/_category_.json b/wallet/how-to/get-started-building/_category_.json deleted file mode 100644 index b036fa09b43..00000000000 --- a/wallet/how-to/get-started-building/_category_.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "label": "Get started building a dapp", - "position": 1, - "link": { - "type": "generated-index", - "slug": "how-to/get-started-building", - "description": "Get started building a new dapp to integrate with MetaMask." - } -} diff --git a/wallet/how-to/get-started-building/set-up-dev-environment.md b/wallet/how-to/get-started-building/set-up-dev-environment.md deleted file mode 100644 index f9b2a6fa4d2..00000000000 --- a/wallet/how-to/get-started-building/set-up-dev-environment.md +++ /dev/null @@ -1,165 +0,0 @@ ---- -description: Set up a new simple dapp to integrate with MetaMask. -sidebar_position: 1 ---- - -# Set up your development environment - -You can easily set up a simple dapp to integrate with MetaMask. -For a full end-to-end tutorial using [Vite](https://v3.vitejs.dev/guide/), see the -[Create a simple React dapp](../../tutorials/react-dapp-local-state.md) tutorial. - -## Prerequisites - -- [MetaMask](https://metamask.io/) installed in the browser of your choice on your development - machine. - We recommend [running a development network](run-devnet.md) on MetaMask when - developing a dapp. - -- A text editor of your choice, such as [VS Code](https://code.visualstudio.com/). - You can install the [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) - extension for VS Code to easily launch a local development server for your dapp. - -- A module bundler, such as [Webpack](https://github.com/webpack/webpack). - -- [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm). - -## Set up a new project - -Create a project directory with the following structure: - -```text -simple-dapp/ -├─ src/ -│ ├─ index.js -├─ dist/ -│ ├─ index.html -``` - -For any Ethereum dapp to work, your project script `index.js` must: - -- [Detect the Ethereum provider.](../connect/detect-wallet/metamask.md) -- [Detect which Ethereum network the user is connected to.](../connect/detect-network.md) -- [Access the user's Ethereum accounts.](../connect/access-accounts.md) - -:::caution important -If you import any modules into your project, such as -[`@metamask/detect-provider`](https://github.com/MetaMask/detect-provider), use a bundler such as -[Webpack](https://github.com/webpack/webpack) to compile the modules and create an output script -`dist/main.js`. -See [Webpack's Getting Started guide](https://webpack.js.org/guides/getting-started/) for more information. -::: - -:::tip -We also recommend [setting up MetaMask SDK](../connect/set-up-sdk/index.md) to enable a reliable, secure, -and seamless connection from your dapp to the MetaMask browser extension and MetaMask Mobile. -::: - -## Example - -The following is an example simple dapp script and HTML file: - - - -# JavaScript - -```javascript title="index.js" -/*****************************************/ -/* Detect the MetaMask Ethereum provider */ -/*****************************************/ - -import detectEthereumProvider from '@metamask/detect-provider'; - -const provider = await detectEthereumProvider(); - -if (provider) { - startApp(provider); -} else { - console.log('Please install MetaMask!'); -} - -function startApp(provider) { - if (provider !== window.ethereum) { - console.error('Do you have multiple wallets installed?'); - } -} - -/**********************************************************/ -/* Handle chain (network) and chainChanged (per EIP-1193) */ -/**********************************************************/ - -const chainId = await window.ethereum.request({ method: 'eth_chainId' }); - -window.ethereum.on('chainChanged', handleChainChanged); - -function handleChainChanged(chainId) { - window.location.reload(); -} - -/***********************************************************/ -/* Handle user accounts and accountsChanged (per EIP-1193) */ -/***********************************************************/ - -let currentAccount = null; -window.ethereum.request({ method: 'eth_accounts' }) - .then(handleAccountsChanged) - .catch((err) => { - console.error(err); - }); - -window.ethereum.on('accountsChanged', handleAccountsChanged); - -function handleAccountsChanged(accounts) { - if (accounts.length === 0) { - console.log('Please connect to MetaMask.'); - } else if (accounts[0] !== currentAccount) { - currentAccount = accounts[0]; - showAccount.innerHTML = currentAccount; - } -} - -/*********************************************/ -/* Access the user's accounts (per EIP-1102) */ -/*********************************************/ - -const ethereumButton = document.querySelector('.enableEthereumButton'); -const showAccount = document.querySelector('.showAccount'); - -ethereumButton.addEventListener('click', () => { - getAccount(); -}); - -async function getAccount() { - const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' }) - .catch((err) => { - if (err.code === 4001) { - console.log('Please connect to MetaMask.'); - } else { - console.error(err); - } - }); - const account = accounts[0]; - showAccount.innerHTML = account; -} -``` - -# HTML - -```html title="index.html" - - - - - - Simple dapp - - - - - -

Account:

- - -``` - - diff --git a/wallet/how-to/interact-with-smart-contracts/index.md b/wallet/how-to/interact-with-smart-contracts/index.md index 39e61d92309..c5674f1cec0 100644 --- a/wallet/how-to/interact-with-smart-contracts/index.md +++ b/wallet/how-to/interact-with-smart-contracts/index.md @@ -1,6 +1,6 @@ --- description: Enable your dapp to interact with smart contracts. -sidebar_position: 5 +sidebar_position: 10 --- # Interact with smart contracts diff --git a/wallet/how-to/interact-with-smart-contracts/unity/index.md b/wallet/how-to/interact-with-smart-contracts/unity/index.md index 5f541598813..34fb9160fe3 100644 --- a/wallet/how-to/interact-with-smart-contracts/unity/index.md +++ b/wallet/how-to/interact-with-smart-contracts/unity/index.md @@ -11,7 +11,7 @@ You can interact with smart contracts from your Unity game with MetaMask SDK ins ## Prerequisites -- [MetaMask SDK set up](../../connect/set-up-sdk/gaming/unity.md) in your Unity game +- [MetaMask SDK set up](../../use-sdk/gaming/unity.md) in your Unity game - A [contract ABI](../index.md#contract-abi) JSON file or [Hardhat artifact](https://hardhat.org/hardhat-runner/docs/advanced/artifacts#compilation-artifacts) JSON file diff --git a/wallet/how-to/manage-permissions.md b/wallet/how-to/manage-permissions.md index 31e874f45bb..f43eec89760 100644 --- a/wallet/how-to/manage-permissions.md +++ b/wallet/how-to/manage-permissions.md @@ -1,6 +1,6 @@ --- description: Request and revoke permissions to call restricted methods. -sidebar_position: 9 +sidebar_position: 8 --- # Manage permissions @@ -32,7 +32,7 @@ the [`eth_accounts`](/wallet/reference/eth_accounts) restricted method: To access accounts, we recommend using [`eth_requestAccounts`](/wallet/reference/eth_requestAccounts), which automatically asks for permission to use `eth_accounts` by calling `wallet_requestPermissions` internally. -See [how to access a user's accounts](connect/access-accounts.md) for more information. +See [how to access a user's accounts](access-accounts.md) for more information. ::: ## Request permissions example diff --git a/wallet/how-to/onboard-users.md b/wallet/how-to/onboard-users.md index 7795b660ed0..ad529ae39d5 100644 --- a/wallet/how-to/onboard-users.md +++ b/wallet/how-to/onboard-users.md @@ -6,12 +6,6 @@ sidebar_position: 12 # Use the MetaMask onboarding library -:::caution Use MetaMask SDK -We recommend [using MetaMask SDK](connect/set-up-sdk/index.md), which incorporates the functionality of the -MetaMask onboarding library. -You don't need to set up the onboarding library if you use the SDK. -::: - Sending users away from your dapp to install MetaMask presents challenges. You must inform the user to return to your dapp and refresh their browser after the installation. Your dapp detects the user's newly installed MetaMask extension only after that refresh. @@ -25,6 +19,11 @@ MetaMask checks for this origin after the user completes the onboarding flow. If it finds an origin, the final confirmation button of the MetaMask onboarding flow indicates that the user will be redirected back to your dapp. +:::tip +[MetaMask SDK](../concepts/sdk/index.md) incorporates the functionality of the MetaMask onboarding library. +You don't need to set up the onboarding library if you use the SDK. +::: + ## Steps 1. Install [@metamask/onboarding](https://github.com/MetaMask/metamask-onboarding). diff --git a/wallet/how-to/get-started-building/run-devnet.md b/wallet/how-to/run-devnet.md similarity index 95% rename from wallet/how-to/get-started-building/run-devnet.md rename to wallet/how-to/run-devnet.md index d75b086c19f..e7cf9d1ccd3 100644 --- a/wallet/how-to/get-started-building/run-devnet.md +++ b/wallet/how-to/run-devnet.md @@ -1,6 +1,6 @@ --- description: Configure and connect to a Ganache development network. -sidebar_position: 2 +sidebar_position: 13 --- # Run a development network @@ -91,7 +91,7 @@ Follow these steps to connect MetaMask to Hardhat Network. ## Reset your local nonce calculation If you restart your development network, you can accidentally confuse MetaMask -because it calculates the next [nonce](../send-transactions.md#nonce) based on both the +because it calculates the next [nonce](send-transactions.md#nonce) based on both the network state *and* the known sent transactions. To clear MetaMask's transaction queue and reset its nonce calculation, go to **Settings > Advanced** @@ -104,4 +104,4 @@ Once you have your development environment set up and development network runnin MetaMask, detecting a user's network, and accessing a user's accounts. For an end-to-end example, you can also follow the -[Create a simple React dapp](../../tutorials/react-dapp-local-state.md) tutorial. +[Create a simple React dapp](../tutorials/react-dapp-local-state.md) tutorial. diff --git a/wallet/how-to/get-started-building/secure-dapp.md b/wallet/how-to/secure-dapp.md similarity index 99% rename from wallet/how-to/get-started-building/secure-dapp.md rename to wallet/how-to/secure-dapp.md index 0f920b8fb01..6691e9aba88 100644 --- a/wallet/how-to/get-started-building/secure-dapp.md +++ b/wallet/how-to/secure-dapp.md @@ -1,6 +1,6 @@ --- description: Secure your dapp using HTTPS and CSP. -sidebar_position: 3 +sidebar_position: 14 --- # Secure your dapp diff --git a/wallet/how-to/send-transactions.md b/wallet/how-to/send-transactions.md index 123e3f46f8c..0c612970e5c 100644 --- a/wallet/how-to/send-transactions.md +++ b/wallet/how-to/send-transactions.md @@ -1,6 +1,6 @@ --- description: Send transactions using eth_sendTransaction. -sidebar_position: 3.5 +sidebar_position: 4 --- # Send transactions diff --git a/wallet/how-to/sign-data/connect-and-sign.md b/wallet/how-to/sign-data/connect-and-sign.md index 8ddd04a4545..97da0bcf6b1 100644 --- a/wallet/how-to/sign-data/connect-and-sign.md +++ b/wallet/how-to/sign-data/connect-and-sign.md @@ -28,8 +28,8 @@ the mobile dapp and MetaMask Mobile. ## Prerequisites -- MetaMask SDK set up in your [JavaScript](../connect/set-up-sdk/javascript/index.md) or - [iOS](../connect/set-up-sdk/mobile/ios.md) dapp. +- MetaMask SDK set up in your [JavaScript](../use-sdk/javascript/index.md) or + [iOS](../use-sdk/mobile/ios.md) dapp. - MetaMask Mobile version 7.10 or later. Your users must have an updated version of MetaMask Mobile for this feature to work correctly. diff --git a/wallet/how-to/sign-data/index.md b/wallet/how-to/sign-data/index.md index 315fcc3ba61..fc6577175b2 100644 --- a/wallet/how-to/sign-data/index.md +++ b/wallet/how-to/sign-data/index.md @@ -1,6 +1,6 @@ --- description: Sign data using eth_signTypedData_v4 and personal_sign. -sidebar_position: 4 +sidebar_position: 5 --- # Sign data diff --git a/wallet/how-to/use-3rd-party-integrations/_category_.json b/wallet/how-to/use-3rd-party-integrations/_category_.json index 3315517cc1e..f8212ba301a 100644 --- a/wallet/how-to/use-3rd-party-integrations/_category_.json +++ b/wallet/how-to/use-3rd-party-integrations/_category_.json @@ -1,6 +1,6 @@ { "label": "Use third party integrations", - "position": 7, + "position": 10, "link": { "type": "generated-index", "slug": "how-to/use-3rd-party-integrations", diff --git a/wallet/how-to/use-3rd-party-integrations/js-infura-api.md b/wallet/how-to/use-3rd-party-integrations/js-infura-api.md index ec377be6e20..99b4653760f 100644 --- a/wallet/how-to/use-3rd-party-integrations/js-infura-api.md +++ b/wallet/how-to/use-3rd-party-integrations/js-infura-api.md @@ -8,7 +8,7 @@ tags: # Make read-only requests in JavaScript You can use the [Infura API](https://docs.infura.io/) from your JavaScript dapp with -[MetaMask SDK](../connect/set-up-sdk/javascript/index.md) installed to make direct, read-only +[MetaMask SDK](../use-sdk/javascript/index.md) installed to make direct, read-only JSON-RPC requests. Direct, read-only JSON-RPC requests are blockchain requests that do not require user wallet interaction. @@ -52,7 +52,7 @@ Configure your dapp to make read-only requests using the [Infura API](#use-the-i We recommend using all allowlist options to maximize the security of your API key and dapp. ::: -- [MetaMask SDK set up](../connect/set-up-sdk/javascript/index.md) in your JavaScript dapp. +- [MetaMask SDK set up](../use-sdk/javascript/index.md) in your JavaScript dapp. ## Use the Infura API diff --git a/wallet/how-to/use-3rd-party-integrations/unity-dweb.md b/wallet/how-to/use-3rd-party-integrations/unity-dweb.md index 88082c47abc..7a21ec3fb7e 100644 --- a/wallet/how-to/use-3rd-party-integrations/unity-dweb.md +++ b/wallet/how-to/use-3rd-party-integrations/unity-dweb.md @@ -8,13 +8,13 @@ tags: # Enable human-readable addresses in Unity You can integrate the [Decentraweb](https://decentraweb.org/) name resolver into your Unity game -with [MetaMask SDK](../connect/set-up-sdk/gaming/unity.md) installed. +with [MetaMask SDK](../use-sdk/gaming/unity.md) installed. Decentraweb maps human-readable names to machine-readable identifiers, such as Ethereum addresses. Integrating Decentraweb into your game allows users to interact with addresses in a more user-friendly way. ## Prerequisites -[MetaMask SDK set up](../connect/set-up-sdk/gaming/unity.md) in your Unity game. +[MetaMask SDK set up](../use-sdk/gaming/unity.md) in your Unity game. ## Initialize the integration wrapper diff --git a/wallet/how-to/use-3rd-party-integrations/unity-infura.md b/wallet/how-to/use-3rd-party-integrations/unity-infura.md index a18f54199a9..3bb8c51844f 100644 --- a/wallet/how-to/use-3rd-party-integrations/unity-infura.md +++ b/wallet/how-to/use-3rd-party-integrations/unity-infura.md @@ -29,7 +29,7 @@ your Unity game. We recommend using all allowlist options to maximize the security of your API key and dapp. ::: -- [MetaMask SDK set up](../connect/set-up-sdk/gaming/unity.md) in your Unity game. +- [MetaMask SDK set up](../use-sdk/gaming/unity.md) in your Unity game. ## Steps diff --git a/wallet/how-to/connect/set-up-sdk/gaming/index.md b/wallet/how-to/use-sdk/gaming/index.md similarity index 77% rename from wallet/how-to/connect/set-up-sdk/gaming/index.md rename to wallet/how-to/use-sdk/gaming/index.md index d46fa984ce1..67b87725221 100644 --- a/wallet/how-to/connect/set-up-sdk/gaming/index.md +++ b/wallet/how-to/use-sdk/gaming/index.md @@ -8,7 +8,7 @@ tags: # Use MetaMask SDK with gaming dapps -Import [MetaMask SDK](../../../../concepts/sdk/index.md) into your gaming dapp to enable your users +Import [MetaMask SDK](../../../concepts/sdk/index.md) into your gaming dapp to enable your users to easily connect with their MetaMask Mobile wallet. See the instructions for the following gaming platforms: diff --git a/wallet/how-to/connect/set-up-sdk/gaming/unity.md b/wallet/how-to/use-sdk/gaming/unity.md similarity index 95% rename from wallet/how-to/connect/set-up-sdk/gaming/unity.md rename to wallet/how-to/use-sdk/gaming/unity.md index 9b49b0c2fd2..18e7e69f6c7 100644 --- a/wallet/how-to/connect/set-up-sdk/gaming/unity.md +++ b/wallet/how-to/use-sdk/gaming/unity.md @@ -10,7 +10,7 @@ import ReactPlayer from 'react-player/lazy' # Use MetaMask SDK with Unity -Import [MetaMask SDK](../../../../concepts/sdk/index.md) into your +Import [MetaMask SDK](../../../concepts/sdk/index.md) into your [Unity](https://assetstore.unity.com/packages/decentralization/infrastructure/metamask-246786) game to enable users to easily connect to their MetaMask Mobile wallet. The MetaMask Unity SDK supports macOS, Windows, Linux, iOS, Android, and WebGL. @@ -100,7 +100,7 @@ You first must initialize by doing one of the following: - Check **Initialize On Start** on the component within the editor. This initializes the wallet instance, making it accessible from `MetaMaskUnity.Instance.Wallet`. -You can now make calls to the user's wallet using [provider API methods](../../../../reference/provider-api.md). +You can now make calls to the user's wallet using [provider API methods](../../../reference/provider-api.md). ### 4. Connect to MetaMask @@ -176,7 +176,7 @@ await wallet.Request(request); ``` :::note -See the [Unity SDK API reference](../../../../reference/sdk-unity-api.md) for an overview of the +See the [Unity SDK API reference](../../../reference/sdk-unity-api.md) for an overview of the API methods from the most important classes. ::: @@ -261,6 +261,6 @@ The SDK is filled with precompiled libraries to save on runtime compilation. Once you have the MetaMask Unity SDK set up, you can: -- [Set up Infura in Unity.](../../../use-3rd-party-integrations/unity-infura.md) -- [Interact with smart contracts in Unity.](../../../interact-with-smart-contracts/unity/index.md) -- [Enable human-readable addresses in Unity using Decentraweb.](../../../use-3rd-party-integrations/unity-dweb.md) +- [Set up Infura in Unity.](../../use-3rd-party-integrations/unity-infura.md) +- [Interact with smart contracts in Unity.](../../interact-with-smart-contracts/unity/index.md) +- [Enable human-readable addresses in Unity using Decentraweb.](../../use-3rd-party-integrations/unity-dweb.md) diff --git a/wallet/how-to/connect/set-up-sdk/gaming/unreal-engine.md b/wallet/how-to/use-sdk/gaming/unreal-engine.md similarity index 72% rename from wallet/how-to/connect/set-up-sdk/gaming/unreal-engine.md rename to wallet/how-to/use-sdk/gaming/unreal-engine.md index 617f4529f98..dd3fdb67ebd 100644 --- a/wallet/how-to/connect/set-up-sdk/gaming/unreal-engine.md +++ b/wallet/how-to/use-sdk/gaming/unreal-engine.md @@ -5,6 +5,6 @@ sidebar_position: 2 # Use MetaMask SDK with Unreal Engine -[MetaMask SDK](../../../../concepts/sdk/index.md) support for Unreal Engine games is coming soon. +[MetaMask SDK](../../../concepts/sdk/index.md) support for Unreal Engine games is coming soon. The SDK currently supports [Unity](unity.md) gaming dapps, [JavaScript-based](../javascript/index.md) dapps, and [mobile](../mobile/index.md) dapps. \ No newline at end of file diff --git a/wallet/how-to/connect/set-up-sdk/index.md b/wallet/how-to/use-sdk/index.md similarity index 76% rename from wallet/how-to/connect/set-up-sdk/index.md rename to wallet/how-to/use-sdk/index.md index 4971b93dd10..32c1d2ce89c 100644 --- a/wallet/how-to/connect/set-up-sdk/index.md +++ b/wallet/how-to/use-sdk/index.md @@ -1,6 +1,6 @@ --- sidebar_position: 1 -description: Get started by setting up the SDK in your dapp. +description: Use the SDK in your dapp. tags: - JavaScript SDK - iOS SDK @@ -8,11 +8,13 @@ tags: - Unity SDK --- -# Set up MetaMask SDK +# Use MetaMask SDK -[MetaMask SDK](../../../concepts/sdk/index.md) is a library that provides a reliable, secure, and seamless +[MetaMask SDK](../../concepts/sdk/index.md) is a library that provides a reliable, secure, and seamless connection from your dapp to the MetaMask browser extension and MetaMask Mobile. -It supports the following dapp platforms: +By integrating your dapp using the SDK, millions of MetaMask Mobile users can connect to their +preferred MetaMask client. +The SDK supports the following dapp platforms:
@@ -56,11 +58,11 @@ It supports the following dapp platforms:
diff --git a/wallet/how-to/connect/set-up-sdk/javascript/electron.md b/wallet/how-to/use-sdk/javascript/electron.md similarity index 85% rename from wallet/how-to/connect/set-up-sdk/javascript/electron.md rename to wallet/how-to/use-sdk/javascript/electron.md index 297ac05e850..d8e70d7bf8a 100644 --- a/wallet/how-to/connect/set-up-sdk/javascript/electron.md +++ b/wallet/how-to/use-sdk/javascript/electron.md @@ -8,7 +8,7 @@ tags: # Use MetaMask SDK with Electron -Import [MetaMask SDK](../../../../concepts/sdk/index.md) into your Electron dapp to enable your users +Import [MetaMask SDK](../../../concepts/sdk/index.md) into your Electron dapp to enable your users to easily connect to the MetaMask browser extension and MetaMask Mobile. On the frontend, see the instructions to [use the SDK with React](react/index.md). diff --git a/wallet/how-to/connect/set-up-sdk/javascript/index.md b/wallet/how-to/use-sdk/javascript/index.md similarity index 72% rename from wallet/how-to/connect/set-up-sdk/javascript/index.md rename to wallet/how-to/use-sdk/javascript/index.md index 7a9e4036694..b44dc65d0c9 100644 --- a/wallet/how-to/connect/set-up-sdk/javascript/index.md +++ b/wallet/how-to/use-sdk/javascript/index.md @@ -8,7 +8,7 @@ tags: # Use MetaMask SDK with JavaScript -Import [MetaMask SDK](../../../../concepts/sdk/index.md) into your JavaScript dapp to enable your +Import [MetaMask SDK](../../../concepts/sdk/index.md) into your JavaScript dapp to enable your users to easily connect to the MetaMask browser extension and MetaMask Mobile. The following instructions work for web dapps based on standard JavaScript. You can also see instructions for the following JavaScript-based platforms: @@ -23,7 +23,7 @@ You can also see instructions for the following JavaScript-based platforms: ## Prerequisites -- An existing or [new project](../../../get-started-building/set-up-dev-environment.md) set up +- A JavaScript project set up - [MetaMask Mobile](https://github.com/MetaMask/metamask-mobile) version 5.8.1 or later - [Yarn](https://yarnpkg.com/getting-started/install) or [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) @@ -54,7 +54,7 @@ import { MetaMaskSDK } from '@metamask/sdk'; ### 3. Instantiate the SDK -Instantiate the SDK using any [options](../../../../reference/sdk-js-options.md): +Instantiate the SDK using any [options](../../../reference/sdk-js-options.md): ```javascript const MMSDK = new MetaMaskSDK( @@ -69,19 +69,19 @@ const ethereum = MMSDK.getProvider(); // You can also access via window.ethereum ``` :::note Important SDK options -- Use [`dappMetadata`](../../../../reference/sdk-js-options.md#dappmetadata) to display information +- Use [`dappMetadata`](../../../reference/sdk-js-options.md#dappmetadata) to display information about your dapp in the MetaMask connection modal. -- Use [`modals`](../../../../reference/sdk-js-options.md#modals) to [customize the logic and UI of - the displayed modals](../../../display/custom-modals.md). -- Use [`infuraAPIKey`](../../../../reference/sdk-js-options.md#infuraapikey) to - [make read-only RPC requests](../../../use-3rd-party-integrations/js-infura-api.md) from your dapp. +- Use [`modals`](../../../reference/sdk-js-options.md#modals) to [customize the logic and UI of + the displayed modals](../../display/custom-modals.md). +- Use [`infuraAPIKey`](../../../reference/sdk-js-options.md#infuraapikey) to + [make read-only RPC requests](../../use-3rd-party-integrations/js-infura-api.md) from your dapp. ::: ### 4. Use the SDK -Use the SDK by calling any [provider API methods](../../../../reference/provider-api.md). +Use the SDK by calling any [provider API methods](../../../reference/provider-api.md). Always call [`eth_requestAccounts`](/wallet/reference/eth_requestaccounts) using -[`ethereum.request()`](../../../../reference/provider-api.md#ethereumrequestargs) first, since it +[`ethereum.request()`](../../../reference/provider-api.md#ethereumrequestargs) first, since it prompts the installation or connection popup to appear. ```javascript diff --git a/wallet/how-to/connect/set-up-sdk/javascript/nodejs.md b/wallet/how-to/use-sdk/javascript/nodejs.md similarity index 69% rename from wallet/how-to/connect/set-up-sdk/javascript/nodejs.md rename to wallet/how-to/use-sdk/javascript/nodejs.md index acafc752c0c..dceaf886744 100644 --- a/wallet/how-to/connect/set-up-sdk/javascript/nodejs.md +++ b/wallet/how-to/use-sdk/javascript/nodejs.md @@ -8,7 +8,7 @@ tags: # Use MetaMask SDK with Node.js -Import [MetaMask SDK](../../../../concepts/sdk/index.md) into your Node.js dapp to enable your users +Import [MetaMask SDK](../../../concepts/sdk/index.md) into your Node.js dapp to enable your users to easily connect to the MetaMask browser extension and MetaMask Mobile. The SDK for Node.js has the [same prerequisites](index.md#prerequisites) as for standard JavaScript. @@ -38,7 +38,7 @@ import { MetaMaskSDK } from '@metamask/sdk'; ### 3. Instantiate the SDK -Instantiate the SDK using any [options](../../../../reference/sdk-js-options.md): +Instantiate the SDK using any [options](../../../reference/sdk-js-options.md): ```javascript const MMSDK = new MetaMaskSDK({ @@ -53,19 +53,19 @@ const ethereum = MMSDK.getProvider(); // You can also access via window.ethereum ``` :::note Important SDK options -- Use [`dappMetadata`](../../../../reference/sdk-js-options.md#dappmetadata) to display information +- Use [`dappMetadata`](../../../reference/sdk-js-options.md#dappmetadata) to display information about your dapp in the MetaMask connection modal. -- Use [`modals`](../../../../reference/sdk-js-options.md#modals) to [customize the logic and UI of - the displayed modals](../../../display/custom-modals.md). -- Use [`infuraAPIKey`](../../../../reference/sdk-js-options.md#infuraapikey) to - [make read-only RPC requests](../../../use-3rd-party-integrations/js-infura-api.md) from your dapp. +- Use [`modals`](../../../reference/sdk-js-options.md#modals) to [customize the logic and UI of + the displayed modals](../../display/custom-modals.md). +- Use [`infuraAPIKey`](../../../reference/sdk-js-options.md#infuraapikey) to + [make read-only RPC requests](../../use-3rd-party-integrations/js-infura-api.md) from your dapp. ::: ### 4. Use the SDK -Use the SDK by calling any [provider API methods](../../../../reference/provider-api.md). +Use the SDK by calling any [provider API methods](../../../reference/provider-api.md). Always call [`eth_requestAccounts`](/wallet/reference/eth_requestaccounts) using -[`ethereum.request()`](../../../../reference/provider-api.md#ethereumrequestargs) first, since it +[`ethereum.request()`](../../../reference/provider-api.md#ethereumrequestargs) first, since it prompts the installation or connection popup to appear. ```javascript diff --git a/wallet/how-to/connect/set-up-sdk/javascript/other-web-frameworks.md b/wallet/how-to/use-sdk/javascript/other-web-frameworks.md similarity index 70% rename from wallet/how-to/connect/set-up-sdk/javascript/other-web-frameworks.md rename to wallet/how-to/use-sdk/javascript/other-web-frameworks.md index 390d7905c29..7b701ba4bee 100644 --- a/wallet/how-to/connect/set-up-sdk/javascript/other-web-frameworks.md +++ b/wallet/how-to/use-sdk/javascript/other-web-frameworks.md @@ -8,7 +8,7 @@ tags: # Use MetaMask SDK with other web frameworks -Import [MetaMask SDK](../../../../concepts/sdk/index.md) into your web dapp to enable your users to +Import [MetaMask SDK](../../../concepts/sdk/index.md) into your web dapp to enable your users to easily connect to the MetaMask browser extension and MetaMask Mobile. The SDK for other web frameworks has the [same prerequisites](index.md#prerequisites) as for standard JavaScript. @@ -39,7 +39,7 @@ import { MetaMaskSDK } from '@metamask/sdk'; ### 3. Instantiate the SDK -Instantiate the SDK using any [options](../../../../reference/sdk-js-options.md): +Instantiate the SDK using any [options](../../../reference/sdk-js-options.md): ```javascript const MMSDK = new MetaMaskSDK( @@ -54,19 +54,19 @@ const ethereum = MMSDK.getProvider(); // You can also access via window.ethereum ``` :::note Important SDK options -- Use [`dappMetadata`](../../../../reference/sdk-js-options.md#dappmetadata) to display information +- Use [`dappMetadata`](../../../reference/sdk-js-options.md#dappmetadata) to display information about your dapp in the MetaMask connection modal. -- Use [`modals`](../../../../reference/sdk-js-options.md#modals) to [customize the logic and UI of - the displayed modals](../../../display/custom-modals.md). -- Use [`infuraAPIKey`](../../../../reference/sdk-js-options.md#infuraapikey) to - [make read-only RPC requests](../../../use-3rd-party-integrations/js-infura-api.md) from your dapp. +- Use [`modals`](../../../reference/sdk-js-options.md#modals) to [customize the logic and UI of + the displayed modals](../../display/custom-modals.md). +- Use [`infuraAPIKey`](../../../reference/sdk-js-options.md#infuraapikey) to + [make read-only RPC requests](../../use-3rd-party-integrations/js-infura-api.md) from your dapp. ::: ### 4. Use the SDK -Use the SDK by calling any [provider API methods](../../../../reference/provider-api.md). +Use the SDK by calling any [provider API methods](../../../reference/provider-api.md). Always call [`eth_requestAccounts`](/wallet/reference/eth_requestaccounts) using -[`ethereum.request()`](../../../../reference/provider-api.md#ethereumrequestargs) first, since it +[`ethereum.request()`](../../../reference/provider-api.md#ethereumrequestargs) first, since it prompts the installation or connection popup to appear. ```javascript diff --git a/wallet/how-to/connect/set-up-sdk/javascript/pure-js.md b/wallet/how-to/use-sdk/javascript/pure-js.md similarity index 64% rename from wallet/how-to/connect/set-up-sdk/javascript/pure-js.md rename to wallet/how-to/use-sdk/javascript/pure-js.md index aa4fb6cf0f6..abca01d2663 100644 --- a/wallet/how-to/connect/set-up-sdk/javascript/pure-js.md +++ b/wallet/how-to/use-sdk/javascript/pure-js.md @@ -8,7 +8,7 @@ tags: # Use MetaMask SDK with pure JavaScript -Import [MetaMask SDK](../../../../concepts/sdk/index.md) into your pure JavaScript dapp to enable +Import [MetaMask SDK](../../../concepts/sdk/index.md) into your pure JavaScript dapp to enable your users to easily connect to the MetaMask browser extension and MetaMask Mobile. The SDK for pure JavaScript has the [same prerequisites](index.md#prerequisites) as for standard JavaScript. @@ -37,19 +37,19 @@ To import, instantiate, and use the SDK, you can insert a script in the head sec ``` -You can configure the SDK using any [options](../../../../reference/sdk-js-options.md) and call any -[provider API methods](../../../../reference/provider-api.md). +You can configure the SDK using any [options](../../../reference/sdk-js-options.md) and call any +[provider API methods](../../../reference/provider-api.md). Always call [`eth_requestAccounts`](/wallet/reference/eth_requestaccounts) using -[`ethereum.request(args)`](../../../../reference/provider-api.md#windowethereumrequestargs) first, +[`ethereum.request(args)`](../../../reference/provider-api.md#windowethereumrequestargs) first, since it prompts the installation or connection popup to appear. :::note Important SDK options -- Use [`dappMetadata`](../../../../reference/sdk-js-options.md#dappmetadata) to display information +- Use [`dappMetadata`](../../../reference/sdk-js-options.md#dappmetadata) to display information about your dapp in the MetaMask connection modal. -- Use [`modals`](../../../../reference/sdk-js-options.md#modals) to [customize the logic and UI of - the displayed modals](../../../display/custom-modals.md). -- Use [`infuraAPIKey`](../../../../reference/sdk-js-options.md#infuraapikey) to - [make read-only RPC requests](../../../use-3rd-party-integrations/js-infura-api.md) from your dapp. +- Use [`modals`](../../../reference/sdk-js-options.md#modals) to [customize the logic and UI of + the displayed modals](../../display/custom-modals.md). +- Use [`infuraAPIKey`](../../../reference/sdk-js-options.md#infuraapikey) to + [make read-only RPC requests](../../use-3rd-party-integrations/js-infura-api.md) from your dapp. ::: ## Example diff --git a/wallet/how-to/connect/set-up-sdk/javascript/react-native.md b/wallet/how-to/use-sdk/javascript/react-native.md similarity index 98% rename from wallet/how-to/connect/set-up-sdk/javascript/react-native.md rename to wallet/how-to/use-sdk/javascript/react-native.md index 1fd8b781c18..81428c00bf8 100644 --- a/wallet/how-to/connect/set-up-sdk/javascript/react-native.md +++ b/wallet/how-to/use-sdk/javascript/react-native.md @@ -11,7 +11,7 @@ import TabItem from '@theme/TabItem'; # Use MetaMask SDK with React Native and Expo -Import [MetaMask SDK](../../../../concepts/sdk/index.md) into your React Native or Expo dapp to +Import [MetaMask SDK](../../../concepts/sdk/index.md) into your React Native or Expo dapp to enable your users to easily connect to the MetaMask browser extension and MetaMask Mobile. ## Prerequisites diff --git a/wallet/how-to/connect/set-up-sdk/javascript/react/index.md b/wallet/how-to/use-sdk/javascript/react/index.md similarity index 88% rename from wallet/how-to/connect/set-up-sdk/javascript/react/index.md rename to wallet/how-to/use-sdk/javascript/react/index.md index c7e2eeb0521..f3f8038082e 100644 --- a/wallet/how-to/connect/set-up-sdk/javascript/react/index.md +++ b/wallet/how-to/use-sdk/javascript/react/index.md @@ -11,7 +11,7 @@ import TabItem from '@theme/TabItem'; # Use MetaMask SDK with React -Import [MetaMask SDK](../../../../../concepts/sdk/index.md) into your React dapp to enable your users to +Import [MetaMask SDK](../../../../concepts/sdk/index.md) into your React dapp to enable your users to easily connect to the MetaMask browser extension and MetaMask Mobile. The SDK for React has the [same prerequisites](../index.md#prerequisites) as for standard JavaScript. @@ -77,15 +77,15 @@ root.render( When initializing `MetaMaskProvider`, set `debug` to `true` to activate debug mode. For the full list of options you can set for `sdkOptions`, see the -[JavaScript SDK options reference](../../../../../reference/sdk-js-options.md). +[JavaScript SDK options reference](../../../../reference/sdk-js-options.md). :::note Important SDK options -- Use [`dappMetadata`](../../../../../reference/sdk-js-options.md#dappmetadata) to display information +- Use [`dappMetadata`](../../../../reference/sdk-js-options.md#dappmetadata) to display information about your dapp in the MetaMask connection modal. -- Use [`modals`](../../../../../reference/sdk-js-options.md#modals) to [customize the logic and UI of - the displayed modals](../../../../display/custom-modals.md). -- Use [`infuraAPIKey`](../../../../../reference/sdk-js-options.md#infuraapikey) to - [make read-only RPC requests](../../../../use-3rd-party-integrations/js-infura-api.md) from your dapp. +- Use [`modals`](../../../../reference/sdk-js-options.md#modals) to [customize the logic and UI of + the displayed modals](../../../display/custom-modals.md). +- Use [`infuraAPIKey`](../../../../reference/sdk-js-options.md#infuraapikey) to + [make read-only RPC requests](../../../use-3rd-party-integrations/js-infura-api.md) from your dapp. ::: ### 4. Use the SDK @@ -155,7 +155,7 @@ const connect = async () => { }; ``` -You can also [use the `connectAndSign` method](../../../../sign-data/connect-and-sign.md) to +You can also [use the `connectAndSign` method](../../../sign-data/connect-and-sign.md) to connect to MetaMask and sign data in a single interaction. ## Example diff --git a/wallet/how-to/connect/set-up-sdk/javascript/react/react-ui.md b/wallet/how-to/use-sdk/javascript/react/react-ui.md similarity index 88% rename from wallet/how-to/connect/set-up-sdk/javascript/react/react-ui.md rename to wallet/how-to/use-sdk/javascript/react/react-ui.md index 067c13f20b6..815f345b2e9 100644 --- a/wallet/how-to/connect/set-up-sdk/javascript/react/react-ui.md +++ b/wallet/how-to/use-sdk/javascript/react/react-ui.md @@ -11,7 +11,7 @@ import TabItem from '@theme/TabItem'; # Use MetaMask SDK with React UI -Import [MetaMask SDK](../../../../../concepts/sdk/index.md) into your React dapp to enable your +Import [MetaMask SDK](../../../../concepts/sdk/index.md) into your React dapp to enable your users to easily connect to the MetaMask browser extension and MetaMask Mobile. The `@metamask/sdk-react-ui` package not only exports hooks from [`@metamask/sdk-react`](index.md), but also provides wrappers around [wagmi](https://wagmi.sh/) hooks and a basic UI button component @@ -78,15 +78,15 @@ root.render( ``` For the full list of options you can set for `sdkOptions`, see the -[JavaScript SDK options reference](../../../../../reference/sdk-js-options.md). +[JavaScript SDK options reference](../../../../reference/sdk-js-options.md). :::note Important SDK options -- Use [`dappMetadata`](../../../../../reference/sdk-js-options.md#dappmetadata) to display information +- Use [`dappMetadata`](../../../../reference/sdk-js-options.md#dappmetadata) to display information about your dapp in the MetaMask connection modal. -- Use [`modals`](../../../../../reference/sdk-js-options.md#modals) to [customize the logic and UI of - the displayed modals](../../../../display/custom-modals.md). -- Use [`infuraAPIKey`](../../../../../reference/sdk-js-options.md#infuraapikey) to - [make read-only RPC requests](../../../../use-3rd-party-integrations/js-infura-api.md) from your dapp. +- Use [`modals`](../../../../reference/sdk-js-options.md#modals) to [customize the logic and UI of + the displayed modals](../../../display/custom-modals.md). +- Use [`infuraAPIKey`](../../../../reference/sdk-js-options.md#infuraapikey) to + [make read-only RPC requests](../../../use-3rd-party-integrations/js-infura-api.md) from your dapp. ::: ### 4. Use the SDK diff --git a/wallet/how-to/connect/set-up-sdk/mobile/android.md b/wallet/how-to/use-sdk/mobile/android.md similarity index 98% rename from wallet/how-to/connect/set-up-sdk/mobile/android.md rename to wallet/how-to/use-sdk/mobile/android.md index 6ba6b120305..6707e315aab 100644 --- a/wallet/how-to/connect/set-up-sdk/mobile/android.md +++ b/wallet/how-to/use-sdk/mobile/android.md @@ -9,11 +9,11 @@ tags: # Use MetaMask SDK with Android -Import [MetaMask SDK](../../../../concepts/sdk/index.md) into your native Android dapp to enable +Import [MetaMask SDK](../../../concepts/sdk/index.md) into your native Android dapp to enable your users to easily connect with their MetaMask Mobile wallet. :::tip See also -- [Android SDK architecture](../../../../concepts/sdk/android.md) +- [Android SDK architecture](../../../concepts/sdk/android.md) ::: ## Prerequisites diff --git a/wallet/how-to/connect/set-up-sdk/mobile/index.md b/wallet/how-to/use-sdk/mobile/index.md similarity index 78% rename from wallet/how-to/connect/set-up-sdk/mobile/index.md rename to wallet/how-to/use-sdk/mobile/index.md index 219a58709ad..8ee0bff2ecf 100644 --- a/wallet/how-to/connect/set-up-sdk/mobile/index.md +++ b/wallet/how-to/use-sdk/mobile/index.md @@ -9,7 +9,7 @@ tags: # Use MetaMask SDK with mobile dapps -Import [MetaMask SDK](../../../../concepts/sdk/index.md) into your mobile dapp to enable your users +Import [MetaMask SDK](../../../concepts/sdk/index.md) into your mobile dapp to enable your users to easily connect with their MetaMask Mobile wallet. See the instructions for the following mobile platforms: diff --git a/wallet/how-to/connect/set-up-sdk/mobile/ios.md b/wallet/how-to/use-sdk/mobile/ios.md similarity index 98% rename from wallet/how-to/connect/set-up-sdk/mobile/ios.md rename to wallet/how-to/use-sdk/mobile/ios.md index e660780ff35..adc69a84b9c 100644 --- a/wallet/how-to/connect/set-up-sdk/mobile/ios.md +++ b/wallet/how-to/use-sdk/mobile/ios.md @@ -12,7 +12,7 @@ import TabItem from '@theme/TabItem'; # Use MetaMask SDK with iOS -Import [MetaMask SDK](../../../../concepts/sdk/index.md) into your native iOS dapp to enable your +Import [MetaMask SDK](../../../concepts/sdk/index.md) into your native iOS dapp to enable your users to easily connect with their MetaMask Mobile wallet. ## Prerequisites diff --git a/wallet/index.md b/wallet/index.md deleted file mode 100644 index 5334e373f4a..00000000000 --- a/wallet/index.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Introduction ---- - -# Integrate your dapp with the MetaMask wallet - -Integrate your dapp with MetaMask to interact with your dapp users' Ethereum accounts. -You can enable users to connect to their MetaMask wallets from the following dapp platforms: - -- [Web dapps](how-to/connect/set-up-sdk/javascript/index.md) on desktop and mobile browsers -- [Desktop](how-to/connect/set-up-sdk/javascript/index.md) and - [mobile](how-to/connect/set-up-sdk/mobile/index.md) dapps -- Games built on platforms such as [Unity](how-to/connect/set-up-sdk/gaming/unity.md) - -:::tip Integrate using MetaMask SDK -[Set up MetaMask SDK](how-to/connect/set-up-sdk/index.md) to start integrating your dapp with MetaMask. -[MetaMask SDK](concepts/sdk/index.md) is a library that provides a reliable, secure, and seamless -connection from your dapp to the MetaMask browser extension and MetaMask Mobile. - -With the SDK installed, your dapp can use the [MetaMask Ethereum provider API](concepts/apis.md) -to request users' Ethereum accounts, read data from blockchains the user is connected to, suggest -that the user sign messages and transactions, and more. -::: - -:::note -- This documentation assumes intermediate knowledge of JavaScript, HTML, and CSS. -- To learn how to extend the functionality of MetaMask, visit the - [MetaMask Snaps developer documentation](../snaps). -::: - -## New to dapp development? - -If you're new to dapp development or want to refresh your knowledge, we recommend starting with the -following guides: - -- [Get started building a dapp](how-to/get-started-building) -- [Connect to MetaMask](how-to/connect) - -For an end-to-end example, you can also follow the -[Create a simple React dapp](tutorials/react-dapp-local-state.md) tutorial. - -## Want to use advanced features? - -If you're a developer looking to optimize your dapp for MetaMask, you can -[connect to MetaMask](how-to/connect) from an existing dapp and implement MetaMask-specific -functions, including: - -- [Sign data](how-to/sign-data) -- [Display tokens, contract methods, and icons in MetaMask](how-to/display) -- [Interact with smart contracts](how-to/interact-with-smart-contracts/index.md) -- [Access a user's MetaMask provider](how-to/access-provider.md) - -## Questions? - -If you have questions about integrating your dapp with MetaMask, you can interact with the MetaMask -team and community on the MetaMask channels on [Consensys Discord](https://discord.gg/consensys). diff --git a/wallet/index.mdx b/wallet/index.mdx new file mode 100644 index 00000000000..25d901356e2 --- /dev/null +++ b/wallet/index.mdx @@ -0,0 +1,98 @@ +--- +title: Introduction +--- + +import CardList from '@site/src/components/CardList' + +# Integrate your dapp with the MetaMask wallet + +Integrate your dapp with the MetaMask wallet using the [MetaMask APIs](concepts/apis.md). +You can interact with your users' Ethereum accounts, performing tasks such as the following: + + + +## Supported platforms + +You can connect to your users' Ethereum accounts from the following dapp platforms: + + + +## New to developing on MetaMask? + +If you're new integrating dapps with MetaMask, check out the following topics: + + + +## Questions? + +If you have questions about integrating your dapp with MetaMask, you can interact with the MetaMask +team and community on the MetaMask channels on [Consensys Discord](https://discord.gg/consensys). diff --git a/wallet/quickstart/javascript.md b/wallet/quickstart/javascript.md new file mode 100644 index 00000000000..1320e37bb5a --- /dev/null +++ b/wallet/quickstart/javascript.md @@ -0,0 +1,132 @@ +--- +description: Integrate your JavaScript dapp with MetaMask. +sidebar_position: 1 +--- + +# JavaScript quickstart + +This page provides code samples to quickly connect to your users' MetaMask accounts from a +JavaScript dapp. +You can: + +- [Connect to the MetaMask browser extension](#connect-to-the-metamask-browser-extension) directly + using the MetaMask APIs. +- [Connect to the MetaMask extension and MetaMask Mobile](#connect-to-the-metamask-extension-and-metamask-mobile) + using the SDK. + +## Connect to the MetaMask browser extension + +Connect to the MetaMask browser extension directly using the +[MetaMask Ethereum provider API](../concepts/apis.md). +You must [detect MetaMask](/wallet/how-to/detect-wallet) in the user's browser, then +[access the user's accounts](../how-to/access-accounts.md) by prompting them to connect to MetaMask. + +1. Install the [`@metamask/detect-provider`](https://github.com/MetaMask/detect-provider) module in + your project directory: + + ```bash + npm i @metamask/detect-provider + ``` + +2. Add the following code to your project file: + + ```js title="index.js" + // Detect the MetaMask Ethereum provider + + import detectEthereumProvider from '@metamask/detect-provider'; + + const provider = await detectEthereumProvider(); + + if (provider) { + startApp(provider); + } else { + console.log('Please install MetaMask!'); + } + + function startApp(provider) { + if (provider !== window.ethereum) { + console.error('Do you have multiple wallets installed?'); + } + } + + // Prompt users to connect to MetaMask + + const ethereumButton = document.querySelector('.enableEthereumButton'); + const showAccount = document.querySelector('.showAccount'); + + ethereumButton.addEventListener('click', () => { + getAccount(); + }); + + async function getAccount() { + const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' }) + .catch((err) => { + if (err.code === 4001) { + console.log('Please connect to MetaMask.'); + } else { + console.error(err); + } + }); + const account = accounts[0]; + showAccount.innerHTML = account; + } + ``` + +## Connect to the MetaMask extension and MetaMask Mobile + +Connect to the MetaMask browser extension and MetaMask Mobile using [MetaMask SDK](../concepts/sdk/index.md). +The SDK automatically detects MetaMask in the user's browsers, and enables them to seamlessly +connect to the extension or mobile wallet. +By integrating your dapp using the SDK, millions of MetaMask Mobile users can connect to their +preferred MetaMask client. + +:::info note +The SDK uses the [Ethereum provider](../concepts/apis.md#ethereum-provider-api), so you can use the +SDK as a wrapper around an existing JavaScript dapp and call +[MetaMask Ethereum provider API methods](../reference/provider-api.md) from your dapp as normal. +::: + +1. Install the [MetaMask JavaScript SDK](../how-to/use-sdk/javascript/index.md) in your project directory: + + ```bash + npm i @metamask/sdk + ``` + +2. Add the following code to your project file: + + ```js title="index.js" + import { MetaMaskSDK } from '@metamask/sdk'; + + // Initialize the SDK + + const MMSDK = new MetaMaskSDK( + dappMetadata: { + name: "Example JavaScript Dapp", + url: window.location.host, + } + ); + + const ethereum = MMSDK.getProvider(); + + // Prompt users to connect to MetaMask + + const ethereumButton = document.querySelector('.enableEthereumButton'); + const showAccount = document.querySelector('.showAccount'); + + ethereumButton.addEventListener('click', () => { + getAccount(); + }); + + async function getAccount() { + const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' }) + .catch((err) => { + if (err.code === 4001) { + console.log('Please connect to MetaMask.'); + } else { + console.error(err); + } + }); + const account = accounts[0]; + showAccount.innerHTML = account; + } + ``` diff --git a/wallet/quickstart/other-platforms.md b/wallet/quickstart/other-platforms.md new file mode 100644 index 00000000000..fb7046bfdea --- /dev/null +++ b/wallet/quickstart/other-platforms.md @@ -0,0 +1,16 @@ +--- +description: Integrate with MetaMask from other platforms. +sidebar_position: 3 +--- + +# Other platforms + +You can [use MetaMask SDK](../how-to/use-sdk/index.md) to connect to your users' MetaMask accounts +from other dapp platforms, including the following: + +- [React Native](../how-to/use-sdk/javascript/react-native.md) +- [iOS](../how-to/use-sdk/mobile/ios.md) +- [Android](../how-to/use-sdk/mobile/android.md) +- [Unity](../how-to/use-sdk/gaming/unity.md) + +Learn more [about MetaMask SDK](../concepts/sdk/index.md). diff --git a/wallet/quickstart/react.md b/wallet/quickstart/react.md new file mode 100644 index 00000000000..a5d213c780a --- /dev/null +++ b/wallet/quickstart/react.md @@ -0,0 +1,157 @@ +--- +description: Integrate your React dapp with MetaMask. +sidebar_position: 2 +--- + +# React quickstart + +This page provides code samples to quickly connect to your users' MetaMask accounts from a +React dapp. +You can: + +- [Connect to the MetaMask browser extension](#connect-to-the-metamask-browser-extension) + directly using the MetaMask APIs. +- [Connect to the MetaMask extension and MetaMask mobile](#connect-to-the-metamask-extension-and-metamask-mobile) + using the SDK. + +## Connect to the MetaMask browser extension + +Connect to the MetaMask browser extension directly using the +[MetaMask Ethereum provider API](../concepts/apis.md). +This example uses the [Vite](https://v3.vitejs.dev/guide/) build tool with React and Typescript, so +you can get started quickly with an optimized dapp. + +1. Follow Step 1 in the [React dapp tutorial](../tutorials/react-dapp-local-state.md) to set up a + Vite project. + +2. Add the following code to your project file: + + ```typescript title="App.tsx" + import './App.css' + import { useState, useEffect } from 'react' + import detectEthereumProvider from '@metamask/detect-provider' + + // Detect the MetaMask Ethereum provider + + const App = () => { + const [hasProvider, setHasProvider] = useState(null) + const initialState = { accounts: [] } + const [wallet, setWallet] = useState(initialState) + + useEffect(() => { + const getProvider = async () => { + const provider = await detectEthereumProvider({ silent: true }) + setHasProvider(Boolean(provider)) + } + getProvider() + }, []) + + // Prompt users to connect to MetaMask + + const updateWallet = async (accounts:any) => { + setWallet({ accounts }) + } + + const handleConnect = async () => { + let accounts = await window.ethereum.request({ method: "eth_requestAccounts" }) + updateWallet(accounts) + } + + return ( +
+
Injected Provider {hasProvider ? 'DOES' : 'DOES NOT'} Exist
+ { hasProvider && + + } + { wallet.accounts.length > 0 && +
Wallet Accounts: { wallet.accounts[0] }
+ } +
+ ) + } + export default App + ``` + +## Connect to the MetaMask extension and MetaMask Mobile + +Connect to the MetaMask browser extension and MetaMask Mobile using [MetaMask SDK](../concepts/sdk/index.md). +The SDK automatically detects MetaMask in the user's browsers, and enables them to seamlessly +connect to the extension or mobile wallet. +By integrating your dapp using the SDK, millions of MetaMask Mobile users can connect to their +preferred MetaMask client. + +:::info note +The SDK uses the [Ethereum provider](../concepts/apis.md#ethereum-provider-api), so you can use the +SDK as a wrapper around an existing JavaScript dapp and call +[MetaMask Ethereum provider API methods](../reference/provider-api.md) from your dapp as normal. +::: + +1. Install the [MetaMask React SDK](../how-to/use-sdk/javascript/react/index.md) in your project directory: + + ```bash + npm i @metamask/sdk-react + ``` + +2. Wrap your root component in a `MetaMaskProvider`: + + ```typescript title="index.tsx" + import React from 'react'; + import ReactDOM from 'react-dom/client'; + import App from './App'; + import { MetaMaskProvider } from '@metamask/sdk-react'; + + const root = ReactDOM.createRoot( + document.getElementById('root') as HTMLElement + ); + + root.render( + + + + + + ); + ``` + +3. To use the SDK, use the `useSDK` hook in your React components: + + ```typescript title="App.tsx" + import { useSDK } from '@metamask/sdk-react'; + import React, { useState } from 'react'; + + export const App = () => { + const [account, setAccount] = useState(); + const { sdk, connected, connecting, provider, chainId } = useSDK(); + + const connect = async () => { + try { + const accounts = await sdk?.connect(); + setAccount(accounts?.[0]); + } catch(err) { + console.warn(`failed to connect..`, err); + } + }; + + return ( +
+ + {connected && ( +
+ <> + {chainId && `Connected chain: ${chainId}`} +

+ {account && `Connected account: ${account}`} + +
+ )} +
+ ); + }; + ``` diff --git a/wallet/reference/provider-api.md b/wallet/reference/provider-api.md index 778bb7b4925..4d9dbb6f545 100644 --- a/wallet/reference/provider-api.md +++ b/wallet/reference/provider-api.md @@ -35,7 +35,7 @@ If the provider isn't connected, the page must be reloaded to re-establish the c See the [`connect`](#connect) and [`disconnect`](#disconnect) events for more information. :::note -This method is unrelated to [accessing a user's accounts](../how-to/connect/access-accounts.md). +This method is unrelated to [accessing a user's accounts](../how-to/access-accounts.md). In the provider interface, "connected" and "disconnected" refer to whether the provider can make RPC requests to the current chain. ::: @@ -142,7 +142,7 @@ Callers are identified by their URL origin, which means that all sites with the the same permissions. This means that the provider emits `accountsChanged` when the user's exposed account address changes. -Listen to this event to [handle accounts](../how-to/connect/access-accounts.md#handle-accounts). +Listen to this event to [handle accounts](../how-to/access-accounts.md#handle-accounts). ### chainChanged @@ -151,7 +151,7 @@ window.ethereum.on('chainChanged', handler: (chainId: string) => void); ``` The provider emits this event when the currently connected chain changes. -Listen to this event to [detect a user's network](../how-to/connect/detect-network.md). +Listen to this event to [detect a user's network](../how-to/detect-network.md). :::caution important diff --git a/wallet/reference/sdk-js-options.md b/wallet/reference/sdk-js-options.md index 8320668767c..20b85d75ecd 100644 --- a/wallet/reference/sdk-js-options.md +++ b/wallet/reference/sdk-js-options.md @@ -7,7 +7,7 @@ tags: # JavaScript SDK options -The [JavaScript version of MetaMask SDK](../how-to/connect/set-up-sdk/javascript/index.md) takes the +The [JavaScript version of MetaMask SDK](../how-to/use-sdk/javascript/index.md) takes the following options. ### checkInstallationImmediately diff --git a/wallet/reference/sdk-unity-api.md b/wallet/reference/sdk-unity-api.md index 1351acc095d..2d7ac5da7e9 100644 --- a/wallet/reference/sdk-unity-api.md +++ b/wallet/reference/sdk-unity-api.md @@ -7,7 +7,7 @@ tags: # Unity SDK API -The following is an overview of the API methods used in the [Unity SDK](../how-to/connect/set-up-sdk/gaming/unity.md). +The following is an overview of the API methods used in the [Unity SDK](../how-to/use-sdk/gaming/unity.md). ## MetaMaskUnity diff --git a/wallet/tutorials/react-dapp-local-state.md b/wallet/tutorials/react-dapp-local-state.md index baedd4d586e..e99bbfa6c03 100644 --- a/wallet/tutorials/react-dapp-local-state.md +++ b/wallet/tutorials/react-dapp-local-state.md @@ -169,7 +169,7 @@ However, MetaMask provides the MetaMask Ethereum provider or any provider injected at `window.ethereum` on any platform or browser. :::caution important -We recommend [using `@metamask/detect-provider`](../how-to/connect/detect-wallet/metamask.md#use-metamaskdetect-provider) +We recommend [using `@metamask/detect-provider`](../how-to/detect-wallet/metamask.md) instead of manually detecting the provider yourself. ::: @@ -566,7 +566,7 @@ You might need to: - Create UI that shows information on the supported networks. - Present a button that allows users to connect to a supported network. -[Detecting a user's network](../how-to/connect/detect-network.md) is crucial in almost every web3 dapp. +[Detecting a user's network](../how-to/detect-network.md) is crucial in almost every web3 dapp. ::: ### 6. Handle errors