MDK dashboard

` | `capabilities.telemetry` or `capabilities.commands` must be an array | | `ERR_PLUGIN_ENTRY_NAME_MISSING:

` | Give every telemetry/command entry a non-empty string `name` | | `ERR_PLUGIN_HANDLER_MISSING:

.` | Add that entry's relative `handler` path | | `ERR_PLUGIN_HANDLER_NOT_FOUND:

.: : ` | Verify the displayed resolved path is relative to `plugin.dir`. Preserve and inspect the nested module error: the file may exist while one of its own imports is missing or incompatible | | `ERR_PLUGIN_HANDLER_NOT_FUNCTION:

.: ` | The CommonJS module must assign a function to `module.exports` | | `ERR_PLUGIN_DUPLICATE_NAME:

.` | Rename or remove the duplicate entry in that section | These fire only once a host process constructs `WorkerRuntime` with your plugin — for errors from that point on (runtime construction, Kernel registration, live requests), see [Troubleshooting](/guides/workers/test-a-worker) in Test a Worker with MDK. ## Next steps - Test your new [Worker's integration with MDK](/guides/workers/test-a-worker) - Understand the [security boundaries](/concepts/security-boundaries) Understand the end-user experience of controlling and monitoring your device via the Worker: - Build a [minimal dashboard](/tutorials/quickstart/build-a-dashboard) around one Worker - Run the [full-site example](https://github.com/tetherto/mdk/blob/main/examples/full-site/README.md) with the supported Worker fleet - Connect an [AI agent via the MCP server](https://github.com/tetherto/mdk/blob/main/examples/full-site/docs/mcp-server.md) to query and command your Workers # Test a new Worker with MDK (/guides/workers/test-a-worker) This guide is for users of third-party worker packages or such partners who have integrated their own hardware, firmware, or data feed with MDK by shipping a [Worker plugin package](/guides/workers/build-a-worker). ## Overview Worker packages are the contract between the hardware and the Kernel, before relying on such a contract you will want to test its integration. To seed devices and register with Kernel, host the plugin on `WorkerRuntime` in a Node.js host process. The host module may live in the Worker plugin package itself; a second npm package is **not required**. A separate host directory is recommended when independent plugin publication and plugin-only tests are useful: ```text your-worker-host/ index.js # host module: WorkerRuntime, devices, lifecycle run-live.js # live Kernel registration and compatibility check ``` This mirrors [`examples/backend/demo-worker-caller/`](https://github.com/tetherto/mdk/blob/main/examples/backend/demo-worker-caller/index.js), which is an example directory containing one host module, not a standalone npm package. ## Prerequisites - Node.js `>=24` (all MDK core packages declare this `engines` constraint) - A completed [Worker Plugin package](/guides/workers/build-a-worker), including its bundled mock device - Comfort with plain async JS — no additional MDK framework knowledge is required beyond what building the package already covered ### Install MDK `@tetherto/mdk-worker` (the package that ships `WorkerRuntime`) is **not yet published to the npm registry** — MDK is pre-1.0 and still distributed as this monorepo. Until it is, the working path from an external repo is a git dependency plus a deep `require()` into the checked-out repo, exactly mirroring how every in-repo Worker already resolves it (by relative path, not through `node_modules` package resolution): ```bash npm install github:tetherto/mdk#main ``` This installs the whole monorepo under `node_modules/@tetherto/mdk` (its root `package.json` name). It does **not** auto-install the nested package's own dependencies — this repo's install is a federated set of scripts, not a single root dependency graph — so run its installer once after adding it: ```bash (cd node_modules/@tetherto/mdk/backend/core && ./install-packages.sh) ``` The same deep-path pattern also gets you `getKernel`, `startGateway`, and `waitForDiscovery` from `require('@tetherto/mdk/backend/core/mdk')`, used in Step 3 below. ### Write the host module `host/index.js`, modeled on [`examples/backend/demo-worker-caller/index.js`](https://github.com/tetherto/mdk/blob/main/examples/backend/demo-worker-caller/index.js): ```js "use strict"; const { WorkerRuntime } = require("@tetherto/mdk/backend/core/mdk-worker"); const plugin = require("../your-worker-repo/plugin"); async function startVendorWorker({ workerId, kernelTopic, seedDevices }) { const runtime = new WorkerRuntime(plugin, { workerId, kernelTopic: kernelTopic || null, devices: (seedDevices || []).map((d) => ({ deviceId: d.id, config: d.opts, })), }); await runtime.start(); return { runtime, stop: () => runtime.stop(), }; } module.exports = { startVendorWorker }; ``` Required `WorkerRuntime` options are `workerId` and a non-empty `devices` array. Each `config` object is passed to the plugin's `connect()`. `kernelTopic` is needed only for DHT discovery. Without a `store`, `WorkerRuntime` generates a new RPC keypair on restart. Pass a process-owned store if deployment requires stable identity. The host process also owns persistence, sampling loops, retries, secrets, and shutdown. See the [demo host module](https://github.com/tetherto/mdk/blob/main/examples/backend/demo-worker-caller/index.js) for a SQLite sampler example. `WorkerRuntime` also exposes two read accessors for the host process: `getPublicKey()` returns the runtime's RPC public key (used to register with Kernel, shown in the next step), and `getDeviceContext(deviceId)` returns the same frozen `ctx` a handler receives (`{ deviceId, device, config, services }`) for a device that is currently `online`, or `null` otherwise — useful for wiring an external service (for example, a snapshot collector) to a live device outside the request/response cycle. ### Register directly with a live Kernel When Kernel and the Worker host share a process, register the runtime's public key directly. This complete `host/run-live.js` proves that Kernel accepted the Worker, that it reached `READY`, and that telemetry traverses the real client → Kernel → Worker path: ```js "use strict"; const os = require("os"); const path = require("path"); const { getKernel, waitForDiscovery, shutdown, } = require("@tetherto/mdk/backend/core/mdk"); const { createMdkClient } = require("@tetherto/mdk/backend/core/client"); const { startVendorWorker } = require("./index"); const vendorMock = require("../your-worker-repo/mock/server"); const ROOT = path.join(os.tmpdir(), `vendor-worker-${process.pid}`); function onceListening(mock) { if (mock.server.listening) return Promise.resolve(); return new Promise((resolve) => mock.server.once("listening", resolve)); } function withTimeout(promise, timeoutMs, code) { let timer; const timeout = new Promise((_resolve, reject) => { timer = setTimeout(() => reject(new Error(code)), timeoutMs); }); return Promise.race([promise, timeout]).finally(() => clearTimeout(timer)); } async function main() { let mock; let worker; let kernel; let client; try { mock = vendorMock.createServer({ host: "127.0.0.1", port: 9001, hashrateThs: 200, }); await onceListening(mock); kernel = await getKernel({ root: ROOT }); worker = await startVendorWorker({ workerId: "vendor-demo", seedDevices: [ { id: "vendor-0", opts: { host: "127.0.0.1", port: 9001 } }, ], }); await kernel.registerWorker(worker.runtime.getPublicKey()); const workers = await waitForDiscovery(kernel, { minWorkers: 1, timeoutMs: 30000, }); const ready = workers.find( (w) => w.workerId === "vendor-demo" && w.state === "READY", ); if (!ready || !ready.deviceIds.includes("vendor-0")) { throw new Error("ERR_WORKER_NOT_READY"); } client = createMdkClient({ hrpc: { key: kernel.getPublicKey() } }); await client.connect(); const telemetry = await withTimeout( client.pullTelemetry("vendor-0", "metrics"), 8000, "ERR_TELEMETRY_TIMEOUT", ); if (typeof telemetry.metrics?.hashrate_rt !== "number") { throw new Error("ERR_TELEMETRY_INVALID"); } console.log(`READY ${ready.workerId}: ${ready.deviceIds.join(", ")}`); console.log(`hashrate_rt=${telemetry.metrics.hashrate_rt}`); } finally { if (client) await client.close(); if (kernel) await shutdown(kernel); if (worker) await worker.stop(); if (mock) mock.exit(); } } main().catch((err) => { console.error(err); process.exitCode = 1; }); ``` Expected output: ```text READY vendor-demo: vendor-0 hashrate_rt=200 ``` The timeout wrapper bounds the client's wait but cannot cancel the current HRPC request. Always close the client during shutdown. Device-protocol cancellation is separately owned by the device client from Step 2. ### Use DHT discovery across processes or hosts For DHT discovery, generate and securely distribute one 32-byte hex topic, start the Worker first with `kernelTopic`, then start Kernel with the same `topic`. Do **not** also call `registerWorker()`: ```js "use strict"; const crypto = require("crypto"); const os = require("os"); const path = require("path"); const { getKernel, waitForDiscovery, shutdown, } = require("@tetherto/mdk/backend/core/mdk"); const { startVendorWorker } = require("./index"); const ROOT = path.join(os.tmpdir(), `vendor-worker-dht-${process.pid}`); async function main() { const topic = process.env.MDK_TOPIC || crypto.randomBytes(32).toString("hex"); let worker; let kernel; try { worker = await startVendorWorker({ workerId: "vendor-demo", kernelTopic: topic, seedDevices: [ { id: "vendor-0", opts: { host: "10.0.0.20", port: 9001 } }, ], }); kernel = await getKernel({ root: ROOT, topic }); const workers = await waitForDiscovery(kernel, { minWorkers: 1, timeoutMs: 45000, }); const ready = workers.find( (w) => w.workerId === "vendor-demo" && w.state === "READY", ); if (!ready) throw new Error("ERR_WORKER_NOT_READY"); console.log(`READY ${ready.workerId}: ${ready.deviceIds.join(", ")}`); } finally { if (kernel) await shutdown(kernel); if (worker) await worker.stop(); } } main().catch((err) => { console.error(err); process.exitCode = 1; }); ``` For separate production processes, each process must install signal handlers and close every handle it owns. DHT topics enable rendezvous; they are not authentication secrets or command-authorization tokens. See the [discovery model](/concepts/stack/workers) for DHT, Local, and Same-process trade-offs. ## Troubleshooting ### Runtime construction | Error | Diagnostic and remediation | | --------------------------------- | ----------------------------------------------------------------------------------------------------------------- | | `ERR_WORKER_ID_REQUIRED` | Pass a non-empty string `workerId` | | `ERR_DEVICES_REQUIRED` | Pass a non-empty `devices` array, unless this is an intentional provisioning-first host using `allowEmptyDevices` | | `ERR_DEVICE_ID_MISSING` | Every device spec needs a non-empty string `deviceId` | | `ERR_DEVICE_ID_DUPLICATE: ` | Device IDs must be unique within one runtime | | `ERR_DEVICE_CONFIG_INVALID: ` | `config`, when supplied, must be a non-null object | `allowEmptyDevices` opts a host into a provisioning-first bootstrap: the runtime constructs with zero devices instead of throwing `ERR_DEVICES_REQUIRED`, then takes `registerThing` writes (a built-in command — see [Worker Runtime legacy services](https://github.com/tetherto/mdk/blob/main/docs/reference/maintainers/worker-runtime-legacy-services.md)) that persist new device configs to the store. Those writes only take effect once the host is stopped and restarted with the provisioned set — there is no hot-add. It is off by default; every shipped miner Worker in this monorepo sets it to `true` in its boot function. ### Startup and discovery | Symptom | Diagnostic and remediation | | ------------------------------------------------------------------------------------------------------------------------------------------------------ | | Device remains offline after `runtime.start()` | `connect()` failed. Check the device timeout, credentials, address, protocol, and redacted host logs. The current runtime does not reconnect; restore reachability and restart the Worker host | | `waitForDiscovery()` returns no `READY` Worker | For direct registration, await `runtime.start()` and `kernel.registerWorker(runtime.getPublicKey())`. For DHT, start the Worker first and verify both processes use the same 32-byte hex topic and can reach the DHT network | | Worker is present but never `READY` | Inspect identity and capability failures. Confirm at least one device ID is reported and the contract has valid `metadata` and `capabilities` | ### Request time | Error | Diagnostic and remediation | | ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | | `ERR_DEVICE_UNAVAILABLE: ` | The device was held offline because `connect()` failed; follow the documented restart/recovery path | | `ERR_DEVICE_NOT_FOUND: ` | The request targeted an ID not seeded in this runtime; compare it with the Kernel registry's `deviceIds` | | `ERR_DEVICE_ID_REQUIRED: ` | A named telemetry pull or command omitted its target device ID | | `ERR_UNKNOWN_QUERY_TYPE: ` | Use `metrics` or the exact `name` of a telemetry entry; the entry's return `type` is not its channel name | | `ERR_UNKNOWN_COMMAND: ` | Use the exact declared command name and confirm its handler loaded | | `ERR_UNKNOWN_ACTION: ` | Use a public MDK client helper instead of constructing protocol actions manually | | Command returns `status: 'FAILED'` | Read the stable `ERR_*` value, check validation/cooldown/device logs, and do not retry a timed-out physical write until its actual device state is known | ## Next steps - Understand the [security boundaries](/concepts/security-boundaries) Understand the end-user experience of controlling and monitoring your device via the Worker: - Build a [minimal dashboard](/tutorials/quickstart/build-a-dashboard) around one Worker - Run the [full-site example](https://github.com/tetherto/mdk/blob/main/examples/full-site/README.md) with the supported Worker fleet - Connect an [AI agent via the MCP server](https://github.com/tetherto/mdk/blob/main/examples/full-site/docs/mcp-server.md) to query and command your Workers # Quickstart (/quickstart) } title={Connect hardware} href="/quickstart/connect-hardware" description={ <> Drive a running MDK stack with a mock miner — live telemetry and commands over IPC ⏱️ ~3 min } /> } title={Build dashboards with your AI agent} href="/quickstart/connect-agents" description={ <> Use the CLI to wire Cursor or Claude to MDK with two commands, then build from plain-language prompts ⏱️ ~2 min } /> } title={Build dashboards with React} href="/quickstart/wire-react" description={ <> Install the three MDK React packages and wire MdkProvider ⏱️ ~3 min } /> } title={Explore the demo app} href="/tutorials/ui/explore-the-demo" description={ <> See the UI components rendered in a single demo app ⏱️ ~3 min } /> # Build dashboards with AI (/quickstart/connect-agents) MDK is built so your AI coding agent can build mining dashboards straight from plain-language prompts, without you wiring components by hand. There are two steps: wire your IDE once, then describe what you want. ## Wire your IDE once ### Run init Point the UI CLI at your IDE from your project root: ```bash npx @tetherto/mdk-ui-cli init --ide cursor ``` Use `--ide claude` for Claude. This writes a `.mdk/context.md` agent-context file and an IDE rule (`.cursor/rules/mdk.mdc` for Cursor, `CLAUDE.md` for Claude) so every AI session knows about MDK automatically. ### Prompt your agent Describe the dashboard you want in plain language: > Build me an operations dashboard with live hashrate and a device list. Your agent takes it from there: it finds the right components and hooks, scaffolds the page, and checks that it compiles. You review and run it. ## Next steps

Build any dashboard with an agent Stats Lab walkthrough with UI CLI commands — no fleet backend Runtime agents via MCP Server Monitor and control a live fleet at runtime through the MCP server

- [How agents build with MDK](/concepts/agents): why the results are trustworthy — the local manifests and stable-export contract behind the flow - [UI CLI reference](/reference/app-toolkit/ui-cli): every command your agent (or you) can run - [UI Kit](/reference/ui): browse the component library your agent draws from # Connect hardware (/quickstart/connect-hardware) ## Overview This quickstart walks the shortest path from a fresh clone to a fully wired MDK stack you can drive interactively from a CLI. Everything runs in one Node process, no real hardware required. What you'll have at the end: - A mock Whatsminer M56S serving telemetry on `127.0.0.1:14028` - An ORK with one worker registered and one device discovered - An interactive `client.js` REPL talking to ORK over its IPC socket — pull metrics, list workers, send commands like `reboot` and `setpower` - (Optional) An App Node HTTP API on `:3000` so non-Node consumers (browsers, AI agents over MCP) can hit the same stack over REST The example lives in [`examples/backend/mdk-e2e/`](https://github.com/tetherto/mdk/blob/main/examples/backend/README.md#end-to-end-mdk-e2e) and contains six runnable scripts. This tutorial uses three of them: `run.js` for a smoke test, `server.js` for the long-running stack, and `client.js` for interactive control. ## Prerequisites - Node.js >=24 (LTS) - npm >=11 The stack starts an ORK whose control plane is peer-to-peer over a Hyperswarm DHT, so it needs outbound network access. Without it, the stack stalls at startup while the ORK tries to reach DHT bootstrap nodes. See [how workers connect](/concepts/stack/workers) for the ORK/DHT mechanics. ### Clone and install #### 1.1 Clone the repo ```bash git clone git@github.com:tetherto/mdk.git cd mdk ``` #### 1.2 Install dependencies The monorepo has two workspaces with their own dependency trees. Install both: ```bash backend/core/install-packages.sh ci backend/workers/install-packages.sh ci ``` Each script walks every `package.json` under its workspace and runs `npm ci`. The `examples/mdk-e2e/` package is included automatically — no extra install step needed.

(1.3 Optional) Smoke test the stack

Before going interactive, prove the wiring works. `run.js` starts a mock Whatsminer + worker + ORK in one process, exercises a few queries, prints the results, and exits cleanly: ```bash node examples/backend/mdk-e2e/run.js ``` Expected output (the UUID and metric values vary): ```text Devices: [ '8f3e9a2b-7c1d-4e5a-9f8b-6c2d1e3f4a5b [miner-wm-m56s]' ] Telemetry: ONLINE hashrate=170000 power=3500W Commands: reboot, setPowerMode, setLED, setPowerPct, setupPools, saveComment ``` If you see those three lines, every layer is working: the mock is responding, the worker registered the device, ORK discovered the worker over the local DHT topic, and IPC routing is delivering envelopes both ways. The script tears itself down and exits with code 0. If the smoke test fails with `EADDRINUSE` on port 14028, a previous run left a Node process alive. Kill stragglers with `pkill -f mdk-e2e` and retry.

### Run the interactive demo #### 3.1 Start the stack In your terminal: ```bash node examples/backend/mdk-e2e/server.js ``` `server.js` starts the same mock + worker + ORK as `run.js`, but stays running and prints the IDs you'll need: ```text ORK key: 7a4c8b...e3f0 Device: 8f3e9a2b-7c1d-4e5a-9f8b-6c2d1e3f4a5b hp-rpc-cli -s 7a4c8b...e3f0 -m mdk -d '{...}' hp-rpc-cli -s 7a4c8b...e3f0 -m mdk -d '{...}' Ctrl+C to stop. ``` The `ORK key` is a 64-char hex public key. `Device` is a UUIDv4 generated at registration time. Both vary per run — note the device UUID for the next step. The two `hp-rpc-cli` lines are paste-ready commands for inspecting ORK over HRPC from another machine. You don't need them for this tutorial — they're there if you have [`hp-rpc-cli`](https://github.com/holepunchto/hp-rpc-cli) installed and want to go off-script. #### 3.2 Connect the interactive client Open a second terminal in the same `mdk` directory: ```bash node examples/backend/mdk-e2e/client.js ``` `client.js` connects to ORK's default IPC socket and gives you an MDK REPL: ```text MDK Client — connected to IPC: /tmp/mdk/ork.sock Type "help" for commands, "quit" to exit. mdk> ``` #### 3.3 Drive the stack 3.3.1 Discover the telemetry of your (mock) device by entering commands at the `mdk>` prompt, substituting `` with the UUID printed in Step 3.1: ```text mdk> metrics ``` Each command builds an MDK Protocol envelope, writes it to ORK's IPC socket, and prints the JSON response. 3.3.2 Try changing the power mode and observing the effect: ```text mdk> setpower low mdk> metrics ``` After `setpower ... low` the second `metrics` call should reflect the power mode change. {/* sync with examples/backend/mdk-e2e/client.js help block */}

Full command reference

##### Reads ```text workers — list workers list [deviceId] — list devices count [deviceId] — device count metrics — live telemetry from hardware logs — recent logs settings [deviceId] — worker settings stats [deviceId] — fleet stats config — device config (pools, etc.) capabilities — mdk-contract capabilities state [deviceId] — worker state snapshot ``` ##### Commands ```text reboot — reboot miner setpower — set power mode (normal/low/high) setled [on|off] — toggle LED ``` ```text quit / exit — exit client ```

