๐Ÿ–ผ Simple NFT
Build a simple NFT application ๐Ÿง‘โ€๐ŸŽจ

๐Ÿšฉ 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 ๐Ÿ“š

Required:
(โš ๏ธ Don't install the linux package yarn make sure you install yarn with npm i -g yarn)
1
git clone https://github.com/scaffold-eth/scaffold-eth-challenges.git challenge-0-simple-nft
Copied!
1
cd challenge-0-simple-nft
2
git checkout challenge-0-simple-nft
3
yarn install
4
yarn chain
Copied!
in a second terminal window, start your ๐Ÿ“ฑ frontend:
1
cd challenge-0-simple-nft
2
yarn start
Copied!
in a third terminal window, ๐Ÿ›ฐ deploy your contract:
1
cd challenge-0-simple-nft
2
yarn deploy
Copied!
You can yarn deploy --reset to 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.
image
๐ŸฆŠ At first, please don't connect MetaMask. If you already connected, please click logout:
image
๐Ÿ”ฅ 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:
image
๐Ÿ‘จ๐Ÿปโ€๐Ÿš’ 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 script mint.js in packages/hardhat/scripts and update the toAddress to your frontend address (in the top right of http://localhost:3000).
nft1
in a terminal window run the mint script:
1
yarn mint
Copied!
nft2
๐Ÿ‘€ You should see your collectibles show up if you minted to the correct address:
nft3
๐Ÿ‘› Open an incognito window and navigate to http://localhost:3000
๐ŸŽŸ Transfer an NFT to the incognito window address using the UI:
nft5
๐Ÿ•ต๐Ÿปโ€โ™‚๏ธ 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.
โ€‹

โœ… Checkpoint 3: ๐Ÿ’พ Deploy it! ๐Ÿ›ฐ

๐Ÿ›ฐ Ready to deploy to a public testnet?!?
Change the defaultNetwork in packages/hardhat/hardhat.config.js to NETWORKS.rinkeby
image
๐Ÿ” Generate a deployer address with yarn generate
nft7
๐Ÿ‘› View your deployer address using yarn account
nft8
โ›ฝ๏ธ 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:
1
yarn deploy
Copied!
๐Ÿ’ฌ Hint: You can set the defaultNetwork in hardhat.config.js to Rinkeby OR you can yarn deploy --network Rinkeby.
โ€‹

โœ… Checkpoint 4: ๐Ÿšข Ship it! ๐Ÿš

โœ๏ธ Edit your frontend App.jsx in packages/react-app/src to change the targetNetwork to NETWORKS.rinkeby:
image
You should see the correct network in the frontend (http://localhost:3000):
nft10
๐ŸŽซ Ready to mint a batch of NFTs for reals?
1
yarn mint
Copied!
nft11
๐Ÿ“ฆ Build your frontend:
1
yarn build
Copied!
๐Ÿ’ฝ Upload your app to surge:
1
yarn surge
Copied!
(You could also yarn s3 or maybe even yarn ipfs?)

โœ… Checkpoint 5: ๐Ÿ“œ Contract Verification

Update the api-key in packages/hardhat/package.json file. You can get your key here.
Screen Shot 2021-11-30 at 10 21 01 AM
Now you are ready to run the yarn verify --network your_network command to verify your contracts on etherscan ๐Ÿ›ฐ
This will be the URL you submit to SpeedRun.
โ€‹
โ€‹

โœ… 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 :)
nft

โš”๏ธ 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:) https://testnets.opensea.io/assets/0xc2839329166d3d004aaedb94dde4173651babccf/1

๐Ÿ”ถ Infura

You will need to get a key from infura.io and paste it into constants.js in packages/react-app/src:
nft13
โ€‹
๐Ÿฐ Buidl Guidl Discord Server Join Hereโ€‹
๐Ÿ’ฌ Problems, questions, comments on the stack? Post them to the ๐Ÿ— scaffold-eth developers chatโ€‹
โ€‹