feat(dev-tools): use new sync stack (#1284)

.changeset/large-sloths-camp.md

@@ -0,0 +1,16 @@
+---
+"@latticexyz/common": minor
+---
+
+`createContract` now has an `onWrite` callback so you can observe writes. This is useful for wiring up the transanction log in MUD dev tools.
+
+```ts
+import { createContract, ContractWrite } from "@latticexyz/common";
+import { Subject } from "rxjs";
+
+const write$ = new Subject<ContractWrite>();
+creactContract({
+  ...
+  onWrite: (write) => write$.next(write),
+});
+```

.changeset/soft-dryers-invite.md

@@ -0,0 +1,33 @@
+---
+"@latticexyz/dev-tools": major
+"create-mud": major
+---
+
+MUD dev tools is updated to latest sync stack. You must now pass in all of its data requirements rather than relying on magic globals.
+
+```diff
+import { mount as mountDevTools } from "@latticexyz/dev-tools";
+
+- mountDevTools();
++ mountDevTools({
++   config,
++   publicClient,
++   walletClient,
++   latestBlock$,
++   blockStorageOperations$,
++   worldAddress,
++   worldAbi,
++   write$,
++   // if you're using recs
++   recsWorld,
++ });
+```
+
+It's also advised to wrap dev tools so that it is only mounted during development mode. Here's how you do this with Vite:
+
+```ts
+// https://vitejs.dev/guide/env-and-mode.html
+if (import.meta.env.DEV) {
+  mountDevTools({ ... });
+}
+```

.changeset/twenty-birds-scream.md

@@ -0,0 +1,22 @@
+---
+"@latticexyz/react": minor
+---
+
+Adds a `usePromise` hook that returns a [native `PromiseSettledResult` object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled).
+
+```tsx
+const promise = fetch(url);
+const result = usePromise(promise);
+
+if (result.status === "idle" || result.status === "pending") {
+  return <>fetching</>;
+}
+
+if (result.status === "rejected") {
+  return <>error fetching: {String(result.reason)}</>;
+}
+
+if (result.status === "fulfilled") {
+  return <>fetch status: {result.value.status}</>;
+}
+```

e2e/packages/client-vanilla/src/mud/setupNetwork.ts

@@ -4,8 +4,8 @@ import { encodeEntity, syncToRecs } from "@latticexyz/store-sync/recs";
 import { getNetworkConfig } from "./getNetworkConfig";
 import { world } from "./world";
 import { IWorld__factory } from "contracts/types/ethers-contracts/factories/IWorld__factory";
-import storeConfig from "contracts/mud.config";
 import { createBurnerAccount, createContract, transportObserver } from "@latticexyz/common";
+import mudConfig from "contracts/mud.config";
 
 export type SetupNetworkResult = Awaited<ReturnType<typeof setupNetwork>>;
 
@@ -37,7 +37,7 @@ export async function setupNetwork() {
 
   const { components, latestBlock$, blockStorageOperations$, waitForTransaction } = await syncToRecs({
     world,
-    config: storeConfig,
+    config: mudConfig,
     address: networkConfig.worldAddress as Hex,
     publicClient,
     startBlock: BigInt(networkConfig.initialBlockNumber),

examples/minimal/packages/client-phaser/package.json

@@ -13,6 +13,7 @@
     "@ethersproject/providers": "^5.7.2",
     "@improbable-eng/grpc-web": "^0.15.0",
     "@latticexyz/common": "link:../../../../packages/common",
+    "@latticexyz/dev-tools": "link:../../../../packages/dev-tools",
     "@latticexyz/network": "link:../../../../packages/network",
     "@latticexyz/phaserx": "link:../../../../packages/phaserx",
     "@latticexyz/react": "link:../../../../packages/react",

examples/minimal/packages/client-phaser/src/layers/network/createNetworkLayer.ts

@@ -4,16 +4,12 @@ import { setup } from "../../mud/setup";
 export type NetworkLayer = Awaited<ReturnType<typeof createNetworkLayer>>;
 
 export const createNetworkLayer = async () => {
-  const { components, systemCalls } = await setup();
-
-  // Give components a Human-readable ID
-  Object.entries(components).forEach(([name, component]) => {
-    component.id = name;
-  });
+  const { components, systemCalls, network } = await setup();
 
   return {
     world,
     components,
     systemCalls,
+    network,
   };
 };

examples/minimal/packages/client-phaser/src/mud/setupNetwork.ts

@@ -4,8 +4,9 @@ import { encodeEntity, syncToRecs } from "@latticexyz/store-sync/recs";
 import { getNetworkConfig } from "./getNetworkConfig";
 import { world } from "./world";
 import { IWorld__factory } from "contracts/types/ethers-contracts/factories/IWorld__factory";
-import storeConfig from "contracts/mud.config";
-import { createBurnerAccount, createContract, transportObserver } from "@latticexyz/common";
+import { createBurnerAccount, createContract, transportObserver, ContractWrite } from "@latticexyz/common";
+import { Subject, share } from "rxjs";
+import mudConfig from "contracts/mud.config";
 
 export type SetupNetworkResult = Awaited<ReturnType<typeof setupNetwork>>;
 
@@ -26,16 +27,18 @@ export async function setupNetwork() {
     account: burnerAccount,
   });
 
+  const write$ = new Subject<ContractWrite>();
   const worldContract = createContract({
     address: networkConfig.worldAddress as Hex,
     abi: IWorld__factory.abi,
     publicClient,
     walletClient: burnerWalletClient,
+    onWrite: (write) => write$.next(write),
   });
 
   const { components, latestBlock$, blockStorageOperations$, waitForTransaction } = await syncToRecs({
     world,
-    config: storeConfig,
+    config: mudConfig,
     address: networkConfig.worldAddress as Hex,
     publicClient,
     startBlock: BigInt(networkConfig.initialBlockNumber),
@@ -71,9 +74,10 @@ export async function setupNetwork() {
     playerEntity: encodeEntity({ address: "address" }, { address: burnerWalletClient.account.address }),
     publicClient,
     walletClient: burnerWalletClient,
-    worldContract,
     latestBlock$,
     blockStorageOperations$,
     waitForTransaction,
+    worldContract,
+    write$: write$.asObservable().pipe(share()),
   };
 }

examples/minimal/packages/client-phaser/src/ui/App.tsx

@@ -3,13 +3,31 @@ import { useNetworkLayer } from "./hooks/useNetworkLayer";
 import { useStore } from "../store";
 import { PhaserLayer } from "./PhaserLayer";
 import { UIRoot } from "./UIRoot";
+import mudConfig from "contracts/mud.config";
 
 export const App = () => {
   const networkLayer = useNetworkLayer();
 
   useEffect(() => {
-    if (networkLayer) {
-      useStore.setState({ networkLayer });
+    if (!networkLayer) return;
+
+    useStore.setState({ networkLayer });
+
+    // https://vitejs.dev/guide/env-and-mode.html
+    if (import.meta.env.DEV) {
+      import("@latticexyz/dev-tools").then(({ mount: mountDevTools }) =>
+        mountDevTools({
+          config: mudConfig,
+          publicClient: networkLayer.network.publicClient,
+          walletClient: networkLayer.network.walletClient,
+          latestBlock$: networkLayer.network.latestBlock$,
+          blockStorageOperations$: networkLayer.network.blockStorageOperations$,
+          worldAddress: networkLayer.network.worldContract.address,
+          worldAbi: networkLayer.network.worldContract.abi,
+          write$: networkLayer.network.write$,
+          recsWorld: networkLayer.world,
+        })
+      );
     }
   }, [networkLayer]);
 

examples/minimal/packages/client-react/src/index.tsx

@@ -2,18 +2,33 @@ import ReactDOM from "react-dom/client";
 import { App } from "./App";
 import { setup } from "./mud/setup";
 import { MUDProvider } from "./MUDContext";
-import { mount as mountDevTools } from "@latticexyz/dev-tools";
+import mudConfig from "contracts/mud.config";
 
 const rootElement = document.getElementById("react-root");
 if (!rootElement) throw new Error("React root not found");
 const root = ReactDOM.createRoot(rootElement);
 
 // TODO: figure out if we actually want this to be async or if we should render something else in the meantime
-setup().then((result) => {
+setup().then(async (result) => {
   root.render(
     <MUDProvider value={result}>
       <App />
     </MUDProvider>
   );
-  mountDevTools();
+
+  // https://vitejs.dev/guide/env-and-mode.html
+  if (import.meta.env.DEV) {
+    const { mount: mountDevTools } = await import("@latticexyz/dev-tools");
+    mountDevTools({
+      config: mudConfig,
+      publicClient: result.network.publicClient,
+      walletClient: result.network.walletClient,
+      latestBlock$: result.network.latestBlock$,
+      blockStorageOperations$: result.network.blockStorageOperations$,
+      worldAddress: result.network.worldContract.address,
+      worldAbi: result.network.worldContract.abi,
+      write$: result.network.write$,
+      recsWorld: result.network.world,
+    });
+  }
 });

examples/minimal/packages/client-react/src/mud/setupNetwork.ts

@@ -4,8 +4,9 @@ import { encodeEntity, syncToRecs } from "@latticexyz/store-sync/recs";
 import { getNetworkConfig } from "./getNetworkConfig";
 import { world } from "./world";
 import { IWorld__factory } from "contracts/types/ethers-contracts/factories/IWorld__factory";
-import storeConfig from "contracts/mud.config";
-import { createBurnerAccount, createContract, transportObserver } from "@latticexyz/common";
+import { ContractWrite, createBurnerAccount, createContract, transportObserver } from "@latticexyz/common";
+import { Subject, share } from "rxjs";
+import mudConfig from "contracts/mud.config";
 
 export type SetupNetworkResult = Awaited<ReturnType<typeof setupNetwork>>;
 
@@ -26,9 +27,18 @@ export async function setupNetwork() {
     account: burnerAccount,
   });
 
+  const write$ = new Subject<ContractWrite>();
+  const worldContract = createContract({
+    address: networkConfig.worldAddress as Hex,
+    abi: IWorld__factory.abi,
+    publicClient,
+    walletClient: burnerWalletClient,
+    onWrite: (write) => write$.next(write),
+  });
+
   const { components, latestBlock$, blockStorageOperations$, waitForTransaction } = await syncToRecs({
     world,
-    config: storeConfig,
+    config: mudConfig,
     address: networkConfig.worldAddress as Hex,
     publicClient,
     startBlock: BigInt(networkConfig.initialBlockNumber),
@@ -67,11 +77,7 @@ export async function setupNetwork() {
     latestBlock$,
     blockStorageOperations$,
     waitForTransaction,
-    worldContract: createContract({
-      address: networkConfig.worldAddress as Hex,
-      abi: IWorld__factory.abi,
-      publicClient,
-      walletClient: burnerWalletClient,
-    }),
+    worldContract,
+    write$: write$.asObservable().pipe(share()),
   };
 }

examples/minimal/packages/client-vanilla/src/index.ts

@@ -1,10 +1,8 @@
 import { setup } from "./mud/setup";
-import { mount as mountDevTools } from "@latticexyz/dev-tools";
+import mudConfig from "contracts/mud.config";
 
-const {
-  components,
-  network: { worldContract, waitForTransaction },
-} = await setup();
+const { components, network } = await setup();
+const { worldContract, waitForTransaction } = network;
 
 // Components expose a stream that triggers when the component is updated.
 components.CounterTable.update$.subscribe((update) => {
@@ -56,4 +54,18 @@ document.getElementById("chat-form")?.addEventListener("submit", (e) => {
   (window as any).sendMessage();
 });
 
-mountDevTools();
+// https://vitejs.dev/guide/env-and-mode.html
+if (import.meta.env.DEV) {
+  const { mount: mountDevTools } = await import("@latticexyz/dev-tools");
+  mountDevTools({
+    config: mudConfig,
+    publicClient: network.publicClient,
+    walletClient: network.walletClient,
+    latestBlock$: network.latestBlock$,
+    blockStorageOperations$: network.blockStorageOperations$,
+    worldAddress: network.worldContract.address,
+    worldAbi: network.worldContract.abi,
+    write$: network.write$,
+    recsWorld: network.world,
+  });
+}

examples/minimal/packages/client-vanilla/src/mud/setupNetwork.ts

@@ -4,8 +4,9 @@ import { encodeEntity, syncToRecs } from "@latticexyz/store-sync/recs";
 import { getNetworkConfig } from "./getNetworkConfig";
 import { world } from "./world";
 import { IWorld__factory } from "contracts/types/ethers-contracts/factories/IWorld__factory";
-import storeConfig from "contracts/mud.config";
-import { createBurnerAccount, createContract, transportObserver } from "@latticexyz/common";
+import { createBurnerAccount, createContract, transportObserver, ContractWrite } from "@latticexyz/common";
+import { Subject, share } from "rxjs";
+import mudConfig from "contracts/mud.config";
 
 export type SetupNetworkResult = Awaited<ReturnType<typeof setupNetwork>>;
 
@@ -26,16 +27,18 @@ export async function setupNetwork() {
     account: burnerAccount,
   });
 
+  const write$ = new Subject<ContractWrite>();
   const worldContract = createContract({
     address: networkConfig.worldAddress as Hex,
     abi: IWorld__factory.abi,
     publicClient,
     walletClient: burnerWalletClient,
+    onWrite: (write) => write$.next(write),
   });
 
   const { components, latestBlock$, blockStorageOperations$, waitForTransaction } = await syncToRecs({
     world,
-    config: storeConfig,
+    config: mudConfig,
     address: networkConfig.worldAddress as Hex,
     publicClient,
     startBlock: BigInt(networkConfig.initialBlockNumber),
@@ -71,9 +74,10 @@ export async function setupNetwork() {
     playerEntity: encodeEntity({ address: "address" }, { address: burnerWalletClient.account.address }),
     publicClient,
     walletClient: burnerWalletClient,
-    worldContract,
     latestBlock$,
     blockStorageOperations$,
     waitForTransaction,
+    worldContract,
+    write$: write$.asObservable().pipe(share()),
   };
 }