Skip to content

feat(studio): read-from-view-function config-call arg kind (#147) #149

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
robercano-ghbot merged 2 commits into from
Jul 20, 2026
Merged

feat(studio): read-from-view-function config-call arg kind (#147) #149

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
47322c0
feat(studio): read-from-view-function config-call arg kind (#147)
robercano Jul 19, 2026
b65e063
fix(studio): track read-arg refs on node delete + strengthen read-arg…
robercano Jul 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 58 additions & 4 deletions apps/studio/src/components/ConfigPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@
* values) with a literal/addressRef toggle for each arg.
*/

import { getContract, getStateChangingFunctions } from "../manifest/index.js";
import { getContract, getStateChangingFunctions, getViewFunctions } from "../manifest/index.js";
import type { ManifestFunction } from "../manifest/types.js";
import type { ContractNodeData, StudioConfigStep, StudioSetXStep, StudioGrantRoleStep, StudioConfigArg, StudioAddressRef } from "../spec/types.js";
import type { ContractNodeData, StudioConfigStep, StudioSetXStep, StudioGrantRoleStep, StudioConfigArg, StudioAddressRef, StudioReadRef } from "../spec/types.js";
import { AddConfigCallMenu } from "./AddConfigCallMenu.js";

/** A deploy-id / contractName pair used to populate the target picker. */
Expand Down Expand Up @@ -106,7 +106,9 @@ function groupWriteFunctions(fns: ManifestFunction[]): { group: string; fns: Man
}

/**
* Render a single StudioConfigArg with a literal/addressRef toggle.
* Render a single StudioConfigArg with a literal / addressRef / read toggle
* (issue #147 adds "read": a value read from a deployed contract's view/pure
* function).
*/
function ConfigArgInput({
value,
Expand All @@ -129,10 +131,19 @@ function ConfigArgInput({
onChange: (v: StudioConfigArg) => void;
}) {
const isRef = typeof value === "object" && (value as StudioAddressRef).kind === "addressRef";
const isRead = typeof value === "object" && (value as StudioReadRef).kind === "read";
// The canonical aria-label for this arg slot (used by tests and accessibility).
// Matches the original format: setx-arg-${nodeId}-${stepId}-${index}
const argLabel = `setx-arg-${nodeId}-${stepId}-${index}`;

// Resolve view/pure functions available on the currently-selected read
// source contract (empty when no source is selected yet or it isn't in the
// manifest — free-text fallback never crashes).
const readContractName = isRead
? (deployTargets.find((dt) => dt.deployId === (value as StudioReadRef).contract)?.contractName ?? "")
: "";
const readViewFns = isRead ? getViewFunctions(readContractName) : [];

return (
<div style={{ marginBottom: 6 }}>
{inputName && (
Expand All @@ -143,10 +154,14 @@ function ConfigArgInput({
<div style={{ display: "flex", gap: 4 }}>
<select
style={{ ...inputStyle, width: "auto", marginBottom: 0, minWidth: 70 }}
value={isRef ? "ref" : "literal"}
value={isRead ? "read" : isRef ? "ref" : "literal"}
onChange={(e) => {
if (e.target.value === "ref") {
onChange({ kind: "addressRef", deployId: deployTargets[0]?.deployId ?? "" });
} else if (e.target.value === "read") {
const firstTarget = deployTargets[0];
const firstFn = firstTarget ? getViewFunctions(firstTarget.contractName)[0] : undefined;
onChange({ kind: "read", contract: firstTarget?.deployId ?? "", function: firstFn?.name ?? "" });
} else {
onChange(typeof value === "object" ? "" : value);
}
Expand All @@ -155,6 +170,7 @@ function ConfigArgInput({
>
<option value="literal">literal</option>
<option value="ref">address ref</option>
<option value="read">read</option>
</select>
{isRef ? (
<select
Expand All @@ -172,6 +188,44 @@ function ConfigArgInput({
</option>
))}
</select>
) : isRead ? (
<>
<select
style={{ ...inputStyle, marginBottom: 0 }}
value={(value as StudioReadRef).contract}
onChange={(e) => {
const newContract = e.target.value;
const newContractName = deployTargets.find((dt) => dt.deployId === newContract)?.contractName ?? "";
const firstFn = getViewFunctions(newContractName)[0];
onChange({ kind: "read", contract: newContract, function: firstFn?.name ?? "" });
}}
aria-label={`${argLabel}-read-contract`}
>
{deployTargets.length === 0 && (
<option value="">— no contracts —</option>
)}
{deployTargets.map((dt) => (
<option key={dt.deployId} value={dt.deployId}>
{dt.deployId}
</option>
))}
</select>
<select
style={{ ...inputStyle, marginBottom: 0 }}
value={(value as StudioReadRef).function}
onChange={(e) => onChange({ ...(value as StudioReadRef), function: e.target.value })}
aria-label={`${argLabel}-read-function`}
>
{readViewFns.length === 0 && (
<option value="">— no view functions —</option>
)}
{readViewFns.map((fn) => (
<option key={fn.signature} value={fn.name}>
{fn.name}()
</option>
))}
</select>
</>
) : (
<input
style={{ ...inputStyle, marginBottom: 0 }}
Expand Down
64 changes: 58 additions & 6 deletions apps/studio/src/components/ContractNode.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,11 @@ import type {
ArgSlotUpdate,
StudioConfigStep,
StudioAddressRef,
StudioReadRef,
StudioSetXStep,
StudioGrantRoleStep,
} from "../spec/types.js";
import { getContract, getStateChangingFunctions } from "../manifest/index.js";
import { getContract, getStateChangingFunctions, getViewFunctions } from "../manifest/index.js";
import type { ManifestFunction } from "../manifest/types.js";
import { AddConfigCallMenu } from "./AddConfigCallMenu.js";

Expand Down Expand Up @@ -442,7 +443,9 @@ const smallSelectStyle: React.CSSProperties = {
};

/**
* Renders a single config step arg: either a literal input or an address-ref picker.
* Renders a single config step arg: a literal input, an address-ref picker,
* or a "read" picker (a value read from a deployed contract's view/pure
* function — issue #147).
*/
function ConfigArgInput({
value,
Expand All @@ -453,31 +456,41 @@ function ConfigArgInput({
deployTargets,
onChange,
}: {
value: string | StudioAddressRef;
value: string | StudioAddressRef | StudioReadRef;
index: number;
stepId: string;
nodeId: string;
inputName?: string;
deployTargets: CanvasDeployTarget[];
onChange: (v: string | StudioAddressRef) => void;
onChange: (v: string | StudioAddressRef | StudioReadRef) => void;
}) {
const isRef = typeof value === "object" && value.kind === "addressRef";
const isRead = typeof value === "object" && value.kind === "read";
const argLabel = `config-arg-${nodeId}-${stepId}-${index}`;

const readContractName = isRead
? (deployTargets.find((dt) => dt.deployId === (value as StudioReadRef).contract)?.contractName ?? "")
: "";
const readViewFns = isRead ? getViewFunctions(readContractName) : [];

return (
<div style={configArgRowStyle}>
<div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 2 }}>
{inputName && (
<span style={{ fontSize: 10, color: "var(--color-text-muted)" }}>{inputName}</span>
)}
<div style={{ display: "flex", gap: 4 }}>
{/* Kind toggle: literal vs addressRef */}
{/* Kind toggle: literal vs addressRef vs read */}
<select
style={{ ...smallSelectStyle, width: "auto", minWidth: 60 }}
value={isRef ? "ref" : "literal"}
value={isRead ? "read" : isRef ? "ref" : "literal"}
onChange={(e) => {
if (e.target.value === "ref") {
onChange({ kind: "addressRef", deployId: deployTargets[0]?.deployId ?? "" });
} else if (e.target.value === "read") {
const firstTarget = deployTargets[0];
const firstFn = firstTarget ? getViewFunctions(firstTarget.contractName)[0] : undefined;
onChange({ kind: "read", contract: firstTarget?.deployId ?? "", function: firstFn?.name ?? "" });
} else {
onChange(typeof value === "object" ? "" : value);
}
Expand All @@ -486,6 +499,7 @@ function ConfigArgInput({
>
<option value="literal">literal</option>
<option value="ref">address ref</option>
<option value="read">read</option>
</select>
{isRef ? (
<select
Expand All @@ -503,6 +517,44 @@ function ConfigArgInput({
</option>
))}
</select>
) : isRead ? (
<>
<select
style={smallSelectStyle}
value={(value as StudioReadRef).contract}
onChange={(e) => {
const newContract = e.target.value;
const newContractName = deployTargets.find((dt) => dt.deployId === newContract)?.contractName ?? "";
const firstFn = getViewFunctions(newContractName)[0];
onChange({ kind: "read", contract: newContract, function: firstFn?.name ?? "" });
}}
aria-label={`${argLabel}-read-contract`}
>
{deployTargets.length === 0 && (
<option value="">— no contracts on canvas —</option>
)}
{deployTargets.map((dt) => (
<option key={dt.deployId} value={dt.deployId}>
{dt.deployId}
</option>
))}
</select>
<select
style={smallSelectStyle}
value={(value as StudioReadRef).function}
onChange={(e) => onChange({ ...(value as StudioReadRef), function: e.target.value })}
aria-label={`${argLabel}-read-function`}
>
{readViewFns.length === 0 && (
<option value="">— no view functions —</option>
)}
{readViewFns.map((fn) => (
<option key={fn.signature} value={fn.name}>
{fn.name}()
</option>
))}
</select>
</>
) : (
<input
style={smallInputStyle}
Expand Down
55 changes: 52 additions & 3 deletions apps/studio/src/components/OrderedConfigPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@
*/

import { useState } from "react";
import type { StudioOrderedConfigStep, StudioSetXStep, StudioConfigArg, StudioAddressRef } from "../spec/types.js";
import { getContract } from "../manifest/index.js";
import type { StudioOrderedConfigStep, StudioSetXStep, StudioConfigArg, StudioAddressRef, StudioReadRef } from "../spec/types.js";
import { getContract, getViewFunctions } from "../manifest/index.js";
import type { ManifestFunction } from "../manifest/types.js";

/** A deploy-id / contractName pair for the target picker. */
Expand Down Expand Up @@ -134,8 +134,14 @@ function OrderedArgInput({
onChange: (v: StudioConfigArg) => void;
}) {
const isRef = typeof value === "object" && (value as StudioAddressRef).kind === "addressRef";
const isRead = typeof value === "object" && (value as StudioReadRef).kind === "read";
const argLabel = `ordered-arg-${stepId}-${index}`;

const readContractName = isRead
? (deployTargets.find((dt) => dt.deployId === (value as StudioReadRef).contract)?.contractName ?? "")
: "";
const readViewFns = isRead ? getViewFunctions(readContractName) : [];

return (
<div style={argRowStyle}>
{inputName && (
Expand All @@ -144,10 +150,14 @@ function OrderedArgInput({
<div style={{ display: "flex", gap: 4 }}>
<select
style={{ ...inputStyle, width: "auto", marginBottom: 0, minWidth: 70 }}
value={isRef ? "ref" : "literal"}
value={isRead ? "read" : isRef ? "ref" : "literal"}
onChange={(e) => {
if (e.target.value === "ref") {
onChange({ kind: "addressRef", deployId: deployTargets[0]?.deployId ?? "" });
} else if (e.target.value === "read") {
const firstTarget = deployTargets[0];
const firstFn = firstTarget ? getViewFunctions(firstTarget.contractName)[0] : undefined;
onChange({ kind: "read", contract: firstTarget?.deployId ?? "", function: firstFn?.name ?? "" });
} else {
onChange(typeof value === "object" ? "" : value);
}
Expand All @@ -156,6 +166,7 @@ function OrderedArgInput({
>
<option value="literal">literal</option>
<option value="ref">address ref</option>
<option value="read">read</option>
</select>
{isRef ? (
<select
Expand All @@ -173,6 +184,44 @@ function OrderedArgInput({
</option>
))}
</select>
) : isRead ? (
<>
<select
style={{ ...inputStyle, marginBottom: 0 }}
value={(value as StudioReadRef).contract}
onChange={(e) => {
const newContract = e.target.value;
const newContractName = deployTargets.find((dt) => dt.deployId === newContract)?.contractName ?? "";
const firstFn = getViewFunctions(newContractName)[0];
onChange({ kind: "read", contract: newContract, function: firstFn?.name ?? "" });
}}
aria-label={`${argLabel}-read-contract`}
>
{deployTargets.length === 0 && (
<option value="">— no contracts on canvas —</option>
)}
{deployTargets.map((dt) => (
<option key={dt.deployId} value={dt.deployId}>
{dt.deployId}
</option>
))}
</select>
<select
style={{ ...inputStyle, marginBottom: 0 }}
value={(value as StudioReadRef).function}
onChange={(e) => onChange({ ...(value as StudioReadRef), function: e.target.value })}
aria-label={`${argLabel}-read-function`}
>
{readViewFns.length === 0 && (
<option value="">— no view functions —</option>
)}
{readViewFns.map((fn) => (
<option key={fn.signature} value={fn.name}>
{fn.name}()
</option>
))}
</select>
</>
) : (
<input
style={{ ...inputStyle, marginBottom: 0 }}
Expand Down
30 changes: 22 additions & 8 deletions apps/studio/src/hooks/useGraph.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ import type {
StudioGrantRoleStep,
StudioOrderedConfigStep,
StudioParameter,
StudioReadRef,
ArgSlotUpdate,
} from "../spec/types.js";
import type { ContractManifest, ManifestFunction } from "../manifest/index.js";
Expand Down Expand Up @@ -132,7 +133,9 @@ function bumpCountersForPersistedState(state: PersistedState): void {
/**
* True when a config step (per-node or ordered) references the given
* deployId — either as its explicit `target`, as an address-ref in one of
* its setX args, or as a `ref`-kind grantRole account.
* its setX args, as a `read`-kind arg sourcing FROM that deployId (or one
* of the read's own nested addressRef call-args), or as a `ref`-kind
* grantRole account.
*
* An empty deployId never counts as a match: freshly-added, not-yet-named
* nodes all start with deployId === "", and an incomplete step referencing
Expand All @@ -146,13 +149,24 @@ export function stepReferencesDeployId(
if (deployId === "") return false;
if (step.kind === "setX") {
if (step.target === deployId) return true;
return step.args.some(
(a) =>
typeof a === "object" &&
a !== null &&
(a as StudioAddressRef).kind === "addressRef" &&
(a as StudioAddressRef).deployId === deployId,
);
return step.args.some((a) => {
if (typeof a !== "object" || a === null) return false;
if ((a as StudioAddressRef).kind === "addressRef") {
return (a as StudioAddressRef).deployId === deployId;
}
if ((a as StudioReadRef).kind === "read") {
const r = a as StudioReadRef;
if (r.contract === deployId) return true;
return (r.args ?? []).some(
(ra) =>
typeof ra === "object" &&
ra !== null &&
(ra as StudioAddressRef).kind === "addressRef" &&
(ra as StudioAddressRef).deployId === deployId,
);
}
return false;
});
}
return step.accountKind === "ref" && step.accountValue === deployId;
}
Expand Down
Loading
Loading