🏗 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

🚩 Challenge: 🏵 Token Vendor 🤖

🤖 Smart contracts are kind of like "always on" vending machines that anyone can access. Let's make a decentralized, digital currency. Then, let's build an unstoppable vending machine that will buy and sell the currency. We'll learn about the "approve" pattern for ERC20s and how contract to contract interactions work.

🏵 Create YourToken.sol smart contract that inherits the ERC20 token standard from OpenZeppelin. Set your token to _mint() 1000 (* 10 ** 18) tokens to the msg.sender. Then create a Vendor.sol contract that sells your token using a payable buyTokens() function.

🎛 Edit the frontend that invites the user to input an amount of tokens they want to buy. We'll display a preview of the amount of ETH it will cost with a confirm button.

🔍 It will be important to verify your token's source code in the block explorer after you deploy. Supporters will want to be sure that it has a fixed supply and you can't just mint more.

🌟 The final deliverable is an app that lets users purchase your ERC20 token, transfer it, and sell it back to the vendor. Deploy your contracts on your public chain of choice and then yarn vercel your app to a public web server. Submit the url on SpeedRunEthereum.com!

💬 Meet other builders working on this challenge and get help in the Challenge Telegram!

---

Checkpoint 0: 📦 Environment 📚

Start your local network (a blockchain emulator in your computer):

yarn chain

in a second terminal window, 🛰 deploy your contract (locally):

yarn deploy

in a third terminal window, start your 📱 frontend:

yarn start

📱 Open http://localhost:3000 to see the app.

👩‍💻 Rerun yarn deploy whenever you want to deploy new contracts to the frontend. If you haven't made any contract changes, you can run yarn deploy --reset for a completely fresh deploy.

---

Checkpoint 1: 🏵Your Token 💵

👩‍💻 Edit YourToken.sol to inherit the ERC20 token standard from OpenZeppelin

Mint 1000 (* 10 ** 18) to your frontend address using the constructor().

