@tetherto/mdk-foundation-ui
Domain-specific components, hooks, and constants for mining applications
The foundation package provides domain-specific components, hooks, and constants
assembled from @tetherto/mdk-core-ui. These are higher-level blocks for common Bitcoin mining application use cases.
Before 1.0, the React UI Kit packages (@tetherto/mdk-core-ui and @tetherto/mdk-foundation-ui) will be renamed to React-specific names to make room for Vue, Svelte, and
Web Components. Imports will need updating when the new packages ship: pin your current version if you want to avoid an unexpected upgrade.
Prerequisites
- Complete the installation
- Add the dependency to your app's
package.json
{
"dependencies": {
"@tetherto/mdk-foundation-ui": "workspace:*"
}
}What's included
| Feature | Description |
|---|---|
| Operations centre | Bitcoin mining operations monitoring and management components |
| Settings | Administrative settings views |
| Hooks | Reusable React hooks (in the Reference section) |
| Constants | Shared constants and configurations (in the Reference section) |
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 for the full component list with demo links.
Settings
Pre-built settings UI for common administrative tasks:
SettingsDashboard: main settings container with accordion sectionsFeatureFlagsSettings: toggle feature flags on/offHeaderControlsSettings: configure header display optionsImportExportSettings: import/export configuration dataRBACControlSettings: role-based access control settings- User management modals: add, manage, and confirm user changes
Hooks
Reusable React hooks for monitoring and UI patterns:
- Monitoring hooks:
useBeepSound,useChartDataCheck - UI hooks:
useNotification,useHasPerms,useHeaderControls,useLocalStorage,usePagination
Constants
Shared constants for consistency across your application: permission definitions, role configurations, settings defaults, and error codes.
Import examples
// Import components
import { SettingsDashboard, FeatureFlagsSettings } from '@tetherto/mdk-foundation-ui'
// Import from specific subpath
import { SettingsDashboard } from '@tetherto/mdk-foundation-ui/domain'Next steps
Consider the detailed reference material that supplements the mdk-foundation-ui package:
- Constants: permissions, roles, header controls, settings error codes
- Hooks: Monitoring and Hooks: UI
- Types:
Device,Container,Alert,MinerStats, settings shapes - Utilities:
settings-utils(filtering, formatting, import/export)