create-mud 2.2.15-7482a5ae322f26278722081838b6103ce6d264e6 → 2.2.15-7fa68f6717ecd3fc2c734ca31c842c1242175cbe

package/dist/cli.js

@@ -1,3 +1,3 @@
 #!/usr/bin/env node
-var l=Object.create;var a=Object.defineProperty;var o=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var d=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var h=(e,t,s,p)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of m(t))!u.call(e,r)&&r!==s&&a(e,r,{get:()=>t[r],enumerable:!(p=o(t,r))||p.enumerable});return e};var j=(e,t,s)=>(s=e!=null?l(d(e)):{},h(t||!e||!e.__esModule?a(s,"default",{value:e,enumerable:!0}):s,e));var i=require("create-create-app"),n=j(require("path"));var c={name:"create-mud",version:"2.2.15-7482a5ae322f26278722081838b6103ce6d264e6",description:"Create a new MUD project",license:"MIT",author:"Lattice <mud@lattice.xyz>",bin:"dist/cli.js",files:["dist"],scripts:{build:"pnpm run build:js","build:js":"tsup && tsx ./scripts/copy-templates.ts",clean:"pnpm run clean:js","clean:js":"shx rm -rf dist",dev:"tsup --watch",prepublishOnly:"npm run clean && npm run build",test:"pnpm run test:vanilla && pnpm run test:react && pnpm run test:react-ecs && pnpm run test:phaser && pnpm run test:threejs","test:ci":"pnpm run test","test:phaser":"dist/cli.js test-project --template phaser && shx rm -rf test-project","test:react":"dist/cli.js test-project --template react && shx rm -rf test-project","test:react-ecs":"dist/cli.js test-project --template react-ecs && shx rm -rf test-project","test:threejs":"dist/cli.js test-project --template threejs && shx rm -rf test-project","test:vanilla":"dist/cli.js test-project --template vanilla && shx rm -rf test-project"},dependencies:{"create-create-app":"git+https://github.com/holic/create-create-app#74376c59b48a04aabbe94d9cacfe9cb1cecccd63"},devDependencies:{"@types/node":"^18.15.11",execa:"^7.0.0",tsup:"^6.7.0"},publishConfig:{access:"public",registry:"https://registry.npmjs.org"}};var b=n.default.resolve(__dirname,"..","dist","templates");(0,i.create)("create-mud",{templateRoot:b,defaultTemplate:"vanilla",defaultPackageManager:"pnpm",promptForDescription:!1,promptForAuthor:!1,promptForEmail:!1,promptForLicense:!1,promptForTemplate:!0,caveat:({answers:e,packageManager:t})=>`Done! Play in the MUD with \`cd ${e.name}\` and \`${t} run dev\``,extra:{"mud-version":{type:"input",describe:"The version of MUD packages to use, defaults to latest",default:c.version}}});
+var l=Object.create;var a=Object.defineProperty;var o=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var d=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var h=(e,t,s,p)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of m(t))!u.call(e,r)&&r!==s&&a(e,r,{get:()=>t[r],enumerable:!(p=o(t,r))||p.enumerable});return e};var j=(e,t,s)=>(s=e!=null?l(d(e)):{},h(t||!e||!e.__esModule?a(s,"default",{value:e,enumerable:!0}):s,e));var i=require("create-create-app"),n=j(require("path"));var c={name:"create-mud",version:"2.2.15-7fa68f6717ecd3fc2c734ca31c842c1242175cbe",description:"Create a new MUD project",license:"MIT",author:"Lattice <mud@lattice.xyz>",bin:"dist/cli.js",files:["dist"],scripts:{build:"pnpm run build:js","build:js":"tsup && tsx ./scripts/copy-templates.ts",clean:"pnpm run clean:js","clean:js":"shx rm -rf dist",dev:"tsup --watch",prepublishOnly:"npm run clean && npm run build",test:"pnpm run test:vanilla && pnpm run test:react && pnpm run test:react-ecs && pnpm run test:phaser && pnpm run test:threejs","test:ci":"pnpm run test","test:phaser":"dist/cli.js test-project --template phaser && shx rm -rf test-project","test:react":"dist/cli.js test-project --template react && shx rm -rf test-project","test:react-ecs":"dist/cli.js test-project --template react-ecs && shx rm -rf test-project","test:threejs":"dist/cli.js test-project --template threejs && shx rm -rf test-project","test:vanilla":"dist/cli.js test-project --template vanilla && shx rm -rf test-project"},dependencies:{"create-create-app":"git+https://github.com/holic/create-create-app#74376c59b48a04aabbe94d9cacfe9cb1cecccd63"},devDependencies:{"@types/node":"^18.15.11",execa:"^7.0.0",tsup:"^6.7.0"},publishConfig:{access:"public",registry:"https://registry.npmjs.org"}};var b=n.default.resolve(__dirname,"..","dist","templates");(0,i.create)("create-mud",{templateRoot:b,defaultTemplate:"vanilla",defaultPackageManager:"pnpm",promptForDescription:!1,promptForAuthor:!1,promptForEmail:!1,promptForLicense:!1,promptForTemplate:!0,caveat:({answers:e,packageManager:t})=>`Done! Play in the MUD with \`cd ${e.name}\` and \`${t} run dev\``,extra:{"mud-version":{type:"input",describe:"The version of MUD packages to use, defaults to latest",default:c.version}}});
 //# sourceMappingURL=cli.js.map

