useOrderbookConnection

import { useOrderbookConnection } from '@krono/hooks'

import { useOrderbookConnection } from '@krono/hooks'

function ConnectionManager() {
  const { status, connect, disconnect } = useOrderbookConnection();

  return (
    <div className="flex items-center gap-4">
      <div className="flex items-center gap-2">
        <StatusIndicator status={status} />
        <span className="capitalize">{status}</span>
      </div>

      {status === 'closed' ? (
        <button onClick={connect}>Connect</button>
      ) : (
        <button onClick={disconnect}>Disconnect</button>
      )}
    </div>
  );
}

import { useEffect } from 'react';
import { useOrderbookConnection } from '@krono/hooks';

function TradingPanel() {
  const { connect, disconnect, status } = useOrderbookConnection();

  useEffect(() => {
    connect();
    return () => disconnect();
  }, [connect, disconnect]);

  if (status === 'connecting') return <p>Establishing link...</p>;

  return <div>Active Trading UI</div>;
}

function ConnectionBadge() {
  const { status } = useOrderbookConnection();

  const colors = {
    open: 'bg-green-500',
    connecting: 'bg-yellow-500',
    closing: 'bg-orange-500',
    closed: 'bg-red-500',
  };

  return (
    <span className={`px-2 py-1 rounded text-white ${colors[status]}`}>
      {status}
    </span>
  );
}