Deriverse Analytics

Professional Trading Analytics Dashboard for Deriverse DEX

Built for the Deriverse Hackathon - A comprehensive trading analytics solution including a professional trading journal and portfolio analysis for active traders on Solana.

🌐 Live Demo: https://deriverse-analytics-one.vercel.app

🎯 Overview

Deriverse Analytics is a professional-grade trading analytics dashboard that connects directly to your Solana wallet and fetches real trading data from the Deriverse DEX. It provides comprehensive analytics, portfolio tracking, and journaling capabilities for active traders.

Key Highlights

Real SDK Data - Uses @deriverse/kit SDK for accurate position data
Live Price Updates - Real-time price feeds from CoinGecko
Position Tracking - Monitor open positions with real PnL from SDK
Professional Analytics - Win rate, drawdown, session analysis, and more
Trading Journal - Document and learn from your trades

📸 Screenshots

Dashboard

The main dashboard provides an at-a-glance view of your trading performance with key metrics, PnL charts, and open positions.

Dashboard showing total PnL, win rate, volume metrics, cumulative PnL chart, and performance by symbol

Portfolio Overview

Track your portfolio allocation, total trading volume, and position distribution across different assets.

Portfolio page with trading volume stats, open positions, allocation breakdown, and cumulative PnL

Trade History

Complete history of all trades with filtering, sorting, and the ability to export data.

Trade history table with date, symbol, side, entry/exit prices, PnL, and export options

Analytics

Deep dive into your trading patterns with time-based analysis, weekday performance, and advanced metrics.

Analytics page showing hourly performance heatmap, weekday analysis, long/short ratio, and radar charts

Performance Analysis

Detailed performance metrics including session-based analysis (Asian/European/American markets) and order type breakdown.

Performance page with cumulative PnL, drawdown chart, hourly performance, and session metrics

Fee Analysis

Track your trading fees over time with detailed breakdown by type (maker, taker, funding).

Fee analysis with total fees, cumulative fee chart, and fee composition breakdown

Trading Journal

Document your trades with notes, mood tracking, tags, and lessons learned.

Trading journal with trade annotations, mood indicators, custom tags, and lesson tracking

Settings

Configure your dashboard preferences and wallet settings.

Settings page with wallet info, display preferences, and data management options

✨ Features

Dashboard Overview

Real-time PnL Tracking - Cumulative and daily profit/loss visualization
Volume & Fee Analysis - Track trading volume and fee breakdown by symbol
Win Rate Statistics - Win/loss ratio with detailed trade outcome analysis
Trade Duration Metrics - Average holding time and trade efficiency analysis
Open Positions - Live position monitoring with unrealized PnL

Advanced Analytics

Long/Short Ratio Analysis - Directional bias visualization
Largest Gain/Loss Tracking - Risk management insights
Drawdown Visualization - Maximum drawdown percentage over time
Time-Based Performance - Hourly and session-based analytics
Weekday Analysis - Performance patterns by day of week

Portfolio Management

Open Positions Monitoring - Live position tracking with unrealized PnL
Symbol Performance - Per-asset performance breakdown
Portfolio Allocation - Visual allocation across trading pairs
Position Derivation - Automatic position tracking from open trades

Trading Journal

Trade Annotations - Add notes, moods, and lessons to trades
Tag System - Categorize trades with custom tags
Lessons Learned - Track and learn from past trading decisions
Mood Tracking - Record emotional state during trades

Data Export

CSV Export - Export trade history to CSV format
PDF Reports - Generate professional PDF reports with charts
Filtered Exports - Export only filtered/selected data

Timeframe Filtering

Quick Filters - 1D, 1W, 1M, 3M, 1Y, ALL
Symbol Filtering - Filter by specific trading pairs
Side Filtering - Long/Short position filtering
Status Filtering - Open/Closed trade filtering

🛠 Tech Stack

Category	Technology
Framework	Next.js 16 with App Router
Language	TypeScript 5
UI Framework	React 19
Styling	Tailwind CSS 4 with dark theme
Charts	Recharts
State Management	Zustand with persistence
Tables	TanStack Table
Animations	Framer Motion
Icons	Lucide React
Wallet Adapter	@solana/wallet-adapter-react
Blockchain	Solana Web3.js
DEX SDK	@deriverse/kit
PDF Generation	jsPDF + html2canvas

