npm - create-mud - Versions diffs - 2.0.0-alpha.1.21 → 2.0.0-alpha.1.211 - Mend

create-mud 2.0.0-alpha.1.21 → 2.0.0-alpha.1.211

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (229) hide show

package/dist/templates/threejs/.gitignore ADDED Viewed

	@@ -0,0 +1 @@
1	+ node_modules

package/dist/templates/threejs/.vscode/extensions.json ADDED Viewed

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["JuanBlanco.solidity"]
+}

package/dist/templates/threejs/.vscode/settings.json ADDED Viewed

@@ -0,0 +1,3 @@
+{
+  "solidity.monoRepoSupport": true
+}

package/dist/templates/threejs/package.json ADDED Viewed

@@ -0,0 +1,28 @@
+{
+  "name": "mud-template-threejs",
+  "private": true,
+  "scripts": {
+    "build": "pnpm recursive run build",
+    "dev": "concurrently -n contracts,client -c cyan,magenta \"cd packages/contracts && pnpm run dev\" \"cd packages/client && pnpm run dev\"",
+    "dev:client": "pnpm --filter 'client' run dev",
+    "dev:contracts": "pnpm --filter 'contracts' dev",
+    "foundry:up": "curl -L https://foundry.paradigm.xyz | bash && bash $HOME/.foundry/bin/foundryup",
+    "initialize": "pnpm recursive run initialize",
+    "mud:up": "pnpm recursive exec mud set-version -v canary && pnpm install",
+    "prepare": "(forge --version || pnpm foundry:up)",
+    "test": "pnpm recursive run test"
+  },
+  "devDependencies": {
+    "@latticexyz/cli": "{{mud-version}}",
+    "@typescript-eslint/eslint-plugin": "5.46.1",
+    "@typescript-eslint/parser": "5.46.1",
+    "concurrently": "^8.0.1",
+    "eslint": "8.29.0",
+    "rimraf": "^3.0.2",
+    "typescript": "^4.9.5"
+  },
+  "engines": {
+    "node": "18.x",
+    "pnpm": "8.x"
+  }
+}

package/dist/templates/threejs/packages/client/.env ADDED Viewed

	@@ -0,0 +1 @@
1	+ VITE_CHAIN_ID=31337

package/dist/templates/threejs/packages/client/.eslintrc ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "extends": ["../../.eslintrc", "plugin:react/recommended", "plugin:react-hooks/recommended"],
+  "plugins": ["react", "react-hooks"],
+  "rules": {
+    "react/react-in-jsx-scope": "off"
+  }
+}

package/dist/templates/threejs/packages/client/.gitignore ADDED Viewed

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

package/dist/templates/threejs/packages/client/index.html ADDED Viewed

@@ -0,0 +1,12 @@
+<!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>
+  </head>
+  <body>
+    <div id="react-root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

package/dist/templates/threejs/packages/client/package.json ADDED Viewed

@@ -0,0 +1,41 @@
+{
+  "name": "client",
+  "version": "0.0.0",
+  "private": true,
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "dev": "wait-port localhost:8545 && vite",
+    "initialize": "pnpm build",
+    "preview": "vite preview",
+    "test": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@ethersproject/providers": "^5.7.2",
+    "@latticexyz/common": "{{mud-version}}",
+    "@latticexyz/dev-tools": "{{mud-version}}",
+    "@latticexyz/network": "{{mud-version}}",
+    "@latticexyz/react": "{{mud-version}}",
+    "@latticexyz/recs": "{{mud-version}}",
+    "@latticexyz/schema-type": "{{mud-version}}",
+    "@latticexyz/std-client": "{{mud-version}}",
+    "@latticexyz/utils": "{{mud-version}}",
+    "@latticexyz/world": "{{mud-version}}",
+    "@react-three/fiber": "^8.12.0",
+    "@wagmi/chains": "^0.2.22",
+    "contracts": "workspace:*",
+    "ethers": "^5.7.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.6",
+    "@types/react-dom": "^18.2.4",
+    "@vitejs/plugin-react": "^3.1.0",
+    "eslint-plugin-react": "7.31.11",
+    "eslint-plugin-react-hooks": "4.6.0",
+    "vite": "^4.2.1",
+    "wait-port": "^1.0.4"
+  }
+}

package/dist/templates/threejs/packages/client/src/App.tsx ADDED Viewed

