AlarmsBellButton

Top-bar bell button with a three-line severity badge (critical / high / medium). Counts are caller-provided so the button stays domain-agnostic; pair with `u…

Top-bar bell button with a three-line severity badge (critical / high / medium). Counts are caller-provided so the button stays domain-agnostic; pair with useActiveIncidents or useSiteMinerCounts to wire them.

onClick fires for the bell itself; pass onSeverityClick to make each count its own button (severity-filtered deep-link). The two are independent — clicking a severity does not also fire onClick.

import { AlarmsBellButton } from "@tetherto/mdk-react-devkit";

Prop	Status	Type	Default	Description
`counts`	Optional	`AlarmsBellButtonCounts \| undefined`	—	Severity-bucketed alarm counts rendered in the stacked badge.
`onClick`	Optional	`((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void) \| undefined`	—	Click handler — typically opens an alerts panel or routes to /alerts.
`onSeverityClick`	Optional	`((severity: AlarmSeverity, event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void) \| undefined`	—	Click handler for an individual severity count. When provided, each badge row becomes its own button so an operator can jump straight to the alerts page filtered by that severity (e.g. `/alerts?severity=critical`). When omitted, the counts render as plain (non-interactive) text.
`label`	Optional	`string \| undefined`	—	Accessible label. Defaults to "Active alarms".
`className`	Optional	`string \| undefined`	—	—

Usage

Top-bar buttons designed to live in the actions slot of <AppHeader>: PendingActionsButton, AlarmsBellButton, and ProfileMenu.

PendingActionsButton

A header tile showing the total count of pending actions (local drafts + submitted voting actions + others' requests, clamped to 99+). Clicking it opens the global ActionsSidebar via the shared actionsStore toggle, so the two only need to be mounted in the same app — no props are required.

It reads actionsStore and useLiveActions internally, so it must be rendered under MdkProvider (QueryClient + auth). Mount the ActionsSidebar once at the app root for the button to open.

import { PendingActionsButton, ActionsSidebar } from '@tetherto/mdk-react-devkit'

// In the header toolbar:
<PendingActionsButton />

// Once at the app root (e.g. beside the content outlet):
<ActionsSidebar />

Pass onClick to override the default open-sidebar behaviour (e.g. to navigate to a dedicated review route instead):

<PendingActionsButton onClick={() => navigate('/pool-manager?review=1')} />

AlarmsBellButton

Renders a bell icon with a three-line severity-stacked count badge (critical / high / medium). Counts are caller-provided — pair with useActiveIncidents and a small bucketer.

import { AlarmsBellButton, useActiveIncidents } from '@tetherto/mdk-react-devkit'

const incidents = useActiveIncidents()
const counts = (incidents.data ?? []).reduce(
  (acc, row) => ({
    ...acc,
    [row.severity]: (acc[row.severity] ?? 0) + 1,
  }),
  { critical: 0, high: 0, medium: 0 },
)

<AlarmsBellButton counts={counts} onClick={() => navigate('/alerts')} />

ProfileMenu

A dropdown wrapping the core DropdownMenu. The trigger renders the user-avatar icon (override via icon). The items array drives the menu surface — keep it short.

import { ProfileMenu, authStore } from '@tetherto/mdk-react-devkit'

<ProfileMenu
  user={currentUserEmail}
  items={[
    {
      label: 'Sign out',
      onSelect: () => {
        authStore.getState().reset()
        navigate('/signin')
      },
      danger: true,
    },
  ]}
/>

Notes

Both buttons own their styles in cascade layer mdk; consumer overrides in app win without specificity hacks.
The bell badge hides itself entirely when all counts are undefined — the empty state is the loading state too.

Example

import { AlarmsBellButton } from './alarms-bell-button'import { PendingActionsButton } from './pending-actions-button'import { ProfileMenu } from './profile-menu'/** * Top-bar action cluster — the pending-actions tile (opens the ActionsSidebar), * the alarms bell (with severity-stacked counts), and a profile menu (here with * just a "Sign out" item). * * Requires MdkProvider (QueryClient + auth) higher in the tree — the * PendingActionsButton reads `actionsStore` and `useLiveActions` internally. */export const HeaderActionsExample = (): React.ReactNode => (  <>    <PendingActionsButton />    <AlarmsBellButton counts={{ critical: 171, high: 72, medium: 322 }} />    <ProfileMenu      user="you@example.com"      items={[        {          label: 'Sign out',          onSelect: () => console.warn('sign out'),          danger: true,        },      ]}    />  </>)