Pool management

Components for displaying mining pool information and managing pool configurations.

Prerequisites

Before using these components, complete the @mdk/foundation installation and add the dependency.

`PoolDetailsCard`

Mining pool configuration display card showing pool details in a labeled list format.

Import

import { PoolDetailsCard } from '@mdk/foundation'

Props

Prop	Type	Default	Description
`details`	`PoolDetailItem[]`	required	Array of pool detail items
`label`	`string`	none	Card header label
`underline`	`boolean`	`false`	Add underline to header
`className`	`string`	none	Additional CSS class

`PoolDetailItem` type

type PoolDetailItem = {
  title: string
  value?: string | number
}

Basic usage

<PoolDetailsCard
  label="Pool Configuration"
  details={[
    { title: 'Pool URL', value: 'stratum+tcp://pool.example.com:3333' },
    { title: 'Worker', value: 'worker001' },
    { title: 'Algorithm', value: 'SHA-256' },
  ]}
/>

With underline

<PoolDetailsCard
  label="Primary Pool"
  underline
  details={[
    { title: 'URL', value: 'stratum://pool1.example.com:3333' },
    { title: 'Status', value: 'Active' },
    { title: 'Hashrate', value: '95.2 TH/s' },
    { title: 'Accepted', value: 12847 },
    { title: 'Rejected', value: 23 },
  ]}
/>

Empty state

When details is an empty array, displays "No data available":

<PoolDetailsCard
  label="Backup Pool"
  details={[]}
/>

Styling

.mdk-pool-details-card: Root element
.mdk-pool-details-card__header: Header container
.mdk-pool-details-card__header--underline: Underlined header modifier
.mdk-pool-details-card__label: Header label text
.mdk-pool-details-card__list: Details list container
.mdk-pool-details-card__item: Individual detail row
.mdk-pool-details-card__item-title: Detail title
.mdk-pool-details-card__item-value: Detail value
.mdk-pool-details-card__empty: Empty state container

`PoolDetailsPopover`

Button that opens a dialog popover displaying pool details using PoolDetailsCard.

Import

import { PoolDetailsPopover } from '@mdk/foundation'

Props

Prop	Type	Default	Description
`details`	`PoolDetailItem[]`	required	Array of pool detail items
`title`	`string`	none	Dialog title
`description`	`string`	none	Dialog description
`triggerLabel`	`string`	none	Button label text
`disabled`	`boolean`	`false`	Disable the trigger button
`className`	`string`	none	Additional CSS class

Basic usage

<PoolDetailsPopover
  triggerLabel="View Pool Details"
  title="Primary Pool"
  details={[
    { title: 'URL', value: 'stratum://pool.example.com:3333' },
    { title: 'Worker', value: 'worker001' },
    { title: 'Status', value: 'Active' },
  ]}
/>

With description

<PoolDetailsPopover
  triggerLabel="Pool Info"
  title="Pool Configuration"
  description="Current mining pool settings"
  details={poolDetails}
/>

Disabled state

<PoolDetailsPopover
  triggerLabel="View Details"
  details={[]}
  disabled={!hasPoolData}
/>

Styling

.mdk-pool-details-popover: Root element
.mdk-pool-details-popover__body: Dialog body container

`PoolManagerDashboard`

Pool configuration management dashboard with stats, navigation blocks, and recent alerts.

Import

import { PoolManagerDashboard } from '@mdk/foundation'

Props

Prop	Type	Default	Description
`stats`	`DashboardStats`	none	Dashboard statistics
`isStatsLoading`	`boolean`	`false`	Stats loading state
`alerts`	`Alert[]`	`[]`	Recent alerts list
`onNavigationClick`	`(url: string) => void`	required	Navigation handler
`onViewAllAlerts`	`() => void`	required	View all alerts handler

`DashboardStats` type

type StatItem = {
  label: string
  value: number
  type?: 'ERROR' | 'SUCCESS'
  secondaryValue?: string
}

type DashboardStats = {
  items: StatItem[]
}

Basic usage

<PoolManagerDashboard
  stats={{
    items: [
      { label: 'Active Pools', value: 3, type: 'SUCCESS' },
      { label: 'Total Miners', value: 150 },
      { label: 'Offline', value: 2, type: 'ERROR' },
    ],
  }}
  alerts={recentAlerts}
  onNavigationClick={(url) => router.push(url)}
  onViewAllAlerts={() => router.push('/alerts')}
/>

Loading state

<PoolManagerDashboard
  isStatsLoading
  alerts={[]}
  onNavigationClick={handleNav}
  onViewAllAlerts={handleViewAlerts}
/>

Dashboard sections

The component displays:

Stats blocks: Key metrics with optional success/error indicators
Navigation blocks: Quick links to pool management features
Recent alerts: Latest alerts with severity indicators

Styling

.mdk-pm-dashboard: Root element
.mdk-pm-dashboard__stat-blocks: Stats container
.mdk-pm-dashboard__stat-block: Individual stat block
.mdk-pm-dashboard__stat-header: Stat header with label and status
.mdk-pm-dashboard__stat-label: Stat label text
.mdk-pm-dashboard__stat-status: Status indicator
.mdk-pm-dashboard__stat-value-row: Value container
.mdk-pm-dashboard__stat-value: Primary value
.mdk-pm-dashboard__stat-secondary: Secondary value
.mdk-pm-dashboard__nav-blocks: Navigation blocks container
.mdk-pm-dashboard__nav-block: Individual navigation block
.mdk-pm-dashboard__nav-header: Block header with icon
.mdk-pm-dashboard__nav-icon: Block icon
.mdk-pm-dashboard__nav-title: Block title
.mdk-pm-dashboard__nav-description: Block description
.mdk-pm-dashboard__nav-action: Action button
.mdk-pm-dashboard__alerts-wrapper: Alerts section container
.mdk-pm-dashboard__alerts-title: Alerts heading
.mdk-pm-dashboard__alerts: Alerts list
.mdk-pm-dashboard__alert-row: Individual alert row
.mdk-pm-dashboard__alert-text: Alert text content
.mdk-pm-dashboard__alert-status: Alert severity indicator
.mdk-pm-dashboard__alerts-empty: Empty alerts message

Pool management

On this page