package/dist/cli.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/cli.ts","../package.json"],"sourcesContent":["#!/usr/bin/env node\nimport { create } from \"create-create-app\";\nimport path from \"node:path\";\nimport packageJson from \"../package.json\";\n\nconst templateRoot = path.resolve(__dirname, \"..\", \"dist\", \"templates\");\n\n// See https://github.com/uetchy/create-create-app/blob/master/README.md for other options.\ncreate(\"create-mud\", {\n  templateRoot,\n  defaultTemplate: \"vanilla\",\n  // templates use pnpm workspaces, so default to that for now\n  // not sure if it's worth trying to support multiple kinds of package managers for monorepos, given the tooling is so different\n  defaultPackageManager: \"pnpm\",\n  promptForDescription: false,\n  promptForAuthor: false,\n  promptForEmail: false,\n  promptForLicense: false,\n  promptForTemplate: true,\n  caveat: ({ answers, packageManager }) =>\n    `Done! Play in the MUD with \\`cd ${answers.name}\\` and \\`${packageManager} run dev\\``,\n  extra: {\n    \"mud-version\": {\n      type: \"input\",\n      describe: \"The version of MUD packages to use, defaults to latest\",\n      default: packageJson.version,\n    },\n  },\n});\n","{\n  \"name\": \"create-mud\",\n  \"version\": \"2.2.15-7482a5ae322f26278722081838b6103ce6d264e6\",\n  \"description\": \"Create a new MUD project\",\n  \"license\": \"MIT\",\n  \"author\": \"Lattice <mud@lattice.xyz>\",\n  \"bin\": \"dist/cli.js\",\n  \"files\": [\n    \"dist\"\n  ],\n  \"scripts\": {\n    \"build\": \"pnpm run build:js\",\n    \"build:js\": \"tsup && tsx ./scripts/copy-templates.ts\",\n    \"clean\": \"pnpm run clean:js\",\n    \"clean:js\": \"shx rm -rf dist\",\n    \"dev\": \"tsup --watch\",\n    \"prepublishOnly\": \"npm run clean && npm run build\",\n    \"test\": \"pnpm run test:vanilla && pnpm run test:react && pnpm run test:react-ecs && pnpm run test:phaser && pnpm run test:threejs\",\n    \"test:ci\": \"pnpm run test\",\n    \"test:phaser\": \"dist/cli.js test-project --template phaser && shx rm -rf test-project\",\n    \"test:react\": \"dist/cli.js test-project --template react && shx rm -rf test-project\",\n    \"test:react-ecs\": \"dist/cli.js test-project --template react-ecs && shx rm -rf test-project\",\n    \"test:threejs\": \"dist/cli.js test-project --template threejs && shx rm -rf test-project\",\n    \"test:vanilla\": \"dist/cli.js test-project --template vanilla && shx rm -rf test-project\"\n  },\n  \"dependencies\": {\n    \"create-create-app\": \"git+https://github.com/holic/create-create-app#74376c59b48a04aabbe94d9cacfe9cb1cecccd63\"\n  },\n  \"devDependencies\": {\n    \"@types/node\": \"^18.15.11\",\n    \"execa\": \"^7.0.0\",\n    \"tsup\": \"^6.7.0\"\n  },\n  \"publishConfig\": {\n    \"access\": \"public\",\n    \"registry\": \"https://registry.npmjs.org\"\n  }\n}\n"],"mappings":";2cACA,IAAAA,EAAuB,6BACvBC,EAAiB,mBCFjB,IAAAC,EAAA,CACE,KAAQ,aACR,QAAW,kDACX,YAAe,2BACf,QAAW,MACX,OAAU,4BACV,IAAO,cACP,MAAS,CACP,MACF,EACA,QAAW,CACT,MAAS,oBACT,WAAY,0CACZ,MAAS,oBACT,WAAY,kBACZ,IAAO,eACP,eAAkB,iCAClB,KAAQ,2HACR,UAAW,gBACX,cAAe,wEACf,aAAc,uEACd,iBAAkB,2EAClB,eAAgB,yEAChB,eAAgB,wEAClB,EACA,aAAgB,CACd,oBAAqB,yFACvB,EACA,gBAAmB,CACjB,cAAe,YACf,MAAS,SACT,KAAQ,QACV,EACA,cAAiB,CACf,OAAU,SACV,SAAY,4BACd,CACF,EDhCA,IAAMC,EAAe,EAAAC,QAAK,QAAQ,UAAW,KAAM,OAAQ,WAAW,KAGtE,UAAO,aAAc,CACnB,aAAAD,EACA,gBAAiB,UAGjB,sBAAuB,OACvB,qBAAsB,GACtB,gBAAiB,GACjB,eAAgB,GAChB,iBAAkB,GAClB,kBAAmB,GACnB,OAAQ,CAAC,CAAE,QAAAE,EAAS,eAAAC,CAAe,IACjC,mCAAmCD,EAAQ,gBAAgBC,cAC7D,MAAO,CACL,cAAe,CACb,KAAM,QACN,SAAU,yDACV,QAASC,EAAY,OACvB,CACF,CACF,CAAC","names":["import_create_create_app","import_node_path","package_default","templateRoot","path","answers","packageManager","package_default"]}
+{"version":3,"sources":["../src/cli.ts","../package.json"],"sourcesContent":["#!/usr/bin/env node\nimport { create } from \"create-create-app\";\nimport path from \"node:path\";\nimport packageJson from \"../package.json\";\n\nconst templateRoot = path.resolve(__dirname, \"..\", \"dist\", \"templates\");\n\n// See https://github.com/uetchy/create-create-app/blob/master/README.md for other options.\ncreate(\"create-mud\", {\n  templateRoot,\n  defaultTemplate: \"vanilla\",\n  // templates use pnpm workspaces, so default to that for now\n  // not sure if it's worth trying to support multiple kinds of package managers for monorepos, given the tooling is so different\n  defaultPackageManager: \"pnpm\",\n  promptForDescription: false,\n  promptForAuthor: false,\n  promptForEmail: false,\n  promptForLicense: false,\n  promptForTemplate: true,\n  caveat: ({ answers, packageManager }) =>\n    `Done! Play in the MUD with \\`cd ${answers.name}\\` and \\`${packageManager} run dev\\``,\n  extra: {\n    \"mud-version\": {\n      type: \"input\",\n      describe: \"The version of MUD packages to use, defaults to latest\",\n      default: packageJson.version,\n    },\n  },\n});\n","{\n  \"name\": \"create-mud\",\n  \"version\": \"2.2.15-7fa68f6717ecd3fc2c734ca31c842c1242175cbe\",\n  \"description\": \"Create a new MUD project\",\n  \"license\": \"MIT\",\n  \"author\": \"Lattice <mud@lattice.xyz>\",\n  \"bin\": \"dist/cli.js\",\n  \"files\": [\n    \"dist\"\n  ],\n  \"scripts\": {\n    \"build\": \"pnpm run build:js\",\n    \"build:js\": \"tsup && tsx ./scripts/copy-templates.ts\",\n    \"clean\": \"pnpm run clean:js\",\n    \"clean:js\": \"shx rm -rf dist\",\n    \"dev\": \"tsup --watch\",\n    \"prepublishOnly\": \"npm run clean && npm run build\",\n    \"test\": \"pnpm run test:vanilla && pnpm run test:react && pnpm run test:react-ecs && pnpm run test:phaser && pnpm run test:threejs\",\n    \"test:ci\": \"pnpm run test\",\n    \"test:phaser\": \"dist/cli.js test-project --template phaser && shx rm -rf test-project\",\n    \"test:react\": \"dist/cli.js test-project --template react && shx rm -rf test-project\",\n    \"test:react-ecs\": \"dist/cli.js test-project --template react-ecs && shx rm -rf test-project\",\n    \"test:threejs\": \"dist/cli.js test-project --template threejs && shx rm -rf test-project\",\n    \"test:vanilla\": \"dist/cli.js test-project --template vanilla && shx rm -rf test-project\"\n  },\n  \"dependencies\": {\n    \"create-create-app\": \"git+https://github.com/holic/create-create-app#74376c59b48a04aabbe94d9cacfe9cb1cecccd63\"\n  },\n  \"devDependencies\": {\n    \"@types/node\": \"^18.15.11\",\n    \"execa\": \"^7.0.0\",\n    \"tsup\": \"^6.7.0\"\n  },\n  \"publishConfig\": {\n    \"access\": \"public\",\n    \"registry\": \"https://registry.npmjs.org\"\n  }\n}\n"],"mappings":";2cACA,IAAAA,EAAuB,6BACvBC,EAAiB,mBCFjB,IAAAC,EAAA,CACE,KAAQ,aACR,QAAW,kDACX,YAAe,2BACf,QAAW,MACX,OAAU,4BACV,IAAO,cACP,MAAS,CACP,MACF,EACA,QAAW,CACT,MAAS,oBACT,WAAY,0CACZ,MAAS,oBACT,WAAY,kBACZ,IAAO,eACP,eAAkB,iCAClB,KAAQ,2HACR,UAAW,gBACX,cAAe,wEACf,aAAc,uEACd,iBAAkB,2EAClB,eAAgB,yEAChB,eAAgB,wEAClB,EACA,aAAgB,CACd,oBAAqB,yFACvB,EACA,gBAAmB,CACjB,cAAe,YACf,MAAS,SACT,KAAQ,QACV,EACA,cAAiB,CACf,OAAU,SACV,SAAY,4BACd,CACF,EDhCA,IAAMC,EAAe,EAAAC,QAAK,QAAQ,UAAW,KAAM,OAAQ,WAAW,KAGtE,UAAO,aAAc,CACnB,aAAAD,EACA,gBAAiB,UAGjB,sBAAuB,OACvB,qBAAsB,GACtB,gBAAiB,GACjB,eAAgB,GAChB,iBAAkB,GAClB,kBAAmB,GACnB,OAAQ,CAAC,CAAE,QAAAE,EAAS,eAAAC,CAAe,IACjC,mCAAmCD,EAAQ,gBAAgBC,cAC7D,MAAO,CACL,cAAe,CACb,KAAM,QACN,SAAU,yDACV,QAASC,EAAY,OACvB,CACF,CACF,CAAC","names":["import_create_create_app","import_node_path","package_default","templateRoot","path","answers","packageManager","package_default"]}

