Fork Gauge

The fork gauge is the primary visual indicator of Augur fork risk on the site. It consists of an SVG half-circle arc with a needle, a gradient color track, and a risk label — all driven by live blockchain data fetched from /data/fork-risk.json.

Component Architecture

ForkMonitor (island entry point, client:load)
└── ForkDataProvider (React Context — loads live data)
    └── ForkMockProvider (React Context — demo overrides, dev-only)
        └── ForkDisplay (subscribes to contexts + animation store)
            └── ForkGauge (pure SVG renderer, takes percentage prop)

• ForkMonitor — The Astro island. Always use client:load so the gauge hydrates immediately.
• ForkDataProvider — Fetches /data/fork-risk.json on mount, refreshes every 5 minutes. Exposes data via useForkData().
• ForkMockProvider — Dev-only demo layer. Wraps ForkDataProvider and can override data via generateScenario(). Guarded by import.meta.env.PROD.
• ForkDisplay — Composes the full UI. Subscribes to $appStore (animation state) and useForkData() (risk data).
• ForkGauge — Pure SVG component. Receives percentage prop (0–100). No data fetching, no context.