Skip to content

Commit 2228294

Browse files
committed
Fixes Template Steps
* Fixes Template Steps with new repo structure * Removes CLI steps * use of npm2yarn * minor fixes and link to SDK inclusions
1 parent e68e3c6 commit 2228294

File tree

5 files changed

+200
-292
lines changed

5 files changed

+200
-292
lines changed
150 KB
Loading

sdk/connect/javascript-dynamic.md

Lines changed: 41 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
sidebar_label: Dynamic SDK
33
description: Quickstart guide for using MetaMask SDK and Dynamic SDK.
44
toc_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
1111
You can use MetaMask SDK features directly within Dynamic SDK.
1212
Set 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

11861
3. Install dependencies:
11962

120-
```bash
121-
pnpm install
122-
```
63+
```bash
64+
pnpm install
65+
```
12366

12467
4. Create a `.env.local` file:
12568

126-
```bash
127-
touch .env.local
128-
```
69+
```bash
70+
touch .env.local
71+
```
12972

13073
5. 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

14285
You've successfully set up MetaMask SDK and Dynamic SDK.
14386
See how to [use the combined SDKs](#usage).
@@ -148,8 +91,8 @@ See how to [use the combined SDKs](#usage).
14891

14992
Install 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

Comments
 (0)