Skip to content
IC Reactor

Multiple Canisters

Real-world dApps often need to talk to multiple services: a Ledger, a Governance canister, and perhaps a custom backend. This example shows how to manage multiple actors efficiently sharing the same authentication state.

Features Demonstrated

Section titled “Features Demonstrated”
  • Shared ClientManager: One login session for all canisters.
  • Multiple Reactors: Instantiating separate reactors for different IDLs (ICP Ledger vs Custom Token).
  • Organization: Structuring code to keep canister logic separate.
Section titled “Links”
Open in StackBlitzEdit and run in your browser
View on GitHubBrowse the source code

Live Preview

Section titled “Live Preview”

Best Practice: Centralized Reactor Definition

Section titled “Best Practice: Centralized Reactor Definition”

Defining all your actors in one place makes it easy to manage imports throughout your app.

src/reactor.ts
import { AuthenticationManager, defineReactor } from "@ic-reactor/react"
import { createAuthHooks } from "@ic-reactor/react"
import { QueryClient } from "@tanstack/react-query"
import {
  idlFactory as icrc2IdlFactory,
  type _SERVICE as ICRC2,
} from "./declarations/icrc2"
import {
  idlFactory as icdvIdlFactory,
  type _SERVICE as ICDV,
} from "./declarations/icdv"


// 1. Shared QueryClient
export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 30 * 1000, // 30 seconds
    },
  },
})


// 2. ICP Ledger (ICRC2) — this first call creates the shared ClientManager
export const {
  reactor: icpLedger,
  clientManager,
  useActorQuery: useICPQuery,
  useActorMutation: useICPMutation,
} = defineReactor<ICRC2>({
  name: "ICP Ledger",
  canisterId: "ryjl3-tyaaa-aaaaa-aaaba-cai",
  idlFactory: icrc2IdlFactory,
  queryClient,
  agentOptions: { host: "https://ic0.app" },
})


// 3. ICDV Token — reuses the same ClientManager (shared agent)
export const {
  reactor: icdvToken,
  useActorQuery: useICDVQuery,
  useActorMutation: useICDVMutation,
} = defineReactor<ICDV>({
  name: "ICDV Token",
  canisterId: "agtsn-xyaaa-aaaag-ak3kq-cai",
  idlFactory: icdvIdlFactory,
  clientManager,
})


// 4. One Internet Identity session for both canisters
export const authentication = new AuthenticationManager({ clientManager })


export const { useAuth, useUserPrincipal, useAgentState } =
  createAuthHooks(authentication)