What you will learn
-
Setting up your development environment
-
Using create-soon-app
template
-
Understanding Anchor program structure
-
Creating and using Program Derived Addresses (PDAs)
-
Connecting an Anchor program to a Next.js UI
-
Using Jupiter wallet adapter
Prerequisites
For this guide, you will need:
-
Node.js and pnpm
-
Rust and Cargo
-
Anchor CLI
-
A SOON compatible wallet
-
SOON RPC endpoint
Getting Started
1. Clone the Repository
# Clone the repository
git clone https://github.com/rkmonarch/soon-app.git
# Navigate to the project directory
cd soon-app
Verify the project structure:
You should see the following structure:
soon-app/
├── anchor-program/ # Solana program written in Anchor
├── src/ # Frontend Next.js application
├── .eslintrc.json
├── .gitignore
├── next-env.d.ts
├── next.config.mjs
├── package.json
├── pnpm-lock.yaml
├── postcss.config.mjs
├── tailwind.config.ts
└── tsconfig.json
Understanding the Anchor Program
The Anchor program is located in anchor-program/programs/favorites/src/lib.rs
. Let’s break down its key components:
Program State
#[account]
#[derive(InitSpace)]
pub struct Favorites {
pub number: u64,
#[max_len(50)]
pub color: String,
#[max_len(5, 50)]
pub hobbies: Vec<String>
}
This structure defines what we’ll store on-chain:
Program ID Declaration
declare_id!("E6t9eu8HpaFx6PymgHuPPrGwMegFYrCdLa4EeejjE4ji");
Instruction Handler
#[program]
pub mod favorites {
use super::*;
pub fn set_favorites(
ctx: Context<SetFavorites>,
number: u64,
color: String,
hobbies: Vec<String>
) -> Result<()> {
let user_public_key = ctx.accounts.user.key();
msg!(
"User {user_public_key}'s favorite number is {number}, favorite color is: {color}",
);
msg!(
"User's hobbies are: {:?}",
hobbies
);
ctx.accounts.favorites.set_inner(Favorites {
number,
color,
hobbies
});
Ok(())
}
}
Account Context
#[derive(Accounts)]
pub struct SetFavorites<'info> {
#[account(mut)]
pub user: Signer<'info>,
#[account(
init_if_needed,
payer = user,
space = ANCHOR_DISCRIMINATOR_SIZE + Favorites::INIT_SPACE,
seeds=[b"favorites", user.key().as_ref()],
bump
)]
pub favorites: Account<'info, Favorites>,
pub system_program: Program<'info, System>,
}
Building and Deploying
1. Install Dependencies
# Install project dependencies
pnpm install
# Set SOON testnet URL
solana config set --url https://rpc.testnet.soo.network/rpc
# Verify configuration
solana config get
3. Prepare Wallet
# Generate new keypair (if needed)
solana-keygen new
# Get testnet SOON tokens from faucet
https://faucet.soo.network/
4. Build Anchor Program
# Navigate to anchor directory
cd anchor-program
# Build the program
anchor build
5. Get Program ID
# Get program ID from the keypair
solana address -k target/deploy/favorites-keypair.json
6. Update Program ID
Update the program ID in:
7. Deploy Program
# Deploy to SOON testnet
anchor deploy
# Verify deployment
solana account <PROGRAM_ID>
Frontend Setup
Start Development Server
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
Common Issues & Solutions
-
Deployment Failures
-
Ensure sufficient SOON testnet balance
-
Verify RPC endpoint is correct
-
Check program ID matches in all locations
-
Transaction Errors
-
Build Issues
-
Clean and rebuild: anchor clean && anchor build
-
Verify Rust and Anchor CLI versions
-
Check for any missing dependencies
Resources
Responses are generated using AI and may contain mistakes.