Settings
Settings and preferences management hooks
Hooks for managing user settings and preferences.
Package
@tetherto/mdk-react-devkit
Hooks
@tetherto/mdk-react-devkit
Header controls
import { useHeaderControls } from '@tetherto/mdk-react-devkit'Related API
When to use useHeaderControls
Use useHeaderControls in settings UI that reads or changes the shared header
item preferences. It exposes the current preferences together with focused
toggle and reset handlers.
Preferences persist to localStorage, so a change survives a reload. The hook
also returns isLoading: false and error: null, which are fixed values rather
than real async state — do not branch on them expecting a request to be in
flight.
useHeaderControls notification behaviour
handleToggle and handleReset show a success notification. Avoid calling
either handler from rapidly changing state or an effect that can repeat, because
each invocation creates another toast.
useHeaderControls example
import { Button, useHeaderControls } from '@tetherto/mdk-react-devkit'
function HeaderSettings() {
const { preferences, handleToggle, handleReset } = useHeaderControls()
return (
<div>
{(Object.keys(preferences) as (keyof typeof preferences)[]).map((key) => (
<label key={key}>
<input
type="checkbox"
checked={preferences[key]}
onChange={(event) => handleToggle(key, event.target.checked)}
/>
{key}
</label>
))}
<Button onClick={handleReset}>Reset to default</Button>
</div>
)
}@tetherto/mdk-react-devkit
Import the public APIs on this page from @tetherto/mdk-react-devkit.
useHeaderControls
Read/write hook for the global header-controls store (toggles, sticky flag, theme)
() => { preferences: { poolMiners: boolean; appMiners: boolean; poolHashrate: boolean; appHashrate: boolean; consumption: boolean; efficiency: boolean; }; isLoading: boolean; error: null; handleToggle: (key: keyof HeaderPreferences, value:… /* see source */