Merge pull request #235 from dojoengine/clause-sub

feat: subscription clauses

Author: ponderingdemocritus

.github/workflows/ci.yaml

@@ -20,7 +20,7 @@ jobs:
               run: git submodule update --init --recursive
 
             - run: curl -L https://install.dojoengine.org | bash
-            - run: /home/runner/.config/.dojo/bin/dojoup -v v0.7.2
+            - run: /home/runner/.config/.dojo/bin/dojoup -v v1.0.0-alpha.2
             - run: |
                   cd examples/dojo-starter
                   /home/runner/.config/.dojo/bin/sozo build

examples/dojo-starter

@@ -1,4 +1,4 @@
-import manifest from "../../dojo-starter/manifests/dev/manifest.json" assert { type: "json" };
+import manifest from "../../dojo-starter/manifests/dev/deployment/manifest.json" assert { type: "json" };
 
 import { createDojoConfig } from "@dojoengine/core";
 

examples/node/torii-bot/dojoConfig.ts

@@ -13,7 +13,6 @@
         "jsx": "preserve",
         "allowSyntheticDefaultImports": true,
         "forceConsistentCasingInFileNames": true,
-        "rootDir": "/Users/os/Documents/code/dojo.js/examples",
         "allowJs": true,
         "outDir": "dist",
         "types": ["bun-types"]

examples/node/torii-bot/tsconfig.json

