22sidebar_label : Dynamic SDK
33description : Quickstart guide for using MetaMask SDK and Dynamic SDK.
44toc_max_heading_level : 2
5- keywords : [connect, MetaMask, Dynamic, SDK, dapp]
5+ keywords : [connect, MetaMask, Dynamic, SDK, dapp, Wallet SDK ]
66---
77
88# Connect to MetaMask using Dynamic SDK
@@ -11,133 +11,76 @@ Get started with MetaMask SDK and [Dynamic SDK](https://docs.dynamic.xyz/introdu
1111You can use MetaMask SDK features directly within Dynamic SDK.
1212Set up the SDKs in one of the following ways:
1313
14- - [ SDK CLI] ( #set-up-using-the-cli ) - Use the CLI to scaffold a Next.js and Dynamic dapp.
1514- [ Quickstart template] ( #set-up-using-a-template ) - Clone the template to set up a Next.js and Dynamic dapp.
1615- [ Manual setup] ( #set-up-manually ) - Set up Dynamic SDK in an existing dapp.
1716
18- <details >
19- <summary >Project structure</summary >
20- <div >
21- The project you set up using the CLI or template has the following structure:
22-
23- ``` text
24- ├── app/
25- │ ├── providers.tsx # Main providers configuration
26- │ └── layout.tsx # Root layout with providers
27- ├── components/
28- │ ├── Navbar.tsx # Navigation with wallet connection
29- │ └── Hero.tsx # Hero section with wallet status
30- ├── wagmi.config.ts # Wagmi configuration
31- ├── next.config.ts # Next.js configuration
32- └── package.json # Project dependencies
33- ```
34- </div >
35- </details >
36-
3717<p align =" center " >
38- <img src={require("../_ assets/quickstart-dynamic.png").default} alt="Dynamic SDK Quickstart" width="600px" />
18+ <a href =" https://metamask-dynamic-demo.vercel.app/ " target =" _blank " >
19+ <img src={require("../_assets/quickstart-dynamic.png").default} alt="Dynamic SDK Quickstart" width="600px" />
20+ </a >
3921</p >
4022
4123## Prerequisites
4224
4325- [ Node.js] ( https://nodejs.org/ ) version 19 or later installed.
44- - A package manager installed.
45- The examples in this quickstart use [ pnpm] ( https://pnpm.io/installation ) .
26+ - 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/ ) .
4627- [ MetaMask] ( https://metamask.io/ ) installed in your browser or on mobile.
4728- A [ Dynamic Environment ID] ( https://app.dynamic.xyz/ ) .
4829
49- ## Set up using the CLI
50-
51- 1 . Run the CLI command, replacing ` <project-name> ` with your project name:
52-
53- ``` bash
54- npx @consensys/create-web3-app < project-name>
55- ```
56-
57- 2. Select the Dynamic Quickstart template:
58-
59- ` ` ` bash
60- ? Please select the template you want to use:
61- MetaMask < -> Next.js (Wagmi) Quickstart (Recommended)
62- MetaMask < -> Web3Auth Quickstart
63- ❯ MetaMask < -> Dynamic Quickstart
64- ` ` `
65-
66- 3. Select your preferred blockchain tooling if your project requires it:
67-
68- ` ` ` bash
69- ? Would you like to include blockchain tooling? (Use arrow keys)
70- ❯ HardHat
71- Foundry
72- None
73- ` ` `
74-
75- 4. Select your preferred package manager.
76- We recommend pnpm for speed and efficiency:
77-
78- ` ` ` bash
79- ? Please select the package manager you want to use:
80- Yarn
81- NPM
82- ❯ pnpm
83- ` ` `
30+ ## Set up using a template
8431
85- 5. Select to enter your Dynamic Environment ID in the command prompt :
32+ 1 . Download the [ MetaMask SDK + Dynamic SDK template ] ( https://github.com/MetaMask/metamask-sdk-examples/tree/main/partners/dynamic ) :
8633
87- ` ` ` bash
88- ? The selected template uses Dynamic.xyz. You' ll need a Dynamic Environment ID
89- added to a .env file. Would you like to add it now? You can get one from
90- https://app.dynamic.xyz/dashboard/developer/api Yes
91- ? Please paste your Dynamic Environment ID:
92- ```
34+ ``` bash
35+ npx degit MetaMask/metamask-sdk-examples/partners/dynamic metamask-dynamic
36+ ```
9337
94- 5. The CLI will take a few minutes to set up your project.
95- Once complete, you can run the project using the following command in `<project-name>/packages/site`:
38+ > ` degit ` is a tool that enables cloning only the directory structure from a GitHub repository, without retrieving the entire repository.
9639
97- ```bash
98- pnpm run dev
99- ```
40+ 2 . Navigate into the repository:
10041
101- You' ve successfully set up MetaMask SDK and Dynamic SDK.
102- See how to [use the combined SDKs](# usage).
42+ ``` bash
43+ cd metamask-dynamic
44+ ```
10345
104- # # Set up using a template
105-
106- 1. Download the [MetaMask SDK + Dynamic SDK template](https://github.com/MetaMask/metamask-dynamic):
46+ <details >
47+ <summary >GitHub clone instead of degit?</summary >
48+ <div >
49+ Clone the MetaMask SDK examples repository and navigate into the ` partners/dynamic ` directory:
10750
108- ` ` ` bash
109- git clone https://github.com/MetaMask/metamask-dynamic
110- ` ` `
51+ ``` bash
52+ git clone https://github.com/MetaMask/metamask-sdk-examples
53+ cd metamask-sdk-examples/partners/dynamic
54+ ```
11155
112- 2. Navigate into the repository:
56+ > Note: _ this will download the entire repository. _
11357
114- ` ` ` bash
115- cd metamask-dynamic
116- ` ` `
58+ </div >
59+ </details >
11760
118613 . Install dependencies:
11962
120- ` ` ` bash
121- pnpm install
122- ` ` `
63+ ``` bash
64+ pnpm install
65+ ```
12366
124674 . Create a ` .env.local ` file:
12568
126- ` ` ` bash
127- touch .env.local
128- ` ` `
69+ ``` bash
70+ touch .env.local
71+ ```
12972
130735 . In ` .env.local ` , add a ` NEXT_PUBLIC_DYNAMIC_ENVIRONMENT_ID ` environment variable, replacing ` <YOUR-ENVIRONMENT-ID> ` with your Dynamic Environment ID:
13174
132- ` ` ` text title=" .env.local"
133- NEXT_PUBLIC_DYNAMIC_ENVIRONMENT_ID=< YOUR-ENVIRONMENT-ID>
134- ` ` `
75+ ``` text title=".env.local"
76+ NEXT_PUBLIC_DYNAMIC_ENVIRONMENT_ID=<YOUR-ENVIRONMENT-ID>
77+ ```
13578
136- 4 . Run the project:
79+ 6 . Run the project:
13780
138- ` ` ` bash
139- pnpm dev
140- ` ` `
81+ ``` bash
82+ pnpm dev
83+ ```
14184
14285You've successfully set up MetaMask SDK and Dynamic SDK.
14386See how to [ use the combined SDKs] ( #usage ) .
@@ -148,8 +91,8 @@ See how to [use the combined SDKs](#usage).
14891
14992Install the SDK and the required dependencies to an existing project:
15093
151- ```bash
152- pnpm i @dynamic-labs/sdk-react-core @dynamic-labs/ethereum @dynamic-labs/wagmi-connector wagmi viem @tanstack/react-query
94+ ``` bash npm2yarn
95+ npm install @dynamic-labs/sdk-react-core @dynamic-labs/ethereum @dynamic-labs/wagmi-connector wagmi viem @tanstack/react-query
15396```
15497
15598### 2. Configure providers
0 commit comments