create-microact-app 1.0.1

package/templates/web3/scripts/chain-start.mjs

@@ -0,0 +1,305 @@
+#!/usr/bin/env node
+import { spawn } from 'node:child_process';
+import { fileURLToPath } from 'node:url';
+import path from 'node:path';
+import fsSync from 'node:fs';
+import { deployCounter } from './deploy.mjs';
+
+const __filename = fileURLToPath(import.meta.url);
+const projectRoot = path.resolve(__filename, '..', '..');
+const pidFile = path.join(projectRoot, '.anvil.pid');
+const cacheDir = path.join(projectRoot, '.anvil-cache');
+
+ensureDir(cacheDir);
+
+loadEnvFiles();
+
+const cliArgs = parseArgs();
+let rpcUrl = cliArgs['rpc-url'] || process.env.RPC_URL || 'http://127.0.0.1:8545';
+let port = cliArgs.port || (() => {
+  try {
+    return new URL(rpcUrl).port || '8545';
+  } catch {
+    return '8545';
+  }
+})();
+if (cliArgs.port && !cliArgs['rpc-url']) {
+  rpcUrl = `http://127.0.0.1:${cliArgs.port}`;
+}
+process.env.RPC_URL = rpcUrl;
+
+let forkUrl = cliArgs['fork-url'] || process.env.FORK_RPC_URL || 'https://eth.llamarpc.com';
+const noForkFlag = cliArgs['no-fork'] || forkUrl === 'none' || forkUrl === 'local';
+if (noForkFlag) {
+  forkUrl = null;
+}
+const chainId = cliArgs['chain-id'] || process.env.CHAIN_ID || '31337';
+const allowForkFallback = !cliArgs['no-fallback'] && process.env.ANVIL_DISABLE_FALLBACK !== '1';
+const preferFork = Boolean(forkUrl);
+
+const runInBackground = cliArgs.background || cliArgs.bg;
+
+checkExistingInstance();
+
+console.log(`[chain] RPC URL ${rpcUrl}`);
+let chainProcess = null;
+let runtimeLabel = 'anvil';
+const startupErrors = [];
+
+try {
+  const result = await startAnvilInstance({ fork: preferFork });
+  chainProcess = result.process;
+  runtimeLabel = result.runtime;
+} catch (error) {
+  startupErrors.push(error);
+  if (preferFork && allowForkFallback) {
+    console.warn('[chain] Failed to start forked anvil:', error.message);
+    console.warn('[chain] Retrying without --fork-url (set ANVIL_DISABLE_FALLBACK=1 to disable this behavior).');
+    try {
+      const result = await startAnvilInstance({ fork: false });
+      chainProcess = result.process;
+      runtimeLabel = result.runtime;
+    } catch (fallbackError) {
+      startupErrors.push(fallbackError);
+    }
+  }
+}
+
+if (!chainProcess) {
+  const finalError = startupErrors.pop() || new Error('Unable to start local JSON-RPC chain');
+  console.error('[chain] Failed to boot a local chain:', finalError.message);
+  process.exitCode = 1;
+  throw finalError;
+}
+
+if (runInBackground) {
+  chainProcess.unref();
+} else {
+  const shutdown = () => {
+    console.log(`\n[chain] Shutting down ${runtimeLabel}...`);
+    return killProcess(chainProcess).finally(() => process.exit());
+  };
+  process.on('SIGINT', shutdown);
+  process.on('SIGTERM', shutdown);
+}
+
+await deployCounter({ silent: cliArgs.silent, rpcUrl });
+console.log(`[chain] ${runtimeLabel.charAt(0).toUpperCase() + runtimeLabel.slice(1)} is running.`);
+
+if (runInBackground) {
+  console.log('[chain] Background mode enabled. Run "npm run chain:stop" to shut it down.');
+  process.exit(0);
+}
+
+console.log('Press Ctrl+C to stop.');
+await new Promise((resolve) => chainProcess.on('exit', resolve));
+removePidFile();
+
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+async function waitForRpc(url, attempts = 20) {
+  const body = JSON.stringify({ jsonrpc: '2.0', method: 'eth_chainId', params: [], id: 1 });
+  for (let i = 0; i < attempts; i++) {
+    try {
+      const res = await fetch(url, {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body
+      });
+      if (res.ok) {
+        return true;
+      }
+    } catch (error) {
+      // ignore
+    }
+    await sleep(1500);
+  }
+  const error = new Error(`Timed out waiting for RPC at ${url}`);
+  error.code = 'RPC_TIMEOUT';
+  throw error;
+}
+
+function buildAnvilArgs({ fork }) {
+  const args = [
+    '--chain-id', chainId,
+    '--port', port,
+    '--block-time', process.env.ANVIL_BLOCK_TIME || '1',
+    '--cache-path', cacheDir
+  ];
+  if (fork) {
+    if (!forkUrl) {
+      throw new Error('Fork URL requested but not provided');
+    }
+    args.unshift(forkUrl);
+    args.unshift('--fork-url');
+  }
+  return args;
+}
+
+async function startAnvilInstance({ fork }) {
+  const args = buildAnvilArgs({ fork });
+  const spawnOptions = runInBackground
+    ? { stdio: 'ignore', detached: true }
+    : { stdio: 'inherit' };
+
+  console.log(`[chain] Spawning anvil${fork ? ' (fork)' : ''} with args:`, args.join(' '));
+  let child;
+  try {
+    child = spawn('anvil', args, spawnOptions);
+  } catch (error) {
+    throw new Error(`Unable to spawn anvil: ${error.message}`);
+  }
+  writePid(child.pid);
+
+  try {
+    await waitForRpcOrExit(child, rpcUrl, 'anvil');
+    return { process: child, runtime: 'anvil' };
+  } catch (error) {
+    await killProcess(child);
+    throw error;
+  }
+}
+
+function waitForRpcOrExit(childProcess, url, runtime = 'anvil') {
+  return new Promise((resolve, reject) => {
+    const onExit = (code, signal) => {
+      cleanup();
+      const reason = typeof code === 'number' ? `code ${code}` : `signal ${signal || 'unknown'}`;
+      reject(new Error(`${runtime} exited before RPC became ready (${reason})`));
+    };
+
+    const onReady = () => {
+      cleanup();
+      resolve();
+    };
+
+    const onError = (error) => {
+      cleanup();
+      reject(error);
+    };
+
+    const cleanup = () => {
+      childProcess.removeListener('exit', onExit);
+    };
+
+    childProcess.once('exit', onExit);
+    waitForRpc(url).then(onReady, onError);
+  });
+}
+
+function loadEnvFiles() {
+  const files = ['.env', '.env.local'];
+  for (const file of files) {
+    const full = path.join(projectRoot, file);
+    if (!fsSync.existsSync(full)) continue;
+    const content = fsSync.readFileSync(full, 'utf8');
+    for (const line of content.split(/\r?\n/)) {
+      if (!line || line.trim().startsWith('#') || !line.includes('=')) continue;
+      const [rawKey, ...rest] = line.split('=');
+      const key = rawKey.trim();
+      const value = rest.join('=').trim().replace(/^['"]|['"]$/g, '');
+      if (key && !process.env[key]) {
+        process.env[key] = value;
+      }
+    }
+  }
+}
+
+function parseArgs() {
+  const args = process.argv.slice(2);
+  const result = {};
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    if (!arg.startsWith('--')) continue;
+    const key = arg.replace(/^--/, '');
+    const next = args[i + 1];
+    if (!next || next.startsWith('--')) {
+      result[key] = true;
+    } else {
+      result[key] = next;
+      i++;
+    }
+  }
+  return result;
+}
+
+function checkExistingInstance() {
+  if (!fsSync.existsSync(pidFile)) return;
+  const pid = Number(fsSync.readFileSync(pidFile, 'utf8'));
+  if (pid && Number.isFinite(pid)) {
+    try {
+      process.kill(pid, 0);
+      console.log(`[chain] Found active anvil process (pid ${pid}). Sending SIGINT...`);
+      try {
+        process.kill(pid, 'SIGINT');
+      } catch {}
+      setTimeout(() => {
+        try {
+          process.kill(pid, 'SIGKILL');
+        } catch {}
+        removePidFile();
+      }, 1500);
+    } catch {
+      removePidFile();
+    }
+    return;
+  }
+  removePidFile();
+}
+
+function writePid(pid) {
+  try {
+    fsSync.writeFileSync(pidFile, String(pid));
+  } catch (error) {
+    console.warn('[chain] Unable to write PID file:', error.message);
+  }
+}
+
+function removePidFile() {
+  if (fsSync.existsSync(pidFile)) {
+    try {
+      fsSync.unlinkSync(pidFile);
+    } catch {}
+  }
+}
+
+function ensureDir(dir) {
+  if (!fsSync.existsSync(dir)) {
+    fsSync.mkdirSync(dir, { recursive: true });
+  }
+}
+
+function killProcess(childProcess) {
+  if (!childProcess) {
+    removePidFile();
+    return Promise.resolve();
+  }
+
+  if (childProcess.exitCode !== null || childProcess.killed) {
+    removePidFile();
+    return Promise.resolve();
+  }
+
+  return new Promise((resolve) => {
+    const pid = childProcess.pid;
+    const timer = setTimeout(() => {
+      try {
+        process.kill(pid, 'SIGKILL');
+      } catch {}
+    }, 2000);
+    childProcess.once('exit', () => {
+      clearTimeout(timer);
+      removePidFile();
+      resolve();
+    });
+    try {
+      process.kill(pid, 'SIGINT');
+    } catch {
+      clearTimeout(timer);
+      removePidFile();
+      resolve();
+    }
+  });
+}

package/templates/web3/scripts/chain-stop.mjs

@@ -0,0 +1,34 @@
+#!/usr/bin/env node
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __filename = fileURLToPath(import.meta.url);
+const projectRoot = path.resolve(__filename, '..', '..');
+const pidFile = path.join(projectRoot, '.anvil.pid');
+
+if (!fs.existsSync(pidFile)) {
+  console.log('[chain] No PID file found. Is Anvil running?');
+  process.exit(0);
+}
+
+const pid = Number(fs.readFileSync(pidFile, 'utf8'));
+if (!pid || !Number.isFinite(pid)) {
+  console.log('[chain] PID file is invalid. Removing it.');
+  fs.unlinkSync(pidFile);
+  process.exit(0);
+}
+
+try {
+  process.kill(pid, 'SIGINT');
+  console.log(`[chain] Sent SIGINT to Anvil (pid ${pid}).`);
+} catch (error) {
+  if (error.code === 'ESRCH') {
+    console.log('[chain] Anvil process already stopped.');
+  } else {
+    console.error('[chain] Failed to send SIGINT:', error.message);
+  }
+}
+
+fs.unlinkSync(pidFile);
+console.log('[chain] PID file removed.');

package/templates/web3/scripts/deploy.mjs

@@ -0,0 +1,155 @@
+#!/usr/bin/env node
+import { spawn } from 'node:child_process';
+import { fileURLToPath } from 'node:url';
+import path from 'node:path';
+import fs from 'node:fs/promises';
+import fsSync from 'node:fs';
+import { ethers } from 'ethers';
+
+const __filename = fileURLToPath(import.meta.url);
+const projectRoot = path.resolve(__filename, '..', '..');
+const contractsDir = path.join(projectRoot, 'contracts');
+const generatedDir = path.join(projectRoot, 'src', 'generated');
+const artifactPath = path.join(contractsDir, 'out', 'Counter.sol', 'Counter.json');
+loadEnvFiles();
+
+defaultEnv('RPC_URL', 'http://127.0.0.1:8545');
+defaultEnv('CHAIN_ID', '31337');
+
+const DEFAULT_PRIVATE_KEY = '0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80';
+
+function loadEnvFiles() {
+  const files = ['.env', '.env.local'];
+  for (const file of files) {
+    const full = path.join(projectRoot, file);
+    if (!fsSync.existsSync(full)) continue;
+    const content = fsSync.readFileSync(full, 'utf8');
+    for (const line of content.split(/\r?\n/)) {
+      if (!line || line.trim().startsWith('#') || !line.includes('=')) continue;
+      const [rawKey, ...rest] = line.split('=');
+      const key = rawKey.trim();
+      const value = rest.join('=').trim().replace(/^['"]|['"]$/g, '');
+      if (key && !process.env[key]) {
+        process.env[key] = value;
+      }
+    }
+  }
+}
+
+function defaultEnv(key, value) {
+  if (!process.env[key]) {
+    process.env[key] = value;
+  }
+}
+
+const cliArgs = parseArgs();
+if (cliArgs['rpc-url']) {
+  process.env.RPC_URL = cliArgs['rpc-url'];
+}
+
+async function runForgeBuild() {
+  await new Promise((resolve, reject) => {
+    const forge = spawn('forge', ['build'], { cwd: contractsDir, stdio: 'inherit' });
+    forge.on('exit', (code) => {
+      if (code === 0) {
+        resolve();
+      } else {
+        reject(new Error('forge build failed. Is Foundry installed?'));
+      }
+    });
+  });
+}
+
+function loadArtifactBytes(artifact) {
+  if (artifact.bytecode?.object) {
+    return artifact.bytecode.object;
+  }
+  if (artifact.bytecode) {
+    return artifact.bytecode;
+  }
+  throw new Error('Unable to find bytecode inside Counter artifact.');
+}
+
+export async function deployCounter({ silent = false } = {}) {
+  if (!silent) {
+    console.log('\n[deploy] Building contracts with Foundry...');
+  }
+  await runForgeBuild();
+
+  const artifactRaw = await fs.readFile(artifactPath, 'utf8');
+  const artifact = JSON.parse(artifactRaw);
+
+const rpcUrl = process.env.RPC_URL;
+  const provider = new ethers.providers.JsonRpcProvider(rpcUrl);
+  const network = await provider.getNetwork();
+
+  const privateKey = process.env.DEPLOYER_PRIVATE_KEY || DEFAULT_PRIVATE_KEY;
+  const wallet = new ethers.Wallet(privateKey, provider);
+
+  if (!silent) {
+    console.log(`[deploy] Deploying Counter from ${await wallet.getAddress()} to chain ${network.chainId}`);
+  }
+
+  const factory = new ethers.ContractFactory(artifact.abi, loadArtifactBytes(artifact), wallet);
+  const contract = await factory.deploy();
+  await contract.deployed();
+
+  await fs.mkdir(generatedDir, { recursive: true });
+  const outputPath = path.join(generatedDir, 'contract.json');
+  const payload = {
+    address: contract.address,
+    chainId: network.chainId,
+    rpcUrl,
+    abi: artifact.abi,
+    deployedAt: new Date().toISOString()
+  };
+  await fs.writeFile(outputPath, JSON.stringify(payload, null, 2));
+
+  if (!silent) {
+    console.log(`[deploy] Counter deployed at ${contract.address}`);
+    console.log(`[deploy] Wrote ${path.relative(projectRoot, outputPath)}`);
+  }
+
+  const userAddress = process.env.USER_ADDRESS;
+  if (userAddress) {
+    const amount = process.env.USER_FUNDING_ETH || '2.0';
+    if (!silent) {
+      console.log(`[deploy] Funding ${userAddress} with ${amount} ETH on the fork...`);
+    }
+    const tx = await wallet.sendTransaction({
+      to: userAddress,
+      value: ethers.utils.parseEther(amount)
+    });
+    await tx.wait();
+    if (!silent) {
+      console.log('[deploy] Funding complete.');
+    }
+  }
+
+  return payload;
+}
+
+if (import.meta.url === `file://${process.argv[1]}`) {
+  deployCounter().catch((error) => {
+    console.error('[deploy] Failed to deploy Counter:', error.message);
+    process.exit(1);
+  });
+}
+
+function parseArgs() {
+  const args = process.argv.slice(2);
+  const result = {};
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    if (!arg.startsWith('--')) continue;
+    const key = arg.replace(/^--/, '');
+    const next = args[i + 1];
+    if (!next || next.startsWith('--')) {
+      result[key] = true;
+    } else {
+      result[key] = next;
+      i++;
+    }
+  }
+  return result;
+}

package/templates/web3/scripts/setup.mjs

@@ -0,0 +1,42 @@
+#!/usr/bin/env node
+import { spawn } from 'node:child_process';
+import { fileURLToPath } from 'node:url';
+import path from 'node:path';
+import fs from 'node:fs';
+
+const __filename = fileURLToPath(import.meta.url);
+const projectRoot = path.resolve(__filename, '..', '..');
+const contractsDir = path.join(projectRoot, 'contracts');
+const libDir = path.join(contractsDir, 'lib', 'forge-std');
+const gitDir = path.join(contractsDir, '.git');
+
+try {
+  if (!fs.existsSync(gitDir)) {
+    console.log('[setup] Initializing git repository for Foundry deps...');
+    await run('git', ['init']);
+  }
+  if (!fs.existsSync(libDir)) {
+    console.log('[setup] Installing forge-std...');
+    await run('forge', ['install', 'foundry-rs/forge-std']);
+  } else {
+    console.log('[setup] forge-std already installed, skipping.');
+  }
+  await run('forge', ['build']);
+  console.log('[setup] Contracts ready.');
+} catch (error) {
+  console.error('[setup] Failed:', error.message);
+  process.exit(1);
+}
+
+function run(cmd, args) {
+  return new Promise((resolve, reject) => {
+    const child = spawn(cmd, args, { cwd: contractsDir, stdio: 'inherit' });
+    child.on('exit', (code) => {
+      if (code === 0) {
+        resolve();
+      } else {
+        reject(new Error(`[setup] Command failed: ${cmd} ${args.join(' ')}`));
+      }
+    });
+  });
+}

package/templates/web3/src/components/App.js

@@ -0,0 +1,49 @@
+import { Component } from '@monygroupcorp/microact';
+import { WalletButton } from '@monygroupcorp/micro-web3';
+import CounterCard from './CounterCard.js';
+import contractInfo from '../generated/contract.json';
+
+class App extends Component {
+  constructor(props) {
+    super();
+    this.walletService = props.walletService;
+    this.counterCard = this.createChild('counter-card', new CounterCard({ walletService: this.walletService }));
+    this.walletButton = this.createChild('fab-container', new WalletButton({ walletService: this.walletService }));
+  }
+
+  children() {
+    return {
+      '#counter-card': this.counterCard,
+      '#fab-container': this.walletButton,
+    };
+  }
+
+  render() {
+    const rpcUrl = contractInfo?.rpcUrl || 'http://127.0.0.1:8545';
+    const chainId = contractInfo?.chainId || 31337;
+
+    return `
+      <div class="app">
+        <header class="hero">
+          <p class="eyebrow">Foundry × Microact</p>
+          <h1>Anvil Counter Starter</h1>
+          <p>Spin up an Anvil fork, deploy Counter.sol, and interact with it through Microact + Micro Web3.</p>
+          <ol class="instructions">
+            <li>Run <code>npm run chain:start</code> in a terminal (starts Anvil, deploys, funds your wallet).</li>
+            <li>Connect your wallet to <strong>${rpcUrl}</strong> (Chain ID ${chainId}).</li>
+            <li>Click the floating wallet button, connect, then use the counter below.</li>
+          </ol>
+        </header>
+        <main class="main">
+          <section id="counter-card"></section>
+        </main>
+        <footer class="footer">
+          <p>2026 Mony Group Corporation - All code is released under the VPL (Viral Public License)</p>
+        </footer>
+        <div id="fab-container"></div>
+      </div>
+    `;
+  }
+}
+
+export default App;

package/templates/web3/src/components/CounterCard.js

@@ -0,0 +1,111 @@
+import { Component, eventBus } from '@monygroupcorp/microact';
+import { ethers } from 'ethers';
+import contractInfo from '../generated/contract.json';
+
+class CounterCard extends Component {
+  constructor(props) {
+    super();
+    this.walletService = props.walletService;
+    this.state = {
+      value: null,
+      pending: false,
+      error: null,
+    };
+    this.provider = new ethers.providers.JsonRpcProvider(contractInfo.rpcUrl);
+    this.contract = new ethers.Contract(contractInfo.address, contractInfo.abi, this.provider);
+  }
+
+  events() {
+    return {
+      'click .counter__increment': 'handleIncrement',
+      'click .counter__decrement': 'handleDecrement',
+      'click .counter__refresh': 'loadValue',
+    };
+  }
+
+  onMount() {
+    this.loadValue();
+    const interval = setInterval(() => this.loadValue(), 4000);
+    this.registerCleanup(() => clearInterval(interval));
+
+    this.unsubscribeWallet = eventBus.on('wallet:connected', () => {
+      this.setState({ error: null });
+    });
+    this.registerCleanup(() => {
+      if (this.unsubscribeWallet) this.unsubscribeWallet();
+    });
+  }
+
+  async loadValue() {
+    try {
+      const value = await this.contract.value();
+      this.setState({ value: value.toString(), error: null });
+    } catch (error) {
+      console.error('Failed to read counter value', error);
+      this.setState({ error: 'Unable to read counter value. Is Anvil running?' });
+    }
+  }
+
+  async handleIncrement() {
+    await this.sendTx('increment');
+  }
+
+  async handleDecrement() {
+    await this.sendTx('decrement');
+  }
+
+  async sendTx(method) {
+    if (!this.walletService.isConnected()) {
+      this.setState({ error: 'Connect a wallet that points to the local Anvil network.' });
+      return;
+    }
+
+    try {
+      this.setState({ pending: true, error: null });
+      const signer = this.walletService.signer || (this.walletService.ethersProvider?.getSigner());
+      if (!signer) {
+        throw new Error('Wallet signer unavailable.');
+      }
+      const tx = await this.contract.connect(signer)[method]();
+      await tx.wait();
+      await this.loadValue();
+    } catch (error) {
+      console.error('Counter transaction failed', error);
+      this.setState({ error: error.message || 'Counter transaction failed.' });
+    } finally {
+      this.setState({ pending: false });
+    }
+  }
+
+  render() {
+    const { value, pending, error } = this.state;
+    const address = contractInfo.address;
+
+    return `
+      <section class="counter">
+        <header>
+          <h2>Local Counter</h2>
+          <p class="counter__meta">
+            Contract <code>${address}</code><br />
+            RPC <code>${contractInfo.rpcUrl}</code>
+          </p>
+        </header>
+        <div class="counter__value">
+          ${value === null ? '<span class="muted">loading...</span>' : `<span>${value}</span>`}
+        </div>
+        <div class="counter__actions">
+          <button class="counter__decrement" ${pending ? 'disabled' : ''}>-</button>
+          <button class="counter__increment" ${pending ? 'disabled' : ''}>+</button>
+          <button class="counter__refresh" ${pending ? 'disabled' : ''}>Refresh</button>
+        </div>
+        ${pending ? '<p class="counter__status">Waiting for confirmation...</p>' : ''}
+        ${error ? `<p class="counter__error">${error}</p>` : ''}
+        <p class="counter__helper">
+          This contract is deployed locally via Foundry + Anvil. Use the wallet button to connect, then interact here.
+        </p>
+      </section>
+    `;
+  }
+}
+
+export default CounterCard;