React SDK

Overview of @mpckit/react. Provider, query hooks, and mutation hooks over MPCKit.

@mpckit/react wraps the imperative MPCKit class in a Provider plus a set of TanStack-Query-shaped hooks. The Provider also handles the boilerplate of constructing a Web Worker crypto engine when useWorker is set, so DKG and sign ceremonies don't block the main thread.

Peer deps: react@>=18, @tanstack/react-query@>=5.

You own the QueryClient

The SDK doesn't ship its own QueryClientProvider. Wrap <MPCKitProvider/> in your app's <QueryClientProvider client={...}/> so every hook participates in your app's cache, devtools, and invalidation.

Install

bun add @mpckit/react @mpckit/sdk @tanstack/react-query

pnpm add @mpckit/react @mpckit/sdk @tanstack/react-query

npm install @mpckit/react @mpckit/sdk @tanstack/react-query

At a glance

"use client";

import {
  MPCKitProvider,
  useBalance,
  useOnboard,
  Curve,
} from "@mpckit/react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();

export function Root({ children }: { children: React.ReactNode }) {
  return (
    <QueryClientProvider client={queryClient}>
      <MPCKitProvider
        options={{
          baseUrl: "https://api.mpckit.xyz",
          apiKey: process.env.NEXT_PUBLIC_MPCKIT_API_KEY!,
          network: "testnet",
        }}
      >
        {children}
      </MPCKitProvider>
    </QueryClientProvider>
  );
}

function CreditsBadge() {
  const { data } = useBalance();
  return <span>{data?.creditsUsd ?? "…"}</span>;
}