@tari-project/tari-extension-query-builder 0.0.13 → 0.0.15

package/dist/types.d.ts

@@ -4,4 +4,9 @@ export interface TariFlowNodeDetails {
     templateAddress: string;
     functionName: string;
 }
+declare global {
+    interface BigInt {
+        toJSON(): string | number;
+    }
+}
 //# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAEhE,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,WAAW,CAAC;IACtB,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;CACtB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAEhE,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,WAAW,CAAC;IACtB,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;CACtB;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,MAAM,IAAI,MAAM,GAAG,MAAM,CAAC;KAC3B;CACF"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tari-project/tari-extension-query-builder",
   "private": false,
-  "version": "0.0.13",
+  "version": "0.0.15",
   "type": "module",
   "main": "dist/tari-extension-query-builder.umd.js",
   "module": "dist/tari-extension-query-builder.es.js",
@@ -37,7 +37,7 @@
     "@radix-ui/react-separator": "^1.1.2",
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-tooltip": "^1.1.8",
-    "@tari-project/tarijs-all": "^0.10.1",
+    "@tari-project/tarijs-all": "^0.11.0",
     "@xyflow/react": "^12.4.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -48,12 +48,12 @@
     "tailwindcss-animate": "^1.0.7",
     "uuid": "^11.1.0",
     "zod": "^3.25.67",
-    "@tari-project/tari-extension-common": "^0.0.13"
+    "@tari-project/tari-extension-common": "^0.0.15"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",
     "@tailwindcss/vite": "^4.0.12",
-    "@tari-project/typescript-bindings": "^1.11.1",
+    "@tari-project/typescript-bindings": "^1.13.1",
     "@types/node": "^24.0.8",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",

package/src/components/query-builder/nodes/generic/generic-node.tsx

