create-avalanche-app 0.1.4 → 0.1.6

package/templates/l1-launch/components/demo.tsx

@@ -0,0 +1,396 @@
+"use client";
+
+import { deployContract, ensureChain, getPublicClient, getWalletClient } from "@avakit/core";
+import {
+  Button,
+  ConnectAvalanche,
+  shortenAddress,
+  useAvaAccount,
+  useAvaKit,
+} from "@avakit/react";
+import { Blocks, Check, Copy, Moon, Rocket, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+import { useCallback, useEffect, useState } from "react";
+import { type Address, type Hash, formatEther, formatUnits } from "viem";
+import { chain, isConfigured, l1 } from "@/lib/l1";
+import { abi, bytecode } from "@/lib/token-artifact";
+
+const CONTRACT_KEY = "l1-launch:token";
+const MAX_BLOCKS = 8;
+
+type BlockRow = { number: bigint; hash: Hash; txCount: number; timestamp: bigint };
+type TxRow = { hash: Hash; from: Address; to: Address | null; value: bigint };
+
+export function Demo() {
+  if (!isConfigured) {
+    return (
+      <Shell>
+        <SetupPanel />
+      </Shell>
+    );
+  }
+  return (
+    <Shell>
+      <Dashboard />
+    </Shell>
+  );
+}
+
+function Dashboard() {
+  const { address, isConnected } = useAvaAccount();
+  const { provider } = useAvaKit();
+
+  const [height, setHeight] = useState<bigint | null>(null);
+  const [gasPrice, setGasPrice] = useState<bigint | null>(null);
+  const [balance, setBalance] = useState<bigint | null>(null);
+  const [blocks, setBlocks] = useState<BlockRow[]>([]);
+  const [txs, setTxs] = useState<TxRow[]>([]);
+  const [online, setOnline] = useState(true);
+
+  const [token, setToken] = useState<Address | null>(null);
+  const [busy, setBusy] = useState<null | "deploy" | "mint">(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const saved = window.localStorage.getItem(CONTRACT_KEY);
+    if (saved) setToken(saved as Address);
+  }, []);
+
+  // Live block explorer: poll the L1's RPC for height, gas, the latest blocks,
+  // and the transactions inside them. All read-only — no wallet needed.
+  useEffect(() => {
+    const client = getPublicClient(chain);
+    let active = true;
+    async function poll() {
+      try {
+        const [tip, gas] = await Promise.all([client.getBlockNumber(), client.getGasPrice()]);
+        if (!active) return;
+        setOnline(true);
+        setHeight(tip);
+        setGasPrice(gas);
+
+        const from = tip > BigInt(MAX_BLOCKS - 1) ? tip - BigInt(MAX_BLOCKS - 1) : 0n;
+        const numbers: bigint[] = [];
+        for (let n = tip; n >= from; n--) numbers.push(n);
+        const fetched = await Promise.all(
+          numbers.map((n) => client.getBlock({ blockNumber: n, includeTransactions: true })),
+        );
+        if (!active) return;
+
+        const blockRows: BlockRow[] = fetched.map((b) => ({
+          number: b.number,
+          hash: b.hash,
+          txCount: b.transactions.length,
+          timestamp: b.timestamp,
+        }));
+        const txRows: TxRow[] = fetched
+          .flatMap((b) => b.transactions)
+          .filter((t): t is Exclude<typeof t, Hash> => typeof t !== "string")
+          .slice(0, 12)
+          .map((t) => ({ hash: t.hash, from: t.from, to: t.to, value: t.value }));
+        setBlocks(blockRows);
+        setTxs(txRows);
+      } catch {
+        if (active) setOnline(false);
+      }
+    }
+    void poll();
+    const timer = setInterval(poll, 2500);
+    return () => {
+      active = false;
+      clearInterval(timer);
+    };
+  }, []);
+
+  // Your native-token balance, refreshed with the tip.
+  useEffect(() => {
+    if (!address) {
+      setBalance(null);
+      return;
+    }
+    const client = getPublicClient(chain);
+    let active = true;
+    client
+      .getBalance({ address })
+      .then((b) => active && setBalance(b))
+      .catch(() => {});
+    return () => {
+      active = false;
+    };
+  }, [address, height]);
+
+  const deployToken = useCallback(async () => {
+    if (!provider || !address) return;
+    setBusy("deploy");
+    setError(null);
+    try {
+      await ensureChain(provider, chain);
+      const { address: deployed } = await deployContract({
+        artifact: { abi, bytecode },
+        chain,
+        provider,
+        account: address,
+      });
+      window.localStorage.setItem(CONTRACT_KEY, deployed);
+      setToken(deployed);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setBusy(null);
+    }
+  }, [provider, address]);
+
+  const mint = useCallback(async () => {
+    if (!provider || !address || !token) return;
+    setBusy("mint");
+    setError(null);
+    try {
+      await ensureChain(provider, chain);
+      const wallet = getWalletClient(chain, provider);
+      await wallet.writeContract({
+        address: token,
+        abi,
+        functionName: "mint",
+        account: address,
+      } as never);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setBusy(null);
+    }
+  }, [provider, address, token]);
+
+  return (
+    <>
+      <div className="flex flex-col gap-2">
+        <h1 className="text-3xl font-semibold tracking-tight">{l1.name}</h1>
+        <p className="text-muted-foreground text-sm">
+          Your own Avalanche L1, live and explorable. Deploy a contract, send transactions, and
+          watch blocks land in real time — no third-party explorer needed.
+        </p>
+      </div>
+
+      {/* Chain stat strip */}
+      <section className="grid grid-cols-2 gap-3 sm:grid-cols-4">
+        <Stat label="Block height" value={height === null ? "…" : height.toString()} live={online} />
+        <Stat label="Chain ID" value={String(chain.id)} />
+        <Stat label="Token" value={l1.token} />
+        <Stat
+          label="Gas price"
+          value={gasPrice === null ? "…" : `${formatUnits(gasPrice, 9)} gwei`}
+        />
+      </section>
+
+      {/* Account + deploy */}
+      <section className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+        <div className="flex flex-col gap-3 rounded-xl border p-5">
+          <p className="text-muted-foreground text-xs uppercase tracking-wide">Your account</p>
+          {isConnected && address ? (
+            <>
+              <Row label="Address" value={shortenAddress(address, 6)} mono />
+              <Row
+                label="Balance"
+                value={balance === null ? "…" : `${formatEther(balance)} ${l1.token}`}
+                mono
+              />
+            </>
+          ) : (
+            <div className="flex flex-col items-start gap-2">
+              <p className="text-muted-foreground text-sm">Connect a wallet to transact.</p>
+              <ConnectAvalanche />
+            </div>
+          )}
+          {l1.network === "local" && l1.faucetAccount.privateKey ? (
+            <p className="text-muted-foreground text-xs">
+              Local dev: import the pre-funded EWOQ key (from{" "}
+              <span className="font-mono">pnpm l1</span>) to get {l1.token}.
+            </p>
+          ) : null}
+        </div>
+
+        <div className="flex flex-col gap-3 rounded-xl border p-5">
+          <p className="text-muted-foreground text-xs uppercase tracking-wide">Demo contract</p>
+          {token ? (
+            <>
+              <Row label="ERC-20" value={shortenAddress(token, 6)} mono />
+              <Button onClick={mint} disabled={busy !== null || !isConnected} size="sm">
+                {busy === "mint" ? "Minting…" : "Mint 100 AKT"}
+              </Button>
+              <p className="text-muted-foreground text-xs">
+                Each action is a real transaction — watch it appear below.
+              </p>
+            </>
+          ) : (
+            <>
+              <p className="text-muted-foreground text-sm">
+                Deploy an ERC-20 to your chain from the browser.
+              </p>
+              <Button onClick={deployToken} disabled={busy !== null || !isConnected} size="sm">
+                <Rocket className="size-4" />
+                {busy === "deploy" ? "Deploying…" : "Deploy demo token"}
+              </Button>
+            </>
+          )}
+        </div>
+      </section>
+
+      {/* Explorer: blocks + txs */}
+      <section className="grid grid-cols-1 gap-3 lg:grid-cols-2">
+        <div className="flex flex-col gap-2 rounded-xl border p-5">
+          <div className="mb-1 flex items-center gap-2">
+            <Blocks className="size-4" />
+            <span className="text-sm font-semibold">Latest blocks</span>
+          </div>
+          {blocks.length === 0 ? (
+            <p className="text-muted-foreground text-sm">Waiting for blocks…</p>
+          ) : (
+            blocks.map((b) => (
+              <div key={b.hash} className="flex items-center justify-between gap-3 border-b py-1.5 last:border-0">
+                <span className="font-mono text-sm">#{b.number.toString()}</span>
+                <span className="text-muted-foreground text-xs">{b.txCount} tx</span>
+                <span className="text-muted-foreground font-mono text-xs">{ago(b.timestamp)}</span>
+              </div>
+            ))
+          )}
+        </div>
+
+        <div className="flex flex-col gap-2 rounded-xl border p-5">
+          <span className="mb-1 text-sm font-semibold">Latest transactions</span>
+          {txs.length === 0 ? (
+            <p className="text-muted-foreground text-sm">No transactions yet — deploy the token above.</p>
+          ) : (
+            txs.map((t) => (
+              <div key={t.hash} className="flex flex-col gap-0.5 border-b py-1.5 last:border-0">
+                <span className="font-mono text-xs">{shortenAddress(t.hash, 8)}</span>
+                <span className="text-muted-foreground text-xs">
+                  {shortenAddress(t.from, 4)} →{" "}
+                  {t.to ? shortenAddress(t.to, 4) : "contract creation"}
+                  {t.value > 0n ? ` · ${formatEther(t.value)} ${l1.token}` : ""}
+                </span>
+              </div>
+            ))
+          )}
+        </div>
+      </section>
+
+      {error ? <p className="text-muted-foreground text-sm break-all">{error}</p> : null}
+    </>
+  );
+}
+
+function ago(timestamp: bigint): string {
+  const secs = Math.max(0, Math.floor(Date.now() / 1000) - Number(timestamp));
+  if (secs < 60) return `${secs}s ago`;
+  if (secs < 3600) return `${Math.floor(secs / 60)}m ago`;
+  return `${Math.floor(secs / 3600)}h ago`;
+}
+
+function Stat({ label, value, live }: { label: string; value: string; live?: boolean }) {
+  return (
+    <div className="flex flex-col gap-1 rounded-xl border p-4">
+      <span className="text-muted-foreground flex items-center gap-1.5 text-xs">
+        {live !== undefined ? (
+          <span
+            className={`size-1.5 rounded-full ${live ? "bg-foreground animate-pulse" : "bg-muted-foreground/40"}`}
+          />
+        ) : null}
+        {label}
+      </span>
+      <span className="font-mono text-lg">{value}</span>
+    </div>
+  );
+}
+
+function SetupPanel() {
+  return (
+    <div className="flex flex-col gap-4 rounded-xl border p-8">
+      <div className="flex flex-col gap-2">
+        <h1 className="text-2xl font-semibold tracking-tight">Launch your own Avalanche L1</h1>
+        <p className="text-muted-foreground text-sm">
+          One command spins up your own blockchain — a Subnet-EVM L1 on a local Avalanche network —
+          and wires this app to it. No test AVAX, no faucet, no always-on node.
+        </p>
+      </div>
+      <CopyCommand command="pnpm l1" />
+      <p className="text-muted-foreground text-xs">
+        Configure it: <span className="font-mono">L1_NAME=mychain L1_CHAIN_ID=9999 L1_TOKEN=MYL1 pnpm l1</span>.
+        Needs{" "}
+        <a
+          href="https://build.avax.network/docs/tooling/avalanche-cli/get-avalanche-cli"
+          target="_blank"
+          rel="noreferrer"
+          className="underline underline-offset-4"
+        >
+          avalanche-cli
+        </a>
+        . When it finishes it writes <span className="font-mono">l1.config.json</span> and this page
+        becomes your chain dashboard automatically.
+      </p>
+    </div>
+  );
+}
+
+function CopyCommand({ command }: { command: string }) {
+  const [copied, setCopied] = useState(false);
+  return (
+    <button
+      type="button"
+      onClick={() => {
+        void navigator.clipboard?.writeText(command);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1500);
+      }}
+      className="bg-muted hover:bg-muted/70 flex items-center justify-between gap-4 rounded-lg p-4 text-left font-mono text-sm transition-colors"
+    >
+      <span>
+        <span className="text-muted-foreground select-none">$ </span>
+        {command}
+      </span>
+      {copied ? (
+        <Check className="size-4 shrink-0" />
+      ) : (
+        <Copy className="text-muted-foreground size-4 shrink-0" />
+      )}
+    </button>
+  );
+}
+
+function ThemeToggle() {
+  const { resolvedTheme, setTheme } = useTheme();
+  return (
+    <Button
+      variant="outline"
+      size="icon"
+      aria-label="Toggle theme"
+      onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
+    >
+      <Sun className="hidden size-4 dark:block" />
+      <Moon className="block size-4 dark:hidden" />
+    </Button>
+  );
+}
+
+function Shell({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="mx-auto flex min-h-dvh max-w-3xl flex-col gap-8 px-6 py-16">
+      <header className="flex items-center justify-between">
+        <span className="font-mono text-sm font-semibold">__PROJECT_NAME__</span>
+        <div className="flex items-center gap-2">
+          <ConnectAvalanche />
+          <ThemeToggle />
+        </div>
+      </header>
+      {children}
+    </div>
+  );
+}
+
+function Row({ label, value, mono }: { label: string; value: string; mono?: boolean }) {
+  return (
+    <div className="flex items-center justify-between gap-4">
+      <span className="text-muted-foreground text-sm">{label}</span>
+      <span className={`${mono ? "font-mono" : ""} truncate text-sm`}>{value}</span>
+    </div>
+  );
+}

