feat: prototype layout, switch, and interaction (Stages 1-6)

package.json

@@ -43,6 +43,7 @@
     "dist"
   ],
   "scripts": {
+    "visualize": "npx tsx scratch/visualize.ts",
     "build": "tsup",
     "clean": "rm -rf dist",
     "test": "vitest run",

scratch/add_imports.cjs

@@ -0,0 +1,35 @@
+const fs = require('fs');
+const path = require('path');
+
+function walk(dir) {
+  let results = [];
+  const list = fs.readdirSync(dir);
+  for (const file of list) {
+    const fullPath = path.join(dir, file);
+    const stat = fs.statSync(fullPath);
+    if (stat && stat.isDirectory()) {
+      results = results.concat(walk(fullPath));
+    } else if (fullPath.endsWith('.spec.ts')) {
+      results.push(fullPath);
+    }
+  }
+  return results;
+}
+
+const files = walk('test');
+for (const file of files) {
+  let content = fs.readFileSync(file, 'utf8');
+  if (!content.includes('import { DisplayField }') && !content.includes('import { DisplayField,') && !content.includes(', DisplayField }') && content.includes('as DisplayField')) {
+    // Find where types.js is imported from
+    if (content.includes('from "../src/types.js"')) {
+      content = content.replace(/import \{(.*?)\} from "\.\.\/src\/types\.js";/, 'import { $1, DisplayField } from "../src/types.js";');
+    } else if (content.includes('from "../../src/types.js"')) {
+      content = content.replace(/import \{(.*?)\} from "\.\.\/\.\.\/src\/types\.js";/, 'import { $1, DisplayField } from "../../src/types.js";');
+    } else if (content.includes('from "../../../src/types.js"')) {
+      content = content.replace(/import \{(.*?)\} from "\.\.\/\.\.\/\.\.\/src\/types\.js";/, 'import { $1, DisplayField } from "../../../src/types.js";');
+    } else {
+      content = 'import { DisplayField } from "../../src/types.js";\n' + content;
+    }
+    fs.writeFileSync(file, content);
+  }
+}

scratch/add_imports_all.cjs

@@ -0,0 +1,38 @@
+const fs = require('fs');
+const path = require('path');
+
+function walk(dir) {
+  let results = [];
+  const list = fs.readdirSync(dir);
+  for (const file of list) {
+    const fullPath = path.join(dir, file);
+    const stat = fs.statSync(fullPath);
+    if (stat && stat.isDirectory()) {
+      results = results.concat(walk(fullPath));
+    } else if (fullPath.endsWith('.spec.ts')) {
+      results.push(fullPath);
+    }
+  }
+  return results;
+}
+
+const files = walk('test');
+for (const file of files) {
+  let content = fs.readFileSync(file, 'utf8');
+  if (!content.includes('DisplayField') && !content.includes('DisplayFieldGroup')) continue;
+
+  if (!content.includes('import { DisplayField }') && !content.includes('import { DisplayField,') && !content.includes(', DisplayField }') && !content.includes('import { type DisplayField }')) {
+
+    // figure out depth
+    const depth = file.split('/').length - 1; // test/a.spec.ts -> 1, test/a/b.spec.ts -> 2
+    let prefix = '../';
+    for (let i = 1; i < depth; i++) prefix += '../';
+
+    if (content.match(/import \{(.*?)\} from ["']\.\.\/.*?src\/types\.js["'];/)) {
+      content = content.replace(/import \{(.*?)\} from ["'](\.\.\/.*?src\/types\.js)["'];/, 'import { $1, DisplayField } from "$2";');
+    } else {
+      content = `import { DisplayField } from "${prefix}src/types.js";\n` + content;
+    }
+    fs.writeFileSync(file, content);
+  }
+}

scratch/add_interaction.cjs

@@ -0,0 +1,56 @@
+const fs = require('fs');
+
+let fieldsCode = fs.readFileSync('src/fields.ts', 'utf8');
+
+fieldsCode = fieldsCode.replace(
+  '      if (switchMatch.type === "format") {',
+  `      if (switchMatch.type === "format") {`
+);
+
+// We need to import resolveInteraction from interaction.js in fields.ts
+fieldsCode = fieldsCode.replace(
+  'import { evaluateSwitchExpression } from "./switch.js";',
+  'import { evaluateSwitchExpression } from "./switch.js";\nimport { resolveInteraction } from "./interaction.js";\nimport { bytesToHex } from "./utils.js";'
+);
+
+// We need to modify processSingleField to handle interaction
+const interactionLogic = `
+    if (fieldDef.interaction) {
+      if (context.formatEmbeddedCalldata && context.resolveCalldataDescriptor) {
+        const nestedModel = await resolveInteraction(
+          context.tx,
+          fieldDef.interaction,
+          context.resolvePath,
+          context.resolveCalldataDescriptor,
+          context.externalDataProvider,
+          context.formatEmbeddedCalldata
+        );
+        const toArg = context.resolvePath(fieldDef.interaction.to);
+        let callee = context.tx.to;
+        if (toArg) {
+          if (toArg.type === "address") callee = bytesToHex(toArg.bytes);
+          else if (toArg.type === "string") callee = toArg.value;
+        }
+
+        const displayField: DisplayField = {
+          label: fieldDef.label ?? "",
+          value: "",
+          embeddedCalldata: {
+            callee,
+            chainId: context.tx.chainId,
+            display: nestedModel
+          }
+        };
+        context.displayModel.fields = context.displayModel.fields || [];
+        context.displayModel.fields.push(displayField);
+      }
+      return;
+    }
+`;
+
+fieldsCode = fieldsCode.replace(
+  '  if (fieldDef.switch) {',
+  interactionLogic + '\n  if (fieldDef.switch) {'
+);
+
+fs.writeFileSync('src/fields.ts', fieldsCode);

scratch/add_layout_fields.cjs

@@ -0,0 +1,91 @@
+const fs = require('fs');
+
+let fieldsStr = fs.readFileSync('src/fields.ts', 'utf8');
+
+const extractFunc = `
+function extractLayoutFields(
+  node: import("./types.js").LayoutNode,
+  basePath: string,
+  resolvedValues: Map<string, import("./descriptor.js").ArgumentValue>
+): Array<import("./types.js").DescriptorFieldFormat> {
+  const result: Array<import("./types.js").DescriptorFieldFormat> = [];
+
+  if (node.type === "object") {
+    for (const field of node.fields) {
+      if (field.schema) {
+        const childPath = basePath ? \`\${basePath}.\${field.name}\` : field.name;
+
+        if (field.label || field.format || field.params) {
+          result.push({
+            path: childPath,
+            label: field.label,
+            format: field.format as any,
+            params: field.params,
+          });
+        }
+
+        result.push(...extractLayoutFields(field.schema, childPath, resolvedValues));
+      }
+    }
+  } else if (node.type === "sequence") {
+    let i = 0;
+    while (true) {
+      const childPath = basePath ? \`\${basePath}.[\${i}]\` : \`[\${i}]\`;
+      let hasChild = false;
+      for (const key of resolvedValues.keys()) {
+        if (key === childPath || key.startsWith(childPath + ".")) {
+          hasChild = true;
+          break;
+        }
+      }
+      if (!hasChild) break;
+
+      const elementFields = extractLayoutFields(node.element, childPath, resolvedValues);
+      if (elementFields.length > 0) {
+        result.push(...elementFields);
+      }
+      i++;
+    }
+  }
+
+  return result;
+}
+`;
+
+// Insert the extractFunc at the top of fields.ts
+fieldsStr = fieldsStr.replace('import { decodeLayoutField', 'import { LayoutNode } from "./types.js";\n' + extractFunc + '\nimport { decodeLayoutField');
+
+// Add layoutResolvedValues to FieldContext
+fieldsStr = fieldsStr.replace(
+  'formatEmbeddedCalldata: typeof formatCalldata;',
+  'formatEmbeddedCalldata: typeof formatCalldata;\n  layoutResolvedValues?: Map<string, ArgumentValue>;'
+);
+
+// Pass layoutResolvedValues to FieldContext inside applyFieldFormats
+fieldsStr = fieldsStr.replace(
+  'externalDataProvider,\n    formatEmbeddedCalldata,\n  };',
+  'externalDataProvider,\n    formatEmbeddedCalldata,\n    layoutResolvedValues,\n  };'
+);
+
+// In processSingleField, before `const effectiveFormat = merged.format ?? "raw";`:
+const hookStr = `
+  if (merged.layout && !merged.format) {
+    if (ctx.layoutResolvedValues) {
+      const extracted = extractLayoutFields(merged.layout, defPath, ctx.layoutResolvedValues);
+      if (extracted.length > 0) {
+        const processedExtracted = await processFlatFields(extracted, ctx);
+        return [
+          {
+            ...(merged.label && { label: merged.label }),
+            fields: processedExtracted,
+          }
+        ];
+      }
+    }
+  }
+  const effectiveFormat = merged.format ?? "raw";
+`;
+
+fieldsStr = fieldsStr.replace('const effectiveFormat = merged.format ?? "raw";', hookStr);
+
+fs.writeFileSync('src/fields.ts', fieldsStr);

scratch/add_layout_fields.cjs.out

@@ -0,0 +1,48 @@
+
+function extractLayoutFields(
+  node: import("./types.js").LayoutNode,
+  basePath: string,
+  resolvedValues: Map<string, import("./descriptor.js").ArgumentValue>
+): Array<import("./types.js").DescriptorFieldFormat> {
+  const result: Array<import("./types.js").DescriptorFieldFormat> = [];
+
+  if (node.type === "object") {
+    for (const field of node.fields) {
+      if (field.schema) {
+        const childPath = basePath ? `${basePath}.${field.name}` : field.name;
+
+        if (field.label || field.format || field.params) {
+          result.push({
+            path: childPath,
+            label: field.label,
+            format: field.format as any,
+            params: field.params,
+          });
+        }
+
+        result.push(...extractLayoutFields(field.schema, childPath, resolvedValues));
+      }
+    }
+  } else if (node.type === "sequence") {
+    let i = 0;
+    while (true) {
+      const childPath = basePath ? `${basePath}.[${i}]` : `[${i}]`;
+      let hasChild = false;
+      for (const key of resolvedValues.keys()) {
+        if (key === childPath || key.startsWith(childPath + ".")) {
+          hasChild = true;
+          break;
+        }
+      }
+      if (!hasChild) break;
+
+      const elementFields = extractLayoutFields(node.element, childPath, resolvedValues);
+      if (elementFields.length > 0) {
+        result.push(...elementFields);
+      }
+      i++;
+    }
+  }
+
+  return result;
+}