@tari-project/tari-extension-query-builder 0.0.4

package/src/main.tsx

@@ -0,0 +1,13 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App.tsx";
+
+const rootElement = document.getElementById("root");
+if (!rootElement) {
+  throw new Error("Root element not found");
+}
+createRoot(rootElement).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

package/src/query-builder/tari-type.ts

@@ -0,0 +1,185 @@
+import { Type } from "@tari-project/typescript-bindings";
+import { HTMLInputTypeAttribute } from "react";
+import { SafeParseReturnType, z, ZodFirstPartySchemaTypes } from "zod";
+
+export enum InputControlType {
+  TextBoxInput = "TextBoxInput",
+  CheckBoxInput = "CheckBoxInput",
+}
+
+export class TariType {
+  public props: TypeProps;
+
+  constructor(public type: Type) {
+    this.props = getTypeProps(type);
+  }
+
+  public getInputControlType(): InputControlType {
+    return this.type === "Bool" ? InputControlType.CheckBoxInput : InputControlType.TextBoxInput;
+  }
+
+  public get prompt(): string {
+    return getPrompt(this.type);
+  }
+
+  public get inputType(): HTMLInputTypeAttribute {
+    return this.props.htmlType;
+  }
+
+  public get min(): bigint | undefined {
+    return this.props.minValue;
+  }
+
+  public get max(): bigint | undefined {
+    return this.props.maxValue;
+  }
+
+  public validate(data: string): SafeParseReturnType<unknown, unknown> {
+    return this.props.validator.safeParse(data);
+  }
+
+  public isVoid(): boolean {
+    return this.type === "Unit";
+  }
+
+  public isTuple(): boolean {
+    return typeof this.type === "object" && "Tuple" in this.type;
+  }
+
+  public getTupleDetails(): [TariType?, TariType?] {
+    if (typeof this.type === "object" && "Tuple" in this.type && this.type.Tuple.length === 2) {
+      return [new TariType(this.type.Tuple[0]), new TariType(this.type.Tuple[1])];
+    }
+    return [undefined, undefined];
+  }
+}
+
+function getSignedMin(bits: number): bigint {
+  return -(2n ** BigInt(bits - 1));
+}
+
+function getSignedMax(bits: number): bigint {
+  return 2n ** BigInt(bits - 1) - 1n;
+}
+
+function getUnsignedMax(bits: number): bigint {
+  return 2n ** BigInt(bits) - 1n;
+}
+
+function getPrompt(type: Type): string {
+  if (typeof type === "string") {
+    return type;
+  } else {
+    if ("Vec" in type) {
+      const innerType = getPrompt(type.Vec);
+      return `Vec<${innerType}>`;
+    } else if ("Tuple" in type) {
+      const args = type.Tuple.map(getPrompt);
+      return `Tuple<${args.join(", ")}>`;
+    } else if ("Other" in type) {
+      return type.Other.name;
+    }
+  }
+  return "Invalid";
+}
+
+interface TypeProps {
+  htmlType: HTMLInputTypeAttribute;
+  minValue?: bigint;
+  maxValue?: bigint;
+  validator: ZodFirstPartySchemaTypes;
+}
+
+function getTypeProps(type: Type): TypeProps {
+  let htmlType: HTMLInputTypeAttribute = "number";
+  let minValue: bigint | undefined = undefined;
+  let maxValue: bigint | undefined = undefined;
+  let validator: ZodFirstPartySchemaTypes = z.any();
+
+  if (typeof type === "string") {
+    switch (type) {
+      case "Bool":
+        validator = z.boolean();
+        break;
+      case "I8": {
+        minValue = getSignedMin(8);
+        maxValue = getSignedMax(8);
+        break;
+      }
+      case "I16": {
+        minValue = getSignedMin(16);
+        maxValue = getSignedMax(16);
+        break;
+      }
+      case "I32": {
+        minValue = getSignedMin(32);
+        maxValue = getSignedMax(32);
+        break;
+      }
+      case "I64": {
+        minValue = getSignedMin(64);
+        maxValue = getSignedMax(64);
+        break;
+      }
+      case "I128": {
+        minValue = getSignedMin(128);
+        maxValue = getSignedMax(128);
+        break;
+      }
+      case "U8": {
+        minValue = 0n;
+        maxValue = getUnsignedMax(8);
+        break;
+      }
+      case "U16": {
+        minValue = 0n;
+        maxValue = getUnsignedMax(16);
+        break;
+      }
+      case "U32": {
+        minValue = 0n;
+        maxValue = getUnsignedMax(32);
+        break;
+      }
+      case "U64": {
+        minValue = 0n;
+        maxValue = getUnsignedMax(64);
+        break;
+      }
+      case "U128": {
+        minValue = 0n;
+        maxValue = getUnsignedMax(128);
+        break;
+      }
+      default:
+        htmlType = "text";
+    }
+  } else {
+    htmlType = "text";
+  }
+
+  if (minValue != null && maxValue != null) {
+    validator = z
+      .string()
+      .refine(
+        (val) => {
+          try {
+            BigInt(val);
+            return true;
+          } catch {
+            return false;
+          }
+        },
+        { message: "Invalid bigint string" },
+      )
+      .transform((val) => BigInt(val))
+      .refine((val) => BigInt(val) >= minValue, {
+        message: `Value must be greater than or equal to ${minValue.toString()}`,
+      })
+      .refine((val) => BigInt(val) <= maxValue, {
+        message: `Value must be less than or equal to ${maxValue.toString()}`,
+      });
+  }
+
+  return { htmlType, minValue, maxValue, validator };
+}

