init

dojoengine · Nov 6, 2023 · b7a13fd · b7a13fd
1 parent 24f93bd
commit b7a13fd
Show file tree

Hide file tree

Showing 22 changed files with 481 additions and 176 deletions.
diff --git a/examples/dojo-starter b/examples/dojo-starter
diff --git a/examples/react-app/.env b/examples/react-app/.env
@@ -4,4 +4,6 @@ VITE_PUBLIC_MASTER_ADDRESS=0x517ececd29116499f4a1b64b094da79ba08dfd54a3edaa31613
 VITE_PUBLIC_MASTER_PRIVATE_KEY=0x1800000000300000180000000000030000000000003006001800006600
 VITE_PUBLIC_WORLD_ADDRESS=0x534692277764b04cfc469858891b825c799d1da550d2509fdd5be2f32abdaa0
 VITE_PUBLIC_NODE_URL=http://localhost:5050
-VITE_PUBLIC_TORII=http://localhost:8080
+VITE_PUBLIC_TORII=http://0.0.0.0:8080
+VITE_EVENT_KEY="0x1a2f334228cee715f1f0f54053bb6b5eac54fa336e0bc1aacf7516decb0471d"
+VITE_PUBLIC_ENV=dev
diff --git a/examples/react-app/bun.lockb b/examples/react-app/bun.lockb
diff --git a/examples/react-app/package.json b/examples/react-app/package.json
@@ -1,51 +1,52 @@
 {
-  "name": "react-example",
-  "private": true,
-  "version": "0.0.1",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview",
-    "codegen": "graphql-codegen",
-    "create-components": "npx @dojoengine/core ../dojo-starter/target/dev/manifest.json src/dojo/contractComponents.ts http://localhost:5050 0x534692277764b04cfc469858891b825c799d1da550d2509fdd5be2f32abdaa0"
-  },
-  "dependencies": {
-    "@dojoengine/core": "link:dojo-packages/packages/core",
-    "@dojoengine/create-burner": "link:dojo-packages/packages/create-burner",
-    "@dojoengine/torii-client": "link:dojo-packages/packages/torii-client",
-    "@dojoengine/utils": "link:dojo-packages/packages/utils",
-    "@latticexyz/react": "^2.0.0-next.11",
-    "@latticexyz/recs": "^2.0.0-next.11",
-    "@latticexyz/utils": "^2.0.0-next.11",
-    "ethers": "^5.7.2",
-    "graphql": "^16.7.1",
-    "graphql-request": "^6.1.0",
-    "mobx": "^6.9.0",
-    "proxy-deep": "^3.1.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "rxjs": "^7.8.1",
-    "starknet": "^5.17.0",
-    "vite-plugin-top-level-await": "^1.3.1",
-    "vite-plugin-wasm": "^3.2.2"
-  },
-  "devDependencies": {
-    "@graphql-codegen/cli": "^5.0.0",
-    "@graphql-codegen/typescript": "^4.0.1",
-    "@graphql-codegen/typescript-graphql-request": "^5.0.0",
-    "@graphql-codegen/typescript-operations": "^4.0.1",
-    "@types/node": "^20.4.8",
-    "@types/react": "^18.2.33",
-    "@types/react-dom": "^18.0.11",
-    "@typescript-eslint/eslint-plugin": "^5.59.0",
-    "@typescript-eslint/parser": "^5.59.0",
-    "@vitejs/plugin-react": "^4.0.0",
-    "eslint": "^8.38.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.3.4",
-    "typescript": "^5.0.3",
-    "vite": "^4.3.9"
-  }
+    "name": "react-example",
+    "private": true,
+    "version": "0.0.1",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "tsc && vite build",
+        "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+        "preview": "vite preview",
+        "codegen": "graphql-codegen",
+        "create-components": "npx @dojoengine/core ../dojo-starter/target/dev/manifest.json src/dojo/contractComponents.ts http://localhost:5050 0x534692277764b04cfc469858891b825c799d1da550d2509fdd5be2f32abdaa0"
+    },
+    "dependencies": {
+        "@dojoengine/core": "link:dojo-packages/packages/core",
+        "@dojoengine/create-burner": "link:dojo-packages/packages/create-burner",
+        "@dojoengine/torii-client": "link:dojo-packages/packages/torii-client",
+        "@dojoengine/utils": "link:dojo-packages/packages/utils",
+        "@dojoengine/react": "link:dojo-packages/packages/react",
+        "@latticexyz/react": "^2.0.0-next.11",
+        "@latticexyz/recs": "^2.0.0-next.11",
+        "@latticexyz/utils": "^2.0.0-next.11",
+        "ethers": "^5.7.2",
+        "graphql": "^16.7.1",
+        "graphql-request": "^6.1.0",
+        "mobx": "^6.9.0",
+        "proxy-deep": "^3.1.1",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "rxjs": "^7.8.1",
+        "starknet": "^5.17.0",
+        "vite-plugin-top-level-await": "^1.3.1",
+        "vite-plugin-wasm": "^3.2.2"
+    },
+    "devDependencies": {
+        "@graphql-codegen/cli": "^5.0.0",
+        "@graphql-codegen/typescript": "^4.0.1",
+        "@graphql-codegen/typescript-graphql-request": "^5.0.0",
+        "@graphql-codegen/typescript-operations": "^4.0.1",
+        "@types/node": "^20.4.8",
+        "@types/react": "^18.2.33",
+        "@types/react-dom": "^18.0.11",
+        "@typescript-eslint/eslint-plugin": "^5.59.0",
+        "@typescript-eslint/parser": "^5.59.0",
+        "@vitejs/plugin-react": "^4.0.0",
+        "eslint": "^8.38.0",
+        "eslint-plugin-react-hooks": "^4.6.0",
+        "eslint-plugin-react-refresh": "^0.3.4",
+        "typescript": "^5.0.3",
+        "vite": "^4.3.9"
+    }
 }
