npm - create-mud - Versions diffs - 2.2.17-6e19b86633174dbbf98eb1a2b4446ef6f0b22ab7 → 2.2.17-78e9ed1294db2e924bd295734f3738bdd2786242 - Mend

create-mud 2.2.17-6e19b86633174dbbf98eb1a2b4446ef6f0b22ab7 → 2.2.17-78e9ed1294db2e924bd295734f3738bdd2786242

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (119) hide show

package/templates/react/packages/contracts/test/TasksTest.t.sol ADDED Viewed

@@ -0,0 +1,30 @@
+// SPDX-License-Identifier: MIT
+pragma solidity >=0.8.24;
+import "forge-std/Test.sol";
+import { MudTest } from "@latticexyz/world/test/MudTest.t.sol";
+import { IWorld } from "../src/codegen/world/IWorld.sol";
+import { Tasks, TasksData } from "../src/codegen/index.sol";
+contract TasksTest is MudTest {
+  function testWorldExists() public {
+    uint256 codeSize;
+    address addr = worldAddress;
+    assembly {
+      codeSize := extcodesize(addr)
+    }
+    assertTrue(codeSize > 0);
+  }
+  function testTasks() public {
+    // Expect task to exist that we created during PostDeploy script
+    TasksData memory task = Tasks.get("1");
+    assertEq(task.description, "Walk the dog");
+    assertEq(task.completedAt, 0);
+    // Expect the task to be completed after calling completeTask from our TasksSystem
+    IWorld(worldAddress).app__completeTask("1");
+    assertEq(Tasks.getCompletedAt("1"), block.timestamp);
+  }
+}

package/templates/react/packages/contracts/worlds.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
   "31337": {
-    "address": "0xfdf868ea710ffd8cd33b829c5aff79edd15ecd5f"
+    "address": "0x8d8b6b8414e1e3dcfd4168561b9be6bd3bf6ec4b"
   }
 }

package/templates/react-ecs/mprocs.yaml CHANGED Viewed

@@ -1,4 +1,3 @@
-scrollback: 10000
 procs:
   client:
     cwd: packages/client
@@ -6,16 +5,9 @@ procs:
   contracts:
     cwd: packages/contracts
     shell: pnpm mud dev-contracts --rpc http://127.0.0.1:8545
-  deploy-prereqs:
-    cwd: packages/contracts
-    shell: pnpm deploy-local-prereqs
-    env:
-      DEBUG: "mud:*"
-      # Anvil default account (0x70997970C51812dc3A010C7d01b50e0d17dc79C8)
-      PRIVATE_KEY: "0x59c6995e998f97a5a0044966f0945389dc9e86dae88c7a8412f4603b6b78690d"
   anvil:
     cwd: packages/contracts
-    shell: anvil --block-time 2
+    shell: anvil --base-fee 0 --block-time 2
   explorer:
     cwd: packages/contracts
     shell: pnpm explorer

package/templates/react-ecs/package.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
-  "name": "mud-template-react",
+  "name": "mud-template-react-ecs",
   "private": true,
   "scripts": {
     "build": "pnpm recursive run build",
@@ -17,6 +17,7 @@
     "@latticexyz/explorer": "{{mud-version}}",
     "@latticexyz/store-indexer": "{{mud-version}}",
     "@types/debug": "4.1.7",
+    "@types/node": "^18",
     "@typescript-eslint/eslint-plugin": "7.1.1",
     "@typescript-eslint/parser": "7.1.1",
     "eslint": "8.57.0",

package/templates/react-ecs/packages/client/index.html CHANGED Viewed

@@ -1,9 +1,9 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>a MUD app</title>
+    <title>a minimal MUD client</title>
   </head>
   <body>
     <div id="react-root"></div>

package/templates/react-ecs/packages/client/package.json CHANGED Viewed

@@ -6,39 +6,32 @@
   "type": "module",
   "scripts": {
     "build": "vite build",
-    "dev": "vite",
+    "dev": "wait-port localhost:8545 && vite",
     "preview": "vite preview",
     "test": "tsc --noEmit"
   },
   "dependencies": {
     "@latticexyz/common": "{{mud-version}}",
-    "@latticexyz/entrykit": "{{mud-version}}",
-    "@latticexyz/explorer": "{{mud-version}}",
+    "@latticexyz/dev-tools": "{{mud-version}}",
     "@latticexyz/react": "{{mud-version}}",
     "@latticexyz/recs": "{{mud-version}}",
     "@latticexyz/schema-type": "{{mud-version}}",
     "@latticexyz/store-sync": "{{mud-version}}",
     "@latticexyz/utils": "{{mud-version}}",
     "@latticexyz/world": "{{mud-version}}",
-    "@tanstack/react-query": "^5.63.0",
     "contracts": "workspace:*",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-error-boundary": "5.0.0",
-    "tailwind-merge": "^2.6.0",
-    "viem": "2.21.19",
-    "wagmi": "2.12.11"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rxjs": "7.5.5",
+    "viem": "2.21.19"
   },
   "devDependencies": {
     "@types/react": "18.2.22",
     "@types/react-dom": "18.2.7",
-    "@vitejs/plugin-react": "^4.3.4",
-    "autoprefixer": "^10.4.20",
+    "@vitejs/plugin-react": "^3.1.0",
     "eslint-plugin-react": "7.31.11",
     "eslint-plugin-react-hooks": "4.6.0",
-    "postcss": "^8.4.49",
-    "tailwindcss": "^3.4.17",
-    "vite": "^6.0.7",
-    "vite-plugin-mud": "{{mud-version}}"
+    "vite": "^4.2.1",
+    "wait-port": "^1.0.4"
   }
 }

