Skip to content
IC Reactor

Query Demo

A comprehensive example showing queries, suspense, and real-time data fetching from mainnet ICP ledgers.

Features Demonstrated

Section titled “Features Demonstrated”
  • createActorSuspenseQuery for static queries
  • createActorSuspenseQueryFactory for dynamic queries with args
  • DisplayReactor for automatic type transformations
  • Multi-token support (ICP, ckBTC, ckETH)
  • Internet Identity authentication
  • Balance formatting and display
Section titled “Links”
Open in StackBlitz Edit and run in your browser
View on GitHub Browse the source code

Live Preview

Section titled “Live Preview”

Key Code

Section titled “Key Code”
// Setup with DisplayReactor for human-readable display values
export const icpReactor = new DisplayReactor<Ledger>({
  clientManager,
  canisterId: "ryjl3-tyaaa-aaaaa-aaaba-cai", // ICP Ledger mainnet
  idlFactory: ledgerIdlFactory,
})


// Static query - no args needed
export const icpNameQuery = createActorSuspenseQuery(icpReactor, {
  functionName: "icrc1_name",
})


// Factory for dynamic queries with args
export const getIcpBalance = createActorSuspenseQueryFactory(icpReactor, {
  functionName: "icrc1_balance_of",
  select: (balance) => formatBalance(balance, "ICP"),
})