Solana App Kit is organized into a modular structure that makes it easy to find and use the components, hooks, and services you need. This guide will help you understand how the codebase is organized.

​
Directory Structure

solana-app-kit/
├── src/                  # Source code
│   ├── assets/           # Images, colors, and other static assets
│   ├── components/       # Reusable UI components
│   ├── config/           # Configuration files and constants
│   ├── hooks/            # Custom React hooks
│   ├── mocks/            # Mock data for development and testing
│   ├── navigation/       # Navigation components and configuration
│   ├── screens/          # Full application screens
│   ├── services/         # API and blockchain service integrations
│   ├── state/            # Redux state management
│   ├── utils/            # Utility functions and helpers
│   └── index.ts          # Main entry point
├── docs/                 # Documentation
├── examples/             # Example applications
└── package.json          # Dependencies and scripts

​
Key Directories

​
Components

The components directory contains all reusable UI components, organized by feature or functionality:

  • thread/ - Social feed components
  • wallet/ - Wallet and transaction components
  • tokenMill/ - Token creation and management components
  • pumpfun/ - Token trading components
  • And many more specialized components

Each component typically includes:

  • The main component file
  • Style definitions
  • Types and interfaces
  • Utility functions specific to that component

​
Hooks

The hooks directory contains custom React hooks that provide reusable logic:

  • useAuth - Authentication and user management
  • useFetchNFTs - NFT data fetching
  • usePumpFun - Token trading functionality
  • useTradeTransaction - Transaction handling
  • useAppNavigation - Navigation utilities
  • And more specialized hooks

​
Services

The services directory contains modules for interacting with external APIs and blockchain:

  • pumpfun/ - Services for token trading
  • tokenMill/ - Services for token creation and management
  • walletProviders/ - Wallet connection services (Privy, Dynamic, Turnkey)

​
Screens

The screens directory contains full application screens that combine components:

  • Common/ - Shared screens like login, search, etc.
  • SampleUI/ - Example UI implementations
    • Chat/ - Messaging UI
    • Threads/ - Social feed UI

​
State

The state directory contains Redux state management:

  • auth/ - Authentication state
  • thread/ - Social feed state
  • transaction/ - Transaction state
  • store.ts - Redux store configuration

​
Usage Patterns

​
Importing Components

// Import a component
import { Thread } from 'solana-app-kit';

// Or import from a specific path
import Thread from 'solana-app-kit/components/thread/Thread';

​
Using Hooks

// Import hooks
import { useAuth, useFetchNFTs } from 'solana-app-kit/hooks';

function MyComponent() {
  const { user, wallet } = useAuth();
  const { nfts, loading } = useFetchNFTs(wallet?.publicKey);
  
  // Use the data...
}

​
Using Services

// Import services
import { pumpfunService } from 'solana-app-kit/services';

async function buyToken() {
  try {
    const result = await pumpfunService.buyTokenViaPumpfun({
      // parameters...
    });
    // Handle result
  } catch (error) {
    // Handle error
  }
}

​
Customization Points

Solana App Kit is designed to be customizable at various levels:

  1. Theme Customization - Through the CustomizationProvider
  2. Component Props - Most components accept customization props
  3. Redux Integration - You can extend or replace the Redux store
  4. Service Overrides - You can provide custom service implementations

For more details on each section of the codebase, refer to the specific documentation pages for Assets, Components, Hooks, etc.