feat(create-mud): new react template with stash/entrykit (#3478)

Author: frolic

.changeset/cuddly-pugs-cough.md

@@ -0,0 +1,5 @@
+---
+"@latticexyz/entrykit": patch
+---
+
+Bumped react-error-boundary dependency.

.changeset/five-bats-live.md

@@ -0,0 +1,5 @@
+---
+"create-mud": patch
+---
+
+Updated React template with Stash client state library, EntryKit for wallet support, and a cleaned up app structure.

packages/create-mud/scripts/copy-templates.ts

@@ -12,6 +12,7 @@ const __dirname = path.dirname(__filename);
   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(
@@ -36,16 +37,17 @@ const __dirname = path.dirname(__filename);
 
     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)) {
-      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,
-        ),
+      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 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.

packages/entrykit/package.json

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

pnpm-lock.yaml

@@ -1,7 +1,16 @@
+.DS_Store
+logs
+*.log
+
 node_modules
 
-# mud artifacts
-.mud
-# sqlite indexer data
-*.db
-*.db-journal
+.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

templates/react/.gitignore

@@ -1,13 +1,21 @@
+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 --base-fee 0 --block-time 2
+    shell: anvil --block-time 2
   explorer:
     cwd: packages/contracts
     shell: pnpm explorer

templates/react/mprocs.yaml

@@ -27,5 +27,12 @@
   "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"
+    }
   }
 }

templates/react/package.json

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

templates/react/packages/client/.gitignore

@@ -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 minimal MUD client</title>
+    <title>a MUD app</title>
   </head>
   <body>
     <div id="react-root"></div>