#### 3.4 Tear down When you're done, exit the client and stop the stack: ```text mdk> quit ``` Then `Ctrl+C` in Terminal 1. ### 4 (Optional) enable App Node for HTTP access In **Terminal 1**, `Ctrl+C` the running stack, then restart with `--app-node`: ```bash node examples/backend/mdk-e2e/server.js --app-node ``` You'll see an extra line in the startup banner: ```text App-node: http://localhost:3000 (noAuth mode) ``` Confirm it's alive — App Node has no index page, so hit `/auth/site` directly: ```bash curl http://localhost:3000/auth/site ``` You should see something like `{"site":"Site_Name"}`. In `noAuth` mode most data endpoints (e.g. `/auth/list-things`, `/auth/miners`) are unavailable — they require the cache and auth config that the full App Node service sets up. `--app-node` in `server.js` is a development shortcut; for full REST access to device telemetry, run App Node as a full service. See [`backend/core/app-node/`](https://github.com/tetherto/mdk/blob/main/backend/core/app-node/README.md) for setup. `--app-node` runs in `noAuth` mode for development convenience. Do not expose port 3000 outside localhost. ## What just happened Your stack wired up, in order: 1. **Mock device**:`server.js` calls `wmMock.createServer({ port: 14028, ... })` — an HTTP server speaking the Whatsminer protocol with canned telemetry. 2. **ORK**: `getOrk()` boots the kernel, generates a random DHT topic, and opens an IPC socket at the default path (`os.tmpdir()/mdk/ork.sock`). 3. **Worker**: `startWorker(WM_M56S, { ork })` instantiates the Whatsminer manager, mounts its protocol adapter, and registers with ORK directly — no DHT round-trip because they share the process. 4. **Thing registration**: `manager.registerThing({ info, opts })` tells the worker about the device at `127.0.0.1:14028`. The worker stores the registration and starts polling. 5. **Client**: `client.js` opens the IPC socket from a second process and sends MDK Protocol envelopes (`worker.list`, `telemetry.pull`, `command.request`, ...). ORK routes them to the worker, the worker hits the mock, and the response flows back over IPC. No Gateway here? Right. Gateway is the translator that lets non-Node consumers — browser UIs, AI agents over MCP — speak MDK Protocol to Kernel. `client.js` already speaks MDK Protocol over IPC, so it talks to Kernel directly. Gateway becomes mandatory only when the consumer can't open a UNIX socket. See [`architecture.md#gateway`](/concepts/architecture#gateway). ## Cleanup `Ctrl+C` in Terminal 1 stops the worker, ORK, and mock cleanly. `run.js` deletes its own state directory on exit. `server.js` leaves data under `os.tmpdir()/mdk/` — safe to ignore, or remove with: ```bash rm -rf "$TMPDIR/mdk" /tmp/mdk ``` ## Next steps - Go deeper and [run the dashboard demo](/tutorials/full-stack/dashboard): put a browser dashboard on a running stack with live charts. - Or go simpler and walk the simpler [single-script Antminer path](/tutorials/backend-stack/run) - Run a [full site (multiple workers and devices):](https://github.com/tetherto/mdk/blob/main/examples/backend/mdk-site/site.js) - Understand the [install pattern for any worker](https://github.com/tetherto/mdk/blob/main/backend/workers/install-pattern.md) - Read all [runnable examples in one place](https://github.com/tetherto/mdk/blob/main/examples/backend/README.md) # Wire React (/quickstart/wire-react) This page walks through the minimum integration of the MDK UI toolkit into a React application. ## Prerequisites - **Node.js** >=24 - **npm** >=11 - **React** 19+ and **react-dom** 19+ {/* npm packages are not yet published to the registry; clone the MDK UI monorepo and use workspace dependencies until publish. */} ## Install ```bash # Clone the MDK UI monorepo (adjust the URL to your fork if needed) git clone https://github.com/tetherto/mdk.git cd mdk/ui # Install dependencies and build packages (npm workspaces) npm install npm run build ``` Then add to your app's `package.json`: ```json { "dependencies": { "@tetherto/mdk-react-devkit": "*", "@tetherto/mdk-react-adapter": "*", "@tetherto/mdk-ui-core": "*" } } ``` [Wrap your app](/quickstart/wire-react) in `` from `@tetherto/mdk-react-adapter` when using connected foundation components or adapter store hooks. > **Coming soon** — npm packages are not yet published. Use the monorepo setup for now. ```bash npm install \ @tetherto/mdk-react-devkit \ @tetherto/mdk-react-adapter \ @tetherto/mdk-ui-core ``` Run `npm install` from the `mdk/ui` workspace root after your app is under `apps/` so npm links workspace packages. ## Wrap your app in MdkProvider `MdkProvider` sets up the TanStack `QueryClient` and the API base URL context. It is required for foundation hooks and components that read shared app state. ```tsx // main.tsx ReactDOM.createRoot(rootElement).render( , ) ``` ## Use the adapter hooks inside React Each hook subscribes the component to the relevant Zustand store and re-renders only when the selected slice changes. ```tsx const Toolbar = () => { const { permissions } = useAuth() const { selectedDevices } = useDevices() const { setAddPendingSubmissionAction } = useActions() // ... } ``` ## Or read / write stores directly outside React The vanilla stores expose `getState()` / `setState()` so utility code, side-effect handlers, and tests can interact with the same source of truth. ```tsx // Outside React (utilities, sagas, etc.) you can read/write directly: devicesStore.getState().setSelectedDevices([]) actionsStore.getState().setAddPendingSubmissionAction({ /* … */ }) ``` ## Theme via design tokens and @layer mdk The compiled stylesheet declares `@layer base`, `mdk`, `app` — so unlayered or `@layer app` styles in your application always win against devkit component styles. MDK ships with `--mdk-color-primary: #f7931a`; override tokens in `:root` only when reskinning. ```css /* app.css — imported AFTER @tetherto/mdk-react-devkit/styles.css */ :root { --mdk-color-primary: #f7931a; --mdk-radius: 6px; } @layer app { .mdk-button--variant-primary { letter-spacing: 0.04em; } } ``` See [Theme](/reference/ui/react/core/theme) for design tokens and `@layer` override rules. ## Next steps - [Tutorial](/tutorials/ui/react/tutorial) — full integration walkthrough - [Hooks](/reference/app-toolkit/hooks) — [state hooks](/reference/app-toolkit/hooks/state), [component hooks](/reference/app-toolkit/hooks/components), and [utility hooks](/reference/app-toolkit/hooks/utilities) - [Explore the demo](/tutorials/ui/explore-the-demo) — run the demo browser without adding MDK to your own app yet - [Core](/reference/ui/react/core) — building block reference (`@tetherto/mdk-react-devkit/core`) - [Foundation](/reference/ui/react/foundation) — mining-domain components (`@tetherto/mdk-react-devkit/foundation`) # Reference (/reference) The Reference section indexes the canonical specs for everything MDK exposes: field semantics, signatures, transition rules, and contracts. Reach for it when you need exact shapes. For narrative explanations, see [Architecture](/concepts/architecture); for step-by-step instructions, see [Get started](/quickstart). ## Browse by stack area ### App Toolkit - **[UI Kit](/reference/app-toolkit/ui-kit)**: constants, hooks, types, and utilities for the React UI Kit - **[UI Core](/reference/app-toolkit/ui-core)**: framework-agnostic headless Zustand stores and TanStack Query factory - **[Hooks](/reference/app-toolkit/hooks)**: complete hook catalog: data, state, component, and utility hooks across the adapter and devkit packages - **[UI CLI](/reference/app-toolkit/ui-cli)**: command reference for the UI CLI (agent registry, scaffold, and verify) ### ORK - **[ORK](/reference/ork)**: kernel module specs, state machines, transition tables, and recovery behavior ### MDK Protocol - **[Protocol](/reference/protocol)**: envelope schema, request/response examples, action catalogue, and base command set - *Capability contract*: coming soon ### Hardware - **[Supported hardware](/reference/supported-hardware)**: miners, containers, power meters, sensors, and mining-pool integrations # Hooks (/reference/app-toolkit/hooks) Complete hook catalog for the MDK App Toolkit, covering hooks from both `@tetherto/mdk-react-adapter` (data, state, utilities) and `@tetherto/mdk-react-devkit` (component hooks). Grouped by what each hook depends on rather than which package ships it — this matches the [Developer entry points](/concepts/stack/app-toolkit#developer-entry-points) model where the adapter and the UI Kit are siblings, so you can adopt only the layers you need. ## At a glance | Bucket | Page | What it covers | Needs | |---|---|---|---| | Components | [Component hooks](/reference/app-toolkit/hooks/components) | Hooks coupled to MDK styled components or shell layout (notifications, forms, charts, dashboards, filters, widgets, tables, reporting) | `@tetherto/mdk-react-devkit` and (for some) `` | | Data | [Data hooks](/reference/app-toolkit/hooks/data) | Adapter hooks that fetch and shape site, pool, dashboard, chart, and auth data | `` from `@tetherto/mdk-react-adapter` | | State | [State hooks](/reference/app-toolkit/hooks/state) | React-bound views of the headless `@tetherto/mdk-ui-core` Zustand stores | `` from `@tetherto/mdk-react-adapter` | | Utilities | [Utility hooks](/reference/app-toolkit/hooks/utilities) | Generic React helpers, mining-domain transforms, permission checks, and TanStack Query re-exports | `@tetherto/mdk-react-adapter` and (for some) `` | ## All hooks ### Components @tetherto/mdk-react-devkit | Sub-group | Hooks | |---|---| | Charts | [`useChartDataCheck`](/reference/app-toolkit/hooks/components#usechartdatacheck), [`useEbitda`](/reference/app-toolkit/hooks/components#useebitda), [`useEnergyBalanceViewModel`](/reference/app-toolkit/hooks/components#useenergybalanceviewmodel) | | Dashboards | [`usePoolConfigs`](/reference/app-toolkit/hooks/components#usepoolconfigs), [`useSiteOverviewDetailsData`](/reference/app-toolkit/hooks/components#usesiteoverviewdetailsdata) | | Filters | [`useReportTimeFrameSelectorState`](/reference/app-toolkit/hooks/components#usereporttimeframeselectorstate), [`useTimeframeControls`](/reference/app-toolkit/hooks/components#usetimeframecontrols) | | Forms | [`useFormField`](/reference/app-toolkit/hooks/components#useformfield), [`useFormReset`](/reference/app-toolkit/hooks/components#useformreset) | | Notifications | [`useNotification`](/reference/app-toolkit/hooks/components#usenotification) | | Reporting | [`useHashrate`](/reference/app-toolkit/hooks/components#usehashrate), [`useEnergyReportSite`](/reference/app-toolkit/hooks/components#useenergyreportsite) | | Shell | [`useHeaderControls`](/reference/app-toolkit/hooks/components#useheadercontrols), [`useSidebarExpandedState`](/reference/app-toolkit/hooks/components#usesidebarexpandedstate), [`useSidebarSectionState`](/reference/app-toolkit/hooks/components#usesidebarsectionstate) | | Tables | [`useGetAvailableDevices`](/reference/app-toolkit/hooks/components#usegetavailabledevices) | | Widgets | [`useFinancialDateRange`](/reference/app-toolkit/hooks/components#usefinancialdaterange) | ### Data @tetherto/mdk-react-adapter | Sub-group | Hooks | |---|---| | Auth and token | [`useAuthToken`](/reference/app-toolkit/hooks/data#useauthtoken), [`useTokenPolling`](/reference/app-toolkit/hooks/data#usetokenpolling) | | Chart data | [`useConsumptionChartData`](/reference/app-toolkit/hooks/data#useconsumptionchartdata), [`useHashrateChartData`](/reference/app-toolkit/hooks/data#usehashratechartdata), [`usePowerModeTimelineData`](/reference/app-toolkit/hooks/data#usepowermodetimelinedata) | | Dashboard | [`useDashboardDateRange`](/reference/app-toolkit/hooks/data#usedashboarddaterange), [`useDashboardExport`](/reference/app-toolkit/hooks/data#usedashboardexport), [`useDashboardTimeRange`](/reference/app-toolkit/hooks/data#usedashboardtimerange) | | Incidents | [`useActiveIncidents`](/reference/app-toolkit/hooks/data#useactiveincidents) | | Pool data | [`usePoolRows`](/reference/app-toolkit/hooks/data#usepoolrows), [`usePoolStats`](/reference/app-toolkit/hooks/data#usepoolstats) | | Site data | [`useSiteConsumption`](/reference/app-toolkit/hooks/data#usesiteconsumption), [`useSiteConsumptionChartData`](/reference/app-toolkit/hooks/data#usesiteconsumptionchartdata), [`useSiteContainerCapacity`](/reference/app-toolkit/hooks/data#usesitecontainercapacity), [`useSiteEfficiency`](/reference/app-toolkit/hooks/data#usesiteefficiency), [`useSiteHashrate`](/reference/app-toolkit/hooks/data#usesitehashrate), [`useSiteMinerCounts`](/reference/app-toolkit/hooks/data#usesiteminercounts), [`useSiteMinerStats`](/reference/app-toolkit/hooks/data#usesiteminerstats), [`useSitePowerMeter`](/reference/app-toolkit/hooks/data#usesitepowermeter), [`useSitesOverviewData`](/reference/app-toolkit/hooks/data#usesitesoverviewdata) | ### State @tetherto/mdk-react-adapter | Hook | Summary | |---|---| | [`useAuth`](/reference/app-toolkit/hooks/state#useauth) | React view of the headless `authStore` (token, permissions) | | [`useDevices`](/reference/app-toolkit/hooks/state#usedevices) | React view of the headless `devicesStore` (device list, selection) | | [`useTimezone`](/reference/app-toolkit/hooks/state#usetimezone) | React view of the headless `timezoneStore` (operator timezone) | | [`useNotifications`](/reference/app-toolkit/hooks/state#usenotifications) | React view of the headless `notificationStore` (unread counter) | | [`useActions`](/reference/app-toolkit/hooks/state#useactions) | React view of the headless `actionsStore` (pending submissions) | ### Utilities @tetherto/mdk-react-adapter + @tetherto/mdk-react-devkit/foundation | Sub-group | Hooks | |---|---| | Device and IP | [`usePduViewer`](/reference/app-toolkit/hooks/utilities#usepduviewer) | | Domain transforms | [`useCostSummary`](/reference/app-toolkit/hooks/utilities#usecostsummary), [`useHashBalance`](/reference/app-toolkit/hooks/utilities#usehashbalance), [`useSubsidyFees`](/reference/app-toolkit/hooks/utilities#usesubsidyfees), [`useUpdateExistedActions`](/reference/app-toolkit/hooks/utilities#useupdateexistedactions) | | Generic React | [`useLocalStorage`](/reference/app-toolkit/hooks/utilities#uselocalstorage), [`useKeyDown`](/reference/app-toolkit/hooks/utilities#usekeydown), [`useWindowSize`](/reference/app-toolkit/hooks/utilities#usewindowsize), [`usePlatform`](/reference/app-toolkit/hooks/utilities#useplatform), [`useDeviceResolution`](/reference/app-toolkit/hooks/utilities#usedeviceresolution), [`useBeepSound`](/reference/app-toolkit/hooks/utilities#usebeepsound), [`usePagination`](/reference/app-toolkit/hooks/utilities#usepagination), [`useSubtractedTime`](/reference/app-toolkit/hooks/utilities#usesubtractedtime), [`useTimezoneFormatter`](/reference/app-toolkit/hooks/utilities#usetimezoneformatter) | | Permissions | [`useCheckPerm`](/reference/app-toolkit/hooks/utilities#usecheckperm), [`useHasPerms`](/reference/app-toolkit/hooks/utilities#usehasperms), [`useIsFeatureEditingEnabled`](/reference/app-toolkit/hooks/utilities#useisfeatureeditingenabled) | | TanStack Query re-exports | [Re-exports table](/reference/app-toolkit/hooks/utilities#tanstack-query-re-exports) | ## Imports ```tsx // Data hooks ``` # Component hooks (/reference/app-toolkit/hooks/components) @tetherto/mdk-react-devkit Hooks that wrap or compose styled MDK components — notifications, sidebar/header shell, forms, filters, widgets, tables, charts, and dashboards. Adopt these when you are using `@tetherto/mdk-react-devkit` for your UI. If you bring your own components, you may not need anything here. Start with [State hooks](/reference/app-toolkit/hooks/state) or [Utility hooks](/reference/app-toolkit/hooks/utilities) instead. ## At a glance | Sub-group | Hooks | |---|---| | [Notifications](#notifications) | `useNotification` | | [Shell](#shell) | `useHeaderControls`, `useSidebarExpandedState`, `useSidebarSectionState` | | [Forms](#forms) | `useFormField`, `useFormReset` | | [Filters](#filters) | `useReportTimeFrameSelectorState`, `useTimeframeControls` | | [Widgets](#widgets) | `useFinancialDateRange` | | [Tables](#tables) | `useGetAvailableDevices` | | [Charts](#charts) | `useChartDataCheck`, `useEbitda`, `useEnergyBalanceViewModel` | | [Dashboards](#dashboards) | `usePoolConfigs`, `useSiteOverviewDetailsData` | | [Reporting](#reporting) | `useOperationsDashboard`, `useHashrate`, `useEnergyReportSite` | ## Prerequisites - Complete the [@tetherto/mdk-react-devkit installation and add the dependency](/reference/ui/react/foundation#prerequisites) - For hooks that read from headless stores (`useNotification`, view-model hooks): [wrap your app in ``](/quickstart/wire-react#wrap-your-app-in-mdkprovider) ## Import ```tsx useChartDataCheck, useEbitda, useEnergyBalanceViewModel, useFinancialDateRange, useGetAvailableDevices, useHeaderControls, useNotification, useOperationsDashboard, usePoolConfigs, useReportTimeFrameSelectorState, useSiteOverviewDetailsData, useTimeframeControls, } from '@tetherto/mdk-react-devkit/foundation' useFormField, useFormReset, useSidebarExpandedState, useSidebarSectionState, } from '@tetherto/mdk-react-devkit/core' ``` ## Notifications ### `useNotification` @tetherto/mdk-react-devkit/foundation Show toast notifications backed by the headless `notificationStore`. Supports success, error, info, and warning variants. ```tsx ``` #### Returns | Member | Type | Description | |--------|------|-------------| | `notifySuccess` | `function` | Show success toast | | `notifyError` | `function` | Show error toast | | `notifyInfo` | `function` | Show info toast | | `notifyWarning` | `function` | Show warning toast | #### Method signature ```tsx notifySuccess(message: string, description?: string, options?: NotificationOptions) ``` #### Options Notification methods accept an optional third `options` argument: | Option | Status | Type | Default | Description | |--------|--------|------|---------|-------------| | `duration` | Optional | `number` | `3000` | Duration in milliseconds (`0` = no autoclose) | | `position` | Optional | `ToastPosition` | `'top-left'` | Toast position on screen | | `dontClose` | Optional | `boolean` | `false` | When `true`, prevents autoclose | #### Example ```tsx function SaveButton() { const { notifySuccess, notifyError } = useNotification() const handleSave = async () => { try { await saveData() notifySuccess('Saved', 'Your changes have been saved.') } catch (error) { notifyError('Error', 'Failed to save changes.', { dontClose: true }) } } return } ``` ## Shell ### `useHeaderControls` @tetherto/mdk-react-devkit/foundation Read/write hook for the global header-controls store (toggles, sticky flag, theme). ```tsx ``` #### Returns | Member | Type | Description | |--------|------|-------------| | `preferences` | `HeaderPreferences` | Current visibility state for each header item | | `isLoading` | `boolean` | Loading state | | `error` | `Error \| null` | Error state | | `handleToggle` | `function` | Toggle a header item visibility | | `handleReset` | `function` | Reset to default preferences | `handleToggle` and `handleReset` both call `notifySuccess` internally. Every invocation produces a toast notification; avoid calling them in response to fast-changing state. #### Example ```tsx function HeaderSettings() { const { preferences, handleToggle, handleReset } = useHeaderControls() return (

{Object.entries(preferences).map(([key, visible]) => ( handleToggle(key, value)} /> ))}

) } ``` ### `useSidebarExpandedState` @tetherto/mdk-react-devkit/core Persist sidebar expanded/collapsed state in `localStorage` so the layout survives reloads. ```tsx ``` #### Example ```tsx function AppSidebar() { const [expanded, setExpanded] = useSidebarExpandedState(false) return ( ) } ``` ### `useSidebarSectionState` @tetherto/mdk-react-devkit/core Persist individual sidebar section open/closed states in `localStorage`. ```tsx ``` #### Example ```tsx function SidebarSection({ id, title, children }) { const [open, setOpen] = useSidebarSectionState(id, true) return (

{open ? children : null}

) } ``` ## Forms ### `useFormField` @tetherto/mdk-react-devkit/core Read-only context hook for form field children — returns the field's id, error state, and ARIA attributes. ```tsx ``` #### Example ```tsx // Custom component that reads field context — must be rendered inside / function FieldStatusDot() { const { invalid, isDirty } = useFormField() return ( ) } ``` ### `useFormReset` @tetherto/mdk-react-devkit/core Hook to handle form reset with callbacks. ```tsx ``` #### Example ```tsx type MinerFields = { name: string; ip: string } function MinerEditForm({ onSubmit }: { onSubmit: (v: MinerFields) => void }) { const form = useForm({ defaultValues: { name: '', ip: '' } }) const { resetForm, isDirty } = useFormReset({ form, onAfterReset: () => console.log('Form reset'), }) return (

) } ``` ## Filters ### `useReportTimeFrameSelectorState` @tetherto/mdk-react-devkit/foundation State hook backing the reporting time-frame selector — exposes the active window and setters. ```tsx ``` #### Example ```tsx function ReportDateBar() { const { start, end, presetTimeFrame, setPresetTimeFrame } = useReportTimeFrameSelectorState() return (

{start.toLocaleDateString()} – {end.toLocaleDateString()}

) } ``` ### `useTimeframeControls` @tetherto/mdk-react-devkit/foundation Core state machine for TimeframeControls — owns year / month / week selection and resolves the date-range output. ```tsx ``` #### Example ```tsx function YearMonthPicker({ dateRange, onRangeChange, onTimeframeTypeChange }) { const { selectedYear, selectedMonth, handleYearChange, handleMonthTreeChange, yearSelectValue, monthSelectValue, } = useTimeframeControls({ dateRange, timeframeType: null, onRangeChange, onTimeframeTypeChange, isWeekSelectVisible: false, weekTree: false, }) return (

) } ``` ## Widgets ### `useFinancialDateRange` @tetherto/mdk-react-devkit/foundation Resolves the active financial date range (start/end) used by every reporting-section query. ```tsx ``` #### Example ```tsx function ReportingToolbar({ timezone }: { timezone: string }) { const { datePicker, dateRange, onDateRangeReset } = useFinancialDateRange({ timezone }) return (

{datePicker} {dateRange && (

{new Date(dateRange.start).toLocaleDateString()} –{' '} {new Date(dateRange.end).toLocaleDateString()}

)}

) } ``` ## Tables ### `useGetAvailableDevices` @tetherto/mdk-react-devkit/foundation Transforms the host's device list into the available container and miner type sets used by device explorer. Pass `data` from your query result. ```tsx ``` #### Example ```tsx function DeviceTypeFilter({ devices }) { const { availableContainerTypes, availableMinerTypes } = useGetAvailableDevices({ data: devices }) return (

) } ``` ## Charts ### `useChartDataCheck` @tetherto/mdk-react-devkit/foundation Check if chart data is empty or unavailable. Returns `true` if empty (show empty state), `false` if data exists (show chart). ```tsx ``` Pass chart input in one of two shapes: 1. **`dataset`**: direct dataset for BarChart-style usage. 2. **`data`**: Chart.js-shaped object with `datasets` (LineChart) or a `dataset` property. Provide at least one of `dataset` or `data` for a meaningful empty check. #### Options | Option | Status | Type | Default | Description | |--------|--------|------|---------|-------------| | `dataset` | Optional | `object \| array` | none | Direct dataset for BarChart; set `dataset` or `data` (at least one) for a meaningful check | | `data` | Optional | `object` | none | Chart.js-shaped object with `datasets` (LineChart) or `dataset` property; set `dataset` or `data` (at least one) | #### Returns | Type | Description | |------|-------------| | `boolean` | `true` if data is empty, `false` if data exists | #### Example ```tsx function HashrateChart({ dataset }) { const isEmpty = useChartDataCheck({ dataset }) if (isEmpty) { return } return } ``` ```tsx function TemperatureChart({ data }) { const isEmpty = useChartDataCheck({ data }) return isEmpty ? ( ) : ( ) } ``` #### Chart utility integration `useChartDataCheck` expects **Chart.js-shaped** `data` (`{ labels, datasets }`), not raw `{ labels, series }` from app hooks. Convert hook output with the **`buildBarChartData` utility** (see [`BarChart`](/reference/ui/react/core/components/charts/BarChart)) from `@tetherto/mdk-react-devkit/core`, then pass the result to **`useChartDataCheck`**. ```tsx function RevenueBarChart({ hookOutput }) { const chartData = buildBarChartData(hookOutput) const isEmpty = useChartDataCheck({ data: chartData }) return ( ) } ``` For the full `BarChartInput` shape, per-dataset `datalabels` merge, and all-zero empty rules, see [`BarChart`](/reference/ui/react/core/components/charts/BarChart). ### `useEbitda` @tetherto/mdk-react-devkit/foundation Transforms an `EbitdaResponse` and date-range options into query params and a chart-ready EBITDA view-model. ```tsx ``` #### Example ```tsx // Wire your query result in; consume queryParams to drive the fetch function EbitdaSection({ ebitdaResponse, isLoading, fetchErrors }) { const { datePicker, dateRange, queryParams, errors } = useEbitda({ ebitda: ebitdaResponse, isLoading, fetchErrors, }) // Pass queryParams to your data-fetching layer whenever the date range changes // e.g. useGetEbitdaQuery(queryParams, { skip: !queryParams }) return (

