create-mud 2.2.17-d252fd65ce1e5a2085d1a43ba02df7e985d90aa5 → 2.2.17-d5f4e1e44bbc260ff21dacdfab0e0f8389e9f304

package/templates/react/packages/client/src/mud/useSyncStatus.ts

@@ -0,0 +1,21 @@
+import { stash } from "./stash";
+import { initialProgress, SyncProgress } from "@latticexyz/store-sync/internal";
+import { SyncStep } from "@latticexyz/store-sync";
+import { useMemo } from "react";
+import { useRecord } from "@latticexyz/stash/react";
+
+export function useSyncStatus() {
+  const progress = useRecord({
+    stash,
+    table: SyncProgress,
+    key: {},
+    defaultValue: initialProgress,
+  });
+  return useMemo(
+    () => ({
+      ...progress,
+      isLive: progress.step === SyncStep.LIVE,
+    }),
+    [progress],
+  );
+}

package/templates/react/packages/client/src/mud/useWorldContract.ts

@@ -0,0 +1,44 @@
+import { useClient } from "wagmi";
+import { chainId, getWorldAddress } from "../common";
+import { Account, Chain, Client, GetContractReturnType, Transport, getContract } from "viem";
+import { useQuery } from "@tanstack/react-query";
+import { useSessionClient } from "@latticexyz/entrykit/internal";
+import { observer } from "@latticexyz/explorer/observer";
+import worldAbi from "contracts/out/IWorld.sol/IWorld.abi.json";
+
+export function useWorldContract():
+  | GetContractReturnType<
+      typeof worldAbi,
+      {
+        public: Client<Transport, Chain>;
+        wallet: Client<Transport, Chain, Account>;
+      }
+    >
+  | undefined {
+  const client = useClient({ chainId });
+  const { data: sessionClient } = useSessionClient();
+
+  const { data: worldContract } = useQuery({
+    queryKey: ["worldContract", client?.uid, sessionClient?.uid],
+    queryFn: () => {
+      if (!client || !sessionClient) {
+        throw new Error("Not connected.");
+      }
+
+      return getContract({
+        abi: worldAbi,
+        address: getWorldAddress(),
+        client: {
+          public: client,
+          wallet: sessionClient.extend(observer()),
+        },
+      });
+    },
+    staleTime: Infinity,
+    refetchOnMount: false,
+    refetchOnReconnect: false,
+    refetchOnWindowFocus: false,
+  });
+
+  return worldContract;
+}

package/templates/react/packages/client/src/ui/AsyncButton.tsx

@@ -0,0 +1,41 @@
+import { DetailedHTMLProps, ButtonHTMLAttributes, useState, useRef, useCallback, MouseEventHandler } from "react";
+
+export type AsyncButtonProps = {
+  pending?: boolean;
+};
+
+export type Props = AsyncButtonProps & DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+
+export const AsyncButton = ({ pending, type, disabled, onClick, ...props }: Props) => {
+  // TODO: move all this logic into a hook so we can wrap other event handlers
+
+  const promiseRef = useRef<Promise<unknown>>();
+  const [promisePending, setPromisePending] = useState<true | undefined>(undefined);
+
+  const asyncOnClick = useCallback<MouseEventHandler<HTMLButtonElement>>(
+    (...args) => {
+      if (!onClick) return;
+      const result = onClick(...args);
+      const promise = Promise.resolve(result);
+      promiseRef.current = promise;
+      setPromisePending(true);
+      promise.finally(() => {
+        if (promiseRef.current === promise) {
+          setPromisePending(undefined);
+        }
+      });
+    },
+    [onClick],
+  );
+
+  return (
+    <button
+      type={type || "button"}
+      aria-busy={pending || promisePending}
+      aria-disabled={disabled}
+      disabled={disabled || pending || promisePending}
+      onClick={onClick ? asyncOnClick : undefined}
+      {...props}
+    />
+  );
+};

package/templates/react/packages/client/src/ui/ErrorFallback.tsx

