Skip to content

Commit ef7ecba

Browse files
commit new pages
1 parent 10f77ed commit ef7ecba

File tree

7 files changed

+218
-2
lines changed

7 files changed

+218
-2
lines changed
311 KB
Loading
448 KB
Loading

docs/tools/dApp-development/launchpad/commands.md

Whitespace-only changes.
Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
## Framework
2+
3+
The frontend runs on a Next.js server.
4+
5+
To get started, modify the component file at `./frontend/src/pages/index`.
6+
7+
!!! info
8+
If you're new to Next.js but know React.js, getting used to Next.js is trivial.
9+
To learn more about Next.js, [read their docs](https://nextjs.org/docs).
10+
11+
## Environment variables
12+
13+
Make sure you have followed the [steps in the quickstart](quickstart.md#set-up-environment-variables).
14+
15+
!!! note
16+
All environment variable names exposed in client requests should be prefixed with `NEXT_PUBLIC_`.
17+
18+
## Connecting wallets
19+
20+
To connect a wallet, [Web3Modal v3](https://web3modal.com/) has been integrated and pre-configured for you.
21+
22+
Use the provided [`useWallet`](https://github.com/0xPolygon/dapp-launchpad/blob/scaffold-template/javascript/frontend/src/hooks/useWallet.js) hook to interact with Web3Modal and wallets. This contains utilities to simplify anything you need related to wallets.
23+
24+
## Sending transactions to smart contracts
25+
26+
To send transactions to either a locally deployed smart contract or a smart contract on a prod chain, use the [`useSmartContract`](https://github.com/0xPolygon/dapp-launchpad/blob/scaffold-template/javascript/frontend/src/hooks/useSmartContract.js) hook. This contains utilities that simplify getting and interacting with a Ethers.js contract instance.
27+
28+
When [deploying to local or production](https://0xpolygon.gitbook.io/dapp-launchpad/commands/deploy), this hook automatically uses the correct chain and contracts.
29+
30+
## Deploying to local test server
31+
32+
The [`dev`](https://0xpolygon.gitbook.io/dapp-launchpad/commands/dev) command automates everything needed for setting up a local Next.js test server.
33+
34+
## Deploying to Vercel
35+
36+
We use Vercel for deployments. Vercel offers free quotas to developers to get started.
37+
38+
To deploy, follow the [deployment steps](quickstart.md#deploy-your-app-to-production).
39+
40+
With the [`deploy`](https://0xpolygon.gitbook.io/dapp-launchpad/commands/deploy) command, the frontend deployment is fully automated.
41+
42+
No pre-configuration is necessary for running the `deploy` command. You'll be taken through all relevant steps upon running it.

docs/tools/dApp-development/launchpad/quickstart.md

Lines changed: 124 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
- [Node](https://nodejs.org/en/download) version 18.x.x is recommended.
44
- Anything above Node version 16.14.x is supported.
5-
- We recommend [https://github.com/nvm-sh/nvm]] for managing Node installations.
5+
- We recommend [https://github.com/nvm-sh/nvm] for managing Node installations.
66

77
## Install the app
88

@@ -20,4 +20,126 @@ dapp-launchpad init <PROJECT-NAME>
2020

2121
This creates a new directory in your current directory, initializes a minimal dApp project, and installs the required packages.
2222

23-
### Project templates
23+
### Project templates
24+
25+
By default, the scaffolded project uses JavaScript. For TypeScript, use the `--template` flag.
26+
27+
```sh
28+
dapp-launchpad init <PROJECT-NAME> --template typescript
29+
```
30+
31+
To see the available templates, run the following:
32+
33+
```sh
34+
dapp-launchpad list scaffold-templates
35+
```
36+
37+
## Set up environment variables
38+
39+
There are mandatory environment variables in both the frontend and smart contract directories.
40+
41+
1. `cd` into your project directory.
42+
43+
2. Navigate to the frontend folder and copy the example file.
44+
45+
```sh
46+
cd frontend
47+
cp .env.example .env
48+
```
49+
50+
3. Open the `.env` file and add the `NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID` to the file.
51+
52+
!!! info "How to get the WalletConnect project id"
53+
You can get the variable by creating an application on [WalletConnect](https://cloud.walletconnect.com/).
54+
55+
1. Create an account and sign in.
56+
2. Select **Create a new project**.
57+
3. Give it a name and select **App**.
58+
4. The URL can be blank.
59+
5. Click the **Create** button underneath the project box.
60+
6. Copy the project id and paste it into the frontend `.env` file.
61+
62+
4. Navigate to the smart-contracts directory and copy the example file.
63+
64+
```sh
65+
cd proj/smart-contracts
66+
cp .env.example .env
67+
```
68+
69+
5. Open the `.env` file and add the mandatory `PRIVATE_KEY_DEPLOYER` variable. This is a private key from any wallet account.
70+
71+
!!! info
72+
The other variables in the smart-contracts `.env` file are optional.
73+
74+
## Start developing
75+
76+
1. Run the following command from the project root:
77+
78+
```sh
79+
dapp-launchpad dev
80+
```
81+
82+
You will see the local test blockchain running with deployed contracts and some pre-funded wallets you can use.
83+
84+
[Local test environment running](../../../img/tools/launchpad/running-example.png)
85+
86+
2. Open [http://localhost:3000](http://localhost:3000) in a browser.
87+
88+
[Web application running](../../../img/tools/launchpad/dev-startup.png)
89+
90+
You now have a fully integrated dev environment including a local dev blockchain and a local frontend dev server. Any changes to the code automatically updates both the frontend and the smart contracts. No manual reload is necessary.
91+
92+
### Start developing on an existing chain fork
93+
94+
You can start developing by forking an existing chain. To see the available options run the following:
95+
96+
```sh
97+
dapp-launchpad dev -h
98+
```
99+
100+
To fork Polygon zkEVM, for example, run the following command:
101+
102+
```sh
103+
dapp-launchpad dev -n polygonZkevm
104+
```
105+
106+
To fork at a particular block number run the command with the following optional flag:
107+
108+
```sh
109+
dapp-launchpad dev -n polygonZkevm -b [BLOCK_NUMBER_TO_FORK_AT]
110+
```
111+
112+
## Deploy your app to production
113+
114+
To deploy your project to production, run:
115+
116+
```sh
117+
dapp-launchpad deploy -n <CHAIN-NAME>
118+
```
119+
120+
This does two things:
121+
122+
1. Deploys all your smart contracts to the selected chain, and logs the deployment results.
123+
2. Deploys your frontend to Vercel, and logs the deployment URL.
124+
125+
To deploy only the smart contracts, run:
126+
127+
```sh
128+
dapp-launchpad deploy -n CHAIN_NAME --only-smart-contracts
129+
```
130+
131+
To deploy only the frontend, run:
132+
133+
```sh
134+
dapp-launchpad deploy -n CHAIN_NAME --only-frontend
135+
```
136+
137+
!!! important
138+
The frontend deployment requires that smart contracts to have been deployed before, so if you are only deploying the frontend, make sure that you:
139+
140+
1. Have already run the smart contracts deploy command successfully.
141+
2. OR, run the following wizard:
142+
143+
`generate smart-contracts-config -e production -n CHAIN_NAME`
144+
145+
Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
## Environment variables
2+
3+
Make sure you have followed the [steps in the quickstart](quickstart.md#set-up-environment-variables).
4+
5+
## Framework
6+
7+
The smart contracts run on a [Hardhat](https://hardhat.org/) environment. They are written in [Solidity](https://docs.soliditylang.org/) and reside in the `smart-contracts` directory.
8+
9+
Tests are written in JS/TS, and are in the `tests` directory. An example test is available.
10+
11+
Scripts are also written in JS/TS, and reside in the `scripts` directory. Some mandatory scripts are already there to get started with.
12+
13+
## Deploying on local test chain
14+
15+
Follow the [start developing instructions](quickstart.md#start-developing) to spin up a local chain.
16+
17+
For all available options run:
18+
19+
```sh
20+
dapp-launchpad dev -h
21+
```
22+
23+
Internally, the `dev` command runs the `scripts/deploy_localhost` script that deploys all contracts in the correct sequence.
24+
25+
!!! warning
26+
When working on your own smart contracts, make sure to update this script.
27+
28+
## Local test chain explorer
29+
30+
Optionally, you can enable a local blockchain explorer, which auto-indexes all transactions, and provides a feature-loaded dashboard with an overview of the chain.
31+
32+
To use it, run the `[dev]()` command with `-e`.
33+
34+
!!! info "Setting up an explorer"
35+
- Sign up on [Ethernal](https://app.tryethernal.com/), and create a workspace.
36+
- Then, add your login email, password, and workspace details in the `.env` file in the `smart-contracts` directly.
37+
38+
The above config can also be mentioned with [`dev`]() command params `--ethernal-login-email`, `--ethernal-login-password` and `--ethernal-workspace`, which override the preset environment variables.
39+
40+
Once started, you can access the chain explorer at the same URL as mentioned before.
41+
42+
## Deploying to production
43+
44+
The [`deploy`]() command automates deploying to any EVM compatible chain. It runs the provided `scripts/deploy_prod` script to deploy all contracts in the correct sequence. When working on your own smart contracts, make sure to update this script.
45+
46+
For all available options run:
47+
48+
```sh
49+
dapp-launchpad dev -h
50+
```

mkdocs.yml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -425,8 +425,10 @@ nav:
425425
- dApp development:
426426
- dApp Launchpad:
427427
- Introduction: tools/dApp-development/launchpad/intro.md
428+
- Quickstart: tools/dApp-development/launchpad/quickstart.md
428429
- Frontend: tools/dApp-development/launchpad/frontend.md
429430
- Smart contracts: tools/dApp-development/launchpad/smart-contracts.md
431+
- Commands: tools/dApp-development/launchpad/commands.md
430432
- Smart contract development on PoS:
431433
- Alchemy: tools/dApp-development/pos/alchemy.md
432434
- ChainIDE: tools/dApp-development/pos/chainide.md

0 commit comments

Comments
 (0)