Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
111 changes: 58 additions & 53 deletions sdk/connect/javascript.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,23 +11,24 @@ import TabItem from "@theme/TabItem";

Get started with MetaMask SDK in your JavaScript dapp.

## Prerequisites

- [Node.js](https://nodejs.org/) version 19 or later installed.
- A package manager installed, such as [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm), [Yarn](https://yarnpkg.com/), [pnpm](https://pnpm.io/installation), or [bun](https://bun.sh/).
- [MetaMask](https://metamask.io/) installed in your browser or on mobile.


## Steps

### 1. Install the SDK

Install the SDK in an existing JavaScript project using npm or Yarn:
Install the SDK in an existing JavaScript project:

```bash
```bash npm2yarn
npm install @metamask/sdk
```

or

```
yarn add @metamask/sdk
```

### 2. Use the SDK
### 2. Initialize the SDK

The following are examples of using the SDK in various JavaScript environments:

Expand All @@ -39,22 +40,12 @@ import { MetaMaskSDK } from "@metamask/sdk"

const MMSDK = new MetaMaskSDK({
dappMetadata: {
name: "Example JavaScript Dapp",
name: "Example JavaScript dapp",
url: window.location.href,
// iconUrl: "https://mydapp.com/icon.png" // Optional
},
infuraAPIKey: process.env.INFURA_API_KEY,
})

const ethereum = MMSDK.getProvider()

// Connect to MetaMask
const accounts = await MMSDK.connect()

// Make requests
const result = await ethereum.request({
method: "eth_accounts",
params: []
})
```

</TabItem>
Expand All @@ -66,63 +57,77 @@ const result = await ethereum.request({
<script>
const MMSDK = new MetaMaskSDK.MetaMaskSDK({
dappMetadata: {
name: "Example Pure JS Dapp",
name: "Example JavaScript dapp",
url: window.location.href,
// iconUrl: "https://mydapp.com/icon.png" // Optional
},
infuraAPIKey: process.env.INFURA_API_KEY,
});

MMSDK.connect()
})
</script>
</head>
```

</TabItem>
</Tabs>

### 3. Configure the SDK
These examples configure the SDK with the following options:

The SDK accepts several [configuration options](../reference/sdk-options.md) when initializing.
For example:
- [`dappMetadata`](../reference/sdk-options.md#dappmetadata) - Ensures trust by showing your dapp's `name`, `url`, and `iconUrl` during connection.

- [`infuraAPIKey`](../reference/sdk-options.md#infuraapikey) - Enables read-only RPC and load‑balancing.

### 3. Connect and use provider

Connect to MetaMask and get the provider for RPC requests:

```javascript
const MMSDK = new MetaMaskSDK({
// Required - Your dapp's info
dappMetadata: {
name: "Your Dapp Name",
url: window.location.href,
},

// Optional - Infura API key for read-only RPC calls
infuraAPIKey: process.env.INFURA_API_KEY,

// Optional - Customize modal display
headless: false,
const provider = MMSDK.getProvider()

const accounts = await MMSDK.connect()
console.log("Connected account:", accounts[0])

const result = await provider.request({
method: "eth_accounts",
params: [],
})
console.log("eth_accounts result:", result)
```

### 4. Call common methods
`MMSDK.connect()` handles cross-platform connection (desktop and mobile), including deeplinking.

Use `provider.request()` for arbitrary [JSON-RPC requests](/wallet/reference/json-rpc-methods) like `eth_chainId` or `eth_getBalance`, or for [batching requests](../guides/batch-requests.md) via `metamask_batch`.

## Common SDK methods at a glance

| Method | Description |
| -------------------------------------- | -------------------------------------------- |
| [`connect()`](../reference/sdk-methods.md#connect) | Triggers wallet connection flow |
| [`connectAndSign({ msg: '...' })`](../reference/sdk-methods.md#connectandsign) | Connects and prompts user to sign a message |
| [`getProvider()`](../reference/sdk-methods.md#getprovider) | Returns the provider object for RPC requests |
| [`provider.request({ method, params })`](/wallet/reference/provider-api/#request) | Calls any Ethereum JSON‑RPC method |
| [Batched RPC](../guides/batch-requests.md) | Use `metamask_batch` to group multiple JSON-RPC requests |

The following are common methods you can call with the SDK:
## Usage example

```javascript
// Connect and get accounts
// 1. Connect and get accounts
const accounts = await MMSDK.connect()

// Get provider for RPC requests
// 2. Connect and sign in one step
const signResult = await MMSDK.connectAndSign({
msg: "Sign in to Dapp",
})

// 3. Get provider for RPC requests
const provider = MMSDK.getProvider()

// Make an RPC request
const result = await provider.request({
// 4. Make an RPC request
const result = await provider.request({
method: "eth_accounts",
params: []
})

// Connect and sign in one step
const signResult = await MMSDK.connectAndSign({
msg: "Sign in to Dapp"
params: [],
})

// Batch multiple RPC requests
// 5. Batch multiple RPC requests
const batchResults = await provider.request({
method: "metamask_batch",
params: [
Expand Down
Loading