ActionsSidebar

Full-height side panel for the MiningOS voting/approval workflow.

Three sections (only rendered when non-empty): - Draft — locally-staged actions not yet sent to the server. - In review — actions this user submitted, awaiting votes. - Requested — other users' voting actions this user can approve/reject (only shown when the current token has actions:w).

Open/close state is driven by actionsStore.sidebarOpen so the header PendingActionsButton and any in-page code can open it without prop-drilling. Mount this once at the app root — it renders nothing when closed.

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

Usage

Full-height side panel that surfaces the MiningOS voting/approval workflow. Lists local draft actions pending submission, actions already submitted (in review), and actions raised by other operators that await your vote. Mirrors the the reference app sidebar but is built on MDK primitives — no Redux, no Ant Design.

Data contracts

• Drafts — reads staged actions from actionsStore via useActions(). Each entry is a PendingSubmissionAction enqueued by the add / edit / assign-pool flows via setAddPendingSubmissionAction.
• Live actions — polls GET /auth/actions via useLiveActions() and partitions results into "In review" (mine) and "Requested" (others awaiting vote) buckets. The current user's email is resolved from /auth/userinfo.
• Submit — calls useSubmitSingleAction / useSubmitPendingActions; gated by the actions:w permission. After a successful submit the card briefly shows "Action Submitted" then disappears.
• Vote — calls useVoteOnAction for actions awaiting approval; also gated by actions:w.
• Cancel — calls useCancelAction for submitted actions awaiting execution.

Notes

• Mount it once at the application root, outside the route <Outlet>, so drafts accumulated across Pool Manager sub-views remain visible.
• Requires MdkProvider (TanStack Query client + auth) above it in the tree.
• The pin feature switches to a flex-based layout — ensure the parent container uses display: flex; flex-direction: row so the sidebar pushes content rather than overlapping it.

Example

/** * Runnable example for ActionsSidebar. * * The sidebar reads all state from `actionsStore` and the `useLiveActions` * hook internally — no data props are required. Mount it once at the * application root alongside the main content outlet. When the operator * pins the sidebar it enters a flex side-by-side layout, so the parent * must use `display: flex; flex-direction: row`. * * Requires MdkProvider (QueryClient + auth) higher in the tree. */import { useActions } from '@tetherto/mdk-react-adapter'import { ActionsSidebar } from '@tetherto/mdk-react-devkit'import './actions-sidebar.example.scss'export const ActionsSidebarExample = () => {  const { setAddPendingSubmissionAction, pendingSubmissions } = useActions()  const stageSample = () => {    setAddPendingSubmissionAction({      action: 'setupPools',      query: { id: { $in: ['miner-1', 'miner-2'] } },      params: [{ poolConfigId: 'pool-abc', configType: 'pool' }],    })  }  return (    <div className="mdk-actions-sidebar-example">      {/* Main content area */}      <main className="mdk-actions-sidebar-example__main">        <button type="button" onClick={stageSample} disabled={pendingSubmissions.length > 0}>          Stage a sample draft action        </button>      </main>      {/* Sidebar — reads actionsStore + live actions internally */}      <ActionsSidebar />    </div>  )}