🏗 Architecture

Data Flow

┌─────────────────┐     ┌──────────────────┐     ┌─────────────────┐
│  Solana Wallet  │────▶│  Wallet Adapter  │────▶│  Trading Store  │
└─────────────────┘     └──────────────────┘     └─────────────────┘
                                                          │
                                                          ▼
┌─────────────────┐     ┌──────────────────┐     ┌─────────────────┐
│  Solana RPC     │◀────│   API Routes     │◀────│ Deriverse Svc   │
└─────────────────┘     └──────────────────┘     └─────────────────┘
                                │
                                ▼
                   ┌───────────────────────┐
                   │   SDK Data Parsing    │
                   │  - Position Data      │
                   │  - Realized PnL       │
                   │  - Unrealized PnL     │
                   │  - Leverage, Fees     │
                   └───────────────────────┘
                                │
                                ▼
                   ┌───────────────────────┐
                   │  Historical Prices    │
                   │  - CoinGecko Range    │
                   │  - Client PDA Sigs    │
                   │  - Entry/Exit Prices  │
                   └───────────────────────┘

SDK Integration

The app uses the Deriverse SDK for accurate real-time data:

Positions: SDK provides perps, cost, result (realized PnL), leverage, fees
Prices: CoinGecko API for live market prices + historical price ranges
Account Data: SDK client data for balances and trade counts
Trade Timeline: Client PDA signature queries for transaction timestamps

// Unrealized PnL calculated from current price vs cost basis
const unrealizedPnl = currentPrice * position.perps - position.cost;
// Realized PnL from SDK (cumulative across past closed trades)
const realizedPnl = position.result;
const leverage = position.leverage;

📁 Project Structure

src/
├── app/                        # Next.js App Router pages
│   ├── page.tsx               # Main dashboard
│   ├── analytics/             # Advanced analytics page
│   ├── api/deriverse/         # API route for SDK calls
│   ├── fees/                  # Fee analysis page
│   ├── history/               # Trade history page
│   ├── journal/               # Trading journal page
│   ├── performance/           # Performance metrics page
│   ├── portfolio/             # Portfolio overview page
│   └── settings/              # Settings page
├── components/
│   ├── charts/                # Recharts visualizations
│   │   ├── pnl-chart.tsx
│   │   ├── drawdown-chart.tsx
│   │   ├── hourly-performance-chart.tsx
│   │   ├── long-short-chart.tsx
│   │   ├── win-loss-chart.tsx
│   │   └── fee-chart.tsx
│   ├── dashboard/             # Dashboard feature components
│   │   ├── metrics-grid.tsx
│   │   ├── open-positions.tsx
│   │   ├── symbol-performance.tsx
│   │   ├── trade-history-table.tsx
│   │   └── filter-bar.tsx
│   ├── layout/                # Sidebar and Header
│   ├── providers/             # Context providers
│   │   └── wallet-provider.tsx
│   └── ui/                    # Reusable UI primitives
├── lib/
│   ├── analytics.ts           # Metrics calculation functions
│   ├── deriverse-service.ts   # Deriverse SDK/RPC integration
│   ├── export.ts              # CSV/PDF export utilities
│   └── utils.ts               # Utility functions
├── store/
│   ├── trading-store.ts       # Zustand global state
│   └── ui-store.ts            # UI state management
└── types/
    ├── index.ts               # Core TypeScript types
    └── deriverse.ts           # Deriverse-specific types

🔧 Installation

Prerequisites

Node.js 18+
npm or yarn
A Solana wallet (Phantom, Solflare, etc.)

Setup

# Clone the repository
git clone https://github.com/z0neSec/deriverse-analytics.git
cd deriverse-analytics

# Install dependencies
npm install

# Run development server
npm run dev

Open http://localhost:3000 to view the dashboard.

Build for Production

# Create production build
npm run build

# Start production server
npm start

📊 Analytics Calculations

The dashboard includes comprehensive analytics calculations:

