🚩 Challenge: 🎟 Tokenization

readme

📚 This tutorial is meant for developers that already understand the 🖍️ basics .

🧑‍🏫 If you would like a more gentle introduction for developers, watch our 15 video 🎥 Web2 to Web3 series.

🎫 Tokenize unique items:

👷‍♀️ You'll compile and deploy your first smart contracts. Then, you'll use a template NextJS app full of important Ethereum components and hooks. Finally, you'll deploy a non-fungible token to a public network where you can send it to anyone! 🚀

🌟 The final deliverable is an app that lets users mint and transfer NFTs and understand onchain ownership. Deploy your contracts to a testnet, then build and upload 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!

❓ Wondering what "tokenization" means?

Tokenization is like giving anything a digital passport you can carry in your wallet. It proves who owns it, lets you hand it off in a click, and lets apps recognize it automatically. In this challenge you'll mint ERC-721 tokens (NFTs): each token is one-of-one, owned by a single address (what `ownerOf(tokenId)` returns). Transfers are atomic, instant, traceable, and run by code.

Real-World Assets (RWAs): Think stocks, bonds, gold, and real estate. If these are tokenized, the token acts as a digital claim or registry entry. For real-world effect, an issuer/custodian or legal framework must link onchain transfers to off-chain rights; without that bridge, it's a collectible, not a legal transfer.
Who has the right to tokenize?: The legitimate owner or authorized issuer. If you don't control the thing, your token is unofficial fan art, not enforceable rights.
Blockchain-native assets: Some things are born onchain; art, game items, ENS names, fully-onchain media, and even concert tickets designed for onchain verification. Here, the token is the thing. That makes them globally transferable, permissionless, and composable. Plug them into marketplaces, auctions, lending, or games. As the world moves onchain we'll see more native experiences like tickets that verify at the door, auto-split royalties on resales, and unlock perks across apps.

🚫 "Wait, aren't NFTs just monkey JPEGS?" That couldn't be further from the truth! While some NFTs are nothing more than metadata pointing to an image, the important part is to realize how assets on Ethereum unlock composability.

🌐 Look at how ENS is improving upon the Domain Name System (DNS aka website addresses). These are just NFTs but they carry a lot of usefulness. The same usefulness that is unlocked by not having to remember to type 64.233.180.138 to get to Google.com is unlocked by these ENS names but the usefulness goes further than that. You can use these ENS names to alias wallet addresses as well. Check out the ENS record for vitalik.eth to see how there are many records - some for addresses, some for content. Try going to vitalik.eth.limo and see how the contentHash record resolves to his personal webpage.

🦄 Or checkout how Uniswap V3 is using NFTs to track each liquidity providers portion in the pool. Don't worry if you don't understand all those words yet, just realize that this is a big deal to represent ownership of assets this way.

♻️ Even if the NFT itself is completely inert and reflects complete speculation on a "worthless" image, you can still use that NFT in other smart contracts to build interesting projects like what they have done at PunkStrategy where you can buy tokens in a protocol that gives you fractional exposure to CryptoPunk NFTs while also having part in a strategy that automatically uses profit from token sales to buy the lowest valued Punk on the market, then relists it at a 20% premium - over and over again, forever!

🔓 Composability unlocks all of this and so much more!

🚀 Are you ready? You're about to mint something the entire internet can see, trade, and build on.

But wait! Wait does "NFT" stand for?

NFT stands for Non-Fungible Token. Non-fungible means that each token is unique. Fungible tokens (often represented as ERC-20s) are all the same. Each one looks and acts the same and has the same abilities. With NFTs there is something unique about each token. That is why they do well to express unique names, images (monkey JPEGS), DEX liquidity positions, and maybe some day real estate parcels.

Checkpoint 0: 📦 Environment 📚

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

Then download the challenge to your computer and install dependencies by running:

npx create-eth@1.0.2 -e challenge-tokenization challenge-tokenization
cd challenge-tokenization

in the same terminal, start your local network (a blockchain emulator in your computer):

yarn chain

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

cd challenge-tokenization
yarn deploy

in a third terminal window, start your 📱 frontend:

cd challenge-tokenization
yarn start

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

Checkpoint 1: ⛽️ Gas & Wallets 👛

⛽️ Gas is the tiny fee that powers your transactions, like postage for the blockchain. Grab test funds from the faucet so you can interact onchain.

gas&wallet

🦊 At first, don't connect MetaMask. If you are already connected, click Disconnect:

🔥 We'll use burner wallets on localhost. They're disposable wallets that auto-sign transactions so you can keep building.

👛 Explore burner wallets in 🏗 Scaffold-ETH 2: open an incognito window and visit http://localhost:3000. You'll see a totally new address in the top-right. Copy it and send test funds from your first window using the Faucet button (bottom-left):

