create-mud 2.2.17-78e9ed1294db2e924bd295734f3738bdd2786242 → 2.2.17-7c3df691b30f031202ab184345cbb76bb113c2cd

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

@@ -1,29 +1,74 @@
-import { useComponentValue } from "@latticexyz/react";
-import { useMUD } from "./MUDContext";
-import { singletonEntity } from "@latticexyz/store-sync/recs";
+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 const App = () => {
-  const {
-    components: { Counter },
-    systemCalls: { increment },
-  } = useMUD();
+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 counter = useComponentValue(Counter, singletonEntity);
+  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>
-        Counter: <span>{counter?.value ?? "??"}</span>
+      <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>
-      <button
-        type="button"
-        onClick={async (event) => {
-          event.preventDefault();
-          console.log("new counter value:", await increment());
-        }}
-      >
-        Increment
-      </button>
     </>
   );
-};
+}

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

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

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

@@ -0,0 +1,112 @@
+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/game/useKeyboardMovement.ts

@@ -0,0 +1,26 @@
+import { useEffect } from "react";
+import { Direction } from "../common";
+
+const keys = new Map<KeyboardEvent["key"], Direction>([
+  ["ArrowUp", "North"],
+  ["ArrowRight", "East"],
+  ["ArrowDown", "South"],
+  ["ArrowLeft", "West"],
+]);
+
+export const useKeyboardMovement = (move: undefined | ((direction: Direction) => void)) => {
+  useEffect(() => {
+    if (!move) return;
+
+    const listener = (event: KeyboardEvent) => {
+      const direction = keys.get(event.key);
+      if (direction == null) return;
+
+      event.preventDefault();
+      move(direction);
+    };
+
+    window.addEventListener("keydown", listener);
+    return () => window.removeEventListener("keydown", listener);
+  }, [move]);
+};

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

@@ -1,34 +1,19 @@
-import ReactDOM from "react-dom/client";
+import "tailwindcss/tailwind.css";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { Providers } from "./Providers";
 import { App } from "./App";
-import { setup } from "./mud/setup";
-import { MUDProvider } from "./MUDContext";
-import mudConfig from "contracts/mud.config";
+import { Explorer } from "./mud/Explorer";
+import { ErrorBoundary } from "react-error-boundary";
+import { ErrorFallback } from "./ui/ErrorFallback";
 
-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
-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$,
-      recsWorld: result.network.world,
-    });
-  }
-});
+createRoot(document.getElementById("react-root")!).render(
+  <StrictMode>
+    <ErrorBoundary FallbackComponent={ErrorFallback}>
+      <Providers>
+        <App />
+        <Explorer />
+      </Providers>
+    </ErrorBoundary>
+  </StrictMode>,
+);

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

@@ -0,0 +1,32 @@
+import { useState } from "react";
+import { getChain, getWorldAddress } from "../common";
+import { MUDIcon } from "../ui/icons/MUDIcon";
+
+export function Explorer() {
+  const [open, setOpen] = useState(false);
+
+  const chain = getChain();
+  const worldAddress = getWorldAddress();
+
+  const explorerUrl = chain.blockExplorers?.worldsExplorer?.url;
+  if (!explorerUrl) return null;
+
+  return (
+    <div className="fixed bottom-0 inset-x-0 flex flex-col opacity-80 transition hover:opacity-100">
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        className="outline-none flex justify-end gap-2 p-2 font-medium leading-none text-black"
+      >
+        {open ? (
+          <>Close</>
+        ) : (
+          <>
+            Explore <MUDIcon className="text-orange-500" />
+          </>
+        )}
+      </button>
+      {open ? <iframe src={`${explorerUrl}/${worldAddress}`} className="bg-black h-[50vh]" /> : null}
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,17 @@
+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/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-ecs/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-ecs/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-ecs/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-ecs/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-ecs/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,
+  },
+});