Skip to content

Commit 8ca3610

Browse files
alexandratranalexandratran
committed
edit quickstarts
1 parent c0ba0f7 commit 8ca3610

File tree

4 files changed

+65
-76
lines changed

4 files changed

+65
-76
lines changed

‎sdk/connect/javascript-dynamic.md

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,7 @@ keywords: [connect, MetaMask, Dynamic, SDK, dapp, Wallet SDK]
99

1010
Get started with MetaMask SDK and [Dynamic SDK](https://docs.dynamic.xyz/introduction/welcome).
1111
You can use MetaMask SDK features directly within Dynamic SDK.
12-
Set up the SDKs in one of the following ways:
13-
14-
- [Quickstart template](#set-up-using-a-template) - Clone the template to set up a Next.js and Dynamic dapp.
15-
- [Manual setup](#set-up-manually) - Set up Dynamic SDK in an existing dapp.
12+
You can [download the quickstart template](#set-up-using-a-template) or [manually set up the SDKs](#set-up-manually) in an existing dapp.
1613

1714
<p align="center">
1815
<a href="https://metamask-dynamic-demo.vercel.app/" target="_blank">
@@ -35,25 +32,25 @@ Set up the SDKs in one of the following ways:
3532
npx degit MetaMask/metamask-sdk-examples/partners/dynamic metamask-dynamic
3633
```
3734

38-
> `degit` is a tool that enables cloning only the directory structure from a GitHub repository, without retrieving the entire repository.
39-
4035
2. Navigate into the repository:
4136

4237
```bash
4338
cd metamask-dynamic
4439
```
4540

4641
<details>
47-
<summary>GitHub clone instead of degit?</summary>
42+
<summary>Degit vs. Git clone</summary>
4843
<div>
49-
Clone the MetaMask SDK examples repository and navigate into the `partners/dynamic` directory:
5044

51-
```bash
52-
git clone https://github.com/MetaMask/metamask-sdk-examples
53-
cd metamask-sdk-examples/partners/dynamic
54-
```
45+
`degit` is a tool that enables cloning only the directory structure from a GitHub repository, without retrieving the entire repository.
46+
47+
Alternatively, you can use `git clone`, which will download the entire repository.
48+
To do so, clone the MetaMask SDK examples repository and navigate into the `partners/dynamic` directory:
5549

56-
> Note: _this will download the entire repository._
50+
```bash
51+
git clone https://github.com/MetaMask/metamask-sdk-examples
52+
cd metamask-sdk-examples/partners/dynamic
53+
```
5754

5855
</div>
5956
</details>

‎sdk/connect/javascript-wagmi.md

Lines changed: 18 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,8 @@ keywords: [connect, MetaMask, JavaScript, Wagmi, SDK, dapp, Wallet SDK]
77

88
# Connect to MetaMask using JavaScript + Wagmi
99

10-
Get started with [MetaMask SDK](https://github.com/MetaMask/metamask-sdk) in a JavaScript and Wagmi dapp.
11-
You can set up the SDK in the following ways:
12-
13-
- [Quickstart template](#set-up-using-a-template) - Clone the template to set up a Next.js and Wagmi dapp.
14-
- [Manual setup](#set-up-manually) - Set up the SDK in an existing dapp.
10+
Get started with MetaMask SDK in a JavaScript and Wagmi dapp.
11+
You can [download the quickstart template](#set-up-using-a-template) or [manually set up the SDK](#set-up-manually) in an existing dapp.
1512

1613
<p align="center">
1714
<a href="https://metamask-wagmi-demo.vercel.app/" target="_blank">
@@ -33,25 +30,25 @@ You can set up the SDK in the following ways:
3330
npx degit MetaMask/metamask-sdk-examples/quickstarts/wagmi metamask-wagmi
3431
```
3532

36-
> `degit` is a tool that enables cloning only the directory structure from a GitHub repository, without retrieving the entire repository.
37-
3833
2. Navigate into the repository:
3934

4035
```bash
4136
cd metamask-wagmi
4237
```
4338

4439
<details>
45-
<summary>GitHub clone instead of degit?</summary>
40+
<summary>Degit vs. Git clone</summary>
4641
<div>
47-
Clone the MetaMask SDK examples repository and navigate into the `quickstarts/wagmi` directory:
4842

49-
```bash
50-
git clone https://github.com/MetaMask/metamask-sdk-examples
51-
cd metamask-sdk-examples/quickstarts/wagmi
52-
```
43+
`degit` is a tool that enables cloning only the directory structure from a GitHub repository, without retrieving the entire repository.
44+
45+
Alternatively, you can use `git clone`, which will download the entire repository.
46+
To do so, clone the MetaMask SDK examples repository and navigate into the `quickstarts/wagmi` directory:
5347

54-
> Note: _this will download the entire repository._
48+
```bash
49+
git clone https://github.com/MetaMask/metamask-sdk-examples
50+
cd metamask-sdk-examples/quickstarts/wagmi
51+
```
5552

5653
</div>
5754
</details>
@@ -83,10 +80,10 @@ npm install @metamask/sdk wagmi viem@2.x @tanstack/react-query
8380
In the root of your project, import the required dependencies:
8481

8582
```jsx
86-
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
87-
import { http, WagmiProvider, createConfig } from 'wagmi'
88-
import { mainnet, linea, lineaSepolia } from 'wagmi/chains'
89-
import { metaMask } from 'wagmi/connectors'
83+
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
84+
import { http, WagmiProvider, createConfig } from "wagmi"
85+
import { mainnet, linea, lineaSepolia } from "wagmi/chains"
86+
import { metaMask } from "wagmi/connectors"
9087
```
9188
9289
### 3. Configure your project
@@ -134,7 +131,7 @@ const App = () => {
134131
Add the wallet connect and disconnect buttons to your application:
135132
136133
```jsx
137-
import { useAccount, useConnect, useDisconnect } from 'wagmi'
134+
import { useAccount, useConnect, useDisconnect } from "wagmi"
138135
139136
export const ConnectButton = () => {
140137
const { address } = useAccount()
@@ -172,8 +169,8 @@ You can configure your RPC endpoints in the Wagmi configuration as follows:
172169
const config = createConfig({
173170
// ... other config options
174171
transports: {
175-
[mainnet.id]: http('https://mainnet.infura.io/v3/<YOUR-API-KEY>'),
176-
[sepolia.id]: http('https://sepolia.infura.io/v3/<YOUR-API-KEY>'),
172+
[mainnet.id]: http("https://mainnet.infura.io/v3/<YOUR-API-KEY>"),
173+
[sepolia.id]: http("https://sepolia.infura.io/v3/<YOUR-API-KEY>"),
177174
},
178175
})
179176
```

‎sdk/connect/javascript-web3auth.md

Lines changed: 15 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,16 @@
11
---
2-
sidebar_label: Embedded Wallets
3-
description: Quickstart guide for using MetaMask SDK and MetaMask Embedded Wallets.
2+
sidebar_label: Embedded Wallets SDK
3+
description: Quickstart guide for using MetaMask SDK and Embedded Wallets SDK.
44
toc_max_heading_level: 2
55
keywords: [connect, MetaMask, Embedded Wallets, SDK, dapp, Wallet SDK]
66
---
77

8-
# Connect to MetaMask using Embedded Wallets
8+
# Connect to MetaMask using Embedded Wallets SDK
99

10-
Get started with MetaMask SDK and [MetaMask Embedded Wallets (previously Web3Auth)](/embedded-wallets),
10+
Get started with MetaMask SDK and [Embedded Wallets SDK (previously Web3Auth)](/embedded-wallets),
1111
enabling users to sign in with an email or social media account.
12-
You can use MetaMask SDK features directly within Embedded Wallets.
13-
Set up the SDKs in one of the following ways:
14-
15-
- [Quickstart template](#set-up-using-a-template) - Clone the template to set up a Next.js and Web3Auth dapp.
16-
- [Manual setup](#set-up-manually) - Set up Web3Auth SDK in an existing dapp.
12+
You can use MetaMask SDK features directly within Embedded Wallets SDK.
13+
You can [download the quickstart template](#set-up-using-a-template) or [manually set up the SDKs](#set-up-manually) in an existing dapp.
1714

1815
<p align="center">
1916
<a href="https://metamask-web3auth-demo.vercel.app/" target="_blank">
@@ -36,25 +33,25 @@ Set up the SDKs in one of the following ways:
3633
npx degit MetaMask/metamask-sdk-examples/partners/web3auth metamask-web3auth
3734
```
3835

39-
> `degit` is a tool that enables cloning only the directory structure from a GitHub repository, without retrieving the entire repository.
40-
4136
2. Navigate into the repository:
4237

4338
```bash
4439
cd metamask-web3auth
4540
```
4641

4742
<details>
48-
<summary>GitHub clone instead of degit?</summary>
43+
<summary>Degit vs. Git clone</summary>
4944
<div>
50-
Clone the MetaMask SDK examples repository and navigate into the `partners/web3auth` directory:
5145

52-
```bash
53-
git clone https://github.com/MetaMask/metamask-sdk-examples
54-
cd metamask-sdk-examples/partners/web3auth
55-
```
46+
`degit` is a tool that enables cloning only the directory structure from a GitHub repository, without retrieving the entire repository.
47+
48+
Alternatively, you can use `git clone`, which will download the entire repository.
49+
To do so, clone the MetaMask SDK examples repository and navigate into the `partners/web3auth` directory:
5650

57-
> Note: _this will download the entire repository._
51+
```bash
52+
git clone https://github.com/MetaMask/metamask-sdk-examples
53+
cd metamask-sdk-examples/partners/web3auth
54+
```
5855

5956
</div>
6057
</details>

‎sdk/connect/javascript.md

Lines changed: 22 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,8 @@ import TabItem from "@theme/TabItem";
99

1010
# Connect to MetaMask using JavaScript
1111

12-
Get started with [MetaMask SDK](https://github.com/MetaMask/metamask-sdk) in your JavaScript dapp. You can set up the SDK in the following ways:
13-
14-
- [Quickstart template](#set-up-using-a-template) - Clone the template to set up a JavaScript dapp.
15-
- [Manual setup](#set-up-manually) - Set up MetaMask SDK in an existing dapp.
12+
Get started with MetaMask SDK in your JavaScript dapp.
13+
You can [download the quickstart template](#set-up-using-a-template) or [manually set up the SDK](#set-up-manually) in an existing dapp.
1614

1715
<p align="center">
1816
<a href="https://metamask-javascript-demo.vercel.app/" target="_blank">
@@ -34,25 +32,25 @@ Get started with [MetaMask SDK](https://github.com/MetaMask/metamask-sdk) in you
3432
npx degit MetaMask/metamask-sdk-examples/quickstarts/javascript metamask-javascript
3533
```
3634

37-
> `degit` is a tool that enables cloning only the directory structure from a GitHub repository, without retrieving the entire repository.
38-
3935
2. Navigate into the repository:
4036

4137
```bash
4238
cd metamask-javascript
4339
```
4440

4541
<details>
46-
<summary>GitHub clone instead of degit?</summary>
42+
<summary>Degit vs. Git clone</summary>
4743
<div>
48-
Clone the MetaMask SDK examples repository and navigate into the `quickstarts/javascript` directory:
4944

50-
```bash
51-
git clone https://github.com/MetaMask/metamask-sdk-examples
52-
cd metamask-sdk-examples/quickstarts/javascript
53-
```
45+
`degit` is a tool that enables cloning only the directory structure from a GitHub repository, without retrieving the entire repository.
46+
47+
Alternatively, you can use `git clone`, which will download the entire repository.
48+
To do so, clone the MetaMask SDK examples repository and navigate into the `quickstarts/javascript` directory:
5449

55-
> Note: _this will download the entire repository._
50+
```bash
51+
git clone https://github.com/MetaMask/metamask-sdk-examples
52+
cd metamask-sdk-examples/quickstarts/javascript
53+
```
5654

5755
</div>
5856
</details>
@@ -89,11 +87,11 @@ The following are examples of using the SDK in various JavaScript environments:
8987
<TabItem value="Web dapps">
9088
9189
```javascript
92-
import { MetaMaskSDK } from '@metamask/sdk'
90+
import { MetaMaskSDK } from "@metamask/sdk"
9391
9492
const MMSDK = new MetaMaskSDK({
9593
dappMetadata: {
96-
name: 'Example JavaScript dapp',
94+
name: "Example JavaScript dapp",
9795
url: window.location.href,
9896
// iconUrl: "https://mydapp.com/icon.png" // Optional
9997
},
@@ -110,7 +108,7 @@ const MMSDK = new MetaMaskSDK({
110108
<script>
111109
const MMSDK = new MetaMaskSDK.MetaMaskSDK({
112110
dappMetadata: {
113-
name: 'Example JavaScript dapp',
111+
name: "Example JavaScript dapp",
114112
url: window.location.href,
115113
// iconUrl: "https://mydapp.com/icon.png" // Optional
116114
},
@@ -137,13 +135,13 @@ Connect to MetaMask and get the provider for RPC requests:
137135
const provider = MMSDK.getProvider()
138136
139137
const accounts = await MMSDK.connect()
140-
console.log('Connected account:', accounts[0])
138+
console.log("Connected account:", accounts[0])
141139
142140
const result = await provider.request({
143-
method: 'eth_accounts',
141+
method: "eth_accounts",
144142
params: [],
145143
})
146-
console.log('eth_accounts result:', result)
144+
console.log("eth_accounts result:", result)
147145
```
148146

149147
`MMSDK.connect()` handles cross-platform connection (desktop and mobile), including deeplinking.
@@ -155,7 +153,7 @@ Use `provider.request()` for arbitrary [JSON-RPC requests](/wallet/reference/jso
155153
| Method | Description |
156154
| --------------------------------------------------------------------------------- | -------------------------------------------------------- |
157155
| [`connect()`](../reference/sdk-methods.md#connect) | Triggers wallet connection flow |
158-
| [`connectAndSign({ msg: '...' })`](../reference/sdk-methods.md#connectandsign) | Connects and prompts user to sign a message |
156+
| [`connectAndSign({ msg: "..." })`](../reference/sdk-methods.md#connectandsign) | Connects and prompts user to sign a message |
159157
| [`getProvider()`](../reference/sdk-methods.md#getprovider) | Returns the provider object for RPC requests |
160158
| [`provider.request({ method, params })`](/wallet/reference/provider-api/#request) | Calls any Ethereum JSON‑RPC method |
161159
| [Batched RPC](../guides/batch-requests.md) | Use `metamask_batch` to group multiple JSON-RPC requests |
@@ -168,22 +166,22 @@ const accounts = await MMSDK.connect()
168166
169167
// 2. Connect and sign in one step
170168
const signResult = await MMSDK.connectAndSign({
171-
msg: 'Sign in to Dapp',
169+
msg: "Sign in to the dapp",
172170
})
173171
174172
// 3. Get provider for RPC requests
175173
const provider = MMSDK.getProvider()
176174
177175
// 4. Make an RPC request
178176
const result = await provider.request({
179-
method: 'eth_accounts',
177+
method: "eth_accounts",
180178
params: [],
181179
})
182180
183181
// 5. Batch multiple RPC requests
184182
const batchResults = await provider.request({
185-
method: 'metamask_batch',
186-
params: [{ method: 'eth_accounts' }, { method: 'eth_chainId' }],
183+
method: "metamask_batch",
184+
params: [{ method: "eth_accounts" }, { method: "eth_chainId" }],
187185
})
188186
```
189187

0 commit comments

Comments
 (0)