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";| Prop | Status | Type | Default | Description |
|---|---|---|---|---|
label | Optional | string | — | Override the card title — defaults to `Mining Pools`. |
hideHeader | Optional | boolean | — | Hide the title row entirely. |
isLoading | Optional | boolean | — | Loading state — renders skeleton rows. |
skeletonRows | Optional | number | — | Number of skeleton rows to show while loading. |
emptyMessage | Optional | string | — | Message shown when `rows` is empty. |
rows | Optional | MiningPoolRow[] | — | Pool rows, in display order. |
onShowDetails | Optional | (row: MiningPoolRow) => void | — | Called when the user clicks the per-row "Show details" button. |
className | Optional | string | — | Extra 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.detailsis 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} />