Skip to main content

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

Verify the project structure:
You should see the following structure:

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

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

Instruction Handler

Account Context

Building and Deploying

1. Install Dependencies

2. Configure SOON Network

3. Prepare Wallet

4. Build Anchor Program

5. Get Program ID

6. Update Program ID

Update the program ID in:
  • lib.rs (declare_id! macro)
  • Anchor.toml

7. Deploy Program

Frontend Setup

Start Development Server

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