diff --git a/docs/whats-new.md b/docs/whats-new.md index 9a26b94691f..6278754dfcb 100644 --- a/docs/whats-new.md +++ b/docs/whats-new.md @@ -90,7 +90,7 @@ of the [MetaMask developer page](https://metamask.io/developer/). ([#1274](https://github.com/MetaMask/metamask-docs/pull/1274)) - Documented [Snaps cron jobs](/snaps/features/cron-jobs). ([#1271](https://github.com/MetaMask/metamask-docs/pull/1271)) -- Updated [how to connect to MetaMask](/wallet/how-to/connect) with vanilla TypeScript and React +- Updated [how to connect to MetaMask](/wallet/connect/wallet-api) with vanilla TypeScript and React TypeScript instructions. ([#1247](https://github.com/MetaMask/metamask-docs/pull/1247)) @@ -109,7 +109,7 @@ of the [MetaMask developer page](https://metamask.io/developer/). - Documented [Snap-defined timeouts](/snaps/reference/permissions/#snap-defined-timeouts). ([#1224](https://github.com/MetaMask/metamask-docs/pull/1224) and [#1227](https://github.com/MetaMask/metamask-docs/pull/1227)) -- Restructured Wallet documentation to emphasize [connecting using EIP-6963](/wallet/how-to/connect). +- Restructured Wallet documentation to emphasize [connecting using EIP-6963](/wallet/connect/wallet-api). ([#1214](https://github.com/MetaMask/metamask-docs/pull/1214)) - Documented [Snaps custom name resolution](/snaps/features/custom-name-resolution). ([#924](https://github.com/MetaMask/metamask-docs/pull/924)) @@ -160,7 +160,7 @@ of the [MetaMask developer page](https://metamask.io/developer/). - Restructured and improved [Wallet documentation](/wallet) and introduced "Wallet API" terminology. ([#1114](https://github.com/MetaMask/metamask-docs/pull/1114) and [#1125](https://github.com/MetaMask/metamask-docs/pull/1125)) -- Documented [how to detect multiple wallets using EIP-6963](/wallet/how-to/connect). +- Documented [how to detect multiple wallets using EIP-6963](/wallet/connect/wallet-api). ([#1094](https://github.com/MetaMask/metamask-docs/pull/1094)) - Documented [how to communicate errors in Snaps](/snaps/how-to/communicate-errors). ([#1117](https://github.com/MetaMask/metamask-docs/pull/1117)) diff --git a/wallet-sidebar.js b/wallet-sidebar.js index d4cf51e5fbe..b1cfcbe90f4 100644 --- a/wallet-sidebar.js +++ b/wallet-sidebar.js @@ -4,12 +4,72 @@ const sidebar = { walletSidebar: [ "index", + { + type: "category", + label: "Connect to MetaMask", + link: { type: "doc", id: "connect/index" }, + items: [ + { + type: "category", + label: "MetaMask SDK", + link: { type: "doc", id: "connect/metamask-sdk/index" }, + items: [ + { + type: "category", + label: "JavaScript", + link: { type: "doc", id: "connect/metamask-sdk/javascript/index" }, + items: [ + { + type: "category", + label: "React", + link: { type: "doc", id: "connect/metamask-sdk/javascript/react/index" }, + items: [ + "connect/metamask-sdk/javascript/react/react-ui", + ], + }, + "connect/metamask-sdk/javascript/pure-js", + "connect/metamask-sdk/javascript/other-web-frameworks", + "connect/metamask-sdk/javascript/nodejs", + "connect/metamask-sdk/javascript/electron", + ], + }, + { + type: "category", + label: "Mobile", + link: { type: "doc", id: "connect/metamask-sdk/mobile/index" }, + items: [ + "connect/metamask-sdk/mobile/ios", + "connect/metamask-sdk/mobile/android", + "connect/metamask-sdk/mobile/react-native", + ], + }, + { + type: "category", + label: "Gaming", + link: { type: "doc", id: "connect/metamask-sdk/gaming/index" }, + items: [ + "connect/metamask-sdk/gaming/unity", + ], + }, + ], + }, + { + type: "category", + label: "Third-party libraries", + items: [{ type: "autogenerated", dirName: "connect/3rd-party-libraries" }], + }, + { + type: "doc", + id: "connect/wallet-api", + }, + ], + collapsed: false, + }, { type: "category", label: "How to", link: { type: "generated-index", slug: "/how-to" }, items: [{ type: "autogenerated", dirName: "how-to" }], - collapsed: false, }, { type: "category", diff --git a/wallet/concepts/sdk/android.md b/wallet/concepts/android.md similarity index 84% rename from wallet/concepts/sdk/android.md rename to wallet/concepts/android.md index 022adbd8e90..07d7249e4bc 100644 --- a/wallet/concepts/sdk/android.md +++ b/wallet/concepts/android.md @@ -1,5 +1,5 @@ --- -sidebar_position: 2 +sidebar_position: 4 description: Learn about the Android SDK architecture. tags: - Android SDK @@ -7,23 +7,22 @@ tags: # Android SDK architecture -The Android version of [MetaMask SDK](index.md) enables your users to easily connect with their +The Android version of [MetaMask SDK](../connect/metamask-sdk/mobile/android.md) enables your users to easily connect with their MetaMask Mobile wallet. 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/use-sdk/mobile/android.md). +- Get started by [setting up the SDK in your Android dapp](../connect/metamask-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. - ::: +::: ## Architecture The following diagram outlines the high-level architecture of the Android SDK: -![Android SDK architecture diagram](../../assets/sdk-android-architecture.png) +![Android SDK architecture diagram](../assets/sdk-android-architecture.png) The MetaMask Android SDK consists of two components: @@ -48,7 +47,7 @@ in Kotlin) using different mechanisms depending on the direction of communicatio The following diagram outlines the communication flow between the Android client SDK and server SDK: -![Android SDK communication diagram](../../assets/sdk-android-communication.png) +![Android SDK communication diagram](../assets/sdk-android-communication.png) The flow is as follows: diff --git a/wallet/concepts/architecture.md b/wallet/concepts/architecture.md index a075d6ee548..779fc668e90 100644 --- a/wallet/concepts/architecture.md +++ b/wallet/concepts/architecture.md @@ -9,7 +9,7 @@ The following diagram outlines the high-level architecture of the MetaMask web3 ![Architecture diagram](../assets/web3-architecture.png) -Using [MetaMask SDK](sdk/index.md), dapps built on multiple platforms can connect to their users' Ethereum +Using [MetaMask SDK](../connect//metamask-sdk/index.md), dapps built on multiple platforms can connect to their users' Ethereum accounts through the MetaMask browser extension and MetaMask Mobile. Dapps can send [Wallet API](wallet-api.md) requests to the users' MetaMask wallet clients. MetaMask then responds to these requests directly or uses [Infura](https://www.infura.io/) (or diff --git a/wallet/concepts/sdk/connections.md b/wallet/concepts/connections.md similarity index 97% rename from wallet/concepts/sdk/connections.md rename to wallet/concepts/connections.md index 5367e5faac0..afa339b16e2 100644 --- a/wallet/concepts/sdk/connections.md +++ b/wallet/concepts/connections.md @@ -1,5 +1,5 @@ --- -sidebar_position: 1 +sidebar_position: 3 sidebar_label: SDK connections description: Learn about how a dapp with the SDK installed connects to MetaMask. tags: @@ -11,7 +11,7 @@ tags: # MetaMask SDK connections -This page provides details on how a dapp with [MetaMask SDK](index.md) installed connects to a +This page provides details on how a dapp with [MetaMask SDK](../connect/metamask-sdk/index.md) installed connects to a user's MetaMask wallet. ## Initial connection flow diff --git a/wallet/concepts/convenience-libraries.md b/wallet/concepts/convenience-libraries.md index 76cd74026b8..6846f60d9e0 100644 --- a/wallet/concepts/convenience-libraries.md +++ b/wallet/concepts/convenience-libraries.md @@ -1,6 +1,6 @@ --- description: Learn about convenience libraries. -sidebar_position: 4 +sidebar_position: 5 --- # Convenience libraries @@ -17,10 +17,10 @@ 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. -You can [use MetaMask SDK](../how-to/use-sdk/index.md), which provides a reliable, secure, and +You can [use MetaMask SDK](../connect/metamask-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 [Wallet API](wallet-api.md) methods with the SDK installed. -You can also [use Web3-Onboard with MetaMask SDK](../how-to/use-sdk/3rd-party-libraries/web3-onboard.md) +You can also [use Web3-Onboard with MetaMask SDK](../connect/3rd-party-libraries/web3-onboard.md) in your JavaScript dapp. diff --git a/wallet/concepts/sdk/index.md b/wallet/concepts/sdk/index.md deleted file mode 100644 index 4222d2fcba0..00000000000 --- a/wallet/concepts/sdk/index.md +++ /dev/null @@ -1,175 +0,0 @@ ---- -description: Learn about MetaMask SDK. -sidebar_position: 3 -tags: - - JavaScript SDK - - iOS SDK - - Android SDK - - Unity SDK ---- - -import Tabs from "@theme/Tabs"; -import TabItem from "@theme/TabItem"; - -# About MetaMask SDK - -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 [Wallet API](../wallet-api.md) methods from -your dapp. -Get started [using the SDK](../../how-to/use-sdk/index.md). - -## Benefits of MetaMask SDK - -MetaMask SDK enables your dapp to provide a seamless user experience for MetaMask users, from -multiple dapp platforms, without relying on third-party libraries. -By integrating your dapp using the SDK, millions of MetaMask Mobile users can connect to their -preferred MetaMask client. -The SDK uses the [MetaMask Ethereum provider](../wallet-api.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 -[Wallet API](../wallet-api.md). - -| Feature | Wallet 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/use-sdk/javascript/connect-and-sign.md) | ❌ | ✅ | -| [Display custom modals](../../how-to/use-sdk/javascript/display-custom-modals.md) in MetaMask | ❌ | ✅ | -| [Make read-only requests](../../how-to/use-sdk/javascript/make-read-only-requests.md) using the Infura API | ❌ | ✅ | -| [Batch multiple RPC requests](../../how-to/use-sdk/javascript/batch-json-rpc-requests.md) | ❌ | ✅ | - -## User experience - -The following are examples of how a user experiences a dapp with the SDK installed, on various platforms. - - - - -When a user accesses your web dapp on a desktop browser that doesn't have the MetaMask extension -installed, a popup appears that prompts the user to either install the MetaMask extension or connect -to MetaMask Mobile using a QR code. - -

- -

- -:::tip Get started - -- 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. - ::: - - - - -When a user accesses your web dapp on a mobile browser, the SDK automatically deeplinks to MetaMask -Mobile (or if the user doesn't already have it, prompts them to install it). -After the user accepts the connection, they're automatically redirected back to your dapp. -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/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. - ::: - - - - -When a user accesses your iOS dapp, the SDK automatically deeplinks to MetaMask Mobile (or if the -user doesn't already have it, prompts them to install it). -After the user accepts the connection, they're automatically redirected back to your dapp. -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/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. - ::: - - - - -When a user accesses your Android dapp, the SDK automatically deeplinks to MetaMask Mobile (or if -the user doesn't already have it, prompts them to install it). -After the user accepts the connection, they're automatically redirected back to your dapp. -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/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. - ::: - - - - -When a user accesses your Node.js dapp, the SDK renders a QR code on the console which users can -scan with their MetaMask Mobile app. - -

- -

- -:::tip Get started - -- 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. - ::: - - - - -When a user accesses your Unity game, the SDK renders a QR code in the game UI using a dedicated -prefab which players can scan with their MetaMask Mobile app. -It also supports deeplinking on mobile platforms, as demonstrated in the following screen recording. - -

- -

- -:::tip Get started - -- Get started by [setting up the SDK in your Unity game](../../how-to/use-sdk/gaming/unity/index.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. - ::: - - - - -You can read more about the [connection flow between the SDK and MetaMask](connections.md). diff --git a/wallet/concepts/signing-methods.md b/wallet/concepts/signing-methods.md index 4963e2bbd6c..9a8820aafdc 100644 --- a/wallet/concepts/signing-methods.md +++ b/wallet/concepts/signing-methods.md @@ -1,6 +1,6 @@ --- description: Learn about the RPC methods for signing transactions in MetaMask. -sidebar_position: 5 +sidebar_position: 6 --- # Signing methods diff --git a/wallet/concepts/smart-contracts.md b/wallet/concepts/smart-contracts.md index ac431e636ef..a8578bdb119 100644 --- a/wallet/concepts/smart-contracts.md +++ b/wallet/concepts/smart-contracts.md @@ -1,13 +1,13 @@ --- description: Learn about interacting with smart contracts. -sidebar_position: 7 +sidebar_position: 8 --- # Smart contracts This is a high-level overview of interacting with smart contracts. You can also see how to -[interact with smart contracts from your Unity game](../how-to/use-sdk/gaming/unity/smart-contracts/index.md). +[interact with smart contracts from your Unity game](../how-to/use-unity-sdk/smart-contracts/index.md). To interact with a smart contract, your dapp needs the following information: diff --git a/wallet/concepts/wallet-api.md b/wallet/concepts/wallet-api.md index eb83e5f72bf..c9f806570e2 100644 --- a/wallet/concepts/wallet-api.md +++ b/wallet/concepts/wallet-api.md @@ -28,7 +28,7 @@ MetaMask supports [EIP-6963](https://eips.ethereum.org/EIPS/eip-6963), which int alternative wallet detection mechanism to the `window.ethereum` injected provider. This alternative mechanism enables dapps to support [wallet interoperability](wallet-interoperability.md) by discovering multiple injected wallet providers in a user's browser. -We recommend [using this mechanism to connect to MetaMask](../how-to/connect/index.md). +We recommend [using this mechanism to connect to MetaMask](../connect/index.md). You can access the provider API using the selected EIP-6963 provider object. Throughout this documentation, we refer to the selected provider using `provider`. @@ -83,15 +83,12 @@ The following methods are restricted: Granting permission for `eth_accounts` also grants permissions for the following methods: - [`eth_sendTransaction`](/wallet/reference/eth_sendTransaction) - - [`personal_sign`](/wallet/reference/personal_sign) - - [`eth_signTypedData_v4`](/wallet/reference/eth_signTypedData_v4) - :::caution important 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](../how-to/connect/access-accounts.md) for more information. + See [how to access a user's accounts](../how-to/access-accounts.md) for more information. ::: - [`wallet_snap`](/snaps/reference/wallet-api-for-snaps/#wallet_snap) - Gaining permission requires diff --git a/wallet/concepts/wallet-interoperability.md b/wallet/concepts/wallet-interoperability.md index 51d4781f715..66acb0adb01 100644 --- a/wallet/concepts/wallet-interoperability.md +++ b/wallet/concepts/wallet-interoperability.md @@ -1,6 +1,6 @@ --- description: Learn about wallet interoperability. -sidebar_position: 6 +sidebar_position: 7 --- # Wallet interoperability @@ -27,14 +27,14 @@ provided from each installed wallet:

-You can [connect to MetaMask using EIP-6963](../how-to/connect/index.md) and see the +You can [connect to MetaMask using EIP-6963](../connect/wallet-api.md) and see the [EIP-6963 Vite React + TypeScript demo](https://github.com/MetaMask/vite-react-ts-eip-6963/tree/main) for more information. ## EIP-6963 interfaces Wallets that support EIP-6963 implement and expose the following standardized interfaces. -When [connecting to MetaMask using EIP-6963](../how-to/connect/index.md), it's important to review +When [connecting to MetaMask using EIP-6963](../connect/wallet-api.md), it's important to review and understand these interfaces. ### Provider info @@ -102,7 +102,7 @@ If you intend to support discovery of other wallets, we recommend using other me EIP-6963 support such as [Wagmi 2+](https://wagmi.sh). ::: -The [MetaMask JavaScript SDK](../how-to/use-sdk/javascript/index.md) automatically checks +The [MetaMask JavaScript SDK](../connect/metamask-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. @@ -125,6 +125,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](/wallet/tutorials/javascript-dapp-simple). +[detect MetaMask using the `window.ethereum` provider](../tutorials/javascript-dapp-simple.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/use-sdk/3rd-party-libraries/wagmi.md b/wallet/connect/3rd-party-libraries/wagmi.md similarity index 85% rename from wallet/how-to/use-sdk/3rd-party-libraries/wagmi.md rename to wallet/connect/3rd-party-libraries/wagmi.md index 9446a81a5de..e72c38b9da1 100644 --- a/wallet/how-to/use-sdk/3rd-party-libraries/wagmi.md +++ b/wallet/connect/3rd-party-libraries/wagmi.md @@ -1,17 +1,17 @@ --- description: Integrate MetaMask SDK with Wagmi in your JavaScript dapp. -sidebar_position: 2 +sidebar_position: 1 sidebar_label: Wagmi tags: - JavaScript SDK --- -# Use Wagmi with MetaMask SDK +# Connect to MetaMask using Wagmi [Wagmi](https://wagmi.sh/) is a powerful and efficient React Hooks library designed to streamline dapp development by simplifying Ethereum interactions. -You can integrate [MetaMask SDK](../../../concepts/sdk/index.md) into your dapp alongside Wagmi, +You can integrate MetaMask SDK into your dapp alongside Wagmi, using the MetaMask connector with Wagmi, to enable your users to seamlessly and securely connect to the MetaMask browser extension and MetaMask Mobile. @@ -19,13 +19,13 @@ the MetaMask browser extension and MetaMask Mobile. - Ensure you have a basic understanding of Ethereum smart contracts and React Hooks. - Set up a project with [Wagmi](https://wagmi.sh/react/getting-started). -- Create an Infura API key and allowlist to [make read-only requests](../javascript/make-read-only-requests.md). +- Create an Infura API key and allowlist to [make read-only requests](../../how-to/make-read-only-requests.md). ## Steps ### 1. Configure MetaMask SDK -In your Wagmi project, configure MetaMask SDK with the proper [SDK options](../../../reference/sdk-js-options.md). +In your Wagmi project, configure MetaMask SDK with the proper [SDK options](../../reference/sdk-js-options.md). ```javascript const MetaMaskOptions = { @@ -39,20 +39,20 @@ const MetaMaskOptions = { #### Dapp metadata -Specify the [`dappMetadata`](../../../reference/sdk-js-options.md#dappmetadata) option to help +Specify the [`dappMetadata`](../../reference/sdk-js-options.md#dappmetadata) option to help identify your dapp within the MetaMask ecosystem. This option is required when configuring the MetaMask connector with Wagmi. #### Infura API key -We recommend specifying the [`infuraAPIKey`](../../../reference/sdk-js-options.md#infuraapikey) -option to [make read-only requests](../javascript/make-read-only-requests.md) using the Infura API. +We recommend specifying the [`infuraAPIKey`](../../reference/sdk-js-options.md#infuraapikey) +option to [make read-only requests](../../how-to/make-read-only-requests.md) using the Infura API. Read more about the [benefits of using the Infura API with Wagmi](#benefits-of-using-the-infura-api-with-wagmi). #### Universal links We recommend using universal links instead of deeplinks to avoid issues on iOS. -Thus, do not enable the [`useDeeplink`](../../../reference/sdk-js-options.md#usedeeplink) option. +Thus, do not enable the [`useDeeplink`](../../reference/sdk-js-options.md#usedeeplink) option. Using universal links ensures a smoother transition for users accessing your dapp from mobile devices, providing a better user experience compared to traditional deeplinking methods. @@ -118,11 +118,11 @@ Mobile dapps can lose their continuous connection with MetaMask, causing read-on These are some errors that might occur in mobile environments: -![Wagmi errors](../../../assets/wagmi-errors.png) +![Wagmi errors](../../assets/wagmi-errors.png) To overcome this limitation in mobile dapps that rely on a continuous connection with MetaMask, use the Infura API to make read-only requests. -You can do this by [configuring the SDK with an Infura API key](#2-configure-the-sdk). +You can do this by [configuring the SDK with an Infura API key](#2-configure-wagmi-with-the-metamask-connector). This approach offloads the read operations to Infura's nodes, reducing the load on your own infrastructure and ensuring high availability and reliability, independent of the user's wallet connection. diff --git a/wallet/how-to/use-sdk/3rd-party-libraries/web3-onboard.md b/wallet/connect/3rd-party-libraries/web3-onboard.md similarity index 87% rename from wallet/how-to/use-sdk/3rd-party-libraries/web3-onboard.md rename to wallet/connect/3rd-party-libraries/web3-onboard.md index fec5a61065c..0025f4ab449 100644 --- a/wallet/how-to/use-sdk/3rd-party-libraries/web3-onboard.md +++ b/wallet/connect/3rd-party-libraries/web3-onboard.md @@ -1,19 +1,19 @@ --- description: Integrate MetaMask SDK with Web3-Onboard in your JavaScript dapp. -sidebar_position: 1 +sidebar_position: 2 sidebar_label: Web3-Onboard tags: - JavaScript SDK --- -# Use Web3-Onboard with MetaMask SDK +# Connect to MetaMask using Web3-Onboard [Web3-Onboard](https://onboard.blocknative.com/) is a JavaScript library that simplifies the process of onboarding users into dapps. It provides a smooth user interface, a variety of wallet integrations, and is highly customizable to meet the needs of your dapp. -You can integrate [MetaMask SDK](../../../concepts/sdk/index.md) into your dapp alongside Web3-Onboard, +You can integrate MetaMask SDK into your dapp alongside Web3-Onboard, using the Web3-Onboard MetaMask module, to enable your users to seamlessly and securely connect to the MetaMask browser extension and MetaMask Mobile. @@ -41,8 +41,8 @@ import metamaskSDK from "@web3-onboard/metamask" ### 3. Instantiate the module -Instantiate the module using any [JavaScript SDK options](../../../reference/sdk-js-options.md), for -example, [`dappMetadata`](../../../reference/sdk-js-options.md#dappmetadata): +Instantiate the module using any [JavaScript SDK options](../../reference/sdk-js-options.md), for +example, [`dappMetadata`](../../reference/sdk-js-options.md#dappmetadata): ```javascript const metamaskSDKWallet = metamaskSDK({ diff --git a/wallet/connect/index.md b/wallet/connect/index.md new file mode 100644 index 00000000000..753a94ac243 --- /dev/null +++ b/wallet/connect/index.md @@ -0,0 +1,55 @@ +--- +description: Connect to MetaMask using various options. +--- + +# Connect to MetaMask + +You can connect your dapp to MetaMask using one of the following methods: + +- [MetaMask SDK](metamask-sdk/index.md) +- Third-party libraries with SDK support, such as [Wagmi](3rd-party-libraries/wagmi.md) or + [Web3-Onboard](3rd-party-libraries/web3-onboard.md) +- The MetaMask [Wallet API](wallet-api.md) directly + +The following table compares the supported features of each connection option: + +| Feature | MetaMask SDK only | Third-party libraries with SDK | Wallet API only | +|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:-----------------:|:------------------------------:|:---------------:| +| Connect from a web dapp to the MetaMask extension | ✓ | ✓ | ✓ | +| Connect from a web dapp, desktop, mobile, and gaming dapps to MetaMask Mobile | ✓ | ✓ | | +| Connect to MetaMask using the [EIP-6963 provider](../concepts/wallet-interoperability.md) | ✓ | ✓ | ✓ | +| Connect to other wallets using the [EIP-6963 provider](../concepts/wallet-interoperability.md) | | ✓ | ✓ | +| Custom RPC methods such as [`connectAndSign`](../how-to/sign-data/connect-and-sign.md), [custom modals](../how-to/display/display-custom-modals.md), [read-only requests](../how-to/make-read-only-requests.md) using Infura API, and [RPC request batching](../how-to/batch-json-rpc-requests.md) | ✓ | ✓ | | + +## MetaMask SDK + +MetaMask SDK ensures a reliable and secure connection to MetaMask Mobile across various platforms. For web dapps, it also enables users to connect via the MetaMask browser extension. You can seamlessly integrate MetaMask SDK into existing projects without modifying underlying Wallet API calls. + +Key features include: + +- **Multi-platform support** – Connect from web, desktop, mobile, and gaming platforms. +- **Seamless mobile integration** – Use QR codes or deeplinks to establish persistent connections with MetaMask Mobile. +- **EIP-6963 detection** – Automatically detect MetaMask wallets, with or without third-party libraries. +- **RPC request batching** – Improve efficiency by batching multiple requests into a single call. + + +Get started using [MetaMask SDK](metamask-sdk/index.md). + +## Third-party libraries + +MetaMask SDK integrates seamlessly with libraries like Wagmi and Web3-Onboard, simplifying wallet connections and supporting multiple wallets. These libraries streamline connection logic and offer additional features for managing wallets. + +:::note +Trade-offs when using third-party libraries: + +- Reduced control over specific MetaMask features. +- Potential inconsistencies across different wallets due to multi-wallet support. +::: + +Get started with [Wagmi](3rd-party-libraries/wagmi.md) or [Web3-Onboard](3rd-party-libraries/web3-onboard.md). + +## Wallet API + +For direct integration, you can use the Wallet API to manage Ethereum accounts, sign data, and send transactions without the SDK. + +Get started with the [Wallet API](wallet-api.md). diff --git a/wallet/how-to/use-sdk/gaming/index.md b/wallet/connect/metamask-sdk/gaming/index.md similarity index 56% rename from wallet/how-to/use-sdk/gaming/index.md rename to wallet/connect/metamask-sdk/gaming/index.md index cd5955959af..e05f192972f 100644 --- a/wallet/how-to/use-sdk/gaming/index.md +++ b/wallet/connect/metamask-sdk/gaming/index.md @@ -1,6 +1,6 @@ --- sidebar_label: Gaming -sidebar_position: 2 +sidebar_position: 3 description: Set up the SDK in your gaming dapp. tags: - Unity SDK @@ -8,9 +8,8 @@ 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 into your gaming dapp to enable your users to easily connect with their MetaMask Mobile wallet. See the instructions for the following gaming platforms: -- [Unity](unity/index.md) -- [Unreal Engine](unreal-engine.md) (coming soon) +- [Unity](unity.md) diff --git a/wallet/how-to/use-sdk/gaming/unity/index.md b/wallet/connect/metamask-sdk/gaming/unity.md similarity index 94% rename from wallet/how-to/use-sdk/gaming/unity/index.md rename to wallet/connect/metamask-sdk/gaming/unity.md index 687a83fbdd0..5dcda1b3550 100644 --- a/wallet/how-to/use-sdk/gaming/unity/index.md +++ b/wallet/connect/metamask-sdk/gaming/unity.md @@ -10,7 +10,7 @@ import YoutubeEmbed from "@site/src/components/YoutubeEmbed"; # Use MetaMask SDK with Unity -Import [MetaMask SDK](../../../../concepts/sdk/index.md) into your +Import MetaMask SDK 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. @@ -97,7 +97,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 @@ -139,7 +139,7 @@ The transport field is also required if you want to use it isolated from the can by the transport, then it generates the QR code for you. :::info Connect and sign -You can also [use the `connectAndSign` method](connect-and-sign.md) to +You can also [use the `connectAndSign` method](../../../how-to/use-unity-sdk/connect-and-sign.md) to connect to MetaMask and sign data in a single interaction. ::: @@ -178,7 +178,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. ::: @@ -263,7 +263,7 @@ The SDK is filled with precompiled libraries to save on runtime compilation. Once you have the MetaMask Unity SDK set up, you can: -- [Connect and sign in Unity.](connect-and-sign.md) -- [Set up Infura in Unity.](infura.md) -- [Interact with smart contracts in Unity.](smart-contracts/index.md) -- [Enable human-readable addresses in Unity using Decentraweb.](dweb.md) +- [Connect and sign in Unity.](../../../how-to/use-unity-sdk/connect-and-sign.md) +- [Set up Infura in Unity.](../../../how-to/use-unity-sdk/infura.md) +- [Interact with smart contracts in Unity.](../../../how-to/use-unity-sdk/smart-contracts/index.md) +- [Enable human-readable addresses in Unity using Decentraweb.](../../../how-to/use-unity-sdk/dweb.md) diff --git a/wallet/connect/metamask-sdk/index.md b/wallet/connect/metamask-sdk/index.md new file mode 100644 index 00000000000..2f2f60763d6 --- /dev/null +++ b/wallet/connect/metamask-sdk/index.md @@ -0,0 +1,72 @@ +--- +sidebar_position: 1 +description: Use the SDK in your dapp. +tags: + - JavaScript SDK + - iOS SDK + - Android SDK + - Unity SDK +--- + +# MetaMask SDK + +MetaMask SDK provides a reliable, secure, and seamless connection between your dapp and MetaMask (extension and Mobile). It supports multiple platforms, ensuring flexibility for your integration needs. + +Key features include: + +- **Multi-platform support** – Connect from web, desktop, mobile, and gaming platforms. +- **Seamless mobile integration** – Use QR codes or deeplinks to establish persistent connections with MetaMask Mobile. +- **EIP-6963 detection** – Automatically detect MetaMask wallets, with or without third-party libraries. +- **RPC request batching** – Improve efficiency by batching multiple requests into a single call. + +Get started with the SDK on the following platforms: + +
+
+
+

💻 JavaScript

+
+
+ +
+
+
+
+

📱 Mobile

+
+
+ +
+
+
+
+

🎮 Gaming

+
+
+ +
+
+
+
+
+

↔️ Third-party libraries

+
+
+ +
+
diff --git a/wallet/how-to/use-sdk/javascript/electron.md b/wallet/connect/metamask-sdk/javascript/electron.md similarity index 82% rename from wallet/how-to/use-sdk/javascript/electron.md rename to wallet/connect/metamask-sdk/javascript/electron.md index d8e70d7bf8a..47815e25ec1 100644 --- a/wallet/how-to/use-sdk/javascript/electron.md +++ b/wallet/connect/metamask-sdk/javascript/electron.md @@ -1,6 +1,6 @@ --- sidebar_label: Electron -sidebar_position: 6 +sidebar_position: 5 description: Set up the SDK in your Electron dapp. tags: - JavaScript SDK @@ -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 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/use-sdk/javascript/index.md b/wallet/connect/metamask-sdk/javascript/index.md similarity index 86% rename from wallet/how-to/use-sdk/javascript/index.md rename to wallet/connect/metamask-sdk/javascript/index.md index 100f2a6466d..6361391cedb 100644 --- a/wallet/how-to/use-sdk/javascript/index.md +++ b/wallet/connect/metamask-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 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: @@ -17,7 +17,6 @@ You can also see instructions for the following JavaScript-based platforms: - [React UI](react/react-ui.md) - [Pure JavaScript](pure-js.md) - [Other web frameworks](other-web-frameworks.md) -- [React Native](react-native.md) - [Node.js](nodejs.md) - [Electron](electron.md) @@ -73,9 +72,9 @@ const ethereum = MMSDK.getProvider() - Use [`dappMetadata`](../../../reference/sdk-js-options.md#dappmetadata) to display information about your dapp in the MetaMask connection modal. - Use [`infuraAPIKey`](../../../reference/sdk-js-options.md#infuraapikey) to - [make read-only RPC requests](make-read-only-requests.md) from your dapp. + [make read-only RPC requests](../../../how-to/make-read-only-requests.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). + the displayed modals](../../../how-to/display/display-custom-modals.md). ### 4. Use the SDK @@ -88,8 +87,8 @@ prompts the installation or connection popup to appear. ethereum.request({ method: "eth_requestAccounts", params: [] }) ``` -You can also call the SDK's [`connectAndSign`](connect-and-sign.md) method, and -[batch multiple JSON-RPC requests](batch-json-rpc-requests.md) using the `metamask_batch` method. +You can also call the SDK's [`connectAndSign`](../../../how-to/sign-data/connect-and-sign.md) method, and +[batch multiple JSON-RPC requests](../../../how-to/batch-json-rpc-requests.md) using the `metamask_batch` method. ## Example diff --git a/wallet/how-to/use-sdk/javascript/nodejs.md b/wallet/connect/metamask-sdk/javascript/nodejs.md similarity index 83% rename from wallet/how-to/use-sdk/javascript/nodejs.md rename to wallet/connect/metamask-sdk/javascript/nodejs.md index 6cde07e5852..b52720cc6ce 100644 --- a/wallet/how-to/use-sdk/javascript/nodejs.md +++ b/wallet/connect/metamask-sdk/javascript/nodejs.md @@ -1,6 +1,6 @@ --- sidebar_label: Node.js -sidebar_position: 5 +sidebar_position: 4 description: Set up the SDK in your Node.js dapp. tags: - JavaScript SDK @@ -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] 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. @@ -57,9 +57,9 @@ const ethereum = MMSDK.getProvider() - Use [`dappMetadata`](../../../reference/sdk-js-options.md#dappmetadata) to display information about your dapp in the MetaMask connection modal. - Use [`infuraAPIKey`](../../../reference/sdk-js-options.md#infuraapikey) to - [make read-only RPC requests](make-read-only-requests.md) from your dapp. + [make read-only RPC requests](../../../how-to/make-read-only-requests.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). + the displayed modals](../../../how-to/display/display-custom-modals.md). ### 4. Use the SDK @@ -72,8 +72,8 @@ prompts the installation or connection popup to appear. ethereum.request({ method: "eth_requestAccounts", params: [] }) ``` -You can also call the SDK's [`connectAndSign`](connect-and-sign.md) method, and -[batch multiple JSON-RPC requests](batch-json-rpc-requests.md) using the `metamask_batch` method. +You can also call the SDK's [`connectAndSign`](../../../how-to/sign-data/connect-and-sign.md) method, and +[batch multiple JSON-RPC requests](../../../how-to/batch-json-rpc-requests.md) using the `metamask_batch` method. ## Example diff --git a/wallet/how-to/use-sdk/javascript/other-web-frameworks.md b/wallet/connect/metamask-sdk/javascript/other-web-frameworks.md similarity index 84% rename from wallet/how-to/use-sdk/javascript/other-web-frameworks.md rename to wallet/connect/metamask-sdk/javascript/other-web-frameworks.md index 2f5c54dcea4..9366c3921ee 100644 --- a/wallet/how-to/use-sdk/javascript/other-web-frameworks.md +++ b/wallet/connect/metamask-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 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. @@ -58,9 +58,9 @@ const ethereum = MMSDK.getProvider(); - Use [`dappMetadata`](../../../reference/sdk-js-options.md#dappmetadata) to display information about your dapp in the MetaMask connection modal. - Use [`infuraAPIKey`](../../../reference/sdk-js-options.md#infuraapikey) to - [make read-only RPC requests](make-read-only-requests.md) from your dapp. + [make read-only RPC requests](../../../how-to/make-read-only-requests.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). + the displayed modals](../../../how-to/display/display-custom-modals.md). ### 4. Use the SDK @@ -73,8 +73,8 @@ prompts the installation or connection popup to appear. ethereum.request({ method: "eth_requestAccounts", params: [] }) ``` -You can also call the SDK's [`connectAndSign`](connect-and-sign.md) method, and -[batch multiple JSON-RPC requests](batch-json-rpc-requests.md) using the `metamask_batch` method. +You can also call the SDK's [`connectAndSign`](../../../how-to/sign-data/connect-and-sign.md) method, and +[batch multiple JSON-RPC requests](../../../how-to/batch-json-rpc-requests.md) using the `metamask_batch` method. ## Example diff --git a/wallet/how-to/use-sdk/javascript/pure-js.md b/wallet/connect/metamask-sdk/javascript/pure-js.md similarity index 82% rename from wallet/how-to/use-sdk/javascript/pure-js.md rename to wallet/connect/metamask-sdk/javascript/pure-js.md index caf89a1f18c..c4cfa9053a3 100644 --- a/wallet/how-to/use-sdk/javascript/pure-js.md +++ b/wallet/connect/metamask-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 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. @@ -44,17 +44,17 @@ You can configure the SDK using any [options](../../../reference/sdk-js-options. - Use [`dappMetadata`](../../../reference/sdk-js-options.md#dappmetadata) to display information about your dapp in the MetaMask connection modal. - Use [`infuraAPIKey`](../../../reference/sdk-js-options.md#infuraapikey) to - [make read-only RPC requests](make-read-only-requests.md) from your dapp. + [make read-only RPC requests](../../../how-to/make-read-only-requests.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). + the displayed modals](../../../how-to/display/display-custom-modals.md). You can call any [provider API methods](../../../reference/provider-api.md) using the SDK. Always call [`eth_requestAccounts`](/wallet/reference/eth_requestaccounts) using [`request()`](../../../reference/provider-api.md#request) first, since it prompts the installation or connection popup to appear. -You can also call the SDK's [`connectAndSign`](connect-and-sign.md) method, and -[batch multiple JSON-RPC requests](batch-json-rpc-requests.md) using the `metamask_batch` method. +You can also call the SDK's [`connectAndSign`](../../../how-to/sign-data/connect-and-sign.md) method, and +[batch multiple JSON-RPC requests](../../../how-to/batch-json-rpc-requests.md) using the `metamask_batch` method. ## Example diff --git a/wallet/how-to/use-sdk/javascript/react/index.md b/wallet/connect/metamask-sdk/javascript/react/index.md similarity index 93% rename from wallet/how-to/use-sdk/javascript/react/index.md rename to wallet/connect/metamask-sdk/javascript/react/index.md index 715650c1681..12cd0598f99 100644 --- a/wallet/how-to/use-sdk/javascript/react/index.md +++ b/wallet/connect/metamask-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 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. @@ -87,9 +87,9 @@ Important options include: - [`dappMetadata`](../../../../reference/sdk-js-options.md#dappmetadata) - Use this to display information about your dapp in the MetaMask connection modal. - [`infuraAPIKey`](../../../../reference/sdk-js-options.md#infuraapikey) - Use this to - [make read-only RPC requests](../make-read-only-requests.md) from your dapp. + [make read-only RPC requests](../../../../how-to/make-read-only-requests.md) from your dapp. - [`modals`](../../../../reference/sdk-js-options.md#modals) - Use this to [customize the logic and UI of - the displayed modals](../display-custom-modals.md). + the displayed modals](../../../../how-to/display/display-custom-modals.md). ### 4. Use the SDK @@ -147,7 +147,7 @@ export const App = () => { The `connect` method initiates a connection to MetaMask and returns an array of connected accounts. -You can also [use the `connectAndSign` method](../connect-and-sign.md) to +You can also [use the `connectAndSign` method](../../../../how-to/sign-data/connect-and-sign.md) to connect to MetaMask and sign data in a single interaction: ```js @@ -163,7 +163,7 @@ const connectAndSign = async () => { } ``` -You can also [batch multiple JSON-RPC requests](../batch-json-rpc-requests.md) using the +You can also [batch multiple JSON-RPC requests](../../../../how-to/batch-json-rpc-requests.md) using the `metamask_batch` method. ## Example diff --git a/wallet/how-to/use-sdk/javascript/react/react-ui.md b/wallet/connect/metamask-sdk/javascript/react/react-ui.md similarity index 95% rename from wallet/how-to/use-sdk/javascript/react/react-ui.md rename to wallet/connect/metamask-sdk/javascript/react/react-ui.md index 5baab2357d6..0597aa472c7 100644 --- a/wallet/how-to/use-sdk/javascript/react/react-ui.md +++ b/wallet/connect/metamask-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 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 @@ -87,9 +87,9 @@ Important options include: - [`dappMetadata`](../../../../reference/sdk-js-options.md#dappmetadata) - Use this to display information about your dapp in the MetaMask connection modal. - [`infuraAPIKey`](../../../../reference/sdk-js-options.md#infuraapikey) - Use this to - [make read-only RPC requests](../make-read-only-requests.md) from your dapp. + [make read-only RPC requests](../../../../how-to/make-read-only-requests.md) from your dapp. - [`modals`](../../../../reference/sdk-js-options.md#modals) - Use this to [customize the logic and UI of - the displayed modals](../display-custom-modals.md). + the displayed modals](../../../../how-to/display/display-custom-modals.md). ### 4. Use the SDK diff --git a/wallet/how-to/use-sdk/mobile/android.md b/wallet/connect/metamask-sdk/mobile/android.md similarity index 97% rename from wallet/how-to/use-sdk/mobile/android.md rename to wallet/connect/metamask-sdk/mobile/android.md index 8bd2f3c4f83..be341f35406 100644 --- a/wallet/how-to/use-sdk/mobile/android.md +++ b/wallet/connect/metamask-sdk/mobile/android.md @@ -12,11 +12,11 @@ import TabItem from "@theme/TabItem"; # Use MetaMask SDK with Android -Import [MetaMask SDK](../../../concepts/sdk/index.md) into your native Android dapp to enable +Import MetaMask SDK 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/android.md) ::: ## Prerequisites @@ -249,7 +249,7 @@ The following examples use coroutines. The following example gets the user's account balance by calling [`eth_getBalance`](/wallet/reference/eth_getBalance). -This is a [read-only request](../javascript/make-read-only-requests.md), which uses the Infura API +This is a [read-only request](../../../how-to/make-read-only-requests.md), which uses the Infura API if an `infuraAPIKey` is provided in the `SDKOptions`. We recommend using the Infura API to provide a seamless user experience. @@ -289,7 +289,7 @@ when (val result = ethereum.ethSignTypedDataV4(message, address)) { #### Example: Batch requests The following example requests the user to sign multiple messages at once by -[batching multiple requests](../javascript/batch-json-rpc-requests.md) that call +[batching multiple requests](../../../how-to/batch-json-rpc-requests.md) that call [`personal_sign`](/wallet/reference/personal_sign). ```kotlin diff --git a/wallet/how-to/use-sdk/mobile/index.md b/wallet/connect/metamask-sdk/mobile/index.md similarity index 64% rename from wallet/how-to/use-sdk/mobile/index.md rename to wallet/connect/metamask-sdk/mobile/index.md index 8ee0bff2ecf..fbfcea820d5 100644 --- a/wallet/how-to/use-sdk/mobile/index.md +++ b/wallet/connect/metamask-sdk/mobile/index.md @@ -1,6 +1,6 @@ --- sidebar_label: Mobile -sidebar_position: 3 +sidebar_position: 2 description: Set up the SDK in your mobile dapp. tags: - iOS SDK @@ -9,10 +9,10 @@ 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 into your mobile dapp to enable your users to easily connect with their MetaMask Mobile wallet. See the instructions for the following mobile platforms: -- [React Native](../javascript/react-native.md) - [iOS](ios.md) - [Android](android.md) +- [React Native](react-native.md) diff --git a/wallet/how-to/use-sdk/mobile/ios.md b/wallet/connect/metamask-sdk/mobile/ios.md similarity index 98% rename from wallet/how-to/use-sdk/mobile/ios.md rename to wallet/connect/metamask-sdk/mobile/ios.md index 7d57c21e5c3..bbeb30e9098 100644 --- a/wallet/how-to/use-sdk/mobile/ios.md +++ b/wallet/connect/metamask-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 into your native iOS dapp to enable your users to easily connect with their MetaMask Mobile wallet. ## Prerequisites diff --git a/wallet/how-to/use-sdk/javascript/react-native.md b/wallet/connect/metamask-sdk/mobile/react-native.md similarity index 96% rename from wallet/how-to/use-sdk/javascript/react-native.md rename to wallet/connect/metamask-sdk/mobile/react-native.md index 795ecc51f0b..2ad17cf723e 100644 --- a/wallet/how-to/use-sdk/javascript/react-native.md +++ b/wallet/connect/metamask-sdk/mobile/react-native.md @@ -1,6 +1,6 @@ --- -sidebar_label: React Native and Expo -sidebar_position: 4 +sidebar_label: React Native +sidebar_position: 3 description: Set up the SDK in your React Native dapp. tags: - JavaScript SDK @@ -9,9 +9,9 @@ tags: import Tabs from "@theme/Tabs"; import TabItem from "@theme/TabItem"; -# Use MetaMask SDK with React Native and Expo +# Use MetaMask SDK with React Native -Import [MetaMask SDK](../../../concepts/sdk/index.md) into your React Native or Expo dapp to +Import MetaMask SDK 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/index.md b/wallet/connect/wallet-api.md similarity index 95% rename from wallet/how-to/connect/index.md rename to wallet/connect/wallet-api.md index 993f3cd9705..d7f0174f284 100644 --- a/wallet/how-to/connect/index.md +++ b/wallet/connect/wallet-api.md @@ -1,10 +1,10 @@ --- -description: Connect to MetaMask via EIP-6963. -sidebar_position: 1 +description: Connect to MetaMask using the Wallet API and EIP-6963. +sidebar_label: Wallet API toc_max_heading_level: 4 --- -# Connect to MetaMask +# Connect to MetaMask using the Wallet API You can connect your dapp to users' MetaMask wallets by detecting MetaMask in their browsers and connecting to their accounts. @@ -13,11 +13,11 @@ introduced by [EIP-6963](https://eips.ethereum.org/EIPS/eip-6963). This approach allows you to detect multiple installed wallets and connect to them without conflicts. :::info -Learn more about EIP-6963 in [Wallet interoperability](../../concepts/wallet-interoperability.md). +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. +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) @@ -56,7 +56,7 @@ npm create vite@latest vanilla-ts-6963 -- --template vanilla-ts #### 2. Set up the project In your Vite project, update `src/vite-env.d.ts` with the -[EIP-6963 interfaces](../../concepts/wallet-interoperability.md#eip-6963-interfaces): +[EIP-6963 interfaces](../concepts/wallet-interoperability.md#eip-6963-interfaces): ```typescript title="vite-env.d.ts" /// @@ -213,7 +213,7 @@ npm create vite@latest react-ts-6963 -- --template react-ts #### 2. Set up the project In your Vite project, update `src/vite-env.d.ts` with the -[EIP-6963 interfaces](../../concepts/wallet-interoperability.md#eip-6963-interfaces): +[EIP-6963 interfaces](../concepts/wallet-interoperability.md#eip-6963-interfaces): ```typescript title="vite-env.d.ts" /// @@ -445,7 +445,7 @@ You can clone the repository and run the example locally using `npm i && npm run After connecting to MetaMask directly, you can: -- [Detect, add, and switch networks](../manage-networks). -- [Send transactions](../send-transactions.md). -- [Sign data](../sign-data/index.md). -- [Display tokens, contract methods, and icons in MetaMask](../display). +- [Detect, add, and switch networks](../how-to/manage-networks). +- [Send transactions](../how-to/send-transactions.md). +- [Sign data](../how-to/sign-data/index.md). +- [Display tokens, contract methods, and icons in MetaMask](../how-to/display). diff --git a/wallet/how-to/connect/access-accounts.md b/wallet/how-to/access-accounts.md similarity index 93% rename from wallet/how-to/connect/access-accounts.md rename to wallet/how-to/access-accounts.md index e071a9ed516..a629501f41f 100644 --- a/wallet/how-to/connect/access-accounts.md +++ b/wallet/how-to/access-accounts.md @@ -1,19 +1,19 @@ --- description: Access a user's accounts and handle changed accounts. -sidebar_position: 3 +sidebar_position: 1 --- # 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. ::: @@ -28,7 +28,7 @@ When accessing a user's accounts: :::caution Important This section describes how to create a single connect button. -When connecting to multiple wallets, use the [Connect to MetaMask](index.md) guide to create +When connecting to multiple wallets, use the [Connect to MetaMask](../get-started/wallet-api.md) guide to create multiple connect buttons. ::: @@ -81,7 +81,7 @@ The following HTML code displays the button and the current account: 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. The following code handles user accounts and detects when the user changes accounts: @@ -133,4 +133,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/use-sdk/javascript/batch-json-rpc-requests.md b/wallet/how-to/batch-json-rpc-requests.md similarity index 96% rename from wallet/how-to/use-sdk/javascript/batch-json-rpc-requests.md rename to wallet/how-to/batch-json-rpc-requests.md index 14c770714fd..7b22de6aeee 100644 --- a/wallet/how-to/use-sdk/javascript/batch-json-rpc-requests.md +++ b/wallet/how-to/batch-json-rpc-requests.md @@ -1,13 +1,13 @@ --- description: Batch multiple JSON-RPC requests using MetaMask SDK. -sidebar_position: 9 +sidebar_position: 6 tags: - JavaScript SDK --- # Batch JSON-RPC requests -You can batch multiple JSON-RPC requests using [MetaMask SDK](../../../concepts/sdk/index.md). +You can batch multiple JSON-RPC requests using [MetaMask SDK](../connect/metamask-sdk/index.md). The SDK's `metamask_batch` method enables you to batch multiple JSON-RPC requests in a single call, providing a streamlined approach for dapps to interact with EVM networks, and enabling complex @@ -29,7 +29,7 @@ enhancing the user experience and operational efficiency. ## Prerequisites -[Set up MetaMask SDK](index.md) in your JavaScript dapp. +[Set up MetaMask SDK](../connect/metamask-sdk/javascript/index.md) in your JavaScript dapp. ## Use the `metamask_batch` method diff --git a/wallet/how-to/display/_category_.json b/wallet/how-to/display/_category_.json index ce70ada5944..18a9beba55f 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": 7, "link": { "type": "generated-index", "slug": "how-to/display", diff --git a/wallet/how-to/use-sdk/javascript/display-custom-modals.md b/wallet/how-to/display/display-custom-modals.md similarity index 85% rename from wallet/how-to/use-sdk/javascript/display-custom-modals.md rename to wallet/how-to/display/display-custom-modals.md index ee09ce8484a..35bc97d844e 100644 --- a/wallet/how-to/use-sdk/javascript/display-custom-modals.md +++ b/wallet/how-to/display/display-custom-modals.md @@ -1,13 +1,13 @@ --- description: Display custom modals using the JavaScript SDK. -sidebar_position: 10 +sidebar_position: 4 tags: - JavaScript SDK --- # Display custom modals -You can use [MetaMask SDK](../../../concepts/sdk/index.md) to display custom MetaMask modals. +You can use [MetaMask SDK](../use-sdk/index.md) to display custom MetaMask modals. When integrating a web dapp with MetaMask, you can enhance the user experience by customizing the logic and user interface of the displayed modals, which initiate user interactions such as prompting @@ -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](react/index.md). +This example uses the [MetaMask React SDK](../use-sdk/javascript/react/index.md). ## Steps @@ -40,8 +40,8 @@ export default CustomModal ### 2. Implement custom modal logic -When initializing [`MetaMaskProvider`](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 +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: @@ -97,7 +97,7 @@ MetaMask isn't installed.

-![Custom modal gif](../../../assets/custom-modal.gif) +![Custom modal gif](../../assets/custom-modal.gif)

diff --git a/wallet/how-to/use-sdk/javascript/make-read-only-requests.md b/wallet/how-to/make-read-only-requests.md similarity index 85% rename from wallet/how-to/use-sdk/javascript/make-read-only-requests.md rename to wallet/how-to/make-read-only-requests.md index 85691279fc8..588a7bbcac7 100644 --- a/wallet/how-to/use-sdk/javascript/make-read-only-requests.md +++ b/wallet/how-to/make-read-only-requests.md @@ -1,5 +1,5 @@ --- -sidebar_position: 8 +sidebar_position: 5 description: Use Infura and custom nodes to make direct, read-only requests in your JavaScript dapp. tags: - JavaScript SDK @@ -8,7 +8,7 @@ tags: # Make read-only requests You can use the [Infura API](https://docs.infura.io/) from your dapp with -[MetaMask SDK](../../../concepts/sdk/index.md) installed to make direct, read-only JSON-RPC requests. +[MetaMask SDK](../connect/metamask-sdk/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. Your dapp can directly call most [JSON-RPC API methods](/wallet/reference/json-rpc-api), bypassing @@ -51,12 +51,12 @@ 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](index.md) in your JavaScript dapp. +- [MetaMask SDK set up](../connect/metamask-sdk/javascript/index.md) in your JavaScript dapp. ## Use the Infura API To use the Infura API to make read-only requests, specify your Infura API key using the -[`infuraAPIKey`](../../../reference/sdk-js-options.md#infuraapikey) option when instantiating the SDK +[`infuraAPIKey`](../reference/sdk-js-options.md#infuraapikey) option when instantiating the SDK in your dapp. ```javascript @@ -67,7 +67,7 @@ infuraAPIKey: "YOUR-API-KEY" To use your own node (for example, with [Hardhat](https://hardhat.org/)) to make read-only requests, specify your node's chain ID and RPC URL using the -[`readonlyRPCMap`](../../../reference/sdk-js-options.md#readonlyrpcmap) option when instantiating the +[`readonlyRPCMap`](../reference/sdk-js-options.md#readonlyrpcmap) option when instantiating the SDK in your dapp. ```javascript @@ -81,8 +81,8 @@ In this example, chain ID `0x539` maps to the custom node's RPC URL. ## Use the Infura API and custom nodes You can use both the Infura API and custom nodes to make read-only requests by specifying both the -[`infuraAPIKey`](../../../reference/sdk-js-options.md#infuraapikey) and -[`readonlyRPCMap`](../../../reference/sdk-js-options.md#readonlyrpcmap) options when instantiating the +[`infuraAPIKey`](../reference/sdk-js-options.md#infuraapikey) and +[`readonlyRPCMap`](../reference/sdk-js-options.md#readonlyrpcmap) options when instantiating the SDK in your dapp. ```javascript @@ -124,5 +124,5 @@ sdkOptions={{ In this example, read-only requests to Mainnet (chain ID `0x1`) use the Infura API, while read-only requests to the local testnet (chain ID `0x539`) use the custom node. -[`defaultReadOnlyChainId`](../../../reference/sdk-js-options.md#defaultreadonlychainid) enables making +[`defaultReadOnlyChainId`](../reference/sdk-js-options.md#defaultreadonlychainid) enables making read-only requests before the user connects to MetaMask, and specifies to make those requests to Mainnet. diff --git a/wallet/how-to/manage-permissions.md b/wallet/how-to/manage-permissions.md index e962c89851c..7a8fe7b75d1 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: 6 +sidebar_position: 8 --- # Manage permissions @@ -32,7 +32,7 @@ the restricted method [`eth_accounts`](/wallet/reference/eth_accounts): 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) for more information. +See [how to access a user's accounts](access-accounts.md) for more information. Granting permission for `eth_accounts` also grants access to [`eth_sendTransaction`](/wallet/reference/eth_sendTransaction), [`personal_sign`](/wallet/reference/personal_sign), and [`eth_signTypedData_v4`](/wallet/reference/eth_signTypedData_v4). ::: diff --git a/wallet/how-to/onboard-users.md b/wallet/how-to/onboard-users.md index c89b227073a..c8c9dd37984 100644 --- a/wallet/how-to/onboard-users.md +++ b/wallet/how-to/onboard-users.md @@ -1,7 +1,7 @@ --- sidebar_label: Onboard users description: Simplify the MetaMask onboarding experience for your users. -sidebar_position: 8 +sidebar_position: 10 --- import Tabs from "@theme/Tabs"; @@ -23,7 +23,7 @@ If it finds an origin, the final confirmation button of the MetaMask onboarding the user will be redirected back to your dapp. :::tip -[MetaMask SDK](../concepts/sdk/index.md) incorporates the functionality of the MetaMask onboarding library. +[MetaMask SDK](../connect/metamask-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. ::: diff --git a/wallet/how-to/run-devnet.md b/wallet/how-to/run-devnet.md index 23ff9301665..3bfcc6ca2db 100644 --- a/wallet/how-to/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: 9 +sidebar_position: 11 --- # Run a development network diff --git a/wallet/how-to/secure-dapp.md b/wallet/how-to/secure-dapp.md index a1f403b6807..7bb060adab2 100644 --- a/wallet/how-to/secure-dapp.md +++ b/wallet/how-to/secure-dapp.md @@ -1,6 +1,6 @@ --- description: Secure your dapp using HTTPS and CSP. -sidebar_position: 10 +sidebar_position: 12 --- # Secure your dapp diff --git a/wallet/how-to/send-transactions.md b/wallet/how-to/send-transactions.md index f24c00f9a69..ceabb4657ee 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 +sidebar_position: 4 --- # Send transactions diff --git a/wallet/how-to/use-sdk/javascript/connect-and-sign.md b/wallet/how-to/sign-data/connect-and-sign.md similarity index 92% rename from wallet/how-to/use-sdk/javascript/connect-and-sign.md rename to wallet/how-to/sign-data/connect-and-sign.md index 99732ab2e28..b43ec7d5dfe 100644 --- a/wallet/how-to/use-sdk/javascript/connect-and-sign.md +++ b/wallet/how-to/sign-data/connect-and-sign.md @@ -1,6 +1,6 @@ --- description: Use MetaMask SDK to connect and sign in a single interaction. -sidebar_position: 7 +sidebar_position: 1 tags: - JavaScript SDK - iOS SDK @@ -9,7 +9,7 @@ tags: # Connect and sign You can connect to MetaMask and sign data in a single interaction from your JavaScript, iOS, -Android, or Unity dapp using [MetaMask SDK](../../../concepts/sdk/index.md). +Android, or Unity dapp using [MetaMask SDK](../../connect/metamask-sdk/index.md). The SDK's `connectAndSign` method provides a streamlined approach for dapps to interact with MetaMask. This method combines the [`eth_requestAccounts`] and [`personal_sign`] RPC methods, executing them sequentially. @@ -28,11 +28,11 @@ This is useful for various purposes such as authentication and transaction verif

The following instructions describe how to connect and sign in JavaScript. -You can also see the [Unity instructions](../gaming/unity/connect-and-sign.md). +You can also see the [Unity instructions](../../how-to/use-unity-sdk/connect-and-sign.md). ## Prerequisites -- [MetaMask SDK set up](index.md) in your JavaScript dapp. +- [MetaMask SDK set up](../../connect/metamask-sdk/javascript/index.md) in your JavaScript 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 1e6cb7233ce..8275a9d5c8d 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: 3 --- # Sign data diff --git a/wallet/how-to/use-sdk/3rd-party-libraries/index.md b/wallet/how-to/use-sdk/3rd-party-libraries/index.md deleted file mode 100644 index 3717ce6faea..00000000000 --- a/wallet/how-to/use-sdk/3rd-party-libraries/index.md +++ /dev/null @@ -1,14 +0,0 @@ ---- -sidebar_label: Third-party libraries -sidebar_position: 4 -description: Set up the SDK using third-party libraries. -tags: - - JavaScript SDK ---- - -# Use MetaMask SDK with third-party libraries - -Use [MetaMask SDK](../../../concepts/sdk/index.md) with the following third-party libraries: - -- [Web3-Onboard](web3-onboard.md) -- [Wagmi](wagmi.md) diff --git a/wallet/how-to/use-sdk/gaming/unreal-engine.md b/wallet/how-to/use-sdk/gaming/unreal-engine.md deleted file mode 100644 index 8d965fd2c09..00000000000 --- a/wallet/how-to/use-sdk/gaming/unreal-engine.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -sidebar_label: Unreal Engine (coming soon) -sidebar_position: 2 ---- - -# Use MetaMask SDK with Unreal Engine - -[MetaMask SDK](../../../concepts/sdk/index.md) support for Unreal Engine games is coming soon. -The SDK currently supports [Unity](unity/index.md) gaming dapps, -[JavaScript-based](../javascript/index.md) dapps, and [mobile](../mobile/index.md) dapps. diff --git a/wallet/how-to/use-sdk/index.md b/wallet/how-to/use-sdk/index.md deleted file mode 100644 index 1745f81d13a..00000000000 --- a/wallet/how-to/use-sdk/index.md +++ /dev/null @@ -1,69 +0,0 @@ ---- -sidebar_position: 7 -description: Use the SDK in your dapp. -tags: - - JavaScript SDK - - iOS SDK - - Android SDK - - Unity SDK ---- - -# Use MetaMask SDK - -[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. -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: - -
-
-
-

💻 JavaScript

-
-
- -
-
-
-
-

📱 Mobile

-
-
- -
-
-
-
-

🎮 Gaming

-
-
- -
-
-
-
-
-

↔️ Third-party libraries

-
-
- -
-
diff --git a/wallet/how-to/use-sdk/gaming/unity/connect-and-sign.md b/wallet/how-to/use-unity-sdk/connect-and-sign.md similarity index 86% rename from wallet/how-to/use-sdk/gaming/unity/connect-and-sign.md rename to wallet/how-to/use-unity-sdk/connect-and-sign.md index e2e5633abcb..a9c9999b4c6 100644 --- a/wallet/how-to/use-sdk/gaming/unity/connect-and-sign.md +++ b/wallet/how-to/use-unity-sdk/connect-and-sign.md @@ -7,11 +7,11 @@ tags: # Connect and sign in Unity -You can [connect and sign](../../javascript/connect-and-sign.md) in a single interaction from your Unity game. +You can [connect and sign](../sign-data/connect-and-sign.md) in a single interaction from your Unity game. ## Prerequisites -- [MetaMask SDK set up](index.md) in your Unity game. +- [MetaMask SDK set up](../../connect/metamask-sdk/gaming/unity.md) in your Unity game. - 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/use-sdk/gaming/unity/dweb.md b/wallet/how-to/use-unity-sdk/dweb.md similarity index 96% rename from wallet/how-to/use-sdk/gaming/unity/dweb.md rename to wallet/how-to/use-unity-sdk/dweb.md index 2f95a91c9dd..979e39ac734 100644 --- a/wallet/how-to/use-sdk/gaming/unity/dweb.md +++ b/wallet/how-to/use-unity-sdk/dweb.md @@ -12,13 +12,13 @@ import TabItem from "@theme/TabItem"; # Enable human-readable addresses in Unity You can integrate the [Decentraweb](https://decentraweb.org/) name resolver into your Unity game -with [MetaMask SDK](index.md) installed. +with MetaMask SDK 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](index.md) in your Unity game. +[MetaMask SDK set up](../../connect/metamask-sdk/gaming/unity.md) in your Unity game. ## Initialize the integration wrapper diff --git a/wallet/how-to/use-unity-sdk/index.md b/wallet/how-to/use-unity-sdk/index.md new file mode 100644 index 00000000000..1d670c81576 --- /dev/null +++ b/wallet/how-to/use-unity-sdk/index.md @@ -0,0 +1,17 @@ +--- +sidebar_position: 9 +description: Use the Unity SDK. +tags: + - Unity SDK +--- + +# Use the Unity SDK + +See the guides in this section for using advanced features of the Unity SDK: + +- [Connect and sign in Unity.](connect-and-sign.md) +- [Set up Infura in Unity.](infura.md) +- [Interact with smart contracts in Unity.](smart-contracts/index.md) +- [Enable human-readable addresses in Unity using Decentraweb.](dweb.md) + +You can also see the guide to [set up MetaMask SDK in your Unity game](../../connect/metamask-sdk/gaming/). diff --git a/wallet/how-to/use-sdk/gaming/unity/infura.md b/wallet/how-to/use-unity-sdk/infura.md similarity index 88% rename from wallet/how-to/use-sdk/gaming/unity/infura.md rename to wallet/how-to/use-unity-sdk/infura.md index f6ad72663a6..34752c7a354 100644 --- a/wallet/how-to/use-sdk/gaming/unity/infura.md +++ b/wallet/how-to/use-unity-sdk/infura.md @@ -8,7 +8,7 @@ tags: # Set up Infura in Unity -You can set up [MetaMask SDK](../../../../concepts/sdk/index.md) with [Infura](https://docs.infura.io/) in +You can set up MetaMask SDK with [Infura](https://docs.infura.io/) in your Unity game. ## Prerequisites @@ -30,7 +30,7 @@ your Unity game. We recommend using all allowlist options to maximize the security of your API key and dapp. ::: -- [MetaMask SDK set up](index.md) in your Unity game. +- [MetaMask SDK set up](../../connect/metamask-sdk/gaming/unity.md) in your Unity game. ## Steps @@ -47,7 +47,7 @@ your Unity game.

-![MetaMask Unity script](../../../../assets/unity-infura.png) +![MetaMask Unity script](../../assets/unity-infura.png)

diff --git a/wallet/how-to/use-sdk/gaming/unity/smart-contracts/contract-factory.md b/wallet/how-to/use-unity-sdk/smart-contracts/contract-factory.md similarity index 100% rename from wallet/how-to/use-sdk/gaming/unity/smart-contracts/contract-factory.md rename to wallet/how-to/use-unity-sdk/smart-contracts/contract-factory.md diff --git a/wallet/how-to/use-sdk/gaming/unity/smart-contracts/contract-interface.md b/wallet/how-to/use-unity-sdk/smart-contracts/contract-interface.md similarity index 100% rename from wallet/how-to/use-sdk/gaming/unity/smart-contracts/contract-interface.md rename to wallet/how-to/use-unity-sdk/smart-contracts/contract-interface.md diff --git a/wallet/how-to/use-sdk/gaming/unity/smart-contracts/contract-provider.md b/wallet/how-to/use-unity-sdk/smart-contracts/contract-provider.md similarity index 100% rename from wallet/how-to/use-sdk/gaming/unity/smart-contracts/contract-provider.md rename to wallet/how-to/use-unity-sdk/smart-contracts/contract-provider.md diff --git a/wallet/how-to/use-sdk/gaming/unity/smart-contracts/contract-proxy-class.md b/wallet/how-to/use-unity-sdk/smart-contracts/contract-proxy-class.md similarity index 100% rename from wallet/how-to/use-sdk/gaming/unity/smart-contracts/contract-proxy-class.md rename to wallet/how-to/use-unity-sdk/smart-contracts/contract-proxy-class.md diff --git a/wallet/how-to/use-sdk/gaming/unity/smart-contracts/index.md b/wallet/how-to/use-unity-sdk/smart-contracts/index.md similarity index 93% rename from wallet/how-to/use-sdk/gaming/unity/smart-contracts/index.md rename to wallet/how-to/use-unity-sdk/smart-contracts/index.md index c70649b04e3..a47e7df8e3c 100644 --- a/wallet/how-to/use-sdk/gaming/unity/smart-contracts/index.md +++ b/wallet/how-to/use-unity-sdk/smart-contracts/index.md @@ -12,7 +12,7 @@ You can interact with smart contracts from your Unity game with MetaMask SDK ins ## Prerequisites -- [MetaMask SDK set up](../index.md) in your Unity game +- [MetaMask SDK set up](../../connect/metamask-sdk/gaming/unity.md) in your Unity game. - A [contract ABI](../../../../../concepts/smart-contracts.md#contract-abi) JSON file or [Hardhat artifact](https://hardhat.org/hardhat-runner/docs/advanced/artifacts#compilation-artifacts) JSON file @@ -29,7 +29,7 @@ A new dialog box opens:

-![dialog](../../../../../assets/contract-abi-converter-dialog.png) +![dialog](../../../assets/contract-abi-converter-dialog.png)

@@ -99,7 +99,7 @@ Before using the contract template, configure the contract address to use for ea

-![empty template](../../../../../assets/unity-empty-template.png) +![empty template](../../../assets/unity-empty-template.png)

@@ -109,7 +109,7 @@ When adding a new address, if you don't see your desired blockchain listed, you

-![full template](../../../../../assets/unity-example-template.png) +![full template](../../../assets/unity-example-template.png)

diff --git a/wallet/index.md b/wallet/index.md new file mode 100644 index 00000000000..7979128f6cb --- /dev/null +++ b/wallet/index.md @@ -0,0 +1,33 @@ +--- +title: Introduction +--- + +# Integrate your dapp with the MetaMask wallet + +MetaMask provides powerful tools for connecting dapps to wallets. With **MetaMask SDK**, developers can easily create seamless wallet connections across desktop and mobile platforms. The **Wallet API** offers flexibility in interacting with wallets and blockchain networks using standardized JSON-RPC calls, enabling direct access to key functionalities. + +Get started by [connecting to MetaMask](connect/index.md). + +## Why use MetaMask SDK? + +**MetaMask SDK** allows you to establish a reliable connection between your dapp and the MetaMask browser extension or MetaMask Mobile, providing cross-platform compatibility with a consistent user experience. Key benefits include: + +- **Cross-platform compatibility** – Integrate with MetaMask from desktop, iOS, Android, React Native, and more. +- **Seamless connections** – Minimize reconnections and improve user experience, especially on mobile. +- **Mobile-first optimization** – Enable faster wallet interactions with instant deeplinks and advanced features. +- **Enhanced functionality** – Use [RPC request batching](how-to/batch-json-rpc-requests.md), [EIP-6963](/wallet/concepts/wallet-interoperability.md) for wallet discovery, and wallet security enhancements. + +For more control, the **Wallet API** allows developers to interact with wallets, manage Ethereum accounts, and call JSON-RPC methods, with or without the SDK. + +## Where do I start? + +See [**Connect to MetaMask**](connect/index.md) to learn about the different connection options, +and get started quickly. + +## Questions? + +For more support, connect with the MetaMask team and community on [Consensys Discord](https://discord.gg/consensys). + +:::note MetaMask user support +For MetaMask user support, visit the [MetaMask Help Center](https://support.metamask.io/). +::: diff --git a/wallet/index.mdx b/wallet/index.mdx deleted file mode 100644 index 0e1878e5574..00000000000 --- a/wallet/index.mdx +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: Introduction ---- - -import CardList from "@site/src/components/CardList" - -# Integrate your dapp with the MetaMask wallet - -Integrate your dapp with [MetaMask](https://metamask.io/) using the [Wallet API](reference/json-rpc-api). -You can interact with your users' Ethereum accounts, performing tasks such as the following: - - - -## New to developing on MetaMask? - -If you're new to 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). - -:::info MetaMask user support -If you need MetaMask user support, visit the [MetaMask Help Center](https://support.metamask.io/). -::: diff --git a/wallet/reference/provider-api.md b/wallet/reference/provider-api.md index aa6b7220c10..2b7f5fad3b0 100644 --- a/wallet/reference/provider-api.md +++ b/wallet/reference/provider-api.md @@ -14,7 +14,7 @@ MetaMask supports [EIP-6963](https://eips.ethereum.org/EIPS/eip-6963), which int alternative wallet detection mechanism to the `window.ethereum` injected provider. This alternative mechanism enables dapps to support [wallet interoperability](../concepts/wallet-interoperability.md) by discovering multiple injected wallet providers in a user's browser. -We recommend [using this mechanism to connect to MetaMask](../how-to/connect/index.md). +We recommend [using this mechanism to connect to MetaMask](../connect/index.md). You can access the provider API using the selected EIP-6963 provider object. Throughout this documentation, we refer to the selected provider using `provider`. @@ -46,7 +46,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. ::: @@ -175,7 +175,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` diff --git a/wallet/reference/sdk-js-options.md b/wallet/reference/sdk-js-options.md index ea41c197743..b1fe245cf0b 100644 --- a/wallet/reference/sdk-js-options.md +++ b/wallet/reference/sdk-js-options.md @@ -10,7 +10,7 @@ import TabItem from "@theme/TabItem"; # JavaScript SDK options -The [JavaScript version of MetaMask SDK](../how-to/use-sdk/javascript/index.md) takes the +The [JavaScript version of MetaMask SDK](../connect/metamask-sdk/javascript/index.md) takes the following options. ### `checkInstallationImmediately` @@ -165,7 +165,7 @@ defaultReadOnlyChainId: "0x1" -Enables sending [read-only RPC requests](../how-to/use-sdk/javascript/make-read-only-requests.md) to +Enables sending [read-only RPC requests](../how-to/make-read-only-requests.md) to this chain ID before the user connects to MetaMask. The value is automatically updated to the chain ID used in MetaMask once connected. @@ -232,9 +232,9 @@ infuraAPIKey: process.env.INFURA_API_KEY -The [Infura API key](../../../../developer-tools/dashboard/get-started/create-api) to +The [Infura API key](/developer-tools/dashboard/get-started/create-api) to use for RPC requests. -Configure this option to [make read-only RPC requests from your dapp](../how-to/use-sdk/javascript/make-read-only-requests.md). +Configure this option to [make read-only RPC requests from your dapp](../how-to/make-read-only-requests.md). :::caution important Use [Infura allowlists](https://docs.infura.io/networks/ethereum/how-to/secure-a-project/use-an-allowlist) @@ -282,7 +282,7 @@ modals: { -An object that allows you to [customize the logic and UI of the displayed modals](../how-to/use-sdk/javascript/display-custom-modals.md). +An object that allows you to [customize the logic and UI of the displayed modals](../how-to/display/display-custom-modals.md). This is useful if your dapp requires a custom way to handle connection and reconnection scenarios. ### `openDeeplink` @@ -353,7 +353,7 @@ readonlyRPCMap: { -A map of RPC URLs to use for [read-only RPC requests](../how-to/use-sdk/javascript/make-read-only-requests.md). +A map of RPC URLs to use for [read-only RPC requests](../how-to/make-read-only-requests.md). ### `shouldShimWeb3`