🏗 Scaffold-ETH 2

Documentation | Website

🧪 An open-source, up-to-date toolkit for building decentralized applications (dapps) on the Ethereum blockchain. It's designed to make it easier for developers to create and deploy smart contracts and build user interfaces that interact with those contracts.

⚙️ Built using NextJS, RainbowKit, Hardhat, Wagmi, Viem, and Typescript.

• ✅ Contract Hot Reload: Your frontend auto-adapts to your smart contract as you edit it.
• 🪝 Custom hooks: Collection of React hooks wrapper around wagmi to simplify interactions with smart contracts with typescript autocompletion.
• 🧱 Components: Collection of common web3 components to quickly build your frontend.
• 🔥 Burner Wallet & Local Faucet: Quickly test your application with a burner wallet and local faucet.
• 🔐 Integration with Wallet Providers: Connect to different wallet providers and interact with the Ethereum network.

Requirements

Before you begin, you need to install the following tools:

• Node (>= v20.18.3)
• Yarn (v1 or v2+)
• Git

Welcome to the BuidlGuidl CTF

⚡️ Live at https://ctf.buidlguidl.com

If you have your own stack already, go straight to the CTF site and start playing.

We have created this stack, which contains all the tools you need to play the CTF.

Once you have solved a challenge locally, you can deploy your solution to Optimism, and then interact with the live contracts from the frontend by switching the network to Optimism. If you are using a script, make sure you are pointing it to the Optimism RPC.

Live challenges addresses and ABIs are already stored in your externalContracts.ts file.

Keep reading to learn how to set it up.

Setting up the environment

Requirements

You'll need to have the following tools installed in your machine:

• Node (>= v18.18)
• Yarn (v1 or v2+)
• Git
• Foundryup (if foundry is selected)

Note for Windows users. Foundryup is not currently supported by Powershell or Cmd, and has issues with Git Bash. You will need to use WSL as your terminal.

Setting up your local testing environment

First, install the Scaffold-ETH 2 CTF extension with create-eth:

npx create-eth@latest -e buidlguidl/ctf.buidlguidl.com:extension

This will create a new folder with all the tools you need to play the CTF locally. Afterward, you'll be able to deploy the solutions to Optimism and capture the flags in the live game.

Go into the folder and run the following commands in separate terminals:

1. Run a local blockchain:

yarn chain

2. Deploy the challenges contracts locally:

hardhat

yarn deploy

foundry

yarn deploy --file DeployChallenges.s.sol

Note: This command will update the deployedContracts.ts file (in the scripts and nextjs packages), which contains the deployed contracts addresses and ABIs.

3. Start the frontend (NextJS app):

yarn start

Now your app on http://localhost:3000 is running entirely locally. You can break things without any consequences :)

Repo structure / Key files

This is a yarn monorepo with different packages:

ctf/
└── packages/
    ├── {solidity-framework}/
    ├── nextjs/
    └── scripts/

hardhat

Comes preconfigured with hardhat and contains the smart contracts and deployment scripts for the CTF challenges.

It uses hardhat-deploy to deploy the contracts.

Key files in hardhat

• contracts/: The source directory where all your smart contracts should be. It already contains all the challenge contracts and the NFT Flag minter contract.
• deploy/: This directory contains all your deployments scripts. When you run yarn deploy all the scripts present in this directory will be executed in numbered order.

Example (How to deploy a contract)

1. Create the smart contract:

   • Add your new contract file (e.g., Challenge2Solution.sol) in the packages/hardhat/contracts/ directory.

2. Create a deployment script:

   • Add a new file (or use the already created 02_deploy_challenge_2_solution.ts file as a starting point) in the deploy/ directory.
   • Write your deployment script as needed (you can use 00_deploy_your_contract.ts to guide you)

3. Deploy your contract locally:

   • Run yarn deploy --tags solution2 to deploy your solution contract locally. The tags make sure that your are only deploying the solution contract and not all the other challenges (that were deployed with yarn deploy or yarn deploy --tags CTF).