{datePicker} {errors.length > 0 &&

{errors.join(', ')}

}

) } ``` ### `useEnergyBalanceViewModel` @tetherto/mdk-react-devkit/foundation Computes the full EnergyBalance view model from raw API data, managing tab selection and display-mode state. ```tsx ``` #### Example ```tsx function EnergyBalancePanel({ data, isLoading, fetchErrors, dateRange, availablePowerMW }) { const { viewModel, onTabChange, onRevenueDisplayModeChange } = useEnergyBalanceViewModel({ data, isLoading, fetchErrors, dateRange, availablePowerMW, }) return (

{viewModel.isLoading &&

Loading…

} {viewModel.errors.length > 0 &&

{viewModel.errors.join(', ')}

}

) } ``` ## Dashboards ### `usePoolConfigs` @tetherto/mdk-react-devkit/foundation Transforms raw pool-configuration rows from your API into `PoolSummary` objects for the Pool Manager UI. Fetch with TanStack Query in the host app, then pass `data`, `isLoading`, and `error` into this hook. Typical usage: fetch with TanStack Query in the host app, then pass `data`, `isLoading`, and `error` into this hook. Foundation components such as [`PoolManagerPools`](/reference/ui/react/foundation/components/tables/PoolManagerPools) and [`PoolManagerMinerExplorer`](/reference/ui/react/foundation/components/tables/PoolManagerMinerExplorer) expect data shaped this way. ```tsx ``` #### Options | Option | Status | Type | Default | Description | |--------|--------|------|---------|-------------| | `data` | Optional | `PoolConfigData[]` | none | Raw pool configuration rows from your API | | `isLoading` | Optional | `boolean` | `false` | When `true`, the host should show a loading state | | `error` | Optional | `unknown` | none | Error from your query; surfaced to pool-manager components | #### Returns | Member | Type | Description | |--------|------|-------------| | `pools` | `PoolSummary[]` | Normalized pool list for lists and accordions | | `poolIdMap` | `Record` | Lookup by pool `id` | | `isLoading` | `boolean` | Same as the option you passed in | | `error` | `unknown` | Same as the option you passed in | #### Example ```tsx const { data, isLoading, error } = useGetPoolConfigsQuery({}) return usePoolConfigs({ data, isLoading, error }) } ``` ```tsx function PoolsPage({ poolConfig }: { poolConfig: PoolConfigData[] }) { const { pools, isLoading, error } = usePoolConfigs({ data: poolConfig }) if (isLoading) return if (error) return Failed to load pools return (

{pool.name}

) } ``` ### `useSiteOverviewDetailsData` @tetherto/mdk-react-devkit/foundation Composes the per-site overview view-model: pools, performance series, and recent activity. ```tsx ``` #### Example ```tsx function SiteOverviewCard({ unit, pdus, connectedMiners, isLoading }) { const { containerHashRate, isContainerRunning, minersHashmap, segregatedPduSections, } = useSiteOverviewDetailsData(unit, { pdus, connectedMiners, isLoading }) return (

Hashrate: {containerHashRate}

Status: {isContainerRunning ? 'Running' : 'Offline'}

Miners mapped: {Object.keys(minersHashmap).length}

PDU sections: {Object.keys(segregatedPduSections).join(', ')}

) } ``` ## Reporting ### `useOperationsDashboard` @tetherto/mdk-react-devkit/foundation Shapes raw operational metric logs into chart-ready payloads for the four [`OperationalDashboard`](/reference/ui/react/foundation/components/dashboards/OperationalDashboard) cards. It never fetches — wire your data layer (TanStack Query, RTK Query, fixtures) and pass the results in. All unit conversion and series shaping (MH/s → TH/s, W → MW) happens inside the hook so the dashboard components stay purely presentational. ```tsx ``` #### Options | Option | Status | Type | Default | Description | |--------|--------|------|---------|-------------| | `hashrate` | Optional | `OperationsTrendInput` | none | Hashrate log and loading/error state; `log` entries carry `{ ts, value }` with `value` in MH/s (converted to TH/s internally) | | `consumption` | Optional | `OperationsTrendInput` | none | Power consumption log; `value` in Watts (converted to MW internally) | | `efficiency` | Optional | `OperationsTrendInput` | none | Site efficiency log; `value` in W/TH/s (no conversion) | | `miners` | Optional | `OperationsMinersInput` | none | Per-day miner status counts; `log` entries carry `{ ts, online, error, offline, sleep, maintenance }` | Each `OperationsTrendInput` entry also accepts `nominalValue` (same base unit as `log`) which renders a flat reference line on the chart, and `isLoading` / `error` passed through to the card. #### Returns | Member | Type | Description | |--------|------|-------------| | `hashrate` | `{ data, isLoading, error }` | `LineChartCardData` payload for the hashrate card | | `consumption` | `{ data, isLoading, error }` | `LineChartCardData` payload for the power-consumption card | | `efficiency` | `{ data, isLoading, error }` | `LineChartCardData` payload for the site-efficiency card | | `miners` | `{ data, isLoading, error }` | `{ labels, datasets }` stacked-bar payload for the miners-status card | #### Example ```tsx function OperationsDashboardPage({ hashrateLog, consumptionLog, efficiencyLog, minersLog, isLoading }) { const vm = useOperationsDashboard({ hashrate: { log: hashrateLog, nominalValue: 150_000, isLoading }, consumption: { log: consumptionLog, isLoading }, efficiency: { log: efficiencyLog, isLoading }, miners: { log: minersLog, isLoading }, }) return ( ) } ``` ### `useHashrate` @tetherto/mdk-react-devkit/foundation Base hook for a single Hashrate tab in single-site mode. Normalises a grouped-hashrate query result into the `{ log, isLoading, error }` shape consumed by ``, ``, and ``. Call once per tab — each tab fetches independently because they use different `groupBy` axes. ```tsx ``` #### Options | Option | Status | Type | Default | Description | |--------|--------|------|---------|-------------| | `query` | Optional | `HashrateQueryState` | none | Result of fetching the v2 `/auth/metrics/hashrate?groupBy=…` endpoint. Wire your data layer (TanStack Query, RTK Query, fixtures) and pass the result here — this hook never fetches directly. | #### Returns | Member | Type | Description | |--------|------|-------------| | `log` | `HashrateGroupedLog \| undefined` | Normalised grouped-hashrate log; `undefined` while loading. | | `isLoading` | `boolean` | Loading state from the upstream query. | | `error` | `unknown` | Error from the upstream query, if any. | #### Example ```tsx function HashrateTab({ groupBy }) { const query = useQuery({ queryKey: ['hashrate', groupBy], queryFn: fetchHashrate }) const { log, isLoading, error } = useHashrate({ query }) return } ``` --- ### `useEnergyReportSite` @tetherto/mdk-react-devkit/foundation Merges site energy consumption data (from the v2 `/auth/metrics/consumption` endpoint) with snapshot tail-log and container list data for the Energy report site tab. Returns the combined view-model consumed by the energy report components. ```tsx ``` #### Options | Option | Status | Type | Default | Description | |--------|--------|------|---------|-------------| | `dateRange` | Required | `object` | none | **Required.** Active date range `{ start, end }` in ms epoch. | | `consumptionLog` | Required | `object` | none | **Required.** Raw consumption log from the `/auth/metrics/consumption` response. | | `consumptionLoading` | Required | `boolean` | none | **Required.** Loading state of the consumption query. | | `consumptionFetching` | Required | `boolean` | none | **Required.** Background-refetch state of the consumption query. | | `consumptionError` | Required | `unknown` | none | **Required.** Error state of the consumption query. | | `nominalPowerAvailabilityMw` | Required | `number \| undefined` | none | **Required.** Site nominal power capacity in MW from the nominal config. | | `nominalConfigLoading` | Required | `boolean` | none | **Required.** Loading state of the nominal config query. | | `tailLog` | Required | `object` | none | **Required.** Raw tail-log snapshot data. | | `tailLogLoading` | Required | `boolean` | none | **Required.** Loading state of the tail-log query. | | `containers` | Required | `object[]` | none | **Required.** Container list from the device query. | | `containersLoading` | Required | `boolean` | none | **Required.** Loading state of the container query. | #### Returns Returns a `UseEnergyReportSiteResult` object containing the merged power-consumption view-model, power-mode table rows, and combined loading/error states for each data source. Pass directly to the Energy report site-tab components. # Data hooks (/reference/app-toolkit/hooks/data) @tetherto/mdk-react-adapter TanStack Query–backed hooks that fetch live data from the MDK backend and project it into view-model shapes ready for MDK foundation components. These hooks sit in the adapter layer so that tag names, aggregate field keys, and unit conversions stay out of the devkit component layer. All hooks require [``](/quickstart/wire-react#wrap-your-app-in-mdkprovider) to be mounted in the tree. ## At a glance | Sub-group | Hooks | |---|---| | [Alerts](#alerts) | `useCurrentAlertDevices`, `useHistoricalAlerts` | | [Auth and token](#auth-and-token) | `useAuthToken`, `useTokenPolling` | | [Chart data](#chart-data) | `useConsumptionChartData`, `useHashrateChartData`, `usePowerModeTimelineData` | | [Dashboard](#dashboard) | `useDashboardDateRange`, `useDashboardExport`, `useDashboardTimeRange` | | [Incidents](#incidents) | `useActiveIncidents` | | [Pool data](#pool-data) | `usePoolRows`, `usePoolStats` | | [Site data](#site-data) | `useSiteConsumption`, `useSiteConsumptionChartData`, `useSiteContainerCapacity`, `useSiteEfficiency`, `useSiteHashrate`, `useSiteMinerCounts`, `useSiteMinerStats`, `useSitePowerMeter`, `useSitesOverviewData` | ## Prerequisites - [Wrap your app in ``](/quickstart/wire-react#wrap-your-app-in-mdkprovider) - Complete the [@tetherto/mdk-react-devkit installation and add the dependency](/reference/ui/react/foundation#prerequisites) ## Import ```tsx useActiveIncidents, useAuthToken, useConsumptionChartData, useCurrentAlertDevices, useDashboardDateRange, useDashboardExport, useDashboardTimeRange, useHashrateChartData, useHistoricalAlerts, usePoolRows, usePoolStats, usePowerModeTimelineData, useSiteConsumption, useSiteConsumptionChartData, useSiteContainerCapacity, useSiteEfficiency, useSiteHashrate, useSiteMinerCounts, useSiteMinerStats, useSitePowerMeter, useSitesOverviewData, useTokenPolling, } from '@tetherto/mdk-react-adapter' ``` ## Site data ### `useSitesOverviewData` Projects raw site-overview container rows and pool stats into a ``-ready shape. Each container receives its per-container hashrate in MH/s, an attached pool-stats row, and a `mining` / `offline` status derived from the underlying snapshot. ```tsx ``` #### Options | Option | Status | Type | Default | Description | |--------|--------|------|---------|-------------| | `units` | Required | `ContainerUnit[]` | none | **Required.** Raw container rows from the site overview query. | | `poolStats` | Required | `ContainerPoolStat[]` | none | **Required.** Per-container pool stat rows keyed by container id. | | `isLoading` | Required | `boolean` | none | **Required.** Combined loading state from the upstream queries. | | `tailLogItem` | Required | `SitesOverviewTailLogItem` | none | **Required.** Latest tail-log row from a `stat-1m` miner query; pass `_head(_head(rawResponse))`. | #### Returns | Member | Type | Description | |--------|------|-------------| | `units` | `ProcessedContainerUnit[]` | Processed containers with `hashrateMhs`, `status`, and `poolStats` attached. | | `isLoading` | `boolean` | Passes through the combined loading state from the options. | #### Example ```tsx function SiteOverview({ rawUnits, rawPoolStats, loading, latestTailLog }) { const { units, isLoading } = useSitesOverviewData({ units: rawUnits, poolStats: rawPoolStats, isLoading: loading, tailLogItem: latestTailLog, }) return } ``` ### `useSiteConsumption` Projects the freshest power sample from the dashboard's existing tail-log query into a scalar MW value for the header stats strip (``). Delegates fetching to [`useSiteConsumptionChartData`](#usesiteconsumptionchartdata). ```tsx ``` #### Options Accepts the same `UseConsumptionChartDataParams` object as [`useSiteConsumptionChartData`](#usesiteconsumptionchartdata). | Option | Status | Type | Default | Description | |--------|--------|------|---------|-------------| | `timeline` | Required | `string` | none | **Required.** Stat key suffix, e.g. `'5m'`. | | `start` | Optional | `number` | none | Lower time bound (ms epoch). | | `end` | Optional | `number` | none | Upper time bound (ms epoch). | | `tag` | Optional | `string` | `'t-miner'` | Thing tag. Use `'t-powermeter'` for transformer-level readings. | | `powerAttribute` | Optional | `string` | `'power_w_sum_aggr'` | Aggregate field name to read from the tail-log row. | | `refetchInterval` | Optional | `number` | `60000` | Polling interval in ms. Pass `0` to disable. | #### Returns | Member | Type | Description | |--------|------|-------------| | `valueMw` | `number \| undefined` | Latest aggregate value in MW; `undefined` while loading or with no data. | | `valueW` | `number \| undefined` | Raw backend value in watts. | | `isLoading` | `boolean` | Loading state from the upstream query. | ### `useSiteConsumptionChartData` TanStack Query hook that fetches site consumption tail-log samples and returns a ``-ready `ChartCardData` payload. Applies site-powermeter defaults and converts watts to MW. ```tsx ``` #### Options Same `UseConsumptionChartDataParams` as [`useSiteConsumption`](#usesiteconsumption). #### Returns A TanStack `UseQueryResult` whose `data` field is `ChartCardData` — the object accepted by ``. #### Example ```tsx function ConsumptionChart() { const { data, isLoading } = useSiteConsumptionChartData({ timeline: '5m' }) return } ``` ### `useSiteContainerCapacity` Reads the aggregated nominal miner capacity across all site containers from the 5-minute tail-log aggregate, giving the denominator shown in the header (e.g. the "2,188" in "MOS / 2,188"). ```tsx ``` #### Options | Option | Status | Type | Default | Description | |--------|--------|------|---------|-------------| | `refetchInterval` | Optional | `number` | `300000` | Polling interval in ms. Pass `0` to disable. | #### Returns | Member | Type | Description | |--------|------|-------------| | `value` | `number \| undefined` | Total nominal miner slots across all site containers; `undefined` while loading. | | `isLoading` | `boolean` | Loading state. | ### `useSiteEfficiency` Derives site efficiency in W/TH/s by dividing the latest site consumption by the latest hashrate. Both upstream hooks are called internally; pass `powerW` to override the consumption source (e.g. to use a power-meter reading instead). ```tsx ``` #### Options | Option | Status | Type | Default | Description | |--------|--------|------|---------|-------------| | `timeline` | Required | `string` | none | **Required.** Stat key suffix forwarded to both upstream hooks. | | `start` | Optional | `number` | none | Lower time bound (ms epoch). | | `end` | Optional | `number` | none | Upper time bound (ms epoch). | | `tag` | Optional | `string` | none | Thing tag override forwarded to the consumption hook. | | `powerAttribute` | Optional | `string` | none | Aggregate field override forwarded to the consumption hook. | | `refetchInterval` | Optional | `number` | none | Polling interval in ms forwarded to both upstream hooks. | | `powerW` | Optional | `number` | none | When provided, skips the internal `useSiteConsumption` call and uses this watts value as the numerator directly. Pair with `useSitePowerMeter().valueW` for meter-level efficiency. | #### Returns | Member | Type | Description | |--------|------|-------------| | `valueWthS` | `number \| undefined` | Watts per TH/s; `undefined` while loading or when hashrate is zero. | | `isLoading` | `boolean` | `true` while either upstream hook is loading. | ### `useSiteHashrate` TanStack Query hook that reads the latest aggregate hashrate from the site tail-log and returns both a PH/s display value and the raw MH/s backend value. ```tsx ``` #### Options | Option | Status | Type | Default | Description | |--------|--------|------|---------|-------------| | `timeline` | Required | `string` | none | **Required.** Stat key suffix, e.g. `'5m'`. | | `start` | Optional | `number` | none | Lower time bound (ms epoch). | | `end` | Optional | `number` | none | Upper time bound (ms epoch). | | `refetchInterval` | Optional | `number` | `60000` | Polling interval in ms. Pass `0` to disable. | #### Returns | Member | Type | Description | |--------|------|-------------| | `valuePhs` | `number \| undefined` | Latest aggregate value in PH/s; `undefined` while loading or with no data. | | `valueMhs` | `number \| undefined` | Latest aggregate value in MH/s (raw backend unit). | | `isLoading` | `boolean` | Loading state. | ### `useSiteMinerCounts` Polls the device list for miners and aggregates them into online / offline / error counts. Uses the `last.status` field on each device row. ```tsx ``` #### Options | Option | Status | Type | Default | Description | |--------|--------|------|---------|-------------| | `refetchInterval` | Optional | `number` | none | Polling interval in ms. | #### Returns | Member | Type | Description | |--------|------|-------------| | `total` | `number` | Total miner device count. | | `online` | `number` | Miners with status `online` or `on`. | | `offline` | `number` | Miners not online and not in error. | | `error` | `number` | Miners with status `error` or `alert`. | ### `useSiteMinerStats` Polls the `stat-rtd` realtime aggregate for the live miner stat summary — the MOS total, online/offline breakdown, and active pool worker count shown in the header. ```tsx ``` #### Options | Option | Status | Type | Default | Description | |--------|--------|------|---------|-------------| | `refetchInterval` | Optional | `number` | none | Polling interval in ms. | #### Returns | Member | Type | Description | |--------|------|-------------| | `mosTotal` | `number` | Count of miners that reported hashrate in the last minute (the MOS denominator). | | `online` | `number` | Miners online or with minor errors (green column). | | `offline` | `number` | Offline or sleeping miners. | | `notMining` | `number` | Miners not currently mining. | | `isLoading` | `boolean` | Loading state. | ### `useSitePowerMeter` Reads the current power-meter reading in watts from the site-level device tagged `t-powermeter`. Returns a MW conversion alongside the raw watts value. ```tsx ``` #### Options | Option | Status | Type | Default | Description | |--------|--------|------|---------|-------------| | `tag` | Optional | `string` | `'t-powermeter'` | Device tag to filter by. | | `refetchInterval` | Optional | `number` | none | Polling interval in ms. | #### Returns | Member | Type | Description | |--------|------|-------------| | `valueMw` | `number \| undefined` | Latest power-meter reading in MW; `undefined` when no device or no data. | | `valueW` | `number \| undefined` | Raw value in watts. | | `isLoading` | `boolean` | Loading state. | ## Pool data ### `usePoolRows` TanStack Query hook that fetches per-pool stats and transforms them into `PoolRow[]` objects shaped for the pool manager table. Hashrate is normalised from raw H/s to PH/s. ```tsx ``` #### Options | Option | Status | Type | Default | Description | |--------|--------|------|---------|-------------| | `refetchInterval` | Optional | `number` | `120000` | Polling interval in ms. Pass `0` to disable. | #### Returns A TanStack `UseQueryResult` whose `data` is `PoolRow[]`. | Member | Type | Description | |--------|------|-------------| | `id` | `string` | Stable React key derived from `poolType`. | | `name` | `string` | Display name in Moria style — `minerpool-{poolType}-shelf-0`. | | `poolType` | `string` | Raw pool type string, e.g. `'f2pool'`, `'ocean'`. | | `revenue24hBtc` | `number \| undefined` | 24 h revenue in BTC if reported. | | `hashrateHs` | `number \| undefined` | Hashrate in raw H/s. | | `hashratePhsDisplay` | `number \| undefined` | Hashrate in PH/s for display. | | `details` | `PoolDetail[]` | Array of label/value pairs for the expanded row. | ### `usePoolStats` TanStack Query hook that fetches per-pool stats and aggregates them into site-level totals — total workers, online workers, mismatch count, and aggregate hashrate in PH/s. ```tsx ``` #### Options | Option | Status | Type | Default | Description | |--------|--------|------|---------|-------------| | `refetchInterval` | Optional | `number` | `120000` | Polling interval in ms. Pass `0` to disable. | #### Returns | Member | Type | Description | |--------|------|-------------| | `total` | `number` | Total miners reported across all configured pools. | | `online` | `number` | Pool-reported active workers. | | `mismatch` | `number` | Difference between configured and active workers. | | `hashratePhs` | `number \| undefined` | Aggregate pool hashrate in PH/s; `undefined` while loading or with no data. | | `hashrateHs` | `number \| undefined` | Aggregate pool hashrate in raw H/s. | | `isLoading` | `boolean` | Loading state. | ## Dashboard ### `useDashboardDateRange` Owns the single source of truth for the dashboard's date-range picker: a `start` / `end` ms-epoch pair with setters and a reset helper that restores the default 24-hour window. ```tsx ``` #### Options | Option | Status | Type | Default | Description | |--------|--------|------|---------|-------------| | `initial` | Optional | `{ start: number; end: number }` | last 24 h | Initial date range. Defaults to the last 24 hours ending now. | #### Returns | Member | Type | Description | |--------|------|-------------| | `start` | `number` | Lower bound (ms epoch). | | `end` | `number` | Upper bound (ms epoch). | | `setRange` | `function` | Replace the current range. | | `reset` | `function` | Convenience: restore the default 24-hour window ending now. | #### Example ```tsx function DashboardHeader() { const { start, end, setRange, reset } = useDashboardDateRange() return } ``` ### `useDashboardExport` Reads cached query data for hashrate, consumption, incidents, and pool stats from the TanStack Query client and exposes `exportCsv`, `exportJson`, and a unified `export(format)` callable. Does not trigger refetches — the export represents exactly what is currently displayed. ```tsx ``` #### Options Accepts a `UseDashboardExportOptions` object containing `DashboardQueryRange` fields (`timeline`, `start`, `end`, `tag`) needed to reconstruct the query keys. | Option | Status | Type | Default | Description | |--------|--------|------|---------|-------------| | `timeline` | Required | `string` | none | **Required.** Stat key suffix used to locate the cached chart queries. | | `start` | Optional | `number` | none | Lower time bound (ms epoch). | | `end` | Optional | `number` | none | Upper time bound (ms epoch). | | `tag` | Optional | `string` | none | Thing tag override. | #### Returns | Member | Type | Description | |--------|------|-------------| | `exportCsv` | `function` | Triggers a browser file-download of the dashboard data as CSV. | | `exportJson` | `function` | Triggers a browser file-download as JSON. | | `export` | `function` | Unified callable — `export('csv')` or `export('json')`. | ### `useDashboardTimeRange` Tiny piece of scoped state for the dashboard's timeline selector. Owns the current `timeline` string and the canonical option list. Chart hooks (`useHashrateChartData`, `useSiteConsumptionChartData`, etc.) consume `timeline` as a prop. ```tsx ``` #### Options | Option | Status | Type | Default | Description | |--------|--------|------|---------|-------------| | `initial` | Optional | `string` | `'5m'` | Initial timeline value. | | `options` | Optional | `TimelineOption[]` | canonical list | Custom option list; defaults to the canonical set from `getTimelineOptions`. | #### Returns | Member | Type | Description | |--------|------|-------------| | `timeline` | `string` | Currently selected timeline string, e.g. `'5m'`. | | `options` | `TimelineOption[]` | Available options, ready for ``. | | `setTimeline` | `function` | Setter for the current timeline. | #### Example ```tsx function DashboardControls() { const { timeline, options, setTimeline } = useDashboardTimeRange() const { valuePhs } = useSiteHashrate({ timeline }) return ( <> {valuePhs?.toFixed(2)} PH/s ) } ``` ## Chart data ### `useConsumptionChartData` TanStack Query hook returning raw consumption tail-log samples. Most dashboards should use the higher-level [`useSiteConsumptionChartData`](#usesiteconsumptionchartdata), which wraps this hook and returns a ``-ready payload. ```tsx ``` #### Options | Option | Status | Type | Default | Description | |--------|--------|------|---------|-------------| | `timeline` | Required | `string` | none | **Required.** Stat key suffix, e.g. `'1m'`, `'5m'`. | | `start` | Optional | `number` | none | Lower time bound (ms epoch). | | `end` | Optional | `number` | none | Upper time bound (ms epoch). | | `tag` | Optional | `string` | `'t-miner'` | Thing tag. Use `'t-powermeter'` for transformer-level consumption. | | `powerAttribute` | Optional | `string` | `'power_w_sum_aggr'` | Aggregate field name to read. | | `refetchInterval` | Optional | `number` | `60000` | Polling interval in ms. Pass `0` to disable. | #### Returns A TanStack `UseQueryResult` — raw tail-log matrix before projection. ### `useHashrateChartData` TanStack Query hook combining the site tail-log hashrate series with the per-pool hashrate history into a single `ChartCardData` payload for ``. Handles unit conversion from both MH/s (tail-log) and raw H/s (pool API) into PH/s for display. ```tsx ``` #### Options | Option | Status | Type | Default | Description | |--------|--------|------|---------|-------------| | `timeline` | Required | `string` | none | **Required.** Stat key suffix, e.g. `'5m'`. | | `start` | Optional | `number` | none | Lower time bound (ms epoch). | | `end` | Optional | `number` | none | Upper time bound (ms epoch). | | `refetchInterval` | Optional | `number` | none | Polling interval in ms. | #### Returns A TanStack `UseQueryResult` whose `data` is `ChartCardData` — ready for ``. ### `usePowerModeTimelineData` TanStack Query hook returning power-mode and status samples shaped for ``. ```tsx ``` #### Options | Option | Status | Type | Default | Description | |--------|--------|------|---------|-------------| | `timeline` | Required | `string` | none | **Required.** Stat key suffix, e.g. `'1m'`. | | `start` | Optional | `number` | none | Lower time bound (ms epoch). | | `end` | Optional | `number` | none | Upper time bound (ms epoch). | | `tag` | Optional | `string` | none | Thing tag override. | | `refetchInterval` | Optional | `number` | none | Polling interval in ms. | #### Returns A TanStack `UseQueryResult`. ## Auth and token ### `useAuthToken` Reads `?authToken=…` from `window.location.search`, persists it into the headless `authStore`, and strips the parameter from the URL via `history.replaceState` so the token never lingers in the address bar. Router-agnostic by design. Returns the current token from the store so callers can gate navigation on authentication. ```tsx ``` #### Returns | Type | Description | |------|-------------| | `string \| null` | Current auth token from the `authStore`, or `null` when no token is present. | #### Example ```tsx function ProtectedRoute() { const token = useAuthToken() return token ? : } ``` ### `useTokenPolling` Polls the backend token-refresh endpoint at a fixed interval (default 250 s) and writes the new token back into the `authStore`. Fires the optional `onSessionEnded` callback on a 401 or 500, which MDK UI Shell uses to redirect back to `/signin`. ```tsx ``` #### Options | Option | Status | Type | Default | Description | |--------|--------|------|---------|-------------| | `intervalMs` | Optional | `number` | `250000` | Polling interval in ms. Backend token TTL defaults to 5 min (300 s); 250 s gives comfortable headroom. | | `enabled` | Optional | `boolean` | `true` when token present | Pass `false` to pause polling (e.g. on the sign-in page). | | `onSessionEnded` | Optional | `function` | none | Called on 401 or 500; use to navigate to the sign-in page. | #### Example ```tsx function App() { const navigate = useNavigate() useTokenPolling({ onSessionEnded: () => navigate('/signin') }) return } ``` ## Incidents ### `useActiveIncidents` TanStack Query hook returning the list of currently-firing alerts, shaped for ``. Queries devices that have a non-null `last.alerts` field and maps them via the `mapDevicesToIncidents` utility. ```tsx ``` #### Options | Option | Status | Type | Default | Description | |--------|--------|------|---------|-------------| | `refetchInterval` | Optional | `number` | `20000` | Polling interval in ms. Matches Moria's production cadence. Pass `0` to disable. | | `formatDate` | Optional | `function` | ISO string | Date formatter applied to the row body timestamp. | #### Returns A TanStack `UseQueryResult`. #### Example ```tsx function IncidentsFeed() { const { data: items = [], isLoading } = useActiveIncidents({ refetchInterval: 20_000 }) return } ``` ## Alerts Data hooks that back the full alerts surface: `useCurrentAlertDevices` feeds the `` / `` table with raw device rows; `useHistoricalAlerts` fetches and shapes the historical-alerts log for ``. Both require [``](/quickstart/wire-react#wrap-your-app-in-mdkprovider) in the tree. See also [`useActiveIncidents`](#useactiveincidents) in the Incidents section, which hits the same `list-things` endpoint but maps results to the dashboard card's `IncidentRow[]` shape. ### `useCurrentAlertDevices` TanStack Query hook returning the raw devices that currently carry one or more alerts, as the nested `ListThingsDevice[][]` envelope the devkit `` / `` table expects. Unlike `useActiveIncidents`, this hook leaves the payload unshaped so the table can derive its own filter tokens and per-row status. Both hit `/auth/list-things`; this hook requests a wider field set and uses a distinct cache key. ```tsx ``` #### Options | Option | Status | Type | Default | Description | |--------|--------|------|---------|-------------| | `refetchInterval` | Optional | `number` | `20000` | Polling interval in ms. Matches the default production polling cadence. Pass `0` to disable. | | `filterTags` | Optional | `string[]` | none | Alerts search chips. Folded into the backend `list-things` selector — triggers a re-fetch that narrows the dataset server-side. | #### Returns A TanStack `UseQueryResult`. #### Example ```tsx function AlertsTable({ filterTags }) { const { data, isLoading } = useCurrentAlertDevices({ filterTags }) return } ``` ### `useHistoricalAlerts` TanStack Query hook for the historical-alerts log. Fetches the `[start, end]` range as successive `history-log` windows, merges results by `uuid`, and shapes rows for the devkit `` table via `mapHistoryLogToAlerts`. Range changes abort the in-flight chunk loop through the query's `AbortSignal`. By default the entire range is fetched in a single request. Pass a smaller `intervalMs` (e.g. `ONE_DAY_MS`) only for wide ranges where the backend would otherwise cap or slow a single query — that splits the fetch into sequential 24-hour windows. ```tsx ``` #### Options | Option | Status | Type | Default | Description | |--------|--------|------|---------|-------------| | `start` | Required | `number` | none | Lower bound of the look-back window (ms epoch). | | `end` | Required | `number` | none | Upper bound of the look-back window (ms epoch). | | `intervalMs` | Optional | `number` | whole range | Per-request window size in ms. Defaults to the whole range in one request; set a smaller value to chunk wide ranges into sequential fetches. | | `enabled` | Optional | `boolean` | `true` when range valid | Pass `false` to force-disable the query. Defaults to enabled when `start` and `end` are finite and `end > start`. | #### Returns A TanStack `UseQueryResult`. #### Example ```tsx function AlertHistory({ start, end, filterTags, localFilters, onDateRangeChange }) { const { data: alerts = [], isLoading } = useHistoricalAlerts({ start, end }) return ( ) } ``` #### Behavior notes - Wide ranges fan out into many requests. The MDK UI Shell page caps the default window at 14 days; pass a tighter `[start, end]` or set `intervalMs` to limit per-request payload size. - The hook removes duplicate rows by `uuid` after merging chunks, before passing them to `mapHistoryLogToAlerts`. # State hooks (/reference/app-toolkit/hooks/state) @tetherto/mdk-react-adapter State hooks bind the framework-agnostic [`@tetherto/mdk-ui-core`](/reference/app-toolkit/ui-core) Zustand stores into React. Each hook subscribes the component to its store and re-renders only when the selected slice changes. Use these when you want headless state with your own components. The [Developer entry points](/concepts/stack/app-toolkit#developer-entry-points) table compares adoption layers. ## Prerequisites - [Wrap your app in ``](/quickstart/wire-react#wrap-your-app-in-mdkprovider) - Complete the [@tetherto/mdk-react-devkit installation and add the dependency](/reference/ui/react/foundation#prerequisites) ## Import ```tsx useActions, useAuth, useDevices, useNotifications, useTimezone, } from '@tetherto/mdk-react-adapter' ``` ## `useAuth` @tetherto/mdk-react-adapter React-bound view of the headless [`authStore`](/reference/app-toolkit/ui-core). Exposes `token` and `permissions`; equivalent to `useStore(authStore)` with React subscription semantics. ```tsx ``` ### Example ```tsx function SessionStatus() { const { token } = useAuth() if (!token) return

return

Active session

} ``` ## `useDevices` @tetherto/mdk-react-adapter React-bound view of the headless [`devicesStore`](/reference/app-toolkit/ui-core). Exposes the device list, the currently selected devices, and helpers to mutate selection. ```tsx ``` ### Example ```tsx function DeviceToolbar() { const { selectedDevices, setSelectedDevices } = useDevices() return (

Selected: {selectedDevices.length}

) } ``` ## `useTimezone` @tetherto/mdk-react-adapter React-bound view of the headless [`timezoneStore`](/reference/app-toolkit/ui-core). Read or update the operator's timezone preference (IANA identifier). Use [`useTimezoneFormatter`](/reference/app-toolkit/hooks/utilities#usetimezoneformatter) when you also need date-formatting helpers. ```tsx ``` ### Example ```tsx function TimezonePicker() { const { timezone, setTimezone } = useTimezone() return ( ) } ``` ## `useNotifications` @tetherto/mdk-react-adapter React-bound view of the headless [`notificationStore`](/reference/app-toolkit/ui-core). Exposes the unread counter (`count`) plus `increment`, `decrement`, and `reset`. For the user-facing toast surface use [`useNotification`](/reference/app-toolkit/hooks/components#usenotification) from foundation. ```tsx ``` ### Example ```tsx function UnreadBadge() { const { count } = useNotifications() return } ``` ## `useActions` @tetherto/mdk-react-adapter React-bound view of the headless [`actionsStore`](/reference/app-toolkit/ui-core). Exposes the pending operator submission queue plus helpers like `setAddPendingSubmissionAction` and `removePendingSubmissionAction`. ```tsx ``` ### Example ```tsx function SubmissionTracker() { const { pendingSubmissions, setAddPendingSubmissionAction } = useActions() return (

{pendingSubmissions.length} pending submissions

) } ``` # Utility hooks (/reference/app-toolkit/hooks/utilities) @tetherto/mdk-react-adapter + @tetherto/mdk-react-devkit/foundation Generic React helpers, mining-domain transforms, permission checks, device/IP utilities, and a curated set of TanStack Query re-exports. Use these alongside [State hooks](/reference/app-toolkit/hooks/state) to wire app concerns (permissions, devices, viewport, formatting) without depending on MDK styled components. ## At a glance | Sub-group | Hooks | |---|---| | [Permissions](#permissions) | `useCheckPerm`, `useHasPerms`, `useIsFeatureEditingEnabled` | | [Generic React](#generic-react) | `useLocalStorage`, `useKeyDown`, `useWindowSize`, `usePlatform`, `useDeviceResolution`, `useBeepSound`, `usePagination`, `useSubtractedTime`, `useTimezoneFormatter` | | [Device and IP](#device-and-ip) | `usePduViewer` | | [Domain transforms](#domain-transforms) | `useCostSummary`, `useHashBalance`, `useSubsidyFees`, `useUpdateExistedActions` | | [TanStack Query re-exports](#tanstack-query-re-exports) | `useQuery`, `useMutation`, `useQueries`, `useInfiniteQuery`, `useIsFetching`, `useIsMutating`, `useQueryClient` | ## Prerequisites - [Wrap your app in ``](/quickstart/wire-react#wrap-your-app-in-mdkprovider) - Complete the [@tetherto/mdk-react-devkit installation and add the dependency](/reference/ui/react/foundation#prerequisites) ## Import ```tsx useBeepSound, useCheckPerm, useDeviceResolution, useHasPerms, useIsFeatureEditingEnabled, useKeyDown, useLocalStorage, usePagination, usePduViewer, usePlatform, useSubtractedTime, useTimezoneFormatter, useWindowSize, } from '@tetherto/mdk-react-adapter' useCostSummary, useHashBalance, useSubsidyFees, useUpdateExistedActions, } from '@tetherto/mdk-react-devkit/foundation' ``` ## Permissions ### `useCheckPerm` @tetherto/mdk-react-adapter Check if the current user has a specific permission. Reads `permissions` from the adapter [`authStore`](/reference/app-toolkit/hooks/state#useauth). Prefer this over `useHasPerms` for single-permission gates. ```tsx ``` #### Example ```tsx function EditDevicesButton() { const canEdit = useCheckPerm('devices:edit') return canEdit ? : null } ``` ### `useHasPerms` @tetherto/mdk-react-adapter Returns a callable that accepts a permission request — a string, a string array (first match wins), or a check object. Reads from the adapter [`authStore`](/reference/app-toolkit/hooks/state#useauth). ```tsx ``` #### Example ```tsx function ContextMenu({ device }) { const hasPerms = useHasPerms() return ( {hasPerms(['devices:edit', 'devices:admin']) && Edit} {hasPerms('devices:delete') && Delete} ) } ``` ### `useIsFeatureEditingEnabled` @tetherto/mdk-react-adapter Returns whether the current user has the `features` capability to edit feature flags. ```tsx ``` #### Example ```tsx function FeatureFlagRow({ flag }) { const canEdit = useIsFeatureEditingEnabled() return } ``` ## Generic React ### `useLocalStorage` @tetherto/mdk-react-adapter Type-safe `localStorage` access with cross-tab synchronization. Returns `[value, setValue, removeValue]` and stays in sync across browser tabs via the `storage` event. ```tsx ``` #### Example ```tsx function ThemeToggle() { const [theme, setTheme] = useLocalStorage<'light' | 'dark'>('app:theme', 'light') return } ``` ### `useKeyDown` @tetherto/mdk-react-adapter Track whether a specific keyboard key is currently pressed. Attaches global `keydown`/`keyup` listeners. Useful for modifier-key interactions like shift-click multi-select. ```tsx ``` #### Example ```tsx function MinerGrid({ miners }) { const shiftHeld = useKeyDown('Shift') return miners.map((m) => ( select(m, { range: shiftHeld })} /> )) } ``` ### `useWindowSize` @tetherto/mdk-react-adapter Track window width and height, refreshing on `resize`. Returns `{ windowWidth, windowHeight }`. Use [`useDeviceResolution`](#usedeviceresolution) when you only need a device-class branch rather than raw pixels. ```tsx ``` #### Example ```tsx function ResponsiveChart() { const { windowWidth } = useWindowSize() return } ``` ### `usePlatform` @tetherto/mdk-react-adapter Detect the host platform (iOS, Android, Mac, Windows, Linux) from the user agent. Returns the value matching the exported `OS_TYPES` constant; pair with `detectPlatform` for one-off checks outside React. ```tsx ``` #### Example ```tsx function PlatformBadge() { const platform = usePlatform() return Running on {platform} } ``` ### `useDeviceResolution` @tetherto/mdk-react-adapter Map window width to a device class (`mobile`, `tablet`, `desktop`) using the shared `BREAKPOINTS` constant. Cheaper than re-reading pixels in every render. ```tsx ``` #### Example ```tsx function Layout({ children }) { const device = useDeviceResolution() return device === 'mobile' ? {children} : {children} } ``` ### `useBeepSound` @tetherto/mdk-react-adapter Play a repeating beep when `isAllowed` is true. Configurable volume and interval (`delayMs`). The alarm is synthesised via the Web Audio API — no audio asset is bundled or fetched. Designed for audible critical alerts (overheating containers, equipment failure). ```tsx ``` #### Example ```tsx function CriticalAlertChime({ active }) { useBeepSound({ isAllowed: active, volume: 0.6, delayMs: 1500 }) return null } ``` ### `usePagination` @tetherto/mdk-react-adapter Manage pagination state and produce `{ limit, offset }` query arguments for API calls. Returns state shaped for the devkit `` component plus helpers to change page, page size, and total count. ```tsx ``` #### Options | Option | Status | Type | Default | Description | |--------|--------|------|---------|-------------| | `current` | Optional | `number` | `1` | Initial 1-indexed page | | `pageSize` | Optional | `number` | `20` | Initial rows per page | | `total` | Optional | `number` | none | Initial total row count | | `showSizeChanger` | Optional | `boolean` | `true` | Whether the UI exposes a page-size selector | #### Returns | Member | Type | Description | |--------|------|-------------| | `pagination` | `PaginationState` | `{ current, pageSize, showSizeChanger, total }` — spread onto `` | | `queryArgs` | `{ limit, offset }` | Query arguments for API calls | | `handleChange` | `function` | `(page, pageSize) => void` — pass to `` | | `setPagination` | `function` | Imperative pagination state update | | `reset` | `function` | Reset to initial state | | `setTotal` | `function` | Update total row count | | `hideNextPage` | `function` | Hide next page when the current page has fewer rows than `pageSize` | #### Example ```tsx function MinerList() { const { pagination, queryArgs, handleChange } = usePagination({ current: 1, pageSize: 25 }) const { data } = useQuery(['miners', queryArgs], () => fetchMiners(queryArgs)) return ( <> ) } ``` ### `useSubtractedTime` @tetherto/mdk-react-adapter Returns `Date.now() - diff`, refreshing on a fixed interval (default 5s). Useful for "synced N seconds ago" labels without forcing tree-wide re-renders. ```tsx ``` #### Example ```tsx function LastSyncedLabel({ lastSyncOffsetMs }) { const now = useSubtractedTime(lastSyncOffsetMs) return Synced {formatDistanceToNow(now)} ago } ``` ### `useTimezoneFormatter` @tetherto/mdk-react-adapter Read the app timezone from the adapter [`timezoneStore`](/reference/app-toolkit/hooks/state#usetimezone) and format dates for display. Use when foundation components or app code need timestamps in the operator-selected timezone (alerts, pool manager, dashboard widgets). ```tsx ``` #### Example ```tsx function AlertTimestamp({ raisedAt }) { const { getFormattedDate } = useTimezoneFormatter() return {getFormattedDate(raisedAt)} } ``` ## Device and IP ### `usePduViewer` @tetherto/mdk-react-adapter Pan/zoom controller for the PDU floor-plan viewer. Wraps `react-zoom-pan-pinch` with viewport-aware reset logic and a debounced "back to content" indicator that appears when the user pans the layout off-screen. ```tsx ``` #### Example ```tsx function PduFloorPlan() { const { onViewerInit, showBackToContent, handleBackToContent } = usePduViewer() return ( <> {/* …diagram… */} {showBackToContent && } ) } ``` ## Domain transforms ### `useCostSummary` @tetherto/mdk-react-devkit/foundation Base hook for the cost-summary reporting page (single-site mode). ```tsx ``` #### Example ```tsx // Wire your query result in; consume queryParams to drive the fetch function CostSummaryPage({ query }) { const { datePicker, queryParams, isLoading, error } = useCostSummary({ query }) // Pass queryParams to your data-fetching layer whenever the date range changes // e.g. useGetCostSummaryQuery(queryParams, { skip: !queryParams }) return (