package/dist/templates/react/gitignore

@@ -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

package/dist/templates/react/mprocs.yaml

@@ -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/dist/templates/react/package.json

@@ -12,10 +12,10 @@
     "test": "pnpm recursive run test"
   },
   "devDependencies": {
-    "@latticexyz/cli": "2.2.15-f9de085862ac62ce15fe3b7743916cfd631592ea",
-    "@latticexyz/common": "2.2.15-f9de085862ac62ce15fe3b7743916cfd631592ea",
-    "@latticexyz/explorer": "2.2.15-f9de085862ac62ce15fe3b7743916cfd631592ea",
-    "@latticexyz/store-indexer": "2.2.15-f9de085862ac62ce15fe3b7743916cfd631592ea",
+    "@latticexyz/cli": "{{mud-version}}",
+    "@latticexyz/common": "{{mud-version}}",
+    "@latticexyz/explorer": "{{mud-version}}",
+    "@latticexyz/store-indexer": "{{mud-version}}",
     "@types/debug": "4.1.7",
     "@typescript-eslint/eslint-plugin": "7.1.1",
     "@typescript-eslint/parser": "7.1.1",
@@ -27,29 +27,5 @@
   "engines": {
     "node": "^18",
     "pnpm": "^8 || ^9"
-  },
-  "pnpm": {
-    "overrides": {
-      "@latticexyz/abi-ts": "{{mud-version}}",
-      "@latticexyz/block-logs-stream": "{{mud-version}}",
-      "@latticexyz/cli": "{{mud-version}}",
-      "@latticexyz/common": "{{mud-version}}",
-      "@latticexyz/config": "{{mud-version}}",
-      "@latticexyz/entrykit": "{{mud-version}}",
-      "@latticexyz/explorer": "{{mud-version}}",
-      "@latticexyz/gas-report": "{{mud-version}}",
-      "@latticexyz/paymaster": "{{mud-version}}",
-      "@latticexyz/protocol-parser": "{{mud-version}}",
-      "@latticexyz/recs": "{{mud-version}}",
-      "@latticexyz/schema-type": "{{mud-version}}",
-      "@latticexyz/stash": "{{mud-version}}",
-      "@latticexyz/store": "{{mud-version}}",
-      "@latticexyz/store-indexer": "{{mud-version}}",
-      "@latticexyz/store-sync": "{{mud-version}}",
-      "@latticexyz/utils": "{{mud-version}}",
-      "@latticexyz/world": "{{mud-version}}",
-      "@latticexyz/world-module-metadata": "{{mud-version}}",
-      "@latticexyz/world-modules": "{{mud-version}}"
-    }
   }
 }

