Basecamp VII - Session 5: Frontend
Darlington Nnam shows how to use React and starknet.js to create the frontend of a “counter” smart contract on Starknet mainnet.
Full playlist: • Starknet Basecamp 7
Sections
0:00 Session intro
1:40 Introduction to starknet.js
3:26 The Provider API
4:36 The Signer API
4:52 The Account API
5:38 The Contract API
6:58 The get-starknet library
9:40 Live coding starts
11:07 Project dependencies
13:45 Target smart contract ABI
16:04 Project UI
18:46 The Counter smart contract
27:48 Code walkthrough
31:02 Connecting a wallet
36:35 Disconnecting a wallet
53:41 Argent’s web wallet
54:48 Reconnecting on reload
59:18 Reviewing the contract ABI
1:00:26 Implementing “get counter”
1:10:20 Implementing “increase counter”
1:16:45 Implementing “decrease counter”
1:22:00 Project recap
1:33:35 Introduction to starknet-react
1:40:25 Project creation
1:41:57 Custom hooks for Starknet
1:48:20 Closing thoughts
1:51:25 Announcements
Resources
Slides: https://docs.google.com/presentation/...
Starknet book (frontend): https://book.starknet.io/ch02-07-star...
Session repository: https://github.com/Darlington02/basec...
Starknet.js docs: https://www.starknetjs.com/
Argent’s version of get-starknet on npm: https://www.npmjs.com/package/@argent...
The Counter smart contract: https://starkscan.co/contract/0x077e0...