Merge pull request #264 from dojoengine/fix/sync

fix: sync

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 v1.0.0-alpha.6
+            - run: /home/runner/.config/.dojo/bin/dojoup -v v1.0.0-alpha.9
             - run: |
                   cd examples/dojo/dojo-starter
                   /home/runner/.config/.dojo/bin/sozo build

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

@@ -2,7 +2,6 @@ import "./App.css";
 import { useComponentValue, useQuerySync } from "@dojoengine/react";
 import { Entity } from "@dojoengine/recs";
 import { useEffect, useState } from "react";
-import { Direction } from "./utils";
 import { getEntityIdFromKeys } from "@dojoengine/utils";
 import { useDojo } from "./dojo/useDojo";
 
@@ -17,6 +16,7 @@ function App() {
         account,
     } = useDojo();
 
+    // sync entities
     useQuerySync(toriiClient, contractComponents as any, []);
 
     const [clipboardStatus, setClipboardStatus] = useState({
@@ -139,7 +139,7 @@ function App() {
                     <button
                         onClick={() =>
                             position && position.vec.y > 0
-                                ? move(account.account, Direction.Up)
+                                ? move(account.account, { type: "Up" })
                                 : console.log("Reach the borders of the world.")
                         }
                     >
@@ -150,21 +150,21 @@ function App() {
                     <button
                         onClick={() =>
                             position && position.vec.x > 0
-                                ? move(account.account, Direction.Left)
+                                ? move(account.account, { type: "Left" })
                                 : console.log("Reach the borders of the world.")
                         }
                     >
                         Move Left
                     </button>
                     <button
-                        onClick={() => move(account.account, Direction.Right)}
+                        onClick={() => move(account.account, { type: "Right" })}
                     >
                         Move Right
                     </button>
                 </div>
                 <div>
                     <button
-                        onClick={() => move(account.account, Direction.Down)}
+                        onClick={() => move(account.account, { type: "Down" })}
                     >
                         Move Down
                     </button>

examples/clients/react/react-app/src/dojo/createSystemCalls.ts

@@ -1,4 +1,4 @@
-import { Account, AccountInterface } from "starknet";
+import { Account } from "starknet";
 import {
     Entity,
     Has,
@@ -9,9 +9,9 @@ import {
 } from "@dojoengine/recs";
 import { uuid } from "@latticexyz/utils";
 import { ClientComponents } from "./createClientComponents";
-import { Direction, updatePositionWithDirection } from "../utils";
 import { getEntityIdFromKeys } from "@dojoengine/utils";
 import type { IWorld } from "./typescript/contracts.gen";
+import { Direction } from "./typescript/models.gen";
 
 export type SystemCalls = ReturnType<typeof createSystemCalls>;
 
@@ -77,38 +77,10 @@ export function createSystemCalls(
     };
 
     const move = async (account: Account, direction: Direction) => {
-        const entityId = getEntityIdFromKeys([
-            BigInt(account.address),
-        ]) as Entity;
-
-        // 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,
-        //     },
-        // });
-
-        // // 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 {
             await client.actions.move({
                 account,
-                direction: { type: "Left" },
+                direction,
             });
 
             // Wait for the indexer to update the entity
@@ -127,11 +99,6 @@ export function createSystemCalls(
             });
         } catch (e) {
             console.log(e);
-            // Position.removeOverride(positionId);
-            // Moves.removeOverride(movesId);
-        } finally {
-            // Position.removeOverride(positionId);
-            // Moves.removeOverride(movesId);
         }
     };
 

examples/clients/react/react-app/src/dojo/setup.ts

@@ -7,7 +7,7 @@ import { world } from "./world";
 import { setupWorld } from "./typescript/contracts.gen";
 import { Account, ArraySignatureType } from "starknet";
 import { BurnerManager } from "@dojoengine/create-burner";
-import { getSyncEvents } from "@dojoengine/state";
+import { getSyncEvents, getSyncEntities } from "@dojoengine/state";
 
 export type SetupResult = Awaited<ReturnType<typeof setup>>;
 
@@ -29,13 +29,21 @@ export async function setup({ ...config }: DojoConfig) {
     // create dojo provider
     const dojoProvider = new DojoProvider(config.manifest, config.rpcUrl);
 
+    // Sync all events
     const eventSync = getSyncEvents(
         toriiClient,
         contractComponents as any,
         undefined,
         []
     );
 
+    // Sync all entities
+    const sync = await getSyncEntities(
+        toriiClient,
+        contractComponents as any,
+        []
+    );
+
     // setup world
     const client = await setupWorld(dojoProvider);
 
@@ -75,5 +83,6 @@ export async function setup({ ...config }: DojoConfig) {
         burnerManager,
         toriiClient,
         eventSync,
+        sync,
     };
 }

examples/clients/react/react-app/src/dojo/typescript/contracts.gen.ts

@@ -1,7 +1,7 @@
 // Generated by dojo-bindgen on Thu, 22 Aug 2024 20:04:33 +0000. Do not modify this file manually.
 // Import the necessary types from the recs SDK
 // generate again with `sozo build --typescript`
-import { Account, byteArray } from "starknet";
+import { Account } from "starknet";
 import { DojoProvider } from "@dojoengine/core";
 import * as models from "./models.gen";
 

examples/clients/react/react-app/tsconfig.json

@@ -1,21 +1,7 @@
 {
+    "extends": "../../../../tsconfig.base.json",
     "compilerOptions": {
-        "target": "ES2020",
-        "useDefineForClassFields": true,
-        "lib": ["ES2020", "DOM", "DOM.Iterable"],
-        "module": "ESNext",
-        "skipLibCheck": true,
-        "moduleResolution": "node",
-        "allowImportingTsExtensions": true,
-        "resolveJsonModule": true,
-        "isolatedModules": true,
-        "noEmit": true,
-        "jsx": "react-jsx",
-        "strict": true,
-        // "noUnusedLocals": true,
-        // "noUnusedParameters": true,
-        "noFallthroughCasesInSwitch": true,
-        "allowSyntheticDefaultImports": true
+        "jsx": "react-jsx"
     },
     "include": ["src", "dojoConfig.ts"],
     "references": [

examples/clients/react/react-phaser-example/src/dojo/contractComponents.ts

@@ -1,5 +1,5 @@
 import { overridableComponent } from "@dojoengine/recs";
-import { ContractComponents } from "./generated/contractComponents";
+import { ContractComponents } from "./typescript/models.gen";
 
 export type ClientComponents = ReturnType<typeof createClientComponents>;
 

examples/clients/react/react-phaser-example/src/dojo/createClientComponents.ts

@@ -1,8 +1,9 @@
 import { world as recsWorld } from "./world";
-import { setup } from "./generated/setup";
+
 import { dojoConfig } from "../../dojoConfig";
 import { createBurner } from "./createBurner";
 import { Account } from "starknet";
+import { setup } from "./setup";
 
 export type NetworkLayer = Awaited<ReturnType<typeof createNetworkLayer>>;
 

examples/clients/react/react-phaser-example/src/dojo/createNetworkLayer.ts

@@ -1,32 +1,102 @@
-import { AccountInterface } from "starknet";
+import { Account, AccountInterface } from "starknet";
+import {
+    Entity,
+    Has,
+    HasValue,
+    World,
+    defineSystem,
+    getComponentValue,
+} from "@dojoengine/recs";
+import { uuid } from "@latticexyz/utils";
 import { ClientComponents } from "./createClientComponents";
-import { Direction } from "./utils";
-import { ContractComponents } from "./generated/contractComponents";
-import type { IWorld } from "./generated/generated";
+import { getEntityIdFromKeys } from "@dojoengine/utils";
+import type { IWorld } from "./typescript/contracts.gen";
+import { Direction } from "./typescript/models.gen";
 
 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 spawn = async (account: Account) => {
+        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 {
             await client.actions.spawn({
                 account,
             });
+
+            // 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);
         }
     };
 
-    const move = async (account: AccountInterface, direction: Direction) => {
+    const move = async (account: Account, direction: Direction) => {
         try {
             await client.actions.move({
                 account,
                 direction,
             });
+
+            // 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);
         }