HeaderStatsBar

Horizontal flex strip that hosts the dashboard's stat boxes (HeaderMinersBox, HeaderHashrateBox, HeaderConsumptionBox, HeaderEfficiencyBox). Lives inside <AppHeader> as the middle slot.

Slot-based: the caller decides which boxes to render and in which order. The bar interleaves an angled chevron divider between adjacent children to match the Mining OS visual treatment.

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

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>)