Drift Trade UI Template
A modern, responsive UI template for integrating with the Drift protocol. This template provides a foundation for building trading applications with spot and perpetual markets using the AuthorityDrift wrapper for simplified integrations.
🚀 Features
Drift Integration: Pre-configured AuthorityDrift setup with real-time price feeds
Multi-Asset Support: Perpetual trading functionality
Wallet Integration: Solana wallet adapter with multiple wallet support
Real-time Data: Live oracle prices, mark prices, and user account data
Modern Stack: Built with Next.js 15, React 19, and TypeScript
🏗️ Architecture
Core Components
User Management (
/user): Account creation, deposits, and user managementSpot Trading (
/spot): Deposit and withdraw supported tokensPerpetuals (
/perps): Trade perpetual futures with leverageMarket Data (
/data): Real-time market information
Key Integrations
AuthorityDrift: Simplified wrapper around the Drift SDK for easy integration
Real-time Stores: Zustand-based state management for prices and user data
Wallet Adapter: Seamless integration with Solana wallets
📦 Prerequisites
Node.js 18+ or Bun
Solana wallet (Phantom, Solflare, etc.)
Basic knowledge of React and Solana development
🛠️ Installation
1. Clone the repository
2. Install dependencies
Navigate to the UI directory and install dependencies:
3. Configure environment variables
Create a .env.local file in the ui directory:
4. Start the development server
The application will be available at http://localhost:3000.
Last updated