package/templates/l1-launch/contracts/foundry.toml

@@ -0,0 +1,9 @@
+[profile.default]
+src = "src"
+out = "out"
+libs = ["lib"]
+optimizer = true
+optimizer_runs = 200
+
+[rpc_endpoints]
+fuji = "https://api.avax-test.network/ext/bc/C/rpc"

package/templates/l1-launch/contracts/src/AvaKitToken.sol

@@ -0,0 +1,53 @@
+// SPDX-License-Identifier: MIT
+pragma solidity ^0.8.20;
+
+/// @title AvaKitToken
+/// @notice A minimal, self-contained ERC-20 with a public demo faucet (`mint`).
+///         No external deps, so it compiles out of the box with `forge build`.
+contract AvaKitToken {
+    string public constant name = "AvaKit Token";
+    string public constant symbol = "AKT";
+    uint8 public constant decimals = 18;
+
+    uint256 public totalSupply;
+    mapping(address => uint256) public balanceOf;
+    mapping(address => mapping(address => uint256)) public allowance;
+
+    event Transfer(address indexed from, address indexed to, uint256 value);
+    event Approval(address indexed owner, address indexed spender, uint256 value);
+
+    /// @notice Mint 100 AKT to the caller (demo faucet).
+    function mint() external {
+        uint256 amount = 100 * 10 ** decimals;
+        totalSupply += amount;
+        unchecked {
+            balanceOf[msg.sender] += amount;
+        }
+        emit Transfer(address(0), msg.sender, amount);
+    }
+
+    function transfer(address to, uint256 value) external returns (bool) {
+        balanceOf[msg.sender] -= value;
+        unchecked {
+            balanceOf[to] += value;
+        }
+        emit Transfer(msg.sender, to, value);
+        return true;
+    }
+
+    function approve(address spender, uint256 value) external returns (bool) {
+        allowance[msg.sender][spender] = value;
+        emit Approval(msg.sender, spender, value);
+        return true;
+    }
+
+    function transferFrom(address from, address to, uint256 value) external returns (bool) {
+        allowance[from][msg.sender] -= value;
+        balanceOf[from] -= value;
+        unchecked {
+            balanceOf[to] += value;
+        }
+        emit Transfer(from, to, value);
+        return true;
+    }
+}