package/templates/react-ecs/packages/client/src/App.tsx CHANGED Viewed

@@ -1,74 +1,29 @@
-import { AccountButton } from "@latticexyz/entrykit/internal";
-import { Direction, Entity } from "./common";
-import mudConfig from "contracts/mud.config";
-import { useMemo } from "react";
-import { GameMap } from "./game/GameMap";
-import { useWorldContract } from "./mud/useWorldContract";
-import { Synced } from "./mud/Synced";
-import { useSync } from "@latticexyz/store-sync/react";
-import { components } from "./mud/recs";
-import { useEntityQuery } from "@latticexyz/react";
-import { Has, getComponentValueStrict } from "@latticexyz/recs";
-import { Address } from "viem";
+import { useComponentValue } from "@latticexyz/react";
+import { useMUD } from "./MUDContext";
+import { singletonEntity } from "@latticexyz/store-sync/recs";
-export function App() {
-  const playerEntities = useEntityQuery([Has(components.Owner), Has(components.Position)]);
-  const players = useMemo(
-    () =>
-      playerEntities.map((entity) => {
-        const owner = getComponentValueStrict(components.Owner, entity);
-        const position = getComponentValueStrict(components.Position, entity);
-        return {
-          entity: entity as Entity,
-          owner: owner.owner as Address,
-          x: position.x,
-          y: position.y,
-        };
-      }),
-    [playerEntities],
-  );
-  const sync = useSync();
-  const worldContract = useWorldContract();
-  const onMove = useMemo(
-    () =>
-      sync.data && worldContract
-        ? async (entity: Entity, direction: Direction) => {
-            const tx = await worldContract.write.app__move([entity, mudConfig.enums.Direction.indexOf(direction)]);
-            await sync.data.waitForTransaction(tx);
-          }
-        : undefined,
-    [sync.data, worldContract],
-  );
+export const App = () => {
+  const {
+    components: { Counter },
+    systemCalls: { increment },
+  } = useMUD();
-  const onSpawn = useMemo(
-    () =>
-      sync.data && worldContract
-        ? async () => {
-            const tx = await worldContract.write.app__spawn();
-            await sync.data.waitForTransaction(tx);
-          }
-        : undefined,
-    [sync.data, worldContract],
-  );
+  const counter = useComponentValue(Counter, singletonEntity);
   return (
     <>
-      <div className="fixed inset-0 grid place-items-center p-4">
-        <Synced
-          fallback={({ message, percentage }) => (
-            <div className="tabular-nums">
-              {message} ({percentage.toFixed(1)}%)…
-            </div>
-          )}
-        >
-          <GameMap players={players} onMove={onMove} onSpawn={onSpawn} />
-        </Synced>
-      </div>
-      <div className="fixed top-2 right-2">
-        <AccountButton />
+      <div>
+        Counter: <span>{counter?.value ?? "??"}</span>
       </div>
+      <button
+        type="button"
+        onClick={async (event) => {
+          event.preventDefault();
+          console.log("new counter value:", await increment());
+        }}
+      >
+        Increment
+      </button>
     </>
   );
-}
+};

package/templates/react-ecs/packages/client/src/MUDContext.tsx ADDED Viewed

