Widget

Widget components for dashboards and data displays.

Prerequisites

Install the packages

npm install \
  @tetherto/mdk-react-devkit \
  @tetherto/mdk-react-adapter \
  @tetherto/mdk-ui-foundation

Install zod@^4.6.6 first. @tetherto/mdk-react-devkit@0.12.1 declares zod@^4.6.6 as a peer while its @hookform/resolvers peer pulls a chain that pins zod 3, so the command above aborts with ERESOLVE in a project that has no zod. Installing zod 4 at the project root resolves it:

npm install zod@^4.6.6

Import styles: import '@tetherto/mdk-react-devkit/styles.css'

Components

@tetherto/mdk-react-devkit

Import the public APIs on this page from @tetherto/mdk-react-devkit.

`EnabledDisableToggle`

Switch with confirmation that enables or disables a container, miner, or feature flag

agent-ready

Source

src/domain/components/enabled-disable-toggle/USAGE.md

src/domain/components/enabled-disable-toggle/enabled-disable-toggle.tsx

Props

Prop	Status	Type / Options	Default	Description
`isButtonDisabled`	Required	`boolean`	-	Disables the Enable/Disable buttons when a command is in-flight
`isOffline`	Required	`boolean`	-	Disables all controls and shows an offline tooltip
`onToggle`	Required	`(params: EnabledDisableToggleCbParams) => void`	-	Callback fired when the user confirms a state change
`tankNumber`	Required	`string \| number`	-	Tank identifier used in the label (`Tank {N} Circulation`). Pass an empty string for the air exhaust label
`value`	Required	`unknown`	-	Current state. A boolean drives a switch display; non-boolean shows action buttons

`GenericDataBox`

Reusable labelled stat box used by container summary panels for one-off numeric values.

Displays a table of label-value-unit rows

agent-ready

Source

src/domain/components/data-box/generic-data-box/USAGE.md

src/domain/components/data-box/generic-data-box/generic-data-box.tsx

Props

Prop	Status	Type / Options	Default	Description
`data`	Optional	`DataItem[]`	`[]`	Array of data items to display
`fallbackValue`	Optional	`unknown`	-	Fallback value when value is undefined

`MinerMetricCard`

Single-metric card (hashrate, temperature, or power) for one miner with sparkline and delta.

Displays key metrics for a miner including: - Efficiency (fixed position top-right) - Hash rate, Temperature - Frequency, Consumption - Optional secondary stats in grid

agent-ready

Source

src/domain/components/stat-cards/miner-metric-card/USAGE.md

src/domain/components/stat-cards/miner-metric-card/miner-metric-card.tsx

Props

Prop	Status	Type / Options	Default	Description
`primaryStats`	Optional	`StatItem[]`	-	Primary statistics (efficiency, hashrate, temperature, frequency, consumption)
`secondaryStats`	Optional	`StatItem[]`	-	Secondary statistics to display in grid
`showSecondaryStats`	Optional	`boolean`	`true`	Whether to show secondary stats section

`StatItem`

Prop	Status	Type / Options	Default	Description
`name`	Optional	`string`	-	In `primaryStats`, selects the slot and must be exactly 'Efficiency', 'Hash rate', 'Temperature', 'Frequency' or 'Consumption'; in `secondaryStats`, the label (and React key)
`unit`	Optional	`string`	-	Unit appended after the value in `primaryStats`; ignored in `secondaryStats`, so fold it into `value` there
`value`	Optional	`string \| number`	-	Displayed value; Efficiency only shows when it is a number

`MinersActivityChart`

Per-status miner counts (online / offline / faulted / power-mode). Renders as coloured indicator dots (indicators) or tinted status tiles (tiles)

agent-ready

Source

src/domain/components/miners-activity-chart/USAGE.md

src/domain/components/miners-activity-chart/miners-activity-chart.tsx

Props

Prop	Status	Type / Options	Default	Description
`data`	Optional	`MinersActivityData`	`{}`	Time-series data for online/offline/faulted counts
`error`	Optional	`MinerActivityChartErrorProp \| null`	`null`	Error details to display
`isDemoMode`	Optional	`boolean`	`false`	Use demo/mock data
`isError`	Optional	`boolean`	`false`	Show error state
`isLoading`	Optional	`boolean`	`false`	Show loading state
`large`	Optional	`boolean`	`false`	Use tall variant
`showLabel`	Optional	`boolean`	`true`	Show axis labels
`variant`	Optional	`"indicators" \| "tiles"`	`"indicators"`	`indicators` (default) renders coloured dots; `tiles` renders tinted status tiles

`MinersActivityData`

Prop	Status	Type / Options	Default	Description
`total`	Optional	`number`	-	Total miner count; not rendered, since each tile reads its own status key (e.g. `offline`, `error`, `sleep`) and shows 0 when absent

`MinerActivityChartErrorProp`

Prop	Status	Type / Options	Default	Description
`data`	Optional	`{ message?: string }`	-	Error payload; `message` becomes the error alert description when `isError` is set, else a generic retry hint

`SingleStatCard`

Hero stat tile rendering one big number with a label and optional delta indicator.

Displays a single statistic with optional animations and variants

agent-ready

Source

src/domain/components/stat-cards/single-stat-card/USAGE.md

src/domain/components/stat-cards/single-stat-card/single-stat-card.tsx

Props

Prop	Status	Type / Options	Default	Description
`className`	Optional	`string`	-	Additional class for the root element
`color`	Optional	`string`	`"inherit"`	Color for flash/border
`flash`	Optional	`boolean`	`false`	Enable flash animation
`name`	Optional	`string`	-	Stat name/label
`row`	Optional	`boolean`	`false`	Row layout
`subtitle`	Optional	`string`	`""`	Subtitle text
`superflash`	Optional	`boolean`	`false`	Enable superflash animation (faster)
`unit`	Optional	`string`	`""`	Unit of measurement
`value`	Optional	`string \| number \| null`	`null`	Stat value
`variant`	Optional	`"primary" \| "secondary" \| "tertiary" \| "highlighted" \| "compact"`	`"primary"`	Card variant. `compact` is a centred name-over-value tile in muted text, for dense grids of secondary metrics

`WidgetTopRow`

Compact header row used at the top of container / miner widgets — shows the title, one badge per alarm category you pass, and the current power reading (or an error tooltip)

agent-ready

Source

src/domain/components/widget-top-row/USAGE.md

src/domain/components/widget-top-row/index.tsx

Props

Prop	Status	Type / Options	Default	Description
`title`	Required	`string`	-	Widget title
`alarms`	Optional	`WidgetAlarmGroup[]`	-	Alarm category badges, in display order. Categories with no items render nothing
`className`	Optional	`string`	-	Additional class names
`power`	Optional	`number`	-	Power reading; rendered in kilo-units
`statsErrorMessage`	Optional	`string \| ErrorWithTimestamp[] \| null`	-	Error tooltip content; replaces power
`unit`	Optional	`string`	-	Power unit (e.g. `"kW"`)

`WidgetAlarmGroup`

Prop	Status	Type / Options	Default	Description
`icon`	Required	`React.ReactNode`	-	`Badge` icon
`title`	Required	`string`	-	Category label; the tooltip heading reads `<title> issues`
`items`	Optional	`AlertRecord[]`	-	Active alerts in this category; the badge is hidden when empty

On this page