create-mud 2.0.12 → 2.0.13-account-kit-957ab7d69

package/dist/cli.js

@@ -1,2 +1,2 @@
 #!/usr/bin/env node
-var t=require("create-create-app"),s=require("path");var e={name:"create-mud",version:"2.0.12",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 && ./scripts/copy-templates.sh",clean:"pnpm run clean:js","clean:js":"rimraf 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 && rimraf test-project","test:react":"dist/cli.js test-project --template react && rimraf test-project","test:react-ecs":"dist/cli.js test-project --template react-ecs && rimraf test-project","test:threejs":"dist/cli.js test-project --template threejs && rimraf test-project","test:vanilla":"dist/cli.js test-project --template vanilla && rimraf test-project"},dependencies:{"create-create-app":"git+https://github.com/holic/create-create-app#74376c59b48a04aabbe94d9cacfe9cb1cecccd63"},devDependencies:{"@types/node":"^18.15.11",tsup:"^6.7.0"},publishConfig:{access:"public",registry:"https://registry.npmjs.org"}};var c=(0,s.resolve)(__dirname,"..","dist","templates");(0,t.create)("create-mud",{templateRoot:c,defaultTemplate:"vanilla",defaultPackageManager:"pnpm",promptForDescription:!1,promptForAuthor:!1,promptForEmail:!1,promptForLicense:!1,promptForTemplate:!0,caveat:({answers:r,packageManager:a})=>`Done! Play in the MUD with \`cd ${r.name}\` and \`${a} run dev\``,extra:{"mud-version":{type:"input",describe:"The version of MUD packages to use, defaults to latest",default:e.version}}});
+var t=require("create-create-app"),s=require("path");var e={name:"create-mud",version:"2.0.13-account-kit-957ab7d69",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 && ./scripts/copy-templates.sh",clean:"pnpm run clean:js","clean:js":"rimraf 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 && rimraf test-project","test:react":"dist/cli.js test-project --template react && rimraf test-project","test:react-ecs":"dist/cli.js test-project --template react-ecs && rimraf test-project","test:threejs":"dist/cli.js test-project --template threejs && rimraf test-project","test:vanilla":"dist/cli.js test-project --template vanilla && rimraf test-project"},dependencies:{"create-create-app":"git+https://github.com/holic/create-create-app#74376c59b48a04aabbe94d9cacfe9cb1cecccd63"},devDependencies:{"@types/node":"^18.15.11",tsup:"^6.7.0"},publishConfig:{access:"public",registry:"https://registry.npmjs.org"}};var c=(0,s.resolve)(__dirname,"..","dist","templates");(0,t.create)("create-mud",{templateRoot:c,defaultTemplate:"vanilla",defaultPackageManager:"pnpm",promptForDescription:!1,promptForAuthor:!1,promptForEmail:!1,promptForLicense:!1,promptForTemplate:!0,caveat:({answers:r,packageManager:a})=>`Done! Play in the MUD with \`cd ${r.name}\` and \`${a} run dev\``,extra:{"mud-version":{type:"input",describe:"The version of MUD packages to use, defaults to latest",default:e.version}}});

package/dist/templates/phaser/packages/art/package.json

@@ -12,12 +12,11 @@
   "devDependencies": {
     "@mapeditor/tiled-api": "^1.8.2",
     "@types/ejs": "^3.1.1",
-    "@types/glob": "^7.2.0",
     "@types/node": "^18.0.3",
     "ejs": "^3.1.10",
     "free-tex-packer-cli": "^0.3.0",
     "free-tex-packer-core": "^0.3.4",
-    "glob": "^8.0.3",
+    "glob": "^10.4.2",
     "optimist": "^0.6.1",
     "ts-node": "^10.8.2",
     "typescript": "5.4.2",

package/dist/templates/phaser/packages/art/scripts/export-tiled-types.ts

@@ -1,10 +1,11 @@
 import xlmJs from "xml-js";
 import fs from "fs";
-import glob from "glob";
+import { globSync } from "glob";
 import ejs from "ejs";
 import path from "path";
 
-const tilemaps = glob.sync("./tilesets/*.tsx");
+const tilemaps = globSync("./tilesets/*.tsx").sort();
+
 enum PropertyName {
   Name = "name",
   Frame = "frame",

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

@@ -11,6 +11,7 @@
     "test": "tsc --noEmit"
   },
   "dependencies": {
+    "@latticexyz/account-kit": "{{mud-version}}",
     "@latticexyz/common": "{{mud-version}}",
     "@latticexyz/dev-tools": "{{mud-version}}",
     "@latticexyz/react": "{{mud-version}}",
@@ -18,11 +19,14 @@
     "@latticexyz/store-sync": "{{mud-version}}",
     "@latticexyz/utils": "{{mud-version}}",
     "@latticexyz/world": "{{mud-version}}",
+    "@rainbow-me/rainbowkit": "^2.0.2",
+    "@tanstack/react-query": "^5.28.8",
     "contracts": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rxjs": "7.5.5",
-    "viem": "2.9.20"
+    "viem": "2.9.20",
+    "wagmi": "^2.8.0"
   },
   "devDependencies": {
     "@types/react": "18.2.22",

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

@@ -1,4 +1,5 @@
 import { useMUD } from "./MUDContext";
+import { AccountButton, useAppAccountClient } from "@latticexyz/account-kit";
 
 const styleUnset = { all: "unset" } as const;
 
@@ -7,6 +8,7 @@ export const App = () => {
     network: { tables, useStore },
     systemCalls: { addTask, toggleTask, deleteTask },
   } = useMUD();
+  const appAccountClient = useAppAccountClient();
 
   const tasks = useStore((state) => {
     const records = Object.values(state.getRecords(tables.Tasks));
@@ -16,90 +18,95 @@ export const App = () => {
 
   return (
     <>
-      <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;
+      <AccountButton />
+      <br />
+      <br />
+      {appAccountClient ? (
+        <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;
-                    }
-                  }}
-                />
+                      checkbox.disabled = true;
+                      try {
+                        await toggleTask(appAccountClient, 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(appAccountClient, task.key.id);
+                      } finally {
+                        button.disabled = false;
+                      }
+                    }}
+                  >
+                    &times;
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+          <tfoot>
+            <tr>
+              <td>
+                <input type="checkbox" disabled />
               </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) => {
+              <td colSpan={2}>
+                <form
+                  onSubmit={async (event) => {
                     event.preventDefault();
-                    if (!window.confirm("Are you sure you want to delete this task?")) return;
+                    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;
 
-                    const button = event.currentTarget;
-                    button.disabled = true;
+                    fieldset.disabled = true;
                     try {
-                      await deleteTask(task.key.id);
+                      await addTask(appAccountClient, desc);
+                      form.reset();
                     } finally {
-                      button.disabled = false;
+                      fieldset.disabled = false;
                     }
                   }}
                 >
-                  &times;
-                </button>
+                  <fieldset style={styleUnset}>
+                    <input type="text" name="description" />{" "}
+                    <button type="submit" title="Add task">
+                      Add
+                    </button>
+                  </fieldset>
+                </form>
               </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>
+          </tfoot>
+        </table>
+      ) : null}
     </>
   );
 };

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

@@ -1,8 +1,43 @@
+import "./polyfills";
+import "@rainbow-me/rainbowkit/styles.css";
 import ReactDOM from "react-dom/client";
 import { App } from "./App";
 import { setup } from "./mud/setup";
 import { MUDProvider } from "./MUDContext";
-import mudConfig from "contracts/mud.config";
+// import mudConfig from "contracts/mud.config";
+import { WagmiProvider, createConfig } from "wagmi";
+import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
+import { supportedChains } from "./mud/supportedChains";
+import { createClient, http } from "viem";
+import { getNetworkConfig } from "./mud/getNetworkConfig";
+import { RainbowKitProvider, lightTheme, midnightTheme } from "@rainbow-me/rainbowkit";
+import { AccountKitProvider } from "@latticexyz/account-kit";
+
+const queryClient = new QueryClient();
+
+const wagmiConfig = createConfig({
+  chains: supportedChains,
+  client: ({ chain }) =>
+    createClient({
+      chain,
+      // We intentionally don't use fallback+webSocket here because if a chain's RPC config
+      // doesn't include a `webSocket` entry, it doesn't seem to fallback and instead just
+      // ~never makes any requests and all queries seem to sit idle.
+      transport: http(),
+    }),
+});
+
+const rainbowKitTheme = {
+  lightMode: lightTheme({ borderRadius: "none" }),
+  darkMode: midnightTheme({ borderRadius: "none" }),
+} as const;
+
+const networkConfig = getNetworkConfig();
+const accountKitConfig = {
+  chainId: networkConfig.chain.id,
+  worldAddress: networkConfig.worldAddress,
+  erc4337: false,
+} as const;
 
 const rootElement = document.getElementById("react-root");
 if (!rootElement) throw new Error("React root not found");
@@ -11,24 +46,32 @@ 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>,
+    <WagmiProvider config={wagmiConfig}>
+      <QueryClientProvider client={queryClient}>
+        <RainbowKitProvider theme={rainbowKitTheme}>
+          <AccountKitProvider config={accountKitConfig}>
+            <MUDProvider value={result}>
+              <App />
+            </MUDProvider>
+          </AccountKitProvider>
+        </RainbowKitProvider>
+      </QueryClientProvider>
+    </WagmiProvider>,
   );
 
   // 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,
-    });
-  }
+  // 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