@@ -0,0 +1,81 @@
+import React from "react";
+import { Canvas, Color, ThreeElements, useThree } from "@react-three/fiber";
+import { useComponentValue, useEntityQuery } from "@latticexyz/react";
+import { getComponentValueStrict, Has } from "@latticexyz/recs";
+import { useMUD } from "./MUDContext";
+import { useKeyboardMovement } from "./useKeyboardMovement";
+const Plane = (props: ThreeElements["mesh"]) => {
+  return (
+    <mesh {...props}>
+      {/* eslint-disable-next-line react/no-unknown-property */}
+      <boxGeometry args={[10, 5, 10]} />
+      <meshStandardMaterial color="green" />
+    </mesh>
+  );
+};
+const Player = (props: ThreeElements["mesh"] & { color: Color }) => {
+  return (
+    <mesh {...props}>
+      {/* eslint-disable-next-line react/no-unknown-property */}
+      <boxGeometry args={[1, 2, 1]} />
+      <meshStandardMaterial color={props.color} />
+    </mesh>
+  );
+};
+const Scene = () => {
+  const {
+    components: { Position },
+    network: { playerEntity },
+  } = useMUD();
+  useKeyboardMovement();
+  const playerPosition = useComponentValue(Position, playerEntity);
+  const players = useEntityQuery([Has(Position)]).map((entity) => {
+    const position = getComponentValueStrict(Position, entity);
+    return {
+      entity,
+      position,
+    };
+  });
+  useThree(({ camera }) => {
+    if (playerPosition) {
+      camera.position.set(playerPosition.x - 5, playerPosition.y + 5, playerPosition.z + 5);
+    } else {
+      camera.position.set(-5, 5, 5);
+    }
+    camera.rotation.order = "YXZ";
+    camera.rotation.y = -Math.PI / 4;
+    camera.rotation.x = Math.atan(-1 / Math.sqrt(2));
+  });
+  return (
+    <group>
+      <ambientLight />
+      {/* eslint-disable-next-line react/no-unknown-property */}
+      <pointLight position={[10, 10, 10]} />
+      <Plane position={[0, -5, 0]} />
+      {players.map((p, i) => (
+        <Player
+          key={i}
+          color={Math.floor(parseInt(p.entity) * 123456) % 16777215}
+          position={[p.position.x, p.position.y, p.position.z]}
+        />
+      ))}
+    </group>
+  );
+};
+const styles = { height: "100vh" };
+export const App = () => {
+  return (
+    <Canvas style={styles}>
+      <Scene />
+    </Canvas>
+  );
+};

package/dist/templates/threejs/packages/client/src/MUDContext.tsx ADDED Viewed

@@ -0,0 +1,21 @@
+import { createContext, ReactNode, useContext } from "react";
+import { SetupResult } from "./mud/setup";
+const MUDContext = createContext<SetupResult | null>(null);
+type Props = {
+  children: ReactNode;
+  value: SetupResult;
+};
+export const MUDProvider = ({ children, value }: Props) => {
+  const currentValue = useContext(MUDContext);
+  if (currentValue) throw new Error("MUDProvider can only be used once");
+  return <MUDContext.Provider value={value}>{children}</MUDContext.Provider>;
+};
+export const useMUD = () => {
+  const value = useContext(MUDContext);
+  if (!value) throw new Error("Must be used within a MUDProvider");
+  return value;
+};

package/dist/templates/threejs/packages/client/src/index.tsx ADDED Viewed

@@ -0,0 +1,19 @@
+import ReactDOM from "react-dom/client";
+import { mount as mountDevTools } from "@latticexyz/dev-tools";
+import { App } from "./App";
+import { setup } from "./mud/setup";
+import { MUDProvider } from "./MUDContext";
+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((result) => {
+  root.render(
+    <MUDProvider value={result}>
+      <App />
+    </MUDProvider>
+  );
+  mountDevTools();
+});

package/dist/templates/threejs/packages/client/src/mud/contractComponents.ts ADDED Viewed

@@ -0,0 +1,26 @@
+/* Autogenerated file. Do not edit manually. */
+import { TableId } from "@latticexyz/utils";
+import { defineComponent, Type as RecsType, World } from "@latticexyz/recs";
+export function defineContractComponents(world: World) {
+  return {
+    Position: (() => {
+      const tableId = new TableId("", "Position");
+      return defineComponent(
+        world,
+        {
+          x: RecsType.Number,
+          y: RecsType.Number,
+          z: RecsType.Number,
+        },
+        {
+          metadata: {
+            contractId: tableId.toHexString(),
+            tableId: tableId.toString(),
+          },
+        }
+      );
+    })(),
+  };
+}

