Orderflow Analytics

$13

Analytics dashboard measuring MEV extraction, rebate distribution, and searcher competition.

📁 21 files

TypeScriptMarkdownJSONJavaScriptReact

📁 File Structure 21 files

orderflow-analytics/ ├── LICENSE ├── README.md ├── package.json ├── security-notes.md ├── src/ │ ├── App.tsx │ ├── components/ │ │ ├── Layout.tsx │ │ ├── MEVActivityChart.tsx │ │ ├── OrderflowTable.tsx │ │ ├── ProtectionScore.tsx │ │ ├── ProviderRevenue.tsx │ │ └── RebateTracker.tsx │ ├── hooks/ │ │ ├── useMEVData.ts │ │ └── useRebates.ts │ ├── lib/ │ │ ├── constants.ts │ │ └── format.ts │ ├── main.tsx │ ├── styles/ │ │ └── globals.css │ └── types/ │ └── mev.ts ├── tailwind.config.js ├── tsconfig.json └── vite.config.ts

📖 Documentation Preview README excerpt

Orderflow Analytics Dashboard

Real-time MEV tracking dashboard — extracted value, rebates, provider revenue, and protection scoring.

Price: $12.99 | License: MIT | Stack: React 18 + TypeScript + Vite + Recharts + wagmi

Features

MEV Activity Chart — Stacked area chart showing sandwich, arbitrage, liquidation, and backrun MEV over configurable time ranges (1H to 30D)
Rebate Tracker — Track rebates distributed to users with per-provider breakdowns and trends
Provider Revenue — Market share pie chart, volume vs rebates comparison, detailed provider statistics
Orderflow Table — Filterable transaction table with MEV type, extracted value, rebates, net cost, and protection status
Protection Score — Visual gauge scoring your MEV protection (0-100) with actionable improvement suggestions
Dark Theme — Industrial dark UI with orange accents, purpose-built for DeFi monitoring

Quick Start


# Install dependencies
npm install

# Start development server
npm run dev

# Type check
npm run typecheck

# Build for production
npm run build

Architecture


src/
├── main.tsx                    # Entry: React 18, TanStack Query, Router
├── App.tsx                     # Route definitions
├── components/
│   ├── Layout.tsx              # Sidebar navigation + branding
│   ├── MEVActivityChart.tsx    # Stacked area chart (Recharts)
│   ├── RebateTracker.tsx       # Rebate table + provider bar chart
│   ├── ProviderRevenue.tsx     # Pie chart + volume/rebate comparison
│   ├── OrderflowTable.tsx      # Filterable transaction table
│   └── ProtectionScore.tsx     # SVG gauge + improvement suggestions
├── hooks/
│   ├── useMEVData.ts           # MEV events, chart data, summary, orderflow
│   └── useRebates.ts           # Rebate records + aggregated summary
├── lib/
│   ├── constants.ts            # Chain config, contract addresses, API endpoints
│   └── format.ts               # ETH, USD, %, timestamp, address formatting
├── types/
│   └── mev.ts                  # MEVEvent, RebateRecord, ProviderStats, etc.
└── styles/
    └── globals.css             # Tailwind + dark theme component classes

Data Sources

... 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: { mev: { orange: "#FF6B00", gold: "#FFD700", dark: "#0D0D1A", panel: "#1A1A2E", border: "#2A2A3E", text: "#E0E0E0", muted: "#8888AA", }, sandwich: "#FF4444", arbitrage: "#44AAFF", liquidation: "#AA44FF", backrun: "#44FF88", }, fontFamily: { mono: ["JetBrains Mono", "Fira Code", "monospace"], }, }, }, plugins: [], };

Buy Now — $13 Back to Products