package/templates/l1-launch/cursor/rules/avakit.mdc

@@ -0,0 +1,36 @@
+---
+description: AvaKit L1-launch conventions for this project
+globs: ["**/*.ts", "**/*.tsx", "**/*.sol", "**/*.sh", "**/*.css"]
+alwaysApply: true
+---
+
+# AvaKit L1-launch project rules
+
+Launch your own Avalanche L1, then explore it in a built-in dashboard.
+
+## Flow
+
+- `pnpm l1` (scripts/l1.sh) creates + deploys a local Subnet-EVM L1 and writes `l1.config.json`.
+- `lib/l1.ts` turns that into an AvaKit `chain` + `isConfigured`.
+- `components/demo.tsx` is the explorer: poll `getPublicClient(chain)` for `getBlockNumber`,
+  `getGasPrice`, `getBlock({ blockNumber, includeTransactions: true })`, `getBalance`.
+- Deploy the demo token: `deployContract({ artifact: { abi, bytecode }, chain, provider, account })`.
+- `pnpm l1:fuji` deploys the same L1 to Fuji (advanced; needs test AVAX + an always-on validator).
+
+## L1 config decisions
+
+VM = Subnet-EVM (`--evm`); EVM chain id (`--evm-chain-id`, avoid collisions); native token
+(`--evm-token`); `--sovereign=false` for a zero-prompt local chain (a true sovereign L1 picks a
+Validator Manager model — PoA / PoS-native / PoS-erc20); `--test-defaults` pre-funds the EWOQ key.
+See CLAUDE.md for the full explainer — surface it when the user asks "what does this setting do".
+
+## Explorer
+
+- Read-only viem only. No server, no indexer, no Docker. Poll on an interval, clean up the timer.
+
+## UI & safety
+
+- shadcn/ui only; black & white for now; dark/light via next-themes; both must work.
+- Animations: Framer Motion or GSAP only.
+- EWOQ (`0x56289e…8027`) is a PUBLIC local-only dev key — never use it or commit a real key on Fuji/mainnet.
+- Deploying/minting cost gas — on local, import the EWOQ key; on Fuji, fund your own wallet.

