shadcn.io is not affiliated with official shadcn/ui
Validator Node Web3 Block for Ark UI
A validator's duty log: 64 epochs as a grid of attested, late and missed cells you can step through, the reason for each miss, effectiveness worked out from the grid against a Flag below slider, and sync, peers and resource bars.
Installation
Overview
Answer which epochs a validator missed and why, with this duty log for React with Ark UI. It's a page of Nodeharbor, a fictional validator operations tool, and the data is a typed sample from a fictional validator. A headline shows effectiveness, worked out from the grid as attested epochs plus half of the late ones over 64, next to a word that compares it with your flag. The grid holds the last 64 epochs; each cell is a native radio drawn as a check for attested, a clock for late or a cross for missed, so one tab stop and the arrow keys move through them, and the chosen epoch's result and reason (for a miss, for example, Peer count fell to 3) are written in a list under it. A slider named Flag below sets the threshold between 80 and 100 percent and decides whether the word reads Healthy or Below your threshold. A side cell shows sync state, peers and three Progress bars for CPU, memory and disk. For staking operators and monitoring pages.
FAQ
How is effectiveness worked out?
It is attested epochs plus half of the late ones, divided by 64. With 59 attested, 3 late and 2 missed that is 94.5 percent. The figure, the counts and the word all come from the same function over the grid, so changing a typed epoch changes all of them.
How does the grid tell the three results apart without color?
By shape and weight: a check on a plain cell for attested, a clock on an outlined cell for late and a cross on a solid cell for missed, with a key under the grid. Each cell also carries its epoch number and result as hidden text, so screen readers hear Epoch 4,810, missed.
What does Flag below do?
It moves the line between Healthy and Below your threshold. At 92 percent the sample is healthy; drag past 94.5 and the word flips. It only changes the wording, not the grid or the figure.
What stays local, and how do I wire it?
All of it. The epochs, reasons and resource readings are constants, and nothing talks to a node. In your app read attestation duties from your beacon node's API, keep your client's logs as the source for the reasons, and refresh the resource bars from your metrics endpoint.