React Hooks

React bindings for Zeny — pay for resources directly from your frontend.

ZenyProvider

import { ZenyProvider } from "@zeny/sdk/react";

function App() {
  return (
    <ZenyProvider config={{ apiKey: "your-api-key" }}>
      <YourApp />
    </ZenyProvider>
  );
}

useZenyPay

import { useZenyPay } from "@zeny/sdk/react";

function PayButton() {
  const { pay, isPaying, lastTxHash, error } = useZenyPay({
    apiKey: "your-api-key",
  });

  return (
    <div>
      <button onClick={() => pay("https://api.example.com/resource")}>
        {isPaying ? "Processing..." : "Access Resource"}
      </button>
      {lastTxHash && <p>Tx: {lastTxHash}</p>}
      {error && <p>Error: {error.message}</p>}
    </div>
  );
}

useZenyClient

import { useZenyClient } from "@zeny/sdk/react";

function StatusCheck() {
  const client = useZenyClient();

  useEffect(() => {
    client.getSupported().then(console.log);
  }, [client]);

  return <div>...</div>;
}