React Hooks

What this does

@zkp2p/sdk/react wraps the write-heavy parts of Zkp2pClient in React-friendly hooks. The hooks manage loading state, errors, and transaction hashes for you, and a subset of them also expose prepared transactions for relayers or smart accounts.

Installation

Install the core SDK, viem, and React:

npm install @zkp2p/sdk viem react
# or
yarn add @zkp2p/sdk viem react
# or
pnpm add @zkp2p/sdk viem react
# or
bun add @zkp2p/sdk viem react

viem ^2.37.3 is a peer dependency of the core SDK. react >= 16.8.0 is an optional peer dependency that is required for @zkp2p/sdk/react.

Hook pattern

All hooks take an options object with client first. Most hooks also accept optional onSuccess and onError callbacks.

import { useSignalIntent } from "@zkp2p/sdk/react";

function SignalIntentButton({ client, params }) {
  const {
    signalIntent,
    prepareSignalIntent,
    isLoading,
    error,
    txHash,
    prepared,
  } = useSignalIntent({ client });

  return (
    <button disabled={isLoading} onClick={() => signalIntent(params)}>
      {txHash ?? "Signal intent"}
    </button>
  );
}

Hooks that expose prepare...() return a PreparedTransaction in addition to the normal transaction hash flow.

Deposit hooks

Unless otherwise noted, these hooks use:

{ client, onSuccess?, onError? }

Hook	What it does	Main action(s)	State returned
`useCreateDeposit`	Wraps `client.createDeposit()`	`createDeposit(params)`	`isLoading`, `error`, `txHash`, `depositDetails`
`useAddFunds`	Wraps `client.addFunds()`	`addFunds(params)`	`isLoading`, `error`, `txHash`
`useRemoveFunds`	Wraps `client.removeFunds()`	`removeFunds(params)`	`isLoading`, `error`, `txHash`
`useWithdrawDeposit`	Wraps `client.withdrawDeposit()`	`withdrawDeposit(params)`	`isLoading`, `error`, `txHash`
`useSetAcceptingIntents`	Wraps `client.setAcceptingIntents()`	`setAcceptingIntents(params)`	`isLoading`, `error`, `txHash`
`useSetIntentRange`	Wraps `client.setIntentRange()`	`setIntentRange(params)`	`isLoading`, `error`, `txHash`
`useSetCurrencyMinRate`	Wraps `client.setCurrencyMinRate()`	`setCurrencyMinRate(params)`	`isLoading`, `error`, `txHash`
`useSetRetainOnEmpty`	Wraps `client.setRetainOnEmpty()`	`setRetainOnEmpty(params)`	`isLoading`, `error`, `txHash`
`useSetDelegate`	Wraps `client.setDelegate()`	`setDelegate(params)`	`isLoading`, `error`, `txHash`
`useRemoveDelegate`	Wraps `client.removeDelegate()`	`removeDelegate(params)`	`isLoading`, `error`, `txHash`

Intent hooks

Hook	What it does	Main action(s)	State returned
`useSignalIntent`	Wraps `client.signalIntent()`	`signalIntent(params)`, `prepareSignalIntent(params)`	`isLoading`, `error`, `txHash`, `prepared`
`useFulfillIntent`	Wraps `client.fulfillIntent()`	`fulfillIntent(params)`, `prepareFulfillIntent(params)`	`isLoading`, `error`, `txHash`, `prepared`
`useReleaseFundsToPayer`	Wraps `client.releaseFundsToPayer()`	`releaseFundsToPayer(params)`	`isLoading`, `error`, `txHash`
`usePruneExpiredIntents`	Wraps `client.pruneExpiredIntents()`	`pruneExpiredIntents(params)`	`isLoading`, `error`, `txHash`

note

The hooks package does not currently export useCancelIntent. If you need cancel flows in React, call client.cancelIntent() or client.cancelIntent.prepare() directly.

Vault hooks

`useCreateVault`

This hook provides a vault-friendly wrapper around client.createRateManager().

Options

Field	Required	Description
`client`	Yes	`Zkp2pClient` instance
`sendTransaction`	Yes	Callback that sends a prepared transaction and returns a hash
`referrer`	No	Single referrer code or list of referrer codes for attribution
`onSuccess`	No	Success callback
`onError`	No	Error callback

Call signature

createVault({
  config: {
    manager,
    feeRecipient,
    maxFee,
    fee,
    depositHook?,
    minLiquidity?,
    name,
    uri,
  },
})

Returns

useCreateVault() returns createVault, prepareCreateVault, isLoading, error, and txHash.

