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:

ls

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:

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

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

2. Configure SOON Network

# 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:

  • lib.rs (declare_id! macro)

  • Anchor.toml

7. Deploy Program

# Deploy to SOON testnet
anchor deploy

# Verify deployment
solana account <PROGRAM_ID>

Frontend Setup

Start Development Server

pnpm dev

Testing the dApp

  1. Connect your SOON wallet

  2. Input your favorites:

    • Enter a favorite number

    • Choose a favorite color

    • Add up to 5 hobbies

  3. Click “Save Favorites” to store on-chain

  4. View the transaction on SOON Explorer

Common Issues & Solutions

  1. Deployment Failures

    • Ensure sufficient SOON testnet balance

    • Verify RPC endpoint is correct

    • Check program ID matches in all locations

  2. Transaction Errors

    • Verify wallet connection

    • Check input validations

    • Ensure proper PDA derivation

  3. Build Issues

    • Clean and rebuild: anchor clean && anchor build

    • Verify Rust and Anchor CLI versions

    • Check for any missing dependencies

Resources