latticexyz · holic · Jan 21, 2025 · Jan 21, 2025
@@ -7,7 +7,6 @@ import { glob } from "glob";
   const packageDir = path.resolve(__dirname, "..");
   const rootDir = path.resolve(packageDir, "../..");
 
-  // TODO: could swap this with `pnpm m ls --json --depth=-1`
   const mudPackageNames = await (async () => {
     const files = await glob("packages/*/package.json", { cwd: rootDir });
     const packages = await Promise.all(
@@ -29,17 +28,16 @@ import { glob } from "glob";
 
     await fs.mkdir(path.dirname(destPath), { recursive: true });
 
+    // Replace all MUD package links with mustache placeholder used by create-create-app
+    // that will be replaced with the latest MUD version number when the template is used.
     if (/package.json$/.test(destPath)) {
-      let source = await fs.readFile(sourcePath, "utf-8");
-      // Replace all MUD package links with mustache placeholder used by create-create-app
-      // that will be replaced with the latest MUD version number when the template is used.
-      source = source.replace(/"([^"]+)":\s*"(link|file):[^"]+"/g, (match, packageName) =>
-        mudPackageNames.includes(packageName) ? `"${packageName}": "{{mud-version}}"` : match,
+      const source = await fs.readFile(sourcePath, "utf-8");
+      await fs.writeFile(
+        destPath,
+        source.replace(/"([^"]+)":\s*"(link|file):[^"]+"/g, (match, packageName) =>
+          mudPackageNames.includes(packageName) ? `"${packageName}": "{{mud-version}}"` : match,
+        ),
       );
-      const json = JSON.parse(source);
-      // Strip out pnpm overrides
-      delete json.pnpm;
-      await fs.writeFile(destPath, JSON.stringify(json, null, 2) + "\n");
     }
     // Replace template workspace root `tsconfig.json` files (which have paths relative to monorepo)
     // with one that inherits our base tsconfig.

@@ -56,7 +56,7 @@
     "debug": "^4.3.4",
     "dotenv": "^16.0.3",
     "permissionless": "0.2.25",
-    "react-error-boundary": "5.0.0",
+    "react-error-boundary": "^4.0.13",
     "react-merge-refs": "^2.1.1",
     "tailwind-merge": "^1.12.0",
     "usehooks-ts": "^3.1.0",

@@ -1,16 +1,7 @@
-.DS_Store
-logs
-*.log
-
 node_modules
 
-.env.*
-
-# foundry
-cache
-broadcast
-out/*
-!out/IWorld.sol
-out/IWorld.sol/*
-!out/IWorld.sol/IWorld.abi.json
-!out/IWorld.sol/IWorld.abi.d.json.ts
+# mud artifacts
+.mud
+# sqlite indexer data
+*.db
+*.db-journal
@@ -1,21 +1,13 @@
-scrollback: 10000
 procs:
   client:
     cwd: packages/client
     shell: pnpm run dev
   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
@@ -27,12 +27,5 @@
   "engines": {
     "node": "^18",
     "pnpm": "^8 || ^9"
-  },
-  "pnpm": {
-    "overrides": {
-      "@tanstack/react-query": "link:../../packages/entrykit/node_modules/@tanstack/react-query",
-      "@types/react": "link:../../packages/entrykit/node_modules/@types/react",
-      "wagmi": "link:../../packages/entrykit/node_modules/wagmi"
-    }
   }
 }
@@ -1 +1,3 @@
+node_modules
 dist
+.DS_Store
@@ -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>

@@ -6,39 +6,31 @@
   "type": "module",
   "scripts": {
     "build": "vite build",
-    "dev": "vite",
+    "dev": "wait-port localhost:8545 && vite",
     "preview": "vite preview",
     "test": "tsc --noEmit"
   },
   "dependencies": {
     "@latticexyz/common": "link:../../../../packages/common",
-    "@latticexyz/entrykit": "link:../../../../packages/entrykit",
-    "@latticexyz/explorer": "link:../../../../packages/explorer",
+    "@latticexyz/dev-tools": "link:../../../../packages/dev-tools",
     "@latticexyz/react": "link:../../../../packages/react",
     "@latticexyz/schema-type": "link:../../../../packages/schema-type",
-    "@latticexyz/stash": "link:../../../../packages/stash",
     "@latticexyz/store-sync": "link:../../../../packages/store-sync",
     "@latticexyz/utils": "link:../../../../packages/utils",
     "@latticexyz/world": "link:../../../../packages/world",
-    "@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": "link:../../../../packages/vite-plugin-mud"
+    "vite": "^4.2.1",
+    "wait-port": "^1.0.4"
   }
 }
@@ -1,46 +1,105 @@
-import { stash } from "./mud/stash";
-import { useRecords } from "@latticexyz/stash/react";
-import { AccountButton } from "@latticexyz/entrykit/internal";
-import { Direction } 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";
-
-export function App() {
-  const players = useRecords({ stash, table: mudConfig.tables.app__Position });
-
-  const sync = useSync();
-  const worldContract = useWorldContract();
-  const onMove = useMemo(
-    () =>
-      sync.data && worldContract
-        ? async (direction: Direction) => {
-            const tx = await worldContract.write.app__move([mudConfig.enums.Direction.indexOf(direction)]);
-            await sync.data.waitForTransaction(tx);
-          }
-        : undefined,
-    [sync.data, worldContract],
-  );
+import { useMUD } from "./MUDContext";
+
+const styleUnset = { all: "unset" } as const;
+
+export const App = () => {
+  const {
+    network: { tables, useStore },
+    systemCalls: { addTask, toggleTask, deleteTask },
+  } = useMUD();
+
+  const tasks = useStore((state) => {
+    const records = Object.values(state.getRecords(tables.Tasks));
+    records.sort((a, b) => Number(a.value.createdAt - b.value.createdAt));
+    return records;
+  });
 
   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} />
-        </Synced>
-      </div>
-      <div className="fixed top-2 right-2">
-        <AccountButton />
-      </div>
+      <table>
+        <tbody>
+          {tasks.map((task) => (
+            <tr key={task.id}>
+              <td align="right">
+                <input
+                  type="checkbox"
+                  checked={task.value.completedAt > 0n}
+                  title={task.value.completedAt === 0n ? "Mark task as completed" : "Mark task as incomplete"}
+                  onChange={async (event) => {
+                    event.preventDefault();
+                    const checkbox = event.currentTarget;
+
+                    checkbox.disabled = true;
+                    try {
+                      await toggleTask(task.key.id);
+                    } finally {
+                      checkbox.disabled = false;
+                    }
+                  }}
+                />
+              </td>
+              <td>{task.value.completedAt > 0n ? <s>{task.value.description}</s> : <>{task.value.description}</>}</td>
+              <td align="right">
+                <button
+                  type="button"
+                  title="Delete task"
+                  style={styleUnset}
+                  onClick={async (event) => {
+                    event.preventDefault();
+                    if (!window.confirm("Are you sure you want to delete this task?")) return;
+
+                    const button = event.currentTarget;
+                    button.disabled = true;
+                    try {
+                      await deleteTask(task.key.id);
+                    } finally {
+                      button.disabled = false;
+                    }
+                  }}
+                >
+                  &times;
+                </button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+        <tfoot>
+          <tr>
+            <td>
+              <input type="checkbox" disabled />
+            </td>
+            <td colSpan={2}>
+              <form
+                onSubmit={async (event) => {
+                  event.preventDefault();
+                  const form = event.currentTarget;
+                  const fieldset = form.querySelector("fieldset");
+                  if (!(fieldset instanceof HTMLFieldSetElement)) return;
+
+                  const formData = new FormData(form);
+                  const desc = formData.get("description");
+                  if (typeof desc !== "string") return;
+
+                  fieldset.disabled = true;
+                  try {
+                    await addTask(desc);
+                    form.reset();
+                  } finally {
+                    fieldset.disabled = false;
+                  }
+                }}
+              >
+                <fieldset style={styleUnset}>
+                  <input type="text" name="description" />{" "}
+                  <button type="submit" title="Add task">
+                    Add
+                  </button>
+                </fieldset>
+              </form>
+            </td>
+          </tr>
+        </tfoot>
+      </table>
     </>
   );
-}
+};