@@ -1,50 +1,46 @@
-/*
- * 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";
+import IWorldAbi from "contracts/out/IWorld.sol/IWorld.abi.json";
+import { AppAccountClient } from "@latticexyz/account-kit";
 
 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]);
+export function createSystemCalls({ tables, useStore, waitForTransaction, worldAddress }: SetupNetworkResult) {
+  const addTask = async (client: AppAccountClient, label: string) => {
+    const tx = await client.writeContract({
+      address: worldAddress,
+      abi: IWorldAbi,
+      functionName: "app__addTask",
+      args: [label],
+    });
     await waitForTransaction(tx);
   };
 
-  const toggleTask = async (id: Hex) => {
+  const toggleTask = async (client: AppAccountClient, 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 client.writeContract({
+          address: worldAddress,
+          abi: IWorldAbi,
+          functionName: "app__resetTask",
+          args: [id],
+        })
+      : await client.writeContract({
+          address: worldAddress,
+          abi: IWorldAbi,
+          functionName: "app__completeTask",
+          args: [id],
+        });
     await waitForTransaction(tx);
   };
 
-  const deleteTask = async (id: Hex) => {
-    const tx = await worldContract.write.app__deleteTask([id]);
+  const deleteTask = async (client: AppAccountClient, id: Hex) => {
+    const tx = await client.writeContract({
+      address: worldAddress,
+      abi: IWorldAbi,
+      functionName: "app__deleteTask",
+      args: [id],
+    });
     await waitForTransaction(tx);
   };
 

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

@@ -21,8 +21,9 @@ import worlds from "contracts/worlds.json";
  * The supported chains.
  */
 import { supportedChains } from "./supportedChains";
