Trade Analytics Dashboard — Preview

📁 File Structure 24 files

trade-analytics/ ├── LICENSE ├── README.md ├── index.html ├── package.json ├── security-notes.md ├── src/ │ ├── App.tsx │ ├── components/ │ │ ├── FeeRevenue.tsx │ │ ├── GasAnalytics.tsx │ │ ├── Layout.tsx │ │ ├── ProviderComparison.tsx │ │ ├── SlippageChart.tsx │ │ ├── StatsGrid.tsx │ │ ├── TradeTable.tsx │ │ └── VolumeChart.tsx │ ├── hooks/ │ │ ├── useAnalytics.ts │ │ ├── useFeeRevenue.ts │ │ └── useTradeHistory.ts │ ├── lib/ │ │ ├── constants.ts │ │ └── format.ts │ ├── main.tsx │ └── styles/ │ └── globals.css ├── tailwind.config.js ├── tsconfig.json └── vite.config.ts

📖 Documentation Preview README excerpt

trade-analytics

React dashboard for trade execution analytics — fill rates, slippage, gas efficiency, provider performance, and fee revenue.

Price: $12.99 | Store: defi-router | Product #8

Overview

trade-analytics is a production-ready React dashboard for monitoring DeFi trade execution quality. It connects to a CryptoForge DeFi Router contract via wagmi/viem for on-chain data (trade events, fee events) and supports off-chain API data for historical analysis. Built with the CryptoForge dark theme.

Features

Feature	Description
KPI Dashboard	Total volume, avg slippage, total fees, trade count with 7-day trends
Volume Chart	Area chart with 7d/30d/90d toggle for daily trade volume
Slippage Scatter	Scatter plot of slippage vs trade size with P50/P95 reference lines
Provider Comparison	Bar charts + table comparing DEX providers on volume, slippage, gas, fill rate
Gas Analytics	Gas cost trends, efficiency score, gas cost distribution histogram
Fee Revenue	Daily fee tracking, cumulative total, breakdown by token (pie chart)
Trade History	Sortable, paginated table of all trades with full detail
Dark Theme	CryptoForge branded dark UI with responsive sidebar layout

Screenshots

The dashboard renders five main views:

1. Dashboard — KPI cards + volume area chart + slippage scatter plot

2. Providers — DEX provider comparison (bar charts + detail table)

3. Gas Analytics — Gas trend, distribution histogram, efficiency score

4. Fee Revenue — Daily fees, cumulative chart, token breakdown pie chart

5. Trade History — Sortable paginated table of all trades

Installation


# Clone the product
cp -r trade-analytics/ my-trade-analytics/
cd my-trade-analytics

# Install dependencies
npm install

# Start development server
npm run dev

The dashboard opens at http://localhost:3000.

Prerequisites

Node.js 18+
npm 9+ or pnpm 8+
An RPC endpoint (Alchemy, Infura, or public)

... continues with setup instructions, usage examples, and more.

📄 Code Sample .js preview

tailwind.config.js /** @type {import('tailwindcss').Config} */ export default { content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], darkMode: "class", theme: { extend: { colors: { // CryptoForge brand palette — dark theme first cf: { bg: { DEFAULT: "#0D0D1A", card: "#13132B", hover: "#1A1A2E", input: "#0A0A15", }, primary: { DEFAULT: "#FF6B00", light: "#FF8A33", dark: "#CC5500", muted: "rgba(255, 107, 0, 0.15)", }, accent: { DEFAULT: "#FFD700", light: "#FFE44D", muted: "rgba(255, 215, 0, 0.15)", }, text: { DEFAULT: "#E8E8F0", muted: "#8888AA", dim: "#555577", }, success: "#00D97E", danger: "#FF4D6A", warning: "#FFB020", border: "#2A2A4A", }, }, fontFamily: { sans: ['"Inter"', "system-ui", "-apple-system", "sans-serif"], mono: ['"JetBrains Mono"', '"Fira Code"', "monospace"], }, boxShadow: { glow: "0 0 20px rgba(255, 107, 0, 0.15)", "glow-accent": "0 0 20px rgba(255, 215, 0, 0.15)", }, animation: { "pulse-slow": "pulse 3s ease-in-out infinite", }, }, }, # ... 3 more lines ...