Skip to content

Commit

Permalink
update links, filenames, etc
Browse files Browse the repository at this point in the history
  • Loading branch information
alexandratran committed Jul 18, 2024
1 parent e44d361 commit 6269b85
Show file tree
Hide file tree
Showing 44 changed files with 230 additions and 239 deletions.
11 changes: 9 additions & 2 deletions sdk-sidebar.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,21 @@ const sidebar = {
label: "Get started",
link: {
type: "generated-index",
slug: "/get-started", },
slug: "/get-started",
description: "You can get started with MetaMask SDK using the following platforms:",
},
collapsed: false,
items: [{ type: "autogenerated", dirName: "get-started" }],
},
{
type: "category",
label: "How to",
link: { type: "generated-index", slug: "/how-to" },
link: {
type: "generated-index",
slug: "/how-to",
title: "How-to guides",
description: "See how-to guides for the following MetaMask SDK platforms:",
},
collapsed: false,
items: [{ type: "autogenerated", dirName: "how-to" }],
},
Expand Down
10 changes: 10 additions & 0 deletions sdk/get-started/3rd-party-libraries/_category_.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"label": "Third-party libraries",
"position": 1,
"link": {
"type": "generated-index",
"slug": "get-started/3rd-party-libraries",
"title": "Get started using third-party libraries",
"description": "You can get started with MetaMask SDK using the following third-party libraries:"
}
}
12 changes: 0 additions & 12 deletions sdk/get-started/3rd-party-libraries/index.md

This file was deleted.

20 changes: 10 additions & 10 deletions sdk/get-started/3rd-party-libraries/wagmi.md
Original file line number Diff line number Diff line change
@@ -1,29 +1,29 @@
---
description: Integrate MetaMask SDK with Wagmi in your JavaScript dapp.
description: Get started with MetaMask SDK using Wagmi.
sidebar_position: 1
sidebar_label: Wagmi
---

# Use Wagmi with MetaMask SDK
# Get started 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.

## Prerequisites

- 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/javascript/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/js-options.md).

```javascript
const MetaMaskOptions = {
Expand All @@ -37,20 +37,20 @@ const MetaMaskOptions = {

#### Dapp metadata

Specify the [`dappMetadata`](../../../reference/sdk-js-options.md#dappmetadata) option to help
Specify the [`dappMetadata`](../../reference/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/js-options.md#infuraapikey)
option to [make read-only requests](../../how-to/javascript/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/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.

Expand Down Expand Up @@ -120,7 +120,7 @@ These are some errors that might occur in mobile environments:

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](#1-configure-metamask-sdk).
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.

Expand Down
10 changes: 5 additions & 5 deletions sdk/get-started/3rd-party-libraries/web3-onboard.md
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
---
description: Integrate MetaMask SDK with Web3-Onboard in your JavaScript dapp.
description: Get started with MetaMask SDK using Web3-Onboard.
sidebar_position: 2
sidebar_label: Web3-Onboard
---

# Use Web3-Onboard with MetaMask SDK
# Get started 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.

Expand Down Expand Up @@ -39,8 +39,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/js-options.md), for
example, [`dappMetadata`](../../reference/js-options.md#dappmetadata):

```javascript
const metamaskSDKWallet = metamaskSDK({
Expand Down
10 changes: 10 additions & 0 deletions sdk/get-started/gaming/_category_.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"label": "Gaming ",
"position": 5,
"link": {
"type": "generated-index",
"slug": "get-started/gaming",
"title": "Get started using gaming platforms",
"description": "You can get started with MetaMask SDK using the following gaming platforms:"
}
}
14 changes: 0 additions & 14 deletions sdk/get-started/gaming/index.md

This file was deleted.

22 changes: 11 additions & 11 deletions sdk/get-started/gaming/unity.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
sidebar_label: Unity
sidebar_position: 1
description: Set up the SDK in your Unity game.
description: Get started with MetaMask SDK using Unity.
---

import YoutubeEmbed from '@site/src/components/YoutubeEmbed';

# Use MetaMask SDK with Unity
# Get started using 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.
Expand Down Expand Up @@ -95,7 +95,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](/wallet/reference/provider-api).

### 4. Connect to MetaMask

Expand Down Expand Up @@ -137,7 +137,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/gaming/unity/connect-and-sign.md) to
connect to MetaMask and sign data in a single interaction.
:::

