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:
- Theme Customization - Through the
CustomizationProvider
- Component Props - Most components accept customization props
- Redux Integration - You can extend or replace the Redux store
- 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.
Responses are generated using AI and may contain mistakes.