Skip to main content

Documentation Index

Fetch the complete documentation index at: https://krono.fabianpiper.com/docs/llms.txt

Use this file to discover all available pages before exploring further.

This hook requires the OrderbookProvider or AssetPairsProvider to be present in your component tree to provide the underlying AssetPairs instance.

​
Import

import { useAssetPairs } from '@krono/hooks'

​
Usage

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>
  );
}

​
Parameters

import { type UseAssetPairsParameters } from '@krono/hooks'
​
initialData
AssetPairsData
Initial data to hydrate the state immediately. Useful for SSR or restoring data from a persistent cache.
import { useAssetPairs } from '@krono/hooks';

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

​
Return Type

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

​
State

​
symbols
SymbolOption[]
The list of available trading pairs, filtered by topN (liquidity) and sorted alphabetically by label.
​
symbolMap
Map<string, SymbolOption>
A lookup map for O(1) access to symbol data.
​
loading
boolean
true whenever a fetch request is in flight.
​
loaded
boolean
true once the first successful fetch has completed.
​
error
Error | null
Contains the error object if the last fetch attempt failed.
​
topN
number
default:100
The current number of high-liquidity pairs being tracked.

​
Actions

​
refresh
() => Promise<AssetPairsData>
Manually triggers a new fetch request from the Kraken API.
​
findSymbol
(search: string) => SymbolOption | undefined
Case-insensitive search. Matches against wsname (BTC/USD), altname (XBTUSD), displayLabel, and internal Kraken keys.
​
setTopN
(n: number) => void
Updates the liquidity filter. Note: If the state is already loaded, changing this value triggers an automatic re-fetch.
​
clear
() => void
Wipes the current local state and resets status to idle.

​
Examples

Use findSymbol for efficient lookups across multiple identifier types. 
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>
  )
}

​
Dynamic Liquidity Filtering

Change the number of tracked pairs on the fly using the setTopN action. 
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>
  );
}

​
SSR Hydration

If you are using Next.js or another SSR framework, you can pass data from the server to prevent layout shifts. 
export function Page({ prefetchedPairs }) {
  const { symbols } = useAssetPairs({ initialData: cache });
  // ...
}

AssetPairs Core

Explore the underlying class logic and event emitters.

useOrderbookConfig

Use symbols from this hook to open a WebSocket orderbook feed.

useOrderbookPlayback

Use historical orderbook data to travel in time.

Kraken API

Explore the GetAssetInfo endpoint in the Kraken API docs.