package/dist/templates/react/packages/client/gitignore

@@ -1 +1,3 @@
+node_modules
 dist
+.DS_Store

package/dist/templates/react/packages/client/package.json

@@ -11,34 +11,25 @@
     "test": "tsc --noEmit"
   },
   "dependencies": {
-    "@latticexyz/common": "2.2.15-f9de085862ac62ce15fe3b7743916cfd631592ea",
-    "@latticexyz/entrykit": "2.2.15-f9de085862ac62ce15fe3b7743916cfd631592ea",
-    "@latticexyz/explorer": "2.2.15-f9de085862ac62ce15fe3b7743916cfd631592ea",
-    "@latticexyz/react": "2.2.15-f9de085862ac62ce15fe3b7743916cfd631592ea",
-    "@latticexyz/schema-type": "2.2.15-f9de085862ac62ce15fe3b7743916cfd631592ea",
-    "@latticexyz/stash": "2.2.15-f9de085862ac62ce15fe3b7743916cfd631592ea",
-    "@latticexyz/store-sync": "2.2.15-f9de085862ac62ce15fe3b7743916cfd631592ea",
-    "@latticexyz/utils": "2.2.15-f9de085862ac62ce15fe3b7743916cfd631592ea",
-    "@latticexyz/world": "2.2.15-f9de085862ac62ce15fe3b7743916cfd631592ea",
-    "@tanstack/react-query": "^5.63.0",
+    "@latticexyz/common": "{{mud-version}}",
+    "@latticexyz/dev-tools": "{{mud-version}}",
+    "@latticexyz/react": "{{mud-version}}",
+    "@latticexyz/schema-type": "{{mud-version}}",
+    "@latticexyz/store-sync": "{{mud-version}}",
+    "@latticexyz/utils": "{{mud-version}}",
+    "@latticexyz/world": "{{mud-version}}",
     "contracts": "workspace:*",
-    "fast-deep-equal": "^3.1.3",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rxjs": "7.5.5",
-    "tailwind-merge": "^2.6.0",
-    "viem": "2.21.19",
-    "wagmi": "2.12.11"
+    "viem": "2.21.19"
   },
   "devDependencies": {
-    "@types/react": "18.2.0",
-    "@types/react-dom": "18.2.0",
+    "@types/react": "18.2.22",
+    "@types/react-dom": "18.2.7",
     "@vitejs/plugin-react": "^3.1.0",
-    "autoprefixer": "^10.4.20",
     "eslint-plugin-react": "7.31.11",
     "eslint-plugin-react-hooks": "4.6.0",
-    "postcss": "^8.4.49",
-    "tailwindcss": "^3.4.17",
     "vite": "^4.2.1",
     "wait-port": "^1.0.4"
   }

