Header controls settings

Manages header visibility preferences — which metrics appear in the global header.

It provides:

Data (preferences): current visibility state for header items.
Callbacks (onToggle, onReset): handle changes and reset to defaults.
State (isLoading): optional loading feedback.
Styling (className): optional CSS class.

Prerequisites

Complete the @tetherto/mdk-react-devkit installation and add the dependency

Import

import { HeaderControlsSettings } from '@tetherto/mdk-react-devkit/foundation'

Props

Prop	Status	Type	Default	Description
`preferences`	Required	`HeaderPreferences`	none	Current header visibility preferences
`onToggle`	Required	`function`	none	Callback when a toggle changes
`onReset`	Required	`function`	none	Callback to reset to defaults
`isLoading`	Optional	`boolean`	`false`	Loading state
`className`	Optional	`string`	none	Additional CSS class

Data structure

The HeaderPreferences type maps header item keys to visibility booleans. See constants for the full list.

import type { HeaderPreferences } from '@tetherto/mdk-react-devkit/foundation'

type HeaderPreferences = {
  poolMiners: boolean
  miners: boolean
  poolHashrate: boolean
  hashrate: boolean
  consumption: boolean
  efficiency: boolean
}

Basic usage

Changes apply instantly via onToggle. The callback receives the preference key and new value:

const handleToggle = (key: keyof HeaderPreferences, value: boolean) => {
  setPreferences(prev => ({ ...prev, [key]: value }))
  api.updateHeaderPreference(key, value)  // persist immediately
}

There is no Save button, each toggle immediately persists via your callback.

Example

import { HeaderControlsSettings, DEFAULT_HEADER_PREFERENCES } from '@tetherto/mdk-react-devkit/foundation'

function HeaderSettingsSection() {
  const [preferences, setPreferences] = useState<HeaderPreferences>({
    poolMiners: true,
    miners: true,
    poolHashrate: true,
    hashrate: false,
    consumption: true,
    efficiency: true,
  })

  const handleToggle = (key: keyof HeaderPreferences, value: boolean) => {
    setPreferences(prev => ({ ...prev, [key]: value }))
    api.updateHeaderPreference(key, value)
  }

  const handleReset = () => {
    setPreferences(DEFAULT_HEADER_PREFERENCES)
    api.resetHeaderPreferences()
  }

  return (
    <HeaderControlsSettings
      preferences={preferences}
      onToggle={handleToggle}
      onReset={handleReset}
    />
  )
}

Features

Table layout

The component renders a table with:

Header Item column: label for the metric
Visibility Toggle column: switch to show/hide

Items are defined by HEADER_ITEMS. Labels for the in-app rows (miners, hashrate) are composed from WEBAPP_SHORT_NAME, so they reflect the brand string the foundation kit ships with.

Reset to default

The Reset to Default button calls your onReset callback. You define what "default" means:

import { DEFAULT_HEADER_PREFERENCES } from '@tetherto/mdk-react-devkit/foundation'

const handleReset = () => {
  setPreferences(DEFAULT_HEADER_PREFERENCES)
  api.resetHeaderPreferences()
}

Loading state

When isLoading is true and no preferences are available, a spinner is shown:

<HeaderControlsSettings
  preferences={null}
  isLoading={true}
  onToggle={handleToggle}
  onReset={handleReset}
/>

Styling

The component uses the .mdk-settings-header-controls CSS class. Key selectors:

.mdk-settings-header-controls__description: Explanatory text
.mdk-settings-header-controls__table: Table container
.mdk-settings-header-controls__table-header: Header row
.mdk-settings-header-controls__table-row: Data rows
.mdk-settings-header-controls__actions: Reset button container

Header controls settings

On this page