Repository Structure

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.