React example | Rule Cascade

A transfer form driven entirely by the client manifest of examples/contracts/payments-transfer.ruleset.yaml.

A transfer form driven entirely by the client manifest of examples/contracts/payments-transfer.ruleset.yaml.

# at the repository root
npm ci
npm run build                                            # builds the runtime the example links to
npm run dev -w rule-cascade-example-frontend-react

What to try:

Do this	The contract responds with
Switch Type to International	The SWIFT field appears and becomes required (`state` rule), and a fee is computed (`compute` rule)
Enter an amount of 10000 or more	A warning that blocks until you tick the acknowledgement
Enter an amount above 25000	An error only a `risk-officer` may accept
Clear the memo	A non-blocking warning

src/TransferForm.tsx contains no rule logic. It calls useRuleEvaluation(manifest, request) and renders what comes back: states for field visibility, computed for derived values, findingsFor(pointer) for messages, and allowed for the submit button. The evaluation panel also shows finding.location: the component each rule names in its target (amount-panel, beneficiary-panel, details-panel).

The form evaluates every rule on every render. A larger page can pass view: { component: 'amount-panel' } in the request to evaluate only the rules of one place, and a manifest that lists custom operators under operators needs them as the third argument: useRuleEvaluation(manifest, request, operators). This manifest lists none.

src/manifest.client.json is generated from the contract (make sync at the repository root). Against a real backend, fetch it with createManifestClient instead; see the comment in src/App.tsx.

A client pass never guarantees the server will accept: the server evaluates again and also runs the server-only rules, which are not in this manifest at all.