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 | undefined; arguments also accept 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 | undefined
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"
import { idlFactory, type Ledger } from "./declarations/ledger"


// 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",
})


async function readSupply() {
  // 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",
  })
}