(Your frontend address is the address in the top right of http://localhost:3000)

You can yarn deploy --reset to deploy your contract until you get it right.

🥅 Goals

• Can you check the balanceOf() your frontend address in the Debug Contracts tab? (YourToken contract)
• Can you transfer() your token to another account and check that account's balanceOf?

💬 Hint: Use an incognito window to create a new address and try sending to that new address. Can use the transfer() function in the Debug Contracts tab.

---

Checkpoint 2: ⚖️ Vendor 🤖

👩‍💻 Edit the Vendor.sol contract with a payable buyTokens() function

Use a price variable named tokensPerEth set to 100:

uint256 public constant tokensPerEth = 100;

📝 The buyTokens() function in Vendor.sol should use msg.value and tokensPerEth to calculate an amount of tokens to yourToken.transfer() to msg.sender.

📟 Emit event BuyTokens(address buyer, uint256 amountOfETH, uint256 amountOfTokens) when tokens are purchased.

Edit packages/hardhat/deploy/01_deploy_vendor.ts to deploy the Vendor (uncomment Vendor deploy lines).

Uncomment the Buy Tokens sections in packages/nextjs/app/token-vendor/page.tsx to show the UI to buy tokens on the Token Vendor tab.

🥅 Goals

• When you try to buy tokens from the vendor, you should get an error: 'ERC20InsufficientBalance'

⚠️ This is because the Vendor contract doesn't have any YourTokens yet!

⚔️ Side Quest: send tokens from your frontend address to the Vendor contract address and then try to buy them.

✏️ We can't hard code the vendor address like we did above when deploying to the network because we won't know the vendor address at the time we create the token contract.

✏️ So instead, edit YourToken.sol to mint the tokens to the msg.sender (deployer) in the constructor().

✏️ Then, edit deploy/01_deploy_vendor.ts to transfer 1000 tokens to vendor address.

await yourToken.transfer(vendorAddress, hre.ethers.parseEther("1000"));

🔎 Look in packages/nextjs/app/token-vendor/page.tsx for code to uncomment to display the Vendor ETH and Token balances.

You can yarn deploy --reset to deploy your contract until you get it right.

🥅 Goals

• Does the Vendor address start with a balanceOf 1000 in YourToken on the Debug Contracts tab?
• Can you buy 10 tokens for 0.1 ETH?
• Can you transfer tokens to a different account?

⚠️ Uncomment the import of Ownable.sol contract!

📝 Edit Vendor.sol to inherit Ownable.

contract Vendor is Ownable {

📝 Change constructor of Vendor.sol to:

constructor(address tokenAddress) Ownable(msg.sender) {

In deploy/01_deploy_vendor.ts you will need to call transferOwnership() on the Vendor to make your frontend address the owner:

await vendor.transferOwnership("**YOUR FRONTEND ADDRESS**");

🥅 Goals

• Is your frontend address the owner of the Vendor?

📝 Finally, add a withdraw() function in Vendor.sol that lets the owner withdraw all the ETH from the vendor contract.

🥅 Goals

• Can only the owner withdraw the ETH from the Vendor?

⚔️ Side Quests

• What if you minted 2000 and only sent 1000 to the Vendor?

---

Checkpoint 3: 🤔 Vendor Buyback 🤯

👩‍🏫 The hardest part of this challenge is to build your Vendor to buy the tokens back.

🧐 The reason why this is hard is the approve() pattern in ERC20s.

😕 First, the user has to call approve() on the YourToken contract, approving the Vendor contract address to take some amount of tokens.

🤨 Then, the user makes a second transaction to the Vendor contract to sellTokens(uint256 amount).

🤓 The Vendor should call yourToken.transferFrom(msg.sender, address(this), theAmount) and if the user has approved the Vendor correctly, tokens should transfer to the Vendor and ETH should be sent to the user.

📝 Edit Vendor.sol and add a sellTokens(uint256 amount) function!

⚠️ You will need extra UI for calling approve() before calling sellTokens(uint256 amount).

🔨 Use the Debug Contracts tab to call the approve and sellTokens() at first but then...

🔍 Look in the packages/nextjs/app/token-vendor/page.tsx for the extra approve/sell UI to uncomment!

🥅 Goal

• Can you sell tokens back to the vendor?
• Do you receive the right amount of ETH for the tokens?

⚔️ Side Quests

• Should we disable the owner withdraw to keep liquidity in the Vendor?

• It would be a good idea to display Sell Token Events. Create an event SellTokens(address seller, uint256 amountOfTokens, uint256 amountOfETH) and emit it in your Vendor.sol and uncomment SellTokens Events section in your packages/nextjs/app/events/page.tsx to update your frontend.

  

⚠️ Test it!

• Now is a good time to run yarn test to run the automated testing function. It will test that you hit the core checkpoints. You are looking for all green checkmarks and passing tests!

---

Checkpoint 4: 💾 Deploy your contracts! 🛰

📡 Edit the defaultNetwork to your choice of public EVM networks in packages/hardhat/hardhat.config.ts

🔐 You will need to generate a deployer address using yarn generate This creates a mnemonic and saves it locally.

👩‍🚀 Use yarn account to view your deployer account balances.

⛽️ You will need to send ETH to your deployer address with your wallet, or get it from a public faucet of your chosen network.

🚀 Run yarn deploy to deploy your smart contract to a public network (selected in hardhat.config.ts)

💬 Hint: You can set the defaultNetwork in hardhat.config.ts to sepolia or optimismSepolia OR you can yarn deploy --network sepolia or yarn deploy --network optimismSepolia.

---

Checkpoint 5: 🚢 Ship your frontend! 🚁

✏️ Edit your frontend config in packages/nextjs/scaffold.config.ts to change the targetNetwork to chains.sepolia (or chains.optimismSepolia if you deployed to OP Sepolia)

💻 View your frontend at http://localhost:3000 and verify you see the correct network.

📡 When you are ready to ship the frontend app...

📦 Run yarn vercel to package up your frontend and deploy.

You might need to log in to Vercel first by running yarn vercel:login. Once you log in (email, GitHub, etc), the default options should work.

If you want to redeploy to the same production URL you can run yarn vercel --prod. If you omit the --prod flag it will deploy it to a preview/test URL.

Follow the steps to deploy to Vercel. It'll give you a public URL.

🦊 Since we have deployed to a public testnet, you will now need to connect using a wallet you own or use a burner wallet. By default 🔥 burner wallets are only available on hardhat . You can enable them on every chain by setting onlyLocalBurnerWallet: false in your frontend config (scaffold.config.ts in packages/nextjs/)

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. This is great to complete your SpeedRunEthereum.

For production-grade applications, it's recommended to obtain your own API keys (to prevent rate limiting issues). You can configure these at:

• 🔷ALCHEMY_API_KEY variable in packages/hardhat/.env and packages/nextjs/.env.local. You can create API keys from the Alchemy dashboard.

• 📃ETHERSCAN_API_KEY variable in packages/hardhat/.env with your generated API key. You can get your key here.

💬 Hint: It's recommended to store env's for nextjs in Vercel/system env config for live apps and use .env.local for local testing.

---

Checkpoint 6: 📜 Contract Verification

Run the yarn verify --network your_network command to verify your contracts on etherscan 🛰

👀 You may see an address for both YourToken and Vendor. You will want the Vendor address.

👉 Search this address on Sepolia Etherscan (or Optimism Sepolia Etherscan if you deployed to OP Sepolia) to get the URL you submit to 🏃‍♀️SpeedRunEthereum.com.

---

🏃 Head to your next challenge here.

💬 Problems, questions, comments on the stack? Post them to the 🏗 scaffold-eth developers chat

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.