HeaderMinersBox

Two-row miner-count cell for the dashboard's header strip. Top row carries the MOS-side `online / error / offline` breakdown; the bottom row shows the pool-s…

Two-row miner-count cell for the dashboard's header strip. Top row carries the MOS-side online / error / offline breakdown; the bottom row shows the pool-side equivalent. Numbers fall back to — when undefined.

import { HeaderMinersBox } from "@tetherto/mdk-react-devkit";

Prop	Status	Type	Default	Description
`icon`	Optional	`React.ReactNode`	—	Icon shown next to the "Miners" label. Caller-provided so the package stays icon-agnostic.
`total`	Optional	`number \| undefined`	—	Total miners across the site (denominator of the `158 / 2,188` ratio).
`online`	Optional	`number \| undefined`	—	Online miners (the `158` numerator).
`error`	Optional	`number \| undefined`	—	Miners flagged in warning (the small amber count).
`offline`	Optional	`number \| undefined`	—	Miners offline (the small red count).
`mosTotal`	Optional	`number \| undefined`	—	Optional MOS-side meta line — total miners reporting to MOS.
`poolTotal`	Optional	`number \| undefined`	—	Optional pool-side meta — total miners as reported by upstream pools.
`poolOnline`	Optional	`number \| undefined`	—	Optional pool-side online count (green).
`poolMismatch`	Optional	`number \| undefined`	—	Optional pool-side mismatch count (red).
`className`	Optional	`string \| undefined`	—	—

Usage

Dashboard header stat boxes: HeaderStatsBar (container) plus four slot-fillers — HeaderMinersBox, HeaderHashrateBox, HeaderConsumptionBox, HeaderEfficiencyBox. Each box is a pure presentational component: pass numeric props, get the formatted display. No internal data fetching — pair with useSiteHashrate, useSiteConsumption, useSiteEfficiency, useSiteMinerCounts from @tetherto/mdk-react-adapter.

Composition

import {
  AppHeader,
  HeaderStatsBar,
  HeaderMinersBox,
  HeaderHashrateBox,
  HeaderConsumptionBox,
  HeaderEfficiencyBox,
} from '@tetherto/mdk-react-devkit'

import {
  useSiteConsumption,
  useSiteEfficiency,
  useSiteHashrate,
  useSiteMinerCounts,
} from '@tetherto/mdk-react-adapter'

const Header = () => {
  const counts = useSiteMinerCounts()
  const hashrate = useSiteHashrate({ timeline: '5m' })
  const consumption = useSiteConsumption({ timeline: '5m' })
  const efficiency = useSiteEfficiency({ timeline: '5m' })

  return (
    <AppHeader>
      <HeaderStatsBar>
        <HeaderMinersBox
          total={counts.data?.total}
          online={counts.data?.online}
          error={counts.data?.error}
          offline={counts.data?.offline}
        />
        <HeaderHashrateBox mosPhs={hashrate.valuePhs} />
        <HeaderConsumptionBox valueMw={consumption.valueMw} />
        <HeaderEfficiencyBox valueWthS={efficiency.valueWthS} />
      </HeaderStatsBar>
    </AppHeader>
  )
}

Notes

Undefined numbers render as —. Loading state is the empty state.
The icon slot on each box is optional — pass a 16/20px SVG.
Styles use cascade layer mdk; consumer styles in app win without specificity tricks.

Example

import { HeaderConsumptionBox } from './header-consumption-box'import { HeaderEfficiencyBox } from './header-efficiency-box'import { HeaderHashrateBox } from './header-hashrate-box'import { HeaderMinersBox } from './header-miners-box'import { HeaderStatsBar } from './header-stats-bar'/** * Four-box dashboard header strip — Miners / Hashrate / Consumption / * Efficiency. Lives in the middle slot of `<AppHeader>`. */export const HeaderStatsExample = (): React.ReactNode => (  <HeaderStatsBar>    <HeaderMinersBox      total={2188}      online={158}      error={1}      offline={57}      mosTotal={216}      poolTotal={205}      poolOnline={201}      poolMismatch={4}    />    <HeaderHashrateBox mosPhs={63.262} poolPhs={52.687} />    <HeaderConsumptionBox valueMw={1.663} />    <HeaderEfficiencyBox valueWthS={26.29} />  </HeaderStatsBar>)