Expand Down Expand Up @@ -176,7 +176,7 @@ await wallet.Request(request);
```

:::note
See the [Unity SDK API reference](../../../../reference/sdk-unity-api.md) for an overview of the
See the [Unity SDK API reference](../../reference/unity-api.md) for an overview of the
API methods from the most important classes.
:::

Expand Down Expand Up @@ -215,7 +215,7 @@ Package Manager or Asset Store.

<summary>I can't find the SDK installation option.</summary>

If you don't see the option to [install the SDK](#2-install-the-sdk-for-unity) in your Unity menu,
If you don't see the option to [install the SDK](#2-install-the-unity-sdk) in your Unity menu,
ensure you're on the latest Unity version and that you have no red errors printed in your console.
This option not appearing is typically due to incorrect editor initialization, which you can
usually resolve by restarting the editor or updating your Unity version.
Expand Down Expand Up @@ -261,7 +261,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/gaming/unity/connect-and-sign.md)
- [Set up Infura in Unity.](../../how-to/gaming/unity/infura.md)
- [Interact with smart contracts in Unity.](../../how-to/gaming/unity/smart-contracts/index.md)
- [Enable human-readable addresses in Unity using Decentraweb.](../../how-to/gaming/unity/dweb.md)
6 changes: 3 additions & 3 deletions sdk/get-started/javascript/electron.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
---
sidebar_label: Electron
sidebar_position: 6
description: Set up the SDK in your Electron dapp.
description: Get started with MetaMask SDK using Electron.
---

# Use MetaMask SDK with Electron
# Get started using 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).
Expand Down
27 changes: 13 additions & 14 deletions sdk/get-started/javascript/index.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
---
sidebar_label: JavaScript
sidebar_position: 3
description: Set up the SDK in your JavaScript dapp.
description: Get started with MetaMask SDK using JavaScript.
---

# Use MetaMask SDK with JavaScript
# Get started using 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:
Expand All @@ -15,7 +15,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)

Expand Down Expand Up @@ -52,7 +51,7 @@ import { MetaMaskSDK } from "@metamask/sdk"

### 3. Instantiate the SDK

Instantiate the SDK using any [options](../../../reference/sdk-js-options.md):
Instantiate the SDK using any [options](../../reference/js-options.md):

```javascript title="index.js"
const MMSDK = new MetaMaskSDK({
Expand All @@ -68,26 +67,26 @@ const MMSDK = new MetaMaskSDK({
const ethereum = MMSDK.getProvider()
```

- Use [`dappMetadata`](../../../reference/sdk-js-options.md#dappmetadata) to display information
- Use [`dappMetadata`](../../reference/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.
- Use [`modals`](../../../reference/sdk-js-options.md#modals) to [customize the logic and UI of
the displayed modals](display-custom-modals.md).
- Use [`infuraAPIKey`](../../reference/js-options.md#infuraapikey) to
[make read-only RPC requests](../../how-to/javascript/make-read-only-requests.md) from your dapp.
- Use [`modals`](../../reference/js-options.md#modals) to [customize the logic and UI of
the displayed modals](../../how-to/javascript/display-custom-modals.md).

### 4. Use the SDK

Use the SDK by calling any [provider API methods](../../../reference/provider-api.md).
Use the SDK by calling any [provider API methods](/wallet/reference/provider-api).
Always call [`eth_requestAccounts`](/wallet/reference/eth_requestaccounts) using
[`request()`](../../../reference/provider-api.md#request) first, since it
[`request()`](/wallet/reference/provider-api/#request) first, since it
prompts the installation or connection popup to appear.

```javascript
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/javascript/connect-and-sign.md) method, and
[batch multiple JSON-RPC requests](../../how-to/javascript/batch-json-rpc-requests.md) using the `metamask_batch` method.

## Example

Expand Down
26 changes: 13 additions & 13 deletions sdk/get-started/javascript/nodejs.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
---
sidebar_label: Node.js
sidebar_position: 5
description: Set up the SDK in your Node.js dapp.
description: Get started with MetaMask SDK using Node.js.
---

# Use MetaMask SDK with Node.js
# Get started using 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.

Expand Down Expand Up @@ -36,7 +36,7 @@ import { MetaMaskSDK } from "@metamask/sdk"

### 3. Instantiate the SDK

Instantiate the SDK using any [options](../../../reference/sdk-js-options.md):
Instantiate the SDK using any [options](../../reference/js-options.md):

```javascript title="index.js"
const MMSDK = new MetaMaskSDK({
Expand All @@ -52,26 +52,26 @@ const MMSDK = new MetaMaskSDK({
const ethereum = MMSDK.getProvider()
```

- Use [`dappMetadata`](../../../reference/sdk-js-options.md#dappmetadata) to display information
- Use [`dappMetadata`](../../reference/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.
- Use [`modals`](../../../reference/sdk-js-options.md#modals) to [customize the logic and UI of
the displayed modals](display-custom-modals.md).
- Use [`infuraAPIKey`](../../reference/js-options.md#infuraapikey) to
[make read-only RPC requests](../../how-to/javascript/make-read-only-requests.md) from your dapp.
- Use [`modals`](../../reference/js-options.md#modals) to [customize the logic and UI of
the displayed modals](../../how-to/javascript/display-custom-modals.md).

### 4. Use the SDK

Use the SDK by calling any [provider API methods](../../../reference/provider-api.md).
Use the SDK by calling any [provider API methods](/wallet/reference/provider-api.md).
Always call [`eth_requestAccounts`](/wallet/reference/eth_requestaccounts) using
[`request()`](../../../reference/provider-api.md#request) first, since it
[`request()`](/wallet/reference/provider-api/#request) first, since it
prompts the installation or connection popup to appear.

```javascript
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/javascript/connect-and-sign.md) method, and
[batch multiple JSON-RPC requests](../../how-to/javascript/batch-json-rpc-requests.md) using the `metamask_batch` method.

## Example

Expand Down
Loading

0 comments on commit 6269b85

Please sign in to comment.