4. When tested and ready, deploy your contract to Optimism (ask us for some funds if you need!):

   • Note: You need a private key to deploy the contracts. You can generate one with yarn generate or add your own private key in the .env files in /packages/hardhat and packages/scripts folders.

   • Run yarn deploy --tags solution2 --network optimism to deploy your solution contract to Optimism.

For more details on deployment, including configuring deployer accounts or the network you want to deploy to, see the Scaffold-ETH 2 deployment docs.

foundry

Comes preconfigured with Foundry development environment and contains the smart contracts and deployment scripts for the CTF challenges.

Key files in foundry

• contracts/: The source directory where all your smart contracts should be. It already contains all the challenge contracts and the NFT Flag minter contract.
• script/: This directory contains all your deployments scripts. When you run yarn deploy it defaults to Deploy.s.sol, but you can also deploy any other script from this directory (e.g., yarn deploy --file DeploySolution2.s.sol).

Example (How to deploy your solution contracts)

1. Create the smart contract:

   • Add your new contract file (e.g., Challenge2Solution.sol) in the packages/foundry/contracts/ directory.

2. Create a deployment script:

   • Add a new file (or use the already created DeploySolution2.s.sol file as a starting point) in the script/ directory.
   • Write your deployment script as needed (you can use DeployChallenges.s.sol to guide you)

3. Deploy your contract locally:

   • Run yarn deploy --file DeploySolution2.s.sol to deploy your solution contract locally. yarn deploy by default runs Deploy.s.sol which is useful when deploying multiple solutions at once. Use the --file flag when you want to deploy a specific solution

4. When tested and ready, deploy your contract to Optimism (ask us for some funds if you need!):

   • Note: You need a foundry keystore account to deploy. Either:

     • Generate with random private key: Run yarn generate and update ETH_KEYSTORE_ACCOUNT=scaffold-eth-custom in packages/foundry/.env.
     • Create one with existing private key: Run yarn account:import, enter your private key, and update ETH_KEYSTORE_ACCOUNT=scaffold-eth-custom in packages/foundry/.env.

   • TIP: You can check configured account balance with yarn account.

   • Run yarn deploy --file DeploySolution2.s.sol --network optimism to deploy your solution contract to Optimism.

   For more details on deployment, including configuring deployer accounts or the network you want to deploy to, see the Scaffold-ETH 2 foundry deployment.

NextJS

This is the frontend to track your local progress in the CTF game and the UI to interact with the deployed contracts. Main pages:

• "Homepage" shows your progress, with the flags you have minted and the pending flags.
• "Debug Contracts" lists all the deployed contracts and allows you to interact with them.

Key folders and files:

• app/: Contains the Next.js pages and components (uses app router).
• contracts/: Contains deployed contracts ABIs and addresses.
• package.json: Dependencies and scripts for the Next.js app.
• scaffold.config.ts: Configuration file (you can switch between local and Optimism networks by changing targetNetwork). For extra info check our docs.

scripts

Contains scripts to interact with the deployed contracts. This package comes pre-installed with viem which helps you interface with the Blockchain using Typescript scripts.

Key files and directories:

• src/: Contains the script files.
  • example.ts: A basic example script demonstrating how to interact with contracts.
• contracts/: Contains deployed contracts ABIs and addresses. (generated by yarn deploy)

To run the script in the local chain (test account PK with loaded funds):

cd packages/scripts
yarn tsx src/example.ts

To run the script with your own PK (generated via yarn generate or yarn account:import):

cd packages/scripts
yarn tsx-with-pk src/example.ts

• Check the TARGET_CHAIN variable in the example script to see how to deploy to the live network. (default is localhost)

Documentation

Visit our docs to learn how to start building with Scaffold-ETH 2.

To know more about its features, check out our website.

Contributing to Scaffold-ETH 2

We welcome contributions to Scaffold-ETH 2!

Please see CONTRIBUTING.MD for more information and guidelines for contributing to Scaffold-ETH 2.