npm - create-avalanche-app - Versions diffs - 0.1.0 - Mend

create-avalanche-app 0.1.0

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 (83) hide show

package/LICENSE +21 -0
package/README.md +43 -0
package/dist/api.d.ts +34 -0
package/dist/api.js +12 -0
package/dist/api.js.map +1 -0
package/dist/chunk-3YGRLI4R.js +91 -0
package/dist/chunk-3YGRLI4R.js.map +1 -0
package/dist/index.js +213 -0
package/dist/index.js.map +1 -0
package/package.json +65 -0
package/templates/erc20-token/CLAUDE.md +45 -0
package/templates/erc20-token/README.md +35 -0
package/templates/erc20-token/app/globals.css +95 -0
package/templates/erc20-token/app/layout.tsx +23 -0
package/templates/erc20-token/app/page.tsx +5 -0
package/templates/erc20-token/app/providers.tsx +30 -0
package/templates/erc20-token/components/demo.tsx +178 -0
package/templates/erc20-token/contracts/foundry.toml +9 -0
package/templates/erc20-token/contracts/src/AvaKitToken.sol +53 -0
package/templates/erc20-token/cursor/rules/avakit.mdc +31 -0
package/templates/erc20-token/env.example +4 -0
package/templates/erc20-token/gitignore +15 -0
package/templates/erc20-token/lib/token-artifact.ts +239 -0
package/templates/erc20-token/llms.txt +29 -0
package/templates/erc20-token/manifest.json +6 -0
package/templates/erc20-token/next.config.ts +7 -0
package/templates/erc20-token/package.json +32 -0
package/templates/erc20-token/postcss.config.mjs +7 -0
package/templates/erc20-token/tsconfig.json +23 -0
package/templates/minimal/CLAUDE.md +37 -0
package/templates/minimal/README.md +32 -0
package/templates/minimal/app/globals.css +95 -0
package/templates/minimal/app/layout.tsx +23 -0
package/templates/minimal/app/page.tsx +5 -0
package/templates/minimal/app/providers.tsx +30 -0
package/templates/minimal/components/demo.tsx +135 -0
package/templates/minimal/cursor/rules/avakit.mdc +28 -0
package/templates/minimal/env.example +4 -0
package/templates/minimal/gitignore +10 -0
package/templates/minimal/llms.txt +30 -0
package/templates/minimal/manifest.json +6 -0
package/templates/minimal/next.config.ts +7 -0
package/templates/minimal/package.json +32 -0
package/templates/minimal/postcss.config.mjs +7 -0
package/templates/minimal/tsconfig.json +23 -0
package/templates/nft-mint/CLAUDE.md +45 -0
package/templates/nft-mint/README.md +36 -0
package/templates/nft-mint/app/globals.css +95 -0
package/templates/nft-mint/app/layout.tsx +23 -0
package/templates/nft-mint/app/page.tsx +5 -0
package/templates/nft-mint/app/providers.tsx +30 -0
package/templates/nft-mint/components/demo.tsx +176 -0
package/templates/nft-mint/contracts/foundry.toml +9 -0
package/templates/nft-mint/contracts/src/AvaKitNFT.sol +57 -0
package/templates/nft-mint/cursor/rules/avakit.mdc +32 -0
package/templates/nft-mint/env.example +4 -0
package/templates/nft-mint/gitignore +15 -0
package/templates/nft-mint/lib/nft-artifact.ts +164 -0
package/templates/nft-mint/llms.txt +31 -0
package/templates/nft-mint/manifest.json +6 -0
package/templates/nft-mint/next.config.ts +7 -0
package/templates/nft-mint/package.json +32 -0
package/templates/nft-mint/postcss.config.mjs +7 -0
package/templates/nft-mint/tsconfig.json +23 -0
package/templates/token-gated-app/CLAUDE.md +45 -0
package/templates/token-gated-app/README.md +38 -0
package/templates/token-gated-app/app/globals.css +95 -0
package/templates/token-gated-app/app/layout.tsx +23 -0
package/templates/token-gated-app/app/page.tsx +5 -0
package/templates/token-gated-app/app/providers.tsx +30 -0
package/templates/token-gated-app/components/demo.tsx +161 -0
package/templates/token-gated-app/contracts/foundry.toml +9 -0
package/templates/token-gated-app/contracts/src/AvaKitNFT.sol +57 -0
package/templates/token-gated-app/cursor/rules/avakit.mdc +36 -0
package/templates/token-gated-app/env.example +4 -0
package/templates/token-gated-app/gitignore +15 -0
package/templates/token-gated-app/lib/nft-artifact.ts +164 -0
package/templates/token-gated-app/llms.txt +33 -0
package/templates/token-gated-app/manifest.json +6 -0
package/templates/token-gated-app/next.config.ts +7 -0
package/templates/token-gated-app/package.json +32 -0
package/templates/token-gated-app/postcss.config.mjs +7 -0
package/templates/token-gated-app/tsconfig.json +23 -0

package/templates/erc20-token/app/globals.css ADDED Viewed

