MDK by Tether

Socket renders a single PDU socket cell used inside container floor plans and detail views. It pairs socket identity with live power and current readouts, reflects miner mount state, and supports an add-miner flow in edit mode.

For the container vendors that compose sockets into larger layouts, see the Containers overview.

Prerequisites

Complete the @mdk/foundation installation and add the dependency
A socket payload: index, enabled flag, optional power_w / current_a,
(Optional) a mounted Miner

`Socket`

Visualizes a single PDU socket with power, current, miner status, cooling fan indicator, and heatmap coloring for temperature or hashrate, plus an add-miner affordance in edit mode.

Import

import { Socket } from '@mdk/foundation'

Props

Prop	Type	Default	Description
`socket`	`number \| null`	`null`	Socket index shown in the cell
`enabled`	`boolean`	`false`	Whether the socket is powered
`selected`	`boolean`	`false`	Applies selected visual state
`current_a`	`number \| null`	`null`	Current draw in amperes
`power_w`	`number \| null`	`null`	Power draw in watts
`miner`	`Miner \| null`	`null`	Miner mounted in the socket
`heatmap`	`Heatmap \| null`	`null`	Heatmap configuration; see type below
`cooling`	`boolean \| undefined`	`undefined`	Shows cooling fan state when set
`isEditFlow`	`boolean`	`false`	Renders the add-miner flow UI
`clickDisabled`	`boolean`	`false`	Disables socket click interactions
`isEmptyPowerDashed`	`boolean`	`false`	Shows zero power with dashed border
`isContainerControlSupported`	`boolean`	`false`	Affects tooltip copy for controls
`pdu`	`{ pdu?: string \| number }`	none	PDU metadata used for `data-pdu-index`
`innerRef`	`ForwardedRef<HTMLDivElement>`	none	Forwarded ref to the root element

`Heatmap` type

type Heatmap = {
  isHeatmapMode?: boolean
  mode?: string       // e.g. 'hashrate' or a temperature field
  ranges?: Record<string, { min?: number; max?: number }>
}

Basic usage

<Socket
  socket={1}
  enabled
  power_w={3250}
  current_a={14.5}
  miner={minerData}
/>

With heatmap

<Socket
  socket={1}
  enabled
  miner={minerData}
  heatmap={{
    isHeatmapMode: true,
    mode: 'chip_avg',
    ranges: { chip_avg: { min: 40, max: 85 } },
  }}
/>

Styling

.mdk-socket: Root element
.mdk-socket--has-cooling: Cooling fan visible
.mdk-socket--heatmap: Heatmap mode active
.mdk-socket--selected: Selected state
.mdk-socket--disabled: Click disabled
.mdk-socket__wrapper: Content wrapper
.mdk-socket__consumption-box: Power and current readouts
.mdk-socket__fan-icon / --on: Cooling fan icon
.mdk-socket__value: Individual power or current cell
.mdk-socket__index: Socket number badge
.mdk-socket__add-icon: Add-miner icon shown in edit flow
.mdk-socket__connection-icon: Clock icon shown while connecting

Socket

On this page