`useVaultDelegation`

This hook chooses the correct delegation path for you and supports optional batching.

Options

Field	Required	Description
`client`	Yes	`Zkp2pClient` instance
`sendTransaction`	Yes	Single-transaction sender
`sendBatch`	No	Batch sender for smart-account or user-op flows
`referrer`	No	Single referrer code or list of referrer codes
`onSuccess`	No	Success callback
`onError`	No	Error callback

Main actions

Action	Use it for
`delegateDeposit({ escrow, depositId, registry, rateManagerId, currentRateManagerId?, currentRateManagerRegistry?, preflightHook? })`	Delegate one deposit
`delegateDeposits({ registry, rateManagerId, deposits, preflightHook? })`	Delegate many deposits
`clearDelegation({ escrow, depositId })`	Clear one delegation
`clearDelegations({ deposits })`	Clear many delegations

Returns

useVaultDelegation() returns the four actions above plus isLoading and error.

Vault settings hooks

Hook	What it does	Main action(s)	State returned
`useSetVaultFee`	Wraps `client.setVaultFee()`	`setVaultFee(params)`, `prepareSetVaultFee(params)`	`isLoading`, `error`, `txHash`, `prepared`
`useSetVaultMinRate`	Wraps `client.setVaultMinRate()`	`setVaultMinRate(params)`, `prepareSetVaultMinRate(params)`	`isLoading`, `error`, `txHash`, `prepared`
`useSetVaultConfig`	Wraps `client.setVaultConfig()`	`setVaultConfig(params)`, `prepareSetVaultConfig(params)`	`isLoading`, `error`, `txHash`, `prepared`

Payment method hooks

Hook	What it does	Main action(s)	State returned
`useAddPaymentMethods`	Wraps `client.addPaymentMethods()`	`addPaymentMethods(params)`	`isLoading`, `error`, `txHash`
`useSetPaymentMethodActive`	Wraps `client.setPaymentMethodActive()`	`setPaymentMethodActive(params)`	`isLoading`, `error`, `txHash`
`useRemovePaymentMethod`	Wraps `client.removePaymentMethod()`	`removePaymentMethod(params)`	`isLoading`, `error`, `txHash`

Currency hooks

Hook	What it does	Main action(s)	State returned
`useAddCurrencies`	Wraps `client.addCurrencies()`	`addCurrencies(params)`	`isLoading`, `error`, `txHash`
`useDeactivateCurrency`	Wraps `client.deactivateCurrency()`	`deactivateCurrency(params)`	`isLoading`, `error`, `txHash`
`useRemoveCurrency`	Wraps `client.removeCurrency()`	`removeCurrency(params)`	`isLoading`, `error`, `txHash`

V3 capacity reads

The hooks package does not currently expose a dedicated OrchestratorV3 capacity hook. Fetch the configured Curator environment's capacity view separately from quotes, render free takes and both stake-backed curves, and treat on-chain admission as final. Tier-named hooks and helpers that remain exported are for V2 compatibility and must not drive V3 order eligibility.

Vault utilities

The hooks package re-exports several delegation helpers and types.

Export	Purpose
`ZERO_RATE_MANAGER_ID`	Canonical zero vault ID
`VAULT_ZERO_ADDRESS`	Canonical zero vault registry address
`isZeroRateManagerId(value)`	Checks whether a vault ID is the zero ID
`normalizeRateManagerId(value)`	Normalizes a vault ID string
`normalizeRegistry(value)`	Normalizes a registry address string
`getDelegationRoute(client, escrow)`	Returns the V2 delegation route for the target escrow
`classifyDelegationState(currentRateManagerId, currentRegistry, targetRateManagerId, targetRegistry)`	Classifies whether a deposit is delegated here, elsewhere, or not delegated

Useful exported types:

DelegationRoute
DelegationState
DelegationDepositTarget
BatchResult
SendTransactionFn
SendBatchFn

When to use hooks vs the core client

Use hooks when you want component-local transaction state. Use the core client directly when you need:

quote lookups with getQuote()
RPC-first reads such as getDeposits() and getIntent()
indexer queries through client.indexer
client methods that do not have a React wrapper yet

Help?

If you run into issues, join our Discord.

What this does​

Installation​

Hook pattern​

Deposit hooks​

Intent hooks​

Vault hooks​

useCreateVault​

useVaultDelegation​

Vault settings hooks​

Payment method hooks​

Currency hooks​

V3 capacity reads​

Vault utilities​

When to use hooks vs the core client​

Help?​