From f9344bbe38199d999c5669f197fcf2a5a566611e Mon Sep 17 00:00:00 2001 From: Filip Harald Date: Thu, 22 Aug 2024 10:32:50 +0200 Subject: [PATCH] Using tabs to split between Hardhat- and Foundry-environment (#77) --- docs/deploying/deploy-smart-contracts.mdx | 105 +++++++++++++++++++--- docs/quick-start/environment.mdx | 100 ++++++++++++++++++--- 2 files changed, 183 insertions(+), 22 deletions(-) diff --git a/docs/deploying/deploy-smart-contracts.mdx b/docs/deploying/deploy-smart-contracts.mdx index a943b1b..4ce5f16 100644 --- a/docs/deploying/deploy-smart-contracts.mdx +++ b/docs/deploying/deploy-smart-contracts.mdx @@ -2,6 +2,9 @@ sidebar_position: 1 --- +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; + # Deploy Your Smart Contracts To deploy your smart contracts to a live network, there are a few things you need to adjust. @@ -10,8 +13,26 @@ To deploy your smart contracts to a live network, there are a few things you nee Scaffold-ETH 2 comes with a selection of predefined networks. You can also add your custom network in: -- Hardhat => `packages/hardhat/hardhat.config.ts` -- Foundry => `packages/foundry/foundry.toml` +```mdx-code-block + + +``` + +```sh +packages/hardhat/hardhat.config.ts +``` + +```mdx-code-block + + +``` + +```sh +packages/foundry/foundry.toml +``` + + + Here are the [Alchemy docs](https://docs.alchemy.com/docs/how-to-add-alchemy-rpc-endpoints-to-metamask) for information on specific networks. @@ -27,7 +48,22 @@ To create a random account and add the `DEPLOYER_PRIVATE_KEY` to the `.env` file yarn generate ``` -If you prefer to manually set your own private key, you will need to add `DEPLOYER_PRIVATE_KEY=yourWalletPrivateKey` to the `packages/hardhat/.env` / `packages/foundry/.env` file. +```mdx-code-block + + +``` + +If you prefer to manually set your own private key, you will need to add `DEPLOYER_PRIVATE_KEY=yourWalletPrivateKey` to `packages/hardhat/.env`. + +```mdx-code-block + + +``` + +If you prefer to manually set your own private key, you will need to add `DEPLOYER_PRIVATE_KEY=yourWalletPrivateKey` to `packages/foundry/.env`. + + + You can check the configured (generated or manually set) account and balances with: @@ -39,8 +75,26 @@ yarn account By default `yarn deploy` will deploy contract to the local network. You can change `defaultNetwork` in: -- Hardhat => `hardhat.config.ts` -- Foundry => `foundry.toml` +```mdx-code-block + + +``` + +```sh +packages/hardhat/hardhat.config.ts +``` + +```mdx-code-block + + +``` + +```sh +packages/foundry/foundry.toml +``` + + + Run the command below to deploy the smart contract to the target network. Make sure to have some funds in your deployer account to pay for the transaction. @@ -60,24 +114,55 @@ yarn verify --network network_name eg: `yarn verify --network sepolia` -This command **works in both Hardhat and Foundry**, verifying all the deployed contracts. However, the verification method differs depending on the Solidity framework you're using: +This command **works in both Hardhat and Foundry**, verifying all the deployed contracts. However, the verification method differs depending on the Solidity framework you're using... -- Hardhat => uses [etherscan-verify from hardhat-deploy](https://www.npmjs.com/package/hardhat-deploy#4-hardhat-etherscan-verify). -- Foundry => uses `VerifyAll.s.sol` script located in `packages/foundry/script`. + + -Additionally, **in Hardhat**, there's an alternative method for contract verification. You can use [hardhat-verify](https://hardhat.org/hardhat-runner/plugins/nomicfoundation-hardhat-verify) to verify your contracts, passing in the network name, contract address and constructor arguments (if any): `yarn hardhat-verify --network network_name contract_address "Constructor arg 1"` +Hardhat uses [etherscan-verify from hardhat-deploy](https://www.npmjs.com/package/hardhat-deploy#4-hardhat-etherscan-verify). + +Additionally, **in Hardhat**, there's an alternative method for contract verification. You can use [hardhat-verify](https://hardhat.org/hardhat-runner/plugins/nomicfoundation-hardhat-verify) to verify your contracts, passing in the network name, contract address and constructor arguments (if any): + +```sh +yarn hardhat-verify --network network_name contract_address "Constructor arg 1"` +``` If the chain you're using is not supported by any of the verifying methods, you can add new supported chains to your chosen method, either [etherscan-verify](https://www.npmjs.com/package/hardhat-deploy#options-2) or [hardhat-verify](https://hardhat.org/hardhat-runner/plugins/nomicfoundation-hardhat-verify#adding-support-for-other-networks). + + + +Foundry uses `VerifyAll.s.sol` script located in `packages/foundry/script`. + + + + ## Configuration of Third-Party Services for Production-Grade Apps. By default, Scaffold-ETH 2 provides predefined API keys for popular services such as Alchemy and Etherscan. This allows you to begin developing and testing your applications more easily, avoiding the need to register for these services. For production-grade applications, it's recommended to obtain your own API keys (to prevent rate limiting issues). You can configure these at: +```mdx-code-block + + +``` + - `ALCHEMY_API_KEY` variable in `packages/hardhat/.env` and `packages/nextjs/.env.local`. You can create API keys from the [Alchemy dashboard](https://dashboard.alchemy.com/). +- `ETHERSCAN_API_KEY` variable in `packages/hardhat/.env` using your generated API key. You can get your key [here](https://etherscan.io/myapikey). -- `ETHERSCAN_API_KEY` variable in `packages/hardhat/.env` | `packages/foundry/.env` using your generated API key. You can get your key [here](https://etherscan.io/myapikey). +```mdx-code-block + + +``` + +- `ALCHEMY_API_KEY` variable in `packages/nextjs/.env.local`. You can create API keys from the [Alchemy dashboard](https://dashboard.alchemy.com/). +- `ETHERSCAN_API_KEY` variable in `packages/foundry/.env` using your generated API key. You can get your key [here](https://etherscan.io/myapikey). + +```mdx-code-block + + +``` :::tip Hint It's recommended to store envs for nextjs in Vercel/system env config for live apps and use .env.local for local testing. diff --git a/docs/quick-start/environment.mdx b/docs/quick-start/environment.mdx index 76c75a3..2e750af 100644 --- a/docs/quick-start/environment.mdx +++ b/docs/quick-start/environment.mdx @@ -3,6 +3,9 @@ sidebar_position: 2 description: How to set up your development environment for Scaffold ETH-2. --- +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; + # Environment Now that our installation is complete, let's configure the development environment for Scaffold ETH-2. @@ -17,8 +20,26 @@ yarn chain This command starts a local Ethereum network using Hardhat or Foundry, depending on which one you selected in the CLI. The network runs on your local machine and can be used for testing and development. You can customize the network configuration in: -- Hardhat => `packages/hardhat/hardhat.config.ts` -- Foundry => `packages/foundry/foundry.toml` +```mdx-code-block + + +``` + +```sh +packages/hardhat/hardhat.config.ts +``` + +```mdx-code-block + + +``` + +```sh +packages/foundry/foundry.toml +``` + + + ### 2. **Deploy Your Smart Contract**: @@ -30,13 +51,49 @@ yarn deploy This command deploys a test smart contract to the local network. The contract can be modified to suit your needs and can be found in: -- Hardhat => `packages/hardhat/contracts` -- Foundry => `packages/foundry/contracts` +```mdx-code-block + + +``` + +```sh +packages/hardhat/contracts +``` + +```mdx-code-block + + +``` + +```sh +packages/foundry/contracts +``` + + + The `yarn deploy` command uses a deploy script to deploy the contract to the network. You can customize the deployment script located in: -- Hardhat => `packages/hardhat/deploy` -- Foundry => `packages/foundry/script` +```mdx-code-block + + +``` + +```sh +packages/hardhat/deploy +``` + +```mdx-code-block + + +``` + +```sh +packages/foundry/script +``` + + + ### 3. **Launch your NextJS Application**: @@ -50,14 +107,33 @@ Visit your app on `http://localhost:3000`. You can interact with your smart cont ## What's Next: +```mdx-code-block + + +``` + - Edit your smart contract: - - Hardhat => `YourContract.sol` in `packages/hardhat/contracts` - - Foundry => `YourContract.sol` in `packages/foundry/contracts` + - `YourContract.sol` in `packages/hardhat/contracts` - Edit your deployment scripts: - - Hardhat => `packages/hardhat/deploy` - - Foundry => `packages/foundry/script` + - `packages/hardhat/deploy` - Edit your frontend homepage at `packages/nextjs/app/page.tsx`. For guidance on [routing](https://nextjs.org/docs/app/building-your-application/routing/defining-routes) and configuring [pages/layouts](https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts) checkout the Next.js documentation. - Edit the app config in `packages/nextjs/scaffold.config.ts` - Edit your smart contract test in: - - Hardhat => `packages/hardhat/test` to run test use `yarn hardhat:test` - - Foundry => `packages/foundry/test` to run test use `yarn foundry:test` + - `packages/hardhat/test` to run test use `yarn hardhat:test` + +```mdx-code-block + + +``` + +- Edit your smart contract: + - `YourContract.sol` in `packages/foundry/contracts` +- Edit your deployment scripts: + - `packages/foundry/script` +- Edit your frontend homepage at `packages/nextjs/app/page.tsx`. For guidance on [routing](https://nextjs.org/docs/app/building-your-application/routing/defining-routes) and configuring [pages/layouts](https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts) checkout the Next.js documentation. +- Edit the app config in `packages/nextjs/scaffold.config.ts` +- Edit your smart contract test in: + - `packages/foundry/test` to run test use `yarn foundry:test` + + +