{datePicker} {isLoading &&

Loading…

} {error &&

Failed to load cost data

}

) } ``` ### `useHashBalance` @tetherto/mdk-react-devkit/foundation Derives hash-balance metrics and chart datasets from finance log entries for the active date range, currency, and timeframe type. Used by hash balance panels. ```tsx ``` #### Example ```tsx function HashBalancePanel({ data, log, currency, dateRange }) { const { siteHashRevenueChartData, networkHashpriceChartData, combinedCostChartData, } = useHashBalance({ data, log, currency, dateRange }) return (

{/* Pass chart datasets to your BarChart components */}

{JSON.stringify(siteHashRevenueChartData?.labels, null, 2)}

{JSON.stringify(networkHashpriceChartData?.labels, null, 2)}

{JSON.stringify(combinedCostChartData?.labels, null, 2)}

) } ``` ### `useSubsidyFees` @tetherto/mdk-react-devkit/foundation Aggregates raw subsidy-fee log entries into chart-ready datasets keyed by the active period type (day / week / month / year) and surfaces a summary for the matching reporting widgets. Used by `Subsid… ```tsx ``` #### Example ```tsx function SubsidyFeesPanel({ data, dateRange }) { const { summary, subsidyFeesChartData, averageFeesChartData, isEmpty } = useSubsidyFees({ data, dateRange, }) if (isEmpty) return

No subsidy fee data for this period.

