Guide: Bind Live On-Chain Data

Goal: show real, current chain state (a price, a balance) in your UI.

Add a data slot bound to a resolver. The resolver is read at render time, so the value is always current:

import { compose } from "@chainrender/client";

const card = compose.box([
  compose.heading("ETH / USDC"),
  compose.slot("feed", { resolver: "0x<oracle-resolver>", arg: encodedArgs  }) // slot(bind, { resolver, arg }),
]);

The bound read adds only a READ_CHAIN capability — your component stays grade A. If the resolver reverts or is missing, the slot fails closed to "unavailable"; it never breaks the render or shows a fabricated value.

Pick a resolver from the Resolver Catalog, or write your own implementing supportsKind + resolve. See Concepts → Resolvers.