What does the Web3 Demo App by Cloudflare really do?

Yik San Chan, web3
Back

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.

Prerequisites

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.

Play-around

To play around with the app, all you need are:

Switch to Rinkeby network, and you will find:

Connected

The only mutation allowed is to Mint (ie create) tokens. Click "Mint", and you see a MetaMask prompt:

MetaMask

Click "Confirm", wait for a bit, then you will find your tokens. These are mine:

Home

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.

Code Deep-dive

There are 3 parts in the project: UI, API, and smart contract definition. I will let the below questions drive our exploration.

How does the app read data?

The UI needs 3 pieces of data (thus 3 API calls) for rendering:

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).

How does the app write data?

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);

Recap

This architecture diagram from the Cloudflare post is a good recap.

architecture

Wait, I am here for Ethereum Gateway and IPFS Gateway

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 🤷

Good news: CFWeb3 accesses the NFT image with IPFS Gateway, see code. It feels identical to S3 from the end-user experience.

It is just a beginning

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.