🏗 scaffold-eth | 🏰 BuidlGuidl
🚩 Challenge 0: 🎟 Simple NFT Example 🤓
🎫 Create a simple NFT to learn basics of 🏗 scaffold-eth. You’ll use 👷♀️ HardHat to compile and deploy smart contracts. Then, you’ll use a template React app full of important Ethereum components and hooks. Finally, you’ll deploy an NFT to a public network to share with friends! 🚀
🏆 The final deliverable is an app that lets users purchase and transfer NFTs. Deploy your contracts to Rinkeby and then build and upload your app to a public web server. Share the url in the Challenge 0 telegram channel!!! 🍾
Checkpoint 0: 📦 Install 📚
(⚠️ Don’t install the linux package
yarn make sure you install yarn with
npm i -g yarn)
git clone https://github.com/scaffold-eth/scaffold-eth-typescript-challenges.git challenge-0-simple-nft
cd challenge-0-simple-nft git checkout challenge-0-simple-nft yarn install yarn chain
in a second terminal window, start your 📱 frontend:
cd challenge-0-simple-nft yarn start
in a third terminal window, 🛰 deploy your contract:
cd challenge-0-simple-nft yarn deploy
yarn deploy --resetto deploy a new contract any time.
📱 Open http://localhost:3000 to see the app
Checkpoint 1: ⛽️ Gas & Wallets 👛
⛽️ You’ll need to get some funds from the faucet for gas.
🦊 At first, please don’t connect MetaMask. If you already connected, please click logout:
🔥 We’ll use burner wallets on localhost…
👛 Explore how burner wallets work in 🏗 scaffold-eth by opening a new incognito window and navigate it to http://localhost:3000. You’ll notice it has a new wallet address in the top right. Copy the incognito browsers’ address and send localhost test funds to it from your first browser:
👨🏻🚒 When you close the incognito window, the account is gone forever. Burner wallets are great for local development but you’ll move to more permanent wallets when you interact with public networks.
Checkpoint 2: 🖨 Minting
✏️ Edit the mint task
packages/hardhat-tsand update the
toAddressto your frontend address (in the top right of http://localhost:3000).
in a terminal window run the mint script:
👀 You should see your collectibles show up if you minted to the correct address:
👛 Open an incognito window and navigate to http://localhost:3000
🎟 Transfer an NFT to the incognito window address using the UI:
🕵🏻♂️ Inspect the
Debug Contracts tab to figure out what address is the
🔏 You can also check out your smart contract
💼 Take a quick look at your deploy script
📝 If you want to make frontend edits, open
Checkpoint 3: 💾 Deploy it! 🛰
🛰 Ready to deploy to a public testnet?!?
🔐 Generate a deployer address with
👛 View your deployer address using
⛽️ Use a faucet like faucet.paradigm.xyz to fund your deployer address.
⚔️ Side Quest: Keep a 🧑🎤 punkwallet.io on your phone’s home screen and keep it loaded with testnet eth. 🧙♂️ You’ll look like a wizard when you can fund your deployer address from your phone in seconds.
🚀 Deploy your NFT smart contract:
💬 Hint: You can set the
RinkebyOR you can
yarn deploy --network Rinkeby.
Checkpoint 4: 🚢 Ship it! 🚁
✏️ Edit the
packages/vite-app-ts/src/config) to be the public network where you deployed your smart contract.
You should see the correct network in the frontend (http://localhost:3000):
🎫 Ready to mint a batch of NFTs for reals?
📦 Build your frontend:
💽 Upload your app to surge:
(You could also
yarn s3 or maybe even
Checkpoint 5: 📜 Contract Verification
packages/hardhat-ts/package.json file. You can get your key here.
Now you are ready to run the
yarn verify --network your_networkcommand to verify your contracts on etherscan 🛰
Checkpoint 6: 💪 Flex!
🎖 Show off your app by pasting the surge url in the Challenge 0 telegram channel 🎖
👩❤️👨 Share your public url with a friend and ask them for their address to send them a collectible 🙂
⚔️ Side Quests
🐟 Open Sea
Add your contract to OpenSea ( create -> submit NFTs -> “or add an existing contract”)
(It can take a while before they show up, but here is an example:)
You will need to get a key from infura.io and paste it into
🏃 Head to your next challenge here.
💬 Problems, questions, comments on the stack? Post them to the 🏗 scaffold-eth developers chat