package/dist/templates/threejs/packages/client/src/mud/createClientComponents.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import { SetupNetworkResult } from "./setupNetwork";
+export type ClientComponents = ReturnType<typeof createClientComponents>;
+export function createClientComponents({ components }: SetupNetworkResult) {
+  return {
+    ...components,
+    // add your client components or overrides here
+  };
+}

package/dist/templates/threejs/packages/client/src/mud/createSystemCalls.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import { awaitStreamValue } from "@latticexyz/utils";
+import { SetupNetworkResult } from "./setupNetwork";
+export type SystemCalls = ReturnType<typeof createSystemCalls>;
+export function createSystemCalls({ worldSend, txReduced$ }: SetupNetworkResult) {
+  const move = async (x: number, y: number, z: number) => {
+    const tx = await worldSend("move", [x, y, z]);
+    await awaitStreamValue(txReduced$, (txHash) => txHash === tx.hash);
+  };
+  return {
+    move,
+  };
+}

package/dist/templates/threejs/packages/client/src/mud/getNetworkConfig.ts ADDED Viewed

@@ -0,0 +1,53 @@
+import { SetupContractConfig, getBurnerWallet } from "@latticexyz/std-client";
+import worldsJson from "contracts/worlds.json";
+import { supportedChains } from "./supportedChains";
+const worlds = worldsJson as Partial<Record<string, { address: string; blockNumber?: number }>>;
+type NetworkConfig = SetupContractConfig & {
+  privateKey: string;
+  faucetServiceUrl?: string;
+  snapSync?: boolean;
+};
+export async function getNetworkConfig(): Promise<NetworkConfig> {
+  const params = new URLSearchParams(window.location.search);
+  const chainId = Number(params.get("chainId") || import.meta.env.VITE_CHAIN_ID || 31337);
+  const chainIndex = supportedChains.findIndex((c) => c.id === chainId);
+  const chain = supportedChains[chainIndex];
+  if (!chain) {
+    throw new Error(`Chain ${chainId} not found`);
+  }
+  const world = worlds[chain.id.toString()];
+  const worldAddress = params.get("worldAddress") || world?.address;
+  if (!worldAddress) {
+    throw new Error(`No world address found for chain ${chainId}. Did you run \`mud deploy\`?`);
+  }
+  const initialBlockNumber = params.has("initialBlockNumber")
+    ? Number(params.get("initialBlockNumber"))
+    : world?.blockNumber ?? -1; // -1 will attempt to find the block number from RPC
+  return {
+    clock: {
+      period: 1000,
+      initialTime: 0,
+      syncInterval: 5000,
+    },
+    provider: {
+      chainId,
+      jsonRpcUrl: params.get("rpc") ?? chain.rpcUrls.default.http[0],
+      wsRpcUrl: params.get("wsRpc") ?? chain.rpcUrls.default.webSocket?.[0],
+    },
+    privateKey: getBurnerWallet().value,
+    chainId,
+    modeUrl: params.get("mode") ?? chain.modeUrl,
+    faucetServiceUrl: params.get("faucet") ?? chain.faucetUrl,
+    worldAddress,
+    initialBlockNumber,
+    snapSync: params.get("snapSync") === "true",
+    disableCache: params.get("cache") === "false",
+  };
+}

package/dist/templates/threejs/packages/client/src/mud/setup.ts ADDED Viewed

@@ -0,0 +1,16 @@
+import { createClientComponents } from "./createClientComponents";
+import { createSystemCalls } from "./createSystemCalls";
+import { setupNetwork } from "./setupNetwork";
+export type SetupResult = Awaited<ReturnType<typeof setup>>;
+export async function setup() {
+  const network = await setupNetwork();
+  const components = createClientComponents(network);
+  const systemCalls = createSystemCalls(network);
+  return {
+    network,
+    components,
+    systemCalls,
+  };
+}

package/dist/templates/threejs/packages/client/src/mud/setupNetwork.ts ADDED Viewed

