React hooks

npm install @opaquecash/react @opaquecash/opaque

import { useState } from "react";
import { OpaqueClient } from "@opaquecash/opaque";
import { OpaqueProvider } from "@opaquecash/react";

function App({ children }) {
  const [client, setClient] = useState<OpaqueClient | null>(null);

  async function connect() {
    setClient(
      await OpaqueClient.fromWallet({
        wallets: { chain: "ethereum", address, provider: window.ethereum },
        chainId: 11155111,
        rpcUrl,
        wasmModuleSpecifier: "/pkg/cryptography.js",
        solana: { cluster: "devnet" },
        starknet: {},   // enable Starknet (Sepolia) scanning + call builders
      }),
    );
  }

  return <OpaqueProvider client={client}>{children}</OpaqueProvider>;
}

import { useOpaqueClient, useOpaqueClientOrNull } from "@opaquecash/react";

function Account() {
  const client = useOpaqueClient();          // throws outside a connected provider
  return <code>{client.getMetaAddressHex()}</code>;
}

function Gate({ children }) {
  const client = useOpaqueClientOrNull();    // null while disconnected
  return client ? children : <ConnectButton />;
}

import { useScan } from "@opaquecash/react";

function Inbox() {
  const { outputs, loading, error, refresh } = useScan({
    chains: ["ethereum", "solana", "starknet"],  // starknet needs the client's `starknet` option
    pollInterval: 30_000,             // optional ms; omit for scan-once
    // fromBlock, toBlock, solanaLimit, includeCrossChain, paused
  });

  if (error) return <Retry onClick={refresh} message={error.message} />;
  return (
    <ul>
      {outputs.map((o) => (
        <li key={`${o.chain}:${o.stealthAddress}`}>
          [{o.chain}] {o.stealthAddress} ({o.source})
        </li>
      ))}
      {loading && <Spinner />}
    </ul>
  );
}

import { useScan, useStealthBalance } from "@opaquecash/react";
import { formatEther } from "viem";

function Balances() {
  const { outputs } = useScan();
  const { balances, totals, loading } = useStealthBalance(outputs);

  return (
    <div>
      <p>Ethereum total: {formatEther(totals.ethereum ?? 0n)} ETH</p>
      <p>Solana total: {Number(totals.solana ?? 0n) / 1e9} SOL</p>
      <p>Starknet total: {formatEther(totals.starknet ?? 0n)} STRK</p>
      {balances.map((b) => (
        <div key={b.address}>{b.address}: {b.nativeRaw.toString()}</div>
      ))}
      {loading && <Spinner />}
    </div>
  );
}

const client = useOpaqueClient();

async function onSend() {
  await client.sendStealthPayment({ chain: "ethereum", recipient, amount });
  refresh();  // from useScan
}