PoolManager

Composite Pool Manager surface. Owns internal, state-based view switching across the dashboard and the four feature views (Pools, Miner Explorer, Sites Overv…

Composite Pool Manager surface. Owns internal, state-based view switching across the dashboard and the four feature views (Pools, Miner Explorer, Sites Overview, Site Detail) so the whole experience resolves to a single route for mdk-ui add page. Receives all data as props — the shell page is thin glue that reads the adapter hooks and passes them down.

Actions staged from any sub-view (create/edit pool, assign miners) are reviewed via the global {@link ActionsSidebar} mounted in App.tsx, opened by the PendingActionsButton in the header toolbar.

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

Prop	Status	Type	Default	Description
`poolConfig`	Required	`PoolConfigEntry[]`	—	Pool configurations shared by every sub-view (Pools, Miner Explorer, Sites).
`stats`	Optional	`DashboardStats \| undefined`	—	Dashboard site-level stat blocks.
`isStatsLoading`	Optional	`boolean \| undefined`	—	Dashboard stats loading flag.
`alerts`	Optional	`Alert[] \| undefined`	—	Recent alerts for the dashboard list.
`onViewAllAlerts`	Optional	`VoidFunction \| undefined`	—	Dashboard "View All Alerts" handler (e.g. navigate to `/alerts`).
`miners`	Optional	`ListThingsDevice[] \| undefined`	—	Miners for the Miner Explorer view.
`units`	Optional	`ProcessedContainerUnit[] \| undefined`	—	Normalised site units for the Sites Overview view.
`isSitesLoading`	Optional	`boolean \| undefined`	—	Sites Overview loading flag.
`sitesError`	Optional	`unknown`	—	Sites Overview error.
`siteDevices`	Optional	`ContainerUnit[] \| undefined`	—	Raw container devices used to resolve the selected unit for Site Detail.
`siteDetailDataOptions`	Optional	`SiteOverviewDetailsDataOptions \| undefined`	—	Extra data-fetch knobs forwarded to the Site Detail container.
`isSiteDetailLoading`	Optional	`boolean \| undefined`	—	Site Detail loading flag.
`initialView`	Optional	`PoolManagerView \| undefined`	—	Initial view (defaults to `dashboard`).
`view`	Optional	`PoolManagerView \| undefined`	—	Controlled view — when provided the component syncs its internal state to this value whenever it changes (e.g. driven by a URL query param). Leave undefined to rely solely on `initialView` / internal navigation.
`onViewChange`	Optional	`((view: PoolManagerView) => void) \| undefined`	—	Notified whenever the active view changes (lets the page lazy-fetch).
`onSiteSelect`	Optional	`((unitId: string) => void) \| undefined`	—	Notified with the selected unit id when a site card is opened.
`className`	Optional	`string \| undefined`	—	—

Usage

Composite Pool Manager surface. Owns internal, state-based view switching across the dashboard and the four feature views (Pools, Miner Explorer, Sites Overview, Site Detail), so the whole experience resolves to a single route. The global ActionsSidebar (mounted in App.tsx) handles writes staged from any sub-view (create/edit pool, assign miners) so they can be submitted to the voting workflow.

All data is supplied via props — the shell page is thin glue that reads the adapter hooks (usePoolConfigsData, useMinerDevices, useSitesOverview, usePoolManagerDashboard) and passes them down.

import { PoolManager } from '@tetherto/mdk-react-devkit'
import {
  useMinerDevices,
  usePoolConfigsData,
  usePoolManagerDashboard,
  useSitesOverview,
} from '@tetherto/mdk-react-adapter'

const PoolManagerPage = () => {
  const { data: poolConfig } = usePoolConfigsData()
  const { data: miners } = useMinerDevices()
  const sites = useSitesOverview()
  const dashboard = usePoolManagerDashboard()

  return (
    <PoolManager
      poolConfig={poolConfig}
      miners={miners}
      units={sites.units}
      isSitesLoading={sites.isLoading}
      sitesError={sites.error}
      stats={dashboard.stats}
      isStatsLoading={dashboard.isLoading}
      alerts={dashboard.alerts}
    />
  )
}

Must be rendered inside <MdkProvider>.

Loading & error states

isStatsLoading, isSitesLoading, and isSiteDetailLoading render the respective sub-views in a loading state; sitesError surfaces a fetch failure on the Sites Overview grid. Forward the adapter hooks' isLoading / error fields straight through.

Controlled vs. uncontrolled view

Uncontrolled — pass only initialView (or nothing) and let <PoolManager> own navigation internally via its dashboard blocks and back buttons.
Controlled — pass view (typically derived from a ?view= URL query param) and handle onViewChange to write it back. The component syncs its internal state to view whenever it changes.

Wiring Site Detail

Site Detail is a transient view opened by clicking a Sites Overview card. Capture the selected unit id via onSiteSelect, then pass siteDetailDataOptions (e.g. the miners assigned to that container) and isSiteDetailLoading so the view shows live data. See templates/mdk-ui-shell/src/pages/PoolManager.tsx for a complete example.

Example

/** * Runnable example for the composite PoolManager. * * Wrap the app in `<MdkProvider>` — the sub-views and the pending-actions tray * use adapter hooks (contextual modal, actions store, voting submit). */import { PoolManager } from '@tetherto/mdk-react-devkit'import type { DashboardStats, PoolConfigData } from '@tetherto/mdk-react-devkit'const mockStats: DashboardStats = {  items: [    { label: 'Active workers', value: 1234 },    { label: 'Hashrate', value: 102.4, secondaryValue: 'TH/s' },    { label: 'Online miners', value: 456, secondaryValue: '/ 512', type: 'SUCCESS' },  ],}const mockPoolConfig: PoolConfigData[] = [  {    id: 'pool-eu',    name: 'EU primary',    url: 'stratum+tcp://eu.example.pool:3333',  } as unknown as PoolConfigData,]export const PoolManagerExample = () => {  return (    <PoolManager      poolConfig={mockPoolConfig}      stats={mockStats}      onViewAllAlerts={() => {        // eslint-disable-next-line no-console        console.log('view all alerts')      }}    />  )}