Generic widgets

Vendor-agnostic dashboard stat cards for containers, pool details, and data export

Widgets that work with any container vendor and pool configuration. For header bar controls see Header items. For vendor-specific summary boxes see Bitmain and MicroBT.

Prerequisites

Complete the @tetherto/mdk-react-devkit installation and add the dependency
Most widgets expect a container Device record; read the individual Props sections for field shapes

Components

Component	Description
`TanksBox`	Immersion tank status display
`SupplyLiquidBox`	Cooling liquid supply monitoring
`MinersSummaryBox`	Container miner summary widget
`PoolDetailsCard`	Mining pool configuration display
`PoolDetailsPopover`	Pool info in hover popover
`StatsExport`	Export statistics to CSV/Excel

`MinersSummaryBox`

Displays mining summary parameters in a 2-column grid layout.

Import

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

Props

Prop	Status	Type	Default	Description
`params`	Required	`MinersSummaryParam[]`	none	Label-value pairs rendered in a two-column grid
`className`	Optional	`string`	none	Additional CSS class

`MinersSummaryParam` type

type MinersSummaryParam = {
  label: string   // Parameter name
  value: string   // Pre-formatted display value (including units)
}

Basic usage

<MinersSummaryBox
  params={[
    { label: 'Efficiency', value: '32.5 W/TH/S' },
    { label: 'Hash Rate', value: '1.24 PH/s' },
    { label: 'Max Temp', value: '72 °C' },
    { label: 'Avg Temp', value: '65 °C' },
  ]}
/>

Notes

Values must be pre-formatted strings (the component does not format data)
Text size automatically adjusts for long values (>12 or >15 characters)

Styling

.mdk-miners-summary-box: Root element
.mdk-miners-summary-box__param: Individual parameter row
.mdk-miners-summary-box__label: Parameter label
.mdk-miners-summary-box__label--small: Smaller text for long values
.mdk-miners-summary-box__label--tiny: Tiny text for very long values
.mdk-miners-summary-box__value: Parameter value

`PoolDetailsCard`

Mining pool configuration display card showing pool details in a labeled list format.

Import

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

Props

Prop	Status	Type	Default	Description
`details`	Required	`PoolDetailItem[]`	none	Pool metadata rows; an empty array shows "No data available"
`label`	Optional	`string`	none	Card header label
`underline`	Optional	`boolean`	`false`	Underline the header
`className`	Optional	`string`	none	Additional CSS class

`PoolDetailItem` type

type PoolDetailItem = {
  title: string
  value?: string | number
}

Basic usage

<PoolDetailsCard
  label="Pool Configuration"
  details={[
    { title: 'Pool URL', value: 'stratum+tcp://pool.example.com:3333' },
    { title: 'Worker', value: 'worker001' },
    { title: 'Algorithm', value: 'SHA-256' },
  ]}
/>

Styling

.mdk-pool-details-card: Root element
.mdk-pool-details-card__header: Header container
.mdk-pool-details-card__header--underline: Underlined header modifier
.mdk-pool-details-card__label: Header label text
.mdk-pool-details-card__list: Details list container
.mdk-pool-details-card__item: Individual detail row
.mdk-pool-details-card__item-title: Detail title
.mdk-pool-details-card__item-value: Detail value
.mdk-pool-details-card__empty: Empty state container

`PoolDetailsPopover`

Button that opens a dialog popover displaying pool details using PoolDetailsCard.

Import

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

Props

Prop	Status	Type	Default	Description
`details`	Required	`PoolDetailItem[]`	none	Rows rendered inside the dialog via `PoolDetailsCard`
`title`	Optional	`string`	none	Dialog title
`description`	Optional	`string`	none	Dialog description
`triggerLabel`	Optional	`string`	none	Trigger button label
`disabled`	Optional	`boolean`	`false`	Disable the trigger button
`className`	Optional	`string`	none	Additional CSS class

Basic usage

<PoolDetailsPopover
  triggerLabel="View Pool Details"
  title="Primary Pool"
  details={[
    { title: 'URL', value: 'stratum://pool.example.com:3333' },
    { title: 'Worker', value: 'worker001' },
    { title: 'Status', value: 'Active' },
  ]}
/>

Styling

.mdk-pool-details-popover: Root element
.mdk-pool-details-popover__body: Dialog body container

`StatsExport`

Dropdown button for exporting statistics to CSV or JSON formats.

Import

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

Props

