What does the Web3 Demo App by Cloudflare really do?
Recently, I run into the Get started Building Web3 Apps with Cloudflare post. Usually, when I see these web3 / metaverse hypes, I walk away. But when Cloudflare - a big tech that serves (or bring downs) half the internet - starts to build in the domain, I can't miss.
Here comes the post. First, I play around with Cloudflare's demo app CFWeb3 to gain some basic ideas, then I dive straight into the code to learn more.
There are countless resources on blockchain, but here are the 2 that I find most helpful:
The first resource explains how blockchain works and the second resource explains how smart contracts add to that. With them in mind, you are good to go.
To play around with the app, all you need are:
- MetaMask chrome extension - a gateway to blockchain apps including CFWeb3.
- Some ETH on the testnet. Visit here, copy your account address from MetaMask, and paste it into "Testnet account address", then we will receive enough ETH for minting purposes.
Switch to Rinkeby network, and you will find:
The only mutation allowed is to Mint (ie create) tokens. Click "Mint", and you see a MetaMask prompt:
Click "Confirm", wait for a bit, then you will find your tokens. These are mine:
Click into one of them, you land OpenSea, the largest NFT marketplace, and you find your newly created NFT like this. Find "Details" on the page, click into the Contract Address, then you land Etherscan, a blockchain visualization tool, and view the contract info like this.
These are a lot of information, let me sum up. Via the CFWeb3 UI, you create a token aka NFT, publish it on OpenSea for sale, and that's it. Also from the UI, you view what tokens you own.
The UI needs 3 pieces of data (thus 3 API calls) for rendering:
- My account address from MetaMask, see code.
- # Minted tokens from the chain, see code.
- My tokens from the chain, see code.
We count on the
contract object to access chain data, which is initiated as:
contract = new ethers.Contract(CONTRACT_ID, Contract.abi, provider);
We leverage several methods in the
contract object, including totalSupply, tokenOfOwnerByIndex, tokenURI, and
MAX_TOKENS. Note that the first 3 methods are ERC721 inbuilt that return states of a smart contract.
Also note that all these methods are declared in the
abi section of CFNFT.json. Yes, I believe ABI ≈ API, CFNFT.json ≈ The API Definition (not implementation).
As said, the only mutation allowed is to mint. It calls into the mintToken method which is implemented in the smart contract code. The core logic is simple: First, it mints tokens with serial IDs and transfers them to the receiver (me). Second, it emits
Minted events that frontend code is listening to.
uint256 mintIndex = totalSupply();_safeMint(receiver, mintIndex);emit Minted(mintIndex, receiver);
This architecture diagram from the Cloudflare post is a good recap.
After reading the blog, I want to learn how Ethereum Gateway and IPFS Gateway are used, hopefully in CFWeb3. I am sure it wasn't just me.
Good news and bad news.
Bad news first: CFWeb3 is not leveraging Ethereum Gateway 🤷
Even though CFWeb3 doesn't cover Ethereum Gateway, it is still a good beginning to start making sense of buzzwords that are must-learn for web3 developers: smart contract, token, abi, etc.
Hope my walkthrough helps a bit.
© Yik San Chan. Built with Vercel and Nextra.