@@ -0,0 +1,102 @@
+import { setupMUDV2Network } from "@latticexyz/std-client";
+import { createFastTxExecutor, createFaucetService, getSnapSyncRecords } from "@latticexyz/network";
+import { getNetworkConfig } from "./getNetworkConfig";
+import { defineContractComponents } from "./contractComponents";
+import { world } from "./world";
+import { Contract, Signer, utils } from "ethers";
+import { JsonRpcProvider } from "@ethersproject/providers";
+import { IWorld__factory } from "contracts/types/ethers-contracts/factories/IWorld__factory";
+import { getTableIds } from "@latticexyz/utils";
+import storeConfig from "contracts/mud.config";
+export type SetupNetworkResult = Awaited<ReturnType<typeof setupNetwork>>;
+export async function setupNetwork() {
+  const contractComponents = defineContractComponents(world);
+  const networkConfig = await getNetworkConfig();
+  const result = await setupMUDV2Network<typeof contractComponents, typeof storeConfig>({
+    networkConfig,
+    world,
+    contractComponents,
+    syncThread: "main",
+    storeConfig,
+    worldAbi: IWorld__factory.abi,
+  });
+  // Request drip from faucet
+  const signer = result.network.signer.get();
+  if (networkConfig.faucetServiceUrl && signer) {
+    const address = await signer.getAddress();
+    console.info("[Dev Faucet]: Player address -> ", address);
+    const faucet = createFaucetService(networkConfig.faucetServiceUrl);
+    const requestDrip = async () => {
+      const balance = await signer.getBalance();
+      console.info(`[Dev Faucet]: Player balance -> ${balance}`);
+      const lowBalance = balance?.lte(utils.parseEther("1"));
+      if (lowBalance) {
+        console.info("[Dev Faucet]: Balance is low, dripping funds to player");
+        // Double drip
+        await faucet.dripDev({ address });
+        await faucet.dripDev({ address });
+      }
+    };
+    requestDrip();
+    // Request a drip every 20 seconds
+    setInterval(requestDrip, 20000);
+  }
+  const provider = result.network.providers.get().json;
+  const signerOrProvider = signer ?? provider;
+  // Create a World contract instance
+  const worldContract = IWorld__factory.connect(networkConfig.worldAddress, signerOrProvider);
+  if (networkConfig.snapSync) {
+    const currentBlockNumber = await provider.getBlockNumber();
+    const tableRecords = await getSnapSyncRecords(
+      networkConfig.worldAddress,
+      getTableIds(storeConfig),
+      currentBlockNumber,
+      signerOrProvider
+    );
+    console.log(`Syncing ${tableRecords.length} records`);
+    result.startSync(tableRecords, currentBlockNumber);
+  } else {
+    result.startSync();
+  }
+  // Create a fast tx executor
+  const fastTxExecutor =
+    signer?.provider instanceof JsonRpcProvider
+      ? await createFastTxExecutor(signer as Signer & { provider: JsonRpcProvider })
+      : null;
+  // TODO: infer this from fastTxExecute signature?
+  type BoundFastTxExecuteFn<C extends Contract> = <F extends keyof C>(
+    func: F,
+    args: Parameters<C[F]>,
+    options?: {
+      retryCount?: number;
+    }
+  ) => Promise<ReturnType<C[F]>>;
+  function bindFastTxExecute<C extends Contract>(contract: C): BoundFastTxExecuteFn<C> {
+    return async function (...args) {
+      if (!fastTxExecutor) {
+        throw new Error("no signer");
+      }
+      const { tx } = await fastTxExecutor.fastTxExecute(contract, ...args);
+      return await tx;
+    };
+  }
+  return {
+    ...result,
+    worldContract,
+    worldSend: bindFastTxExecute(worldContract),
+    fastTxExecutor,
+  };
+}

package/dist/templates/threejs/packages/client/src/mud/supportedChains.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import { MUDChain, latticeTestnet } from "@latticexyz/common/chains";
+import { foundry } from "@wagmi/chains";
+// If you are deploying to chains other than anvil or Lattice testnet, add them here
+export const supportedChains: MUDChain[] = [foundry, latticeTestnet];

package/dist/templates/threejs/packages/client/src/mud/world.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import { createWorld } from "@latticexyz/recs";
+export const world = createWorld();

package/dist/templates/threejs/packages/client/src/useKeyboardMovement.ts ADDED Viewed