package/src/query-builder/template-reader.ts

@@ -0,0 +1,69 @@
+import { CALL_NODE_RETURN } from "@/components/query-builder/nodes/call-node.types";
+import { GenericNodeType, InputConnectionType, NodeType, QueryBuilderState } from "@/store/types";
+import { TemplateDef } from "@tari-project/typescript-bindings";
+
+export const COMPONENT_ADDRESS_NAME = "__component_address___";
+
+type GenericNodeDescription = Parameters<QueryBuilderState["addNodeAt"]>[0];
+
+export class TemplateReader {
+  constructor(
+    public templateDef: TemplateDef,
+    public templateAddress: string,
+  ) {}
+
+  public get templateName(): string {
+    return this.templateDef.V1.template_name;
+  }
+
+  public getGenericNode(functionName: string): GenericNodeDescription | null {
+    const fn = this.templateDef.V1.functions.find((f) => f.name === functionName);
+    if (!fn) {
+      return null;
+    }
+    const args = fn.arguments;
+    if (!args.length) {
+      return null;
+    }
+    const isMethod = args[0].name === "self";
+    const inputs = args.map((arg) => {
+      if (arg.name === "self") {
+        return {
+          inputConnectionType: InputConnectionType.ComponentAddress,
+          name: COMPONENT_ADDRESS_NAME,
+          label: "Component Address",
+          type: { Other: { name: "Component" } },
+        };
+      }
+      return {
+        inputConnectionType: InputConnectionType.Parameter,
+        name: arg.name,
+        type: arg.arg_type,
+      };
+    });
+
+    return {
+      type: NodeType.GenericNode,
+      data: {
+        type: GenericNodeType.CallNode,
+        metadata: {
+          type: GenericNodeType.CallNode,
+          isMethod,
+          templateName: this.templateName,
+          templateAddress: this.templateAddress,
+          fn,
+        },
+        hasEnterConnection: true,
+        hasExitConnection: true,
+        icon: isMethod ? "cube" : "home",
+        badge: this.templateName,
+        title: functionName,
+        inputs,
+        output: {
+          type: fn.output,
+          name: CALL_NODE_RETURN,
+        },
+      },
+    };
+  }
+}

package/src/root.css

@@ -0,0 +1,4 @@
+#root {
+  width: 100vw;
+  height: 100vh;
+}

package/src/store/persistence/handlers.ts

@@ -0,0 +1,16 @@
+import { QueryBuilderState } from "../types";
+import { AnyPersistedState, ValidationResult } from "./types";
+import { loadStateV1, saveStateV1 } from "./v1_0";
+
+interface VersionHandler<T extends AnyPersistedState> {
+  version: T["version"];
+  save: (state: QueryBuilderState) => T;
+  load: (storedState: unknown) => ValidationResult<T>;
+}
+
+export const versionHandlers: Record<string, VersionHandler<AnyPersistedState>> = {
+  "1.0": { version: "1.0", save: saveStateV1, load: loadStateV1 },
+};
+
+export const latestVersion = "1.0";
+export const latestVersionHandler = versionHandlers[latestVersion];

package/src/store/persistence/types.ts

@@ -0,0 +1,14 @@
+import { z } from "zod";
+import { Edge } from "@xyflow/react";
+import { CustomNode } from "../types";
+
+export interface PersistedStateV1 {
+  version: "1.0";
+  nodes: CustomNode[];
+  edges: Edge[];
+}
+
+export type LatestPersistedState = PersistedStateV1;
+export type AnyPersistedState = PersistedStateV1;
+
+export type ValidationResult<T> = { success: true; data: T } | { success: false; error: z.ZodError };

package/src/store/persistence/v1_0.ts

@@ -0,0 +1,35 @@
+import { z } from "zod";
+import { CustomNode, QueryBuilderState } from "../types";
+import { PersistedStateV1, ValidationResult } from "./types";
+import { Edge } from "@xyflow/react";
+
+const persistedStateV1Schema = z.object({
+  version: z.literal("1.0"),
+  nodes: z.unknown(),
+  edges: z.unknown(),
+});
+
+export const saveStateV1 = (state: QueryBuilderState): PersistedStateV1 => ({
+  version: "1.0",
+  nodes: state.nodes,
+  edges: state.edges,
+});
+
+export const loadStateV1 = (storedState: unknown): ValidationResult<PersistedStateV1> => {
+  const result = persistedStateV1Schema.safeParse(storedState);
+  if (!result.success) {
+    return { success: false, error: result.error };
+  }
+  const { version, nodes, edges } = result.data;
+  if (!nodes || !edges) {
+    return { success: false, error: new z.ZodError([]) };
+  }
+  return {
+    success: true,
+    data: {
+      version,
+      nodes: nodes as CustomNode[],
+      edges: edges as Edge[],
+    },
+  };
+};