Header items

The header bar components that render live stats and controls in the persistent app header. Visibility for each item is governed by HeaderControlsSettings and the HeaderPreferences object.

For vendor-agnostic dashboard body cards see Dashboard › Stats › Generic widgets.

Prerequisites

Complete the @tetherto/mdk-react-devkit installation and add the dependency

Components

Component	Description
`DashboardDateRangePicker`	Dashboard-level date range picker
`ExportButton`	Dashboard stats export trigger button
`HeaderConsumptionBox`	Header stat box for total power consumption
`HeaderEfficiencyBox`	Header stat box for mining efficiency
`HeaderHashrateBox`	Header stat box for total fleet hashrate
`HeaderMinersBox`	Header stat box for active miner count
`HeaderStatsBar`	Horizontal bar of real-time stat boxes in the app header
`ProfileMenu`	User profile dropdown menu in the app header

`HeaderStatsBar`

Arranges HeaderConsumptionBox, HeaderEfficiencyBox, HeaderHashrateBox, and HeaderMinersBox in a horizontal bar below the main app header.

Import

import { HeaderStatsBar } from '@tetherto/mdk-react-devkit/foundation'
import type { HeaderStatsBarProps } from '@tetherto/mdk-react-devkit/foundation'

Props

Prop	Status	Type	Default	Description
`children`	Required	`ReactNode`	none	Stat box components to render left-to-right
`className`	Optional	`string`	none	Optional root class override

Basic usage

HeaderStatsBar is a slot-based container. Pass the stat boxes you want to show as children — the bar inserts an angled chevron divider between each pair automatically.

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

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

Styling

.mdk-header-stats-bar: Root flex strip
.mdk-header-stats-bar__divider: Angled chevron icon between children

`HeaderMinersBox`

Compact header widget displaying online/offline miner counts. Part of the HeaderStatsBar layout.

Import

import { HeaderMinersBox } from '@tetherto/mdk-react-devkit/foundation'
import type { HeaderMinersBoxProps } from '@tetherto/mdk-react-devkit/foundation'

Props

Prop	Status	Type	Default	Description
`total`	Optional	`number`	none	Total miners on site (denominator)
`online`	Optional	`number`	none	Online miner count (green, also the numerator in the ratio)
`error`	Optional	`number`	none	Miners in warning state (amber)
`offline`	Optional	`number`	none	Offline miners (red)
`mosTotal`	Optional	`number`	none	Total miners reporting to MOS
`poolTotal`	Optional	`number`	none	Total miners as reported by upstream pools
`poolOnline`	Optional	`number`	none	Pool-side online count (green)
`poolMismatch`	Optional	`number`	none	Pool-side mismatch count (red)
`icon`	Optional	`ReactNode`	none	Override the default miner icon
`className`	Optional	`string`	none	Optional root class override

All numeric values fall back to — when undefined.

Basic usage

<HeaderMinersBox
  total={2188}
  online={158}
  error={1}
  offline={57}
  mosTotal={216}
  poolTotal={205}
  poolOnline={201}
  poolMismatch={4}
/>

Styling

.mdk-header-stat-box: Shared stat cell root
.mdk-header-stat-box__icon: Icon slot
.mdk-header-stat-box__body: Text content area
.mdk-header-stat-box__row: Each label/value row
.mdk-header-stat-box__success: Green value (online)
.mdk-header-stat-box__warning: Amber value (error)
.mdk-header-stat-box__danger: Red value (offline / mismatch)
.mdk-header-stat-box__accent: Highlighted online ratio
.mdk-header-stat-box__muted: Subdued label text

`HeaderHashrateBox`

Compact header widget displaying total fleet hashrate with a trend indicator. Part of the HeaderStatsBar layout.

Import

import { HeaderHashrateBox } from '@tetherto/mdk-react-devkit/foundation'
import type { HeaderHashrateBoxProps } from '@tetherto/mdk-react-devkit/foundation'

Props

Prop	Status	Type	Default	Description
`mosPhs`	Optional	`number`	none	MOS-side aggregate hashrate in PH/s
`poolPhs`	Optional	`number`	none	Pool-side aggregate hashrate in PH/s
`unit`	Optional	`string`	varies	Unit label — see individual component for default
`icon`	Optional	`ReactNode`	none	Override the default miner icon
`className`	Optional	`string`	none	Optional root class override

Basic usage

<HeaderHashrateBox mosPhs={63.262} poolPhs={52.687} />

`HeaderConsumptionBox`

Compact header widget displaying total power consumption with a trend indicator. Part of the HeaderStatsBar layout.

Import

import { HeaderConsumptionBox } from '@tetherto/mdk-react-devkit/foundation'
import type { HeaderConsumptionBoxProps } from '@tetherto/mdk-react-devkit/foundation'

Props

Prop	Status	Type	Default	Description
`valueMw`	Optional	`number`	none	Current site-level power consumption in megawatts
`unit`	Optional	`string`	varies	Unit label — see individual component for default
`icon`	Optional	`ReactNode`	none	Override the default miner icon
`className`	Optional	`string`	none	Optional root class override

The value is formatted to 3 decimal places and rendered in the accent (orange) colour token.

Basic usage

<HeaderConsumptionBox valueMw={1.663} />

`HeaderEfficiencyBox`

Compact header widget displaying fleet efficiency in J/TH. Part of the HeaderStatsBar layout.

Import

import { HeaderEfficiencyBox } from '@tetherto/mdk-react-devkit/foundation'
import type { HeaderEfficiencyBoxProps } from '@tetherto/mdk-react-devkit/foundation'

Props

