Using tabs to split between Hardhat- and Foundry-environment (#77)

scaffold-eth · Aug 22, 2024 · f9344bb · f9344bb
1 parent 4e518da
commit f9344bb
Show file tree

Hide file tree

Showing 2 changed files with 183 additions and 22 deletions.
diff --git 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
+<Tabs groupId="dev-tool">
+<TabItem value="hardhat" label="Hardhat" default>
+```
+
+```sh
+packages/hardhat/hardhat.config.ts
+```
+
+```mdx-code-block
+</TabItem>
+<TabItem value="foundry" label="Foundry">
+```
+
+```sh
+packages/foundry/foundry.toml
+```
+
+</TabItem>
+</Tabs>
 
 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
+<Tabs groupId="dev-tool">
+<TabItem value="hardhat" label="Hardhat" default>
+```
+
+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
+</TabItem>
+<TabItem value="foundry" label="Foundry">
+```
+
+If you prefer to manually set your own private key, you will need to add `DEPLOYER_PRIVATE_KEY=yourWalletPrivateKey` to `packages/foundry/.env`.
+
+</TabItem>
+</Tabs>
 
 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
+<Tabs groupId="dev-tool">
+<TabItem value="hardhat" label="Hardhat" default>
+```
+
+```sh
+packages/hardhat/hardhat.config.ts
+```
+
+```mdx-code-block
+</TabItem>
+<TabItem value="foundry" label="Foundry">
+```
+
+```sh
+packages/foundry/foundry.toml
+```
+
+</TabItem>
+</Tabs>
 
 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`.
+<Tabs groupId="dev-tool">
+<TabItem value="hardhat" label="Hardhat" default>
 
-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).
 
+</TabItem>
+<TabItem value="foundry" label="Foundry">
+
+Foundry uses `VerifyAll.s.sol` script located in `packages/foundry/script`.
+
+</TabItem>
+</Tabs>
+
 ## 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
+<Tabs groupId="dev-tool">
+<TabItem value="hardhat" label="Hardhat" default>
+```
+
 - `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
+</TabItem>
+<TabItem value="foundry" label="Foundry">
+```
+
+- `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
+</TabItem>
+</Tabs>
+```
 
 :::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
@@ -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
+<Tabs groupId="dev-tool">
+<TabItem value="hardhat" label="Hardhat" default>
+```
+
+```sh
+packages/hardhat/hardhat.config.ts
+```
+
+```mdx-code-block
+</TabItem>
+<TabItem value="foundry" label="Foundry">
+```
+
+```sh
+packages/foundry/foundry.toml
+```
+
+</TabItem>
+</Tabs>
 
 ### 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
+<Tabs groupId="dev-tool">
+<TabItem value="hardhat" label="Hardhat" default>
+```
+
+```sh
+packages/hardhat/contracts
+```
+
+```mdx-code-block
+</TabItem>
+<TabItem value="foundry" label="Foundry">
+```
+
+```sh
+packages/foundry/contracts
+```
+
+</TabItem>
+</Tabs>
 
 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
+<Tabs groupId="dev-tool">
+<TabItem value="hardhat" label="Hardhat" default>
+```
+
+```sh
+packages/hardhat/deploy
+```
+
+```mdx-code-block
+</TabItem>
+<TabItem value="foundry" label="Foundry">
+```
+
+```sh
+packages/foundry/script
+```
+
+</TabItem>
+</Tabs>
 
 ### 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
+<Tabs groupId="dev-tool">
+<TabItem value="hardhat" label="Hardhat" default>
+```
+
 - 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
+</TabItem>
+<TabItem value="foundry" label="Foundry">
+```
+
+- 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`
+
+</TabItem>
+</Tabs>