Stats

Stat widgets are the compact, at-a-glance cards that line the dashboard. They summarize container health, pool configuration, liquid supply, tanks, miner roll-ups, and export controls.

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
• In TypeScript, import the type from the foundation barrel: import type { Device } from '@tetherto/mdk-react-devkit/foundation'. Snippet fixtures may be plain objects that satisfy Device without an import

Supported widgets

Both provider-specific and general widgets are supported:

Generic widgets

Widgets that work with any container vendor and pool configuration.

MinersSummaryBox

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

Import

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

Props

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

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' },
  ]}
/>

More examples

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

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' },
  ]}
/>

More examples

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

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

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

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

Vendor-specific widgets

Summary widgets that read vendor-shaped fields off a Device record. One component per vendor today.

Bitmain Immersion

BitMainImmersionSummaryBox

Summary panel showing oil pump 1/2 and water pump statuses alongside primary and secondary liquid supply temperatures with alert coloring.

Import

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

Props

BitMainImmersionSummaryBoxContainerSettings type

type BitMainImmersionSummaryBoxContainerSettings = {
  thresholds?: Record<string, unknown>
}

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

const immersionContainer: Device = {
  id: 'bitmain-immersion-1',
  type: 'bitmain-immersion',
  last: {
    snap: {
      stats: {
        status: 'running',
        container_specific: {
          second_supply_temp1: 40,
          second_supply_temp2: 41,
          primary_supply_temp: 42,
          second_pump1: true,
          second_pump2: true,
          second_pump1_fault: false,
          second_pump2_fault: false,
          one_pump: true,
        },
      },
    },
  },
}

const customThresholds = {
  oilTemperature: {
    COLD: 30,
    LIGHT_WARM: 34,
    WARM: 38,
    HOT: 42,
    SUPERHOT: 45,
  },
}

Basic usage

<BitMainImmersionSummaryBox data={immersionContainer} />

More examples

Composition

• Oil pump #1 and oil pump #2 indicators derived from second_pump1 / second_pump2 and their _fault flags
• Water pump indicator derived from one_pump
• Three SingleStatCards for primary supply temp, secondary supply Temp1, and secondary supply Temp2, each colored and flashed via getImmersionTemperatureColor and shouldImmersionTemperatureFlash

Styling

• .mining-sdk-bitmain-immersion-summary-box: Root element
• .mining-sdk-bitmain-immersion-summary-box__pumps: Pumps row
• .mining-sdk-bitmain-immersion-summary-box__pump: Single pump cell
• .mining-sdk-bitmain-immersion-summary-box__pump-title: Pump label text
• .mining-sdk-bitmain-immersion-summary-box__liquid-stats: Liquid stat cards row

MicroBT

MicroBTWidgetBox

Compact widget showing MicroBT cycle pump and cooling fan running/off indicators, with a red error state when the cooling fan is not running.

Import

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

Props

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

const microbtContainer: Device = {
  id: 'microbt-1',
  type: 'microbt',
  last: {
    snap: {
      stats: {
        status: 'running',
        container_specific: {
          cdu: {
            circulation_pump_running_status: 'running',
            cooling_fan_control: true,
          },
        },
      },
    },
  },
}

Basic usage

<MicroBTWidgetBox data={microbtContainer} />

Indicators rendered

The label Cicle Pump matches the rendered UI and foundation source (typo for "Cycle Pump"); keep documentation aligned until the component string is corrected in code.

• Cicle Pump: green Running when cdu.circulation_pump_running_status equals CONTAINER_STATUS.RUNNING, gray Off otherwise
• Cooling Fan: green Running when cdu.cooling_fan_control is truthy, red Error otherwise

Styling

• .mdk-micro-bt-widget-box: Root grid element
• .mdk-micro-bt-widget-box__item: Single indicator cell
• .mdk-micro-bt-widget-box__title: Indicator label text