Merge pull request #286 from dojoengine/feat/readme

feat: new readme

Author: ponderingdemocritus

examples/example-vite-react-sdk/src/App.tsx

@@ -1,11 +1,12 @@
 import { useEffect, useMemo } from "react";
 import { SDK, createDojoStore } from "@dojoengine/sdk";
-import { Schema } from "./bindings.ts";
-
-import { useDojo } from "./useDojo.tsx";
 import { getEntityIdFromKeys } from "@dojoengine/utils";
 import { addAddressPadding } from "starknet";
 
+import { Models, Schema } from "./bindings.ts";
+import { useDojo } from "./useDojo.tsx";
+import useModel from "./useModel.tsx";
+
 export const useDojoStore = createDojoStore<Schema>();
 
 function App({ db }: { db: SDK<Schema> }) {
@@ -109,13 +110,8 @@ function App({ db }: { db: SDK<Schema> }) {
         fetchEntities();
     }, [db, account?.account.address]);
 
-    const position = useMemo(() => {
-        return entities[entityId]?.models?.dojo_starter.Position;
-    }, [entities]);
-
-    const moves = useMemo(() => {
-        return entities[entityId]?.models?.dojo_starter.Moves;
-    }, [entities]);
+    const moves = useModel(entityId, Models.Moves);
+    const position = useModel(entityId, Models.Position);
 
     return (
         <div className="bg-black min-h-screen w-full p-4 sm:p-8">

examples/example-vite-react-sdk/src/bindings.ts

@@ -39,6 +39,12 @@ type Schema = {
     };
 };
 
+enum Models {
+    Moves = "dojo_starter-Moves",
+    DirectionsAvailable = "dojo_starter-DirectionsAvailable",
+    Position = "dojo_starter-Position",
+}
+
 const schema: Schema = {
     dojo_starter: {
         Moves: {
@@ -62,4 +68,4 @@ const schema: Schema = {
 };
 
 export type { Schema, Moves, DirectionsAvailable, Position, Vec2 };
-export { Direction, schema };
+export { Direction, schema, Models };

examples/example-vite-react-sdk/src/main.tsx

@@ -8,7 +8,7 @@ import { init } from "@dojoengine/sdk";
 import { Schema, schema } from "./bindings.ts";
 import { dojoConfig } from "../dojoConfig.ts";
 import { DojoContextProvider } from "./DojoContext.tsx";
-import { setupBurner } from "./setupBurner.tsx";
+import { setupBurnerManager } from "@dojoengine/create-burner";
 
 async function main() {
     const db = await init<Schema>(
@@ -20,20 +20,20 @@ async function main() {
                 worldAddress: dojoConfig.manifest.world.address,
             },
             domain: {
-                name: "Example",
+                name: "WORLD_NAME",
                 version: "1.0",
-                chainId: "your-chain-id",
+                chainId: "KATANA",
                 revision: "1",
             },
         },
         schema
     );
 
-    const burnerManager = await setupBurner(dojoConfig);
-
     createRoot(document.getElementById("root")!).render(
         <StrictMode>
-            <DojoContextProvider burnerManager={burnerManager}>
+            <DojoContextProvider
+                burnerManager={await setupBurnerManager(dojoConfig)}
+            >
                 <App db={db} />
             </DojoContextProvider>
         </StrictMode>

examples/example-vite-react-sdk/src/useModel.tsx

@@ -0,0 +1,28 @@
+import { useDojoStore } from "./App";
+import { Schema } from "./bindings";
+
+/**
+ * Custom hook to retrieve a specific model for a given entityId within a specified namespace.
+ *
+ * @param entityId - The ID of the entity.
+ * @param model - The model to retrieve, specified as a string in the format "namespace-modelName".
+ * @returns The model structure if found, otherwise undefined.
+ */
+function useModel<N extends keyof Schema, M extends keyof Schema[N] & string>(
+    entityId: string,
+    model: `${N}-${M}`
+): Schema[N][M] | undefined {
+    const [namespace, modelName] = model.split("-") as [N, M];
+
+    // Select only the specific model data for the given entityId
+    const modelData = useDojoStore(
+        (state) =>
+            state.entities[entityId]?.models?.[namespace]?.[modelName] as
+                | Schema[N][M]
+                | undefined
+    );
+
+    return modelData;
+}
+
+export default useModel;

media/dojo-mark-full-dark.svg

@@ -10,19 +10,16 @@
         "docs": "npx typedoc --out docs",
         "prepare": "husky install"
     },
-    "dependencies": {
-        "@commitlint/cli": "^18.4.4",
-        "@commitlint/config-conventional": "^18.4.4",
-        "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
-        "react": "^18.2.0"
-    },
     "devDependencies": {
-        "husky": "^9.0.11",
+        "husky": "^9.1.6",
         "lerna": "^8.1.5",
         "prettier": "^3.3.3",
         "tsup": "^8.1.0",
         "typedoc": "^0.26.7",
         "typedoc-material-theme": "^1.1.0",
-        "typedoc-plugin-coverage": "^3.3.0"
+        "typedoc-plugin-coverage": "^3.3.0",
+        "@commitlint/cli": "^18.4.4",
+        "@commitlint/config-conventional": "^18.4.4",
+        "@ianvs/prettier-plugin-sort-imports": "^4.3.1"
     }
 }

package.json

@@ -1,3 +1,4 @@
 export { BurnerManager } from "./burnerManager";
 export { PredeployedManager } from "./predeployedManager";
 export { prefundAccount } from "./prefundAccount";
+export { setupBurnerManager } from "./setupBurnerManager";

packages/create-burner/src/manager/index.ts

@@ -1,8 +1,8 @@
 import { DojoConfig } from "@dojoengine/core";
-import { BurnerManager } from "@dojoengine/create-burner";
 import { Account, RpcProvider } from "starknet";
+import { BurnerManager } from "..";
 
-export const setupBurner = async (config: DojoConfig) => {
+export const setupBurnerManager = async (config: DojoConfig) => {
     const burnerManager = new BurnerManager({
         masterAccount: new Account(
             {