package/templates/l1-launch/env.example

@@ -0,0 +1,9 @@
+# This template needs no env vars for the local flow — your chain's RPC lives in
+# l1.config.json (written by `pnpm l1`), and you connect with a browser wallet.
+#
+# On local networks, import avalanche-cli's public EWOQ dev key (printed by
+# `pnpm l1`) into your wallet — it's pre-funded on your chain. LOCAL ONLY:
+#   0x56289e99c94b6912bfc12adc093c9b51124f0dc54ac7a766b2bc5ccf558d8027
+#
+# For the Fuji path (`pnpm l1:fuji`), bring your own funded Fuji wallet — never a
+# real private key in this file.

package/templates/l1-launch/gitignore

@@ -0,0 +1,15 @@
+node_modules/
+.next/
+out/
+*.tsbuildinfo
+next-env.d.ts
+.env
+.env.*
+!.env.example
+.DS_Store
+*.log
+
+# Foundry
+contracts/out/
+contracts/cache/
+contracts/broadcast/

package/templates/l1-launch/l1.config.json

@@ -0,0 +1,10 @@
+{
+  "configured": false,
+  "network": "local",
+  "name": "mychain",
+  "token": "MYL1",
+  "evmChainId": 9999,
+  "rpcUrl": "",
+  "blockchainIdHex": "",
+  "faucetAccount": { "address": "", "privateKey": "" }
+}

