useOrderbookConfig

import { useOrderbookConfig } from '@krono/hooks'

import { useOrderbookConfig } from '@krono/hooks'

function OrderbookSettings() {
  const { symbol, limit, setLimit } = useOrderbookConfig();

  return (
    <div>
      <h3>Configuring: {symbol}</h3>
      <label>Visible Levels: {limit}</label>
      <input
        type="range"
        min="1"
        max="100"
        value={limit}
        onChange={(e) => setLimit(Number(e.target.value))}
      />
    </div>
  );
}

function PerformanceControls() {
  const { throttleMs, setThrottle } = useOrderbookConfig();

  return (
    <button onClick={() => setThrottle(throttleMs === 100 ? undefined : 100)}>
      {throttleMs ? 'Disable Throttling' : 'Enable 100ms Throttle'}
    </button>
  );
}

function DepthSettings() {
  const { depth, setDepth, limit, setLimit } = useOrderbookConfig();

  return (
    <div className="flex gap-4">
      <select value={depth} onChange={(e) => setDepth(Number(e.target.value))}>
        {[10, 25, 100, 500, 1000].map(d => (
          <option key={d} value={d}>Fetch {d} levels</option>
        ))}
      </select>

      <input
        type="number"
        value={limit}
        onChange={(e) => setLimit(Number(e.target.value))}
        placeholder="Show N levels"
      />
    </div>
  );
}