Portfolio Metrics

Total PnL - Sum of all realized profits and losses
Win Rate - Percentage of profitable trades
Profit Factor - Gross profit / Gross loss ratio
Average Win/Loss - Mean profit per winning/losing trade
Max Drawdown - Largest peak-to-trough decline

Time-Based Metrics

Hourly Performance - PnL aggregated by hour of day
Session Performance - Asian (00:00-08:00), European (08:00-16:00), American (16:00-00:00)
Weekday Analysis - Performance patterns by day of week

Trade Metrics

Trade Duration - Average time from entry to exit
Long/Short Ratio - Directional bias analysis
Order Type Performance - Market vs limit order comparison

🔗 Deriverse Integration

This dashboard is built for Deriverse, a Solana-based DEX supporting:

Feature	Details
Spot Trading	Direct token swaps
Perpetual Futures	Leveraged perpetual contracts
Program ID	`CDESjex4EDBKLwx9ZPzVbjiHEHatasb5fhSJZMzNfvw2`
VERSION	6
Network	Solana Devnet
Exchange	devnet.deriverse.io

Supported Features

✅ Wallet connection via Solana Wallet Adapter
✅ Real position data from Deriverse SDK
✅ Unrealized PnL from live price vs cost basis
✅ Realized PnL from SDK's cumulative result field
✅ Historical entry/exit prices via CoinGecko range API
✅ Trade timeline via client PDA signature queries
✅ Live price feeds from CoinGecko
✅ Real leverage and fee data from SDK
✅ Both open and closed trades displayed simultaneously

🚀 Deployment

Vercel (Recommended)

npm run build
vercel

Docker

docker build -t deriverse-analytics .
docker run -p 3000:3000 deriverse-analytics

Environment Variables

No environment variables are required for basic functionality. The app uses public Solana RPC endpoints.

Optional:

# Custom Solana RPC (faster/more reliable)
NEXT_PUBLIC_SOLANA_RPC_URL=https://your-rpc-endpoint.com

🏆 Hackathon Submission

This project was built for the Deriverse Hackathon with the goal of creating:

"A comprehensive trading analytics solution for Deriverse, including a professional trading journal and portfolio analysis for active traders"

Features Implemented

Technical Achievements

Accurate SDK Data - Uses SDK's real leverage, fees, and realized PnL
Unrealized PnL - Calculated from live price × perps − cost basis
Historical Price Estimation - CoinGecko range API for closed trade entry/exit prices
Client PDA Timeline - Queries Deriverse account signatures for trade timestamps
CoinGecko Integration - Live market prices + historical ranges
Real-time Updates - 30-second PnL refresh cycle
Type-Safe - Full TypeScript coverage

📚 Resources

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

📄 License

MIT License - feel free to use this project as a starting point for your own trading analytics solutions.

👨‍💻 Author

Built with ❤️ for the Deriverse Hackathon

Name		Name	Last commit message	Last commit date
public		public
screenshots		screenshots
src		src
.gitignore		.gitignore
README.md		README.md
eslint.config.mjs		eslint.config.mjs
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tsconfig.json		tsconfig.json

Latest commit

History

Folders and files

Repository files navigation

Deriverse Analytics

🎯 Overview

Key Highlights

📸 Screenshots

Dashboard

Portfolio Overview

Trade History

Analytics

Performance Analysis

Fee Analysis

Trading Journal

Settings

✨ Features

Dashboard Overview

Advanced Analytics

Portfolio Management

Trading Journal

Data Export

Timeframe Filtering

🛠 Tech Stack

🏗 Architecture

Data Flow

SDK Integration

📁 Project Structure

🔧 Installation

Prerequisites

Setup

Build for Production

📊 Analytics Calculations

Portfolio Metrics

Time-Based Metrics

Trade Metrics

🔗 Deriverse Integration

Supported Features

🚀 Deployment

Vercel (Recommended)

Docker

Environment Variables

🏆 Hackathon Submission

Features Implemented

Technical Achievements

📚 Resources

🤝 Contributing

📄 License

👨‍💻 Author

About

Resources

Stars

Watchers

Forks

Contributors

Languages