+import { Hex } from "viem";
 
-export async function getNetworkConfig() {
+export function getNetworkConfig() {
   const params = new URLSearchParams(window.location.search);
 
   /*
@@ -70,7 +71,7 @@ export async function getNetworkConfig() {
     privateKey: getBurnerPrivateKey(),
     chainId,
     chain,
-    worldAddress,
+    worldAddress: worldAddress as Hex,
     initialBlockNumber,
   };
 }

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

@@ -1,7 +1,3 @@
-/*
- * This file sets up all the definitions required for a MUD client.
- */
-
 import { createSystemCalls } from "./createSystemCalls";
 import { setupNetwork } from "./setupNetwork";
 

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

@@ -3,21 +3,10 @@
  * (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 { createPublicClient, fallback, webSocket, http, Hex, ClientConfig } 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 { transportObserver, ContractWrite } from "@latticexyz/common";
 import { Subject, share } from "rxjs";
 
 /*
@@ -33,7 +22,7 @@ import mudConfig from "contracts/mud.config";
 export type SetupNetworkResult = Awaited<ReturnType<typeof setupNetwork>>;
 
 export async function setupNetwork() {
-  const networkConfig = await getNetworkConfig();
+  const networkConfig = getNetworkConfig();
 
   /*
    * Create a viem public (read only) client
@@ -53,27 +42,6 @@ export async function setupNetwork() {
    */
   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
@@ -88,14 +56,13 @@ export async function setupNetwork() {
   });
 
   return {
+    ...networkConfig,
     tables,
     useStore,
     publicClient,
-    walletClient: burnerWalletClient,
     latestBlock$,
     storedBlockLogs$,
     waitForTransaction,
-    worldContract,
     write$: write$.asObservable().pipe(share()),
   };
 }

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

@@ -16,4 +16,4 @@ import { MUDChain, mudFoundry, redstone, garnet } from "@latticexyz/common/chain
  * See https://mud.dev/tutorials/minimal/deploy#run-the-user-interface
  * for instructions on how to add networks.
  */
-export const supportedChains: MUDChain[] = [mudFoundry, redstone, garnet];
+export const supportedChains: readonly [MUDChain, ...MUDChain[]] = [mudFoundry, redstone, garnet];

package/dist/templates/react/packages/client/src/polyfills.ts

@@ -0,0 +1,6 @@
+// See https://www.rainbowkit.com/docs/installation#vite
+
+window.global = window.global ?? window;
+window.process = window.process ?? { env: {} };
+
+export {};

package/dist/templates/react/packages/contracts/mud.config.ts

@@ -13,4 +13,11 @@ export default defineWorld({
       key: ["id"],
     },
   },
+  modules: [
+    {
+      artifactPath:
+        "@latticexyz/world-modules/out/Unstable_CallWithSignatureModule.sol/Unstable_CallWithSignatureModule.json",
+      root: true,
+    },
+  ],
 });

package/dist/templates/react/packages/contracts/worlds.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-mud",
-  "version": "2.0.12",
+  "version": "2.0.13-account-kit-957ab7d69",
   "description": "Create a new MUD project",
   "license": "MIT",
   "author": "Lattice <mud@lattice.xyz>",