create-mud 2.2.17-f1d5432fe2c9abb19fa378f790217e67d6dd8504 → 2.2.17-f88e48e47ceb4a29a3862a3f3b85891490952f0e

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

@@ -1,44 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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/contracts/.env

@@ -1,11 +0,0 @@
-# This .env file is for demonstration purposes only.
-#
-# This should usually be excluded via .gitignore and the env vars attached to
-# your deployment environment, but we're including this here for ease of local
-# development. Please do not commit changes to this file!
-#
-# Enable debug logs for MUD CLI
-DEBUG=mud:*
-#
-# Anvil default private key
-PRIVATE_KEY=0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80

package/templates/react/packages/contracts/test/WorldTest.t.sol

@@ -1,16 +0,0 @@
-// SPDX-License-Identifier: MIT
-pragma solidity >=0.8.24;
-
-import "forge-std/Test.sol";
-import { MudTest } from "@latticexyz/world/test/MudTest.t.sol";
-
-contract WorldTest is MudTest {
-  function testWorldDeployed() public {
-    uint256 codeSize;
-    address addr = worldAddress;
-    assembly {
-      codeSize := extcodesize(addr)
-    }
-    assertTrue(codeSize > 0);
-  }
-}

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

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

package/templates/react-ecs/packages/client/src/App.tsx

@@ -1,74 +0,0 @@
-import { AccountButton } from "@latticexyz/entrykit/internal";
-import { Direction, Entity } 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";
-import { components } from "./mud/recs";
-import { useEntityQuery } from "@latticexyz/react";
-import { Has, getComponentValueStrict } from "@latticexyz/recs";
-import { Address } from "viem";
-
-export function App() {
-  const playerEntities = useEntityQuery([Has(components.Owner), Has(components.Position)]);
-  const players = useMemo(
-    () =>
-      playerEntities.map((entity) => {
-        const owner = getComponentValueStrict(components.Owner, entity);
-        const position = getComponentValueStrict(components.Position, entity);
-        return {
-          entity: entity as Entity,
-          owner: owner.owner as Address,
-          x: position.x,
-          y: position.y,
-        };
-      }),
-    [playerEntities],
-  );
-
-  const sync = useSync();
-  const worldContract = useWorldContract();
-
-  const onMove = useMemo(
-    () =>
-      sync.data && worldContract
-        ? async (entity: Entity, direction: Direction) => {
-            const tx = await worldContract.write.app__move([entity, mudConfig.enums.Direction.indexOf(direction)]);
-            await sync.data.waitForTransaction(tx);
-          }
-        : undefined,
-    [sync.data, worldContract],
-  );
-
-  const onSpawn = useMemo(
-    () =>
-      sync.data && worldContract
-        ? async () => {
-            const tx = await worldContract.write.app__spawn();
-            await sync.data.waitForTransaction(tx);
-          }
-        : undefined,
-    [sync.data, worldContract],
-  );
-
-  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} onSpawn={onSpawn} />
-        </Synced>
-      </div>
-      <div className="fixed top-2 right-2">
-        <AccountButton />
-      </div>
-    </>
-  );
-}

package/templates/react-ecs/packages/client/src/Providers.tsx

@@ -1,29 +0,0 @@
-import { WagmiProvider } from "wagmi";
-import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
-import { ReactNode } from "react";
-import { SyncProvider } from "@latticexyz/store-sync/react";
-import { defineConfig, EntryKitProvider } from "@latticexyz/entrykit/internal";
-import { wagmiConfig } from "./wagmiConfig";
-import { chainId, getWorldAddress, startBlock } from "./common";
-import { syncAdapter } from "./mud/recs";
-
-const queryClient = new QueryClient();
-
-export type Props = {
-  children: ReactNode;
-};
-
-export function Providers({ children }: Props) {
-  const worldAddress = getWorldAddress();
-  return (
-    <WagmiProvider config={wagmiConfig}>
-      <QueryClientProvider client={queryClient}>
-        <EntryKitProvider config={defineConfig({ chainId, worldAddress })}>
-          <SyncProvider chainId={chainId} address={worldAddress} startBlock={startBlock} adapter={syncAdapter}>
-            {children}
-          </SyncProvider>
-        </EntryKitProvider>
-      </QueryClientProvider>
-    </WagmiProvider>
-  );
-}

