What you will learn
- Setting up your development environment
-
Using
npx create-soon-app
- Understanding Anchor program structure
- Creating and using Program Derived Addresses (PDAs)
- Connecting an Anchor program to a Next.js UI
Prerequisites
For this guide, you will need:- Node.js and pnpm installed
- Rust and Cargo
- Anchor CLI
- A SOON compatible wallet
Setting up the project
Create a new project using:- Next.js frontend
- Anchor program
- Tailwind CSS
- Jupiter wallet adapter integration
- SOON testnet configuration
Understanding the Anchor Program
The Anchor program is located inanchor-program/programs/favorites/src/lib.rs
. Let’s break down its key components:
Program State
- A favorite number (u64)
- A favorite color (string up to 50 chars)
- A list of hobbies (up to 5 hobbies, each up to 50 chars)
Instruction Handler
Frontend Integration
The frontend is a Next.js application that uses:- Jupiter wallet adapter for SOON testnet
- Anchor for program interaction
- Tailwind CSS for styling
Key Components
- Wallet Connection:
- State Management:
- Transaction Handling:
Testing the dApp
- Connect your SOON wallet
-
Input your favorites:
- Enter a favorite number
- Choose a favorite color
- Add up to 5 hobbies
- Click “Save Favorites” to store on-chain
- View the transaction on SOON Explorer
Resources
- SOON Explorer: https://explorer.testnet.soo.network
- SOON App: https://github.com/rkmonarch/soon-app