diff --git a/examples/react-app/src/App.tsx b/examples/react-app/src/App.tsx
@@ -4,12 +4,17 @@ import { useEffect, useState } from "react";
 import "./App.css";
 import { useDojo } from "./DojoContext";
 import { Direction } from "./utils";
+import { useSync } from "@dojoengine/react";
 
 function App() {
     const {
         setup: {
             systemCalls: { spawn, move },
             components: { Moves, Position },
+            network: {
+                contractComponents: { Moves: MovesContract },
+                torii_client,
+            },
         },
         account: {
             create,
@@ -29,12 +34,16 @@ function App() {
     });
 
     // entity id - this example uses the account address as the entity id
-    const entityId = account.address.toString();
+    const entityId = account.address;
 
     // get current component values
     const position = useComponentValue(Position, entityId as Entity);
     const moves = useComponentValue(Moves, entityId as Entity);
 
+    console.log("moves", moves);
+
+    useSync(torii_client, MovesContract, [account.address]);
+
     const handleRestoreBurners = async () => {
         try {
             await applyFromClipboard();

diff --git a/examples/react-app/src/dojo/contractComponents.ts b/examples/react-app/src/dojo/contractComponents.ts
@@ -8,7 +8,7 @@ export function defineContractComponents(world: World) {
             return defineComponent(
                 world,
                 {
-                    player: RecsType.String,
+                    player: RecsType.BigInt,
                     remaining: RecsType.Number,
                     last_direction: RecsType.Number,
                 },
@@ -24,7 +24,7 @@ export function defineContractComponents(world: World) {
             return defineComponent(
                 world,
                 {
-                    player: RecsType.String,
+                    player: RecsType.BigInt,
                     vec: { x: RecsType.Number, y: RecsType.Number },
                 },
                 {

diff --git a/examples/react-app/src/dojo/createSystemCalls.ts b/examples/react-app/src/dojo/createSystemCalls.ts
@@ -18,33 +18,31 @@ export function createSystemCalls(
         const positionId = uuid();
         Position.addOverride(positionId, {
             entity: entityId,
-            value: { player: num.toHexString(entityId), vec: { x: 10, y: 10 } },
+            value: { player: BigInt(entityId), vec: { x: 10, y: 10 } },
         });
 
         const movesId = uuid();
         Moves.addOverride(movesId, {
             entity: entityId,
             value: {
-                player: num.toHexString(entityId),
+                player: BigInt(entityId),
                 remaining: 10,
                 last_direction: 0,
             },
         });
 
         try {
-            const tx = await execute(signer, "actions", "spawn", []);
-
-            const even = await signer.waitForTransaction(tx.transaction_hash, {
-                retryInterval: 100,
-            });
-
-            console.log(even);
+            const { transaction_hash } = await execute(
+                signer,
+                "actions",
+                "spawn",
+                []
+            );
 
-            console.log(tx);
             setComponentsFromEvents(
                 contractComponents,
                 getEvents(
-                    await signer.waitForTransaction(tx.transaction_hash, {
+                    await signer.waitForTransaction(transaction_hash, {
                         retryInterval: 100,
                     })
                 )
@@ -66,37 +64,36 @@ export function createSystemCalls(
         Position.addOverride(positionId, {
             entity: entityId,
             value: {
-                player: entityId,
-                vec: {
-                    x: updatePositionWithDirection(
-                        direction,
-                        // currently recs does not support nested values so we use any here
-                        getComponentValue(Position, entityId) as any
-                    )["x"],
-                    y: updatePositionWithDirection(
-                        direction,
-                        // currently recs does not support nested values so we use any here
-                        getComponentValue(Position, entityId) as any
-                    )["y"],
-                },
+                player: BigInt(entityId),
+                vec: updatePositionWithDirection(
+                    direction,
+                    // currently recs does not support nested values so we use any here
+                    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,
             },
         });
 
         try {
-            const tx = await execute(signer, "actions", "move", [direction]);
+            const { transaction_hash } = await execute(
+                signer,
+                "actions",
+                "move",
+                [direction]
+            );
             setComponentsFromEvents(
                 contractComponents,
                 getEvents(
-                    await signer.waitForTransaction(tx.transaction_hash, {
+                    await signer.waitForTransaction(transaction_hash, {
                         retryInterval: 100,
                     })
                 )

diff --git a/examples/react-app/src/dojo/setupNetwork.ts b/examples/react-app/src/dojo/setupNetwork.ts
@@ -1,6 +1,6 @@
 import { defineContractComponents } from "./contractComponents";
 import { world } from "./world";
-import { RPCProvider, Query } from "@dojoengine/core";
+import { RPCProvider } from "@dojoengine/core";
 import { Account, num } from "starknet";
 import { GraphQLClient } from "graphql-request";
 import { getSdk } from "../generated/graphql";
@@ -54,15 +54,5 @@ export async function setupNetwork() {
         ) => {
             return provider.execute(signer, contract, system, call_data);
         },
-
-        // Entity query function.
-        entity: async (component: string, query: Query) => {
-            return provider.entity(component, query);
-        },
-
-        // Entities query function.
-        entities: async (component: string, partition: number) => {
-            return provider.entities(component, partition);
-        },
     };
 }
diff --git a/examples/react-app/src/hooks/useSync.ts b/examples/react-app/src/hooks/useSync.ts
diff --git a/examples/react-app/src/utils/index.ts b/examples/react-app/src/utils/index.ts
@@ -7,20 +7,20 @@ export enum Direction {
 
 export function updatePositionWithDirection(
     direction: Direction,
-    value: { x: number; y: number }
+    value: { vec: { x: number; y: number } }
 ) {
     switch (direction) {
         case Direction.Left:
-            value.x--;
+            value.vec.x--;
             break;
         case Direction.Right:
-            value.x++;
+            value.vec.x++;
             break;
         case Direction.Up:
-            value.y--;
+            value.vec.y--;
             break;
         case Direction.Down:
-            value.y++;
+            value.vec.y++;
             break;
         default:
             throw new Error("Invalid direction provided");