Assign pool
Modal dialog for bulk-assigning selected miners to a pool configuration
@tetherto/mdk-react-devkit/foundation
AssignPoolModal opens from the miner explorer to let operators assign a configured pool to one or more selected miners. It shows the selected miner list, a pool selector with live metadata, an endpoints preview, and an optional credential template preview. Submission is async; the modal stays open with a loading state until the parent resolves.
For the miner selection surface see Miner explorer. For pool authoring see Pools.
Prerequisites
- Complete the @tetherto/mdk-react-devkit installation and add the dependency
<MdkProvider>from@tetherto/mdk-react-adapterwithuseActions()wired up- Pool configuration data (
PoolConfigData[]) sourced from your API layer
Components
| Component | Description |
|---|---|
AssignPoolModal | Modal dialog for assigning a pool to selected miners |
AssignPoolModal
Dialog that lists available pools and assigns the selected one to a set of miners via the MDK adapter store.
Import
import { AssignPoolModal } from '@tetherto/mdk-react-devkit/foundation'
import type { AssignPoolModalProps, PoolConfigData, PoolSummary } from '@tetherto/mdk-react-devkit/foundation'Props
| Prop | Status | Type | Default | Description |
|---|---|---|---|---|
isOpen | Required | boolean | none | Controls dialog visibility |
onClose | Required | function | none | Called when the user cancels or closes the dialog |
onSubmit | Required | function | none | Async handler called on form submission; modal stays open with a loading state until the promise resolves |
miners | Required | Device[] | none | Selected miners to assign; displayed in the miner summary table |
poolConfig | Required | PoolConfigData[] | none | Pool configuration data from your API layer |
PoolConfigData type
The input shape passed to poolConfig. Each entry maps to one option in the pool selector.
type PoolConfigData = {
id: string
poolConfigName: string
description: string
poolUrls: Array<{
url: string
pool: string
workerName?: string
workerPassword?: string
}>
miners: number
containers: number
updatedAt: string | number // Unix timestamp (ms) or ISO string
}PoolSummary type
The resolved pool object passed back through onSubmit.
type PoolSummary = {
id: string
name: string
description: string
units: number
miners: number
workerName: string | undefined
workerPassword: string | undefined
endpoints: PoolEndpoint[]
validation?: { status: string }
updatedAt: Date
}
type PoolEndpoint = {
role?: string // Primary, Failover, etc.
host: string
port: string
pool: string
url?: string
}Basic usage
import { useState } from 'react'
import { AssignPoolModal } from '@tetherto/mdk-react-devkit/foundation'
import type { Device, PoolConfigData, PoolSummary } from '@tetherto/mdk-react-devkit/foundation'
const poolConfig: PoolConfigData[] = [
{
id: 'pool-1',
poolConfigName: 'Alpha Pool',
description: 'Primary pool with failover',
poolUrls: [
{ url: 'stratum+tcp://pool-primary.example.com:3333', pool: 'pool1', workerName: 'wn-1', workerPassword: 'x' },
{ url: 'stratum+tcp://pool-failover.example.com:3333', pool: 'pool1', workerName: 'wn-1', workerPassword: 'x' },
],
miners: 120,
containers: 4,
updatedAt: Date.now(),
},
]
export const AssignPoolExample = () => {
const [isOpen, setIsOpen] = useState(false)
const [selectedMiners, setSelectedMiners] = useState<Device[]>([])
const handleSubmit = async ({ pool }: { pool: PoolSummary }) => {
await yourApi.assignMinersToPool(selectedMiners.map(m => m.id), pool.id)
setIsOpen(false)
}
return (
<>
<button onClick={() => setIsOpen(true)}>Assign Pool</button>
<AssignPoolModal
isOpen={isOpen}
onClose={() => setIsOpen(false)}
onSubmit={handleSubmit}
miners={selectedMiners}
poolConfig={poolConfig}
/>
</>
)
}Behaviour
The modal renders three sections:
- Selected miners — a
DataTableshowing each miner's short code, unit, current pool assignment, and status. Row count is shown in the section header. - Choose pool — a
FormSelectdropdown built frompoolConfig. On selection, a metadata row appears showing unit count, miner count, and last-updated time (displayed as a relative string viaintlFormatDistance). Below the metadata, an Endpoints Preview lists each endpoint with its role label (Primary, Failover), host, and port. - Credential template preview (optional) — shown only when the
SHOW_CREDENTIAL_TEMPLATEfeature flag is enabled.
The Assign button is disabled during submission and shows "Assigning…" while the onSubmit promise is pending. The form resets automatically after a successful submission.
A Loader replaces the form body while pool configs are loading; a CoreAlert error is shown if pool config loading fails.
Styling
.mdk-pm-assign-pool-modal: Root dialog element.mdk-pm-assign-pool-modal__body: Form body container.mdk-pm-assign-pool-modal__section: Each labelled content section.mdk-pm-assign-pool-modal__section-header: Section header row (title + optional value).mdk-pm-assign-pool-modal__section-title: Section label text.mdk-pm-assign-pool-modal__section-value: Section summary value (e.g. "3 miners selected").mdk-pm-assign-pool-modal__pool-meta: Metadata row shown after a pool is selected.mdk-pm-assign-pool-modal__endpoints-list: Endpoints preview list container.mdk-pm-assign-pool-modal__endpoint: Single endpoint row.mdk-pm-assign-pool-modal__endpoint-role: Endpoint role label wrapper.mdk-pm-assign-pool-modal__endpoint-role-name: Role label text.mdk-pm-assign-pool-modal__endpoint-fields: Host and port fields wrapper.mdk-pm-assign-pool-modal__endpoint-host: Endpoint hostname.mdk-pm-assign-pool-modal__endpoint-port: Endpoint port.mdk-pm-assign-pool-modal__credential-template: Credential template preview section.mdk-pm-assign-pool-modal__footer: Dialog footer containing Cancel and Assign buttons