PoolManagerSitesOverview

Pool-manager sites overview page — landing screen listing every site as a status card with a snapshot of pools, miners online, hashrate, and any active incid…

Pool-manager sites overview page — landing screen listing every site as a status card with a snapshot of pools, miners online, hashrate, and any active incidents. Each card navigates to the site detail page.

Renders its own loading / empty / error states; safe to render without external guarding.

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

Prop	Status	Type	Default	Description
`units`	Required	`ProcessedContainerUnit[]`	—	Sites to render (already normalised through `useSitesOverviewData`).
`poolConfig`	Required	`PoolConfigEntry[]`	—	Pool configurations powering each card's pool summary.
`isLoading`	Optional	`boolean \| undefined`	—	Show a skeleton placeholder while site data is fetching.
`error`	Optional	`unknown`	—	Surface a "could not load sites" message when defined.
`backButtonClick`	Required	`VoidFunction`	—	Called when the operator clicks the "Pool Manager" back link.
`onCardClick`	Required	`(unitId: string) => void`	—	Called with the clicked unit id — typically navigates to `/sites/:id`.

Usage

Pool-manager sites overview page: landing screen listing every site as a status card with a snapshot of pools, miners online, hashrate, and active incidents. Each card navigates to the site detail page.

Use this as the /pool-manager/sites route. For just the card list primitive, drop down to SitesOverviewStatusCardList.

Data contracts

ProcessedContainerUnit — produced by the useSitesOverviewData hook in foundation/components/pool-manager/hooks/use-sites-overview-data.
PoolConfigData — exported from @tetherto/mdk-react-devkit.

Notes

The page renders loading / error / empty states internally; you only need to forward the appropriate flags from your data hook.
The component has no internal data fetching — wire it to your data hook of choice (e.g. useSitesOverviewData + TanStack Query) and forward the resulting units, isLoading, and error.

Example

/** * Runnable example for PoolManagerSitesOverview. * * Wire `units` to your data hook of choice (e.g. `useSitesOverviewData` + * TanStack Query) — the component renders loading / error / empty states * internally. */import { PoolManagerSitesOverview } from '@tetherto/mdk-react-devkit'import type { PoolConfigData } from '@tetherto/mdk-react-devkit'const mockUnits = [  {    id: 'site-eu-01',    name: 'EU Site 01',    miners: 1024,    minersOnline: 998,    hashrateMhs: 102_400,    activeIncidents: 2,    pools: [{ id: 'pool-eu', name: 'EU primary', priority: 1 }],  },  {    id: 'site-us-01',    name: 'US Site 01',    miners: 512,    minersOnline: 512,    hashrateMhs: 53_200,    activeIncidents: 0,    pools: [{ id: 'pool-us', name: 'US primary', priority: 1 }],  },] as neverconst mockPools = [  { id: 'pool-eu', name: 'EU primary', priority: 1 } as unknown as PoolConfigData,  { id: 'pool-us', name: 'US primary', priority: 1 } as unknown as PoolConfigData,]export const PoolManagerSitesOverviewExample = () => {  return (    <PoolManagerSitesOverview      units={mockUnits}      poolConfig={mockPools}      backButtonClick={() => {        // eslint-disable-next-line no-console        console.log('back to pool manager')      }}      onCardClick={(id) => {        // eslint-disable-next-line no-console        console.log(`navigate to site ${id}`)      }}    />  )}