Merge pull request #280 from dojoengine/feat/sdk-state

feat: draft zustand state management system
dojoengine · Sep 27, 2024 · 0530d74 · 0530d74
2 parents 69662d1 + cad1567
commit 0530d74
Show file tree

Hide file tree

Showing 12 changed files with 1,012 additions and 118 deletions.
diff --git a/.github/workflows/npx-test.yaml b/.github/workflows/npx-test.yaml
diff --git a/examples/example-vite-react-sdk/package.json b/examples/example-vite-react-sdk/package.json
@@ -10,13 +10,19 @@
         "preview": "vite preview"
     },
     "dependencies": {
-        "@dojoengine/core": "1.0.0-alpha.12",
+        "@dojoengine/core": "workspace:*",
+        "@dojoengine/create-burner": "workspace:*",
         "@dojoengine/sdk": "workspace:*",
-        "@dojoengine/torii-wasm": "1.0.0-alpha.12",
+        "@dojoengine/torii-wasm": "workspace:*",
+        "@types/uuid": "^10.0.0",
+        "immer": "^10.1.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "starknet": "6.11.0",
+        "uuid": "^10.0.0",
         "vite-plugin-top-level-await": "^1.4.4",
-        "vite-plugin-wasm": "^3.3.0"
+        "vite-plugin-wasm": "^3.3.0",
+        "zustand": "^4.5.5"
     },
     "devDependencies": {
         "@eslint/js": "^9.11.1",

diff --git a/examples/example-vite-react-sdk/src/App.tsx b/examples/example-vite-react-sdk/src/App.tsx
@@ -1,10 +1,15 @@
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import "./App.css";
-import { ParsedEntity, SDK } from "@dojoengine/sdk";
+import { SDK, createDojoStore } from "@dojoengine/sdk";
 import { Schema } from "./bindings.ts";
 
+import { v4 as uuidv4 } from "uuid";
+
+export const useDojoStore = createDojoStore<Schema>();
+
 function App({ db }: { db: SDK<Schema> }) {
-    const [entities, setEntities] = useState<ParsedEntity<Schema>[]>([]);
+    const state = useDojoStore((state) => state);
+    const entities = useDojoStore((state) => state.entities);
 
     useEffect(() => {
         let unsubscribe: (() => void) | undefined;
@@ -28,15 +33,7 @@ function App({ db }: { db: SDK<Schema> }) {
                         response.data &&
                         response.data[0].entityId !== "0x0"
                     ) {
-                        console.log(response.data);
-                        setEntities((prevEntities) => {
-                            return prevEntities.map((entity) => {
-                                const newEntity = response.data?.find(
-                                    (e) => e.entityId === entity.entityId
-                                );
-                                return newEntity ? newEntity : entity;
-                            });
-                        });
+                        state.setEntities(response.data);
                     }
                 },
                 { logging: true }
@@ -54,8 +51,6 @@ function App({ db }: { db: SDK<Schema> }) {
         };
     }, [db]);
 
-    console.log("entities:");
-
     useEffect(() => {
         const fetchEntities = async () => {
             try {
@@ -76,23 +71,7 @@ function App({ db }: { db: SDK<Schema> }) {
                             return;
                         }
                         if (resp.data) {
-                            console.log(resp.data);
-                            setEntities((prevEntities) => {
-                                const updatedEntities = [...prevEntities];
-                                resp.data?.forEach((newEntity) => {
-                                    const index = updatedEntities.findIndex(
-                                        (entity) =>
-                                            entity.entityId ===
-                                            newEntity.entityId
-                                    );
-                                    if (index !== -1) {
-                                        updatedEntities[index] = newEntity;
-                                    } else {
-                                        updatedEntities.push(newEntity);
-                                    }
-                                });
-                                return updatedEntities;
-                            });
+                            state.setEntities(resp.data);
                         }
                     }
                 );
@@ -104,20 +83,55 @@ function App({ db }: { db: SDK<Schema> }) {
         fetchEntities();
     }, [db]);
 
+    const optimisticUpdate = async () => {
+        const entityId =
+            "0x571368d35c8fe136adf81eecf96a72859c43de7efd8fdd3d6f0d17e308df984";
+
+        const transactionId = uuidv4();
+
+        state.applyOptimisticUpdate(transactionId, (draft) => {
+            draft.entities[entityId].models.dojo_starter.Moves!.remaining = 10;
+        });
+
+        try {
+            // Wait for the entity to be updated before full resolving the transaction. Reverts if the condition is not met.
+            const updatedEntity = await state.waitForEntityChange(
+                entityId,
+                (entity) => {
+                    // Define your specific condition here
+                    return entity?.models.dojo_starter.Moves?.can_move === true;
+                }
+            );
+
+            console.log("Entity has been updated to active:", updatedEntity);
+
+            console.log("Updating entities...");
+        } catch (error) {
+            console.error("Error updating entities:", error);
+            state.revertOptimisticUpdate(transactionId);
+        } finally {
+            console.log("Updating entities...");
+            state.confirmTransaction(transactionId);
+        }
+    };
+
     return (
         <div>
             <h1>Game State</h1>
-            {entities.map((entity) => (
-                <div key={entity.entityId}>
-                    <h2>Entity {entity.entityId}</h2>
+            <button onClick={optimisticUpdate}>update</button>
+            {Object.entries(entities).map(([entityId, entity]) => (
+                <div key={entityId}>
+                    <h2>Entity {entityId}</h2>
                     <h3>Position</h3>
                     <p>
                         Player:{" "}
                         {entity.models.dojo_starter.Position?.player ?? "N/A"}
                         <br />
-                        X: {entity.models.dojo_starter.Position?.vec.x ?? "N/A"}
+                        X:{" "}
+                        {entity.models.dojo_starter.Position?.vec?.x ?? "N/A"}
                         <br />
-                        Y: {entity.models.dojo_starter.Position?.vec.y ?? "N/A"}
+                        Y:{" "}
+                        {entity.models.dojo_starter.Position?.vec?.y ?? "N/A"}
                     </p>
                     <h3>Moves</h3>
                     <p>

diff --git a/packages/sdk/package.json b/packages/sdk/package.json
@@ -22,21 +22,25 @@
         "./package.json": "./package.json"
     },
     "devDependencies": {
+        "@rollup/plugin-commonjs": "^28.0.0",
         "@vitest/coverage-v8": "^1.6.0",
         "eslint": "^8.57.1",
         "prettier": "^2.8.8",
         "tsup": "^8.3.0",
         "typescript": "^5.6.2",
         "vite": "^3.2.11",
-        "vitest": "^1.6.0"
+        "vitest": "^1.6.0",
+        "benchmark": "^2.1.4",
+        "lodash": "^4.17.21"
     },
     "peerDependencies": {
         "starknet": "6.11.0"
     },
     "dependencies": {
+        "@dojoengine/create-burner": "workspace:*",
         "@dojoengine/torii-client": "workspace:*",
         "axios": "^0.27.2",
-        "lodash": "^4.17.21",
+        "immer": "^10.1.1",
         "vite-plugin-wasm": "^3.3.0",
         "zustand": "^4.5.5"
     },

diff --git a/packages/sdk/src/__example__/index.ts b/packages/sdk/src/__example__/index.ts
@@ -23,18 +23,20 @@ export interface ItemModel {
     durability: number;
 }
 
+export interface GalaxyModel {
+    fieldOrder: string[];
+    id: string;
+    name: string;
+}
+
 export interface MockSchemaType extends SchemaType {
     world: {
         player: PlayerModel;
         game: GameModel;
         item: ItemModel;
     };
     universe: {
-        galaxy: {
-            fieldOrder: string[];
-            id: string;
-            name: string;
-        };
+        galaxy: GalaxyModel;
     };
 }