Guides

Guide: Declare a Safe Action

Goal: add a button that signs a transaction — safely.

Declare the action structurally. The runtime constructs the calldata from your declaration; it can only be what you declared:

compose.button("Claim", {
  variant: "primary",
  action: { to: "0x<contract>", sig: "claim(uint256)", args: "$amount" },
});

At sign time:

import { buildActionRequest, describeAction, splitArgs } from "@chainrender/client/runtime";
const action = { to: "0x<contract>", sig: "claim(uint256)", args: splitArgs("$amount") };
const tx = buildActionRequest(action, { amount: "1000" });        // calldata = exactly claim(1000)
const human = describeAction(action, { amount: "1000" });         // plain-language for the user to review

The enforcer guarantees the declaration is honest (R3–R5): the button can't smuggle a different call, target, or hidden value. See Concepts → Actions & Signing.