Prop	Status	Type	Default	Description
`valueWthS`	Optional	`number`	none	Efficiency in W/TH/s (`power_w / hashrate_th`)
`unit`	Optional	`string`	varies	Unit label — see individual component for default
`icon`	Optional	`ReactNode`	none	Override the default miner icon
`className`	Optional	`string`	none	Optional root class override

The value is formatted to 2 decimal places.

Basic usage

<HeaderEfficiencyBox valueWthS={26.29} />

`DashboardDateRangePicker`

Date range picker scoped to dashboard context; syncs selected range to the adapter store for stat widgets and charts.

Import

import { DashboardDateRangePicker } from '@tetherto/mdk-react-devkit/foundation'
import type { DashboardDateRangePickerProps, DashboardDateRange } from '@tetherto/mdk-react-devkit/foundation'

Props

Prop	Status	Type	Default	Description
`value`	Required	`DashboardDateRange`	none	Current range as `{ start, end }` epoch-millisecond timestamps
`onChange`	Required	`function`	none	Fires with the next `{ start, end }` window when the user applies a range
`dateFormat`	Optional	`string`	`'dd/MM/yyyy'`	Display format — defaults to `dd/MM/yyyy`
`disabled`	Optional	`boolean`	`false`	Disable the trigger
`className`	Optional	`string`	none	Optional root class override

`DashboardDateRange` type

type DashboardDateRange = {
  start: number  // epoch ms
  end: number    // epoch ms
}

Basic usage

Designed to slot directly into useDashboardDateRange from @tetherto/mdk-react-adapter:

import { DashboardDateRangePicker } from '@tetherto/mdk-react-devkit/foundation'
import { useDashboardDateRange } from '@tetherto/mdk-react-adapter'

export const DashboardControls = () => {
  const { start, end, setRange } = useDashboardDateRange()

  return (
    <DashboardDateRangePicker
      value={{ start, end }}
      onChange={({ start, end }) => setRange(start, end)}
    />
  )
}

Styling

.mdk-dashboard-date-range-picker__trigger: Trigger button
.mdk-dashboard-date-range-picker__modal: Calendar modal

`ExportButton`

Button that triggers a CSV/PDF export of dashboard statistics. Surfaces a toast notification on completion.

Import

import { ExportButton } from '@tetherto/mdk-react-devkit/foundation'
import type { ExportButtonProps, ExportFormat } from '@tetherto/mdk-react-devkit/foundation'

Props

Prop	Status	Type	Default	Description
`onExport`	Required	`function`	none	Fires with `'csv'` or `'json'` when the user picks a format
`formats`	Optional	`readonly ExportFormat[]`	`['csv', 'json']`	Formats to offer in the dropdown — defaults to `['csv', 'json']`
`label`	Optional	`string`	`'Profile menu'`	Accessible label for the trigger button — defaults to `'Profile menu'`
`disabled`	Optional	`boolean`	`false`	Disable the trigger
`className`	Optional	`string`	none	Optional root class override

`ExportFormat` type

type ExportFormat = 'csv' | 'json'

Basic usage

import { ExportButton } from '@tetherto/mdk-react-devkit/foundation'

<ExportButton
  onExport={(format) => {
    if (format === 'csv') downloadCsv(data)
    else downloadJson(data)
  }}
/>

Styling

.mdk-export-button: Trigger button wrapper
.mdk-export-button__label: Label text span
.mdk-export-button__chevron: Dropdown chevron icon
.mdk-export-button__menu: Dropdown menu container

`ProfileMenu`

Avatar button that opens a dropdown with user info, settings link, and sign-out action. Reads user identity from the adapter store.

Import

import { ProfileMenu } from '@tetherto/mdk-react-devkit/foundation'
import type { ProfileMenuProps, ProfileMenuItem } from '@tetherto/mdk-react-devkit/foundation'

Props

Prop	Status	Type	Default	Description
`items`	Required	`ProfileMenuItem[]`	none	Items rendered in the dropdown, top-to-bottom. Defaults to a single "Sign out" item.
`user`	Optional	`ReactNode`	none	Optional user label rendered at the top of the dropdown (e.g. an email)
`icon`	Optional	`ReactNode`	none	Override the default miner icon
`label`	Optional	`string`	`'Profile menu'`	Accessible label for the trigger button — defaults to `'Profile menu'`
`className`	Optional	`string`	none	Optional root class override

`ProfileMenuItem` type

type ProfileMenuItem = {
  label: string
  onSelect: () => void
  danger?: boolean       // render as a destructive action (red)
  icon?: ReactNode       // optional leading icon
  description?: ReactNode // optional secondary line (e.g. "Current: Europe/Podgorica")
  disabled?: boolean
}

Basic usage

import { ProfileMenu } from '@tetherto/mdk-react-devkit/foundation'

<ProfileMenu
  user="admin@example.com"
  items={[
    {
      label: 'Timezone',
      description: 'Current: Europe/Podgorica',
      onSelect: () => openTimezoneDialog(),
    },
    {
      label: 'Sign out',
      danger: true,
      onSelect: () => auth.signOut(),
    },
  ]}
/>

Styling

.mdk-profile-menu__trigger: Trigger button
.mdk-profile-menu__user: User label at top of dropdown
.mdk-profile-menu__item: Menu item row
.mdk-profile-menu__item--two-line: Modifier when description is present
.mdk-profile-menu__item--danger: Modifier for destructive items
.mdk-profile-menu__item-icon: Leading icon slot
.mdk-profile-menu__item-body: Label + description wrapper
.mdk-profile-menu__item-label: Primary label text
.mdk-profile-menu__item-description: Secondary description text

Header items

On this page