@@ -1,4 +1,5 @@
-import manifest from "../../dojo-starter/manifests/dev/manifest.json";
+import manifest from "../../dojo-starter/manifests/dev/deployment/manifest.json";
+
 import { createDojoConfig } from "@dojoengine/core";
 
 export const dojoConfig = createDojoConfig({

examples/react/react-app/dojoConfig.ts

@@ -8,7 +8,7 @@
         "build": "tsc && vite build",
         "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
         "preview": "vite preview",
-        "create-components": "npx @dojoengine/core ../../dojo-starter/manifests/dev/manifest.json src/dojo/generated/contractComponents.ts http://localhost:5050 0xb4079627ebab1cd3cf9fd075dda1ad2454a7a448bf659591f259efa2519b18"
+        "create-components": "npx /Users/os/Documents/code/dojo/dojo.js/packages/core/bin/generateComponents.cjs ../../dojo-starter/manifests/dev/deployment/manifest.json src/dojo/generated/contractComponents.ts http://localhost:5050 0x3fc79ccfd72c1450d2ccb73c5c521a7ec68b6c6af0caf96a0f1c39ce58876c8"
     },
     "dependencies": {
         "@dojoengine/core": "workspace:*",
@@ -26,7 +26,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "rxjs": "^7.8.1",
-        "starknet": "6.1.5",
+        "starknet": "6.11.0",
         "vite-plugin-top-level-await": "^1.3.1",
         "vite-plugin-wasm": "^3.2.2"
     },

examples/react/react-app/package.json

@@ -1,7 +1,7 @@
-import { useComponentValue } from "@dojoengine/react";
+import "./App.css";
+import { useComponentValue, useQuerySync } from "@dojoengine/react";
 import { Entity } from "@dojoengine/recs";
 import { useEffect, useState } from "react";
-import "./App.css";
 import { Direction } from "./utils";
 import { getEntityIdFromKeys } from "@dojoengine/utils";
 import { useDojo } from "./dojo/useDojo";
@@ -11,10 +11,22 @@ function App() {
         setup: {
             systemCalls: { spawn, move },
             clientComponents: { Position, Moves, DirectionsAvailable },
+            toriiClient,
+            contractComponents,
         },
         account,
     } = useDojo();
 
+    useQuerySync(toriiClient, contractComponents as any, [
+        {
+            Keys: {
+                keys: [BigInt(account?.account.address).toString()],
+                models: ["Position", "Moves", "DirectionsAvailable"],
+                pattern_matching: "FixedLen",
+            },
+        },
+    ]);
+
     const [clipboardStatus, setClipboardStatus] = useState({
         message: "",
         isError: false,

examples/react/react-app/src/App.tsx

@@ -1,34 +1,78 @@
 import { AccountInterface } from "starknet";
-import { Entity, getComponentValue } from "@dojoengine/recs";
+import {
+    Entity,
+    Has,
+    HasValue,
+    World,
+    defineSystem,
+    getComponentValue,
+} from "@dojoengine/recs";
 import { uuid } from "@latticexyz/utils";
 import { ClientComponents } from "./createClientComponents";
 import { Direction, updatePositionWithDirection } from "../utils";
 import { getEntityIdFromKeys } from "@dojoengine/utils";
-import { ContractComponents } from "./generated/contractComponents";
 import type { IWorld } from "./generated/generated";
 
 export type SystemCalls = ReturnType<typeof createSystemCalls>;
 
 export function createSystemCalls(
     { client }: { client: IWorld },
-    _contractComponents: ContractComponents,
-    { Position, Moves }: ClientComponents
+    { Position, Moves }: ClientComponents,
+    world: World
 ) {
     const spawn = async (account: AccountInterface) => {
+        const entityId = getEntityIdFromKeys([
+            BigInt(account.address),
+        ]) as Entity;
+
+        const movesId = uuid();
+        Moves.addOverride(movesId, {
+            entity: entityId,
+            value: {
+                player: BigInt(entityId),
+                remaining:
+                    (getComponentValue(Moves, entityId)?.remaining || 0) + 100,
+            },
+        });
+
+        const positionId = uuid();
+        Position.addOverride(positionId, {
+            entity: entityId,
+            value: {
+                player: BigInt(entityId),
+                vec: {
+                    x: 10 + (getComponentValue(Position, entityId)?.vec.x || 0),
+                    y: 10 + (getComponentValue(Position, entityId)?.vec.y || 0),
+                },
+            },
+        });
+
         try {
-            const { transaction_hash } = await client.actions.spawn({
+            await client.actions.spawn({
                 account,
             });
 
-            console.log(
-                await account.waitForTransaction(transaction_hash, {
-                    retryInterval: 100,
-                })
-            );
-
-            await new Promise((resolve) => setTimeout(resolve, 1000));
+            // Wait for the indexer to update the entity
+            // By doing this we keep the optimistic UI in sync with the actual state
+            await new Promise<void>((resolve) => {
+                defineSystem(
+                    world,
+                    [
+                        Has(Moves),
+                        HasValue(Moves, { player: BigInt(account.address) }),
+                    ],
+                    () => {
+                        resolve();
+                    }
+                );
+            });
         } catch (e) {
             console.log(e);
+            Position.removeOverride(positionId);
+            Moves.removeOverride(movesId);
+        } finally {
+            Position.removeOverride(positionId);
+            Moves.removeOverride(movesId);
         }
     };
 
@@ -37,52 +81,57 @@ export function createSystemCalls(
             BigInt(account.address),
         ]) as Entity;
 
-        // const positionId = uuid();
-        // Position.addOverride(positionId, {
-        //     entity: entityId,
-        //     value: {
-        //         player: BigInt(entityId),
-        //         vec: updatePositionWithDirection(
-        //             direction,
-        //             getComponentValue(Position, entityId) as any
-        //         ).vec,
-        //     },
-        // });
+        // Update the state before the transaction
+        const positionId = uuid();
+        Position.addOverride(positionId, {
+            entity: entityId,
+            value: {
+                player: BigInt(entityId),
+                vec: updatePositionWithDirection(
+                    direction,
+                    getComponentValue(Position, entityId) as any
+                ).vec,
+            },
+        });
 
-        // const movesId = uuid();
-        // Moves.addOverride(movesId, {
-        //     entity: entityId,
-        //     value: {
-        //         player: BigInt(entityId),
-        //         remaining:
-        //             (getComponentValue(Moves, entityId)?.remaining || 0) - 1,
-        //     },
-        // });
+        // Update the state before the transaction
+        const movesId = uuid();
+        Moves.addOverride(movesId, {
+            entity: entityId,
+            value: {
+                player: BigInt(entityId),
+                remaining:
+                    (getComponentValue(Moves, entityId)?.remaining || 0) - 1,
+            },
+        });
 
         try {
-            const { transaction_hash } = await client.actions.move({
+            await client.actions.move({
                 account,
                 direction,
             });
 
-            await account.waitForTransaction(transaction_hash, {
-                retryInterval: 100,
+            // Wait for the indexer to update the entity
+            // By doing this we keep the optimistic UI in sync with the actual state
+            await new Promise<void>((resolve) => {
+                defineSystem(
+                    world,
+                    [
+                        Has(Moves),
+                        HasValue(Moves, { player: BigInt(account.address) }),
+                    ],
+                    () => {
+                        resolve();
+                    }
+                );
             });
-
-            // console.log(
-            //     await account.waitForTransaction(transaction_hash, {
-            //         retryInterval: 100,
-            //     })
-            // );
-
-            await new Promise((resolve) => setTimeout(resolve, 1000));
         } catch (e) {
             console.log(e);
-            // Position.removeOverride(positionId);
-            // Moves.removeOverride(movesId);
+            Position.removeOverride(positionId);
+            Moves.removeOverride(movesId);
         } finally {
-            // Position.removeOverride(positionId);
-            // Moves.removeOverride(movesId);
+            Position.removeOverride(positionId);
+            Moves.removeOverride(movesId);
         }
     };
 

examples/react/react-app/src/Loading.tsx

@@ -18,7 +18,7 @@ export function defineContractComponents(world: World) {
                 { player: RecsType.BigInt, directions: RecsType.StringArray },
                 {
                     metadata: {
-                        name: "DirectionsAvailable",
+                        name: "dojo_starter-DirectionsAvailable",
                         types: ["contractaddress"],
                         customTypes: ["Direction"],
                     },
@@ -36,7 +36,7 @@ export function defineContractComponents(world: World) {
                 },
                 {
                     metadata: {
-                        name: "Moves",
+                        name: "dojo_starter-Moves",
                         types: ["contractaddress", "u8", "enum", "bool"],
                         customTypes: ["Direction"],
                     },
@@ -52,7 +52,7 @@ export function defineContractComponents(world: World) {
                 },
                 {
                     metadata: {
-                        name: "Position",
+                        name: "dojo_starter-Position",
                         types: ["contractaddress", "u32", "u32"],
                         customTypes: ["Vec2"],
                     },