The React interface.

usePurse#

Watch private state and coordinate the deposit flow. Hooks imported from @openzk.app/purse/react share the module’s client instance.

import { usePurse } from "@openzk.app/purse/react";

const { snapshot, journal, quote, depositStatus,
  requestQuote, startDeposit, errorMessage, reset } = usePurse();

Deposit phases: idle → quoting → awaiting_wallet_approval → awaiting_confirmation → journaling_note → ready. Errors use failed.

useBurn#

Generate a payment proof, acquire a limited inference lease, stream a response, and settle usage. The model’s tierUsd sets the requested session spending limit.

import { useBurn } from "@openzk.app/purse/react";

export function Inference() {
  const { burn, streamingText, status, errorMessage } = useBurn();
  const busy = !["idle", "settled", "failed"].includes(status);

  return (
    <div>
      <button disabled={busy} onClick={() => burn(
        "Explain zero-knowledge proofs in one paragraph.",
        "Use plain language."
      )}>
        Send a request
      </button>
      <pre aria-live="polite">{streamingText}</pre>
      <p role="status">{status}</p>
      {errorMessage && <p role="alert">{errorMessage}</p>}
    </div>
  );
}

useExit#

Close the note through a mutual withdrawal. Pass a valid Ethereum destination; the hook reports proof, clearance, wallet, and broadcast phases.

import { useExit } from "@openzk.app/purse/react";

const { withdraw, status, withdrawalDetails,
  errorCode, errorMessage, reset } = useExit();

// Run from your withdrawal confirmation handler.
await withdraw(recipientAddress);

Withdrawal phases: idle → proving → requesting_clearance → awaiting_wallet_approval → broadcasting → withdrawn. Errors use failed.

useModelCatalog#

Read the model list without starting an inference request. The hook starts with curated models, then merges supported entries from the live OpenRouter catalog. Cached live entries are reused for up to 24 hours.

import { useModelCatalog } from "@openzk.app/purse/react";

const models = useModelCatalog();
// readonly ModelOption[]: id, name, provider,
// context, costClass, tierUsd, description

Handle errors#

Each payment hook exposes errorCode, errorMessage, and reset. Render the readable message next to the failed action and use the status to control pending buttons.

The hooks catch operation failures and update their error state. Check that state rather than assuming a rejected promise will always reach your component.