package/templates/react-ecs/packages/client/src/common.ts

@@ -1,27 +0,0 @@
-import mudConfig from "contracts/mud.config";
-import { chains } from "./wagmiConfig";
-import { Chain, Hex } from "viem";
-
-export const chainId = import.meta.env.CHAIN_ID;
-export const worldAddress = import.meta.env.WORLD_ADDRESS;
-export const startBlock = import.meta.env.START_BLOCK;
-
-export const url = new URL(window.location.href);
-
-export type Entity = Hex;
-export type Direction = (typeof mudConfig.enums.Direction)[number];
-
-export function getWorldAddress() {
-  if (!worldAddress) {
-    throw new Error("No world address configured. Is the world still deploying?");
-  }
-  return worldAddress;
-}
-
-export function getChain(): Chain {
-  const chain = chains.find((c) => c.id === chainId);
-  if (!chain) {
-    throw new Error(`No chain configured for chain ID ${chainId}.`);
-  }
-  return chain;
-}

package/templates/react-ecs/packages/client/src/game/GameMap.tsx

@@ -1,112 +0,0 @@
-import { serialize, useAccount } from "wagmi";
-import { useKeyboardMovement } from "./useKeyboardMovement";
-import { Address, Hex, hexToBigInt, keccak256 } from "viem";
-import { ArrowDownIcon } from "../ui/icons/ArrowDownIcon";
-import { twMerge } from "tailwind-merge";
-import { Direction, Entity } from "../common";
-import mudConfig from "contracts/mud.config";
-import { AsyncButton } from "../ui/AsyncButton";
-import { useAccountModal } from "@latticexyz/entrykit/internal";
-import { useMemo } from "react";
-
-export type Props = {
-  readonly players?: {
-    readonly entity: Entity;
-    readonly owner: Address;
-    readonly x: number;
-    readonly y: number;
-  }[];
-  readonly onMove?: (entity: Entity, direction: Direction) => Promise<void>;
-  readonly onSpawn?: () => Promise<void>;
-};
-
-const size = 40;
-const scale = 100 / size;
-
-function getColorAngle(seed: Hex) {
-  return Number(hexToBigInt(keccak256(seed)) % 360n);
-}
-
-const rotateClassName = {
-  North: "rotate-0",
-  East: "rotate-90",
-  South: "rotate-180",
-  West: "-rotate-90",
-} as const satisfies Record<Direction, `${"" | "-"}rotate-${number}`>;
-
-export function GameMap({ players = [], onMove, onSpawn }: Props) {
-  const { openAccountModal } = useAccountModal();
-  const { address: userAddress } = useAccount();
-
-  const currentPlayer = players.find((player) => player.owner.toLowerCase() === userAddress?.toLowerCase());
-
-  useKeyboardMovement(
-    useMemo(
-      () => (onMove && currentPlayer ? (direction: Direction) => onMove(currentPlayer.entity, direction) : undefined),
-      [currentPlayer, onMove],
-    ),
-  );
-
-  return (
-    <div className="aspect-square w-full max-w-[40rem]">
-      <div className="relative w-full h-full border-8 border-black/10">
-        {currentPlayer && onMove
-          ? mudConfig.enums.Direction.map((direction) => (
-              <button
-                key={direction}
-                title={`Move ${direction.toLowerCase()}`}
-                className={twMerge(
-                  "outline-0 absolute inset-0 cursor-pointer grid p-4",
-                  rotateClassName[direction],
-                  "transition bg-gradient-to-t from-transparent via-transparent to-blue-50 text-blue-400 opacity-0 hover:opacity-40 active:opacity-100",
-                )}
-                style={{ clipPath: "polygon(0% 0%, 100% 0%, 50% 50%)" }}
-                onClick={() => onMove(currentPlayer.entity, direction)}
-              >
-                <ArrowDownIcon className="rotate-180 text-4xl self-start justify-self-center" />
-              </button>
-            ))
-          : null}
-
-        {players.map((player) => (
-          <div
-            key={player.entity}
-            className="absolute bg-current"
-            style={{
-              color: `hwb(${getColorAngle(player.owner)} 40% 20%)`,
-              width: `${scale}%`,
-              height: `${scale}%`,
-              left: `${((((player.x + size / 2) % size) + size) % size) * scale}%`,
-              top: `${((size - ((player.y + size / 2) % size)) % size) * scale}%`,
-            }}
-            title={serialize(player, null, 2)}
-          >
-            {player === currentPlayer ? <div className="w-full h-full bg-current animate-ping opacity-50" /> : null}
-          </div>
-        ))}
-
-        {!currentPlayer ? (
-          onSpawn ? (
-            <div className="absolute inset-0 grid place-items-center">
-              <AsyncButton
-                className="group outline-0 p-4 border-4 border-green-400 transition ring-green-300 hover:ring-4 active:scale-95 rounded-lg text-lg font-medium aria-busy:pointer-events-none aria-busy:animate-pulse"
-                onClick={() => onSpawn()}
-              >
-                Spawn<span className="hidden group-aria-busy:inline">ing…</span>
-              </AsyncButton>
-            </div>
-          ) : (
-            <div className="absolute inset-0 grid place-items-center">
-              <button
-                className="group outline-0 p-4 border-4 border-green-400 transition ring-green-300 hover:ring-4 active:scale-95 rounded-lg text-lg font-medium aria-busy:pointer-events-none aria-busy:animate-pulse"
-                onClick={openAccountModal}
-              >
-                Sign in to play
-              </button>
-            </div>
-          )
-        ) : null}
-      </div>
-    </div>
-  );
-}

