Smart contract actions separate from click handler

contracts/BehaviorGraph.sol

@@ -93,6 +93,11 @@ contract BehaviorGraph is ERC721, ERC721URIStorage, Ownable {
         emit ActionExecuted(msg.sender, tokenId, _nodeId, actionCount);
     }
 
+    function getActionCount(uint256 tokenId, string calldata _nodeId) public view returns(uint256) {
+        // uint256 numberElems = _nodeIds.length;
+        return _tokenNodeEmitCount[tokenId][_nodeId];
+    }
+
     function getActionCounts(uint256 tokenId, string[] calldata _nodeIds) public view returns(uint256[] memory) {
         // uint256 numberElems = _nodeIds.length;
         uint256[] memory result = new uint256[](_nodeIds.length);

editor/package.json

@@ -15,7 +15,7 @@
     "@rainbow-me/rainbowkit": "^0.7.1",
     "@react-three/drei": "^9.40.0",
     "@react-three/fiber": "^8.9.1",
-    "behave-graph": "^0.9.5",
+    "behave-graph": "^0.9.10",
     "classnames": "^2.3.2",
     "clsx": "^1.2.1",
     "react": "^18.2.0",

editor/src/EditorAndScene.tsx

@@ -1,16 +1,16 @@
-import { Suspense, useCallback, useEffect, useState } from 'react';
+import { Suspense, useCallback, useEffect, useMemo, useState } from 'react';
 import FlowEditor from './flowEditor/FlowEditorApp';
 import { useSceneModificationEngine } from './hooks/behaviorFlow';
 import Scene from './scene/Scene';
-// import rawGraphJSON from './exampleGraphs/ClickToAnimate.json';
-import rawGraphJSON from './exampleGraphs/SpinningSuzanne.json';
+import rawGraphJSON from './exampleGraphs/TokenGatedClick.json';
 import { GraphJSON } from 'behave-graph';
 import '@rainbow-me/rainbowkit/styles.css';
 import { flowToBehave } from './flowEditor/transformers/flowToBehave';
 import useTokenContractAddress from './web3/useTokenContractAddressAndAbi';
 import useLoadSceneAndRegistry from './hooks/useLoadSceneAndRegistry';
 import Nav, { modelOptions } from './nav/Nav';
 import { useBehaveToFlow } from './hooks/useBehaveToFlow';
+import useMockSmartContractActions from './onChainWorld/useMockSmartContractActions';
 
 function EditorAndScene({
   modelUrl,
@@ -21,8 +21,10 @@ function EditorAndScene({
   rawGraphJSON: GraphJSON;
   setModelUrl: (url: string) => void;
 }) {
+  const smartContractActions = useMockSmartContractActions();
   const { sceneJson, scene, sceneOnClickListeners, registry, specJson, lifecyleEmitter } = useLoadSceneAndRegistry({
     modelUrl,
+    smartContractActions,
   });
 
   const { nodes, edges, onNodesChange, onEdgesChange } = useBehaveToFlow(rawGraphJSON);
@@ -79,6 +81,9 @@ function EditorAndScene({
   );
 }
 
+// @ts-ignore
+const graphJson = rawGraphJSON as GraphJSON;
+
 function EditorAndSceneWrapper() {
   const [modelUrl, setModelUrl] = useState(() => modelOptions[0]);
 
@@ -97,7 +102,7 @@ function EditorAndSceneWrapper() {
 
   return (
     <Suspense fallback={null}>
-      <EditorAndScene modelUrl={modelUrl} rawGraphJSON={rawGraphJSON as GraphJSON} setModelUrl={updateUrl} />
+      <EditorAndScene modelUrl={modelUrl} rawGraphJSON={graphJson} setModelUrl={updateUrl} />
     </Suspense>
   );
 }

editor/src/abstractions.ts

@@ -1,7 +1,7 @@
 export interface ISmartContractActions {
   invoke: (id: string) => void;
-  registerTriggerHandler: (id: string, cb: (count: number) => void) => void;
-  unRegisterTriggerHandler: (id: string, cb: (count: number) => void) => void;
+  registerTriggerHandler: (id: string, cb: (count: bigint) => void) => void;
+  unRegisterTriggerHandler: (id: string, cb: (count: bigint) => void) => void;
 }
 
 export type ResourceProperties = { names: string[]; properties: string[] };

editor/src/contracts/abi.ts

@@ -271,6 +271,30 @@ export const abi = [
     "stateMutability": "nonpayable",
     "type": "function"
   },
+  {
+    "inputs": [
+      {
+        "internalType": "uint256",
+        "name": "tokenId",
+        "type": "uint256"
+      },
+      {
+        "internalType": "string",
+        "name": "_nodeId",
+        "type": "string"
+      }
+    ],
+    "name": "getActionCount",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
   {
     "inputs": [
       {

editor/src/contracts/addresses.json

@@ -1,5 +1,4 @@
 {
-  "skale": "0xAf1e15396b8A91D5842245227A09E75A573a03CC",
   "localhost": "0x9fE46736679d2D9a65F0992F2272dE9f3c7fa6e0",
-  "mumbai": "0xf6E075A14280b3AEE058955757D6A45158e500f5"
+  "mumbai": "0xEa252876c5803beb4f965A8724C04e382da16180"
 }

editor/src/exampleGraphs/TokenGatedClick.json

@@ -0,0 +1,133 @@
+{
+  "nodes": [
+    {
+      "id": "0a8f4ddb-f5f6-43c8-af84-e6e7b829a6ef",
+      "type": "math/subtract/integer",
+      "metadata": {
+        "positionX": "603.0899770990109",
+        "positionY": "-318.7901493172638"
+      },
+      "parameters": {
+        "a": {
+          "value": "1"
+        },
+        "b": {
+          "link": {
+            "nodeId": "45fe6cfe-9b6a-40bb-bfa8-ceb45d5104f2",
+            "socket": "result"
+          }
+        }
+      }
+    },
+    {
+      "id": "1cc6a160-e28f-4b41-b778-9658a6240d65",
+      "type": "math/equal/integer",
+      "metadata": {
+        "positionX": "793.9001302853388",
+        "positionY": "-318.43534426861027"
+      },
+      "parameters": {
+        "b": {
+          "value": "1"
+        },
+        "a": {
+          "link": {
+            "nodeId": "0a8f4ddb-f5f6-43c8-af84-e6e7b829a6ef",
+            "socket": "result"
+          }
+        }
+      }
+    },
+    {
+      "id": "45fe6cfe-9b6a-40bb-bfa8-ceb45d5104f2",
+      "type": "math/modulus/integer",
+      "metadata": {
+        "positionX": "421.9101484108573",
+        "positionY": "-319.232057004601"
+      },
+      "parameters": {
+        "b": {
+          "value": "2"
+        },
+        "a": {
+          "link": {
+            "nodeId": "5cacb533-3c2d-4ae2-9503-f6a88925b06e",
+            "socket": "count"
+          }
+        }
+      }
+    },
+    {
+      "id": "5cacb533-3c2d-4ae2-9503-f6a88925b06e",
+      "type": "smartContract/actionInvoked",
+      "metadata": {
+        "positionX": "161.88613244780666",
+        "positionY": "-473.82109091315226"
+      },
+      "parameters": {
+        "actionName": {
+          "value": "MyAction"
+        }
+      },
+      "flows": {
+        "flow": {
+          "nodeId": "00f8bce9-0ec6-4fb3-9ad7-ac7354194a52",
+          "socket": "flow"
+        }
+      }
+    },
+    {
+      "id": "810b160b-3c33-4da9-9cf7-8d60905d31bf",
+      "type": "smartContract/invokeTokenGatedAction",
+      "metadata": {
+        "positionX": "166.15007488129163",
+        "positionY": "-671.213207555163"
+      },
+      "parameters": {
+        "actionName": {
+          "value": "MyAction"
+        }
+      }
+    },
+    {
+      "id": "00f8bce9-0ec6-4fb3-9ad7-ac7354194a52",
+      "type": "scene/set/boolean",
+      "metadata": {
+        "positionX": "981.2063648348909",
+        "positionY": "-463.86097510053276"
+      },
+      "parameters": {
+        "jsonPath": {
+          "value": "nodes/Suzanne/visible"
+        },
+        "value": {
+          "link": {
+            "nodeId": "1cc6a160-e28f-4b41-b778-9658a6240d65",
+            "socket": "result"
+          }
+        }
+      }
+    },
+    {
+      "id": "38415624-878a-4030-9899-0c9951013d1c",
+      "type": "scene/nodeClick",
+      "metadata": {
+        "positionX": "-196.30883415279038",
+        "positionY": "-673.0462071620772"
+      },
+      "parameters": {
+        "jsonPath": {
+          "value": "nodes/Torus"
+        }
+      },
+      "flows": {
+        "flow": {
+          "nodeId": "810b160b-3c33-4da9-9cf7-8d60905d31bf",
+          "socket": "flow"
+        }
+      }
+    }
+  ],
+  "variables": [],
+  "customEvents": []
+}

editor/src/flowEditor/FlowEditorApp.tsx

@@ -155,6 +155,7 @@ function Flow({
           filters={filters}
           onPickNode={handleAddNode}
           onClose={closeNodePicker}
+          specJson={specJson}
         />
       )}
     </ReactFlow>

editor/src/flowEditor/components/InputSocket.tsx

@@ -3,11 +3,12 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Connection, Handle, Position, useReactFlow } from 'reactflow';
 import cx from 'classnames';
 import { colors, valueTypeColorMap } from '../util/colors';
-import { InputSocketSpecJSON, IScene, NodeSpecJSON } from 'behave-graph';
+import { InputSocketSpecJSON, NodeSpecJSON } from 'behave-graph';
 import { isValidConnection } from '../util/isValidConnection';
 import { AutoSizeInput } from './AutoSizeInput';
 import PathSelect from './PathSelect';
 import { useCallback } from 'react';
+import { IScene } from '../../abstractions';
 
 export type InputSocketProps = {
   connected: boolean;

editor/src/flowEditor/components/NodePicker.tsx

@@ -1,13 +1,8 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useReactFlow, XYPosition } from 'reactflow';
 import { useOnPressKey } from '../hooks/useOnPressKey';
-import rawSpecJson from 'behave-graph/dist/node-spec.json';
 import { NodeSpecJSON } from 'behave-graph';
 
-const specJSON = rawSpecJson as NodeSpecJSON[];
-
-const nodes = specJSON;
-
 export type NodePickerFilters = {
   handleType: 'source' | 'target';
   valueType: string;
@@ -18,26 +13,33 @@ type NodePickerProps = {
   filters?: NodePickerFilters;
   onPickNode: (type: string, position: XYPosition) => void;
   onClose: () => void;
+  specJson: NodeSpecJSON[];
 };
 
-const NodePicker = ({ position, onPickNode, onClose, filters }: NodePickerProps) => {
+const NodePicker = ({ position, onPickNode, onClose, filters, specJson }: NodePickerProps) => {
   const [search, setSearch] = useState('');
   const instance = useReactFlow();
 
   useOnPressKey('Escape', onClose);
 
-  let filtered = nodes;
-  if (filters !== undefined) {
+  const [filtered, setFiltered] = useState<NodeSpecJSON[]>([]);
+
+  useEffect(() => {
+    let filtered = [...specJson];
+    if (filters !== undefined) {
+      filtered = filtered.filter((node) => {
+        const sockets = filters?.handleType === 'source' ? node.outputs : node.inputs;
+        return sockets.some((socket) => socket.valueType === filters?.valueType);
+      });
+    }
+
     filtered = filtered.filter((node) => {
-      const sockets = filters?.handleType === 'source' ? node.outputs : node.inputs;
-      return sockets.some((socket) => socket.valueType === filters?.valueType);
+      const term = search.toLowerCase();
+      return node.type.toLowerCase().includes(term);
     });
-  }
 
-  filtered = filtered.filter((node) => {
-    const term = search.toLowerCase();
-    return node.type.toLowerCase().includes(term);
-  });
+    setFiltered(filtered);
+  }, [specJson, filters, search]);
 
   return (
     <div

editor/src/hooks/behaviorFlow.ts

@@ -14,14 +14,14 @@ import {
 import { useEffect, useState } from 'react';
 import { getNodeSpecJSON } from '../flowEditor/util/getNodeSpecJSON';
 import { IScene, ISmartContractActions } from '../abstractions';
-import { registerSharedSceneProfiles, registerSpecificSceneProfiles } from './profiles';
+import { registerSharedSceneProfiles, registerSmartContractActions, registerSpecificSceneProfiles } from './profiles';
 
 export const useRegistry = ({
   scene,
   smartContractActions,
 }: {
   scene: IScene | undefined;
-  smartContractActions?: ISmartContractActions;
+  smartContractActions: ISmartContractActions;
 }) => {
   const [registry, setRegistry] = useState<Registry>();
 
@@ -36,7 +36,8 @@ export const useRegistry = ({
     const lifecyleEmitter = new ManualLifecycleEventEmitter();
     registerCoreProfile(registry, logger, lifecyleEmitter);
     registerSharedSceneProfiles(registry, scene);
-    registerSpecificSceneProfiles(registry, scene, smartContractActions);
+    registerSpecificSceneProfiles(registry, scene);
+    registerSmartContractActions(registry, smartContractActions);
     const specJson = getNodeSpecJSON(registry);
 
     setRegistry(registry);

editor/src/hooks/profiles.ts

@@ -16,7 +16,9 @@ import { SetSceneProperty } from 'behave-graph/dist/lib/Profiles/Scene/Actions/S
 import { GetSceneProperty } from 'behave-graph/dist/lib/Profiles/Scene/Queries/GetSceneProperty';
 import { registerSerializersForValueType } from 'behave-graph/dist/lib/Profiles/Core/registerSerializersForValueType';
 import { IScene, ISmartContractActions } from '../abstractions';
-import { OnSceneNodeClick } from '../scene/OnSceneNodeClick';
+import { OnSceneNodeClick } from '../nodes/scene/OnSceneNodeClick';
+import { OnSmartActionInvoked } from '../nodes/smartContracts/OnSmartActionInvoked';
+import { TokenGatedActionInvoker } from '../nodes/smartContracts/TokenGatedActionInvoker';
 
 export function registerSharedSceneProfiles(registry: Registry, scene: IScene) {
   const { values, nodes } = registry;
@@ -51,14 +53,19 @@ export function registerSharedSceneProfiles(registry: Registry, scene: IScene) {
   });
 }
 
-export function registerSpecificSceneProfiles(
-  registry: Registry,
-  scene: IScene,
-  actions: ISmartContractActions | undefined
-) {
+export function registerSpecificSceneProfiles(registry: Registry, scene: IScene) {
   const { nodes } = registry;
 
   // TODO: register scene node types with IScene.
 
-  nodes.register(OnSceneNodeClick.Description(scene, actions));
+  nodes.register(OnSceneNodeClick.Description(scene));
+}
+
+export function registerSmartContractActions(registry: Registry, actions: ISmartContractActions) {
+  const { nodes } = registry;
+
+  // TODO: register scene node types with IScene.
+
+  nodes.register(TokenGatedActionInvoker.Description(actions));
+  nodes.register(OnSmartActionInvoked.Description(actions));
 }