Skip to main content
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.