return (

Total fees: {(summary as any)?.total ?? '—'}

{/* Pass chart datasets to your BarChart components */}

{JSON.stringify(subsidyFeesChartData?.labels, null, 2)}

{JSON.stringify(averageFeesChartData?.labels, null, 2)}

) } ``` ### `useUpdateExistedActions` @tetherto/mdk-react-devkit/foundation Mutation hook that updates only the changed fields of an existing action record. ```tsx ``` #### Example ```tsx function DeviceActionBar({ actionType, pendingSubmissions, selectedDevices }) { const { updateExistedActions } = useUpdateExistedActions() const handleApply = () => { updateExistedActions({ actionType, pendingSubmissions, selectedDevices }) } return ( ) } ``` ## TanStack Query re-exports The adapter re-exports a curated set of [TanStack Query](https://tanstack.com/query/latest/docs/framework/react/overview) hooks so you can import data-fetching primitives from a single package alongside MDK helpers. The re-exports are unmodified — refer to the upstream TanStack Query documentation for full API details. | Hook | TanStack docs | | --- | --- | | `useQuery` | [TanStack `useQuery`](https://tanstack.com/query/latest/docs/framework/react/reference/useQuery) | | `useMutation` | [TanStack `useMutation`](https://tanstack.com/query/latest/docs/framework/react/reference/useMutation) | | `useQueries` | [TanStack `useQueries`](https://tanstack.com/query/latest/docs/framework/react/reference/useQueries) | | `useInfiniteQuery` | [TanStack `useInfiniteQuery`](https://tanstack.com/query/latest/docs/framework/react/reference/useInfiniteQuery) | | `useIsFetching` | [TanStack `useIsFetching`](https://tanstack.com/query/latest/docs/framework/react/reference/useIsFetching) | | `useIsMutating` | [TanStack `useIsMutating`](https://tanstack.com/query/latest/docs/framework/react/reference/useIsMutating) | | `useQueryClient` | [TanStack `useQueryClient`](https://tanstack.com/query/latest/docs/framework/react/reference/useQueryClient) | # UI CLI reference (/reference/app-toolkit/ui-cli) The **UI CLI** (`mdk-ui`, package `@tetherto/mdk-ui-cli`) is the command surface your AI agent uses to build with MDK. You usually never run it yourself, your agent does, after you [wire your IDE](/quickstart/connect-agents). This page documents the commands for when you want to drive or inspect the tooling by hand. Every command runs locally and prints JSON by default. Add `--format table` for human-readable output. There are no network or model calls: each command is a lookup against files MDK ships. ## At a glance | Bucket | Section | What it covers | |--------|---------|----------------| | Set up | [Set up a project](#set-up-a-project) | Wire your IDE with `init` | | Discover | [Discover what to use](#discover-what-to-use) | `suggest`, `hooks`, `stores`, `find` | | Read | [Read a component contract](#read-a-component-contract) | `docs`, `example` | | Recipes | [Follow a recipe](#follow-a-recipe) | `blueprints`, `blueprint` | | Scaffold | [Scaffold and verify](#scaffold-and-verify) | `add page`, `check`, `sync` | | Inspect | [Inspect the UI CLI itself](#inspect-the-ui-cli-itself) | `--json-help` | ## All commands | Command | Summary | |---------|---------| | [`init`](#init) | Bootstrap `.mdk/context.md` and IDE rules | | [`suggest`](#suggest) | Ranked shortlist from free-text intent | | [`hooks`](#hooks) | List adapter hooks (optional `--category`) | | [`stores`](#stores) | List Zustand stores and query helpers | | [`find`](#find) | Filter components by domain and capability | | [`docs`](#docs) | Print a component's `USAGE.md` | | [`example`](#example) | Print a runnable `*.example.tsx` | | [`blueprints`](#blueprints) | List curated intent-to-component recipes | | [`blueprint`](#blueprint) | Show one recipe in detail | | [`add page`](#add-page) | Scaffold a page with chosen components | | [`check`](#check) | Type-check a file against real APIs | | [`sync`](#sync) | Refresh `.mdk/context.md` | | [`--json-help`](#json-help) | Machine-readable CLI surface | ## The agent's decision flow Given an intent, the deterministic path a session follows is: ```mermaid flowchart TD intent["Plain-language intent"] suggest["mdk-ui suggest"] state{"State or hooks needed?"} hooks["mdk-ui hooks / stores"] blueprints["mdk-ui blueprints"] match{"Matching blueprint?"} blueprint["mdk-ui blueprint"] find["mdk-ui find"] docs["mdk-ui docs / example"] add["mdk-ui add page"] check["mdk-ui check"] intent --> suggest suggest --> state state -->|yes| hooks state -->|no| blueprints hooks --> add blueprints --> match match -->|yes| blueprint match -->|no| find blueprint --> docs find --> docs docs --> add add --> check ``` ## Set up a project ### init Bootstraps the current project with an agent-context file and an IDE rule so every AI session is wired automatically: ```bash npx @tetherto/mdk-ui-cli init --ide cursor # .mdk/context.md + .cursor/rules/mdk.mdc npx @tetherto/mdk-ui-cli init --ide claude # .mdk/context.md + CLAUDE.md ``` ## Discover what to use ### suggest Turns free text into a ranked shortlist across components, hooks, blueprints, and stores: ```bash mdk-ui suggest "show hashrate for a pool" ``` ### hooks Lists every hook exported from `@tetherto/mdk-react-adapter`, grouped by category (`store`, `utility`, `permission`, `ui`, `external`): ```bash mdk-ui hooks --format table # all adapter hooks mdk-ui hooks --category store --format table # store-binding hooks only ``` ### stores Describes the Zustand stores and TanStack Query helpers from `@tetherto/mdk-ui-core`: ```bash mdk-ui stores --format table # stores and query helpers mdk-ui stores --category devices --format table ``` ### find Filters the component library by domain and capability: ```bash mdk-ui find --domain mining-operations --capability hashrate-monitoring ``` ## Read a component contract ### docs Prints a component's usage notes: ```bash mdk-ui docs LineChartCard ``` ### example Prints a runnable example: ```bash mdk-ui example LineChartCard ``` ## Follow a recipe Blueprints are curated recipes that map a high-level intent to a concrete set of components and hooks. ### blueprints Lists available recipes: ```bash mdk-ui blueprints ``` ### blueprint Shows one recipe in detail: ```bash mdk-ui blueprint device-management ``` ## Scaffold and verify ### add page Scaffolds a page with the components you name: ```bash mdk-ui add page Dashboard --component LineChartCard ``` ### check Confirms a file compiles against the real component APIs: ```bash mdk-ui check src/pages/Dashboard.tsx ``` ### sync Keeps the `.mdk/context.md` agent-context file current as MDK updates: ```bash mdk-ui sync ``` ## Inspect the UI CLI itself ### json-help `--json-help` prints the full command surface, useful for meta-tooling that wants to discover commands without running them: ```bash mdk-ui --json-help ``` ## Next steps - [Build dashboards with your AI agent](/quickstart/connect-agents): the two-step flow most developers use - [UI Kit](/reference/ui): the component library these commands draw from - [MDK repositories](/support/resources/repositories): source for the UI CLI and the agent-ready contract # UI Core (/reference/app-toolkit/ui-core) @tetherto/mdk-ui-core If you are building a React app with the MDK kit, start with the [React adapter](/tutorials/ui/react) instead. `` and adapter hooks such as `useAuth` and `useDevices` wrap this package so most React code never imports `@tetherto/mdk-ui-core` directly. Use this reference when you need headless store access outside React (logging, websocket setup, test helpers) or when authoring a future framework adapter. `@tetherto/mdk-ui-core` is the framework-agnostic headless layer of the [MDK App Toolkit](/concepts/stack/app-toolkit). It ships Zustand vanilla stores and a TanStack Query Core `QueryClient` factory. There are **no React imports** in this package. ## Subpath exports | Subpath | Purpose | |---------|---------| | `.` | Top-level barrel | | `./store` | Zustand vanilla stores | | `./query` | `QueryClient` factory, query keys, and query/mutation factories | | `./types` | Shared type contracts | | `./stores.json` | Machine-readable store manifest (generated at build time) | ## Stores Each store is a Zustand vanilla singleton. In a React app, read and update state through the matching adapter hook instead of importing stores directly. | Store | Summary | Adapter hook | |-------|---------|--------------| | `authStore` | Session token and permission payload | [`useAuth`](/reference/app-toolkit/hooks/state#useauth) | | `devicesStore` | Fleet device list and current selection | [`useDevices`](/reference/app-toolkit/hooks/state#usedevices) | | `timezoneStore` | Active operator timezone | [`useTimezone`](/reference/app-toolkit/hooks/state#usetimezone) | | `notificationStore` | Unread notification counter (`count`, `increment`, `decrement`, `reset`) | [`useNotifications`](/reference/app-toolkit/hooks/state#usenotifications) | | `actionsStore` | Pending device and pool action submissions | [`useActions`](/reference/app-toolkit/hooks/state#useactions) | Import from `@tetherto/mdk-ui-core/store` (or the top-level barrel). ## QueryClient factory `createMdkQueryClient` builds a TanStack Query Core client with environment-aware App Node base URL resolution: 1. Explicit override (typically from ``) 2. Build-time env: `VITE_MDK_API_URL` (Vite) or `MDK_API_URL` (Node) 3. Default: `http://localhost:3000` The `./query` subpath also exports query key helpers and factories (`authQuery`, `devicesQuery`, `deviceQuery`, `telemetryQuery`). See [TanStack Query](https://tanstack.com/query/latest) for general usage. ## Headless read outside React Utility code can subscribe to a store without React: ```ts const token = authStore.getState().token const unsubscribe = authStore.subscribe((state) => { console.log('token changed', state.token) }) // later: unsubscribe() ``` `` wires these singleton stores into React and creates the shared `QueryClient` for adapter hooks. ## What's not here yet Throttled telemetry subscriptions, stale detection, and history ring buffers are not yet present. They will be added alongside the consuming code that requires them. ## Next steps - [React get started](/tutorials/ui/react): three-package install and `` - [Wire a React app](/tutorials/ui/react/tutorial): full adapter wiring walkthrough - [MDK App Toolkit](/concepts/stack/app-toolkit): where UI Core fits in the frontend stack # UI Kit (/reference/app-toolkit/ui-kit) The UI Kit is the frontend tools half of the [MDK App Toolkit](/concepts/stack/app-toolkit). This reference documents its constants, React hooks, TypeScript types, and helper utilities. ## Browse by topic | Topic | What's there | |-------|--------------| | [Constants](/reference/app-toolkit/ui-kit/constants) | Colors, units, currency, chart configs and permissions, roles, header preferences| | [Hooks](/reference/app-toolkit/ui-kit/hooks) | Discover hooks for monitoring and UI patterns; full reference at [Hooks](/reference/app-toolkit/hooks) | | [Types](/reference/app-toolkit/ui-kit/types) | TypeScript type exports. UI primitives and domain models like `Device`, `Alert` | | [Utilities](/reference/app-toolkit/ui-kit/utilities) | Helper functions for formatting, validation, conversions, and settings persistence | ## Browse by package If you're working with a specific package, use these per-package shortcuts: ### `@tetherto/mdk-react-devkit/core` - [Constants](/reference/app-toolkit/ui-kit/constants#core-constants) - [Types](/reference/app-toolkit/ui-kit/types#core-types) - [Utilities](/reference/app-toolkit/ui-kit/utilities#core-utilities) ### `@tetherto/mdk-react-devkit/foundation` - [Constants](/reference/app-toolkit/ui-kit/constants#foundation-constants) - [Types](/reference/app-toolkit/ui-kit/types#foundation-types) - [Utilities](/reference/app-toolkit/ui-kit/utilities#foundation-utilities) - [Hooks](/reference/app-toolkit/hooks) — every App Toolkit hook (state, components, utilities) lives on a single overview page now. ### `@tetherto/mdk-ui-core` - [Alert utilities](/reference/app-toolkit/ui-kit/utilities#ui-core-alert-utilities) — alert query-parameter builders and time-range chunking helpers # Constants (/reference/app-toolkit/ui-kit/constants) This page documents constants exported by the MDK packages. Constants live in two distinct domains: - [Core constants](#core-constants) ships UI primitives: colors, units, currency symbols, chart defaults - [Foundation constants](#foundation-constants) ships mining-domain values: permissions, roles, header preferences, error codes ## Core constants UI primitive constants exported by `@tetherto/mdk-react-devkit/core` — colors, units, currency symbols, and chart defaults. ### Prerequisites - Complete the [@tetherto/mdk-react-devkit installation and add the dependency](/reference/ui/react/core#prerequisites) ### Import @tetherto/mdk-react-devkit/core ```tsx COLOR, UNITS, CURRENCY, CHART_COLORS, TABLE_COLORS, HASHRATE_LABEL_DIVISOR, } from '@tetherto/mdk-react-devkit/core' ``` ### Color constants #### `COLOR` @tetherto/mdk-react-devkit/core Comprehensive color palette with 80+ named colors. ```tsx COLOR.GREEN // '#72F59E' COLOR.RED // '#EF4444' COLOR.COLD_ORANGE // '#F7931A' ``` ##### Base colors | Constant | Value | Description | |----------|-------|-------------| | `WHITE` | `#FFFFFF` | Pure white | | `BLACK` | `#17130F` | Standard black | | `DARK_BACK` | `#1A1815` | Dark background | | `EBONY` | `#0f0f0f` | Chart background | | `TRANSPARENT` | `transparent` | Transparent | ##### Status colors | Constant | Value | Description | |----------|-------|-------------| | `GREEN` | `#72F59E` | Success/online | | `RED` | `#EF4444` | Error/danger | | `YELLOW` | `#FFC107` | Warning | | `BRIGHT_YELLOW` | `#EAB308` | Bright warning | | `LIGHT_BLUE` | `#22AFFF` | Info | | `SLEEP_BLUE` | `#3B82F6` | Sleep/standby | ##### Brand colors | Constant | Value | Description | |----------|-------|-------------| | `COLD_ORANGE` | `#F7931A` | Bitcoin orange | | `ORANGE` | `#FF6A00` | Primary orange | | `EMERALD` | `#009393` | Teal accent | | `INDIGO` | `#5B5FFB` | Purple accent | #### `TABLE_COLORS` @tetherto/mdk-react-devkit/core Colors for table styling. ```tsx TABLE_COLORS.HEADER_BG TABLE_COLORS.ROW_HOVER ``` #### `HEATMAP` @tetherto/mdk-react-devkit/core `HEATMAP` color scale for temperature and intensity displays. ```tsx ``` #### `CHART_COLORS` @tetherto/mdk-react-devkit/core Default chart color palette. ```tsx ``` #### `PIE_CHART_COLORS` @tetherto/mdk-react-devkit/core Color palette for pie and doughnut charts. ```tsx ``` #### `CATEGORICAL_COLORS` @tetherto/mdk-react-devkit/core 25-color categorical palette for multi-series charts. ```tsx CATEGORICAL_COLORS[0] // First color CATEGORICAL_COLORS[24] // Last color ``` #### `TEMPERATURE_COLORS` @tetherto/mdk-react-devkit/core Color scale for temperature displays. ```tsx ``` #### `SOCKET_BORDER_COLOR` @tetherto/mdk-react-devkit/core Colors for socket status indicators. ```tsx ``` ### Unit constants #### `UNITS` @tetherto/mdk-react-devkit/core Physical and measurement units. ```tsx UNITS.POWER_W // 'W' UNITS.POWER_KW // 'kW' UNITS.ENERGY_MWH // 'MWh' UNITS.TEMPERATURE_C // '°C' UNITS.HASHRATE_TH_S // 'TH/s' ``` | Constant | Value | Description | |----------|-------|-------------| | `POWER_W` | `W` | Watts | | `POWER_KW` | `kW` | Kilowatts | | `ENERGY_WH` | `Wh` | Watt-hours | | `ENERGY_KWH` | `kWh` | Kilowatt-hours | | `ENERGY_MW` | `MW` | Megawatts | | `ENERGY_MWH` | `MWh` | Megawatt-hours | | `ENERGY_GWH` | `GWh` | Gigawatt-hours | | `TEMPERATURE_C` | `°C` | Celsius | | `VOLTAGE_V` | `V` | Volts | | `AMPERE` | `A` | Amperes | | `PERCENT` | `%` | Percentage | | `PRESSURE_BAR` | `bar` | Pressure (bar) | | `HASHRATE_MH_S` | `MH/s` | Megahash/second | | `HASHRATE_TH_S` | `TH/s` | Terahash/second | | `HASHRATE_PH_S` | `PH/s` | Petahash/second | | `HASHRATE_EH_S` | `EH/s` | Exahash/second | | `FREQUENCY_MHZ` | `MHz` | Megahertz | | `FREQUENCY_HERTZ` | `Hz` | Hertz | | `HUMIDITY_PERCENT` | `%RH` | Relative humidity | | `EFFICIENCY_W_PER_TH` | `W/TH` | Watts per terahash | | `FLOW_M3H` | `m3/h` | Flow rate | | `SATS` | `Sats` | Satoshis | | `VBYTE` | `vByte` | Virtual bytes | #### `CURRENCY` @tetherto/mdk-react-devkit/core Currency symbols and labels. ```tsx CURRENCY.BTC // '₿' CURRENCY.USD // '$' CURRENCY.EUR // '€' CURRENCY.SATS // 'Sats' CURRENCY.BTC_LABEL // 'BTC' CURRENCY.USD_LABEL // 'USD' ``` #### `MAX_UNIT_VALUE` @tetherto/mdk-react-devkit/core Maximum values for certain units. ```tsx MAX_UNIT_VALUE.HUMIDITY_PERCENT // 100 MAX_UNIT_VALUE.TEMPERATURE_PERCENT // 100 ``` #### `HASHRATE_LABEL_DIVISOR` @tetherto/mdk-react-devkit/core Divisors for converting hashrate units. ```tsx HASHRATE_LABEL_DIVISOR['TH/s'] // 1e6 HASHRATE_LABEL_DIVISOR['PH/s'] // 1e9 HASHRATE_LABEL_DIVISOR['EH/s'] // 1e12 ``` ### Chart constants #### `defaultChartColors` @tetherto/mdk-react-devkit/core Default color array for chart datasets. ```tsx ``` #### `defaultChartOptions` @tetherto/mdk-react-devkit/core Default [Chart.js](https://www.chartjs.org/) options. ```tsx ``` #### `CHART_LEGEND_OPACITY` @tetherto/mdk-react-devkit/core Opacity values for chart legends. ```tsx ``` #### `CHART_PERFORMANCE` @tetherto/mdk-react-devkit/core Performance threshold constants for charts. ```tsx ``` #### `getChartAnimationConfig` @tetherto/mdk-react-devkit/core Get animation configuration based on data count. ```tsx const animConfig = getChartAnimationConfig(dataPointCount) ``` #### `getDataDecimationConfig` @tetherto/mdk-react-devkit/core Get data decimation configuration for large datasets. ```tsx const decimationConfig = getDataDecimationConfig(dataPointCount) ``` ### Type exports The constants module also exports TypeScript types: ```tsx UnitKey, UnitValue, CurrencyKey, CurrencyValue, } from '@tetherto/mdk-react-devkit/core' ``` ## Foundation constants Constants exported by `@tetherto/mdk-react-devkit/foundation`: app identity, dialog flows, header preferences, permissions, roles, and error codes. ### Prerequisites - Complete the [@tetherto/mdk-react-devkit installation and add the dependency](/reference/ui/react/foundation#prerequisites) ### Import @tetherto/mdk-react-devkit/foundation ```tsx WEBAPP_NAME, WEBAPP_SHORT_NAME, WEBAPP_DISPLAY_NAME, POSITION_CHANGE_DIALOG_FLOWS, HEADER_ITEMS, DEFAULT_HEADER_PREFERENCES, AUTH_PERMISSIONS, AUTH_LEVELS, USER_ROLE, USER_ROLES, PERM_LEVEL_LABELS, getRoleBadgeColors, } from '@tetherto/mdk-react-devkit/foundation' ``` ### App identity Brand strings the foundation UI uses to label the running web app in header rows, chart legends, settings export errors, and confirmation copy. The kit ships placeholder defaults; consumers read them via the named imports. #### `WEBAPP_NAME` @tetherto/mdk-react-devkit/foundation Inline name used in confirmations and the `parseSettingsFile` import-error message. ```tsx WEBAPP_NAME // 'Appl.' ``` #### `WEBAPP_SHORT_NAME` @tetherto/mdk-react-devkit/foundation Compact label embedded in [`HEADER_ITEMS`](#header_items) for the in-app miner and hashrate header rows. ```tsx WEBAPP_SHORT_NAME // 'APP' ``` #### `WEBAPP_DISPLAY_NAME` @tetherto/mdk-react-devkit/foundation Display name used in chart legends, including the hash-rate line chart series label. ```tsx WEBAPP_DISPLAY_NAME // 'Application' ``` ### Dialog flows #### `POSITION_CHANGE_DIALOG_FLOWS` @tetherto/mdk-react-devkit/foundation Flow keys consumed by [`PositionChangeDialog`](/reference/ui/react/foundation/components/widgets/PositionChangeDialog) and its sibling dialogs to route between step-specific surfaces. ```tsx POSITION_CHANGE_DIALOG_FLOWS.MAINTENANCE // 'maintenance' POSITION_CHANGE_DIALOG_FLOWS.REPLACE_MINER // 'replaceMiner' ``` | Constant | Value | Description | |----------|-------|-------------| | `CONFIRM_REMOVE` | `remove` | Render the remove-miner confirmation surface | | `CHANGE_INFO` | `changeInfo` | Edit info for an existing miner | | `MAINTENANCE` | `maintenance` | Move a miner to (or back from) the maintenance container | | `REPLACE_MINER` | `replaceMiner` | Replace the miner currently occupying a socket | | `CONFIRM_CHANGE_POSITION` | `confirmChange` | Confirm a position change between sockets | | `CONTAINER_SELECTION` | `containerSelection` | Pick a destination container and socket | #### `PositionChangeDialogFlowKey` type @tetherto/mdk-react-devkit/foundation ```tsx type PositionChangeDialogFlowKey = keyof typeof POSITION_CHANGE_DIALOG_FLOWS ``` #### `PositionChangeDialogFlowValue` type @tetherto/mdk-react-devkit/foundation ```tsx type PositionChangeDialogFlowValue = (typeof POSITION_CHANGE_DIALOG_FLOWS)[PositionChangeDialogFlowKey] ``` ### Header controls #### `HEADER_ITEMS` @tetherto/mdk-react-devkit/foundation Array of header metric options for the [`HeaderControlsSettings`](/reference/ui/react/foundation/settings/header-controls) component. ```tsx ``` | Key | Label | |-----|-------| | `poolMiners` | `Pool Miners` | | `miners` | `` `${WEBAPP_SHORT_NAME} Miners` `` | | `poolHashrate` | `Pool Hashrate` | | `hashrate` | `` `${WEBAPP_SHORT_NAME} Hashrate` `` | | `consumption` | `Consumption` | | `efficiency` | `Efficiency` | The two in-app rows compose their labels from [`WEBAPP_SHORT_NAME`](#webapp_short_name); with the shipped default that renders as `APP Miners` and `APP Hashrate`. #### `DEFAULT_HEADER_PREFERENCES` @tetherto/mdk-react-devkit/foundation Default visibility state for all header items (all `true`). ```tsx DEFAULT_HEADER_PREFERENCES.poolMiners // true DEFAULT_HEADER_PREFERENCES.consumption // true ``` #### `HeaderPreferences` type @tetherto/mdk-react-devkit/foundation ```tsx type HeaderPreferences = { poolMiners: boolean miners: boolean poolHashrate: boolean hashrate: boolean consumption: boolean efficiency: boolean } ``` ### Permissions #### `AUTH_PERMISSIONS` @tetherto/mdk-react-devkit/foundation Permission resource identifiers. ```tsx AUTH_PERMISSIONS.USERS // 'users' AUTH_PERMISSIONS.SETTINGS // 'settings' AUTH_PERMISSIONS.MINER // 'miner' ``` | Constant | Value | Description | |----------|-------|-------------| | `USERS` | `users` | User management | | `SETTINGS` | `settings` | Application settings | | `MINER` | `miner` | Miner operations | | `ALERTS` | `alerts` | Alert management | | `ACTIONS` | `actions` | Action execution | | `EXPLORER` | `explorer` | Device explorer | | `INVENTORY` | `inventory` | Inventory management | | `CONTAINER` | `container` | Container management | | `PRODUCTION` | `production` | Production data | | `REPORTING` | `reporting` | Reports | #### `AUTH_LEVELS` @tetherto/mdk-react-devkit/foundation Permission access levels. ```tsx AUTH_LEVELS.READ // 'r' AUTH_LEVELS.WRITE // 'w' ``` #### `USER_ROLE` @tetherto/mdk-react-devkit/foundation User role identifiers. ```tsx USER_ROLE.ADMIN // 'admin' USER_ROLE.SITE_MANAGER // 'site_manager' USER_ROLE.READ_ONLY // 'read_only_user' ``` | Constant | Value | |----------|-------| | `ADMIN` | `admin` | | `SITE_MANAGER` | `site_manager` | | `SITE_OPERATOR` | `site_operator` | | `FIELD_OPERATOR` | `field_operator` | | `REPAIR_TECHNICIAN` | `repair_technician` | | `REPORTING_TOOL_MANAGER` | `reporting_tool_manager` | | `READ_ONLY` | `read_only_user` | ### Settings #### `USER_ROLES` @tetherto/mdk-react-devkit/foundation Array of role options for select dropdowns. ```tsx // [{ label: 'Admin', value: 'admin' }, ...] ``` #### `PERM_LEVEL_LABELS` @tetherto/mdk-react-devkit/foundation Human-readable labels for permission levels. ```tsx PERM_LEVEL_LABELS.rw // 'Read & Write' PERM_LEVEL_LABELS.r // 'Read Only' PERM_LEVEL_LABELS.none // 'No Access' ``` #### `SETTINGS_ERROR_CODES` @tetherto/mdk-react-devkit/foundation Error code to message mapping. ```tsx SETTINGS_ERROR_CODES.ERR_USER_EXISTS // 'User already exists' SETTINGS_ERROR_CODES.DEFAULT // 'An error occurred' ``` ### Role styling #### `getRoleBadgeColors` @tetherto/mdk-react-devkit/foundation Get badge colors for a role. ```tsx const { color, bgColor } = getRoleBadgeColors('admin') // { color: '#e8833a', bgColor: 'rgba(232, 131, 58, 0.1)' } ``` | Role | Color | Background | |------|-------|------------| | `admin` | `#e8833a` | Orange tint | | `site_manager` | `#52c41a` | Green tint | | `site_operator` | `#faad14` | Yellow tint | | `read_only_user` | `#8c8c8c` | Gray tint | # Hooks (/reference/app-toolkit/ui-kit/hooks) Hooks shipped by `@tetherto/mdk-react-devkit`. For the full catalog — including adapter data hooks and state hooks from `@tetherto/mdk-react-adapter` — see the [Hooks reference](/reference/app-toolkit/hooks). Use the groups below to browse by concern; each hook name links to its entry in that reference. ## Available hooks | Group | Hooks | |---|---| | [Monitoring](/reference/app-toolkit/hooks) | [`useChartDataCheck`](/reference/app-toolkit/hooks/components#usechartdatacheck), [`useBeepSound`](/reference/app-toolkit/hooks/utilities#usebeepsound), [`useEnergyReportSite`](/reference/app-toolkit/hooks/components#useenergyreportsite), [`useHashrate`](/reference/app-toolkit/hooks/components#usehashrate) | | [UI](/reference/app-toolkit/hooks) | [`useNotification`](/reference/app-toolkit/hooks/components#usenotification), [`useHeaderControls`](/reference/app-toolkit/hooks/components#useheadercontrols), [`useSidebarExpandedState`](/reference/app-toolkit/hooks/components#usesidebarexpandedstate), [`useSidebarSectionState`](/reference/app-toolkit/hooks/components#usesidebarsectionstate), [`useHasPerms`](/reference/app-toolkit/hooks/utilities#usehasperms), [`useCheckPerm`](/reference/app-toolkit/hooks/utilities#usecheckperm), [`useLocalStorage`](/reference/app-toolkit/hooks/utilities#uselocalstorage), [`usePagination`](/reference/app-toolkit/hooks/utilities#usepagination), [`useIsFeatureEditingEnabled`](/reference/app-toolkit/hooks/utilities#useisfeatureeditingenabled) | # Types (/reference/app-toolkit/ui-kit/types) This page documents the TypeScript types exported by the MDK packages. The two packages cover different territory: - [Core types](#core-types) ships **UI primitive types**: sizes, variants, colors, status, common API and chart shapes. These are the building blocks consumed by core components and re-used in your own component prop types. - [Foundation types](#foundation-types) ships **mining-domain models**: `Device`, `Container`, `Alert`, `MinerStats`, settings shapes. These describe the data flowing through foundation components and the API responses they consume. ## Core types UI primitive types exported by `@tetherto/mdk-react-devkit/core` — sizes, variants, colors, status, and common API and chart shapes. These are the building blocks consumed by core components and re-used in your own component prop types. ### Prerequisites - Complete the [@tetherto/mdk-react-devkit installation and add the dependency](/reference/ui/react/core#prerequisites) ### Import @tetherto/mdk-react-devkit/core ```tsx ComponentSize, ButtonVariant, ColorVariant, Status, ApiResponse, } from '@tetherto/mdk-react-devkit/core' ``` ### Common types #### `ComponentSize` @tetherto/mdk-react-devkit/core Standard size variants used across multiple components. ```tsx type ComponentSize = 'sm' | 'md' | 'lg' ``` Used by: `Button`, `Badge`, `Checkbox`, `Switch`, `Radio`, `Spinner`, `Indicator`, `EmptyState`, `Pagination`. #### `ButtonSize` @tetherto/mdk-react-devkit/core Extends `ComponentSize` with an icon-only variant. ```tsx type ButtonSize = ComponentSize | 'icon' ``` #### `BorderRadius` @tetherto/mdk-react-devkit/core Border radius variants for form components. ```tsx type BorderRadius = 'none' | 'small' | 'medium' | 'large' | 'full' ``` Used by: `Checkbox`, `Switch`, `Radio`. #### `ColorVariant` @tetherto/mdk-react-devkit/core Comprehensive color variants for components. ```tsx type ColorVariant = | 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' ``` #### `StatusVariant` @tetherto/mdk-react-devkit/core Status variants for state indication. ```tsx type StatusVariant = 'success' | 'processing' | 'error' | 'warning' | 'default' | 'idle' ``` Used by: badges, notifications, status indicators. #### `ComponentColor` @tetherto/mdk-react-devkit/core Color options for form components. ```tsx type ComponentColor = 'default' | 'primary' | 'success' | 'warning' | 'error' ``` Used by: `Checkbox`, `Switch`, `Radio`, `Typography`. #### `Position` @tetherto/mdk-react-devkit/core Position/side options for UI elements. ```tsx type Position = 'top' | 'right' | 'bottom' | 'left' ``` Used by: `Tooltip`, `Popover`, chart legends. #### `TextAlign` @tetherto/mdk-react-devkit/core Text alignment options. ```tsx type TextAlign = 'left' | 'center' | 'right' | 'justify' ``` #### `FlexAlign` @tetherto/mdk-react-devkit/core Flex/grid alignment options. ```tsx type FlexAlign = 'start' | 'center' | 'end' ``` ### Component types #### `ButtonVariant` @tetherto/mdk-react-devkit/core Button visual variants. ```tsx type ButtonVariant = | 'primary' | 'secondary' | 'danger' | 'tertiary' | 'link' | 'icon' | 'outline' | 'ghost' ``` #### `ButtonIconPosition` @tetherto/mdk-react-devkit/core Where icons appear in buttons. ```tsx type ButtonIconPosition = 'left' | 'right' ``` #### `NotificationVariant` @tetherto/mdk-react-devkit/core Toast/notification variants. ```tsx type NotificationVariant = 'success' | 'error' | 'warning' | 'info' ``` #### `BadgeStatus` @tetherto/mdk-react-devkit/core Badge status options. ```tsx type BadgeStatus = 'success' | 'processing' | 'error' | 'warning' | 'default' ``` #### `TypographyColor` @tetherto/mdk-react-devkit/core Typography color options including muted. ```tsx type TypographyColor = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'muted' ``` ### Utility types #### `UnknownRecord` @tetherto/mdk-react-devkit/core Generic type for objects with unknown structure. ```tsx type UnknownRecord = Record ``` #### `Nullable` / `Optional` / `Maybe` @tetherto/mdk-react-devkit/core Null/undefined wrapper types. ```tsx type Nullable = T | null type Optional = T | undefined type Maybe = T | null | undefined ``` #### `Status` @tetherto/mdk-react-devkit/core Async operation status. ```tsx type Status = 'idle' | 'loading' | 'success' | 'error' ``` ### API types #### `PaginationParams` @tetherto/mdk-react-devkit/core Pagination request parameters. ```tsx type PaginationParams = { limit?: number offset?: number page?: number } ``` #### `PaginatedResponse` @tetherto/mdk-react-devkit/core Paginated response wrapper. ```tsx type PaginatedResponse = { data: T[] page: number total: number totalPages: number } ``` #### `ApiResponse` @tetherto/mdk-react-devkit/core API response wrapper. ```tsx type ApiResponse = { data: T message?: string status: number } ``` #### `ApiError` @tetherto/mdk-react-devkit/core API error response structure. ```tsx type ApiError = { error: string message: string status: number data?: { message?: string } } ``` ### Data table types @tetherto/mdk-react-devkit/core Re-exported from TanStack Table for convenience. ```tsx DataTableColumnDef, DataTableExpandedState, DataTablePaginationState, DataTableRow, DataTableRowSelectionState, DataTableSortingState, } from '@tetherto/mdk-react-devkit/core' ``` ### Value types #### `ValueUnit` @tetherto/mdk-react-devkit/core A value paired with a unit, used for display formatting. ```tsx type ValueUnit = { value: number | string | null unit: string realValue: number } ``` #### `HashrateUnit` / `CurrencyUnit` @tetherto/mdk-react-devkit/core Specialized value-unit aliases. ```tsx type HashrateUnit = ValueUnit type CurrencyUnit = ValueUnit ``` #### `UnitLabel` @tetherto/mdk-react-devkit/core SI-prefix unit labels. ```tsx type UnitLabel = 'decimal' | 'k' | 'M' | 'G' | 'T' | 'P' ``` ### Time types #### `TimeRangeFormatted` @tetherto/mdk-react-devkit/core A formatted time range. ```tsx type TimeRangeFormatted = { start: string end: string formatted: string } ``` #### `TimeInterval` @tetherto/mdk-react-devkit/core A time interval with start/end timestamps. ```tsx type TimeInterval = { start: number end: number } ``` ### Chart types #### `ChartLegendPosition` @tetherto/mdk-react-devkit/core Chart legend position options. ```tsx type ChartLegendPosition = 'top' | 'bottom' | 'left' | 'right' | 'center' | 'chartArea' ``` #### `WeightedAverageResult` @tetherto/mdk-react-devkit/core Result from weighted average calculation. ```tsx type WeightedAverageResult = { avg: number totalWeight: number weightedValue: number } ``` #### `ErrorWithTimestamp` @tetherto/mdk-react-devkit/core An error with optional timestamp. ```tsx type ErrorWithTimestamp = { msg?: string message?: string timestamp?: number | string } ``` ## Foundation types Foundation types describe the shape of devices, containers, alerts, site configuration, and settings data flowing through `@tetherto/mdk-react-devkit/foundation` components and API responses. They are organized into barrels including `alerts`, `config`, `device`, and `settings.types`. ### Prerequisites - Complete the [@tetherto/mdk-react-devkit installation and add the dependency](/reference/ui/react/foundation#prerequisites) ### Import @tetherto/mdk-react-devkit/foundation ```tsx Alert, Device, DeviceLast, DeviceInfo, ContainerSnap, ContainerStats, MinerStats, MinerConfig, SettingsUser, PermLevel, GlobalConfig, TimelineChartDataPoint, TimelineChartDataset, TimelineChartData, ChartRange, AxisTitleText, MetricsEfficiencyLogEntry, } from '@tetherto/mdk-react-devkit/foundation' ``` ### Alert types #### `Alert` @tetherto/mdk-react-devkit/foundation Raw alert record as it appears on a device's `alerts` array. ```tsx type Alert = { id?: string severity: string createdAt: number | string name: string description: string message?: string uuid?: string code?: string | number [key: string]: unknown } ``` The `severity` field uses string values like `critical`, `high`, `medium`, `low`. The open `[key: string]: unknown` index signature allows vendor-specific fields without breaking the type contract. #### `LogFormattedAlertData` @tetherto/mdk-react-devkit/foundation Alert reshaped for log display components (e.g., `AlertsLog`). ```tsx type LogFormattedAlertData = { title: string subtitle: string status: string severityLevel: number creationDate: number | string body: string id: string uuid?: string [key: string]: unknown } ``` ### Device types The `Device` family models everything that appears on the device explorer: miners, containers, power meters, temperature sensors, and cabinets. The shape is intentionally permissive (open index signatures, optional fields) because devices come from a live API that adds vendor-specific fields over time. #### `Device` @tetherto/mdk-react-devkit/foundation The root device record. Used pervasively in the [operations centre](/reference/ui/react/foundation/operations) components. ```tsx type Device = { id: string type: string tags?: string[] rack?: string last?: DeviceLast username?: string info?: DeviceInfo containerId?: string address?: string | null code?: string alerts?: Alert[] | null powerMeters?: Device[] tempSensors?: Device[] transformerTempSensor?: Device rootTempSensor?: Device [key: string]: unknown } ``` The `type` string discriminates devices by category (such as miner or container) and by vendor. The `last` field carries the latest snapshot from the device. #### `DeviceLast` @tetherto/mdk-react-devkit/foundation The latest reading wrapper that lives on `Device.last`. ```tsx type DeviceLast = { err?: string | null type?: string snap?: ContainerSnap alerts?: Alert[] | null [key: string]: unknown } ``` `err` is a connection or upstream error string when the device is unreachable. `snap` carries the actual stats and config payload. #### `DeviceInfo` @tetherto/mdk-react-devkit/foundation Identification and placement metadata that lives on `Device.info`. ```tsx type DeviceInfo = { container?: string pos?: string poolConfig?: string serialNum?: string macAddress?: string | null posHistory?: Partial [key: string]: unknown } ``` #### `PosHistoryEntry` @tetherto/mdk-react-devkit/foundation A single past placement of a miner. ```tsx type PosHistoryEntry = { container: string pos: string removedAt: number } ``` #### `DeviceData` @tetherto/mdk-react-devkit/foundation A flattened version of `Device` with a guaranteed (non-optional) `snap` field, returned by the `getDeviceData` helper. ```tsx type DeviceData = { id: string type: string tags?: string[] rack?: string snap: ContainerSnap alerts?: Alert[] username?: string info?: DeviceInfo containerId?: string address?: string err?: string [key: string]: unknown } ``` ### Container types #### `Container` @tetherto/mdk-react-devkit/foundation A `Device` specialized for containers, with container-specific `info` and `last` shapes. ```tsx type Container = { info?: Partial last?: Partial } & Device ``` #### `ContainerInfo` @tetherto/mdk-react-devkit/foundation Cooling, supply, and pressure metadata for a container. ```tsx type ContainerInfo = { container: string cooling_system: Record cdu: Record primary_supply_temp: number second_supply_temp1: number second_supply_temp2: number supply_liquid_temp: number supply_liquid_set_temp: number supply_liquid_pressure: number return_liquid_pressure: number } ``` #### `ContainerPosInfo` @tetherto/mdk-react-devkit/foundation Position descriptor for a device inside a container (PDU/socket coordinates). ```tsx type ContainerPosInfo = { containerInfo: Partial<{ container: string; type: string }> pdu: string | number socket: string | number pos: string [key: string]: unknown } ``` #### `ContainerLast` @tetherto/mdk-react-devkit/foundation Last-snapshot wrapper for a container. ```tsx type ContainerLast = { snap: { stats?: Partial } alerts: unknown[] | null err: string | null } ``` #### `ContainerSnap` @tetherto/mdk-react-devkit/foundation The `snap` payload found on `DeviceLast.snap` for both miners and containers. `stats` is what most components read. ```tsx type ContainerSnap = { stats?: Partial config?: Record } ``` #### `ContainerStats` @tetherto/mdk-react-devkit/foundation The big stats blob produced by every container snapshot. ```tsx type ContainerStats = { status: string ambient_temp_c: number humidity_percent: number power_w: number container_specific: Partial distribution_box1_power_w: number distribution_box2_power_w: number stats: Record temperature_c: Partial frequency_mhz: Partial miner_specific: Partial [key: string]: unknown } ``` `status` is one of `running`, `offline`, `stopped` (see `CONTAINER_STATUS` in [Constants](/reference/app-toolkit/ui-kit/constants#foundation-constants)). #### `ContainerSpecific` @tetherto/mdk-react-devkit/foundation Container-specific stats (currently the PDU array). ```tsx type ContainerSpecific = { pdu_data: Partial[] [key: string]: unknown } ``` #### `ContainerPduData` @tetherto/mdk-react-devkit/foundation Per-PDU power and status reading. ```tsx type ContainerPduData = { power_w: number status: number } ``` #### `StatsTemperatureC` @tetherto/mdk-react-devkit/foundation Temperature stats with per-chip detail. ```tsx type StatsTemperatureC = { avg: number min: number max: number chips: TempChipData[] [key: string]: unknown } ``` #### `StatsFrequencyMhz` @tetherto/mdk-react-devkit/foundation Frequency stats with per-chip detail. ```tsx type StatsFrequencyMhz = { avg: number chips: ChipData[] [key: string]: unknown } ``` #### `ChipData` / `TempChipData` @tetherto/mdk-react-devkit/foundation Per-chip readings. ```tsx type ChipData = { index: number current: number } type TempChipData = { index: number max?: number min?: number avg?: number } ``` #### `MinerSpecificStats` @tetherto/mdk-react-devkit/foundation Miner-specific stats blob. ```tsx type MinerSpecificStats = { upfreq_speed: number [key: string]: unknown } ``` ### Miner types #### `MinerStats` @tetherto/mdk-react-devkit/foundation Per-miner stats reported on each snapshot. ```tsx type MinerStats = { status?: string uptime_ms?: number power_w?: number hashrate_mhs?: MinerHashrateMhs poolHashrate?: string temperature_c?: { max?: number } } ``` #### `MinerHashrateMhs` @tetherto/mdk-react-devkit/foundation Hashrate readings, currently just the rolling 5-minute window. ```tsx type MinerHashrateMhs = { t_5m?: number } ``` #### `MinerInfo` @tetherto/mdk-react-devkit/foundation Identifying info for a miner (used by miner record cards). ```tsx type MinerInfo = { container?: string pos?: string macAddress?: string serialNum?: string } ``` #### `MinerConfig` @tetherto/mdk-react-devkit/foundation Mutable miner configuration. ```tsx type MinerConfig = { firmware_ver?: string power_mode?: string led_status?: boolean } ``` `power_mode` values come from `MINER_POWER_MODE` (`sleep`, `low`, `normal`, `high`). #### `MinerDeviceSnapshot` @tetherto/mdk-react-devkit/foundation Lightweight snapshot wrapper holding only `MinerConfig`. ```tsx type MinerDeviceSnapshot = { last?: { snap?: { config?: MinerConfig } } } ``` #### `MinerRecord` @tetherto/mdk-react-devkit/foundation Combined miner record used by list/table views. ```tsx type MinerRecord = { id?: string shortCode?: string info?: MinerInfo address?: string type?: string alerts?: unknown[] stats?: MinerStats config?: MinerConfig device?: MinerDeviceSnapshot error?: string err?: string isPoolStatsEnabled?: boolean } ``` ### Power and cabinet types #### `PowerMeter` @tetherto/mdk-react-devkit/foundation Minimal power meter reading shape. ```tsx type PowerMeter = { last?: { snap?: { stats?: { power_w?: number } } } } ``` #### `LvCabinetRecord` @tetherto/mdk-react-devkit/foundation LV cabinet record carrying its associated power meters. ```tsx type LvCabinetRecord = { id: string powerMeters?: PowerMeter[] } ``` ### Config types #### `GlobalConfig` @tetherto/mdk-react-devkit/foundation Site-wide configuration from your API or store, including nominal targets for reporting dashboards. Load this shape in your app from your API or store and pass it into foundation reporting UI as needed. ```tsx type GlobalConfig = { nominalSiteHashrate_MHS?: number nominalAvailablePowerMWh?: number nominalPowerConsumption_MW?: number nominalWeightedAvgEfficiency_WThs?: number nominalMinerCapacity?: number isAutoSleepAllowed?: boolean siteEnergyDataThresholdMWh?: number [key: string]: unknown } ``` | Field | Type | Description | |-------|------|-------------| | `nominalSiteHashrate_MHS` | `number` | Nominal site hashrate (MH/s) | | `nominalAvailablePowerMWh` | `number` | Nominal available power (MWh on the wire) | | `nominalPowerConsumption_MW` | `number` | Nominal power consumption (MW) | | `nominalWeightedAvgEfficiency_WThs` | `number` | Nominal weighted average efficiency (W/TH) | | `nominalMinerCapacity` | `number` | Nominal miner capacity | | `isAutoSleepAllowed` | `boolean` | Whether auto-sleep is permitted for the site | | `siteEnergyDataThresholdMWh` | `number` | Energy data threshold (MWh) | | `[key: string]` | `unknown` | Additional API fields without breaking the type | ### Timeline chart types Types for [`TimelineChart`](/reference/ui/react/foundation/components/charts/TimelineChart) in `@tetherto/mdk-react-devkit/foundation`. Each segment uses `x: [startMs, endMs]` and `y` matching a row in `labels`. #### `TimelineChartDataPoint` @tetherto/mdk-react-devkit/foundation One horizontal segment on a timeline row. ```tsx type TimelineChartDataPoint = { x: [number, number] y: string | undefined } ``` | Field | Type | Description | |-------|------|-------------| | `x` | `[number, number]` | Segment start and end (epoch ms) | | `y` | `string \| undefined` | Row label; must match an entry in `TimelineChartData.labels` | #### `TimelineChartDataset` @tetherto/mdk-react-devkit/foundation A named group of segments (legend entry). ```tsx type TimelineChartDataset = { label: string data: TimelineChartDataPoint[] borderColor?: string[] backgroundColor?: string[] color?: string } ``` #### `TimelineChartData` @tetherto/mdk-react-devkit/foundation Full payload for `initialData` and `newData`. ```tsx type TimelineChartData = { labels: string[] datasets: TimelineChartDataset[] } ``` | Field | Type | Description | |-------|------|-------------| | `labels` | `string[]` | Row names (Y axis) | | `datasets` | `TimelineChartDataset[]` | Segment groups keyed by `label` | #### `ChartRange` @tetherto/mdk-react-devkit/foundation Visible time window for the `range` prop. ```tsx type ChartRange = { min: Date | number max: Date | number } ``` #### `AxisTitleText` @tetherto/mdk-react-devkit/foundation Axis title strings for `axisTitleText`. ```tsx type AxisTitleText = { x: string y: string } ``` ### Metrics efficiency types Types for **`/auth/metrics/efficiency`**, used by the site view tab on [`OperationsEfficiency`](/reference/ui/react/foundation/components/tables/OperationsEfficiency). #### `MetricsEfficiencyLogEntry` @tetherto/mdk-react-devkit/foundation One point on the site efficiency time series. ```tsx type MetricsEfficiencyLogEntry = { ts: number efficiencyWThs: number } ``` | Field | Type | Description | |-------|------|-------------| | `ts` | `number` | Timestamp (epoch ms) | | `efficiencyWThs` | `number` | Site efficiency (W/TH) at `ts` | #### `MetricsEfficiencySummary` @tetherto/mdk-react-devkit/foundation Summary block returned with the efficiency metrics response. ```tsx type MetricsEfficiencySummary = { avgEfficiencyWThs: number | null } ``` #### `MetricsEfficiencyResponse` @tetherto/mdk-react-devkit/foundation Wrapper for the efficiency metrics endpoint (`log` entries plus summary), using the shared `MetricsResponse` shape from `@tetherto/mdk-react-devkit/foundation`. ### Settings types #### `SettingsUser` @tetherto/mdk-react-devkit/foundation A user record as it appears in user-management lists. ```tsx type SettingsUser = { id: string name?: string email: string role: string last_login?: string lastActive?: string [key: string]: unknown } ``` #### `RoleOption` @tetherto/mdk-react-devkit/foundation Role option for select dropdowns. Also exported as the array `USER_ROLES` in [Constants](/reference/app-toolkit/ui-kit/constants#foundation-constants). ```tsx type RoleOption = { label: string value: string } ``` #### `PermLevel` @tetherto/mdk-react-devkit/foundation Permission level values. ```tsx type PermLevel = 'rw' | 'r' | false ``` #### `RolesPermissionsData` @tetherto/mdk-react-devkit/foundation The shape consumed by [`RBACControlSettings`](/reference/ui/react/foundation/components/settings/RBACControlSettings). ```tsx type RolesPermissionsData = { permissions: Record> labels: Record } ``` #### `SettingsExportData` @tetherto/mdk-react-devkit/foundation The export envelope produced and consumed by [`ImportExportSettings`](/reference/ui/react/foundation/components/settings/ImportExportSettings). Generic `TExtra` lets you attach app-specific extras. ```tsx type SettingsExportData = Record> = { headerControls?: Record featureFlags?: Record timestamp?: string version?: string } & TExtra ``` #### `ImportResult` @tetherto/mdk-react-devkit/foundation Result returned from settings import operations. ```tsx type ImportResult = { success: boolean applied?: string[] errors?: string[] message?: string } ``` # Utilities (/reference/app-toolkit/ui-kit/utilities) This page documents helper functions exported by the MDK packages. - [Core utilities](#core-utilities) ships **15 utility modules** with functions for formatting, dates, validation, conversions, class-name merging, and more - [Foundation utilities](#foundation-utilities) currently ships a single public utility module (`settings-utils`) for parsing, validating, and exporting settings JSON - [UI core alert utilities](#ui-core-alert-utilities) ships query-parameter builders and time-range chunking helpers for the Alerts feature ## Core utilities Helper functions exported by `@tetherto/mdk-react-devkit/core` for formatting, dates, validation, conversions, and class-name merging. ### Prerequisites - Complete the [@tetherto/mdk-react-devkit installation and add the dependency](/reference/ui/react/core#prerequisites) ### Import @tetherto/mdk-react-devkit/core ```tsx formatNumber, formatHashrate, formatDate, formatRelativeTime, cn, isEmpty, isValidEmail, } from '@tetherto/mdk-react-devkit/core' ``` ### Formatting utilities #### `formatNumber` @tetherto/mdk-react-devkit/core Format numbers with locale formatting and configurable options. ```tsx formatNumber(1234.567) // "1,234.57" formatNumber(null) // "-" formatNumber(1234, { minimumFractionDigits: 2 }) // "1,234.00" formatNumber(undefined, {}, 'N/A') // "N/A" ``` #### `formatHashrate` @tetherto/mdk-react-devkit/core Format hashrate values with rounding. ```tsx formatHashrate(150.456) // "150.46" formatHashrate(null) // "-" ``` #### `formatCurrency` @tetherto/mdk-react-devkit/core Format currency values. ```tsx formatCurrency(1234.56, 'USD') // "$1,234.56" formatCurrency(0.00012345, 'BTC') // "₿0.00012345" ``` #### `getPercentFormattedNumber` @tetherto/mdk-react-devkit/core Format numbers as percentages. ```tsx getPercentFormattedNumber(0.75) // "75%" getPercentFormattedNumber(0.1234, 1) // "12.3%" ``` #### `formatValueUnit` @tetherto/mdk-react-devkit/core Format value-unit objects. ```tsx formatValueUnit(150, 'TH/s') // "150 TH/s" ``` ### Date utilities #### `formatDate` @tetherto/mdk-react-devkit/core Format dates with customizable patterns. ```tsx formatDate(new Date()) // "Jan 15, 2025" formatDate(1705334400000, { format: 'yyyy-MM-dd' }) // "2025-01-15" ``` #### `formatRelativeTime` @tetherto/mdk-react-devkit/core Format dates as relative time strings. ```tsx formatRelativeTime(new Date(Date.now() - 3600000)) // "1h ago" formatRelativeTime(new Date(Date.now() - 86400000)) // "1d ago" ``` #### `formatChartDate` @tetherto/mdk-react-devkit/core Format timestamps for chart display. ```tsx formatChartDate(1705334400) // "Jan 15" formatChartDate(1705334400, true) // "Jan 15, 2025" ``` #### `isValidTimestamp` @tetherto/mdk-react-devkit/core Check if a timestamp is valid. ```tsx isValidTimestamp(1705334400000) // true isValidTimestamp('invalid') // false ``` #### `parseMonthLabelToDate` @tetherto/mdk-react-devkit/core Parse month labels to `Date` objects. ```tsx parseMonthLabelToDate('01-26') // Date(2026, 0, 1) parseMonthLabelToDate('03-2025') // Date(2025, 2, 1) ``` #### `getPastDateFromDate` @tetherto/mdk-react-devkit/core Get a date in the past. ```tsx getPastDateFromDate({ dateTs: Date.now(), days: 7 }) // 7 days ago ``` ### Validation utilities #### `isEmpty` @tetherto/mdk-react-devkit/core Check if a value is empty. ```tsx isEmpty(null) // true isEmpty('') // true isEmpty([]) // true isEmpty({}) // true isEmpty('hello') // false isEmpty([1, 2, 3]) // false ``` #### `isValidEmail` @tetherto/mdk-react-devkit/core Validate email addresses. ```tsx isValidEmail('user@example.com') // true isValidEmail('invalid') // false ``` #### `isValidUrl` @tetherto/mdk-react-devkit/core Validate URLs. ```tsx isValidUrl('https://example.com') // true isValidUrl('not-a-url') // false ``` #### `isNil` @tetherto/mdk-react-devkit/core Check if value is `null` or `undefined`. ```tsx isNil(null) // true isNil(undefined) // true isNil(0) // false isNil('') // false ``` #### `isPlainObject` @tetherto/mdk-react-devkit/core Check if value is a plain object. ```tsx isPlainObject({}) // true isPlainObject({ a: 1 }) // true isPlainObject([]) // false isPlainObject(new Date()) // false ``` ### Class name utilities #### `cn` @tetherto/mdk-react-devkit/core Merge class names using [clsx](https://github.com/lukeed/clsx) and [tailwind-merge](https://github.com/dcastil/tailwind-merge). ```tsx cn('px-4', 'py-2') // "px-4 py-2" cn('text-red', isError && 'bg-red') // conditional classes cn('p-4', { 'hidden': !visible }) // object syntax ``` ### Conversion utilities #### `toMW` / `toMWh` @tetherto/mdk-react-devkit/core Convert watts to megawatts. ```tsx toMW(1000000) // 1 toMWh(1000000) // 1 ``` #### `toPHS` @tetherto/mdk-react-devkit/core Convert raw hashrate to `PH/s`. ```tsx toPHS(1000000000000000) // 1 ``` #### `convertMpaToBar` @tetherto/mdk-react-devkit/core Convert pressure units. ```tsx convertMpaToBar(0.1) // 1 ``` #### `unitToKilo` @tetherto/mdk-react-devkit/core Convert to kilo units. ```tsx unitToKilo(1000) // 1 ``` ### Number utilities #### `percentage` @tetherto/mdk-react-devkit/core Calculate percentage. ```tsx percentage(25, 100) // 25 percentage(1, 4) // 25 ``` #### `getPercentChange` @tetherto/mdk-react-devkit/core Calculate percentage change. ```tsx getPercentChange(110, 100) // 10 getPercentChange(90, 100) // -10 ``` #### `convertUnits` @tetherto/mdk-react-devkit/core Convert between SI-prefix units. ```tsx convertUnits(1, 'k', 'M') // 0.001 convertUnits(1000, 'decimal', 'k') // 1 ``` #### `safeNumber` @tetherto/mdk-react-devkit/core Safely convert to number. ```tsx safeNumber('123') // 123 safeNumber('invalid') // 0 safeNumber(null) // 0 ``` ### String utilities #### `toTitleCase` @tetherto/mdk-react-devkit/core Convert string to Title Case. ```tsx toTitleCase('hello world') // "Hello World" ``` #### `formatMacAddress` @tetherto/mdk-react-devkit/core Format MAC addresses. ```tsx formatMacAddress('aa:bb:cc:dd:ee:ff') // "AA:BB:CC:DD:EE:FF" ``` #### `safeString` @tetherto/mdk-react-devkit/core Safely convert to string. ```tsx safeString(123) // "123" safeString(null) // "" ``` ### Time utilities #### `secondsToMs` @tetherto/mdk-react-devkit/core Convert seconds to milliseconds. ```tsx secondsToMs(60) // 60000 ``` #### `breakTimeIntoIntervals` @tetherto/mdk-react-devkit/core Split `[start, end]` into consecutive windows of `intervalMs`. Re-exported from `@tetherto/mdk-ui-core`. ```tsx breakTimeIntoIntervals(start, end, 3_600_000) // Array of 1-hour { start, end } windows ``` #### `timeRangeWalker` @tetherto/mdk-react-devkit/core Generator for iterating through time ranges. ```tsx for (const interval of timeRangeWalker(start, end, duration)) { // Process each interval } ``` ### Color utilities #### `hexToRgba` @tetherto/mdk-react-devkit/core Convert hex color to rgba. ```tsx hexToRgba('#72F59E', 0.5) // "rgba(114, 245, 158, 0.5)" ``` ### Array utilities #### `getNestedValue` @tetherto/mdk-react-devkit/core Get nested value by dot-path. ```tsx getNestedValue({ a: { b: 1 } }, 'a.b') // 1 ``` #### `getWeightedAverage` @tetherto/mdk-react-devkit/core Calculate weighted average. ```tsx getWeightedAverage(items, 'value', 'weight') ``` #### `circularArrayAccess` @tetherto/mdk-react-devkit/core Create infinite cycling generator. ```tsx const colors = circularArrayAccess(['red', 'green', 'blue']) colors.next().value // 'red' colors.next().value // 'green' colors.next().value // 'blue' colors.next().value // 'red' (cycles) ``` ## Foundation utilities Helpers exported by `@tetherto/mdk-react-devkit/foundation` for filtering, formatting, validating, parsing, and exporting settings data. ### Prerequisites - Complete the [@tetherto/mdk-react-devkit installation and add the dependency](/reference/ui/react/foundation#prerequisites) ### Import @tetherto/mdk-react-devkit/foundation ```tsx filterUsers, formatRoleLabel, formatLastActive, validateSettingsJson, parseSettingsFile, exportSettingsToFile, } from '@tetherto/mdk-react-devkit/foundation' ``` ### Settings utilities #### `filterUsers` @tetherto/mdk-react-devkit/foundation Filter a `SettingsUser[]` list by email substring (case-insensitive) and exact role match. Used by the user-management table search. ```tsx filterUsers({ users, email: 'alice', // partial, case-insensitive match on user.email role: 'admin', // exact match on user.role; pass null to skip }) ``` | Parameter | Type | Description | |-----------|------|-------------| | `users` | `SettingsUser[]` | Source list | | `email` | `string \| null \| undefined` | Substring filter on `email` (case-insensitive). Skipped when falsy. | | `role` | `string \| null \| undefined` | Exact role match. Skipped when falsy. | #### `formatRoleLabel` @tetherto/mdk-react-devkit/foundation Convert a snake case role identifier to a human-readable Title Case label. ```tsx formatRoleLabel('site_manager') // "Site Manager" formatRoleLabel('reporting_tool_manager') // "Reporting Tool Manager" formatRoleLabel('admin') // "Admin" ``` #### `formatLastActive` @tetherto/mdk-react-devkit/foundation Format a timestamp string as `MM/DD/YYYY - HH:MM`. Returns `'-'` when the input is missing or invalid. ```tsx formatLastActive('2025-01-15T14:30:00Z') // "01/15/2025 - 14:30" formatLastActive(undefined) // "-" formatLastActive('not-a-date') // "-" ``` #### `validateSettingsJson` @tetherto/mdk-react-devkit/foundation Type-guard that checks whether an unknown value is a valid `SettingsExportData`. Returns `true` if the value is an object that contains at least one of `headerControls`, `featureFlags`, or `timestamp`. ```tsx if (validateSettingsJson(parsed)) { // parsed is now narrowed to SettingsExportData } ``` #### `parseSettingsFile` @tetherto/mdk-react-devkit/foundation Read a `File` containing settings JSON, validate it, and resolve to `SettingsExportData`. Rejects on invalid JSON, an invalid format, or a file read error. ```tsx try { const settings = await parseSettingsFile(file) applySettings(settings) } catch (err) { notifyError('Could not import settings', err.message) } ``` | Throws | Reason | |--------|--------| | `` `Invalid settings file format. Please ensure the file is a valid ${WEBAPP_NAME} settings export.` `` | The JSON parsed but didn't match the `SettingsExportData` shape. The literal interpolates [`WEBAPP_NAME`](/reference/app-toolkit/ui-kit/constants#webapp_name). | | `Failed to parse JSON file. Please ensure the file is valid JSON.` | The file contents weren't valid JSON. | | `Failed to read file.` | The browser couldn't read the file. | #### `exportSettingsToFile` @tetherto/mdk-react-devkit/foundation Serialize `SettingsExportData` to JSON, package it as a downloadable Blob, and trigger a browser download. Returns the generated filename (e.g., `mdk-settings-2025-01-15T14-30-00-000Z.json`). The filename prefix is fixed in the foundation kit and does not interpolate [`WEBAPP_NAME`](/reference/app-toolkit/ui-kit/constants#webapp_name). ```tsx const filename = exportSettingsToFile({ headerControls: { poolMiners: true, consumption: false }, featureFlags: { betaCharts: true }, timestamp: new Date().toISOString(), version: '1.0.0', }) ``` ## UI core alert utilities `@tetherto/mdk-ui-core` ships two utility modules for the Alerts feature: query-parameter builders (`alert-queries`) and time-range chunking helpers (`historical-log-chunks`). These are the source consumed directly by the `useCurrentAlertDevices` and `useHistoricalAlerts` adapter hooks. ### Prerequisites - Complete the [@tetherto/mdk-ui-core installation](/reference/app-toolkit/ui-core) ### Import @tetherto/mdk-ui-core ```tsx ONE_DAY_MS, DEFAULT_HISTORICAL_WINDOW_MS, getDefaultHistoricalAlertsRange, buildCurrentAlertDevicesParams, buildHistoricalAlertsParams, breakTimeIntoIntervals, mergeAlertsByUuid, fetchHistoricalAlertsInChunks, } from '@tetherto/mdk-ui-core' ``` ### Alert query builders #### `ONE_DAY_MS` @tetherto/mdk-ui-core One day in milliseconds (`86_400_000`). The fetch-window size used by the historical-alerts data path. ```tsx ONE_DAY_MS // 86400000 ``` #### `DEFAULT_HISTORICAL_WINDOW_MS` @tetherto/mdk-ui-core Default historical-alerts look-back window — 14 days (`14 * ONE_DAY_MS`). Matches the devkit [`Alerts`](/reference/ui/react/foundation/components/tables/Alerts) feature default; wider ranges fan out into more 24-hour requests. ```tsx DEFAULT_HISTORICAL_WINDOW_MS // 1209600000 (14 days in ms) ``` #### `getDefaultHistoricalAlertsRange` @tetherto/mdk-ui-core Returns the default historical-alerts range: the last `DEFAULT_HISTORICAL_WINDOW_MS` ending now. Used by the devkit [`Alerts`](/reference/ui/react/foundation/components/tables/Alerts) feature and the shell Alerts page to seed their range state. Pass `now` to fix the upper bound in tests. ```tsx const range = getDefaultHistoricalAlertsRange() // { start: <14 days ago>, end: } // Injectable for tests getDefaultHistoricalAlertsRange(1_700_000_000_000) // { start: 1_700_000_000_000 - DEFAULT_HISTORICAL_WINDOW_MS, end: 1_700_000_000_000 } ``` | Parameter | Status | Type | Default | Description | |-----------|--------|------|---------|-------------| | `now` | Optional | `number` | `Date.now()` | Upper bound of the window (ms epoch). | #### `buildCurrentAlertDevicesParams` @tetherto/mdk-ui-core Builds the `list-things` query params for the current-alerts table: every device that currently carries one or more alerts, with a 1 000 device limit. Consumed by `useCurrentAlertDevices`. `filterTags` widen the server-side selector so the fetch narrows with the active search chips (`ip-`, `sn-`, `mac-`, `firmware-`) instead of relying on client-side filtering alone. ```tsx // All devices with active alerts const params = buildCurrentAlertDevicesParams() // Narrowed to devices matching the active search chips const filtered = buildCurrentAlertDevicesParams(['ip-192.168.1.1', 'sn-ABC123']) ``` | Parameter | Status | Type | Default | Description | |-----------|--------|------|---------|-------------| | `filterTags` | Optional | `string[]` | `[]` | Active alert search chips to narrow the selector server-side. | #### `buildHistoricalAlertsParams` @tetherto/mdk-ui-core Builds the `history-log` query params for a single alerts window (`logType: 'alerts'`). Called once per 24-hour sub-window by the chunked fetch. ```tsx const params = buildHistoricalAlertsParams({ start: range.start, end: range.end }) // { logType: 'alerts', start: ..., end: ... } ``` | Parameter | Status | Type | Default | Description | |-----------|--------|------|---------|-------------| | `range` | Required | `HistoricalAlertsRange` | none | `{ start: number; end: number }` — ms epoch bounds for the window. | ### Historical alert chunking #### `breakTimeIntoIntervals` @tetherto/mdk-ui-core Splits `[start, end]` into consecutive windows of `intervalMs` (default `ONE_DAY_MS`); the final window is clamped to `end`. Returns an empty array for an empty or inverted range. ```tsx // 24-hour windows (default) const windows = breakTimeIntoIntervals(start, end) // Custom window size const hourly = breakTimeIntoIntervals(start, end, 3_600_000) ``` | Parameter | Status | Type | Default | Description | |-----------|--------|------|---------|-------------| | `start` | Required | `number` | none | Range start (ms epoch). | | `end` | Required | `number` | none | Range end (ms epoch). | | `intervalMs` | Optional | `number` | `ONE_DAY_MS` | Window size in ms. | Returns `TimeInterval[]` where each element is `{ start: number; end: number }`. #### `mergeAlertsByUuid` @tetherto/mdk-ui-core Concatenates `next` onto `prev`, replacing any row that shares a `uuid` (later windows win) and appending the rest. Rows without a `uuid` are always appended. ```tsx const merged = mergeAlertsByUuid(previousAlerts, newAlerts) ``` | Parameter | Status | Type | Default | Description | |-----------|--------|------|---------|-------------| | `prev` | Required | `T[]` | none | Existing alert rows. | | `next` | Required | `T[]` | none | Rows from the latest window fetch. | Returns `T[]` where `T extends { uuid?: string }`. #### `fetchHistoricalAlertsInChunks` @tetherto/mdk-ui-core Fetches a historical-alerts range as successive 24-hour windows (oldest to newest), merging results by `uuid`. Individual window failures are swallowed so one bad request does not drop the whole range. The loop bails out early when `options.signal` is aborted. ```tsx fetchHistoricalAlertsInChunks, buildHistoricalAlertsParams, } from '@tetherto/mdk-ui-core' const alerts = await fetchHistoricalAlertsInChunks( { start: range.start, end: range.end }, async (window) => { const result = await myApi.historyLog(buildHistoricalAlertsParams(window)) return result.data }, { signal: abortController.signal }, ) ``` | Parameter | Status | Type | Default | Description | |-----------|--------|------|---------|-------------| | `range` | Required | `{ start: number; end: number }` | none | Full date range to paginate over (ms epoch). | | `fetchWindow` | Required | `function` | none | Called once per 24-hour window, oldest first. Receives a `TimeInterval` and returns `Promise`. | | `options.intervalMs` | Optional | `number` | `ONE_DAY_MS` | Window size in ms. | | `options.signal` | Optional | `AbortSignal` | none | Checked between windows — aborts the loop early on range changes. | # Glossary (/reference/glossary) This page provides explanations for terms that new users may not be familiar with. - [Stack](#stack-and-hardware-terms) - [HRPC](#hyperswarm-rpc) ## Stack and hardware terms This section explains the terms you need to familiarize yourself with, using an Antminer rack as an example. | Term | What it is | Lives at | | --- | --- | --- | | **Kernel** (Orchestration Kernel) | The pull-only kernel that owns the device registry, routes commands, and aggregates telemetry. | [`backend/core/kernel/index.js`](https://github.com/tetherto/mdk/blob/main/backend/core/kernel/index.js) | | **Gateway** | The developer-owned entry point between non-Node clients (UI, AI agents) and Kernel. Mandatory whenever a non-Node consumer reaches the kernel; not used in the in-process Antminer-rack example below. | [`backend/core/gateway/`](https://github.com/tetherto/mdk/blob/main/backend/core/gateway/worker.js) | | **Worker** | A device-family translator. Speaks the MDK Protocol upward to Kernel and the vendor's native API downward to one device family (one miner brand, one container type, one pool API). | [`backend/workers/docs/install-pattern.md`](https://github.com/tetherto/mdk/blob/main/backend/workers/docs/install-pattern.md) | | **Manager class** | The JavaScript class a Worker exports, one per supported device model. Instances drive a single rack of devices. | e.g. `AM_S19XP`, `AM_S21` in [`backend/workers/miners/antminer/index.js`](https://github.com/tetherto/mdk/blob/main/backend/workers/miners/antminer/index.js) | | **Thing** | One registered device instance. Created by calling `manager.registerThing({ info, opts })`. Identified by a generated `deviceId`. | runtime, in `manager.mem.things` | ### How they compose, for an Antminer rack ```mermaid flowchart TB subgraph clientLayer ["Your code"] Client["your script (e.g., client.js)"] end subgraph kernel ["Kernel"] Kernel["Kernel
device registry · command routing · telemetry pull"] end subgraph workerLayer ["Antminer Worker"] AntminerWorker["e.g., AM_S21PRO"] end subgraph devices ["Antminer devices (real or mock)"] Miners["Antminers (HTTP / digest auth)"] end Client -->|"HRPC"| Kernel Kernel -->|"HRPC"| AntminerWorker AntminerWorker --> Miners ``` The same shape repeats for every other device family (Whatsminer, container vendors, pool APIs). For a multi-Worker view, parallel Workers, and multi-site deployments, see [`architecture.md#scaling`](/concepts/architecture#scaling). ## Hyperswarm RPC MDK uses [`@hyperswarm/rpc`](https://github.com/holepunchto/rpc) as its runtime transport. Hyperswarm RPC (HRPC) is not an HTTP-based RPC system. It is an RPC layer that rides on Hyperswarm peer-to-peer connectivity. The library is a simple RPC over the Hyperswarm DHT, backed by `Protomux`. Think of it as a peer-to-peer remote function call system built on a DHT and an encrypted connection layer. **Mental model** — Hyperswarm finds peers and establishes connections; `Protomux` divides the connection into named channels; RPC defines the conversation — a caller names a method and receives a reply. A useful analogy is a phone call between peers — Hyperswarm helps the phones find each other and connect; `Protomux` splits the line into channels; RPC defines how one side asks for a method and the other side responds. **Practical implications:** - You work with services, methods, requests, and responses — not URLs and routes - The RPC-shaped API is identical across same-process, same-host, and distributed deployments; only the discovery mechanism changes (same-process registration, shared directory, or DHT topic) - Peers discover and communicate without a central HTTP server ### HRPC on the same host MDK uses HRPC as the single transport across all deployment shapes — same-process, same-host, and distributed. Every component is addressed by its public key, not by a socket path or hostname. The Gateway, a standalone Node.js script, and a remote service all connect the same way: ```js createMdkClient({ hrpc: { key } }) ``` The Noise handshake that HRPC performs on every connection authenticates by key, so Kernel's allowlist works identically whether the caller is on the same machine or a remote host. This is consistent with the broader Holepunch ecosystem philosophy — everything is a peer addressed by public key. When the peer is on the same machine it routes locally over the local network interface; the application code sees no difference. ## Next steps - You are ready to run the example in [Run the stack](/tutorials/backend-stack/run) - Learn more about: - Multi-process discovery across machines: [Worker discovery](/concepts/stack/workers) - Gateway implementation details (HTTP routing, JWT auth, RBAC) — see [`backend/core/gateway/worker.js`](https://github.com/tetherto/mdk/blob/main/backend/core/gateway/worker.js) - Building your own Worker for a new device family: see [`backend/workers/docs/install-pattern.md`](https://github.com/tetherto/mdk/blob/main/backend/workers/docs/install-pattern.md) - Per-device contract details (telemetry units, command shapes, error codes): those live in each Worker's `mdk-contract.json`, e.g. [`backend/workers/miners/antminer/mdk-contract.json`](https://github.com/tetherto/mdk/blob/main/backend/workers/miners/antminer/plugin/mdk-contract.json) # ORK reference (/reference/ork) `@tetherto/mdk-ork` is the orchestration kernel of the MDK stack. This subsection holds the canonical specs for its internal modules. For the architectural narrative explaining how these modules fit together, see [Kernel](/concepts/stack/kernel). ## What's documented - **[Modules](/reference/ork/modules)**: per-module responsibility, interfaces, state machines, transition rules, crash-recovery procedures, and scaling characteristics. # ORK modules (/reference/ork/modules) `@tetherto/mdk-ork`'s coordination splits across single-purpose modules. Each owns its own state machine, persistence boundary, and scaling characteristics. Six modules ship in v0.0.1; two more (Fault Supervisor, Concurrency Manager) are deferred to a later release. For the architectural overview that explains how these modules connect, see [Kernel](/concepts/stack/kernel). This page is the per-module spec. ## How to read this page Each accordion below covers one module: - **Responsibility**: what the module owns and the example commands or events it handles. - **Interfaces**: input and output channels, plus the public function names callers depend on. - **State machine**: the canonical diagram for the module's internal lifecycle. - **Crash recovery**: behavior on a fresh start, including how state is reconstructed. - **Scalability**: where the module can be extracted, sharded, or replicated. ## Modules **Responsibility**: validates incoming commands against the generic MDK schema, checks permissions, and resolves the correct worker based on the `deviceId`. *Example*: when an App Node sends a `reboot` command for `wm001`, the Dispatcher verifies that `wm001` exists, that `reboot` is a valid capability for it, then passes the request to the State Machine. **Interfaces**: - *Input*: receives generic commands via Holepunch RPC (HRPC) and the MDK Protocol from the App Node or MCP Handler. - *Output*: hands off validated commands to the Command State Machine. - *Functions*: `dispatchCommand(deviceId, action, payload)` **State machine**: ```mermaid stateDiagram-v2 [*] --> Validating Validating --> RoutingAction : Valid Validating --> Rejected : Invalid RoutingAction --> Enqueued Enqueued --> [*] ``` **Crash recovery**: none needed. In-flight requests fail and must be retried by the client. **Scalability**: extracted easily; can run independently to offload validation. **Responsibility**: tracks the execution lifecycle of every single command in the system. Receives execution results directly via the synchronous HRPC response. If the connection drops or a response is delayed, it relies on the Scheduler to fetch the latest status via `state.pull` so commands cannot hang. *Example*: once the `reboot` command is dispatched it transitions to `EXECUTING`. If the HRPC response returns OK it transitions to `SUCCESS`. If the response hangs, the next `state.pull` fetches the true status from the worker. **Interfaces**: - *Input*: receives validated commands from the Dispatcher; status updates from HRPC responses or Scheduler ticks. - *Output*: invokes the worker HRPC execution layer; emits terminal state results to the caller. - *Functions*: `enqueue(command)`, `syncState(commandId)`, `cancel(commandId)` **State machine**: ```mermaid stateDiagram-v2 [*] --> QUEUED QUEUED --> DISPATCHED DISPATCHED --> EXECUTING : HRPC sent EXECUTING --> SUCCESS : state.pull (response) EXECUTING --> FAILED : state.pull (error) EXECUTING --> TIMEOUT TIMEOUT --> QUEUED : Retry allowed TIMEOUT --> FAILED : Max retries SUCCESS --> [*] FAILED --> [*] ``` **Crash recovery**: on startup, performs a recovery sweep of pending commands. `DISPATCHED` and `EXECUTING` commands are forced to `TIMEOUT` (and re-queued if retries are available); `QUEUED` commands are left untouched. **Scalability**: requires state sharding (for example, by device or rack). **Responsibility**: the phonebook for the entire `@tetherto/mdk-ork` ecosystem. Maps which physical device IDs belong to which connected worker channels and stores their declared capabilities. *Example*: a `whatsminer-worker` connects and declares it manages `wm001` and `wm002`. The Registry saves this topology so the Dispatcher knows exactly where to route a command for `wm001`. **Interfaces**: - *Input*: `identity.register` requests from workers. - *Output*: internal events triggering full state lifecycle binding. - *Functions*: `resolveWorkerState(target)` **State machine**: ```mermaid stateDiagram-v2 [*] --> Unregistered Unregistered --> Discovered : DHT peer detected Discovered --> IdentitySaved : identity pulled IdentitySaved --> Ready : capabilities pulled Ready --> Terminated : eviction Terminated --> [*] ``` **Crash recovery**: rebuilt from state, which serves as a baseline to detect workers that were registered but failed to reconnect. **Scalability**: read-heavy by nature; can be extracted into a read-replica architecture or partitioned by region or rack. **Responsibility**: a lightweight proxy and routing layer between the upper system (UI / AI) and the downstream workers. Rather than `@tetherto/mdk-ork` performing heavy time-series aggregations, the *worker* is responsible for storing and aggregating data for the specific devices it controls. The Collector simply provides an interface to query this data and proxies the response up to the UI (via App Node) or the AI Agent. **Worker data handling (telemetry context)**: - *Compaction*: the worker handles compaction of metrics over large time frames. - *Local storage*: workers should save telemetry data in a local Hyper DB. - *As-requested serving*: the worker serves data strictly when `@tetherto/mdk-ork` asks for it, precisely as dictated by the telemetry schemas in `mdk-contract.json`. - *Internal scheduling*: to achieve this without blocking `@tetherto/mdk-ork`, the worker may run its own internal scheduler for device polling. **Interfaces**: - *Input*: client or AI telemetry queries (for example, "fetch metrics for device wm001"). - *Output*: normalized telemetry payloads passed straight through from the Worker to the requesting layer. - *Functions*: `proxyTelemetryFetch(deviceId, queryArgs)` **State machine**: ```mermaid stateDiagram-v2 [*] --> Idle Idle --> Proxying : Request received Proxying --> RoutingToClient : Worker returns data Proxying --> Timeout : Worker unresponsive RoutingToClient --> Idle ``` **Scalability**: because the heavy lifting of data storage and aggregation is pushed down into the isolated worker processes, the Collector remains stateless and highly scalable as a pure asynchronous router. **Responsibility**: the system metronome. Triggers repetitive tasks without holding any domain-specific logic itself. *Example*: emits an internal `tick` event every 5 seconds that the Health Monitor listens to, prompting it to ping all workers. **Interfaces**: - *Input*: system clock and configured task intervals. - *Output*: injects intents (for example, `telemetry.pull`, `health.ping`) into the Dispatcher or Collector. - *Functions*: `addJob(interval, intent)`, `removeJob(jobId)` **State machine**: ```mermaid stateDiagram-v2 [*] --> Waiting Waiting --> Triggered : Interval elapsed Triggered --> Waiting ``` **Crash recovery**: timers re-initialize from zero on startup. Tasks are strictly idempotent. **Scalability**: scales trivially. Requires basic distributed locking to avoid duplicate ticks in multi-process `@tetherto/mdk-ork` deployments. **Responsibility**: continuously evaluates the liveness and readiness of every registered worker to prevent routing messages to dead nodes. *Example*: if `health.ping` to a worker fails three times in a row, the Health Monitor marks the worker's status as `SICK` and tells the Registry to halt routing new commands there. **Interfaces**: - *Input*: executes `health.ping` sequentially based on Scheduler ticks. - *Output*: pushes status updates to the Registry. - *Functions*: `pingWorker(workerId)`, `getHealth(workerId)` **State machine**: ```mermaid stateDiagram-v2 [*] --> UNKNOWN UNKNOWN --> HEALTHY : Ping success HEALTHY --> SICK : Ping failed (1) SICK --> DEAD : Ping failed (threshold) SICK --> HEALTHY : Ping success DEAD --> HEALTHY : Reconnected ``` **Crash recovery**: blank slate on startup; re-evaluates all known workers immediately via ping. **Scalability**: operates locally per `@tetherto/mdk-ork` kernel, or via independent lightweight ping agents. **Idea**: implements circuit-breaker patterns to protect the overall system from cascading failures caused by bad hardware or software bugs (for example, rejecting commands during a cooling period after repeated errors). **Status**: deferred for the first cut to keep the core orchestrator simple. If the use case arises (such as complex retry backoffs or cluster destabilization), it will be reintroduced. **Idea**: provides guaranteed lock management and queue limits to ensure mutually exclusive commands do not overlap on physical devices. **Status**: deferred for the first cut. The system relies solely on the basic command queue. If explicit global locks or backpressure limits become necessary, this module will be built out. # Protocol reference (/reference/protocol) The MDK Protocol is the contract that crosses every layer of the stack: Workers, `@tetherto/mdk-ork`, and the App Node all exchange the same envelope. This subsection holds the canonical specs. For the architectural narrative explaining how the protocol fits together, see [Architecture](/concepts/architecture#the-mdk-protocol). ## What's documented - **[Messages](/reference/protocol/messages)**: envelope schema, request/response examples, the full action catalogue, and the base command set. # Protocol messages (/reference/protocol/messages) Every MDK Protocol message uses the same envelope regardless of which layers are talking. This page is the canonical spec for that envelope, the full set of protocol actions, and the base command set every worker must support. For the architectural narrative explaining when each action fires, see [Architecture](/concepts/architecture#the-mdk-protocol). ## Envelope ```json { "id": "uuid-v4", "version": "0.1.0", "type": "request | response | event", "action": "", "sender": "", "target": " | null", "deviceId": "string | null", "timestamp": 1711640000000, "payload": {} } ``` External consumers (UI or AI agents) only provide `deviceId`; the `target` worker identity is internally resolved by `@tetherto/mdk-ork`. A concrete request and response pair, end to end: ```json // request: App Node asks @tetherto/mdk-ork to reboot device wm001 { "id": "8d1c-e3a4", "version": "0.1.0", "type": "request", "action": "command.request", "sender": "appNode:fleet-api:1", "target": null, "deviceId": "wm001", "timestamp": 1711640000000, "payload": { "command": "reboot" } } // response: @tetherto/mdk-ork relays the worker's terminal result { "id": "1f9b-77c2", "version": "0.1.0", "type": "response", "action": "command.result", "sender": "ork:kernel:tx-1", "target": "appNode:fleet-api:1", "deviceId": "wm001", "timestamp": 1711640002145, "payload": { "status": "SUCCESS", "elapsedMs": 2145 } } ``` ## Actions | Action | Type | Direction | Purpose | |---|---|---|---| | *(DHT presence)* | passive | Worker to DHT topic | Worker joins a known Hyperswarm topic; `@tetherto/mdk-ork` detects its peer connection automatically | | `identity.request` | request | `@tetherto/mdk-ork` to Worker | Requests the worker's identity and managed devices | | `capability.request` | request | `@tetherto/mdk-ork` to Worker | Asks the worker to declare its full capability schema | | `state.pull` | request | `@tetherto/mdk-ork` to Worker | Worker returns a snapshot of state-machine status (low cadence tick, e.g., 60s) | | `telemetry.pull` | request | `@tetherto/mdk-ork` to Worker | Worker returns device metrics plus history (medium cadence tick, e.g., 10s) | | `command.request` | request | `@tetherto/mdk-ork` to Worker | Resolves the worker by `deviceId` and dispatches the command for execution | | `health.ping` | request | `@tetherto/mdk-ork` to Worker | Liveness probe (high cadence tick, e.g., 5s) | ## Base command set The protocol standardizes a Base Command Set supported by every worker: - `getConfig`: retrieve current device configuration - `setConfig`: update device configuration parameters - `health`: fetch detailed diagnostic health status from the device # Supported hardware (/reference/supported-hardware) ## Overview MDK integrates field hardware through Workers. Each Worker declares what it supports in its `mdk-contract.json`, and that contract is the single source of truth for coverage. Use this page to discover what Workers are supported. ## What MDK supports - **Miners**: For example, Bitmain Antminer, MicroBT Whatsminer - **Containers**: For example, Bitmain Antspace, Bitdeer - **Power meters**: For example, ABB, Satec - **Sensors**: For example, Seneca - **Mining pools**: Protocol integrations such as Ocean, F2Pool For the exact model lists, Worker packages, and per-Worker docs, see the generated catalogue: - [Full supported-hardware catalogue](https://github.com/tetherto/mdk/blob/main/backend/workers/docs/supported-hardware.md) — generated from every `backend/workers/**/mdk-contract.json` ## Next steps - New to the moving parts? Read [terminology](/reference/glossary) (Kernel, Worker, manager, thing, mock) - Decide how to run the Worker service — [Deployment topologies](/concepts/deployment-topologies) - Run a miner Worker — [Run a miner Worker](/guides/miners) # UI Kit (/reference/ui) ## TL;Dr Today the published React path is complete; other frameworks are on the [roadmap](/support/resources/roadmap) and will reuse the same headless core. The MDK React UI Kit is a [three-layer stack](#how-the-layers-fit-together): - [`@tetherto/mdk-ui-core`](/reference/app-toolkit/ui-core): headless Zustand stores and TanStack Query client factory (framework-agnostic) - [`@tetherto/mdk-react-adapter`](/quickstart/wire-react#wrap-your-app-in-mdkprovider): `` and store hooks; binds the core into your UI runtime (React today) - [`@tetherto/mdk-react-devkit`](/tutorials/ui/react): [`/core`](/reference/ui/react/core) primitives and [`/foundation`](/reference/ui/react/foundation) mining-domain components ## Framework quickstarts } title={React} href="/tutorials/ui/react" description={ Get started with the React MDK UI Kit } /> Vue} href="/support/resources/roadmap" description={ <> Reactive hooks for Vue via @tetherto/mdk-vue Learn about the release schedule → } /> Svelte} href="/support/resources/roadmap" description={ <> Reactive hooks for Svelte via @tetherto/mdk-svelte Learn about the release schedule → } /> Web Components} href="/support/resources/roadmap" description={ <> Framework-agnostic Web Components via @tetherto/wc Learn about the release schedule → } /> ## How the layers fit together The MDK React UI Kit and subsequent frameworks will share a similar architecture: ```mermaid graph TB subgraph headless [Layer 1: Headless] uiCore([mdk-ui-core
Zustand stores · Query client factory
Framework-agnostic]) end subgraph adapter [Layer 2: Framework adapter] reactAdapter([mdk-react-adapter
MdkProvider · store hooks
React today]) end subgraph uiLib [Layer 3: Framework UI library] reactDevkit([mdk-react-devkit
/core + /foundation
Primitives and mining-domain UI]) end uiCore --> reactAdapter reactAdapter --> reactDevkit style headless fill:#F7931A,stroke:#1A1A1A,color:#1A1A1A style adapter fill:#F7931A,stroke:#1A1A1A,color:#1A1A1A style uiLib fill:#F7931A,stroke:#1A1A1A,color:#1A1A1A ``` ## Next steps - [Quickstart](/quickstart/wire-react): integrate the three packages into your React app - [Explore the demo](/tutorials/ui/explore-the-demo): run the demo app in your browser # Fonts (/reference/ui/fonts) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # @tetherto/mdk-react-devkit (/reference/ui/react/core) [The core entrypoint](/support/resources/repositories) (`@tetherto/mdk-react-devkit/core`) provides the foundational **React** UI components, utilities, and theme system for the MDK React UI Kit. This is the `/core` subpath of the devkit package, not the framework-agnostic [`@tetherto/mdk-ui-core`](/reference/app-toolkit/ui-core) headless package. Mining-domain components, hooks, and settings live on the [`/foundation`](/reference/ui/react/foundation) entrypoint. Both subpaths are exported from `@tetherto/mdk-react-devkit`. ## Prerequisites - Complete the installation ```bash # Clone the MDK UI monorepo (adjust the URL to your fork if needed) git clone https://github.com/tetherto/mdk.git cd mdk/ui # Install dependencies and build packages (npm workspaces) npm install npm run build ``` - Add the dependency to your app's `package.json` ```json { "dependencies": { "@tetherto/mdk-react-devkit": "*", "@tetherto/mdk-react-adapter": "*", "@tetherto/mdk-ui-core": "*" } } ``` > **Coming soon** — npm packages are not yet published. Use the monorepo setup for now. ```bash npm install \ @tetherto/mdk-react-devkit \ @tetherto/mdk-react-adapter \ @tetherto/mdk-ui-core ``` Run `npm install` from the `mdk/ui` workspace root after your app is under `apps/` so npm links workspace packages. ## What's included ### Components Production-ready React components organized by category: | Category | Description | |----------|-------------| | [Forms](/reference/ui/react/core/components/forms) | Input and form control components | | Overlays | Dialogs, popovers, tooltips, and toasts | | Data display | Cards, tables, tags, and data presentation | | [Charts](/reference/ui/react/core/components/charts) | Data visualization components | | Navigation | Sidebar, tabs, and breadcrumbs | | Loading | Spinners, loaders, and progress indicators | | Errors | Error boundaries, error cards, and alerts | | Logs | Log display components | See the [Components reference](/reference/ui/react/core/components) for the full list with demo links. ### Icons 70+ purpose-built icons for Bitcoin mining applications: - Navigation icons (Dashboard, Farms, Inventory, etc.) - Status icons (Mining, Offline, Error, etc.) - Weather icons (Sunny, Cloudy, Rainy, etc.) - Alarm icons (Temperature, Pressure, Fluid, etc.) ### Utilities Helper functions for common operations: - [`formatNumber`](/reference/app-toolkit/ui-kit/utilities#formatnumber), [`formatHashrate`](/reference/app-toolkit/ui-kit/utilities#formathashrate), [`formatCurrency`](/reference/app-toolkit/ui-kit/utilities#formatcurrency): Number formatting - [`formatDate`](/reference/app-toolkit/ui-kit/utilities#formatdate), [`formatRelativeTime`](/reference/app-toolkit/ui-kit/utilities#formatrelativetime): Date formatting - [`cn`](/reference/app-toolkit/ui-kit/utilities#cn): Class name merging ([clsx](https://github.com/lukeed/clsx) wrapper) - Conversion utilities for energy, hashrate, and units - Validation utilities for email, URL, and empty checks ### Theme system CSS custom properties and utilities for consistent styling: - Color tokens (primary, gray scales) - Spacing scale - Border radius scale - Font size scale - Light/dark mode support ### Types TypeScript types for type-safe development: - [`ComponentSize`](/reference/app-toolkit/ui-kit/types#componentsize), [`ButtonVariant`](/reference/app-toolkit/ui-kit/types#buttonvariant), [`ColorVariant`](/reference/app-toolkit/ui-kit/types#colorvariant) - [`Status`](/reference/app-toolkit/ui-kit/types#status), [`PaginationParams`](/reference/app-toolkit/ui-kit/types#paginationparams), [`ApiResponse`](/reference/app-toolkit/ui-kit/types#apiresponse) - Chart types, table types, and utility types ## Reference Detailed reference material lives in the unified [Reference section](/reference). Core (`/core`) slices are: - [Constants](/reference/app-toolkit/ui-kit/constants#core-constants): colors, units, currency, chart configs - [Types](/reference/app-toolkit/ui-kit/types#core-types): UI primitives, API shapes, value-unit types - [Utilities](/reference/app-toolkit/ui-kit/utilities#core-utilities): formatting, validation, conversions, `cn` and friends ## Import examples ```tsx // Import components // Import utilities // Import types // Import icons // Import styles (required for component styling) ``` # Components (/reference/ui/react/core/components) The `@tetherto/mdk-react-devkit/core` package provides production-ready React components. All components are built with accessibility in mind and support both light and dark themes. ## Import ### Prerequisites - Complete the [installation](/quickstart/wire-react) ```bash # Clone the MDK UI monorepo (adjust the URL to your fork if needed) git clone https://github.com/tetherto/mdk.git cd mdk/ui # Install dependencies and build packages (npm workspaces) npm install npm run build ``` - Import the core styles in your app's entry point: ```tsx ``` ### Import named components Declare the components you require: ```tsx ``` ## Supported components Browse the categories in the sidebar for the full, always-up-to-date component list — each links to its own reference page (description, props, usage, and a runnable example). ## Styling Components use BEM-style CSS classes (e.g., `.mdk-button`, `.mdk-card__header`) for styling consistency and easy customization. ## Class name forwarding Every component forwards `className` to its root element, so you can apply layout or override styles without ejecting. This is assumed throughout and not repeated in every props table. Components with multiple styleable parts also expose **named** hooks (for example `contentClassName`, `indicatorClassName`, `dropdownClassName`) — those *are* listed in the relevant component's props table. ## Component design principles - **Composable**: Components are designed to work together - **Accessible**: Built with ARIA attributes and keyboard navigation - **Themeable**: Support light/dark modes via CSS custom properties - **Type-safe**: Full TypeScript support with exported prop types # ActionButton (/reference/ui/react/core/components/actions/ActionButton) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # Button (/reference/ui/react/core/components/actions/Button) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # MdkWordmark (/reference/ui/react/core/components/branding/MdkWordmark) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # Chart components (/reference/ui/react/core/components/charts) Chart components for visualizing time-series data, metrics, and statistics. Built on [Chart.js](https://www.chartjs.org/) and [Lightweight Charts](https://tradingview.github.io/lightweight-charts/), supporting: - Chart types: components that render datasets (`AreaChart`, `BarChart`, `DoughnutChart`, `GaugeChart`, `LineChart`) - Domain chart wrappers: opinionated chart components with preset layouts and series config (`AverageDowntimeChart`, `ThresholdLineChart`, `OperationsEnergyCostChart`) - Composition elements: layout chrome, legends, stats rows, and chart utilities (`ChartContainer`, `ChartStatsFooter`, `DetailLegend`, `MinMaxAvg`, helpers) ## Prerequisites - Complete the [@tetherto/mdk-react-devkit installation and add the dependency](/reference/ui/react/core#prerequisites) ## All chart type components Browse the sidebar for the full, always-up-to-date list — each chart component links to its own reference page (description, props, usage, and a runnable example). # AreaChart (/reference/ui/react/core/components/charts/AreaChart) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # AverageDowntimeChart (/reference/ui/react/core/components/charts/AverageDowntimeChart) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # BarChart (/reference/ui/react/core/components/charts/BarChart) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # ChartContainer (/reference/ui/react/core/components/charts/ChartContainer) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # ChartStatsFooter (/reference/ui/react/core/components/charts/ChartStatsFooter) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # DetailLegend (/reference/ui/react/core/components/charts/DetailLegend) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # DoughnutChart (/reference/ui/react/core/components/charts/DoughnutChart) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # GaugeChart (/reference/ui/react/core/components/charts/GaugeChart) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # Heatmap (/reference/ui/react/core/components/charts/Heatmap) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # HeatmapLegend (/reference/ui/react/core/components/charts/HeatmapLegend) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # LineChart (/reference/ui/react/core/components/charts/LineChart) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # MinMaxAvg (/reference/ui/react/core/components/charts/MinMaxAvg) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # OperationsEnergyCostChart (/reference/ui/react/core/components/charts/OperationsEnergyCostChart) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # ThresholdLineChart (/reference/ui/react/core/components/charts/ThresholdLineChart) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # AlertDialogAction (/reference/ui/react/core/components/dialogs/AlertDialogAction) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # AlertDialogCancel (/reference/ui/react/core/components/dialogs/AlertDialogCancel) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # AlertDialogContent (/reference/ui/react/core/components/dialogs/AlertDialogContent) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # AlertDialogDescription (/reference/ui/react/core/components/dialogs/AlertDialogDescription) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # AlertDialogFooter (/reference/ui/react/core/components/dialogs/AlertDialogFooter) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # AlertDialogHeader (/reference/ui/react/core/components/dialogs/AlertDialogHeader) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # AlertDialogOverlay (/reference/ui/react/core/components/dialogs/AlertDialogOverlay) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # AlertDialogTitle (/reference/ui/react/core/components/dialogs/AlertDialogTitle) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # DialogContent (/reference/ui/react/core/components/dialogs/DialogContent) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # DialogDescription (/reference/ui/react/core/components/dialogs/DialogDescription) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # DialogFooter (/reference/ui/react/core/components/dialogs/DialogFooter) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # DialogHeader (/reference/ui/react/core/components/dialogs/DialogHeader) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # DialogOverlay (/reference/ui/react/core/components/dialogs/DialogOverlay) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # DialogTitle (/reference/ui/react/core/components/dialogs/DialogTitle) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # Avatar (/reference/ui/react/core/components/display/Avatar) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # AvatarFallback (/reference/ui/react/core/components/display/AvatarFallback) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # AvatarImage (/reference/ui/react/core/components/display/AvatarImage) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # Badge (/reference/ui/react/core/components/display/Badge) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # BtcAveragePrice (/reference/ui/react/core/components/display/BtcAveragePrice) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # DataLabel (/reference/ui/react/core/components/display/DataLabel) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # Indicator (/reference/ui/react/core/components/display/Indicator) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # Tag (/reference/ui/react/core/components/display/Tag) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # Typography (/reference/ui/react/core/components/display/Typography) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # CoreAlert (/reference/ui/react/core/components/feedback/CoreAlert) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # EmptyState (/reference/ui/react/core/components/feedback/EmptyState) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # ErrorCard (/reference/ui/react/core/components/feedback/ErrorCard) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # Loader (/reference/ui/react/core/components/feedback/Loader) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # SkeletonBlock (/reference/ui/react/core/components/feedback/SkeletonBlock) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # Spinner (/reference/ui/react/core/components/feedback/Spinner) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # Toast (/reference/ui/react/core/components/feedback/Toast) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # Toaster (/reference/ui/react/core/components/feedback/Toaster) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # ListViewFilter (/reference/ui/react/core/components/filters/ListViewFilter) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # Form components (/reference/ui/react/core/components/forms) Form components handle user input and form submission. All components are built with accessibility in mind and support keyboard navigation. The category splits into three groups: - **Controls**: raw inputs you can drop in standalone or compose inside `` - **Composition**: the `` provider and the low-level building blocks (`FormField`, `FormItem`, `FormLabel`, `FormControl`, `FormDescription`, `FormMessage`) - **Prebuilt fields**: one-tag wrappers that bind a control to React hook form ## Prerequisites Before using these components, complete the [@tetherto/mdk-react-devkit installation](/reference/ui/react/core#prerequisites). ## All form components Browse the sidebar for the full, always-up-to-date list — each component links to its own reference page (description, props, usage, and a runnable example). Prebuilt fields (`FormCascader`, `FormInput`, etc.) additionally accept the [React Hook Form `Controller`](https://react-hook-form.com/docs/usecontroller/controller) props (`control`, `name`, `defaultValue`, `rules`, `shouldUnregister`, `disabled`) to bind them to a `` via `form.control`. # Cascader (/reference/ui/react/core/components/forms/Cascader) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # Checkbox (/reference/ui/react/core/components/forms/Checkbox) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # CurrencyToggler (/reference/ui/react/core/components/forms/CurrencyToggler) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # DatePicker (/reference/ui/react/core/components/forms/DatePicker) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # DateRangePicker (/reference/ui/react/core/components/forms/DateRangePicker) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # Form (/reference/ui/react/core/components/forms/Form) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # FormCascader (/reference/ui/react/core/components/forms/FormCascader) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # FormCheckbox (/reference/ui/react/core/components/forms/FormCheckbox) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # FormControl (/reference/ui/react/core/components/forms/FormControl) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # FormDatePicker (/reference/ui/react/core/components/forms/FormDatePicker) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # FormDescription (/reference/ui/react/core/components/forms/FormDescription) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # FormField (/reference/ui/react/core/components/forms/FormField) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # FormInput (/reference/ui/react/core/components/forms/FormInput) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # FormItem (/reference/ui/react/core/components/forms/FormItem) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # FormLabel (/reference/ui/react/core/components/forms/FormLabel) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # FormMessage (/reference/ui/react/core/components/forms/FormMessage) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # FormRadioGroup (/reference/ui/react/core/components/forms/FormRadioGroup) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # FormSelect (/reference/ui/react/core/components/forms/FormSelect) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # FormSwitch (/reference/ui/react/core/components/forms/FormSwitch) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # FormTagInput (/reference/ui/react/core/components/forms/FormTagInput) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # FormTextArea (/reference/ui/react/core/components/forms/FormTextArea) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # Input (/reference/ui/react/core/components/forms/Input) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # Label (/reference/ui/react/core/components/forms/Label) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # MultiLevelSelect (/reference/ui/react/core/components/forms/MultiLevelSelect) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # MultiSelect (/reference/ui/react/core/components/forms/MultiSelect) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # Radio (/reference/ui/react/core/components/forms/Radio) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # RadioCard (/reference/ui/react/core/components/forms/RadioCard) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # RadioGroup (/reference/ui/react/core/components/forms/RadioGroup) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # Select (/reference/ui/react/core/components/forms/Select) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # Switch (/reference/ui/react/core/components/forms/Switch) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # TagInput (/reference/ui/react/core/components/forms/TagInput) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # TextArea (/reference/ui/react/core/components/forms/TextArea) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # Accordion (/reference/ui/react/core/components/layout/Accordion) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # AccordionContent (/reference/ui/react/core/components/layout/AccordionContent) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # AccordionItem (/reference/ui/react/core/components/layout/AccordionItem) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # AccordionTrigger (/reference/ui/react/core/components/layout/AccordionTrigger) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # CardBody (/reference/ui/react/core/components/layout/CardBody) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # CardFooter (/reference/ui/react/core/components/layout/CardFooter) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # CardHeader (/reference/ui/react/core/components/layout/CardHeader) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # Divider (/reference/ui/react/core/components/layout/Divider) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # LabeledCard (/reference/ui/react/core/components/layout/LabeledCard) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # LazyTabWrapper (/reference/ui/react/core/components/layout/LazyTabWrapper) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # Mosaic (/reference/ui/react/core/components/layout/Mosaic) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # Tabs (/reference/ui/react/core/components/layout/Tabs) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # ArrowIcon (/reference/ui/react/core/components/media/ArrowIcon) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # LogActivityIcon (/reference/ui/react/core/components/monitoring/LogActivityIcon) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # LogDot (/reference/ui/react/core/components/monitoring/LogDot) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # LogItem (/reference/ui/react/core/components/monitoring/LogItem) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # LogRow (/reference/ui/react/core/components/monitoring/LogRow) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # LogsCard (/reference/ui/react/core/components/monitoring/LogsCard) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # AppHeader (/reference/ui/react/core/components/navigation/AppHeader) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # Breadcrumbs (/reference/ui/react/core/components/navigation/Breadcrumbs) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # Pagination (/reference/ui/react/core/components/navigation/Pagination) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # Sidebar (/reference/ui/react/core/components/navigation/Sidebar) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # Popover (/reference/ui/react/core/components/overlays/Popover) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # SimplePopover (/reference/ui/react/core/components/overlays/SimplePopover) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # SimpleTooltip (/reference/ui/react/core/components/overlays/SimpleTooltip) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # Tooltip (/reference/ui/react/core/components/overlays/Tooltip) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # NotFoundPage (/reference/ui/react/core/components/pages/NotFoundPage) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # DataTable (/reference/ui/react/core/components/tables/DataTable) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # Icons (/reference/ui/react/core/icons) The `@tetherto/mdk-react-devkit/core` package includes **70+ icons** to simplify development of Bitcoin mining applications. ## Prerequisites - Complete the [@tetherto/mdk-react-devkit installation and add the dependency](/reference/ui/react/core#prerequisites) ## Import ```tsx // Import individual icons // Import the factory function // Import types ``` ### Icon props All icons accept the `IconProps` interface: | Prop | Status | Type | Default | Description | |------|--------|------|---------|-------------| | `size` | Optional | `number \| string` | `24` | Sets both width and height | | `color` | Optional | `string` | `'currentColor'` | Icon color (single-color icons only) | | `width` | Optional | `number \| string` | none | Override width | | `height` | Optional | `number \| string` | none | Override height | | `className` | Optional | `string` | none | CSS class | | `style` | Optional | `CSSProperties` | none | Inline styles | ### Basic usage ```tsx // Default size (24px) // Custom size // Custom color // With className ``` ## Available icons ### Navigation icons Icons for sidebar and navigation menus: | Icon | Name | Description | |------|------|-------------| | ![dashboard-nav-icon](/images/ui-kit/icons/dashboard-nav-icon.svg) | `DashboardNavIcon` | Dashboard/home | | | `FarmsNavIcon` | Mining farms | | ![financials-nav-icon](/images/ui-kit/icons/financials-nav-icon.svg) | `FinancialsNavIcon` | Financial reports | | ![inventory-nav-icon](/images/ui-kit/icons/inventory-nav-icon.svg) | `InventoryNavIcon` | Equipment inventory | | ![miners-overview-nav-icon](/images/ui-kit/icons/miners-overview-nav-icon.svg) | `MinersOverviewNavIcon` | Miner overview | | ![operations-nav-icon](/images/ui-kit/icons/operations-nav-icon.svg) | `OperationsNavIcon` | Operations | | ![pool-manager-nav-icon](/images/ui-kit/icons/pool-manager-nav-icon.svg) | `PoolManagerNavIcon` | Pool Manager | | ![reporting-nav-icon](/images/ui-kit/icons/reporting-nav-icon.svg) | `ReportingNavIcon` | Reporting | | ![settings-nav-icon](/images/ui-kit/icons/settings-nav-icon.svg) | `SettingsNavIcon` | Settings | | ![user-management-nav-icon](/images/ui-kit/icons/user-management-nav-icon.svg) | `UserManagementNavIcon` | User management | | ![explorer-nav-icon](/images/ui-kit/icons/explorer-nav-icon.svg) | `ExplorerNavIcon` | Explorer | | ![alerts-nav-icon](/images/ui-kit/icons/alerts-nav-icon.svg) | `AlertsNavIcon` | Alerts | | ![cabinet-widget-nav-icon](/images/ui-kit/icons/cabinet-widget-nav-icon.svg) | `CabinetWidgetNavIcon` | Cabinet widgets | | ![container-widgets-nav-icon](/images/ui-kit/icons/container-widgets-nav-icon.svg) | `ContainerWidgetsNavIcon` | Container widgets | ### Status icons Icons for displaying operational status: | Icon | Name | Description | |------|------|-------------| | ![mining-status-icon](/images/ui-kit/icons/mining-status-icon.svg) | `MiningStatusIcon` | Active mining | | ![offline-status-icon](/images/ui-kit/icons/offline-status-icon.svg) | `OfflineStatusIcon` | Offline | | ![sleep-status-icon](/images/ui-kit/icons/sleep-status-icon.svg) | `SleepStatusIcon` | Sleep/standby mode | | | `ErrorStatusIcon` | Error state | | ![live-icon](/images/ui-kit/icons/live-icon.svg) | `LiveIcon` | Live/active | {/* OfflineIcon source file exists but isn't exported from @tetherto/mdk-react-devkit/core (upstream barrel gap) — pending fix | ![offline-icon](/images/ui-kit/icons/offline-icon.svg) | `OfflineIcon` | Offline indicator | */} ### Alarm icons Icons for alerts and alarms: | Icon | Name | Description | |------|------|-------------| | ![temperature-alarm-icon](/images/ui-kit/icons/temperature-alarm-icon.svg) | `TemperatureAlarmIcon` | Temperature alarm | | ![pressure-alarm-icon](/images/ui-kit/icons/pressure-alarm-icon.svg) | `PressureAlarmIcon` | Pressure alarm | | ![fluid-alarm-icon](/images/ui-kit/icons/fluid-alarm-icon.svg) | `FluidAlarmIcon` | Fluid/coolant alarm | | ![offline-alarm-icon](/images/ui-kit/icons/offline-alarm-icon.svg) | `OfflineAlarmIcon` | Offline alarm | | ![other-alarm-icon](/images/ui-kit/icons/other-alarm-icon.svg) | `OtherAlarmIcon` | Generic alarm | | ![alert-triangle-icon](/images/ui-kit/icons/alert-triangle-icon.svg) | `AlertTriangleIcon` | Warning triangle | ### Weather icons Icons for environmental conditions: {/*CloudyIcon SVG is identical to SunnyIcon (upstream bug) - using emoji placeholder |

