MDK Logo

MiningPoolsPanel

Dashboard card that lists configured mining pools — one row per pool, with revenue, hash rate, and an optional "Show details" action. Pure presentation: the …

Dashboard card that lists configured mining pools — one row per pool, with revenue, hash rate, and an optional "Show details" action.

Pure presentation: the row data + click handler come from props, shaped upstream by usePoolRows (or any caller producing {@link MiningPoolRow}s).

import { MiningPoolsPanel } from "@tetherto/mdk-react-devkit";
PropStatusTypeDefaultDescription
labelOptionalstringOverride the card title — defaults to `Mining Pools`.
hideHeaderOptionalbooleanHide the title row entirely.
isLoadingOptionalbooleanLoading state — renders skeleton rows.
skeletonRowsOptionalnumberNumber of skeleton rows to show while loading.
emptyMessageOptionalstringMessage shown when `rows` is empty.
rowsOptionalMiningPoolRow[]Pool rows, in display order.
onShowDetailsOptional(row: MiningPoolRow) => voidCalled when the user clicks the per-row "Show details" button.
classNameOptionalstringExtra className for the root.

Usage

Dashboard panel listing the site's mining pools — one row per minerpool-<poolType>-shelf-<index> — with 24h BTC revenue, hashrate, and an optional "Show details" popover.

Pair with usePoolRows from @tetherto/mdk-react-adapter; the hook fans out the underlying minerpoolStatsQuery and returns rows pre-shaped for this component.

Data contract

type MiningPoolRow = {
  id: string;             // stable react key
  name: string;           // e.g. "minerpool-f2pool-shelf-0"
  revenue24hBtc?: number; // formatted as "0.0231 BTC" / "0 BTC"
  hashratePhs?: number;   // PH/s; rendered as TH/s when < 1 PH/s
  details?: PoolDetailItem[]; // optional — drives the "Show details" popover
};

Notes

  • The "Show details" button is only rendered when row.details is non-empty.
  • Default popover layout uses the shared <PoolDetailsCard> primitive — the same one consumed by <HeaderActions>'s pool dropdown.

Example

/** * Runnable example for MiningPoolsPanel. * * Pair with `usePoolRows` from `@tetherto/mdk-react-adapter` in production * — the example below uses static rows so it can render outside the * MdkProvider. */import { type MiningPoolRow, MiningPoolsPanel } from '@tetherto/mdk-react-devkit'const rows: MiningPoolRow[] = [  {    id: 'f2pool-shelf-0',    name: 'minerpool-f2pool-shelf-0',    revenue24hBtc: 0.0231,    hashratePhs: 0.901,    details: [      { title: 'Id', value: 'f2pool-shelf-0' },      { title: 'Rack', value: 'R-12' },      { title: 'User name', value: 'operator' },      { title: 'Balance', value: '0.0214 BTC' },      { title: 'Unsettled', value: '0.0017 BTC' },      { title: 'Revenue last 24hrs', value: '0.0231 BTC' },      { title: 'Active Worker Count', value: 24 },    ],  },  {    id: 'ocean-shelf-0',    name: 'minerpool-ocean-shelf-0',    revenue24hBtc: 0.0142,    hashratePhs: 1.21,    details: [      { title: 'Id', value: 'ocean-shelf-0' },      { title: 'Rack', value: 'R-04' },      { title: 'User name', value: 'operator' },      { title: 'Balance', value: '0.0136 BTC' },      { title: 'Unsettled', value: '0.0006 BTC' },      { title: 'Revenue last 24hrs', value: '0.0142 BTC' },      { title: 'Active Worker Count', value: 18 },    ],  },]export const MiningPoolsPanelExample = () => <MiningPoolsPanel rows={rows} />