package/dist/templates/react/packages/client/src/App.tsx

@@ -1,43 +1,105 @@
-import { stash } from "./mud/stash";
-import { useSyncProgress } from "./mud/useSyncProgress";
-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 "./GameMap";
-import { useWorldContract } from "./mud/useWorldContract";
-
-export function App() {
-  const { isLive, message, percentage } = useSyncProgress();
-
-  const players = useRecords({ stash, table: mudConfig.tables.app__Position });
-
-  const worldContract = useWorldContract();
-  const onMove = useMemo(
-    () =>
-      worldContract
-        ? async (direction: Direction) => {
-            await worldContract.write.app__move([mudConfig.enums.Direction.indexOf(direction)]);
-          }
-        : undefined,
-    [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">
-        {isLive ? (
-          <GameMap players={players} onMove={onMove} />
-        ) : (
-          <div className="tabular-nums">
-            {message} ({percentage.toFixed(1)}%)…
-          </div>
-        )}
-      </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>
     </>
   );
-}
+};

package/dist/templates/react/packages/client/src/MUDContext.tsx

@@ -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/dist/templates/react/packages/client/src/index.tsx

@@ -1,20 +1,34 @@
-import "tailwindcss/tailwind.css";
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import { getWorldDeploy } from "./mud/getWorldDeploy";
-import { Providers } from "./Providers";
+import ReactDOM from "react-dom/client";
 import { App } from "./App";