@@ -0,0 +1,58 @@
+import { wait } from "@latticexyz/common/utils";
+import { useEffect, useRef, useState } from "react";
+import { FallbackProps } from "react-error-boundary";
+
+export function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
+  const when = new Date();
+  const isMounted = useRef(false);
+  const [retries, setRetries] = useState(1);
+
+  useEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  });
+
+  return (
+    <div className="fixed inset-0 overflow-auto bg-red-50">
+      <div className="w-full max-w-screen-md mx-auto py-16 px-8 space-y-12">
+        <h1 className="text-4xl font-black text-red-500">Oops! It broke :(</h1>
+        <div className="space-y-6">
+          <div className="relative">
+            <div className="p-6 bg-red-100 border-l-8 -ml-[8px] border-red-500 font-semibold whitespace-pre-wrap">
+              {error instanceof Error ? error.message : String(error)}
+            </div>
+            {error instanceof Error && error.stack ? (
+              <div className="p-6 bg-white font-mono text-sm overflow-auto whitespace-pre">{error.stack}</div>
+            ) : null}
+            <div className="absolute top-full right-0 text-sm text-stone-400" title={when.toISOString()}>
+              {when.toLocaleString()}
+            </div>
+          </div>
+
+          {retries > 0 ? (
+            <button
+              type="button"
+              className="group bg-red-500 text-white px-4 py-2 rounded-md hover:bg-red-600 active:bg-red-700 transition aria-busy:pointer-events-none aria-busy:animate-pulse"
+              onClick={async (event) => {
+                // if we retry and the same error occurs, it'll look like the button click did nothing
+                // so we'll fake a pending state here to give users an indication something is happening
+                event.currentTarget.ariaBusy = "true";
+                await wait(1000);
+                resetErrorBoundary();
+                if (isMounted.current) {
+                  setRetries((value) => value - 1);
+                  event.currentTarget.ariaBusy = null;
+                }
+              }}
+            >
+              <span className="group-aria-busy:hidden">Retry?</span>
+              <span className="hidden group-aria-busy:inline">Retrying…</span>
+            </button>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/react/packages/client/src/ui/icons/ArrowDownIcon.tsx

@@ -0,0 +1,22 @@
+import { DetailedHTMLProps, SVGAttributes } from "react";
+import { twMerge } from "tailwind-merge";
+
+export type Props = DetailedHTMLProps<SVGAttributes<SVGSVGElement>, SVGSVGElement>;
+
+export function ArrowDownIcon({ className, ...props }: Props) {
+  return (
+    <svg
+      className={twMerge("h-[1em] w-[1em]", className)}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        d="M8 2a.75.75 0 0 1 .75.75v8.69l3.22-3.22a.75.75 0 1 1 1.06 1.06l-4.5 4.5a.75.75 0 0 1-1.06 0l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.22 3.22V2.75A.75.75 0 0 1 8 2Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}

package/templates/react/packages/client/src/ui/icons/MUDIcon.tsx

@@ -0,0 +1,25 @@
+import { DetailedHTMLProps, SVGAttributes } from "react";
+import { twMerge } from "tailwind-merge";
+
+export type Props = DetailedHTMLProps<SVGAttributes<SVGSVGElement>, SVGSVGElement>;
+
+export function MUDIcon({ className, ...props }: Props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 8 8"
+      fill="currentColor"
+      shapeRendering="crispEdges"
+      className={twMerge("-my-[0.125em] h-[1.25em] w-[1.25em]", className)}
+      {...props}
+    >
+      {/* eslint-disable-next-line max-len */}
+      <path d="M0 0h1v1H0zm0 1h1v1H0zm0 1h1v1H0zm0 1h1v1H0zm0 1h1v1H0zm0 1h1v1H0zm0 1h1v1H0zm0 1h1v1H0zm1 0h1v1H1zm1 0h1v1H2zm1 0h1v1H3zm1 0h1v1H4zm1 0h1v1H5zm2-1h1v1H7zm0 1h1v1H7zM6 7h1v1H6zm1-2h1v1H7zm0-1h1v1H7zm0-1h1v1H7z" />
+      <path
+        d="M2 2h1v1H2zm0 1h1v1H2zm0 1h1v1H2zm0 1h1v1H2zm1-3h1v1H3zm1 0h1v1H4zm1 0h1v1H5zm0 1h1v1H5zm0 1h1v1H5zm0 1h1v1H5zM4 5h1v1H4zM3 5h1v1H3z"
+        opacity=".5"
+      />
+      <path d="M7 2h1v1H7zm0-1h1v1H7zM1 0h1v1H1zm1 0h1v1H2zm1 0h1v1H3zm1 0h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7z" />
+    </svg>
+  );
+}

package/templates/react/packages/client/src/wagmiConfig.ts

@@ -0,0 +1,49 @@
+import { Chain, http, webSocket } from "viem";
+import { anvil } from "viem/chains";
+import { createWagmiConfig } from "@latticexyz/entrykit/internal";
+import { rhodolite, garnet, redstone } from "@latticexyz/common/chains";
+import { chainId } from "./common";
+
+export const chains = [
+  redstone,
+  garnet,
+  rhodolite,
+  {
+    ...anvil,
+    contracts: {
+      ...anvil.contracts,
+      paymaster: {
+        address: "0xf03E61E7421c43D9068Ca562882E98d1be0a6b6e",
+      },
+    },
+    blockExplorers: {
+      default: {} as never,
+      worldsExplorer: {
+        name: "MUD Worlds Explorer",
+        url: "http://localhost:13690/anvil/worlds",
+      },
+    },
+  },
+] as const satisfies Chain[];
+
+export const transports = {
+  [anvil.id]: webSocket(),
+  [garnet.id]: http(),
+  [rhodolite.id]: http(),
+  [redstone.id]: http(),
+} as const;
+
+export const wagmiConfig = createWagmiConfig({
+  chainId,
+  // TODO: swap this with another default project ID or leave empty
+  walletConnectProjectId: "14ce88fdbc0f9c294e26ec9b4d848e44",
+  appName: document.title,
+  chains,
+  transports,
+  pollingInterval: {
+    [anvil.id]: 2000,
+    [garnet.id]: 2000,
+    [rhodolite.id]: 2000,
+    [redstone.id]: 2000,
+  },
+});

package/templates/react/packages/client/tailwind.config.ts

@@ -0,0 +1,10 @@
+import { Config } from "tailwindcss/types/config";
+
+export default {
+  content: ["./**/*.{html,js,jsx,ts,tsx}", "!./node_modules"],
+  theme: {},
+  plugins: [],
+  future: {
+    hoverOnlyWhenSupported: true,
+  },
+} satisfies Config;

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

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

package/templates/react/packages/client/vite.config.ts

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

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

@@ -2,15 +2,20 @@ import { defineWorld } from "@latticexyz/world";
 
 export default defineWorld({
   namespace: "app",
+  enums: {
+    Direction: ["North", "East", "South", "West"],
+  },
   tables: {
-    Tasks: {
-      schema: {
-        id: "bytes32",
-        createdAt: "uint256",
-        completedAt: "uint256",
-        description: "string",
-      },
-      key: ["id"],
+    Position: {
+      schema: { player: "address", x: "int32", y: "int32" },
+      key: ["player"],
     },
   },
+  modules: [
+    {
+      artifactPath:
+        "@latticexyz/world-modules/out/Unstable_CallWithSignatureModule.sol/Unstable_CallWithSignatureModule.json",
+      root: true,
+    },
+  ],
 });