@@ -0,0 +1,21 @@
+import { createContext, ReactNode, useContext } from "react";
+import { SetupResult } from "./mud/setup";
+const MUDContext = createContext<SetupResult | null>(null);
+type Props = {
+  children: ReactNode;
+  value: SetupResult;
+};
+export const MUDProvider = ({ children, value }: Props) => {
+  const currentValue = useContext(MUDContext);
+  if (currentValue) throw new Error("MUDProvider can only be used once");
+  return <MUDContext.Provider value={value}>{children}</MUDContext.Provider>;
+};
+export const useMUD = () => {
+  const value = useContext(MUDContext);
+  if (!value) throw new Error("Must be used within a MUDProvider");
+  return value;
+};

package/templates/react-ecs/packages/client/src/index.tsx CHANGED Viewed

@@ -1,19 +1,34 @@
-import "tailwindcss/tailwind.css";
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import { Providers } from "./Providers";
+import ReactDOM from "react-dom/client";
 import { App } from "./App";
-import { Explorer } from "./mud/Explorer";
-import { ErrorBoundary } from "react-error-boundary";
-import { ErrorFallback } from "./ui/ErrorFallback";
+import { setup } from "./mud/setup";
+import { MUDProvider } from "./MUDContext";
+import mudConfig from "contracts/mud.config";
-createRoot(document.getElementById("react-root")!).render(
-  <StrictMode>
-    <ErrorBoundary FallbackComponent={ErrorFallback}>
-      <Providers>
-        <App />
-        <Explorer />
-      </Providers>
-    </ErrorBoundary>
-  </StrictMode>,
-);
+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(async (result) => {
+  root.render(
+    <MUDProvider value={result}>
+      <App />
+    </MUDProvider>,
+  );
+  // 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$,
+      storedBlockLogs$: result.network.storedBlockLogs$,
+      worldAddress: result.network.worldContract.address,
+      worldAbi: result.network.worldContract.abi,
+      write$: result.network.write$,
+      recsWorld: result.network.world,
+    });
+  }
+});

package/templates/react-ecs/packages/client/src/mud/createClientComponents.ts ADDED Viewed

@@ -0,0 +1,21 @@
+/*
+ * Creates components for use by the client.
+ *
+ * By default it returns the components from setupNetwork.ts, those which are
+ * automatically inferred from the mud.config.ts table definitions.
+ *
+ * However, you can add or override components here as needed. This
+ * lets you add user defined components, which may or may not have
+ * an onchain component.
+ */
+import { SetupNetworkResult } from "./setupNetwork";
+export type ClientComponents = ReturnType<typeof createClientComponents>;
+export function createClientComponents({ components }: SetupNetworkResult) {
+  return {
+    ...components,
+    // add your client components or overrides here
+  };
+}

package/templates/react-ecs/packages/client/src/mud/createSystemCalls.ts ADDED Viewed

@@ -0,0 +1,51 @@
+/*
+ * Create the system calls that the client can use to ask
+ * for changes in the World state (using the System contracts).
+ */
+import { getComponentValue } from "@latticexyz/recs";
+import { ClientComponents } from "./createClientComponents";
+import { SetupNetworkResult } from "./setupNetwork";
+import { singletonEntity } from "@latticexyz/store-sync/recs";
+export type SystemCalls = ReturnType<typeof createSystemCalls>;
+export function createSystemCalls(
+  /*
+   * The parameter list informs TypeScript that:
+   *
+   * - The first parameter is expected to be a
+   *   SetupNetworkResult, as defined in setupNetwork.ts
+   *
+   *   Out of this parameter, we only care about two fields:
+   *   - worldContract (which comes from getContract, see
+   *     https://github.com/latticexyz/mud/blob/main/templates/react/packages/client/src/mud/setupNetwork.ts#L63-L69).
+   *
+   *   - waitForTransaction (which comes from syncToRecs, see
+   *     https://github.com/latticexyz/mud/blob/main/templates/react/packages/client/src/mud/setupNetwork.ts#L77-L83).
+   *
+   * - From the second parameter, which is a ClientComponent,
+   *   we only care about Counter. This parameter comes to use
+   *   through createClientComponents.ts, but it originates in
+   *   syncToRecs
+   *   (https://github.com/latticexyz/mud/blob/main/templates/react/packages/client/src/mud/setupNetwork.ts#L77-L83).
+   */
+  { worldContract, waitForTransaction }: SetupNetworkResult,
+  { Counter }: ClientComponents,
+) {
+  const increment = async () => {
+    /*
+     * Because IncrementSystem
+     * (https://mud.dev/templates/typescript/contracts#incrementsystemsol)
+     * is in the root namespace, `.increment` can be called directly
+     * on the World contract.
+     */
+    const tx = await worldContract.write.app__increment();
+    await waitForTransaction(tx);
+    return getComponentValue(Counter, singletonEntity);
+  };
+  return {
+    increment,
+  };
+}

