useAssetPairs

import { useAssetPairs } from '@krono/hooks'

import { useAssetPairs } from '@krono/hooks'

function App() {
  const { symbols, loading } = useAssetPairs();

  if (loading) return <div>loading...</div>;

  return (
    <ul>
      {symbols.map((symbol) => (
        <li key={symbol.value}>{symbol.displayLabel}</li>
      ))}
    </ul>
  );
}

import { type UseAssetPairsParameters } from '@krono/hooks'

import { useAssetPairs } from '@krono/hooks';

function App() {
  const result = useAssetPairs({
    initialData: {
      symbols: cache.symbols,
      symbolMap: cache.symbolMap,
    },
  });
}

import { type UseAssetPairsReturnType } from '@krono/hooks'

function SearchComponent() {
  const { findSymbol } = useAssetPairs()
  const [query, setQuery] = useState('')

  // This will match "BTC/USD", "XBTUSD", or "XXBTZUSD"
  const pair = findSymbol(query)

  return (
    <div>
      <input
        type="text"
        placeholder="Search pairs..."
        onChange={(e) => setQuery(e.target.value)}
      />
      {pair && <div>Found: {pair.displayLabel}</div>}
    </div>
  )
}

import { useAssetPairs } from '@krono/hooks';

function App() {
  const { topN, setTopN } = useAssetPairs();

  return (
    <select value={topN} onChange={(e) => setTopN(Number(e.target.value))}>
      <option value={10}>Top 10</option>
      <option value={100}>Top 100</option>
      <option value={500}>Top 500</option>
    </select>
  );
}

export function Page({ prefetchedPairs }) {
  const { symbols } = useAssetPairs({ initialData: cache });
  // ...
}