package/templates/l1-launch/lib/l1.ts

@@ -0,0 +1,40 @@
+/**
+ * Your Avalanche L1 configuration.
+ *
+ * `scripts/l1.sh` (`pnpm l1`) creates a Subnet-EVM chain, deploys it to a local
+ * Avalanche network, and writes the discovered RPC URL + blockchain ID into
+ * `l1.config.json`. This module turns that into an AvaKit chain the app uses.
+ */
+
+import { type AvaChain, defineChain } from "@avakit/core/chains";
+import config from "../l1.config.json";
+
+export interface L1Config {
+  configured: boolean;
+  /** "local" (pnpm l1) or "fuji" (pnpm l1:fuji). */
+  network: string;
+  name: string;
+  token: string;
+  /** EVM chain id (for the wallet / RPC). */
+  evmChainId: number;
+  rpcUrl: string;
+  /** The bytes32 (Avalanche) blockchain ID in hex. */
+  blockchainIdHex: string;
+  /** EWOQ dev key on local networks (empty on Fuji — bring your own wallet). */
+  faucetAccount: { address: string; privateKey: string };
+}
+
+export const l1 = config as L1Config;
+
+/** True once `pnpm l1` has filled in the chain's RPC URL. */
+export const isConfigured = Boolean(l1.configured && l1.rpcUrl);
+
+/** Your L1 as an AvaKit chain. Explorer is built into this app (see components/explorer.tsx). */
+export const chain: AvaChain = defineChain({
+  id: l1.evmChainId,
+  name: l1.name,
+  rpcUrl: l1.rpcUrl || "http://127.0.0.1:9650",
+  explorerUrl: "",
+  nativeCurrency: { name: l1.token, symbol: l1.token, decimals: 18 },
+  testnet: true,
+});