package/templates/react-ecs/packages/client/src/mud/getNetworkConfig.ts ADDED Viewed

@@ -0,0 +1,77 @@
+/*
+ * Network specific configuration for the client.
+ * By default connect to the anvil test network.
+ *
+ */
+/*
+ * By default the template just creates a temporary wallet
+ * (called a burner wallet).
+ */
+import { getBurnerPrivateKey } from "@latticexyz/common";
+/*
+ * Import the addresses of the World, possibly on multiple chains,
+ * from packages/contracts/worlds.json. When the contracts package
+ * deploys a new `World`, it updates this file.
+ */
+import worlds from "contracts/worlds.json";
+/*
+ * The supported chains.
+ * By default, there are only two chains here:
+ */
+import { supportedChains } from "./supportedChains";
+export async function getNetworkConfig() {
+  const params = new URLSearchParams(window.location.search);
+  /*
+   * The chain ID is the first item available from this list:
+   * 1. chainId query parameter
+   * 2. chainid query parameter
+   * 3. The VITE_CHAIN_ID environment variable set when the
+   *    vite dev server was started or client was built
+   * 4. The default, 31337 (anvil)
+   */
+  const chainId = Number(params.get("chainId") || params.get("chainid") || import.meta.env.VITE_CHAIN_ID || 31337);
+  /*
+   * Find the chain (unless it isn't in the list of supported chains).
+   */
+  const chainIndex = supportedChains.findIndex((c) => c.id === chainId);
+  const chain = supportedChains[chainIndex];
+  if (!chain) {
+    throw new Error(`Chain ${chainId} not found`);
+  }
+  /*
+   * Get the address of the World. If you want to use a
+   * different address than the one in worlds.json,
+   * provide it as worldAddress in the query string.
+   */
+  const world = worlds[chain.id.toString()];
+  const worldAddress = params.get("worldAddress") || world?.address;
+  if (!worldAddress) {
+    throw new Error(`No world address found for chain ${chainId}. Did you run \`mud deploy\`?`);
+  }
+  /*
+   * MUD clients use events to synchronize the database, meaning
+   * they need to look as far back as when the World was started.
+   * The block number for the World start can be specified either
+   * on the URL (as initialBlockNumber) or in the worlds.json
+   * file. If neither has it, it starts at the first block, zero.
+   */
+  const initialBlockNumber = params.has("initialBlockNumber")
+    ? Number(params.get("initialBlockNumber"))
+    : world?.blockNumber ?? 0n;
+  return {
+    privateKey: getBurnerPrivateKey(),
+    chainId,
+    chain,
+    worldAddress,
+    initialBlockNumber,
+  };
+}

package/templates/react-ecs/packages/client/src/mud/setup.ts ADDED Viewed

@@ -0,0 +1,21 @@
+/*
+ * This file sets up all the definitions required for a MUD client.
+ */
+import { createClientComponents } from "./createClientComponents";
+import { createSystemCalls } from "./createSystemCalls";
+import { setupNetwork } from "./setupNetwork";
+export type SetupResult = Awaited<ReturnType<typeof setup>>;
+export async function setup() {
+  const network = await setupNetwork();
+  const components = createClientComponents(network);
+  const systemCalls = createSystemCalls(network, components);
+  return {
+    network,
+    components,
+    systemCalls,
+  };
+}

package/templates/react-ecs/packages/client/src/mud/setupNetwork.ts ADDED Viewed

