diff --git a/docusaurus.config.js b/docusaurus.config.js index 809536334a2..4b8448dffff 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -205,7 +205,7 @@ const config = { }, { to: "wallet", - label: "Wallet", + label: "Wallet API", }, { to: "snaps", @@ -265,7 +265,7 @@ const config = { to: "/sdk", }, { - label: "Wallet", + label: "Wallet API", to: "/wallet", }, { diff --git a/sdk-sidebar.js b/sdk-sidebar.js index 527f6bf61c7..6a878c17588 100644 --- a/sdk-sidebar.js +++ b/sdk-sidebar.js @@ -20,7 +20,9 @@ const sidebar = { { type: "category", label: "Get started", - link: { type: "generated-index", slug: "/get-started" }, + link: { + type: "generated-index", + slug: "/get-started", }, collapsed: false, items: [{ type: "autogenerated", dirName: "get-started" }], }, @@ -31,20 +33,6 @@ const sidebar = { collapsed: false, items: [{ type: "autogenerated", dirName: "how-to" }], }, - { - type: "category", - label: "Concepts", - link: { type: "generated-index", slug: "/concepts" }, - collapsed: false, - items: [{ type: "autogenerated", dirName: "concepts" }], - }, - { - type: "category", - label: "Tutorials", - link: { type: "generated-index", slug: "/tutorials" }, - collapsed: false, - items: [{ type: "autogenerated", dirName: "tutorials" }], - }, { type: "category", label: "Reference", diff --git a/sdk/concepts/about-sdk.md b/sdk/concepts/about-sdk.md deleted file mode 100644 index 063dac0c376..00000000000 --- a/sdk/concepts/about-sdk.md +++ /dev/null @@ -1,170 +0,0 @@ ---- -description: Learn about MetaMask SDK. -sidebar_position: 1 ---- - -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/sdk/get-started/gaming/index.md b/sdk/get-started/gaming/index.md index 91b51605b49..cb0b5b122f5 100644 --- a/sdk/get-started/gaming/index.md +++ b/sdk/get-started/gaming/index.md @@ -1,6 +1,6 @@ --- sidebar_label: Gaming -sidebar_position: 4 +sidebar_position: 5 description: Set up the SDK in your gaming dapp. --- diff --git a/sdk/get-started/javascript/index.md b/sdk/get-started/javascript/index.md index 6bfc2d3cf2b..d6c86f3d80a 100644 --- a/sdk/get-started/javascript/index.md +++ b/sdk/get-started/javascript/index.md @@ -1,6 +1,6 @@ --- sidebar_label: JavaScript -sidebar_position: 2 +sidebar_position: 3 description: Set up the SDK in your JavaScript dapp. --- diff --git a/sdk/get-started/mobile/index.md b/sdk/get-started/mobile/index.md index b02f03dde43..d3fecf9a8b7 100644 --- a/sdk/get-started/mobile/index.md +++ b/sdk/get-started/mobile/index.md @@ -1,6 +1,6 @@ --- sidebar_label: Mobile -sidebar_position: 3 +sidebar_position: 4 description: Set up the SDK in your mobile dapp. --- diff --git a/sdk/get-started/javascript/react-native.md b/sdk/get-started/mobile/react-native.md similarity index 99% rename from sdk/get-started/javascript/react-native.md rename to sdk/get-started/mobile/react-native.md index 0a406919df7..00f9e3c9f38 100644 --- a/sdk/get-started/javascript/react-native.md +++ b/sdk/get-started/mobile/react-native.md @@ -1,6 +1,6 @@ --- sidebar_label: React Native and Expo -sidebar_position: 4 +sidebar_position: 3 description: Set up the SDK in your React Native dapp. --- diff --git a/sdk/get-started/multi-wallet-connectors/index.md b/sdk/get-started/multi-wallet-connectors/index.md new file mode 100644 index 00000000000..017e6dd0b32 --- /dev/null +++ b/sdk/get-started/multi-wallet-connectors/index.md @@ -0,0 +1,9 @@ +--- +sidebar_label: Multi-wallet connectors +sidebar_position: 2 +description: Set up the SDK using multi-wallet connectors. +--- + +# Multi-wallet connectors + +Coming soon. diff --git a/sdk/how-to/mobile/_category_.json b/sdk/how-to/mobile/_category_.json deleted file mode 100644 index 16b15205aed..00000000000 --- a/sdk/how-to/mobile/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "Mobile", - "position": 2, - "link": { - "type": "generated-index", - "slug": "how-to/mobile" - } -} diff --git a/sdk/how-to/mobile/android/_category_.json b/sdk/how-to/mobile/android/_category_.json deleted file mode 100644 index b37056ed425..00000000000 --- a/sdk/how-to/mobile/android/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "Android", - "position": 2, - "link": { - "type": "generated-index", - "slug": "how-to/mobile/android" - } -} diff --git a/sdk/how-to/mobile/android/connect-and-sign.md b/sdk/how-to/mobile/android/connect-and-sign.md deleted file mode 100644 index 91d3a16cb78..00000000000 --- a/sdk/how-to/mobile/android/connect-and-sign.md +++ /dev/null @@ -1,2 +0,0 @@ - -# Connect and sign \ No newline at end of file diff --git a/sdk/how-to/mobile/ios/_category_.json b/sdk/how-to/mobile/ios/_category_.json deleted file mode 100644 index e302e640248..00000000000 --- a/sdk/how-to/mobile/ios/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "iOS", - "position": 1, - "link": { - "type": "generated-index", - "slug": "how-to/mobile/ios" - } -} diff --git a/sdk/how-to/mobile/ios/connect-and-sign.md b/sdk/how-to/mobile/ios/connect-and-sign.md deleted file mode 100644 index b0b2043e6c8..00000000000 --- a/sdk/how-to/mobile/ios/connect-and-sign.md +++ /dev/null @@ -1 +0,0 @@ -# Connect and sign \ No newline at end of file diff --git a/sdk/index.md b/sdk/index.md index 5363fd1e064..e80e19c98b7 100644 --- a/sdk/index.md +++ b/sdk/index.md @@ -5,63 +5,33 @@ description: Use the SDK in your dapp. # MetaMask SDK documentation -[MetaMask SDK](concepts/about-sdk.md) is a library that provides a reliable, secure, and seamless -connection from your dapp to the MetaMask browser extension and MetaMask Mobile. +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) methods from your dapp. + +## Why 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 supports the following dapp platforms: +The SDK uses the [MetaMask Ethereum provider](/wallet/concepts/wallet-api/#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). -
-
-
-

💻 JavaScript

-
-
- -
-
-
-
-

📱 Mobile

-
-
- -
-
-
-
-

🎮 Gaming

-
-
-
    -
  • Unity
    • -
  • Unreal Engine (coming soon)
    • -
-
-
-
-
-
-

↔️ Third-party libraries

-
-
- -
-
+| 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/javascript/connect-and-sign.md) | ❌ | ✅ | +| [Display custom modals](how-to/javascript/display-custom-modals.md) in MetaMask | ❌ | ✅ | +| [Make read-only requests](how-to/javascript/make-read-only-requests.md) using the Infura API | ❌ | ✅ | +| [Batch multiple RPC requests](how-to/javascript/batch-json-rpc-requests.md) | ❌ | ✅ | ## Questions? diff --git a/sdk/concepts/android.md b/sdk/reference/android.md similarity index 99% rename from sdk/concepts/android.md rename to sdk/reference/android.md index 5ba87b9011c..3585e56d560 100644 --- a/sdk/concepts/android.md +++ b/sdk/reference/android.md @@ -1,5 +1,5 @@ --- -sidebar_position: 3 +sidebar_position: 4 description: Learn about the Android SDK architecture. --- diff --git a/sdk/concepts/connections.md b/sdk/reference/connections.md similarity index 99% rename from sdk/concepts/connections.md rename to sdk/reference/connections.md index 893d67e64ae..df9122961a6 100644 --- a/sdk/concepts/connections.md +++ b/sdk/reference/connections.md @@ -1,5 +1,5 @@ --- -sidebar_position: 2 +sidebar_position: 3 sidebar_label: SDK connections description: Learn about how a dapp with the SDK installed connects to MetaMask. --- diff --git a/sdk/reference/json-rpc-api.md b/sdk/reference/json-rpc-api.md deleted file mode 100644 index 6bc7a93776f..00000000000 --- a/sdk/reference/json-rpc-api.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -sidebar_position: 3 ---- - -# JSON-RPC API \ No newline at end of file diff --git a/sdk/tutorials/create-react-dapp.md b/sdk/tutorials/create-react-dapp.md deleted file mode 100644 index 62776225429..00000000000 --- a/sdk/tutorials/create-react-dapp.md +++ /dev/null @@ -1 +0,0 @@ -# Create a React dapp \ No newline at end of file diff --git a/wallet/index.mdx b/wallet/index.mdx index 6986489627a..7b49c52f4a3 100644 --- a/wallet/index.mdx +++ b/wallet/index.mdx @@ -4,7 +4,7 @@ title: Introduction import CardList from "@site/src/components/CardList" -# Integrate your dapp with the MetaMask wallet +# MetaMask Wallet API documentation 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: