Miner detail components

Miner detail components

Components for displaying detailed miner information, statistics, and providing control interfaces for individual miners.

Prerequisites

Before using these components, complete the @mdk/foundation installation and add the dependency.

MinerInfoCard

Displays detailed miner status and statistics in a labeled info card format.

Import

import { MinerInfoCard } from '@mdk/foundation'

Props

InfoItem type

type InfoItem = {
  title?: string
  value?: string | string[] | number
}

Basic usage

<MinerInfoCard
  label="Miner Details"
  data={[
    { title: 'Model', value: 'Antminer S19 Pro' },
    { title: 'Serial', value: 'ANT-2024-00142' },
    { title: 'Firmware', value: '2.1.3' },
    { title: 'IP Address', value: '192.168.1.42' },
  ]}
/>

With array values

<MinerInfoCard
  data={[
    { title: 'Pool URLs', value: ['stratum://pool1.example.com:3333', 'stratum://pool2.example.com:3333'] },
    { title: 'Workers', value: ['worker1', 'worker2', 'worker3'] },
  ]}
/>

Styling

• .mdk-miner-info-card: Root element
• .mdk-miner-info-card__label: Header label
• .mdk-info-container: Individual info item
• .mdk-info-container__title: Item title
• .mdk-info-container__value: Item value

MinerControlsCard

Miner power mode and control panel with reboot, LED controls, frequency settings, and maintenance operations.

Import

import { MinerControlsCard } from '@mdk/foundation'

Props

Basic usage

<MinerControlsCard
  buttonsStates={{
    isSetUpFrequencyButtonDisabled: false,
  }}
  isLoading={false}
/>

Without power mode selector

<MinerControlsCard
  buttonsStates={buttonsStates}
  isLoading={isLoading}
  showPowerModeSelector={false}
/>

Available controls

The component provides these control buttons:

• Power mode selector: Normal, Low Power, High Performance modes
• Reboot: Restart the selected miners
• Setup Frequency Settings: Configure hashboard frequency
• LEDs on/off: Toggle miner LED indicators
• Move to Maintenance: Move miner to maintenance container
• Change miner info: Edit miner metadata
• Change position: Relocate miner to different container/position

Styling

• .mdk-miner-controls: Root element
• .mdk-miner-controls__label: Header label
• .mdk-miner-controls__content: Controls container
• .mdk-miner-controls__grid: Button grid layout
• .mdk-miner-controls__full-width: Full-width button
• .mdk-miner-controls__loader: Loading spinner
• .mdk-miner-controls__maintenance-stack: Maintenance mode buttons
• .mdk-miner-controls__single-device-stack: Single device actions

SingleStatCard

Single metric display card with optional flash animation for alerts.

Import

import { SingleStatCard } from '@mdk/foundation'

Props

Basic usage

<SingleStatCard name="Temperature" value={42} unit="°C" />
<SingleStatCard name="Hashrate" value="95.5" unit="TH/s" />
<SingleStatCard name="Uptime" value="99.7" unit="%" />

With variants

<SingleStatCard
  name="Temperature"
  value={42}
  unit="°C"
  variant="primary"
/>
<SingleStatCard
  name="Fan Speed"
  value={4200}
  unit="RPM"
  variant="secondary"
/>
<SingleStatCard
  name="Power"
  value={3250}
  unit="W"
  variant="tertiary"
/>

Alert with flash

<SingleStatCard
  name="Temperature"
  value={92}
  unit="°C"
  color="red"
  flash
/>
<SingleStatCard
  name="Critical Alert"
  value="Overheat"
  color="#ff0000"
  superflash
/>

Row layout

<SingleStatCard
  name="Efficiency"
  value="32.5"
  unit="J/TH"
  row
/>

Styling

• .mdk-single-stat-card: Root element
• .mdk-single-stat-card--primary: Primary variant
• .mdk-single-stat-card--secondary: Secondary variant
• .mdk-single-stat-card--tertiary: Tertiary variant
• .mdk-single-stat-card--flash: Flash animation modifier
• .mdk-single-stat-card--superflash: Fast flash animation
• .mdk-single-stat-card--row: Row layout modifier
• .mdk-single-stat-card--long-value: Long value formatting
• .mdk-single-stat-card__name: Stat name
• .mdk-single-stat-card__subtitle: Subtitle text
• .mdk-single-stat-card__value: Stat value