Prop	Status	Type	Default	Description
`onCsvExport`	Required	`function`	none	Called when CSV is selected; awaited while a spinner is shown
`onJsonExport`	Required	`function`	none	Called when JSON is selected; awaited while a spinner is shown
`disabled`	Optional	`boolean`	`false`	Disable the trigger button
`showLabel`	Optional	`boolean`	`false`	When `false` (default), shows the "Export" text label next to the icon; when `true`, hides the label (icon-only trigger)

fetchStats, downloadCsv, and downloadJson are app-level helpers—you implement them (or call your API) inside onCsvExport and onJsonExport. They are not exported from @tetherto/mdk-react-devkit.

Basic usage

<StatsExport
  onCsvExport={async () => {
    const data = await yourApp.fetchDashboardStats()
    yourApp.downloadCsv(data, 'mining-stats.csv')
  }}
  onJsonExport={async () => {
    const data = await yourApp.fetchDashboardStats()
    yourApp.downloadJson(data, 'mining-stats.json')
  }}
/>

More examples

Styling

.stats-export__button: Trigger button
.stats-export__button--disabled: Disabled state
.stats-export__label: Button label text
.stats-export__divider: Divider between icon and arrow
.stats-export__dropdown: Dropdown menu container
.stats-export__item: Dropdown menu item
.stats-export__item--bordered: Item with bottom border

`SupplyLiquidBox`

Displays cooling liquid supply metrics including temperature, set temperature, and pressure.

Import

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

Props

Prop	Status	Type	Default	Description
`data`	Optional	`Device`	none	Container device record with supply liquid snap stats
`containerSettings`	Optional	`SupplyLiquidBoxContainerSettings \| null`	`null`	Hydro threshold overrides (`waterTemperature`, `supplyLiquidPressure`) for color and flash

`SupplyLiquidBoxContainerSettings` type

type SupplyLiquidBoxContainerSettings = {
  thresholds?: Record<string, Record<string, number>>
}

Use hydro keys under thresholds (not snap stat names such as supply_liquid_temp).

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

const containerDevice: Device = {
  id: 'bitmain-hydro-1',
  type: 'bitmain-hydro',
  last: {
    snap: {
      stats: {
        status: 'running',
        supply_liquid_temp: 35,
        supply_liquid_set_temp: 32,
        supply_liquid_pressure: 2.5,
      },
    },
  },
}

Basic usage

<SupplyLiquidBox data={containerDevice} />

More examples

Features

The component displays three SingleStatCard items:

Supply Liquid / subtitle Temp: current liquid temperature
Supply Liquid / subtitle Set Temp: target set temperature
Supply Liquid / subtitle Pressure: current pressure

Each stat automatically shows color and flash indicators based on threshold settings.

Styling

.mdk-supply-liquid-box: Root element
.mdk-supply-liquid-box__stats: Stats container

`TanksBox`

Displays immersion tank status with temperature, pressure, and pump indicators for each tank.

For the per-row primitive and standalone usage, see TankRow on the containers page.

Import

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

Props

Prop	Status	Type	Default	Description
`data`	Optional	`TanksBoxData`	none	Oil pump, water pump, and pressure tank readings; renders nothing when omitted

`TanksBoxData` type

type Tank = {
  cold_temp_c: number
  enabled: boolean
  color?: string      // Visual indicator color
  flash?: boolean     // Enable flash animation
  tooltip?: string    // Tooltip text
}

type TanksBoxData = {
  oil_pump: Tank[]
  water_pump: { enabled: boolean }[]
  pressure: { value?: number; flash?: boolean; color?: string; tooltip?: string }[]
}

Composition

TanksBox maps each oil_pump entry to one TankRow by array index:

// Per-row mapping (index i):
oil_pump[i].enabled       -> oilPumpEnabled
oil_pump[i].cold_temp_c   -> temperature (always Celsius)
water_pump[i]?.enabled    -> waterPumpEnabled
pressure[i] ?? {}         -> pressure
oil_pump[i].{color,flash,tooltip} -> temperature cell hints

Basic usage

<TanksBox
  data={{
    oil_pump: [
      { cold_temp_c: 45, enabled: true },
      { cold_temp_c: 42, enabled: true },
    ],
    water_pump: [
      { enabled: true },
      { enabled: false },
    ],
    pressure: [
      { value: 1.2 },
      { value: 1.1 },
    ],
  }}
/>

More examples

Styling

.mdk-tanks-box: Root element
Uses TankRow internally for each tank display

Generic widgets

With underline

Empty state

With description

Disabled state

Disabled state

With loading state

Export formats

With threshold settings

With visual alerts

Multiple tanks

With custom tooltips

Mixed pump states

No data

On this page