Network Status
RPC health: block height, latency, sync state. Staleness is derived from the age of the last block — a stuck node answers cheerfully with an old height, so "connected" from the node proves nothing.
src/components/ui/network-status.tsxAbout
From the component's own source, where it was written.
RPC endpoint health: block height, latency, sync state.
Staleness is derived from the age of the last block, not reported by the node. A stuck node answers every request cheerfully with an old height — it does not know it is stuck — so "connected" from the node itself proves nothing. Comparing the last block time against the chain's expected block time is what actually catches it.
Install
npx astralyx-ui add network-status
Usage
import { NetworkStatus } from '@/components/ui/network-status'
<NetworkStatus chain="Ethereum" blockHeight={21840112} lastBlockAt={last} latency={84} />Composer
Change the props and the source below follows.
- Block
- 21,840,112
- Last
- Latency
- 84 ms
- Peers
- 42
<NetworkStatus chain="Ethereum" blockHeight={21840112} lastBlockAt={last} latency={84} />Examples
States
<NetworkStatus chain="Ethereum" blockHeight={21840112} lastBlockAt={last} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
NetworkStatus
RPC endpoint health: block height, latency, sync state.
Extends Omit<ComponentProps<'div'>, 'children'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| chain | ReactNode | required | — |
| blockHeight | number | — | Reported as given. |
| lastBlockAt | Date | blockTime: 12 | Three missed block times counts as stale — stuck, not merely slow. |
| now | Date | — | — |
| latency | number | — | Milliseconds. Over a second reads as degraded. |
| blockTime | number | 12 | Three missed block times counts as stale — stuck, not merely slow. |
| peers | number | — | Reported as given. |
| locale | string | 'en-GB' | — |
| blockLabel | ReactNode | 'Block' | — |
| lastBlockLabel | ReactNode | 'Last' | Precedes the last-block time. |
| latencyLabel | ReactNode | 'Latency' | — |
| peersLabel | ReactNode | 'Peers' | — |