@@ -0,0 +1,95 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+/* Scan @avakit/react's shadcn-style classes from node_modules. */
+@source "../node_modules/@avakit/react/dist";
+@custom-variant dark (&:is(.dark *));
+/*
+ * Black & white only (oklch chroma 0 = pure grayscale). Dark/light wired from
+ * day one via next-themes. Add brand colors later by editing these tokens —
+ * components never hardcode colors.
+ */
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.3 0 0);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+}
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.7 0 0);
+  --destructive-foreground: oklch(0.205 0 0);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+}
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+@layer base {
+  * {
+    border-color: var(--border);
+  }
+  body {
+    background-color: var(--background);
+    color: var(--foreground);
+  }
+}

package/templates/erc20-token/app/layout.tsx ADDED Viewed

@@ -0,0 +1,23 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import type { ReactNode } from "react";
+import { Providers } from "./providers";
+import "./globals.css";
+const geistSans = Geist({ variable: "--font-geist-sans", subsets: ["latin"] });
+const geistMono = Geist_Mono({ variable: "--font-geist-mono", subsets: ["latin"] });
+export const metadata: Metadata = {
+  title: "__PROJECT_NAME__",
+  description: "An Avalanche dapp scaffolded with AvaKit.",
+};
+export default function RootLayout({ children }: Readonly<{ children: ReactNode }>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className={`${geistSans.variable} ${geistMono.variable} font-sans antialiased`}>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}

package/templates/erc20-token/app/page.tsx ADDED Viewed

@@ -0,0 +1,5 @@
+import { Demo } from "@/components/demo";
+export default function Home() {
+  return <Demo />;
+}

package/templates/erc20-token/app/providers.tsx ADDED Viewed

@@ -0,0 +1,30 @@
+"use client";
+import { type WalletAdapter, injectedAdapter } from "@avakit/core";
+import { __CHAIN_CONST__ } from "@avakit/core/chains";
+import { web3authAdapter } from "@avakit/core/web3auth";
+import { AvaKitProvider } from "@avakit/react";
+import { ThemeProvider } from "next-themes";
+import { type ReactNode, useMemo } from "react";
+export function Providers({ children }: { children: ReactNode }) {
+  const adapters = useMemo(() => {
+    const list: WalletAdapter[] = [];
+    // Social login appears only when a Web3Auth client ID is configured.
+    const clientId = process.env.NEXT_PUBLIC_WEB3AUTH_CLIENT_ID;
+    if (clientId) {
+      list.push(web3authAdapter({ clientId }));
+    }
+    // Injected (Core / MetaMask) is always available.
+    list.push(injectedAdapter());
+    return list;
+  }, []);
+  return (
+    <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
+      <AvaKitProvider chains={[__CHAIN_CONST__]} adapters={adapters}>
+        {children}
+      </AvaKitProvider>
+    </ThemeProvider>
+  );
+}

package/templates/erc20-token/components/demo.tsx ADDED Viewed

