๐ซ 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!!! ๐พ
Want a fresh cloud environment? Click this to open a gitpod workspace, then skip to Checkpoint 1 after the tasks are complete.
Required:
(yarn
make sure you install yarn with npm i -g yarn
or even sudo npm i -g yarn
!)
git clone https://github.com/scaffold-eth/scaffold-eth-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
You can
yarn deploy --reset
to deploy a new contract any time.
๐ฑ Open http://localhost:3000 to see the app
โฝ๏ธ 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.
โ๏ธ Mint some NFTs! Click the
MINT NFT
button in the YourCollectables tab.
๐ You should see your collectibles start to show up:
๐ Open an incognito window and navigate to http://localhost:3000
๐ Transfer an NFT to the incognito window address using the UI:
๐ Try to mint an NFT from the incognito window.
Can you mint an NFT with no funds in this address? You might need to grab funds from the faucet to pay the gas!
๐ต๐ปโโ๏ธ Inspect the Debug Contracts
tab to figure out what address is the owner
of YourCollectible
?
๐ You can also check out your smart contract YourCollectible.sol
in packages/hardhat/contracts
.
๐ผ Take a quick look at your deploy script 00_deploy_your_contract.js
in packages/hardhat/deploy
.
๐ If you want to make frontend edits, open App.jsx
in packages/react-app/src
.
๐ฐ Ready to deploy to a public testnet?!?
Change the
defaultNetwork
inpackages/hardhat/hardhat.config.js
torinkeby
๐ Generate a deployer address with yarn generate
๐ View your deployer address using yarn account
โฝ๏ธ 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:
yarn deploy
๐ฌ Hint: You can set the
defaultNetwork
inhardhat.config.js
toRinkeby
OR you canyarn deploy --network rinkeby
.
โ๏ธ Edit your frontend
App.jsx
inpackages/react-app/src
to change thetargetNetwork
toNETWORKS.rinkeby
:
You should see the correct network in the frontend (http://localhost:3000):
๐ซ Ready to mint a batch of NFTs for reals? Use the MINT NFT
button.
๐ฆ Build your frontend:
yarn build
๐ฝ Upload your app to surge:
yarn surge
(You could also yarn s3
or maybe even yarn ipfs
?)
๐ฌ Windows users beware! You may have to change the surge code in
packages/react-app/package.json
to just"surge": "surge ./build",
โ If you get a permissions error yarn surge
again until you get a unique URL, or customize it in the command line.
yarn test
Update the api-key
in packages/hardhat/package.json
file. You can get your key here.
Now you are ready to run the
yarn verify --network your_network
command to verify your contracts on etherscan ๐ฐ
๐ 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 :)
Add your contract to OpenSea
(It can take a while before they show up, but here is an example:) https://testnets.opensea.io/assets/0xc2839329166d3d004aaedb94dde4173651babccf/1
You will need to get a key from infura.io and paste it into constants.js in packages/react-app/src:
๐ Head to your next challenge here.
๐ฌ Problems, questions, comments on the stack? Post them to the ๐ scaffold-eth developers chat