Skip to content
Merged
Changes from 13 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
107 changes: 55 additions & 52 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,23 +40,17 @@ 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()
- [`dappMetadata`](../reference/sdk-options.md#dappmetadata) - Ensures trust by showing your dapp's `name`, `url`, and `iconUrl` during connection.

// Make requests
const result = await ethereum.request({
method: "eth_accounts",
params: []
})
```
- [`infuraAPIKey`](../reference/sdk-options.md#infuraapikey) - Enables read-only RPC and load‑balancing.

</TabItem>
<TabItem value="Pure JavaScript (CDN)">
Expand All @@ -66,63 +61,71 @@ 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
### 3. Connect and use provider

The SDK accepts several [configuration options](../reference/sdk-options.md) when initializing.
For example:
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.

The following are common methods you can call with the SDK:
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 |

## 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