| `CloudyIcon` | Cloudy | */} | Icon | Name | Description | |------|------|-------------| |

| `RainyIcon` | Rain | |

| `SnowyIcon` | Snow | |

| `PartlyCloudyIcon` | Partly cloudy | |

| `RainThunderIcon` | Thunderstorm | ### Mining/stats icons Icons for mining metrics and statistics: | Icon | Name | Description | |------|------|-------------| | ![hashrate-card-icon](/images/ui-kit/icons/hashrate-card-icon.svg) | `HashrateCardIcon` | Hashrate display | | ![hashrate-stat-icon](/images/ui-kit/icons/hashrate-stat-icon.svg) | `HashrateStatIcon` | Hashrate statistic | | ![miners-stat-icon](/images/ui-kit/icons/miners-stat-icon.svg) | `MinersStatIcon` | Miner count | | ![farm-star-icon](/images/ui-kit/icons/farm-star-icon.svg) | `FarmStarIcon` | Farm highlight | | ![farm-alert-icon](/images/ui-kit/icons/farm-alert-icon.svg) | `FarmAlertIcon` | Farm alert | | ![miner-overview-icon](/images/ui-kit/icons/miner-overview-icon.svg) | `MinerOverviewIcon` | Miner overview | | ![miner-explorer-icon](/images/ui-kit/icons/miner-explorer-icon.svg) | `MinerExplorerIcon` | Miner explorer | | ![pools-icon](/images/ui-kit/icons/pools-icon.svg) | `PoolsIcon` | Mining pools | |

