create-izi-noir 0.1.10 → 0.2.0

package/dist/index.js

@@ -155,39 +155,42 @@ function createSpinner(message) {
 
 // src/generators/package-json.ts
 function generatePackageJson(options) {
+  const isSolana = options.provider === "arkworks";
+  const dependencies = {
+    "@izi-noir/sdk": "^0.1.4",
+    "@noir-lang/acvm_js": "1.0.0-beta.13-1d260df.nightly",
+    "@noir-lang/noirc_abi": "1.0.0-beta.13-1d260df.nightly",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "prism-react-renderer": "^2.4.1"
+  };
+  if (isSolana) {
+    dependencies["@solana/wallet-adapter-react"] = "^0.15.0";
+    dependencies["@solana/wallet-adapter-react-ui"] = "^0.9.0";
+    dependencies["@solana/wallet-adapter-wallets"] = "^0.19.0";
+    dependencies["@solana/web3.js"] = "^1.95.0";
+  }
   const pkg = {
     name: options.projectName,
     version: "0.1.0",
+    private: true,
     description: "ZK circuits built with IZI-NOIR",
     type: "module",
-    main: "./dist/index.js",
-    types: "./dist/index.d.ts",
-    exports: {
-      ".": {
-        types: "./dist/index.d.ts",
-        import: "./dist/index.js"
-      },
-      "./circuits": {
-        types: "./circuits/index.d.ts",
-        import: "./circuits/index.js"
-      }
-    },
-    files: ["dist", "circuits", "generated"],
     scripts: {
-      build: "tsc",
-      test: "tsx scripts/test-proof.ts",
-      "test:watch": "tsx watch scripts/test-proof.ts",
-      prepublishOnly: "npm run build"
-    },
-    dependencies: {
-      "@izi-noir/sdk": "^0.1.4"
+      dev: "vite",
+      build: "vite build",
+      preview: "vite preview",
+      typecheck: "tsc --noEmit"
     },
+    dependencies,
     devDependencies: {
-      "@types/node": "^22.0.0",
-      tsx: "^4.0.0",
-      typescript: "^5.4.0"
+      "@types/react": "^18.3.0",
+      "@types/react-dom": "^18.3.0",
+      "@vitejs/plugin-react": "^4.3.0",
+      "typescript": "^5.4.0",
+      "vite": "^5.4.0"
     },
-    keywords: ["zk", "noir", "zero-knowledge", "privacy", "solana"],
+    keywords: ["zk", "noir", "zero-knowledge", "privacy", isSolana ? "solana" : "evm"],
     license: "MIT"
   };
   return JSON.stringify(pkg, null, 2);
@@ -197,50 +200,35 @@ function generatePackageJson(options) {
 function generateTsconfig() {
   const config = {
     compilerOptions: {
-      target: "ES2022",
+      target: "ES2020",
+      useDefineForClassFields: true,
+      lib: ["ES2020", "DOM", "DOM.Iterable"],
       module: "ESNext",
+      skipLibCheck: true,
+      // Bundler mode
       moduleResolution: "bundler",
-      lib: ["ES2022"],
-      outDir: "./dist",
-      rootDir: ".",
+      allowImportingTsExtensions: true,
+      isolatedModules: true,
+      moduleDetection: "force",
+      noEmit: true,
+      jsx: "react-jsx",
+      // Linting
       strict: true,
-      esModuleInterop: true,
-      skipLibCheck: true,
-      forceConsistentCasingInFileNames: true,
-      declaration: true,
-      declarationMap: true,
-      sourceMap: true,
-      resolveJsonModule: true
+      noUnusedLocals: true,
+      noUnusedParameters: true,
+      noFallthroughCasesInSwitch: true,
+      // Paths
+      baseUrl: ".",
+      paths: {
+        "@/*": ["./src/*"]
+      }
     },
-    include: ["circuits/**/*", "generated/**/*", "scripts/**/*"],
-    exclude: ["node_modules", "dist"]
+    include: ["src", "circuits"],
+    references: [{ path: "./tsconfig.node.json" }]
   };
   return JSON.stringify(config, null, 2);
 }
 
-// src/generators/config.ts
-function generateConfig(options) {
-  return `import { defineConfig } from '@izi-noir/sdk';
-
-export default defineConfig({
-  // Directory containing your circuit files
-  circuitsDir: './circuits',
-
-  // Output directory for compiled circuits
-  outDir: './generated',
-
-  // Proving provider to use
-  provider: '${options.provider}',
-
-  // Enable watch mode optimizations
-  watch: {
-    // Debounce file changes (ms)
-    debounce: 100,
-  },
-});
-`;
-}
-
 // src/generators/circuits.ts
 function generateBalanceProof() {
   return `/**
@@ -328,133 +316,49 @@ declare function assert(condition: boolean): void;
 `;
 }
 
-// src/generators/scripts.ts
-function generateTestScript(options) {
-  const imports = getImports(options.template);
-  const tests = getTests(options.template);
-  return `/**
- * Test script for ZK proofs
- *
- * Run with: npm test
- */
-import { IziNoir, Provider, AcornParser, generateNoir, type CircuitFunction } from '@izi-noir/sdk';
-${imports}
-
-// Helper to convert JS circuit function to Noir code
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function toNoir(circuitFn: any): string {
-  const parser = new AcornParser();
-  const parsed = parser.parse(circuitFn as CircuitFunction, [], []);
-  return generateNoir(parsed);
-}
-
-async function main() {
-  console.log('Initializing IZI-NOIR...');
-  const izi = await IziNoir.init({
-    provider: Provider.${capitalizeFirst(options.provider)},
-  });
-
-${tests}
-
-  console.log('\\n\u2713 All proofs verified successfully!');
-}
-
-main().catch((error) => {
-  console.error('Error:', error);
-  process.exit(1);
-});
-`;
-}
-function getImports(template) {
-  switch (template) {
-    case "minimal":
-      return `import { myCircuit } from '../circuits/index.js';`;
-    case "balance-proof":
-      return `import { balanceProof } from '../circuits/index.js';`;
-    default:
-      return `import { balanceProof, ageProof } from '../circuits/index.js';`;
-  }
-}
-function getTests(template) {
-  switch (template) {
-    case "minimal":
-      return `  // Test: myCircuit
-  console.log('\\nTesting myCircuit...');
-  const noirCode1 = toNoir(myCircuit);
-  const result1 = await izi.createProof(noirCode1, {
-    publicInput: '42',   // public: expected value
-    privateInput: '42',  // private: actual value
-  });
-  console.log('  Proof verified:', result1.verified);`;
-    case "balance-proof":
-      return `  // Test: Balance Proof
-  console.log('\\nTesting balanceProof...');
-  const noirCode1 = toNoir(balanceProof);
-  const result1 = await izi.createProof(noirCode1, {
-    threshold: '100',  // public: minimum required
-    balance: '1500',   // private: actual balance
-  });
-  console.log('  Proof verified:', result1.verified);
-  console.log('  The prover has >= 100 balance (actual: hidden)');`;
-    default:
-      return `  // Test 1: Balance Proof
-  console.log('\\nTesting balanceProof...');
-  const noirCode1 = toNoir(balanceProof);
-  const result1 = await izi.createProof(noirCode1, {
-    threshold: '100',  // public: minimum required
-    balance: '1500',   // private: actual balance
-  });
-  console.log('  Proof verified:', result1.verified);
-  console.log('  The prover has >= 100 balance (actual: hidden)');
-
-  // Test 2: Age Proof
-  console.log('\\nTesting ageProof...');
-  const noirCode2 = toNoir(ageProof);
-  const result2 = await izi.createProof(noirCode2, {
-    currentYear: '2024',  // public: current year
-    minAge: '18',         // public: minimum age
-    birthYear: '1990',    // private: birth year
-  });
-  console.log('  Proof verified:', result2.verified);
-  console.log('  The prover is >= 18 years old (birth year: hidden)');`;
-  }
-}
-function capitalizeFirst(str) {
-  return str.charAt(0).toUpperCase() + str.slice(1);
-}
-
 // src/generators/readme.ts
 function generateReadme(options) {
+  const isSolana = options.provider === "arkworks";
+  const networkInfo = isSolana ? "- Deploy VK to Solana devnet\n- Verify proofs on-chain" : "- Local proof verification";
   return `# ${options.projectName}
 
-ZK circuits built with [IZI-NOIR](https://github.com/izi-noir/izi-noir).
+ZK proof demo built with [IZI-NOIR](https://github.com/izi-noir/izi-noir) and React.
 
 ## Getting Started
 
 \`\`\`bash
-# Build circuits
-npm run build
-
-# Run tests
-npm test
+# Install dependencies
+npm install
 
-# Watch mode (rebuild on changes)
+# Start development server
 npm run dev
+
+# Build for production
+npm run build
 \`\`\`
 
+Then open http://localhost:5173 in your browser.
+
+## Features
+
+- Interactive circuit selection
+- Real-time proof generation
+- Syntax-highlighted code display
+${networkInfo}
+
 ## Project Structure
 
 \`\`\`
 ${options.projectName}/
-\u251C\u2500\u2500 circuits/           # Your ZK circuit definitions
-\u2502   \u251C\u2500\u2500 *.ts           # Circuits as JS functions with assert()
-\u2502   \u2514\u2500\u2500 index.ts       # Re-exports
-\u251C\u2500\u2500 generated/          # Compiled circuits (auto-generated)
-\u2502   \u251C\u2500\u2500 *.json         # Compiled circuit artifacts
-\u2502   \u2514\u2500\u2500 index.ts       # Typed re-exports
-\u251C\u2500\u2500 scripts/
-\u2502   \u2514\u2500\u2500 test-proof.ts  # Local test script
-\u251C\u2500\u2500 izi-noir.config.ts # Build configuration
+\u251C\u2500\u2500 src/
+\u2502   \u251C\u2500\u2500 App.tsx          # Main demo component
+\u2502   \u251C\u2500\u2500 main.tsx         # React entry point
+\u2502   \u251C\u2500\u2500 components/      # Reusable components
+\u2502   \u2514\u2500\u2500 lib/             # Utility functions
+\u251C\u2500\u2500 circuits/            # Your ZK circuit definitions
+\u2502   \u251C\u2500\u2500 *.ts            # Circuits as JS functions with assert()
+\u2502   \u2514\u2500\u2500 index.ts        # Re-exports
+\u251C\u2500\u2500 vite.config.ts       # Vite configuration
 \u2514\u2500\u2500 package.json
 \`\`\`
 
@@ -472,35 +376,16 @@ export function myCircuit(
 }
 \`\`\`
 
-## Usage in Frontend
-
-\`\`\`typescript
-import { IziNoir, Provider } from '@izi-noir/sdk';
-import { myCircuit } from '${options.projectName}/circuits';
-
-const izi = await IziNoir.init({ provider: Provider.Arkworks });
-
-const proof = await izi.createProof(
-  myCircuit,
-  [100],    // public inputs
-  [1500]    // private inputs (hidden)
-);
-
-console.log(proof.verified); // true
-\`\`\`
-
-## Publishing
-
-\`\`\`bash
-npm publish
-\`\`\`
-
-Your circuits can then be installed as a dependency in other projects.
+After adding a new circuit:
+1. Export it from \`circuits/index.ts\`
+2. Add it to the CIRCUITS array in \`src/App.tsx\`
 
 ## Learn More
 
 - [IZI-NOIR Documentation](https://github.com/izi-noir/izi-noir)
 - [Noir Language](https://noir-lang.org)
+- [Vite](https://vitejs.dev)
+- [React](https://react.dev)
 `;
 }
 
@@ -537,6 +422,973 @@ coverage/
 `;
 }
 
+// src/generators/vite.ts
+function generateViteConfig() {
+  return `import { defineConfig, type PluginOption } from "vite";
+import react from "@vitejs/plugin-react";
+import path from "path";
+
+// Plugin to set correct MIME type for WASM files in dev server
+function wasmMimePlugin(): PluginOption {
+  return {
+    name: "wasm-mime-type",
+    configureServer(server) {
+      server.middlewares.use((req, res, next) => {
+        if (req.url?.endsWith(".wasm")) {
+          res.setHeader("Content-Type", "application/wasm");
+        }
+        next();
+      });
+    },
+  };
+}
+
+export default defineConfig({
+  plugins: [react(), wasmMimePlugin()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+      buffer: "buffer/",
+    },
+  },
+  define: {
+    "global": "globalThis",
+  },
+  optimizeDeps: {
+    exclude: ["@noir-lang/noir_wasm", "@aztec/bb.js", "@izi-noir/sdk"],
+    include: ["buffer"],
+  },
+  build: {
+    rollupOptions: {
+      external: [
+        /arkworks_groth16_wasm/,
+      ],
+    },
+  },
+});
+`;
+}
+function generateTsconfigNode() {
+  return `{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}
+`;
+}
+function generateIndexHtml(options) {
+  return `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${options.projectName} - ZK Proof Demo</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+`;
+}
+function generateMainTsx(options) {
+  const isSolana = options.provider === "arkworks";
+  if (isSolana) {
+    return `import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';
+import { WalletModalProvider } from '@solana/wallet-adapter-react-ui';
+import { clusterApiUrl } from '@solana/web3.js';
+import App from './App';
+import './index.css';
+import '@solana/wallet-adapter-react-ui/styles.css';
+
+const endpoint = clusterApiUrl('devnet');
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <ConnectionProvider endpoint={endpoint}>
+      <WalletProvider wallets={[]} autoConnect>
+        <WalletModalProvider>
+          <App />
+        </WalletModalProvider>
+      </WalletProvider>
+    </ConnectionProvider>
+  </StrictMode>,
+);
+`;
+  }
+  return `import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+import './index.css';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
+`;
+}
+function generateAppTsx(options) {
+  const isSolana = options.provider === "arkworks";
+  const circuitImports = getCircuitImports(options.template);
+  const circuitOptions = getCircuitOptions(options.template);
+  const solanaImports = isSolana ? `
+import { useWallet } from '@solana/wallet-adapter-react';
+import { useWalletModal } from '@solana/wallet-adapter-react-ui';
+import { Chain, Network } from '@izi-noir/sdk';` : "";
+  const solanaHooks = isSolana ? `
+  const { publicKey, connected, sendTransaction } = useWallet();
+  const { setVisible } = useWalletModal();` : "";
+  const solanaProviderConfig = isSolana ? `
+      chain: Chain.Solana,
+      network: Network.Devnet,` : "";
+  const solanaState = isSolana ? `
+  // Deploy state
+  const [isDeploying, setIsDeploying] = useState(false);
+  const [vkAccount, setVkAccount] = useState<string | null>(null);
+  const [deployError, setDeployError] = useState<string | null>(null);
+
+  // Verify state
+  const [isVerifying, setIsVerifying] = useState(false);
+  const [verified, setVerified] = useState<boolean | null>(null);
+  const [verifyError, setVerifyError] = useState<string | null>(null);` : "";
+  const solanaHandlers = isSolana ? `
+  // Deploy VK to Solana
+  const handleDeploy = async () => {
+    if (!iziInstance || !connected || !publicKey || !sendTransaction) return;
+
+    setIsDeploying(true);
+    setDeployError(null);
+
+    try {
+      const result = await iziInstance.deploy({ publicKey, sendTransaction });
+      setVkAccount(result.vkAccount);
+    } catch (error) {
+      console.error('Deploy error:', error);
+      setDeployError((error as Error).message);
+    } finally {
+      setIsDeploying(false);
+    }
+  };
+
+  // Verify proof on-chain
+  const handleVerify = async () => {
+    if (!iziInstance || !vkAccount || !publicKey || !sendTransaction) return;
+
+    setIsVerifying(true);
+    setVerifyError(null);
+
+    try {
+      const result = await iziInstance.verifyOnChain({ publicKey, sendTransaction }, vkAccount);
+      setVerified(result.verified);
+    } catch (error) {
+      console.error('Verify error:', error);
+      setVerifyError((error as Error).message);
+    } finally {
+      setIsVerifying(false);
+    }
+  };` : "";
+  const solanaDeploySection = isSolana ? `
+        {/* Deploy & Verify Section */}
+        {proof && (
+          <div className="section">
+            <h2>Deploy & Verify on Solana</h2>
+
+            {!connected ? (
+              <button onClick={() => setVisible(true)} className="btn btn-secondary">
+                Connect Wallet
+              </button>
+            ) : (
+              <div className="deploy-verify-row">
+                <div className="deploy-box">
+                  <button
+                    onClick={handleDeploy}
+                    disabled={isDeploying || !!vkAccount}
+                    className="btn btn-primary"
+                  >
+                    {isDeploying ? 'Deploying...' : vkAccount ? 'Deployed' : 'Deploy VK'}
+                  </button>
+                  {deployError && <p className="error">{deployError}</p>}
+                  {vkAccount && <p className="success">VK: {vkAccount.slice(0, 8)}...</p>}
+                </div>
+
+                <div className="verify-box">
+                  <button
+                    onClick={handleVerify}
+                    disabled={!vkAccount || isVerifying}
+                    className="btn btn-primary"
+                  >
+                    {isVerifying ? 'Verifying...' : verified ? 'Verified!' : 'Verify On-Chain'}
+                  </button>
+                  {verifyError && <p className="error">{verifyError}</p>}
+                  {verified && <p className="success">Proof verified on Solana!</p>}
+                </div>
+              </div>
+            )}
+          </div>
+        )}` : "";
+  return `import { useState, useEffect, useCallback } from 'react';
+import initNoirC from '@noir-lang/noirc_abi';
+import initACVM from '@noir-lang/acvm_js';
+import acvm from '@noir-lang/acvm_js/web/acvm_js_bg.wasm?url';
+import noirc from '@noir-lang/noirc_abi/web/noirc_abi_wasm_bg.wasm?url';
+import {
+  IziNoir,
+  Provider,
+  markWasmInitialized,
+  AcornParser,
+  generateNoir,
+} from '@izi-noir/sdk';${solanaImports}
+import { CodeBlock } from './components/CodeBlock';
+${circuitImports}
+import './App.css';
+
+// Circuit definition type
+interface CircuitDef {
+  name: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  fn: any;
+  publicInputKeys: string[];
+  privateInputKeys: string[];
+  defaultInputs: Record<string, string>;
+}
+
+// Circuit options
+const CIRCUITS: CircuitDef[] = ${circuitOptions};
+
+// WASM initialization
+let wasmInitialized = false;
+async function initBrowserWasm() {
+  if (wasmInitialized) return;
+  await Promise.all([
+    initACVM({ module_or_path: acvm }),
+    initNoirC({ module_or_path: noirc }),
+  ]);
+  markWasmInitialized();
+  wasmInitialized = true;
+}
+
+function App() {
+  // Circuit state
+  const [selectedCircuit, setSelectedCircuit] = useState(CIRCUITS[0].name);
+  const [circuitCode, setCircuitCode] = useState(CIRCUITS[0].fn.toString());
+  const [noirCode, setNoirCode] = useState<string | null>(null);
+  const [transpileError, setTranspileError] = useState<string | null>(null);
+
+  // Input state
+  const [inputs, setInputs] = useState<Record<string, string>>(CIRCUITS[0].defaultInputs);
+
+  // Proof state
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [proof, setProof] = useState<Uint8Array | null>(null);
+  const [proofTime, setProofTime] = useState<number | null>(null);
+  const [proofError, setProofError] = useState<string | null>(null);
+  const [localVerified, setLocalVerified] = useState<boolean | null>(null);
+
+  // IziNoir instance
+  const [iziInstance, setIziInstance] = useState<IziNoir | null>(null);
+${solanaHooks}
+${solanaState}
+
+  // Update circuit when selection changes
+  useEffect(() => {
+    const circuit = CIRCUITS.find(c => c.name === selectedCircuit);
+    if (circuit) {
+      setCircuitCode(circuit.fn.toString());
+      setInputs(circuit.defaultInputs);
+      // Reset proof state
+      setProof(null);
+      setProofTime(null);
+      setLocalVerified(null);
+      setNoirCode(null);
+    }
+  }, [selectedCircuit]);
+
+  // Transpile circuit to Noir
+  useEffect(() => {
+    const transpileCode = () => {
+      try {
+        setTranspileError(null);
+        const circuit = CIRCUITS.find(c => c.name === selectedCircuit);
+        if (!circuit) return;
+
+        const parser = new AcornParser();
+        const publicInputs = Object.entries(inputs)
+          .filter(([key]) => circuit.publicInputKeys.includes(key))
+          .map(([, val]) => Number(val));
+        const privateInputs = Object.entries(inputs)
+          .filter(([key]) => circuit.privateInputKeys.includes(key))
+          .map(([, val]) => Number(val));
+
+        const parsedCircuit = parser.parse(circuit.fn, publicInputs, privateInputs);
+        const result = generateNoir(parsedCircuit);
+        setNoirCode(result);
+      } catch (error) {
+        setTranspileError((error as Error).message);
+        setNoirCode(null);
+      }
+    };
+
+    const debounce = setTimeout(transpileCode, 300);
+    return () => clearTimeout(debounce);
+  }, [selectedCircuit, inputs]);
+
+  // Generate proof
+  const handleGenerateProof = useCallback(async () => {
+    if (!noirCode) return;
+
+    setIsGenerating(true);
+    setProofError(null);
+    setProof(null);
+    setProofTime(null);
+    setLocalVerified(null);
+
+    try {
+      await initBrowserWasm();
+
+      const startTime = performance.now();
+
+      const izi = await IziNoir.init({
+        provider: Provider.${capitalizeFirst(options.provider)},${solanaProviderConfig}
+      });
+
+      await izi.compile(noirCode);
+
+      const proofResult = await izi.prove(inputs);
+      setIziInstance(izi);
+
+      // Get proof bytes
+      const proofBytes = 'bytes' in proofResult.proof
+        ? proofResult.proof.bytes
+        : proofResult.proof;
+      const publicInputsHex = 'hex' in proofResult.publicInputs
+        ? proofResult.publicInputs.hex
+        : proofResult.publicInputs;
+
+      // Local verification
+      const verified = await izi.verify(proofBytes, publicInputsHex);
+      setLocalVerified(verified);
+
+      const endTime = performance.now();
+      setProof(proofBytes);
+      setProofTime(Math.round(endTime - startTime));
+    } catch (error) {
+      console.error('Proof generation error:', error);
+      setProofError((error as Error).message);
+    } finally {
+      setIsGenerating(false);
+    }
+  }, [noirCode, inputs]);
+${solanaHandlers}
+
+  return (
+    <div className="app">
+      <header>
+        <h1>${options.projectName}</h1>
+        <p>Zero-Knowledge Proof Demo</p>
+      </header>
+
+      <main>
+        {/* Circuit Selection */}
+        <div className="section">
+          <h2>1. Select Circuit</h2>
+          <select
+            value={selectedCircuit}
+            onChange={(e) => setSelectedCircuit(e.target.value)}
+            className="select"
+          >
+            {CIRCUITS.map((c) => (
+              <option key={c.name} value={c.name}>
+                {c.name}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        {/* Circuit Code */}
+        <div className="section">
+          <h2>2. Circuit Code</h2>
+          <CodeBlock code={circuitCode} language="typescript" />
+
+          {noirCode && (
+            <details className="noir-details">
+              <summary>View Generated Noir</summary>
+              <CodeBlock code={noirCode} language="rust" />
+            </details>
+          )}
+
+          {transpileError && (
+            <p className="error">{transpileError}</p>
+          )}
+        </div>
+
+        {/* Inputs */}
+        <div className="section">
+          <h2>3. Inputs</h2>
+          <div className="inputs-grid">
+            {Object.entries(inputs).map(([key, value]) => {
+              const circuit = CIRCUITS.find(c => c.name === selectedCircuit);
+              const isPublic = circuit?.publicInputKeys.includes(key);
+              return (
+                <div key={key} className="input-group">
+                  <label>
+                    <span className={\`input-badge \${isPublic ? 'public' : 'private'}\`}>
+                      {isPublic ? 'public' : 'private'}
+                    </span>
+                    {key}
+                  </label>
+                  <input
+                    type="number"
+                    value={value}
+                    onChange={(e) => setInputs({ ...inputs, [key]: e.target.value })}
+                  />
+                </div>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* Generate Proof */}
+        <div className="section">
+          <h2>4. Generate Proof</h2>
+          <button
+            onClick={handleGenerateProof}
+            disabled={isGenerating || !noirCode || !!transpileError}
+            className="btn btn-primary"
+          >
+            {isGenerating ? 'Generating...' : 'Generate Proof'}
+          </button>
+
+          {proofError && <p className="error">{proofError}</p>}
+
+          {proof && (
+            <div className="results">
+              <div className="result-card">
+                <span className="result-value">{proof.length} bytes</span>
+                <span className="result-label">Proof Size</span>
+              </div>
+              <div className="result-card">
+                <span className="result-value">{proofTime} ms</span>
+                <span className="result-label">Generation Time</span>
+              </div>
+              <div className="result-card">
+                <span className={\`result-value \${localVerified ? 'success' : 'error'}\`}>
+                  {localVerified ? 'Yes' : 'No'}
+                </span>
+                <span className="result-label">Locally Verified</span>
+              </div>
+            </div>
+          )}
+        </div>
+${solanaDeploySection}
+      </main>
+
+      <footer>
+        <p>Built with <a href="https://github.com/izi-noir/izi-noir" target="_blank">IZI-NOIR</a></p>
+      </footer>
+    </div>
+  );
+}
+
+export default App;
+`;
+}
+function getCircuitImports(template) {
+  switch (template) {
+    case "minimal":
+      return `import { myCircuit } from '../circuits';`;
+    case "balance-proof":
+      return `import { balanceProof } from '../circuits';`;
+    default:
+      return `import { balanceProof, ageProof } from '../circuits';`;
+  }
+}
+function getCircuitOptions(template) {
+  switch (template) {
+    case "minimal":
+      return `[
+  {
+    name: 'myCircuit',
+    fn: myCircuit,
+    publicInputKeys: ['publicInput'],
+    privateInputKeys: ['privateInput'],
+    defaultInputs: { publicInput: '42', privateInput: '42' },
+  },
+]`;
+    case "balance-proof":
+      return `[
+  {
+    name: 'balanceProof',
+    fn: balanceProof,
+    publicInputKeys: ['threshold'],
+    privateInputKeys: ['balance'],
+    defaultInputs: { threshold: '100', balance: '1500' },
+  },
+]`;
+    default:
+      return `[
+  {
+    name: 'balanceProof',
+    fn: balanceProof,
+    publicInputKeys: ['threshold'],
+    privateInputKeys: ['balance'],
+    defaultInputs: { threshold: '100', balance: '1500' },
+  },
+  {
+    name: 'ageProof',
+    fn: ageProof,
+    publicInputKeys: ['currentYear', 'minAge'],
+    privateInputKeys: ['birthYear'],
+    defaultInputs: { currentYear: '2024', minAge: '18', birthYear: '1990' },
+  },
+]`;
+  }
+}
+function capitalizeFirst(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+function generateAppCss() {
+  return `* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --purple: #9945FF;
+  --green: #14F195;
+  --bg: #0a0a0a;
+  --bg-elevated: #111111;
+  --border: #222222;
+  --text: #ffffff;
+  --text-muted: #888888;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  line-height: 1.6;
+}
+
+.app {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+header {
+  padding: 2rem;
+  text-align: center;
+  border-bottom: 1px solid var(--border);
+}
+
+header h1 {
+  font-size: 2rem;
+  background: linear-gradient(90deg, var(--purple), var(--green));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+header p {
+  color: var(--text-muted);
+  margin-top: 0.5rem;
+}
+
+main {
+  flex: 1;
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 2rem;
+  width: 100%;
+}
+
+.section {
+  margin-bottom: 2rem;
+  padding: 1.5rem;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+}
+
+.section h2 {
+  font-size: 1.25rem;
+  margin-bottom: 1rem;
+  color: var(--text);
+}
+
+.select {
+  width: 100%;
+  padding: 0.75rem;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  color: var(--text);
+  font-size: 1rem;
+  cursor: pointer;
+}
+
+.select:focus {
+  outline: none;
+  border-color: var(--purple);
+}
+
+.inputs-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1rem;
+}
+
+.input-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.input-group label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  color: var(--text-muted);
+}
+
+.input-badge {
+  font-size: 0.625rem;
+  padding: 0.125rem 0.375rem;
+  border-radius: 4px;
+  text-transform: uppercase;
+  font-weight: 600;
+}
+
+.input-badge.public {
+  background: var(--green);
+  color: #000;
+}
+
+.input-badge.private {
+  background: var(--purple);
+  color: #fff;
+}
+
+.input-group input {
+  padding: 0.75rem;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  color: var(--text);
+  font-size: 1rem;
+}
+
+.input-group input:focus {
+  outline: none;
+  border-color: var(--purple);
+}
+
+.btn {
+  padding: 0.75rem 1.5rem;
+  font-size: 1rem;
+  font-weight: 600;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-primary {
+  background: linear-gradient(90deg, var(--purple), var(--green));
+  color: white;
+}
+
+.btn-primary:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 20px rgba(153, 69, 255, 0.3);
+}
+
+.btn-secondary {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  color: var(--text);
+}
+
+.btn-secondary:hover:not(:disabled) {
+  border-color: var(--purple);
+}
+
+.results {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.result-card {
+  padding: 1rem;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  text-align: center;
+}
+
+.result-value {
+  font-size: 1.25rem;
+  font-weight: 600;
+  display: block;
+}
+
+.result-value.success {
+  color: var(--green);
+}
+
+.result-value.error {
+  color: #ff4444;
+}
+
+.result-label {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  margin-top: 0.25rem;
+  display: block;
+}
+
+.error {
+  color: #ff4444;
+  font-size: 0.875rem;
+  margin-top: 0.5rem;
+}
+
+.success {
+  color: var(--green);
+  font-size: 0.875rem;
+  margin-top: 0.5rem;
+}
+
+.noir-details {
+  margin-top: 1rem;
+}
+
+.noir-details summary {
+  cursor: pointer;
+  color: var(--text-muted);
+  font-size: 0.875rem;
+}
+
+.noir-details summary:hover {
+  color: var(--text);
+}
+
+.deploy-verify-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.deploy-box,
+.verify-box {
+  padding: 1rem;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+}
+
+footer {
+  padding: 1.5rem;
+  text-align: center;
+  border-top: 1px solid var(--border);
+  color: var(--text-muted);
+  font-size: 0.875rem;
+}
+
+footer a {
+  color: var(--purple);
+  text-decoration: none;
+}
+
+footer a:hover {
+  text-decoration: underline;
+}
+`;
+}
+function generateIndexCss() {
+  return `body {
+  margin: 0;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+`;
+}
+function generateViteEnvDts() {
+  return `/// <reference types="vite/client" />
+`;
+}
+function generateViteSvg() {
+  return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFBD4F"></stop><stop offset="100%" stop-color="#FF980E"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
+`;
+}
+
+// src/generators/components.ts
+function generateCodeBlock() {
+  return `import { Highlight, themes } from 'prism-react-renderer';
+
+interface CodeBlockProps {
+  code: string;
+  language?: 'typescript' | 'javascript' | 'rust';
+}
+
+export function CodeBlock({ code, language = 'typescript' }: CodeBlockProps) {
+  return (
+    <Highlight theme={themes.nightOwl} code={code.trim()} language={language}>
+      {({ className, style, tokens, getLineProps, getTokenProps }) => (
+        <pre
+          className={className}
+          style={{
+            ...style,
+            padding: '1rem',
+            borderRadius: '8px',
+            overflow: 'auto',
+            fontSize: '0.875rem',
+            lineHeight: '1.5',
+          }}
+        >
+          {tokens.map((line, i) => (
+            <div key={i} {...getLineProps({ line })}>
+              <span style={{ color: '#666', marginRight: '1rem', userSelect: 'none' }}>
+                {String(i + 1).padStart(2, ' ')}
+              </span>
+              {line.map((token, key) => (
+                <span key={key} {...getTokenProps({ token })} />
+              ))}
+            </div>
+          ))}
+        </pre>
+      )}
+    </Highlight>
+  );
+}
+`;
+}
+function generateEditableCodeBlock() {
+  return `import { useRef, useEffect, useState } from 'react';
+import { Highlight, themes } from 'prism-react-renderer';
+
+interface EditableCodeBlockProps {
+  code: string;
+  onChange: (code: string) => void;
+  language?: 'typescript' | 'javascript';
+  rows?: number;
+}
+
+export function EditableCodeBlock({
+  code,
+  onChange,
+  language = 'typescript',
+  rows = 8,
+}: EditableCodeBlockProps) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const preRef = useRef<HTMLPreElement>(null);
+  const [scrollTop, setScrollTop] = useState(0);
+
+  useEffect(() => {
+    if (preRef.current) {
+      preRef.current.scrollTop = scrollTop;
+    }
+  }, [scrollTop]);
+
+  const handleScroll = () => {
+    if (textareaRef.current) {
+      setScrollTop(textareaRef.current.scrollTop);
+    }
+  };
+
+  const lineHeight = 1.5;
+  const padding = 16;
+  const minHeight = rows * 14 * lineHeight + padding * 2;
+
+  return (
+    <div style={{ position: 'relative', minHeight }}>
+      <Highlight theme={themes.nightOwl} code={code} language={language}>
+        {({ className, style, tokens, getLineProps, getTokenProps }) => (
+          <pre
+            ref={preRef}
+            className={className}
+            style={{
+              ...style,
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              padding: '1rem',
+              borderRadius: '8px',
+              overflow: 'auto',
+              fontSize: '0.875rem',
+              lineHeight: '1.5',
+              margin: 0,
+              pointerEvents: 'none',
+            }}
+          >
+            {tokens.map((line, i) => (
+              <div key={i} {...getLineProps({ line })}>
+                {line.map((token, key) => (
+                  <span key={key} {...getTokenProps({ token })} />
+                ))}
+              </div>
+            ))}
+          </pre>
+        )}
+      </Highlight>
+
+      <textarea
+        ref={textareaRef}
+        value={code}
+        onChange={(e) => onChange(e.target.value)}
+        onScroll={handleScroll}
+        spellCheck={false}
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          width: '100%',
+          height: '100%',
+          minHeight,
+          padding: '1rem',
+          background: 'transparent',
+          border: 'none',
+          outline: 'none',
+          resize: 'none',
+          fontFamily: 'monospace',
+          fontSize: '0.875rem',
+          lineHeight: '1.5',
+          color: 'transparent',
+          caretColor: 'white',
+          WebkitTextFillColor: 'transparent',
+        }}
+      />
+    </div>
+  );
+}
+`;
+}
+
 // src/commands/init.ts
 async function initCommand(projectName, options) {
   let projectOptions;
@@ -608,15 +1460,30 @@ Error: Directory "${projectOptions.projectName}" already exists and is not empty
 }
 async function createProjectStructure(projectDir, options) {
   await ensureDir(path2.join(projectDir, "circuits"));
-  await ensureDir(path2.join(projectDir, "generated"));
-  await ensureDir(path2.join(projectDir, "scripts"));
+  await ensureDir(path2.join(projectDir, "src"));
+  await ensureDir(path2.join(projectDir, "src", "components"));
+  await ensureDir(path2.join(projectDir, "src", "lib"));
+  await ensureDir(path2.join(projectDir, "public"));
   const files = [
+    // Root config files
     ["package.json", generatePackageJson(options)],
     ["tsconfig.json", generateTsconfig()],
-    ["izi-noir.config.ts", generateConfig(options)],
+    ["tsconfig.node.json", generateTsconfigNode()],
+    ["vite.config.ts", generateViteConfig()],
+    ["index.html", generateIndexHtml(options)],
     ["README.md", generateReadme(options)],
     [".gitignore", generateGitignore()],
-    ["scripts/test-proof.ts", generateTestScript(options)]
+    // Source files
+    ["src/main.tsx", generateMainTsx(options)],
+    ["src/App.tsx", generateAppTsx(options)],
+    ["src/App.css", generateAppCss()],
+    ["src/index.css", generateIndexCss()],
+    ["src/vite-env.d.ts", generateViteEnvDts()],
+    // Components
+    ["src/components/CodeBlock.tsx", generateCodeBlock()],
+    ["src/components/EditableCodeBlock.tsx", generateEditableCodeBlock()],
+    // Public assets
+    ["public/vite.svg", generateViteSvg()]
   ];
   switch (options.template) {
     case "minimal":
@@ -632,10 +1499,6 @@ async function createProjectStructure(projectDir, options) {
   }
   files.push(["circuits/index.ts", generateCircuitsIndex(options.template)]);
   files.push(["circuits/types.d.ts", generateCircuitTypes()]);
-  files.push([
-    "generated/.gitkeep",
-    "# This directory contains compiled circuit artifacts\n# Generated by: npm run build\n"
-  ]);
   await Promise.all(
     files.map(
       ([relativePath, content]) => writeFile(path2.join(projectDir, relativePath), content)
@@ -652,14 +1515,15 @@ function printSuccessMessage(options) {
   if (options.skipInstall) {
     console.log(pc3.cyan("  npm install"));
   }
-  console.log(pc3.cyan("  npm run build"));
-  console.log(pc3.cyan("  npm test"));
+  console.log(pc3.cyan("  npm run dev"));
+  console.log();
+  console.log("Then open " + pc3.blue("http://localhost:5173") + " in your browser.");
   console.log();
-  console.log("To start developing:");
+  console.log("To add circuits:");
   console.log();
-  console.log(pc3.dim("  1. Edit circuits in circuits/*.ts"));
-  console.log(pc3.dim('  2. Run "npm run dev" for watch mode'));
-  console.log(pc3.dim('  3. Test with "npm test"'));
+  console.log(pc3.dim("  1. Create a new circuit in circuits/*.ts"));
+  console.log(pc3.dim("  2. Export it from circuits/index.ts"));
+  console.log(pc3.dim("  3. Add it to CIRCUITS array in src/App.tsx"));
   console.log();
   console.log(
     pc3.dim("Learn more: ") + pc3.blue("https://github.com/izi-noir/izi-noir")

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-izi-noir",
-  "version": "0.1.10",
+  "version": "0.2.0",
   "description": "CLI to scaffold IZI-NOIR ZK projects",
   "type": "module",
   "bin": {