@@ -0,0 +1,60 @@
+import { getComponentValue } from "@latticexyz/recs";
+import { useEffect } from "react";
+import { useMUD } from "./MUDContext";
+export const useKeyboardMovement = () => {
+  const {
+    components: { Position },
+    network: {
+      worldSend,
+      network: { signer },
+      playerEntity,
+    },
+  } = useMUD();
+  useEffect(() => {
+    const moveTo = async (x: number, y: number, z: number) => {
+      const s = signer.get();
+      if (!s) throw new Error("No signer");
+      const txResult = await worldSend("move", [x, y, z]);
+      await txResult.wait();
+    };
+    const moveBy = async (deltaX: number, deltaY: number, deltaZ: number) => {
+      if (playerEntity) {
+        const playerPosition = getComponentValue(Position, playerEntity);
+        if (playerPosition) {
+          await moveTo(playerPosition.x + deltaX, playerPosition.y + deltaY, playerPosition.z + deltaZ);
+        } else {
+          await moveTo(deltaX, deltaY, deltaZ);
+        }
+      }
+    };
+    const listener = (e: KeyboardEvent) => {
+      if (e.key === "ArrowUp") {
+        moveBy(1, 0, 0);
+      }
+      if (e.key === "ArrowDown") {
+        moveBy(-1, 0, 0);
+      }
+      if (e.key === "ArrowLeft") {
+        moveBy(0, 0, -1);
+      }
+      if (e.key === "ArrowRight") {
+        moveBy(0, 0, 1);
+      }
+      if (e.key === " ") {
+        moveBy(0, 1, 0);
+      }
+      if (e.ctrlKey) {
+        moveBy(0, -1, 0);
+      }
+    };
+    window.addEventListener("keydown", listener);
+    return () => window.removeEventListener("keydown", listener);
+  }, [Position, playerEntity, signer, worldSend]);
+};

package/dist/templates/threejs/packages/client/tsconfig.json ADDED Viewed

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "types": ["vite/client"],
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "moduleResolution": "Node",
+    "strict": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
+  },
+  "include": ["src"]
+}

package/dist/templates/threejs/packages/client/vite.config.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 3000,
+    fs: {
+      strict: false,
+    },
+  },
+  build: {
+    target: "es2022",
+  },
+});

package/dist/templates/threejs/packages/contracts/.env ADDED Viewed

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

package/dist/templates/threejs/packages/contracts/.gitignore ADDED Viewed

@@ -0,0 +1,11 @@
+out/
+cache/
+node_modules/
+bindings/
+artifacts/
+abi/
+types/
+broadcast/
+# Ignore MUD deploy artifacts
+deploys/**/*.json

package/dist/templates/threejs/packages/contracts/.prettierrc ADDED Viewed

@@ -0,0 +1,8 @@
+{
+  "plugins": ["prettier-plugin-solidity"],
+  "printWidth": 120,
+  "semi": true,
+  "tabWidth": 2,
+  "useTabs": false,
+  "bracketSpacing": true
+}

package/dist/templates/threejs/packages/contracts/.solhint.json ADDED Viewed

@@ -0,0 +1,12 @@
+{
+  "extends": ["solhint:recommended", "mud"],
+  "plugins": ["mud"],
+  "rules": {
+    "compiler-version": ["error", ">=0.8.0"],
+    "avoid-low-level-calls": "off",
+    "no-inline-assembly": "off",
+    "func-visibility": ["warn", { "ignoreConstructors": true }],
+    "no-empty-blocks": "off",
+    "no-complex-fallback": "off"
+  }
+}

package/dist/templates/threejs/packages/contracts/foundry.toml ADDED Viewed

@@ -0,0 +1,22 @@
+[profile.default]
+solc_version = "0.8.13"
+ffi = false
+fuzz_runs = 256
+optimizer = true
+optimizer_runs = 3000
+verbosity = 2
+src = "src"
+test = "test"
+out = "out"
+allow_paths = ["../../node_modules", "../../../../packages"]
+extra_output_files = [
+  "abi",
+  "evm.bytecode"
+]
+fs_permissions = [{ access = "read", path = "./"}]
+[profile.lattice-testnet]
+eth_rpc_url = "https://follower.testnet-chain.linfra.xyz"
+[profile.hackathon-testnet]
+eth_rpc_url = "https://lattice-goerli-sequencer.optimism.io"

package/dist/templates/threejs/packages/contracts/mud.config.ts ADDED Viewed

@@ -0,0 +1,13 @@
+import { mudConfig } from "@latticexyz/world/register";
+export default mudConfig({
+  tables: {
+    Position: {
+      schema: {
+        x: "int32",
+        y: "int32",
+        z: "int32",
+      },
+    },
+  },
+});