| `ProductionDataIcon` | Production data | ### Measurement icons Icons for measurements and readings: | Icon | Name | Description | |------|------|-------------| | ![power-icon](/images/ui-kit/icons/power-icon.svg) | `PowerIcon` | Power consumption | | ![fan-icon](/images/ui-kit/icons/fan-icon.svg) | `FanIcon` | Fan/cooling | | ![frequency-icon](/images/ui-kit/icons/frequency-icon.svg) | `FrequencyIcon` | Frequency | | ![efficiency-icon](/images/ui-kit/icons/efficiency-icon.svg) | `EfficiencyIcon` | Efficiency | | ![consumption-icon](/images/ui-kit/icons/consumption-icon.svg) | `ConsumptionIcon` | Consumption | | ![temperature-celsius-icon](/images/ui-kit/icons/temperature-celsius-icon.svg) | `TemperatureCelsiusIcon` | Temperature (°C) | | ![temperature-indicator-icon](/images/ui-kit/icons/temperature-indicator-icon.svg) | `TemperatureIndicatorIcon` | Temperature indicator | |

| `TemperatureWeatherIcon` | Temperature/weather | | ![cooling-drop-icon](/images/ui-kit/icons/cooling-drop-icon.svg) | `CoolingDropIcon` | Cooling/liquid | ### UI icons General UI icons: | Icon | Name | Description | |------|------|-------------| | ![arrow-icon](/images/ui-kit/icons/arrow-icon.svg) | `ArrowIcon` | Arrow (direction) | | ![right-arrow-icon](/images/ui-kit/icons/right-arrow-icon.svg) | `RightArrowIcon` | Right arrow | | ![right-navigate-icon](/images/ui-kit/icons/right-navigate-icon.svg) | `RightNavigateIcon` | Navigate right | | | `PinIcon` | Pin/favorite | | | `UnPinIcon` | Unpin | | ![menu-icon](/images/ui-kit/icons/menu-icon.svg) | `MenuIcon` | Menu hamburger | | ![export-icon](/images/ui-kit/icons/export-icon.svg) | `ExportIcon` | Export data | | ![google-icon](/images/ui-kit/icons/google-icon.svg) | `GoogleIcon` | Google logo | | ![notification-bell-icon](/images/ui-kit/icons/notification-bell-icon.svg) | `NotificationBellIcon` | Notifications | | ![settings-header-icon](/images/ui-kit/icons/settings-header-icon.svg) | `SettingsHeaderIcon` | Settings gear | | ![sign-out-icon](/images/ui-kit/icons/sign-out-icon.svg) | `SignOutIcon` | Sign out | | ![user-avatar-icon](/images/ui-kit/icons/user-avatar-icon.svg) | `UserAvatarIcon` | User avatar | | ![volume-on-icon](/images/ui-kit/icons/volume-on-icon.svg) | `VolumeOnIcon` | Volume on | | ![volume-off-icon](/images/ui-kit/icons/volume-off-icon.svg) | `VolumeOffIcon` | Volume off | | ![comment-icon](/images/ui-kit/icons/comment-icon.svg) | `CommentIcon` | Comment | | ![comment-icon-common](/images/ui-kit/icons/comment-icon-common.svg) | `CommentIconCommon` | Comment (common variant) | | ![increase-icon](/images/ui-kit/icons/increase-icon.svg) | `IncreaseIcon` | Increase/up | | ![decrease-icon](/images/ui-kit/icons/decrease-icon.svg) | `DecreaseIcon` | Decrease/down | | ![profit-arrow-icon](/images/ui-kit/icons/profit-arrow-icon.svg) | `ProfitArrowIcon` | Profit indicator | | ![btc-card-icon](/images/ui-kit/icons/btc-card-icon.svg) | `BtcCardIcon` | Bitcoin card | | ![mode-icon](/images/ui-kit/icons/mode-icon.svg) | `ModeIcon` | Mode toggle | | ![scale-control-icon](/images/ui-kit/icons/scale-control-icon.svg) | `ScaleControlIcon` | Scale control | | ![site-overview-icon](/images/ui-kit/icons/site-overview-icon.svg) | `SiteOverviewIcon` | Site overview | | ![actions-tick-icon](/images/ui-kit/icons/actions-tick-icon.svg) | `ActionsTickIcon` | Action complete | ## Create custom icons Use `createIcon` to create custom icons following the same pattern: ```tsx displayName: 'MyCustomIcon', viewBox: '0 0 24 24', defaultWidth: 24, defaultHeight: 24, path: ( ), }) ``` ### `CreateIconOptions` | Option | Type | Default | Description | |--------|------|---------|-------------| | `displayName` | `string` | none | **Required:** Component display name | | `viewBox` | `string` | none | **Required:** SVG `viewBox` | | `defaultWidth` | `number` | `24` | Default width | | `defaultHeight` | `number` | `24` | Default height | | `multiColor` | `boolean` | `false` | Multi-color icon flag | | `path` | `ReactNode \| function` | none | **Required:** SVG path content | ### Dynamic color icons For icons that need dynamic colors: ```tsx displayName: 'DynamicColorIcon', viewBox: '0 0 24 24', path: ({ color }) => ( ), }) ``` # Theme (/reference/ui/react/core/theme) The `@tetherto/mdk-react-devkit/core` package provides a theme system with design tokens and utilities for consistent styling across your application. Import `@tetherto/mdk-react-devkit/styles.css` once in your app entry (before your own CSS). The compiled stylesheet declares `@layer base`, `mdk`, `app` — so unlayered or `@layer app` styles in your application always win against devkit component styles. MDK ships with `--mdk-color-primary: #f7931a`; override tokens in `:root` only when reskinning. ```css /* app.css — imported AFTER @tetherto/mdk-react-devkit/styles.css */ :root { --mdk-color-primary: #f7931a; --mdk-radius: 6px; } @layer app { .mdk-button--variant-primary { letter-spacing: 0.04em; } } ``` ## Prerequisites - Complete the [@tetherto/mdk-react-devkit installation and add the dependency](/reference/ui/react/core#prerequisites) ## Import ```tsx // Import tokens // Import utilities getSystemTheme, applyTheme, getStoredTheme, setStoredTheme, } from '@tetherto/mdk-react-devkit/core' // Import types ``` ## Design tokens ### Colors Primary and gray color scales with 10 shades each (50-900). ```tsx colors.primary[500] // 'hsl(222, 47%, 50%)' colors.gray[900] // 'hsl(222, 47%, 11%)' ``` #### Primary scale | Token | Value | Usage | |-------|-------|-------| | `primary.50` | `hsl(222, 47%, 95%)` | Lightest background | | `primary.100` | `hsl(222, 47%, 90%)` | Light background | | `primary.200` | `hsl(222, 47%, 80%)` | Hover states | | `primary.300` | `hsl(222, 47%, 70%)` | Borders | | `primary.400` | `hsl(222, 47%, 60%)` | Secondary text | | `primary.500` | `hsl(222, 47%, 50%)` | Primary color | | `primary.600` | `hsl(222, 47%, 40%)` | Hover on primary | | `primary.700` | `hsl(222, 47%, 30%)` | Active states | | `primary.800` | `hsl(222, 47%, 20%)` | Dark backgrounds | | `primary.900` | `hsl(222, 47%, 11.2%)` | Darkest | #### Gray scale | Token | Value | Usage | |-------|-------|-------| | `gray.50` | `hsl(210, 40%, 98%)` | Page background | | `gray.100` | `hsl(210, 40%, 96.1%)` | Card background | | `gray.200` | `hsl(214, 32%, 91.4%)` | Borders | | `gray.300` | `hsl(213, 27%, 84.1%)` | Dividers | | `gray.400` | `hsl(215, 20%, 65.1%)` | Placeholder text | | `gray.500` | `hsl(215, 16%, 47%)` | Secondary text | | `gray.600` | `hsl(215, 19%, 35%)` | Body text | | `gray.700` | `hsl(215, 25%, 27%)` | Headings | | `gray.800` | `hsl(217, 33%, 17%)` | Dark mode card | | `gray.900` | `hsl(222, 47%, 11%)` | Dark mode `bg` | ### Spacing Consistent spacing scale for margins, padding, and gaps. ```tsx spacing[4] // '1rem' (16px) spacing[8] // '2rem' (32px) ``` | Token | Value | Pixels | |-------|-------|--------| | `0` | `0` | 0px | | `1` | `0.25rem` | 4px | | `2` | `0.5rem` | 8px | | `3` | `0.75rem` | 12px | | `4` | `1rem` | 16px | | `5` | `1.25rem` | 20px | | `6` | `1.5rem` | 24px | | `8` | `2rem` | 32px | | `10` | `2.5rem` | 40px | | `12` | `3rem` | 48px | | `16` | `4rem` | 64px | | `20` | `5rem` | 80px | | `24` | `6rem` | 96px | ### Border radius Border radius scale for rounded corners. ```tsx borderRadius.md // '0.375rem' borderRadius.full // '9999px' ``` | Token | Value | |-------|-------| | `none` | `0` | | `sm` | `0.125rem` | | `DEFAULT` | `0.25rem` | | `md` | `0.375rem` | | `lg` | `0.5rem` | | `xl` | `0.75rem` | | `2xl` | `1rem` | | `full` | `9999px` | ### Font size Font size scale for typography. ```tsx fontSize.base // '1rem' fontSize.lg // '1.125rem' ``` | Token | Value | |-------|-------| | `xs` | `0.75rem` | | `sm` | `0.875rem` | | `base` | `1rem` | | `lg` | `1.125rem` | | `xl` | `1.25rem` | | `2xl` | `1.5rem` | | `3xl` | `1.875rem` | | `4xl` | `2.25rem` | | `5xl` | `3rem` | ## Theme utilities ### Theme type ```tsx type Theme = 'light' | 'dark' | 'system' ``` ### `getSystemTheme` Get the user's system theme preference. ```tsx const systemTheme = getSystemTheme() // 'light' or 'dark' ``` ### `applyTheme` Apply a theme to the document root. ```tsx applyTheme('dark') // Sets dark mode applyTheme('light') // Sets light mode applyTheme('system') // Uses system preference ``` This function: - Removes existing `light`/`dark` classes from `` - Adds the resolved theme class - Sets the `color-scheme` CSS property ### `getStoredTheme` Get the stored theme from `localStorage`. ```tsx const storedTheme = getStoredTheme() // Theme | null const customKey = getStoredTheme('my-theme-key') ``` ### `setStoredTheme` Store the theme in `localStorage`. ```tsx setStoredTheme('dark') setStoredTheme('light', 'my-theme-key') // Custom storage key ``` ## Usage example ```tsx applyTheme, getStoredTheme, setStoredTheme, getSystemTheme, } from '@tetherto/mdk-react-devkit/core' function ThemeProvider({ children }) { const [theme, setTheme] = useState(() => { return getStoredTheme() || 'system' }) useEffect(() => { applyTheme(theme) setStoredTheme(theme) }, [theme]) return ( {children} ) } ``` ## CSS custom properties The theme system uses CSS custom properties that can be overridden: ```css :root { --mdk-color-primary: #f7931a; --mdk-color-background: hsl(210, 40%, 98%); --mdk-color-foreground: hsl(222, 47%, 11%); /* ... more properties */ } .dark { --mdk-color-background: hsl(222, 47%, 11%); --mdk-color-foreground: hsl(210, 40%, 98%); } ``` # @tetherto/mdk-react-devkit (/reference/ui/react/foundation) The [foundation entrypoint](/support/resources/repositories) (`@tetherto/mdk-react-devkit/foundation`) provides **domain-specific React components, hooks, and constants** assembled from [`@tetherto/mdk-react-devkit/core`](/reference/ui/react/core). These are higher-level blocks for common Bitcoin mining application use cases. Generic primitives (buttons, tables, charts) import from [`/core`](/reference/ui/react/core). Both subpaths ship from `@tetherto/mdk-react-devkit`. Connected foundation components expect `` from [`@tetherto/mdk-react-adapter`](/tutorials/ui/react) and adapter store hooks. ## Prerequisites - Complete the installation ```bash # Clone the MDK UI monorepo (adjust the URL to your fork if needed) git clone https://github.com/tetherto/mdk.git cd mdk/ui # Install dependencies and build packages (npm workspaces) npm install npm run build ``` - Add the dependency to your app's `package.json` ```json { "dependencies": { "@tetherto/mdk-react-devkit": "*", "@tetherto/mdk-react-adapter": "*", "@tetherto/mdk-ui-core": "*" } } ``` > **Coming soon** — npm packages are not yet published. Use the monorepo setup for now. ```bash npm install \ @tetherto/mdk-react-devkit \ @tetherto/mdk-react-adapter \ @tetherto/mdk-ui-core ``` Run `npm install` from the `mdk/ui` workspace root after your app is under `apps/` so npm links workspace packages. ## What's included | Feature | Description | |---------|-------------| | [Operations centre](/reference/ui/react/foundation/operations) | Bitcoin mining operations monitoring and management components | | [Reporting tool](/reference/ui/react/foundation/reporting) | Operational reporting surfaces | | [Settings](/reference/ui/react/foundation/settings) | Administrative settings views | | [Hooks](#hooks) | Reusable React hooks | | [Constants](#constants) | Shared constants and configurations | ### Operations centre Domain-specific components for Bitcoin mining operations monitoring and management, including device explorers, vendor container UIs, dashboard widgets, charts, pool management, and data export. See the [operations centre reference](/reference/ui/react/foundation/operations) for the full component list with demo links. ### Settings Pre-built settings UI for common administrative tasks: - [`SettingsDashboard`](/reference/ui/react/foundation/settings): main settings container with accordion sections - `FeatureFlagsSettings`: toggle feature flags on/off - [`HeaderControlsSettings`](/reference/ui/react/foundation/settings/header-controls): configure header display options - `ImportExportSettings`: import/export configuration data - `RBACControlSettings`: role-based access control settings - User management modals: add, manage, and confirm user changes ### Hooks Reusable React hooks for [notifications and shell layout](/reference/app-toolkit/hooks/components#notifications) and [chart/dashboard transforms](/reference/app-toolkit/hooks/components#charts) — see the full [Hooks reference](/reference/app-toolkit/hooks). ### Constants Shared [constants](/reference/app-toolkit/ui-kit/constants#foundation-constants) for consistency across your application: permission definitions, role configurations, settings defaults, and error codes. ## Import examples ```tsx // Import components // Import from domain subpath when you only need settings-domain exports ``` ## Next steps Consider the detailed [reference material](/reference) for the foundation entrypoint: - [Constants](/reference/app-toolkit/ui-kit/constants#foundation-constants): permissions, roles, header controls, settings error codes - [Hooks: Components](/reference/app-toolkit/hooks/components) and [Hooks: Utilities > Domain transforms](/reference/app-toolkit/hooks/utilities#domain-transforms) - [Types](/reference/app-toolkit/ui-kit/types#foundation-types): [`Device`](/reference/app-toolkit/ui-kit/types#device), [`Container`](/reference/app-toolkit/ui-kit/types#container), [`Alert`](/reference/app-toolkit/ui-kit/types#alert), [`MinerStats`](/reference/app-toolkit/ui-kit/types#minerstats), settings shapes - [Utilities](/reference/app-toolkit/ui-kit/utilities#foundation-utilities): `settings-utils` (filtering, formatting, import/export) # StatsExport (/reference/ui/react/foundation/components/actions/StatsExport) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # RequireAuth (/reference/ui/react/foundation/components/auth/RequireAuth) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # SignInGoogleButton (/reference/ui/react/foundation/components/auth/SignInGoogleButton) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # ActiveIncidentsCard (/reference/ui/react/foundation/components/cards/ActiveIncidentsCard) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # CabinetDetailCard (/reference/ui/react/foundation/components/cards/CabinetDetailCard) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # MetricCard (/reference/ui/react/foundation/components/cards/MetricCard) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # MiningPoolsPanel (/reference/ui/react/foundation/components/cards/MiningPoolsPanel) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # PoolDetailsCard (/reference/ui/react/foundation/components/cards/PoolDetailsCard) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # PoolDetailsPopover (/reference/ui/react/foundation/components/cards/PoolDetailsPopover) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # ActualEbitdaCard (/reference/ui/react/foundation/components/charts/ActualEbitdaCard) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # AvgAllInCostChart (/reference/ui/react/foundation/components/charts/AvgAllInCostChart) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # BitcoinPriceCard (/reference/ui/react/foundation/components/charts/BitcoinPriceCard) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # BitcoinProducedCard (/reference/ui/react/foundation/components/charts/BitcoinProducedCard) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # BitcoinProducedChart (/reference/ui/react/foundation/components/charts/BitcoinProducedChart) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # BitcoinProductionCostCard (/reference/ui/react/foundation/components/charts/BitcoinProductionCostCard) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # ChartExpandAction (/reference/ui/react/foundation/components/charts/ChartExpandAction) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # CostCharts (/reference/ui/react/foundation/components/charts/CostCharts) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # Ebitda (/reference/ui/react/foundation/components/charts/Ebitda) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # EbitdaCharts (/reference/ui/react/foundation/components/charts/EbitdaCharts) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # EbitdaHodlCard (/reference/ui/react/foundation/components/charts/EbitdaHodlCard) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # EbitdaMetrics (/reference/ui/react/foundation/components/charts/EbitdaMetrics) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # EbitdaSellingCard (/reference/ui/react/foundation/components/charts/EbitdaSellingCard) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # EnergyBalance (/reference/ui/react/foundation/components/charts/EnergyBalance) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # EnergyBalanceCostCharts (/reference/ui/react/foundation/components/charts/EnergyBalanceCostCharts) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # EnergyBalanceCostMetrics (/reference/ui/react/foundation/components/charts/EnergyBalanceCostMetrics) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # EnergyBalancePowerChart (/reference/ui/react/foundation/components/charts/EnergyBalancePowerChart) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # EnergyBalanceRevenueCharts (/reference/ui/react/foundation/components/charts/EnergyBalanceRevenueCharts) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # EnergyBalanceRevenueMetrics (/reference/ui/react/foundation/components/charts/EnergyBalanceRevenueMetrics) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # EnergyCostChart (/reference/ui/react/foundation/components/charts/EnergyCostChart) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # EnergyMetricCard (/reference/ui/react/foundation/components/charts/EnergyMetricCard) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # EnergyReportMinerTypeView (/reference/ui/react/foundation/components/charts/EnergyReportMinerTypeView) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # EnergyReportMinerUnitView (/reference/ui/react/foundation/components/charts/EnergyReportMinerUnitView) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # EnergyReportSiteView (/reference/ui/react/foundation/components/charts/EnergyReportSiteView) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # EnergyRevenueChart (/reference/ui/react/foundation/components/charts/EnergyRevenueChart) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # Hashrate (/reference/ui/react/foundation/components/charts/Hashrate) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # HashrateMinerTypeView (/reference/ui/react/foundation/components/charts/HashrateMinerTypeView) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # HashrateMiningUnitView (/reference/ui/react/foundation/components/charts/HashrateMiningUnitView) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # HashrateSiteView (/reference/ui/react/foundation/components/charts/HashrateSiteView) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # LineChartCard (/reference/ui/react/foundation/components/charts/LineChartCard) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # MonthlyEbitdaChart (/reference/ui/react/foundation/components/charts/MonthlyEbitdaChart) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # OperationalHashrateChart (/reference/ui/react/foundation/components/charts/OperationalHashrateChart) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # OperationalMinersStatusChart (/reference/ui/react/foundation/components/charts/OperationalMinersStatusChart) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # OperationalPowerConsumptionChart (/reference/ui/react/foundation/components/charts/OperationalPowerConsumptionChart) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # OperationalSiteEfficiencyChart (/reference/ui/react/foundation/components/charts/OperationalSiteEfficiencyChart) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # OperationsEnergyChart (/reference/ui/react/foundation/components/charts/OperationsEnergyChart) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # PowerModeTimelineChart (/reference/ui/react/foundation/components/charts/PowerModeTimelineChart) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # ProductionCostChart (/reference/ui/react/foundation/components/charts/ProductionCostChart) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # RevenueChart (/reference/ui/react/foundation/components/charts/RevenueChart) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # TimelineChart (/reference/ui/react/foundation/components/charts/TimelineChart) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # AlarmsBellButton (/reference/ui/react/foundation/components/dashboard/AlarmsBellButton) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # DashboardDateRangePicker (/reference/ui/react/foundation/components/dashboard/DashboardDateRangePicker) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # ExportButton (/reference/ui/react/foundation/components/dashboard/ExportButton) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # HeaderConsumptionBox (/reference/ui/react/foundation/components/dashboard/HeaderConsumptionBox) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # HeaderEfficiencyBox (/reference/ui/react/foundation/components/dashboard/HeaderEfficiencyBox) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # HeaderHashrateBox (/reference/ui/react/foundation/components/dashboard/HeaderHashrateBox) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # HeaderMinersBox (/reference/ui/react/foundation/components/dashboard/HeaderMinersBox) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # HeaderStatsBar (/reference/ui/react/foundation/components/dashboard/HeaderStatsBar) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # ProfileMenu (/reference/ui/react/foundation/components/dashboard/ProfileMenu) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # SiteStatsBar (/reference/ui/react/foundation/components/dashboard/SiteStatsBar) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # TimelineSelector (/reference/ui/react/foundation/components/dashboard/TimelineSelector) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # ActionsSidebar (/reference/ui/react/foundation/components/dashboards/ActionsSidebar) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # Cost (/reference/ui/react/foundation/components/dashboards/Cost) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # CostContent (/reference/ui/react/foundation/components/dashboards/CostContent) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # EnergyReport (/reference/ui/react/foundation/components/dashboards/EnergyReport) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # HashBalance (/reference/ui/react/foundation/components/dashboards/HashBalance) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # HashBalanceCostPanel (/reference/ui/react/foundation/components/dashboards/HashBalanceCostPanel) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # HashBalanceRevenuePanel (/reference/ui/react/foundation/components/dashboards/HashBalanceRevenuePanel) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # OperationalDashboard (/reference/ui/react/foundation/components/dashboards/OperationalDashboard) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # PendingActionsButton (/reference/ui/react/foundation/components/dashboards/PendingActionsButton) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # PoolManager (/reference/ui/react/foundation/components/dashboards/PoolManager) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # PoolManagerDashboard (/reference/ui/react/foundation/components/dashboards/PoolManagerDashboard) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # PoolManagerSiteOverviewDetails (/reference/ui/react/foundation/components/dashboards/PoolManagerSiteOverviewDetails) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # PoolManagerSitesOverview (/reference/ui/react/foundation/components/dashboards/PoolManagerSitesOverview) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # SubsidyFee (/reference/ui/react/foundation/components/dashboards/SubsidyFee) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # AddSparePartModal (/reference/ui/react/foundation/components/dialogs/AddSparePartModal) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # AssignPoolModal (/reference/ui/react/foundation/components/dialogs/AssignPoolModal) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # BatchMoveSparePartsModal (/reference/ui/react/foundation/components/dialogs/BatchMoveSparePartsModal) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # BulkAddSparePartsModal (/reference/ui/react/foundation/components/dialogs/BulkAddSparePartsModal) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # ConfirmDeleteSparePartModal (/reference/ui/react/foundation/components/dialogs/ConfirmDeleteSparePartModal) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # MovementDetailsModal (/reference/ui/react/foundation/components/dialogs/MovementDetailsModal) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # MoveSparePartModal (/reference/ui/react/foundation/components/dialogs/MoveSparePartModal) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # SparePartSubTypesModal (/reference/ui/react/foundation/components/dialogs/SparePartSubTypesModal) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # ContainerWidgets (/reference/ui/react/foundation/components/features/ContainerWidgets) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # ExplorerLayout (/reference/ui/react/foundation/components/features/ExplorerLayout) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # AlarmContents (/reference/ui/react/foundation/components/feedback/AlarmContents) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # AlarmRow (/reference/ui/react/foundation/components/feedback/AlarmRow) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # ReportTimeFrameSelector (/reference/ui/react/foundation/components/filters/ReportTimeFrameSelector) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # TimeframeControls (/reference/ui/react/foundation/components/filters/TimeframeControls) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # TimeframeWeekFlatContent (/reference/ui/react/foundation/components/filters/TimeframeWeekFlatContent) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # TimeframeWeekTreeContent (/reference/ui/react/foundation/components/filters/TimeframeWeekTreeContent) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # ChartWrapper (/reference/ui/react/foundation/components/layout/ChartWrapper) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # SparePartDetails (/reference/ui/react/foundation/components/misc/SparePartDetails) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # AddUserModal (/reference/ui/react/foundation/components/settings/AddUserModal) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # ChangeConfirmationModal (/reference/ui/react/foundation/components/settings/ChangeConfirmationModal) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # FeatureFlagsSettings (/reference/ui/react/foundation/components/settings/FeatureFlagsSettings) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # HeaderControlsSettings (/reference/ui/react/foundation/components/settings/HeaderControlsSettings) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # ImportExportSettings (/reference/ui/react/foundation/components/settings/ImportExportSettings) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # ManageUserModal (/reference/ui/react/foundation/components/settings/ManageUserModal) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # RBACControlSettings (/reference/ui/react/foundation/components/settings/RBACControlSettings) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # SettingsDashboard (/reference/ui/react/foundation/components/settings/SettingsDashboard) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # AlertConfirmationModal (/reference/ui/react/foundation/components/tables/AlertConfirmationModal) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # Alerts (/reference/ui/react/foundation/components/tables/Alerts) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # AlertsTableTitle (/reference/ui/react/foundation/components/tables/AlertsTableTitle) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # CurrentAlerts (/reference/ui/react/foundation/components/tables/CurrentAlerts) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # DeviceExplorer (/reference/ui/react/foundation/components/tables/DeviceExplorer) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # EfficiencyMinerTypeView (/reference/ui/react/foundation/components/tables/EfficiencyMinerTypeView) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # EfficiencyMinerUnitView (/reference/ui/react/foundation/components/tables/EfficiencyMinerUnitView) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # EfficiencySiteView (/reference/ui/react/foundation/components/tables/EfficiencySiteView) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # HistoricalAlerts (/reference/ui/react/foundation/components/tables/HistoricalAlerts) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # OperationsEfficiency (/reference/ui/react/foundation/components/tables/OperationsEfficiency) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # PoolManagerMinerExplorer (/reference/ui/react/foundation/components/tables/PoolManagerMinerExplorer) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # PoolManagerPools (/reference/ui/react/foundation/components/tables/PoolManagerPools) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # RepairLogChangesSubRow (/reference/ui/react/foundation/components/tables/RepairLogChangesSubRow) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # TagFilterBar (/reference/ui/react/foundation/components/tables/TagFilterBar) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # AddReplaceMinerDialog (/reference/ui/react/foundation/components/widgets/AddReplaceMinerDialog) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # BatchContainerControlsCard (/reference/ui/react/foundation/components/widgets/BatchContainerControlsCard) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # BitdeerOptions (/reference/ui/react/foundation/components/widgets/BitdeerOptions) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # BitdeerPumps (/reference/ui/react/foundation/components/widgets/BitdeerPumps) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # BitdeerSettings (/reference/ui/react/foundation/components/widgets/BitdeerSettings) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # BitdeerTankPressureCharts (/reference/ui/react/foundation/components/widgets/BitdeerTankPressureCharts) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # BitdeerTankTempCharts (/reference/ui/react/foundation/components/widgets/BitdeerTankTempCharts) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # BitMainBasicSettings (/reference/ui/react/foundation/components/widgets/BitMainBasicSettings) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # BitMainControlsTab (/reference/ui/react/foundation/components/widgets/BitMainControlsTab) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # BitMainCoolingSystem (/reference/ui/react/foundation/components/widgets/BitMainCoolingSystem) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # BitMainHydroLiquidTemperatureCharts (/reference/ui/react/foundation/components/widgets/BitMainHydroLiquidTemperatureCharts) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # BitMainHydroSettings (/reference/ui/react/foundation/components/widgets/BitMainHydroSettings) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # BitMainImmersionControlBox (/reference/ui/react/foundation/components/widgets/BitMainImmersionControlBox) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # BitMainImmersionPumpStationControlBox (/reference/ui/react/foundation/components/widgets/BitMainImmersionPumpStationControlBox) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # BitMainImmersionSettings (/reference/ui/react/foundation/components/widgets/BitMainImmersionSettings) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # BitMainImmersionSummaryBox (/reference/ui/react/foundation/components/widgets/BitMainImmersionSummaryBox) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # BitMainImmersionSystemStatus (/reference/ui/react/foundation/components/widgets/BitMainImmersionSystemStatus) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # BitMainImmersionUnitControlBox (/reference/ui/react/foundation/components/widgets/BitMainImmersionUnitControlBox) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # BitMainLiquidPressureCharts (/reference/ui/react/foundation/components/widgets/BitMainLiquidPressureCharts) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # BitMainLiquidTempCharts (/reference/ui/react/foundation/components/widgets/BitMainLiquidTempCharts) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # BitMainPowerAndPositioning (/reference/ui/react/foundation/components/widgets/BitMainPowerAndPositioning) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # BitMainPowerCharts (/reference/ui/react/foundation/components/widgets/BitMainPowerCharts) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # BitMainSupplyLiquidFlowCharts (/reference/ui/react/foundation/components/widgets/BitMainSupplyLiquidFlowCharts) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # ContainerCharts (/reference/ui/react/foundation/components/widgets/ContainerCharts) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # ContainerControlsBox (/reference/ui/react/foundation/components/widgets/ContainerControlsBox) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # ContainerControlsCard (/reference/ui/react/foundation/components/widgets/ContainerControlsCard) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # ContainerFanLegend (/reference/ui/react/foundation/components/widgets/ContainerFanLegend) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # ContainerFansCard (/reference/ui/react/foundation/components/widgets/ContainerFansCard) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # ContainerSelectionDialog (/reference/ui/react/foundation/components/widgets/ContainerSelectionDialog) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # ContainerWidgetCard (/reference/ui/react/foundation/components/widgets/ContainerWidgetCard) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # CostMetrics (/reference/ui/react/foundation/components/widgets/CostMetrics) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # DryCooler (/reference/ui/react/foundation/components/widgets/DryCooler) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # EnabledDisableToggle (/reference/ui/react/foundation/components/widgets/EnabledDisableToggle) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # ExplorerDetail (/reference/ui/react/foundation/components/widgets/ExplorerDetail) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # FireStatusBox (/reference/ui/react/foundation/components/widgets/FireStatusBox) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # GaugeChartComponent (/reference/ui/react/foundation/components/widgets/GaugeChartComponent) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # GenericDataBox (/reference/ui/react/foundation/components/widgets/GenericDataBox) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # MaintenanceDialogContent (/reference/ui/react/foundation/components/widgets/MaintenanceDialogContent) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # MicroBTCooling (/reference/ui/react/foundation/components/widgets/MicroBTCooling) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # MicroBTSettings (/reference/ui/react/foundation/components/widgets/MicroBTSettings) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # MicroBTWidgetBox (/reference/ui/react/foundation/components/widgets/MicroBTWidgetBox) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # MinerChip (/reference/ui/react/foundation/components/widgets/MinerChip) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # MinerChipsCard (/reference/ui/react/foundation/components/widgets/MinerChipsCard) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */} # MinerControlsCard (/reference/ui/react/foundation/components/widgets/MinerControlsCard) {/* mdk:generated — do not edit by hand. Regenerate with `npm run docs:sync`. */}

Stats Lab

Final exam distribution

Weekly class average

Miner status

Operator dashboard