MDK Logo
UI Kitreact-devkitComponentsFoundationWidgets

MinersSummaryBox

Headline card summarising miner counts by state (online, offline, faulted) for one container. Displays mining summary parameters in a 2-column grid layout. A…

Headline card summarising miner counts by state (online, offline, faulted) for one container.

Displays mining summary parameters in a 2-column grid layout. Accepts pre-formatted values - consumers handle data formatting.

import { MinersSummaryBox } from "@tetherto/mdk-react-devkit";
PropStatusTypeDefaultDescription
paramsRequiredMinersSummaryParam[]Array of label-value pairs to display in a 2-column grid
classNameOptionalstring | undefinedAdditional CSS class name

Usage

Headline card that summarises miner statistics (hash rate, efficiency, temperature) for one container in a 2-column grid. Accepts pre-formatted value strings so no numeric formatting is done inside the component.

Minimal example

import { MinersSummaryBox } from "@tetherto/mdk-react-devkit";

<MinersSummaryBox
  params={[
    { label: "Hash Rate", value: "1.24 PH/s" },
    { label: "Efficiency", value: "32.5 W/TH/s" },
    { label: "Max Temp", value: "72 °C" },
    { label: "Online", value: "47 / 50" },
  ]}
/>

Example

import { MinersSummaryBox } from '@tetherto/mdk-react-devkit'export const MinersSummaryBoxExample = () => (  <div className="mdk-example-row">    <MinersSummaryBox      params={[        { label: 'Hash Rate', value: '1.24 PH/s' },        { label: 'Efficiency', value: '32.5 W/TH/s' },        { label: 'Max Temp', value: '72 °C' },        { label: 'Online', value: '47 / 50' },      ]}    />  </div>)