Skip to content
IC Reactor

Codec Demo

Demonstrates the automatic type transformation system comparing DisplayReactor vs regular Reactor.

Features Demonstrated

Section titled “Features Demonstrated”
  • BigInt → string transformations
  • Principal → text transformations
  • Optional unwrapping ([T] | [] → T | null)
  • Variant normalization with _type discriminator
  • Side-by-side comparison of raw vs display types
  • Bidirectional transformation (input and output)
Section titled “Links”
Open in StackBlitzEdit and run in your browser
View on GitHubBrowse the source code

Live Preview

Section titled “Live Preview”

Type Transformation Reference

Section titled “Type Transformation Reference”
Candid Type Raw TypeScript Display (transformed)
nat / int bigint string
nat64 / int64 bigint string
nat8/16/32, int8/16/32 number number (unchanged)
principal Principal string
opt T [T] | [] T | null
blob Uint8Array string (hex)
variant { A } { A: null } { _type: "A" }

Key Code

Section titled “Key Code”
src/main.ts
import { Reactor, DisplayReactor } from "@ic-reactor/react"


// Regular Reactor - raw Candid types
const rawReactor = new Reactor<Ledger>({
  clientManager,
  idlFactory,
  name: "ICP-raw",
  canisterId: "ryjl3-tyaaa-aaaaa-aaaba-cai",
})


// DisplayReactor - transformed types for UI
const displayReactor = new DisplayReactor<Ledger>({
  clientManager,
  idlFactory,
  name: "ICP",
  canisterId: "ryjl3-tyaaa-aaaaa-aaaba-cai",
})


// Raw: rawSupply is bigint — 123456789000000000n
const rawSupply = await rawReactor.callMethod({
  functionName: "icrc1_total_supply",
})


// Display: displaySupply is string — "123456789000000000"
const displaySupply = await displayReactor.callMethod({
  functionName: "icrc1_total_supply",
})