-import { chainId } from "./common";
-import { Explorer } from "./mud/Explorer";
+import { setup } from "./mud/setup";
+import { MUDProvider } from "./MUDContext";
+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
-getWorldDeploy(chainId).then((worldDeploy) =>
-  createRoot(document.getElementById("react-root")!).render(
-    <StrictMode>
-      <Providers worldDeploy={worldDeploy}>
-        <App />
-        <Explorer />
-      </Providers>
-    </StrictMode>,
-  ),
-);
+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$,
+      useStore: result.network.useStore,
+    });
+  }
+});

package/dist/templates/react/packages/client/src/mud/createSystemCalls.ts

@@ -0,0 +1,56 @@
+/*
+ * Create the system calls that the client can use to ask
+ * for changes in the World state (using the System contracts).
+ */
+
+import { Hex } from "viem";
+import { SetupNetworkResult } from "./setupNetwork";
+
+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).
+   */
+  { tables, useStore, worldContract, waitForTransaction }: SetupNetworkResult,
+) {
+  const addTask = async (label: string) => {
+    const tx = await worldContract.write.app__addTask([label]);
+    await waitForTransaction(tx);
+  };
+
+  const toggleTask = async (id: Hex) => {
+    const isComplete = (useStore.getState().getValue(tables.Tasks, { id })?.completedAt ?? 0n) > 0n;
+    const tx = isComplete
+      ? await worldContract.write.app__resetTask([id])
+      : await worldContract.write.app__completeTask([id]);
+    await waitForTransaction(tx);
+  };
+
+  const deleteTask = async (id: Hex) => {
+    const tx = await worldContract.write.app__deleteTask([id]);
+    await waitForTransaction(tx);
+  };
+
+  return {
+    addTask,
+    toggleTask,
+    deleteTask,
+  };
+}

package/dist/templates/react/packages/client/src/mud/getNetworkConfig.ts

@@ -0,0 +1,76 @@
+/*
+ * 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.
+ */
+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/dist/templates/react/packages/client/src/mud/setup.ts

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

package/dist/templates/react/packages/client/src/mud/setupNetwork.ts

@@ -0,0 +1,101 @@
+/*
+ * 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 { syncToZustand } from "@latticexyz/store-sync/zustand";
+import { getNetworkConfig } from "./getNetworkConfig";
+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 { tables, useStore, latestBlock$, storedBlockLogs$, waitForTransaction } = await syncToZustand({
+    config: mudConfig,
+    address: networkConfig.worldAddress as Hex,
+    publicClient,
+    startBlock: BigInt(networkConfig.initialBlockNumber),
+  });
+
+  return {
+    tables,
+    useStore,
+    publicClient,
+    walletClient: burnerWalletClient,
+    latestBlock$,
+    storedBlockLogs$,
+    waitForTransaction,
+    worldContract,
+    write$: write$.asObservable().pipe(share()),
+  };
+}