Solana Launchpad

​

Overview

​

Key Features

​

Token Creation

​

Token Discovery

​

Trading Interface

​

Real-time Features

• Price Updates: Real-time token price changes
• New Tokens: Instant notifications of new launches
• Trades: Live trade feed across all tokens
• Graduation: Alerts when tokens move to AMM pools

​

Design System

​

Visual Style

​

Color Palette

​

Typography

• Headings: Bold, sans-serif
• Body: Helvetica Neue / Arial
• Monospace: For addresses and code

​

Technical Architecture

​

Technology Stack

• Framework: Next.js 14 (App Router)
• Language: TypeScript 5
• Styling: Tailwind CSS 3.4
• Blockchain: Solana Web3.js v1.98
• Wallets: Phantom, Solflare, Backpack
• Charts: Lightweight Charts v5.1 (TradingView)
• Icons: Lucide React

​

API Integration

// Token creation
async function createToken(data: TokenData) {
  const response = await fetch('/api/pump-fun/create', {
    method: 'POST',
    body: JSON.stringify(data)
  });
  return response.json();
}

// Fetch tokens
async function fetchTokens(filter: string) {
  return await fetch(`/api/pump-fun/tokens?filter=${filter}`);
}

// Execute trade
async function executeTrade(token: string, amount: number, type: 'buy' | 'sell') {
  return await fetch('/api/pump-fun/trade', {
    method: 'POST',
    body: JSON.stringify({ token, amount, type })
  });
}

​

WebSocket Events

// WebSocket connection
const ws = new PumpFunWebSocket();

// Listen for events
ws.on('token_created', (token) => {
  // Handle new token launch
});

ws.on('price_update', (data) => {
  // Update token price
});

ws.on('trade', (trade) => {
  // Add to transaction feed
});

ws.on('graduation', (token) => {
  // Token moved to AMM
});

​

Project Structure

solana-launchpad/
├── app/
│   ├── page.tsx                    # Token discovery homepage
│   ├── create/                     # Token creation
│   ├── token/[address]/            # Token detail & trading
│   └── profile/[address]/          # User profile
├── components/
│   ├── WalletProvider.tsx          # Solana wallet setup
│   ├── Sidebar.tsx                 # Navigation
│   ├── CreateTokenForm.tsx         # Token creation form
│   └── token/
│       ├── TokenCard.tsx           # Token display card
│       ├── PriceChart.tsx          # Trading chart
│       ├── BondingCurve.tsx        # Bonding curve progress
│       └── TransactionHistory.tsx  # Trade feed
└── lib/
    ├── pump-fun.ts                 # API client
    └── websocket.ts                # WebSocket client

​

User Guide

​

Creating a Token

​

Trading Tokens

​

Features by Page

​

Homepage

• Trending Carousel: Featured hot tokens
• Filter Tabs: Movers, Live, New, Market Cap
• Token Grid: Browse all tokens with stats
• Search Bar: Find tokens by name or ticker

​

Token Detail Page

• Price Chart: Interactive TradingView chart
• Trading Interface: Buy/sell with live quotes
• Bonding Curve: Progress to AMM graduation
• Holder Distribution: Top 10 holders
• Transaction Feed: Recent trades with amounts
• Comments: Community discussion (planned)

​

Create Page

• Token Form: All fields with validation
• Image Upload: Drag-and-drop or click to upload
• Live Preview: See your token card as you create
• Social Links: Optional Twitter, Telegram, website

​

User Profile

• Tokens Created: List of user’s launched tokens
• Tokens Held: Current holdings with values
• Transaction History: User’s trading activity

​

Bonding Curve Mechanics

1. Initial Phase: Tokens sold via bonding curve
2. Price Increase: Price rises as more tokens are bought
3. Graduation: After reaching market cap threshold
4. AMM Migration: Liquidity moves to AMM (e.g., Raydium)

​

Revenue Model

• Creation Fee: Small fee to deploy new tokens
• Trading Fee: 1% on all buys and sells
• Fee Distribution:
  • 60% to protocol treasury
  • 30% to OPEN token stakers
  • 10% to referrers (if applicable)

​

Development Status

• ✅ Token creation form with image upload
• ✅ Token discovery with filters and search
• ✅ Token detail page with charts
• ✅ Trading interface (buy/sell)
• ✅ User profile pages
• ✅ Wallet integration (Phantom, Solflare, Backpack)
• ✅ Neobrutalist design system
• ✅ Responsive layout

• 🔨 pump.fun API integration
• 🔨 WebSocket real-time events
• 🔨 Supabase caching layer
• 🔨 Comments and social features

​

Resources

• Repository: github.com/openchain/solana-launchpad
• Documentation: Comprehensive PRD and README
• Design: Neobrutalist UI kit
• API: pump.fun integration specs

​

Getting Started