Skip to content

Commit a5d9c4f

Browse files
shahbaz17alexandratran
shahbaz17
and
alexandratran
authored
Add ConnectKit Quickstart (#2420)
* Add ConnectKit Quickstart * Add toc level to 3 * fix as per examples * update homepage cards and demo images --------- Co-authored-by: Alexandra Carrillo <[email protected]>
1 parent 990e720 commit a5d9c4f

File tree

10 files changed

+235
-60
lines changed

10 files changed

+235
-60
lines changed

‎sdk-sidebar.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ const sidebar = {
1717
'connect/javascript-wagmi',
1818
'connect/javascript',
1919
'connect/javascript-rainbowkit',
20+
'connect/javascript-connectkit',
2021
'connect/javascript-dynamic',
2122
'connect/javascript-web3auth',
2223
'connect/react-native',

‎sdk/_assets/quickstart-connectkit.png‎

76.4 KB
Loading

‎sdk/_assets/quickstart-rainbowkit.png‎

77.4 KB
Loading

‎sdk/connect/javascript-connectkit.md‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
---
2+
description: Quickstart guide for using the MetaMask SDK with a JavaScript and ConnectKit dapp.
3+
toc_max_heading_level: 3
4+
sidebar_label: JavaScript + ConnectKit
5+
keywords: [connect, MetaMask, JavaScript, ConnectKit, SDK, dapp, Wallet SDK]
6+
---
7+
8+
# Connect to MetaMask using JavaScript + ConnectKit
9+
10+
Get started with MetaMask SDK in a JavaScript and ConnectKit 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.
12+
13+
<p align="center">
14+
<a href="https://metamask-connectkit-demo.vercel.app/" target="_blank">
15+
<img src={require("../_assets/quickstart-connectkit.png").default} alt="Quickstart" width="600px" class="appScreen" />
16+
</a>
17+
</p>
18+
19+
## Prerequisites
20+
21+
- [Node.js](https://nodejs.org/) version 19 or later installed.
22+
- 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/).
23+
- [MetaMask](https://metamask.io/) installed in your browser or on mobile.
24+
- A WalletConnect project ID from the [Reown dashboard](https://dashboard.reown.com/sign-in).
25+
26+
## Set up using a template
27+
28+
1. Download the [MetaMask SDK ConnectKit template](https://github.com/MetaMask/metamask-sdk-examples/tree/main/quickstarts/connectkit):
29+
30+
```bash
31+
npx degit MetaMask/metamask-sdk-examples/quickstarts/connectkit metamask-connectkit
32+
```
33+
34+
2. Navigate into the repository:
35+
36+
```bash
37+
cd metamask-connectkit
38+
```
39+
40+
<details>
41+
<summary>Degit vs. Git clone</summary>
42+
<div>
43+
44+
`degit` is a tool that enables cloning only the directory structure from a GitHub repository, without retrieving the entire repository.
45+
46+
Alternatively, you can use `git clone`, which will download the entire repository.
47+
To do so, clone the MetaMask SDK examples repository and navigate into the `quickstarts/connectkit` directory:
48+
49+
```bash
50+
git clone https://github.com/MetaMask/metamask-sdk-examples
51+
cd metamask-sdk-examples/quickstarts/connectkit
52+
```
53+
54+
</div>
55+
</details>
56+
57+
3. Install dependencies:
58+
59+
```bash
60+
pnpm install
61+
```
62+
63+
4. Create a `.env.local` file:
64+
65+
```bash
66+
touch .env.local
67+
```
68+
69+
5. In `.env.local`, add a `VITE_WALLETCONNECT_PROJECT_ID` environment variable, replacing `<YOUR-PROJECT-ID>` with your WalletConnect project ID:
70+
71+
```text title=".env.local"
72+
VITE_WALLETCONNECT_PROJECT_ID=<YOUR-PROJECT-ID>
73+
```
74+
75+
6. Run the project:
76+
77+
```bash
78+
pnpm dev
79+
```
80+
81+
## Set up manually
82+
83+
### 1. Install the SDK
84+
85+
Install MetaMask SDK along with its peer dependencies to an existing React project:
86+
87+
```bash npm2yarn
88+
npm install connectkit wagmi [email protected] @tanstack/react-query
89+
```
90+
91+
### 2. Import required dependencies
92+
93+
In the root of your project, import the required ConnectKit, Wagmi, and TanStack Query dependencies:
94+
95+
```jsx
96+
import { ConnectKitProvider, getDefaultConfig } from 'connectkit'
97+
import { createConfig, http, WagmiProvider } from 'wagmi'
98+
import { mainnet, linea, sepolia, lineaSepolia } from 'wagmi/chains'
99+
import { QueryClientProvider, QueryClient } from '@tanstack/react-query'
100+
```
101+
102+
### 3. Configure your project
103+
104+
Set up your configuration with the desired chains and wallets.
105+
In the following example, add your WalletConnect project ID:
106+
107+
```jsx
108+
const config = createConfig(
109+
getDefaultConfig({
110+
// Your dApps chains
111+
chains: [mainnet, linea, sepolia, lineaSepolia],
112+
transports: {
113+
// RPC URL for each chain
114+
[mainnet.id]: http(),
115+
},
116+
117+
// Required API Keys
118+
walletConnectProjectId: import.meta.env.VITE_WALLETCONNECT_PROJECT_ID,
119+
120+
// Required App Info
121+
appName: 'MetaMask SDK ConnectKit Quickstart',
122+
})
123+
)
124+
```
125+
126+
### 4. Set up providers
127+
128+
Wrap your application with the `WagmiProvider`, `QueryClientProvider`, and `ConnectKitProvider` providers:
129+
130+
```jsx
131+
const queryClient = new QueryClient()
132+
133+
createRoot(document.getElementById("root")!).render(
134+
<StrictMode>
135+
<WagmiProvider config={config}>
136+
<QueryClientProvider client={queryClient}>
137+
<ConnectKitProvider theme="rounded">
138+
<App />
139+
</ConnectKitProvider>
140+
</QueryClientProvider>
141+
</WagmiProvider>
142+
</StrictMode>
143+
);
144+
```
145+
146+
### 5. Add the connect button
147+
148+
Import and render the `ConnectKitButton` component:
149+
150+
```jsx
151+
import { ConnectKitButton } from 'connectkit'
152+
153+
function App() {
154+
return <ConnectKitButton />
155+
}
156+
157+
export default App
158+
```
159+
160+
You can now test your dapp by running `pnpm run dev`.
161+
162+
## Live example
163+
164+
<iframe className="mt-6" width="100%" height="600px" frameBorder="0" src="https://stackblitz.com/github/MetaMask/metamask-sdk-examples/tree/main/quickstarts/connectkit?ctl=1&embed=1&file=src%2Fmain.tsx&hideNavigation=1"></iframe>

‎sdk/connect/javascript-dynamic.md‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
sidebar_label: Dynamic SDK
33
description: Quickstart guide for using MetaMask SDK and Dynamic SDK.
4-
toc_max_heading_level: 2
4+
toc_max_heading_level: 3
55
keywords: [connect, MetaMask, Dynamic, SDK, dapp, Wallet SDK]
66
---
77

@@ -13,7 +13,7 @@ You can [download the quickstart template](#set-up-using-a-template) or [manuall
1313

1414
<p align="center">
1515
<a href="https://metamask-dynamic-demo.vercel.app/" target="_blank">
16-
<img src={require("../_assets/quickstart-dynamic.png").default} alt="Dynamic SDK Quickstart" width="600px" />
16+
<img src={require("../_assets/quickstart-dynamic.png").default} alt="Dynamic SDK Quickstart" width="600px" class="appScreen" />
1717
</a>
1818
</p>
1919

@@ -42,15 +42,15 @@ You can [download the quickstart template](#set-up-using-a-template) or [manuall
4242
<summary>Degit vs. Git clone</summary>
4343
<div>
4444

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:
45+
`degit` is a tool that enables cloning only the directory structure from a GitHub repository, without retrieving the entire repository.
4946

50-
```bash
51-
git clone https://github.com/MetaMask/metamask-sdk-examples
52-
cd metamask-sdk-examples/partners/dynamic
53-
```
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:
49+
50+
```bash
51+
git clone https://github.com/MetaMask/metamask-sdk-examples
52+
cd metamask-sdk-examples/partners/dynamic
53+
```
5454

5555
</div>
5656
</details>

‎sdk/connect/javascript-rainbowkit.md‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
description: Quickstart guide for using the MetaMask SDK with a JavaScript and RainbowKit dapp.
3-
toc_max_heading_level: 2
3+
toc_max_heading_level: 3
44
sidebar_label: JavaScript + RainbowKit
55
keywords: [connect, MetaMask, JavaScript, RainbowKit, SDK, dapp, Wallet SDK]
66
---
@@ -12,7 +12,7 @@ You can [download the quickstart template](#set-up-using-a-template) or [manuall
1212

1313
<p align="center">
1414
<a href="https://metamask-rainbowkit-demo.vercel.app/" target="_blank">
15-
<img src={require("../_assets/quickstart.jpg").default} alt="Quickstart" width="600px" />
15+
<img src={require("../_assets/quickstart-rainbowkit.png").default} alt="Quickstart" width="600px" class="appScreen" />
1616
</a>
1717
</p>
1818

@@ -93,12 +93,12 @@ npm install @rainbow-me/rainbowkit wagmi [email protected] @tanstack/react-query
9393
In the root of your project, import the required RainbowKit, Wagmi, and TanStack Query dependencies:
9494

9595
```jsx
96-
import "@rainbow-me/rainbowkit/styles.css"
97-
import { getDefaultConfig, RainbowKitProvider } from "@rainbow-me/rainbowkit"
98-
import { WagmiProvider } from "wagmi"
99-
import { metaMaskWallet } from "@rainbow-me/rainbowkit/wallets"
100-
import { mainnet, linea, sepolia, lineaSepolia } from "wagmi/chains"
101-
import { QueryClientProvider, QueryClient } from "@tanstack/react-query"
96+
import '@rainbow-me/rainbowkit/styles.css'
97+
import { getDefaultConfig, RainbowKitProvider } from '@rainbow-me/rainbowkit'
98+
import { WagmiProvider } from 'wagmi'
99+
import { metaMaskWallet } from '@rainbow-me/rainbowkit/wallets'
100+
import { mainnet, linea, sepolia, lineaSepolia } from 'wagmi/chains'
101+
import { QueryClientProvider, QueryClient } from '@tanstack/react-query'
102102
```
103103

104104
### 3. Configure your project
@@ -108,12 +108,12 @@ In the following example, replace `<YOUR-PROJECT-ID>` with your WalletConnect pr
108108

109109
```jsx
110110
const config = getDefaultConfig({
111-
appName: "MetaMask SDK RainbowKit Quickstart",
112-
projectId: "<YOUR-PROJECT-ID>",
111+
appName: 'MetaMask SDK RainbowKit Quickstart',
112+
projectId: '<YOUR-PROJECT-ID>',
113113
chains: [mainnet, linea, sepolia, lineaSepolia],
114114
wallets: [
115115
{
116-
groupName: "Preferred",
116+
groupName: 'Preferred',
117117
wallets: [metaMaskWallet],
118118
},
119119
],
@@ -123,30 +123,30 @@ const config = getDefaultConfig({
123123

124124
### 4. Set up providers
125125

126-
Wrap your application with the `RainbowKitProvider`, `WagmiProvider`, and `QueryClientProvider` providers:
126+
Wrap your application with the `WagmiProvider`, `QueryClientProvider`, and `RainbowKitProvider` providers:
127127

128128
```jsx
129129
const queryClient = new QueryClient()
130130

131-
const App = () => {
132-
return (
131+
createRoot(document.getElementById("root")!).render(
132+
<StrictMode>
133133
<WagmiProvider config={config}>
134134
<QueryClientProvider client={queryClient}>
135135
<RainbowKitProvider>
136136
<App />
137137
</RainbowKitProvider>
138138
</QueryClientProvider>
139139
</WagmiProvider>
140-
)
141-
}
140+
</StrictMode>
141+
);
142142
```
143143

144144
### 5. Add the connect button
145145

146146
Import and render the `ConnectButton` component:
147147

148148
```jsx
149-
import { ConnectButton } from "@rainbow-me/rainbowkit"
149+
import { ConnectButton } from '@rainbow-me/rainbowkit'
150150

151151
function App() {
152152
return <ConnectButton />

‎sdk/connect/javascript-wagmi.md‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
description: Quickstart guide for using the MetaMask SDK with a JavaScript and Wagmi dapp.
3-
toc_max_heading_level: 2
3+
toc_max_heading_level: 3
44
sidebar_label: JavaScript + Wagmi (recommended)
55
keywords: [connect, MetaMask, JavaScript, Wagmi, SDK, dapp, Wallet SDK]
66
---
@@ -11,9 +11,9 @@ Get started with MetaMask SDK in a JavaScript and Wagmi dapp.
1111
You can [download the quickstart template](#set-up-using-a-template) or [manually set up the SDK](#set-up-manually) in an existing dapp.
1212

1313
<p align="center">
14-
<a href="https://metamask-wagmi-demo.vercel.app/" target="_blank">
15-
<img src={require("../_assets/quickstart.jpg").default} alt="Quickstart" width="600px" />
16-
</a>
14+
<!-- a href="https://metamask-wagmi-demo.vercel.app/" target="_blank" -->
15+
<img src={require("../_assets/quickstart.jpg").default} alt="Quickstart" width="600px" class="appScreen" />
16+
<!-- /a -->
1717
</p>
1818

1919
## Prerequisites
@@ -40,15 +40,15 @@ You can [download the quickstart template](#set-up-using-a-template) or [manuall
4040
<summary>Degit vs. Git clone</summary>
4141
<div>
4242

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:
43+
`degit` is a tool that enables cloning only the directory structure from a GitHub repository, without retrieving the entire repository.
4744

48-
```bash
49-
git clone https://github.com/MetaMask/metamask-sdk-examples
50-
cd metamask-sdk-examples/quickstarts/wagmi
51-
```
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:
47+
48+
```bash
49+
git clone https://github.com/MetaMask/metamask-sdk-examples
50+
cd metamask-sdk-examples/quickstarts/wagmi
51+
```
5252

5353
</div>
5454
</details>
@@ -80,10 +80,10 @@ npm install @metamask/sdk wagmi [email protected] @tanstack/react-query
8080
In the root of your project, import the required dependencies:
8181

8282
```jsx
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"
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'
8787
```
8888

8989
### 3. Configure your project
@@ -131,7 +131,7 @@ const App = () => {
131131
Add the wallet connect and disconnect buttons to your application:
132132

133133
```jsx
134-
import { useAccount, useConnect, useDisconnect } from "wagmi"
134+
import { useAccount, useConnect, useDisconnect } from 'wagmi'
135135

136136
export const ConnectButton = () => {
137137
const { address } = useAccount()
@@ -169,8 +169,8 @@ You can configure your RPC endpoints in the Wagmi configuration as follows, repl
169169
const config = createConfig({
170170
// ... other config options
171171
transports: {
172-
[mainnet.id]: http("https://mainnet.infura.io/v3/<YOUR-API-KEY>"),
173-
[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>'),
174174
},
175175
})
176176
```

0 commit comments

Comments
 (0)