Integrated DevTools

​

The One-Prop Setup

import { SorokitProvider } from "@sorokit/provider";

export function App() {
  return (
    <SorokitProvider
      network="TESTNET"
      devtools={true}
    >
      <YourApp />
    </SorokitProvider>
  );
}

​

Smart Defaults

• Development Only: The DevTools panel automatically detects your environment. It renders when process.env.NODE_ENV is development and disappears entirely in your production build, adding zero weight to your final bundle.
• Theme-Matched: The panel inherits your app’s own color tokens (--background, --foreground, and the rest), so it renders in whatever light or dark theme your app is already in, with no extra setup.

​

Advanced Configuration

<SorokitProvider
  network="TESTNET"
  devtools={{ initialOpen: true }}
>
  {/* ... */}
</SorokitProvider>

​

Key Features

1. The Sends Log: Every time useContractSend is triggered, a new entry appears. You can track the exact moment a transaction moves from QUEUED to SIMULATING, NEEDS_SIGNATURE, SUBMITTING, and finally SUCCESS (or ERROR), with the decoded args and result, the built transaction’s operation type, source account, and simulated minimum resource fee, a one-click copy of the transaction XDR, and — once the network accepts it — a link straight to the transaction on Stellar Expert.
2. Cache Inspector: A live view of every @tanstack/react-query entry Sorokit’s hooks have created, with a status breakdown (fresh, fetching, paused, stale, inactive) and each query’s key and observer count, so you can see exactly what’s cached without leaving your app.