Skip to content

Commit 5d23f39

Browse files
shahbaz17alexandratran
shahbaz17
and
alexandratran
authored
Update JS QuickStart (#2207)
* Update JS QuickStart * Apply suggestion from @alexandratran Co-authored-by: Alexandra Carrillo <12214231+alexandratran@users.noreply.github.com> * Apply suggestion from @alexandratran Co-authored-by: Alexandra Carrillo <12214231+alexandratran@users.noreply.github.com> * Apply suggestion from @alexandratran Co-authored-by: Alexandra Carrillo <12214231+alexandratran@users.noreply.github.com> * Apply suggestion from @alexandratran Co-authored-by: Alexandra Carrillo <12214231+alexandratran@users.noreply.github.com> * Apply suggestion from @alexandratran Co-authored-by: Alexandra Carrillo <12214231+alexandratran@users.noreply.github.com> * Apply suggestion from @alexandratran Co-authored-by: Alexandra Carrillo <12214231+alexandratran@users.noreply.github.com> * Apply suggestion from @alexandratran Co-authored-by: Alexandra Carrillo <12214231+alexandratran@users.noreply.github.com> * Apply suggestion from @alexandratran Co-authored-by: Alexandra Carrillo <12214231+alexandratran@users.noreply.github.com> * Apply suggestion from @alexandratran Co-authored-by: Alexandra Carrillo <12214231+alexandratran@users.noreply.github.com> * Apply suggestion from @alexandratran Co-authored-by: Alexandra Carrillo <12214231+alexandratran@users.noreply.github.com> * fix as per comment * Add text for pnpm and bun * Update sdk/connect/javascript.md Co-authored-by: Alexandra Carrillo <12214231+alexandratran@users.noreply.github.com> * Fix as per comment #2207 (comment) --------- Co-authored-by: Alexandra Carrillo <12214231+alexandratran@users.noreply.github.com>
1 parent 1e35ed2 commit 5d23f39

File tree

1 file changed

+58
-53
lines changed

1 file changed

+58
-53
lines changed

‎sdk/connect/javascript.md‎

Lines changed: 58 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -11,23 +11,24 @@ import TabItem from "@theme/TabItem";
1111

1212
Get started with MetaMask SDK in your JavaScript dapp.
1313

14+
## Prerequisites
15+
16+
- [Node.js](https://nodejs.org/) version 19 or later installed.
17+
- 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/).
18+
- [MetaMask](https://metamask.io/) installed in your browser or on mobile.
19+
20+
1421
## Steps
1522

1623
### 1. Install the SDK
1724

18-
Install the SDK in an existing JavaScript project using npm or Yarn:
25+
Install the SDK in an existing JavaScript project:
1926

20-
```bash
27+
```bash npm2yarn
2128
npm install @metamask/sdk
2229
```
2330

24-
or
25-
26-
```
27-
yarn add @metamask/sdk
28-
```
29-
30-
### 2. Use the SDK
31+
### 2. Initialize the SDK
3132

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

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

4041
const MMSDK = new MetaMaskSDK({
4142
dappMetadata: {
42-
name: "Example JavaScript Dapp",
43+
name: "Example JavaScript dapp",
4344
url: window.location.href,
45+
// iconUrl: "https://mydapp.com/icon.png" // Optional
4446
},
4547
infuraAPIKey: process.env.INFURA_API_KEY,
4648
})
47-
48-
const ethereum = MMSDK.getProvider()
49-
50-
// Connect to MetaMask
51-
const accounts = await MMSDK.connect()
52-
53-
// Make requests
54-
const result = await ethereum.request({
55-
method: "eth_accounts",
56-
params: []
57-
})
5849
```
5950

6051
</TabItem>
@@ -66,63 +57,77 @@ const result = await ethereum.request({
6657
<script>
6758
const MMSDK = new MetaMaskSDK.MetaMaskSDK({
6859
dappMetadata: {
69-
name: "Example Pure JS Dapp",
60+
name: "Example JavaScript dapp",
61+
url: window.location.href,
62+
// iconUrl: "https://mydapp.com/icon.png" // Optional
7063
},
7164
infuraAPIKey: process.env.INFURA_API_KEY,
72-
});
73-
74-
MMSDK.connect()
65+
})
7566
</script>
7667
</head>
7768
```
7869

7970
</TabItem>
8071
</Tabs>
8172

82-
### 3. Configure the SDK
73+
These examples configure the SDK with the following options:
8374

84-
The SDK accepts several [configuration options](../reference/sdk-options.md) when initializing.
85-
For example:
75+
- [`dappMetadata`](../reference/sdk-options.md#dappmetadata) - Ensures trust by showing your dapp's `name`, `url`, and `iconUrl` during connection.
76+
77+
- [`infuraAPIKey`](../reference/sdk-options.md#infuraapikey) - Enables read-only RPC and load‑balancing.
78+
79+
### 3. Connect and use provider
80+
81+
Connect to MetaMask and get the provider for RPC requests:
8682

8783
```javascript
88-
const MMSDK = new MetaMaskSDK({
89-
// Required - Your dapp's info
90-
dappMetadata: {
91-
name: "Your Dapp Name",
92-
url: window.location.href,
93-
},
94-
95-
// Optional - Infura API key for read-only RPC calls
96-
infuraAPIKey: process.env.INFURA_API_KEY,
97-
98-
// Optional - Customize modal display
99-
headless: false,
84+
const provider = MMSDK.getProvider()
85+
86+
const accounts = await MMSDK.connect()
87+
console.log("Connected account:", accounts[0])
88+
89+
const result = await provider.request({
90+
method: "eth_accounts",
91+
params: [],
10092
})
93+
console.log("eth_accounts result:", result)
10194
```
10295

103-
### 4. Call common methods
96+
`MMSDK.connect()` handles cross-platform connection (desktop and mobile), including deeplinking.
97+
98+
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`.
99+
100+
## Common SDK methods at a glance
101+
102+
| Method | Description |
103+
| -------------------------------------- | -------------------------------------------- |
104+
| [`connect()`](../reference/sdk-methods.md#connect) | Triggers wallet connection flow |
105+
| [`connectAndSign({ msg: '...' })`](../reference/sdk-methods.md#connectandsign) | Connects and prompts user to sign a message |
106+
| [`getProvider()`](../reference/sdk-methods.md#getprovider) | Returns the provider object for RPC requests |
107+
| [`provider.request({ method, params })`](/wallet/reference/provider-api/#request) | Calls any Ethereum JSON‑RPC method |
108+
| [Batched RPC](../guides/batch-requests.md) | Use `metamask_batch` to group multiple JSON-RPC requests |
104109

105-
The following are common methods you can call with the SDK:
110+
## Usage example
106111

107112
```javascript
108-
// Connect and get accounts
113+
// 1. Connect and get accounts
109114
const accounts = await MMSDK.connect()
110115

111-
// Get provider for RPC requests
116+
// 2. Connect and sign in one step
117+
const signResult = await MMSDK.connectAndSign({
118+
msg: "Sign in to Dapp",
119+
})
120+
121+
// 3. Get provider for RPC requests
112122
const provider = MMSDK.getProvider()
113123

114-
// Make an RPC request
115-
const result = await provider.request({
124+
// 4. Make an RPC request
125+
const result = await provider.request({
116126
method: "eth_accounts",
117-
params: []
118-
})
119-
120-
// Connect and sign in one step
121-
const signResult = await MMSDK.connectAndSign({
122-
msg: "Sign in to Dapp"
127+
params: [],
123128
})
124129

125-
// Batch multiple RPC requests
130+
// 5. Batch multiple RPC requests
126131
const batchResults = await provider.request({
127132
method: "metamask_batch",
128133
params: [

0 commit comments

Comments
 (0)