package/templates/react-ecs/packages/client/src/mud/Synced.tsx

@@ -1,14 +0,0 @@
-import { ReactNode } from "react";
-import { useSyncStatus } from "./useSyncStatus";
-import { ComponentValue } from "@latticexyz/recs";
-import { components } from "./recs";
-
-export type Props = {
-  children: ReactNode;
-  fallback?: (props: ComponentValue<(typeof components)["SyncProgress"]["schema"]>) => ReactNode;
-};
-
-export function Synced({ children, fallback }: Props) {
-  const status = useSyncStatus();
-  return status.isLive ? children : fallback?.(status);
-}

package/templates/react-ecs/packages/client/src/mud/recs.ts

@@ -1,6 +0,0 @@
-import { createWorld } from "@latticexyz/recs";
-import { createSyncAdapter } from "@latticexyz/store-sync/recs";
-import config from "contracts/mud.config";
-
-export const world = createWorld();
-export const { syncAdapter, components } = createSyncAdapter({ world, config });

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

@@ -1,17 +0,0 @@
-import { initialProgress } from "@latticexyz/store-sync/internal";
-import { SyncStep } from "@latticexyz/store-sync";
-import { useMemo } from "react";
-import { useComponentValue } from "@latticexyz/react";
-import { singletonEntity } from "@latticexyz/store-sync/recs";
-import { components } from "./recs";
-
-export function useSyncStatus() {
-  const progress = useComponentValue(components.SyncProgress, singletonEntity, initialProgress);
-  return useMemo(
-    () => ({
-      ...progress,
-      isLive: progress.step === SyncStep.LIVE,
-    }),
-    [progress],
-  );
-}

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

@@ -1,25 +0,0 @@
-import { defineWorld } from "@latticexyz/world";
-
-export default defineWorld({
-  namespace: "app",
-  userTypes: {
-    Entity: { type: "bytes32", filePath: "./src/Entity.sol" },
-  },
-  enums: {
-    Direction: ["North", "East", "South", "West"],
-  },
-  tables: {
-    // singletons
-    EntityCount: { schema: { count: "uint256" }, key: [] },
-    // components
-    Owner: { id: "Entity", owner: "address" },
-    Position: { id: "Entity", x: "int32", y: "int32" },
-  },
-  modules: [
-    {
-      artifactPath:
-        "@latticexyz/world-modules/out/Unstable_CallWithSignatureModule.sol/Unstable_CallWithSignatureModule.json",
-      root: true,
-    },
-  ],
-});