Settings

Hooks for managing user settings and preferences.

Prerequisites

Install the packages

npm install \
  @tetherto/mdk-react-devkit \
  @tetherto/mdk-react-adapter \
  @tetherto/mdk-ui-foundation

Hooks

@tetherto/mdk-react-devkit

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, so 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'

const HeaderSettings = (): JSX.Element => {
  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 */

Package