MinerChipsCard

Displays ASIC chip temperature and frequency data for each hashboard.

Import

import { MinerChipsCard } from '@mdk/foundation'

Props

ContainerStats chip data structure

type ContainerStats = {
  frequency_mhz?: {
    chips?: { index: number; current: number }[]
  }
  temperature_c?: {
    chips?: { index: number; max: number; min: number; avg: number }[]
  }
}

Basic usage

<MinerChipsCard
  data={{
    frequency_mhz: {
      chips: [
        { index: 0, current: 500 },
        { index: 1, current: 498 },
      ],
    },
    temperature_c: {
      chips: [
        { index: 0, max: 72, min: 65, avg: 68 },
        { index: 1, max: 70, min: 63, avg: 66 },
      ],
    },
  }}
/>

Styling

• .mdk-miner-chips-card: Root element
• .mdk-miner-chips-card__label: "Chips" label
• .mdk-miner-chips-card__chips: Chips container

MinerPowerModeSelectionButtons

Power mode selector that groups miners by model type and provides mode selection dropdown.

Import

import { MinerPowerModeSelectionButtons } from '@mdk/foundation'

Props

Basic usage

<MinerPowerModeSelectionButtons
  selectedDevices={selectedMiners}
  setPowerMode={(devices, mode) => {
    console.log('Set power mode:', mode, 'for', devices.length, 'miners')
  }}
/>

With connected miners

<MinerPowerModeSelectionButtons
  selectedDevices={selectedMiners}
  connectedMiners={allMiners}
  setPowerMode={handlePowerModeChange}
  disabled={isLoading}
/>

Styling

• .mdk-miner-power-mode-selection-buttons: Root element
• .mdk-miner-power-mode-selection-buttons--with-margin: Margin modifier

MinersActivityChart

Displays miner activity status with color-coded indicators for online, offline, warning states.

Import

import { MinersActivityChart } from '@mdk/foundation'

Props

MinersActivityData type

type MinersActivityData = {
  total?: number
  online?: number
  offline?: number
  warning?: number
  // Additional status keys as needed
}

Basic usage

<MinersActivityChart
  data={{
    total: 100,
    online: 85,
    offline: 10,
    warning: 5,
  }}
/>

Large variant

<MinersActivityChart
  data={activityData}
  large
  showLabel
/>

Loading and error states

<MinersActivityChart isLoading />

<MinersActivityChart
  isError
  error={{ data: { message: 'Failed to fetch activity data' } }}
/>

Styling

• .mdk-miners-activity-chart__root: Root element
• .mdk-miners-activity-chart__item: Individual indicator item
• .mdk-miners-activity-chart__item--large: Large variant
• .mdk-miners-activity-chart__label: Status label text
• .mdk-miners-activity-chart__label--large: Large label variant
• .mdk-miners-activity-chart__spinner: Loading spinner
• .mdk-miners-activity-chart__spinner--large: Large spinner

SecondaryStatCard

Simple secondary statistic display with name and value.

Import

import { SecondaryStatCard } from '@mdk/foundation'

Props

Basic usage

<SecondaryStatCard name="Hashrate" value="95.5 TH/s" />
<SecondaryStatCard name="Uptime" value={99.8} />
<SecondaryStatCard name="Efficiency" value="92%" />

Styling

• .mdk-secondary-stat-card: Root element
• .mdk-secondary-stat-card__name: Stat name
• .mdk-secondary-stat-card__value: Stat value

StatsGroupCard

Aggregated statistics display for selected miners with primary and secondary stat rows.

Import

import { StatsGroupCard } from '@mdk/foundation'

Props

Basic usage

<StatsGroupCard miners={selectedMiners} />

With miner metrics layout

<StatsGroupCard isMinerMetrics />

Displayed statistics

Primary stats (always shown):

• Hash rate (aggregated)
• Temperature (max)
• Frequency (average)
• Consumption (total, if available)
• Efficiency (calculated, if consumption available)

Secondary stats (single miner only):

• Power mode
• Uptime
• LED status
• Status

Styling

• .mdk-stats-group-card: Root element
• .mdk-stats-group-card__row: Stats row container