@@ -114,7 +114,7 @@ function GenericNode(props: NodeProps<GenericNode>) {
 
       {title && <h3 className="text-center font-bold pt-1 pb-3 border-b">{title}</h3>}
 
-      {inputs && (
+      {inputs?.length ? (
         <form noValidate>
           {inputs.map((input) => {
             const type = new TariType(input.type);
@@ -185,7 +185,7 @@ function GenericNode(props: NodeProps<GenericNode>) {
             }
           })}
         </form>
-      )}
+      ) : null}
 
       {outputType && renderOutputs(outputType, getOutputOffset)}
     </>

package/src/components/query-builder/query-builder.tsx

@@ -7,6 +7,9 @@ import {
   Viewport,
   Panel,
   MiniMap,
+  OnEdgesChange,
+  OnNodesChange,
+  OnConnect,
 } from "@xyflow/react";
 import {
   CALL_NODE_DRAG_DROP_TYPE,
@@ -94,6 +97,9 @@ export interface QueryBuilderProps {
   getTransactionProps?: () => Promise<TransactionProps>;
   executeTransaction?: (transaction: UnsignedTransactionV1) => Promise<void>;
   showGeneratedCode?: (code: string, type: GeneratedCodeType) => Promise<void>;
+  onEdgesChange?: OnEdgesChange;
+  onNodesChange?: OnNodesChange;
+  onConnect?: OnConnect;
 }
 
 const nodeTypes = {
@@ -111,6 +117,9 @@ function Flow({
   getTransactionProps,
   executeTransaction,
   showGeneratedCode,
+  onEdgesChange: onEdgesChangeCallback,
+  onNodesChange: onNodesChangeCallback,
+  onConnect: onConnectCallback,
 }: QueryBuilderProps) {
   const {
     nodes,
@@ -465,9 +474,18 @@ function Flow({
           edgeTypes={edgeTypes}
           nodes={nodes}
           edges={edges}
-          onNodesChange={onNodesChange}
-          onEdgesChange={onEdgesChange}
-          onConnect={onConnect}
+          onNodesChange={(change) => {
+            onNodesChange(change);
+            onNodesChangeCallback?.(change);
+          }}
+          onEdgesChange={(change) => {
+            onEdgesChange(change);
+            onEdgesChangeCallback?.(change);
+          }}
+          onConnect={(connection) => {
+            onConnect(connection);
+            onConnectCallback?.(connection);
+          }}
           onMove={onMove}
           onDragOver={onDragOver}
           onDrop={onDrop}

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

@@ -21,11 +21,8 @@ export class TemplateReader {
     if (!fn) {
       return null;
     }
-    const args = fn.arguments;
-    if (!args.length) {
-      return null;
-    }
-    const isMethod = args[0].name === "self";
+    const args = fn.arguments || [];
+    const isMethod = args[0]?.name === "self";
     const inputs = args.map((arg) => {
       if (arg.name === "self") {
         return {

package/src/store/store.ts

@@ -1,7 +1,7 @@
 import { create } from "zustand";
 import { addEdge, applyNodeChanges, applyEdgeChanges } from "@xyflow/react";
 import { v4 as uuidv4 } from "uuid";
-import { CustomNode, InputConnectionType, NodeType, type QueryBuilderState } from "./types";
+import { CustomNode, InputConnectionType, NodeType, type QueryBuilderState, SchemaAndVersion } from "./types";
 import { NODE_ENTRY, NODE_EXIT } from "@/components/query-builder/nodes/generic-node.types";
 import { getSchemaFullPath, latestVersionHandler, versionHandlers } from "./persistence/handlers";
 import { NEW_INPUT_PARAM } from "@/components/query-builder/nodes/input/constants";
@@ -12,6 +12,7 @@ import {
   CALL_NODE_RETURN_TUPLE_2,
 } from "@/components/query-builder/nodes/call-node.types";
 import { TariType } from "@/query-builder/tari-type";
+import { LatestPersistedState } from "@/store/persistence/types.ts";
 
 const DROP_NODE_OFFSET_X = 200;
 const DROP_NODE_OFFSET_Y = 50;
@@ -242,43 +243,30 @@ const useStore = create<QueryBuilderState>((set, get) => ({
     }
   },
   saveStateToString: () => {
+    const { getState } = get();
+    const state = getState();
+    return JSON.stringify(state, undefined, 2);
+  },
+  loadStateFromString: (state) => {
+    let parsedState: SchemaAndVersion & LatestPersistedState;
+    try {
+      parsedState = JSON.parse(state) as SchemaAndVersion & LatestPersistedState;
+    } catch (error) {
+      throw new Error(`Failed to parse state: ${String(error)}`);
+    }
+
+    set(validateState(parsedState));
+  },
+  getState: () => {
     const state = get();
     const persistedState = latestVersionHandler.save(state);
-    const withSchema = {
+    return {
       $schema: getSchemaFullPath(persistedState.version),
       ...persistedState,
     };
-    return JSON.stringify(withSchema, undefined, 2);
   },
-  loadStateFromString: (state) => {
-    try {
-      const parsedState = JSON.parse(state) as { version?: string } | undefined;
-      if (typeof parsedState?.version !== "string") {
-        throw new Error("Invalid persisted state: Missing or invalid version.");
-      }
-
-      const version = parsedState.version;
-      const handler = versionHandlers[version];
-
-      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-      if (!handler) {
-        throw new Error(`No handler found for version: ${version}`);
-      }
-
-      const validationResult = handler.load(parsedState);
-
-      if (validationResult.success) {
-        if (version === "1.0") {
-          set({ nodes: validationResult.data.nodes, edges: validationResult.data.edges });
-        } else {
-          throw new Error(`Unsupported version: ${version}`);
-        }
-      } else {
-        throw new Error(`Validation failed: ${validationResult.error.toString()}`);
-      }
-    } catch (error) {
-      throw new Error(`Failed to load state: ${String(error)}`);
-    }
+  setState: (state) => {
+    set(validateState(state));
   },
   isValidInputParamsTitle: (nodeId, title) => {
     if (!title.length || /\s/g.test(title) || !/^[a-zA-Z]/.test(title)) {
@@ -357,7 +345,7 @@ const useStore = create<QueryBuilderState>((set, get) => ({
     }
   },
   isValidInputParamsName: (nodeId, paramId, name) => {
-    if (!name.length || /\s/g.test(name) || !!/^[a-zA-Z]/.test(name)) {
+    if (!name.length || /\s/g.test(name) || /^[a-zA-Z]/.test(name)) {
       return false;
     }
     const node = get().getNodeById(nodeId);
@@ -397,4 +385,35 @@ const useStore = create<QueryBuilderState>((set, get) => ({
   },
 }));
 
+function validateState(state: (SchemaAndVersion & LatestPersistedState) | undefined) {
+  if (typeof state?.version !== "string") {
+    throw new Error("Invalid persisted state: Missing or invalid version.");
+  }
+
+  try {
+    const version = state.version;
+    const handler = versionHandlers[version];
+
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (!handler) {
+      throw new Error(`No handler found for version: ${version}`);
+    }
+
+    const validationResult = handler.load(state);
+
+    if (validationResult.success) {
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      if (version === "1.0") {
+        return { nodes: validationResult.data.nodes, edges: validationResult.data.edges };
+      } else {
+        throw new Error(`Unsupported version: ${String(version)}`);
+      }
+    } else {
+      throw new Error(`Validation failed: ${validationResult.error.toString()}`);
+    }
+  } catch (error) {
+    throw new Error(`Failed to load state: ${String(error)}`);
+  }
+}
+
 export default useStore;

package/src/store/types.ts

@@ -9,6 +9,7 @@ import {
   XYPosition,
 } from "@xyflow/react";
 import { SafeParseReturnType } from "zod";
+import { LatestPersistedState } from "@/store/persistence/types.ts";
 
 export enum NodeType {
   GenericNode = "genericNode",
@@ -34,11 +35,13 @@ export interface CallNodeMetadata {
 
 export type GenericNodeMetadata = CallNodeMetadata;
 export type GenericNodeIcon = "enter" | "rocket" | "home" | "cube" | "check-circled" | "archive" | "component";
+
 export enum InputConnectionType {
   None = 0,
   Parameter,
   ComponentAddress,
 }
+
 export interface GenericNodeInputType {
   inputConnectionType: InputConnectionType;
   type: Type;
@@ -46,11 +49,13 @@ export interface GenericNodeInputType {
   label?: string;
   validValues?: string[];
 }
+
 export interface GenericNodeOutputType {
   type: Type;
   name: string;
   label?: string;
 }
+
 // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
 export type GenericNodeData = {
   type: GenericNodeType;
@@ -84,6 +89,11 @@ export type InputParamsNode = Node<InputParamsNodeData, NodeType.InputParamsNode
 
 export type CustomNode = GenericNode | InputParamsNode;
 
+export interface SchemaAndVersion {
+  $schema: string;
+  version: string;
+}
+
 export interface QueryBuilderState {
   readOnly: boolean;
   nodes: CustomNode[];
@@ -106,6 +116,8 @@ export interface QueryBuilderState {
   removeNode: (nodeId: string) => void;
   saveStateToString: () => string;
   loadStateFromString: (state: string) => void;
+  setState: (state: SchemaAndVersion & LatestPersistedState) => void;
+  getState: () => SchemaAndVersion & LatestPersistedState;
   isValidInputParamsTitle: (nodeId: string, title: string) => boolean;
   updateInputParamsTitle: (nodeId: string, title: string) => void;
   updateInputParamsNode: (nodeId: string, paramId: string, value: SafeParseReturnType<unknown, unknown>) => void;

package/src/types.ts

@@ -5,3 +5,20 @@ export interface TariFlowNodeDetails {
   templateAddress: string;
   functionName: string;
 }
+
+// Extend BigInt to support JSON serialization
+declare global {
+  interface BigInt {
+    toJSON(): string | number;
+  }
+}
+
+BigInt.prototype.toJSON = function () {
+  // if the number is too large, return it as a string
+  // otherwise return it as a number
+  const int = this.valueOf();
+  if (int > BigInt(Number.MAX_SAFE_INTEGER) || int < BigInt(Number.MIN_SAFE_INTEGER)) {
+    return this.toString();
+  }
+  return Number(this);
+};