Overview
Welcome! The course you are about to begin will rapidly introduce you to frontend web development for onchain apps and enable you to write websites that can call your smart contract functions in a similar way to how traditional sites interact with APIs.
Prerequisites
Before these lessons, you should:
- Be comfortable with traditional frontend development using React, ideally with NextJS
- Possess a general understanding of the EVM and smart contracts
Objectives
By the end of this course, you should be able to:
- Frontend Setup
- Identify the role of a wallet aggregator in an onchain app
- Debate the pros and cons of using a template
- Scaffold a new onchain app with RainbowKit
- Add a wallet connection to a standard template app
- Connecting to the Blockchain
- Compare and contrast public providers vs. vendor providers vs. wallet providers
- Select the appropriate provider for several use cases
- Set up a provider in wagmi and use it to connect a wallet
- Protect API keys that will be exposed to the front end
- Reading and Displaying Data
- Implement the
useAccount
hook to show the user's address, connection state, network, and balance - Implement an
isMounted
hook to prevent hydration errors - Implement wagmi's
useReadContract
hook to fetch data from a smart contract - Convert data fetched from a smart contract to information displayed to the user
- Identify the caveats of reading data from automatically-generated getters
- Enable the
watch
feature ofuseReadContract
to automatically fetch updates from the blockchain - Describe the costs of using the
watch
feature, and methods to reduce those costs - Configure arguments to be passed with a call to a
pure
orview
smart contract function - Call an instance of
useReadContract
on demand - Utilize
isLoading
andisFetching
to improve user experience
- Implement the
- Writing to Contracts
- Implement wagmi's
useWriteContract
hook to send transactions to a smart contract - Configure the options in
useWriteContract
- Display the execution, success, or failure of a function with button state changes, and data display
- Implement Wagmi's
usePrepareContractWrite
anduseWriteContract
to send transactions to a smart contract - Configure the options in
useSimulateContract
anduseWriteContract
- Call a smart contract function on-demand using the write function from
useWriteContract
, with arguments and a value
- Implement wagmi's