-
-
-
- Get started by editing{" "}
-
- src/app/page.tsx -- . -
- - - Save and see your changes instantly. - -
+ {/* Scanline texture */}
+
+
+ {/* Grid bg */}
+
+ (initialData)
+ const [window, setWindow] = useState<'1h' | '6h' | '24h'>('1h')
+ const [lastUpdated, setLastUpdated] = useState(new Date())
+ const [isRefreshing, setIsRefreshing] = useState(false)
+ const [tick, setTick] = useState(0)
+
+ const refresh = useCallback(async (win = window) => {
+ setIsRefreshing(true)
+ try {
+ const [current, history, trend, insights] = await Promise.allSettled([
+ api.currentFees(),
+ api.feeHistory(win),
+ api.feeTrend(),
+ api.insights(),
+ ])
+ setData({
+ current: current.status === 'fulfilled' ? current.value : data.current,
+ history: history.status === 'fulfilled' ? history.value : data.history,
+ trend: trend.status === 'fulfilled' ? trend.value : data.trend,
+ insights: insights.status === 'fulfilled' ? insights.value : data.insights,
+ error: null,
+ })
+ setLastUpdated(new Date())
+ setTick(t => t + 1)
+ } catch {
+ // keep stale data
+ } finally {
+ setIsRefreshing(false)
+ }
+ }, [window, data])
+
+ // Auto-poll every 10s
+ useEffect(() => {
+ const id = setInterval(() => refresh(), POLL_MS)
+ return () => clearInterval(id)
+ }, [refresh])
+
+ // Re-fetch history when window changes
+ const handleWindowChange = async (w: '1h' | '6h' | '24h') => {
+ setWindow(w)
+ refresh(w)
+ }
+
+ const { current, history, trend, insights } = data
+
+ return (
+
+
+ )
+}
\ No newline at end of file
diff --git a/packages/ui/src/components/dashboard/TrendPanel.tsx b/packages/ui/src/components/dashboard/TrendPanel.tsx
new file mode 100644
index 0000000..1e3ec2f
--- /dev/null
+++ b/packages/ui/src/components/dashboard/TrendPanel.tsx
@@ -0,0 +1,89 @@
+'use client'
+
+import { TrendingUp, TrendingDown, Minus } from 'lucide-react'
+import type { FeeTrendResponse } from '@/lib/types'
+import { pctColor, pctArrow, congestionColor, cn } from '@/lib/utils'
+
+interface Props {
+ trend: FeeTrendResponse | null
+ tick: number
+}
+
+export function TrendPanel({ trend, tick }: Props) {
+ if (!trend) {
+ return (
+ (path: string): Promise {
+ const res = await fetch(`${BASE}${path}`, {
+ next: { revalidate: 0 }, // always fresh
+ })
+ if (!res.ok) {
+ throw new Error(`API error ${res.status} on ${path}`)
+ }
+ return res.json() as Promise
+}
+
+export const api = {
+ currentFees: () => get('/fees/current'),
+ feeHistory: (window = '1h') => get(`/fees/history?window=${window}`),
+ feeTrend: () => get('/fees/trend'),
+ insights: () => get('/insights'),
+ health: () => get('/health'),
+}
\ No newline at end of file
diff --git a/packages/ui/src/lib/types.ts b/packages/ui/src/lib/types.ts
new file mode 100644
index 0000000..e548da2
--- /dev/null
+++ b/packages/ui/src/lib/types.ts
@@ -0,0 +1,103 @@
+// ---- /fees/current ----
+export interface PercentileFees {
+ p10: string
+ p20: string
+ p30: string
+ p40: string
+ p50: string
+ p60: string
+ p70: string
+ p80: string
+ p90: string
+ p95: string
+ p99: string
+}
+
+export interface CurrentFeeResponse {
+ base_fee: string
+ min_fee: string
+ max_fee: string
+ avg_fee: string
+ percentiles: PercentileFees
+}
+
+// ---- /fees/history ----
+export interface FeeDataPoint {
+ fee_amount: number
+ timestamp: string
+ transaction_hash: string
+ ledger_sequence: number
+}
+
+export interface FeeSummary {
+ min: number
+ max: number
+ avg: number
+ p50: number
+ p95: number
+}
+
+export interface FeeHistoryResponse {
+ window: string
+ from: string
+ to: string
+ data_points: number
+ fees: FeeDataPoint[]
+ summary: FeeSummary
+}
+
+// ---- /fees/trend ----
+export interface TrendChanges {
+ '1h_pct': number | null
+ '6h_pct': number | null
+ '24h_pct': number | null
+}
+
+export interface FeeTrendResponse {
+ status: 'Normal' | 'Rising' | 'Congested' | 'Declining'
+ trend_strength: 'Weak' | 'Moderate' | 'Strong'
+ changes: TrendChanges
+ recent_spike_count: number
+ predicted_congestion_minutes: number | null
+ last_updated: string
+}
+
+// ---- /insights ----
+export interface AverageResult {
+ value: number
+ sample_count: number
+ is_partial: boolean
+ calculated_at: string
+}
+
+export interface RollingAverages {
+ short_term: AverageResult
+ medium_term: AverageResult
+ long_term: AverageResult
+}
+
+export interface ExtremeValue {
+ value: number
+ timestamp: string
+ transaction_hash: string
+}
+
+export interface FeeExtremes {
+ current_min: ExtremeValue
+ current_max: ExtremeValue
+ period_start: string
+ period_end: string
+}
+
+export interface InsightsResponse {
+ rolling_averages: RollingAverages
+ extremes: FeeExtremes
+ last_updated: string
+ // these exist in the response but we can ignore them for now
+ congestion_trends?: unknown
+ data_quality?: unknown
+}
+// ---- /health ----
+export interface HealthResponse {
+ status: string
+}
\ No newline at end of file
diff --git a/packages/ui/src/lib/utils.ts b/packages/ui/src/lib/utils.ts
new file mode 100644
index 0000000..7f01731
--- /dev/null
+++ b/packages/ui/src/lib/utils.ts
@@ -0,0 +1,63 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs))
+}
+
+export function formatStroops(stroops: number | string): string {
+ const n = typeof stroops === 'string' ? parseFloat(stroops) : stroops
+ if (n >= 10_000_000) return `${(n / 10_000_000).toFixed(2)} XLM`
+ if (n >= 1_000) return `${n.toLocaleString()} str`
+ return `${n} str`
+}
+
+export function formatNumber(n: number): string {
+ return n.toLocaleString()
+}
+
+export function pctColor(pct: number | null): string {
+ if (pct === null) return 'text-text-secondary'
+ if (pct > 10) return 'text-accent-red'
+ if (pct > 0) return 'text-accent-yellow'
+ if (pct < -10) return 'text-accent-green'
+ if (pct < 0) return 'text-accent-cyan'
+ return 'text-text-secondary'
+}
+
+export function pctArrow(pct: number | null): string {
+ if (pct === null) return 'โ'
+ if (pct > 0) return `โฒ +${pct.toFixed(1)}%`
+ if (pct < 0) return `โผ ${pct.toFixed(1)}%`
+ return `โ 0.0%`
+}
+
+export function congestionColor(status: string): string {
+ switch (status) {
+ case 'Congested': return 'text-accent-red'
+ case 'Rising': return 'text-accent-yellow'
+ case 'Declining': return 'text-accent-cyan'
+ default: return 'text-accent-green'
+ }
+}
+
+export function congestionBg(status: string): string {
+ switch (status) {
+ case 'Congested': return 'bg-red-950/30 border-accent-red/30'
+ case 'Rising': return 'bg-yellow-950/30 border-accent-yellow/30'
+ case 'Declining': return 'bg-cyan-950/30 border-accent-cyan/30'
+ default: return 'bg-accent-dim border-accent-green/30'
+ }
+}
+
+export function timeAgo(iso: string): string {
+ const diff = Date.now() - new Date(iso).getTime()
+ const s = Math.floor(diff / 1000)
+ if (s < 60) return `${s}s ago`
+ if (s < 3600) return `${Math.floor(s / 60)}m ago`
+ return `${Math.floor(s / 3600)}h ago`
+}
+
+export function formatTime(iso: string): string {
+ return new Date(iso).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })
+}
\ No newline at end of file
-
-
+
+
+
);
}
diff --git a/packages/ui/src/components/dashboard/DashboardShell.tsx b/packages/ui/src/components/dashboard/DashboardShell.tsx
new file mode 100644
index 0000000..42dc705
--- /dev/null
+++ b/packages/ui/src/components/dashboard/DashboardShell.tsx
@@ -0,0 +1,121 @@
+'use client'
+
+import { useState, useEffect, useCallback } from 'react'
+import { api } from '@/lib/api'
+import type {
+ CurrentFeeResponse,
+ FeeHistoryResponse,
+ FeeTrendResponse,
+ InsightsResponse,
+} from '@/lib/types'
+import { TopBar } from './TopBar'
+import { StatCards } from './StatCards'
+import { PercentileRow } from './PercentileRow'
+import { FeeChart } from './FeeChart'
+import { TrendPanel } from './TrendPanel'
+import { RollingAverages } from './RollingAverages'
+
+interface DashboardData {
+ current: CurrentFeeResponse | null
+ history: FeeHistoryResponse | null
+ trend: FeeTrendResponse | null
+ insights: InsightsResponse | null
+ error: string | null
+}
+
+interface Props {
+ initialData: DashboardData
+}
+
+const POLL_MS = 10_000
+
+export function DashboardShell({ initialData }: Props) {
+ const [data, setData] = useState
+
-
-
+
+
+
+ DASHBOARD PREVIEW
+
+ + Everything in one view. +
++ From base fee to p99 distribution โ the full picture of + what's happening on the Stellar network right now. +
+
+
+
+ refresh()}
+ />
+
+
+
+ {/* Row 1 โ Stat Cards */}
+
+
+ )
+}
\ No newline at end of file
diff --git a/packages/ui/src/components/dashboard/FeeChart.tsx b/packages/ui/src/components/dashboard/FeeChart.tsx
new file mode 100644
index 0000000..e5f081c
--- /dev/null
+++ b/packages/ui/src/components/dashboard/FeeChart.tsx
@@ -0,0 +1,195 @@
+"use client";
+
+import {
+ ResponsiveContainer,
+ LineChart,
+ Line,
+ XAxis,
+ YAxis,
+ CartesianGrid,
+ Tooltip,
+ ReferenceLine,
+} from "recharts";
+import type { FeeHistoryResponse, FeeDataPoint } from "@/lib/types";
+import { cn } from "@/lib/utils";
+
+interface Props {
+ history: FeeHistoryResponse | null;
+ window: "1h" | "6h" | "24h";
+ onWindowChange: (w: "1h" | "6h" | "24h") => void;
+}
+
+const WINDOWS: ("1h" | "6h" | "24h")[] = ["1h", "6h", "24h"];
+
+function formatTime(iso: string, win: string): string {
+ const d = new Date(iso);
+ if (win === "24h") {
+ return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+ }
+ return d.toLocaleTimeString([], {
+ hour: "2-digit",
+ minute: "2-digit",
+ second: "2-digit",
+ });
+}
+
+interface CustomTooltipProps {
+ active?: boolean;
+ payload?: Array<{ value: number }>;
+ label?: string;
+}
+
+function CustomTooltip({ active, payload, label }: CustomTooltipProps) {
+ if (!active || !payload?.length) return null;
+ const fee = payload[0]?.value as number;
+ return (
+
+
+
+ {/* Footer */}
+
+ โ
+ {' '}STELLAR TESTNET ยท POLLING EVERY 10s ยท BUILT WITH RUST + NEXT.JS
+
+
+
+ );
+}
+
+export function FeeChart({ history, window, onWindowChange }: Props) {
+ const points = history?.fees ?? [];
+
+ // Downsample for readability if too many points
+ const maxPoints = 200;
+ const step =
+ points.length > maxPoints ? Math.ceil(points.length / maxPoints) : 1;
+ const chartData = points
+ .filter((_, i) => i % step === 0)
+ .map((p: FeeDataPoint) => ({
+ time: formatTime(p.timestamp, window),
+ fee: p.fee_amount,
+ ledger: p.ledger_sequence,
+ }));
+
+ const avg = history?.summary.avg ?? 0;
+ const p95 = history?.summary.p95 ?? 0;
+ const count = history?.data_points ?? 0;
+
+ return (
+ {label}
+
+ {fee?.toLocaleString()} stroops
+
+
+ {/* Header */}
+
+
+ `${v.toLocaleString()}`}
+ width={70}
+ />
+
+
+ )}
+
+ );
+}
diff --git a/packages/ui/src/components/dashboard/PercentileRow.tsx b/packages/ui/src/components/dashboard/PercentileRow.tsx
new file mode 100644
index 0000000..c3f2883
--- /dev/null
+++ b/packages/ui/src/components/dashboard/PercentileRow.tsx
@@ -0,0 +1,46 @@
+'use client'
+
+import type { PercentileFees } from '@/lib/types'
+import { formatStroops } from '@/lib/utils'
+
+interface Props {
+ percentiles: PercentileFees
+ tick: number
+}
+
+const LABELS: { key: keyof PercentileFees; label: string; color: string }[] = [
+ { key: 'p10', label: 'P10', color: 'text-accent-green border-accent-green/40' },
+ { key: 'p20', label: 'P20', color: 'text-accent-green border-accent-green/30' },
+ { key: 'p30', label: 'P30', color: 'text-accent-green border-accent-green/20' },
+ { key: 'p40', label: 'P40', color: 'text-accent-cyan border-accent-cyan/30' },
+ { key: 'p50', label: 'P50', color: 'text-accent-cyan border-accent-cyan/40' },
+ { key: 'p60', label: 'P60', color: 'text-accent-cyan border-accent-cyan/30' },
+ { key: 'p70', label: 'P70', color: 'text-accent-yellow border-accent-yellow/30' },
+ { key: 'p80', label: 'P80', color: 'text-accent-yellow border-accent-yellow/40' },
+ { key: 'p90', label: 'P90', color: 'text-accent-red border-accent-red/30' },
+ { key: 'p95', label: 'P95', color: 'text-accent-red border-accent-red/50' },
+ { key: 'p99', label: 'P99', color: 'text-accent-red border-accent-red/70' },
+]
+
+export function PercentileRow({ percentiles, tick }: Props) {
+ return (
+
+
+
+ {/* Chart */}
+ {chartData.length === 0 ? (
+
+
+
+ {/* Window toggle */}
+
+ Fee History
+
+ {count > 0 && (
+
+ {count.toLocaleString()} transactions
+ ยท avg
+ {avg.toFixed(0)} str
+ ยท p95
+
+ {p95.toLocaleString()} str
+
+
+ )}
+
+ {WINDOWS.map((w) => (
+
+ ))}
+
+
+ No data yet โ waiting for first poll cycle...
+
+ ) : (
+
+
+ )
+}
\ No newline at end of file
diff --git a/packages/ui/src/components/dashboard/RollingAverages.tsx b/packages/ui/src/components/dashboard/RollingAverages.tsx
new file mode 100644
index 0000000..e44e6bc
--- /dev/null
+++ b/packages/ui/src/components/dashboard/RollingAverages.tsx
@@ -0,0 +1,99 @@
+'use client'
+
+import type { InsightsResponse } from '@/lib/types'
+import { formatStroops, timeAgo, cn } from '@/lib/utils'
+
+interface Props {
+ insights: InsightsResponse | null
+ tick: number
+}
+
+export function RollingAverages({ insights, tick }: Props) {
+ if (!insights) {
+ return (
+
+ Fee Percentiles ยท Last 5 Ledgers
+
+
+ {LABELS.map(({ key, label, color }) => (
+
+
+ {label}
+
+ {formatStroops(percentiles[key])}
+
+
+ ))}
+
+ Loading insights...
+
+ )
+ }
+
+ const { rolling_averages, extremes } = insights
+
+ const rows = [
+ {
+ label: 'Short-term avg',
+ sub: '~5 min window',
+ result: rolling_averages.short_term,
+ accent: 'text-accent-green',
+ border: 'border-accent-green/20',
+ },
+ {
+ label: 'Medium-term avg',
+ sub: '~1 hour window',
+ result: rolling_averages.medium_term,
+ accent: 'text-accent-cyan',
+ border: 'border-accent-cyan/20',
+ },
+ {
+ label: 'Long-term avg',
+ sub: '~24 hour window',
+ result: rolling_averages.long_term,
+ accent: 'text-accent-yellow',
+ border: 'border-accent-yellow/20',
+ },
+ ]
+
+ return (
+
+
+ )
+}
\ No newline at end of file
diff --git a/packages/ui/src/components/dashboard/StatCards.tsx b/packages/ui/src/components/dashboard/StatCards.tsx
new file mode 100644
index 0000000..2026ec1
--- /dev/null
+++ b/packages/ui/src/components/dashboard/StatCards.tsx
@@ -0,0 +1,97 @@
+'use client'
+
+import { TrendingUp, TrendingDown, Minus, AlertTriangle, Layers, BarChart2 } from 'lucide-react'
+import type { CurrentFeeResponse, FeeTrendResponse } from '@/lib/types'
+import { formatStroops, congestionColor, congestionBg, cn } from '@/lib/utils'
+
+interface Props {
+ current: CurrentFeeResponse | null
+ trend: FeeTrendResponse | null
+ tick: number
+}
+
+function StatCard({
+ label,
+ value,
+ sub,
+ icon: Icon,
+ accent = false,
+ className = '',
+}: {
+ label: string
+ value: string
+ sub?: React.ReactNode
+ icon: React.ElementType
+ accent?: boolean
+ className?: string
+}) {
+ return (
+
+ Rolling Averages
+
+
+
+ {rows.map(({ label, sub, result, accent, border }) => (
+
+
+ {/* Extremes */}
+
+
+ ))}
+
+
+ {label}
+
+ {sub}
+ {result.is_partial && (partial)}
+
+
+
+
+ {formatStroops(result.value)}
+
+
+ {result.sample_count} samples
+
+
+
+
+ Period Extremes
+
+
+
+
+ Min
+
+ {formatStroops(extremes.current_min.value)}
+
+
+
+ Max
+
+ {formatStroops(extremes.current_max.value)}
+
+
+
+
+ )
+}
+
+export function StatCards({ current, trend, tick }: Props) {
+ const baseFee = current ? formatStroops(current.base_fee) : 'โ'
+ const avgFee = current ? formatStroops(current.avg_fee) : 'โ'
+ const status = trend?.status ?? 'Normal'
+ const spikes = trend?.recent_spike_count ?? 0
+ const strength = trend?.trend_strength ?? 'โ'
+
+ const TrendIcon = status === 'Rising' || status === 'Congested'
+ ? TrendingUp
+ : status === 'Declining'
+ ? TrendingDown
+ : Minus
+
+ return (
+
+ {label}
+
+
+ {value}
+
+ {sub && (
+ {sub}
+ )}
+
+ last ledger}
+ icon={Layers}
+ accent
+ />
+ mode over 5 ledgers}
+ icon={BarChart2}
+ />
+ {strength} trend}
+ icon={TrendIcon}
+ className={congestionBg(status)}
+ />
+ 0
+ ? fee anomalies detected
+ : all clear
+ }
+ icon={AlertTriangle}
+ />
+
+ )
+}
\ No newline at end of file
diff --git a/packages/ui/src/components/dashboard/TopBar.tsx b/packages/ui/src/components/dashboard/TopBar.tsx
new file mode 100644
index 0000000..c924c80
--- /dev/null
+++ b/packages/ui/src/components/dashboard/TopBar.tsx
@@ -0,0 +1,63 @@
+'use client'
+
+import { RefreshCw, Activity, Zap } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface Props {
+ lastUpdated: Date
+ isRefreshing: boolean
+ onRefresh: () => void
+}
+
+export function TopBar({ lastUpdated, isRefreshing, onRefresh }: Props) {
+ const timeStr = lastUpdated.toLocaleTimeString([], {
+ hour: '2-digit', minute: '2-digit', second: '2-digit'
+ })
+
+ return (
+
+
+ {/* Left โ branding */}
+
+
+
+
+ {/* Center โ live indicator */}
+
+
+ |
+
+ TESTNET
+
+
+
+
+ {/* Right โ refresh */}
+
+
+ Loading trend data...
+
+ )
+ }
+
+ const { status, trend_strength, changes, recent_spike_count, predicted_congestion_minutes } = trend
+
+ const StatusIcon =
+ status === 'Rising' || status === 'Congested' ? TrendingUp :
+ status === 'Declining' ? TrendingDown : Minus
+
+ const strengthDots = trend_strength === 'Strong' ? 3 : trend_strength === 'Moderate' ? 2 : 1
+
+ return (
+
+
+ )
+}
\ No newline at end of file
diff --git a/packages/ui/src/lib/api.ts b/packages/ui/src/lib/api.ts
new file mode 100644
index 0000000..b89bd50
--- /dev/null
+++ b/packages/ui/src/lib/api.ts
@@ -0,0 +1,27 @@
+import type {
+ CurrentFeeResponse,
+ FeeHistoryResponse,
+ FeeTrendResponse,
+ InsightsResponse,
+ HealthResponse,
+} from './types'
+
+const BASE = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8080'
+
+async function get
+ Trend Analysis
+
+
+ {/* Status + strength */}
+
+
+
+ {/* Pct changes */}
+
+
+
+ {[1, 2, 3].map(i => (
+
+ ))}
+ {trend_strength}
+
+
+ {([
+ ['1H', changes['1h_pct']],
+ ['6H', changes['6h_pct']],
+ ['24H', changes['24h_pct']],
+ ] as [string, number | null][]).map(([label, pct]) => (
+
+
+ {/* Extras */}
+
+ {label} change
+
+ {pctArrow(pct)}
+
+
+ ))}
+
+ Recent spikes
+ 0 ? 'text-accent-yellow' : 'text-accent-green'}>
+ {recent_spike_count}
+
+
+
+ {predicted_congestion_minutes !== null && (
+
+ Predicted congestion
+ {predicted_congestion_minutes}m
+
+ )}
+