icognito&webBrowser

👨🏻‍🚒 When you close the incognito window, that account is gone forever. Burner wallets are perfect for local dev; you'll switch to a permanent wallet on public networks.

Checkpoint 2: 🖨 Minting

🦓 In this challenge we will be minting (or creating) collectible Buffalo, Zebra and Rhino NFTs. Their metadata is stored on IPFS. These won't feign any real value but what price can you put on your own understanding of intricate blockchain ownership designs? Face it, it's priceless!

✏️ Time to create something new. Click MINT NFT in the My NFTs tab to mint an ERC-721 token; your unique, onchain collectible.

👀 You should see your NFTs start to show up:

👛 Open an incognito window and navigate to http://localhost:3000.

🎟 Try a transfer! Send a token to the incognito window address using the UI:

👛 Try to mint a token from the incognito window.

Can you mint a token with no funds in this address? You might need to grab funds from the faucet to pay for the gas!

🕵🏻‍♂️ Inspect the Debug Contracts tab to figure out what address is the owner of a specific token (ownerOf(tokenId)) in YourCollectible.

🔏 You can also check out your smart contract YourCollectible.sol in packages/hardhat/contracts.

💼 Take a quick look at your deploy script 01_deploy_your_collectible.ts in packages/hardhat/deploy.

Onchain Ownership 101

What is ownership? Onchain ownership of a unique item is whoever ownerOf(tokenId) returns.
Who can transfer? Only the owner or an approved operator can transfer a token.
What happens on transfer? Ownership moves atomically to the new address and a Transfer event is emitted.
How do approvals work? Use approve for a single token or setApprovalForAll for an operator across all your tokens.
How to count holdings? balanceOf(address) shows how many unique tokens an address owns.

📝 If you want to edit the frontend, navigate to packages/nextjs/app and open the specific page you want to modify. For instance: /myNFTs/page.tsx. For guidance on routing and configuring pages/layouts checkout the Next.js documentation.

Checkpoint 3: 💾 Deploy your contract! 🛰

🛰 Ready to go public (on testnet)? Let's ship it.

Change the defaultNetwork in packages/hardhat/hardhat.config.ts to sepolia.

chall-0-hardhat-config

🔐 Generate a deployer address with yarn generate. This creates a fresh deployer and stores the mnemonic locally. You will be prompted to enter a password, which will be used to encrypt your private key. Make sure to remember this password, as you'll need it for future deployments and account queries.

This local account deploys your contracts(no need to paste personal private keys).

chall-0-yarn-generate

👩‍🚀 Use yarn account to check balances and addresses quickly.

chall-0-yarn-account

⛽️ Fund your deployer with testnet ETH from a faucet or another wallet so it can pay gas.

Some popular Sepolia faucets are the Alchemy Faucet, Infura Faucet, and Google Cloud Faucet.

⚔️ 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 with yarn deploy.

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

Checkpoint 4: 🚢 Ship your frontend! 🚁

✏️ Tune your frontend for the right chain. In packages/nextjs/scaffold.config.ts, set targetNetwork to chains.sepolia:

chall-0-scaffold-config

Confirm the network badge in the UI at http://localhost:3000 shows Sepolia:

🦊 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/)

🚀 Deploy your NextJS app

yarn vercel

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.

⚠️ Run the automated testing function to make sure your app passes

yarn test

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 5: 📜 Contract Verification

You can verify your smart contract on Etherscan by running (yarn verify --network network_name):

yarn verify --network sepolia

Verifying your contract is important for enabling others to be able to look at your contract and verify that it isn't a scam.

If it says your contract is already verified, that's fine. It just means Etherscan recognized the contract bytecode as being the same as one that was already deployed and verified. Copy the address of YourCollectible.sol and search it on Sepolia Etherscan to grab the URL you'll submit for this challenge.

Checkpoint 6: 💪 Flex!

👩‍❤️‍👨 Share your public url with a friend and ask them for their address to send them a collectible:

gif

⚔️ Side Quests

🦊 MetaMask NFTs

🎫 Want to see your new NFTs? Check your MetaMask extension! Your minted NFTs should appear in the NFTs section.

🌐 Important: Make sure you switch to the Sepolia testnet in MetaMask before checking for your NFTs, since that's where you deployed your contract.

🔍 Make sure you have minted some NFTs on your Vercel page, then open your MetaMask extension and navigate to the "NFTs" tab.

You can see your collection of shiny new NFTs directly in your wallet!

(It can take a while before they show up in MetaMask, but they should appear in the NFTs section once detected.)

🔧 Not seeing your NFTs? Sometimes MetaMask doesn't automatically detect new NFTs. You can manually add them by clicking "Import NFT" in the NFTs tab and entering network, your contract address and token ID.

🏃 Head to your next challenge here.

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