@@ -0,0 +1,178 @@
+"use client";
+import {
+  Button,
+  ConnectAvalanche,
+  shortenAddress,
+  useAvaAccount,
+  useAvaChain,
+  useAvaDeploy,
+  useContract,
+} from "@avakit/react";
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+import { useCallback, useEffect, useState } from "react";
+import { type Address, formatUnits, parseUnits } from "viem";
+import { abi, bytecode } from "@/lib/token-artifact";
+const ZERO = "0x0000000000000000000000000000000000000000" as const;
+const BURN = "0x000000000000000000000000000000000000dEaD" as const;
+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>
+  );
+}
+export function Demo() {
+  const { address, isConnected } = useAvaAccount();
+  const { chain } = useAvaChain();
+  const { deploy, status: deployStatus } = useAvaDeploy();
+  const [contractAddress, setContractAddress] = useState<Address | null>(null);
+  const token = useContract({ address: contractAddress ?? ZERO, abi });
+  const [balance, setBalance] = useState<bigint | null>(null);
+  const [supply, setSupply] = useState<bigint | null>(null);
+  const [busy, setBusy] = useState<null | "mint" | "transfer">(null);
+  const [error, setError] = useState<string | null>(null);
+  const refresh = useCallback(async () => {
+    if (!contractAddress || !address) return;
+    try {
+      const [bal, total] = await Promise.all([
+        token.read("balanceOf", [address]),
+        token.read("totalSupply"),
+      ]);
+      setBalance(bal as bigint);
+      setSupply(total as bigint);
+    } catch {
+      // not ready
+    }
+  }, [token, contractAddress, address]);
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+  async function handleDeploy() {
+    setError(null);
+    try {
+      const result = await deploy({ abi, bytecode });
+      setContractAddress(result.address);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    }
+  }
+  async function run(kind: "mint" | "transfer", fn: () => Promise<unknown>) {
+    setBusy(kind);
+    setError(null);
+    try {
+      await fn();
+      await refresh();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setBusy(null);
+    }
+  }
+  const fmt = (v: bigint | null) => (v === null ? "…" : `${formatUnits(v, 18)} AKT`);
+  return (
+    <div className="mx-auto flex min-h-dvh max-w-xl 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>
+      <div className="flex flex-col gap-2">
+        <h1 className="text-3xl font-semibold tracking-tight">Launch an ERC-20 token</h1>
+        <p className="text-muted-foreground text-sm">
+          Deploy your token contract from the browser, mint some supply, and transfer — all on{" "}
+          {chain.name}. Bytecode is bundled, so no Foundry is needed to run this.
+        </p>
+      </div>
+      {!isConnected || !address ? (
+        <div className="text-muted-foreground rounded-xl border border-dashed p-10 text-center text-sm">
+          Connect a wallet to begin.
+        </div>
+      ) : !contractAddress ? (
+        <div className="flex flex-col gap-3 rounded-xl border p-6">
+          <p className="text-sm">Step 1 — deploy your ERC-20 contract.</p>
+          <Button onClick={handleDeploy} disabled={deployStatus === "deploying"}>
+            {deployStatus === "deploying" ? "Deploying…" : "Deploy token contract"}
+          </Button>
+          {chain.faucetUrl ? (
+            <a
+              href={chain.faucetUrl}
+              target="_blank"
+              rel="noreferrer"
+              className="text-muted-foreground text-center text-xs underline underline-offset-4"
+            >
+              Need test AVAX? Open the faucet
+            </a>
+          ) : null}
+        </div>
+      ) : (
+        <div className="flex flex-col gap-4 rounded-xl border p-6">
+          <Row label="Token" value={`AvaKit Token (AKT) · ${shortenAddress(contractAddress, 6)}`} mono />
+          <Row label="Total supply" value={fmt(supply)} mono />
+          <Row label="Your balance" value={fmt(balance)} mono />
+          <div className="flex flex-col gap-2 pt-2 sm:flex-row">
+            <Button
+              className="flex-1"
+              disabled={busy !== null}
+              onClick={() => run("mint", () => token.write("mint", []))}
+            >
+              {busy === "mint" ? "Minting…" : "Mint 100 AKT"}
+            </Button>
+            <Button
+              className="flex-1"
+              variant="outline"
+              disabled={busy !== null || (balance ?? 0n) < parseUnits("10", 18)}
+              onClick={() => run("transfer", () => token.write("transfer", [BURN, parseUnits("10", 18)]))}
+            >
+              {busy === "transfer" ? "Sending…" : "Burn 10 AKT"}
+            </Button>
+          </div>
+          <a
+            href={`${chain.explorerUrl}/address/${contractAddress}`}
+            target="_blank"
+            rel="noreferrer"
+            className="text-muted-foreground text-center text-xs underline underline-offset-4"
+          >
+            View token on explorer
+          </a>
+        </div>
+      )}
+      {error ? <p className="text-muted-foreground text-sm">{error}</p> : null}
+    </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 text-sm" : "text-sm"}>{value}</span>
+    </div>
+  );
+}

package/templates/erc20-token/contracts/foundry.toml ADDED Viewed

@@ -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/erc20-token/contracts/src/AvaKitToken.sol ADDED Viewed

@@ -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/erc20-token/cursor/rules/avakit.mdc ADDED Viewed

@@ -0,0 +1,31 @@
+---
+description: AvaKit ERC-20 conventions for this project
+globs: ["**/*.ts", "**/*.tsx", "**/*.sol", "**/*.css"]
+alwaysApply: true
+---
+# AvaKit ERC-20 project rules
+Deploy a token from the browser, mint, and transfer.
+## Flow
+- Deploy: `useAvaDeploy().deploy({ abi, bytecode })` (artifact in `lib/token-artifact.ts`).
+- Mint: `useContract({ address, abi }).write("mint", [])` (mints 100 AKT).
+- Transfer: `.write("transfer", [to, parseUnits("10", 18)])`.
+- Read: `.read("balanceOf", [address])`, `.read("totalSupply")`; format with `formatUnits(v, 18)`.
+## Amounts
+- The token has 18 decimals. Always convert with `parseUnits` / `formatUnits` — never pass raw human numbers as wei.
+## Contract
+- `contracts/src/AvaKitToken.sol` (minimal, self-contained). Recompile: `cd contracts && forge build`, then update `lib/token-artifact.ts`.
+## UI & safety
+- shadcn/ui only; black & white for now; dark/light via next-themes; both must work.
+- Animations: Framer Motion or GSAP only.
+- Deploying/minting/transferring cost gas; fund the wallet on Fuji first.
+- Default chain is Fuji testnet; mainnet requires explicit opt-in.

package/templates/erc20-token/env.example ADDED Viewed

@@ -0,0 +1,4 @@
+# Web3Auth (MetaMask Embedded Wallets) — free client ID for social login.
+# Get one at https://dashboard.web3auth.io (Sapphire Devnet, EVM).
+# Public value, safe to expose. Leave empty to use only the browser wallet.
+NEXT_PUBLIC_WEB3AUTH_CLIENT_ID=

package/templates/erc20-token/gitignore ADDED Viewed

@@ -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/