Metadata Reactor Demo

This example uses a MetadataDisplayReactor to connect by ID to any canister that exposes its Candid interface (as candid:service metadata or through __get_candid_interface_tmp_hack), fetch that Candid at runtime, and show the form (input) and result (output) metadata the reactor generates for each method. For a canister that exposes neither, initialize() throws and the demo reports that it failed to connect. It is plain TypeScript, with no framework.

Features Demonstrated

• Runtime Candid: initialize() fetches the canister’s interface, so no declarations are generated ahead of time.
• Method Discovery: getMethodNames() lists every method of the canister.
• Input and Output Metadata: getInputMeta() and getOutputMeta() return the field trees, defaults and schemas for the selected method.
• Resolved Results: callMethod() returns the result already resolved through the output metadata.

Links

Open in StackBlitzEdit and run in your browser

View on GitHubBrowse the source code

Live Preview

Implementation

src/main.ts

import { ClientManager } from "@ic-reactor/core"
import { MetadataDisplayReactor } from "@ic-reactor/candid"
import { QueryClient } from "@tanstack/query-core"

const clientManager = new ClientManager({
  queryClient: new QueryClient(),
  agentOptions: { host: "https://ic0.app" },
})

const reactor = new MetadataDisplayReactor({
  canisterId, // entered by the user
  clientManager,
  name: "DynamicActor",
})

async function inspect() {
  // Fetch the canister's Candid and build the metadata
  await reactor.initialize()
  const methods = reactor.getMethodNames()

  // For the selected method
  const methodName = methods[0]
  const argMeta = reactor.getInputMeta(methodName)
  const resultMeta = reactor.getOutputMeta(methodName)

  // The result comes back resolved through the output metadata
  const result = await reactor.callMethod({ functionName: methodName })
}

See MetadataDisplayReactor for the metadata shapes.