@@ -0,0 +1,106 @@
+/*
+ * The MUD client code is built on top of viem
+ * (https://viem.sh/docs/getting-started.html).
+ * This line imports the functions we need from it.
+ */
+import {
+  createPublicClient,
+  fallback,
+  webSocket,
+  http,
+  createWalletClient,
+  Hex,
+  ClientConfig,
+  getContract,
+} from "viem";
+import { encodeEntity, syncToRecs } from "@latticexyz/store-sync/recs";
+import { getNetworkConfig } from "./getNetworkConfig";
+import { world } from "./world";
+import IWorldAbi from "contracts/out/IWorld.sol/IWorld.abi.json";
+import { createBurnerAccount, transportObserver, ContractWrite } from "@latticexyz/common";
+import { transactionQueue, writeObserver } from "@latticexyz/common/actions";
+import { Subject, share } from "rxjs";
+/*
+ * Import our MUD config, which includes strong types for
+ * our tables and other config options. We use this to generate
+ * things like RECS components and get back strong types for them.
+ *
+ * See https://mud.dev/templates/typescript/contracts#mudconfigts
+ * for the source of this information.
+ */
+import mudConfig from "contracts/mud.config";
+export type SetupNetworkResult = Awaited<ReturnType<typeof setupNetwork>>;
+export async function setupNetwork() {
+  const networkConfig = await getNetworkConfig();
+  /*
+   * Create a viem public (read only) client
+   * (https://viem.sh/docs/clients/public.html)
+   */
+  const clientOptions = {
+    chain: networkConfig.chain,
+    transport: transportObserver(fallback([webSocket(), http()])),
+    pollingInterval: 1000,
+  } as const satisfies ClientConfig;
+  const publicClient = createPublicClient(clientOptions);
+  /*
+   * Create an observable for contract writes that we can
+   * pass into MUD dev tools for transaction observability.
+   */
+  const write$ = new Subject<ContractWrite>();
+  /*
+   * Create a temporary wallet and a viem client for it
+   * (see https://viem.sh/docs/clients/wallet.html).
+   */
+  const burnerAccount = createBurnerAccount(networkConfig.privateKey as Hex);
+  const burnerWalletClient = createWalletClient({
+    ...clientOptions,
+    account: burnerAccount,
+  })
+    .extend(transactionQueue())
+    .extend(writeObserver({ onWrite: (write) => write$.next(write) }));
+  /*
+   * Create an object for communicating with the deployed World.
+   */
+  const worldContract = getContract({
+    address: networkConfig.worldAddress as Hex,
+    abi: IWorldAbi,
+    client: { public: publicClient, wallet: burnerWalletClient },
+  });
+  /*
+   * Sync on-chain state into RECS and keeps our client in sync.
+   * Uses the MUD indexer if available, otherwise falls back
+   * to the viem publicClient to make RPC calls to fetch MUD
+   * events from the chain.
+   */
+  const { components, latestBlock$, storedBlockLogs$, waitForTransaction } = await syncToRecs({
+    world,
+    config: mudConfig,
+    address: networkConfig.worldAddress as Hex,
+    publicClient,
+    startBlock: BigInt(networkConfig.initialBlockNumber),
+  });
+  return {
+    world,
+    components,
+    playerEntity: encodeEntity({ address: "address" }, { address: burnerWalletClient.account.address }),
+    publicClient,
+    walletClient: burnerWalletClient,
+    latestBlock$,
+    storedBlockLogs$,
+    waitForTransaction,
+    worldContract,
+    write$: write$.asObservable().pipe(share()),
+  };
+}

package/templates/react-ecs/packages/client/src/mud/supportedChains.ts ADDED Viewed

@@ -0,0 +1,20 @@
+/*
+ * The supported chains.
+ * By default, there are only two chains here:
+ *
+ * - mudFoundry, the chain running on anvil that pnpm dev
+ *   starts by default. It is similar to the viem anvil chain
+ *   (see https://viem.sh/docs/clients/test.html), but with the
+ *   basefee set to zero to avoid transaction fees.
+ * - Redstone, our production blockchain (https://redstone.xyz/)
+ * - Garnet, our test blockchain (https://garnetchain.com/))
+ *
+ */
+import { MUDChain, mudFoundry, redstone, garnet } from "@latticexyz/common/chains";
+/*
+ * See https://mud.dev/guides/hello-world/add-chain-client
+ * for instructions on how to add networks.
+ */
+export const supportedChains: MUDChain[] = [mudFoundry, redstone, garnet];

package/templates/react-ecs/packages/client/src/mud/world.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import { createWorld } from "@latticexyz/recs";
+export const world = createWorld();

package/templates/react-ecs/packages/client/tsconfig.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "types": ["vite/client", "vite-plugin-mud/env"],
+    "types": ["vite/client"],
     "target": "ESNext",
     "lib": ["ESNext", "DOM"],
     "jsx": "react-jsx",

package/templates/react-ecs/packages/client/vite.config.ts CHANGED Viewed

@@ -1,9 +1,14 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
-import { mud } from "vite-plugin-mud";
 export default defineConfig({
-  plugins: [react(), mud({ worldsFile: "../contracts/worlds.json" })],
+  plugins: [react()],
+  server: {
+    port: 3000,
+    fs: {
+      strict: false,
+    },
+  },
   build: {
     target: "es2022",
     minify: true,

package/templates/react-ecs/packages/contracts/.env CHANGED Viewed

@@ -7,5 +7,5 @@
 # Enable debug logs for MUD CLI
 DEBUG=mud:*
 #
-# Anvil default private key
+# Anvil default private key:
 PRIVATE_KEY=0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80