dojoengine · ponderingdemocritus · Nov 7, 2023 · Nov 6, 2023 · Nov 7, 2023 · Nov 7, 2023
diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml
@@ -51,6 +51,14 @@ jobs:
                   registry-url: "https://registry.npmjs.org"
                   scope: "@dojoengine"
 
+            - name: Bun Install
+              run: |
+                  bun install
+
+            - name: Bun Install
+              run: |
+                  bun run build
+
             - name: Install dependencies
               run: |
                   cd ${{ matrix.package }}

diff --git a/bun.lockb b/bun.lockb
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",
+        "@dojoengine/recs": "0.1.35",
+        "@latticexyz/react": "^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
@@ -1,5 +1,5 @@
-import { useComponentValue } from "@latticexyz/react";
-import { Entity } from "@latticexyz/recs";
+import { useComponentValue, useSync } from "@dojoengine/react";
+import { Entity } from "@dojoengine/recs";
 import { useEffect, useState } from "react";
 import "./App.css";
 import { useDojo } from "./DojoContext";
@@ -10,6 +10,13 @@ function App() {
         setup: {
             systemCalls: { spawn, move },
             components: { Moves, Position },
+            network: {
+                contractComponents: {
+                    Moves: MovesContract,
+                    Position: PositionContract,
+                },
+                torii_client,
+            },
         },
         account: {
             create,
@@ -28,12 +35,16 @@ function App() {
         isError: false,
     });
 
-    // entity id - this example uses the account address as the entity id
-    const entityId = account.address.toString();
+    // entity id we are syncing
+    const entityId = account.address.toString() as Entity;
 
     // get current component values
-    const position = useComponentValue(Position, entityId as Entity);
-    const moves = useComponentValue(Moves, entityId as Entity);
+    const position = useComponentValue(Position, entityId);
+    const moves = useComponentValue(Moves, entityId);
+
+    // sync from remote torii
+    useSync(torii_client, MovesContract, [entityId]);
+    useSync(torii_client, PositionContract, [entityId]);
 
     const handleRestoreBurners = async () => {
         try {
@@ -98,34 +109,39 @@ function App() {
                     <button onClick={() => clear()}>Clear burners</button>
                 </div>
             </div>
+
             <div className="card">
                 <button onClick={() => spawn(account)}>Spawn</button>
                 <div>
-                    Moves Left:{" "}
-                    {moves ? `${moves["remaining"]}` : "Need to Spawn"}
+                    Moves Left: {moves ? `${moves.remaining}` : "Need to Spawn"}
                 </div>
                 <div>
                     Position:{" "}
                     {position
-                        ? `${position.vec["x"]}, ${position.vec["y"]}`
+                        ? `${position.vec.x}, ${position.vec.y}`
                         : "Need to Spawn"}
                 </div>
             </div>
+
             <div className="card">
-                <button onClick={() => move(account, Direction.Up)}>
-                    Move Up
-                </button>{" "}
-                <br />
-                <button onClick={() => move(account, Direction.Left)}>
-                    Move Left
-                </button>
-                <button onClick={() => move(account, Direction.Right)}>
-                    Move Right
-                </button>{" "}
-                <br />
-                <button onClick={() => move(account, Direction.Down)}>
-                    Move Down
-                </button>
+                <div className="movement-buttons">
+                    <button onClick={() => move(account, Direction.Up)}>
+                        Move Up
+                    </button>
+                </div>
+                <div className="movement-buttons">
+                    <button onClick={() => move(account, Direction.Left)}>
+                        Move Left
+                    </button>
+                    <button onClick={() => move(account, Direction.Right)}>
+                        Move Right
+                    </button>
+                </div>
+                <div className="movement-buttons">
+                    <button onClick={() => move(account, Direction.Down)}>
+                        Move Down
+                    </button>
+                </div>
             </div>
         </>
     );

diff --git a/examples/react-app/src/dojo/contractComponents.ts b/examples/react-app/src/dojo/contractComponents.ts
@@ -1,14 +1,14 @@
 /* Autogenerated file. Do not edit manually. */
 
-import { defineComponent, Type as RecsType, World } from "@latticexyz/recs";
+import { defineComponent, Type as RecsType, World } from "@dojoengine/recs";
 
 export function defineContractComponents(world: World) {
     return {
         Moves: (() => {
             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/createClientComponents.ts b/examples/react-app/src/dojo/createClientComponents.ts
@@ -1,4 +1,4 @@
-import { overridableComponent } from "@latticexyz/recs";
+import { overridableComponent } from "@dojoengine/recs";
 import { SetupNetworkResult } from "./setupNetwork";
 
 export type ClientComponents = ReturnType<typeof createClientComponents>;

diff --git a/examples/react-app/src/dojo/createSystemCalls.ts b/examples/react-app/src/dojo/createSystemCalls.ts
@@ -1,6 +1,6 @@
 import { SetupNetworkResult } from "./setupNetwork";
 import { Account, num } from "starknet";
-import { Entity, getComponentValue } from "@latticexyz/recs";
+import { Entity, getComponentValue } from "@dojoengine/recs";
 import { uuid } from "@latticexyz/utils";
 import { ClientComponents } from "./createClientComponents";
 import { Direction, updatePositionWithDirection } from "../utils";
@@ -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,37 @@ 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/dojo/world.ts b/examples/react-app/src/dojo/world.ts
@@ -1,3 +1,3 @@
-import { createWorld } from "@latticexyz/recs";
+import { createWorld } from "@dojoengine/recs";
 
 export const world = createWorld();