create-izi-noir 0.2.10 → 0.2.12

package/dist/index.js

@@ -172,7 +172,7 @@ var ProgressReporter = class {
       const frame = pc2.cyan(frames[frameIndex]);
       const phrase = THINKING_PHRASES[this.thinkingIndex % THINKING_PHRASES.length];
       const dots = ".".repeat(dotCount % 4);
-      process.stdout.write(`\r${frame} ${pc2.dim(phrase)}${dots}   `);
+      process.stdout.write(`\x1B[2K\r${frame} ${pc2.dim(phrase)}${dots}`);
       frameIndex = (frameIndex + 1) % frames.length;
       dotCount++;
       if (dotCount % 12 === 0) {
@@ -243,7 +243,7 @@ var InstallProgress = class {
       const bar = pc2.green("\u2588".repeat(filled)) + pc2.dim("\u2591".repeat(empty));
       const pkg = this.packages[this.currentPackage % this.packages.length];
       process.stdout.write(
-        `\r${frame} Installing dependencies ${bar} ${pc2.dim(pkg)}   `
+        `\x1B[2K\r${frame} Installing dependencies ${bar} ${pc2.dim(pkg)}`
       );
       frameIndex = (frameIndex + 1) % frames.length;
       if (this.progress < 95) {
@@ -288,7 +288,7 @@ var GitProgress = class {
       const frame = pc2.cyan(frames[frameIndex]);
       const phase = this.phases[this.phaseIndex % this.phases.length];
       const dots = ".".repeat(this.dotCount % 4);
-      process.stdout.write(`\r${frame} ${pc2.dim(phase)}${dots}   `);
+      process.stdout.write(`\x1B[2K\r${frame} ${pc2.dim(phase)}${dots}`);
       frameIndex = (frameIndex + 1) % frames.length;
       this.dotCount++;
       if (this.dotCount % 8 === 0) {
@@ -316,7 +316,7 @@ function createGitProgress() {
 function generatePackageJson(options) {
   const isSolana = options.provider === "arkworks";
   const dependencies = {
-    "@izi-noir/sdk": "^0.1.6",
+    "@izi-noir/sdk": "^0.1.8",
     "@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",
@@ -483,7 +483,7 @@ function generateReadme(options) {
   const networkInfo = isSolana ? "- Deploy VK to Solana devnet\n- Verify proofs on-chain" : "- Local proof verification";
   return `# ${options.projectName}
 
-ZK proof demo built with [IZI-NOIR](https://github.com/izi-noir/izi-noir) and React.
+ZK proof demo built with [IZI-NOIR](https://github.com/izi-noir) and React.
 
 ## Getting Started
 
@@ -543,7 +543,7 @@ After adding a new circuit:
 
 ## Learn More
 
-- [IZI-NOIR Documentation](https://github.com/izi-noir/izi-noir)
+- [IZI-NOIR Documentation](https://github.com/izi-noir)
 - [Noir Language](https://noir-lang.org)
 - [Vite](https://vitejs.dev)
 - [React](https://react.dev)
@@ -717,7 +717,7 @@ function generateAppTsx(options) {
   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';` : "";
+import { Chain, Network, getExplorerTxUrl, getExplorerAccountUrl } from '@izi-noir/sdk';` : "";
   const solanaHooks = isSolana ? `
   const { publicKey, connected, sendTransaction } = useWallet();
   const { setVisible } = useWalletModal();` : "";
@@ -728,12 +728,23 @@ import { Chain, Network } from '@izi-noir/sdk';` : "";
   // Deploy state
   const [isDeploying, setIsDeploying] = useState(false);
   const [vkAccount, setVkAccount] = useState<string | null>(null);
+  const [deployTx, setDeployTx] = 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 solanaCircuitResetCode = isSolana ? `
+      // Reset deploy state when circuit changes (VK will be different)
+      setVkAccount(null);
+      setDeployTx(null);
+      setVerified(null);` : "";
+  const solanaRecompileResetCode = isSolana ? `
+        // Reset deploy state since VK will change with recompilation
+        setVkAccount(null);
+        setDeployTx(null);
+        setVerified(null);` : "";
   const solanaHandlers = isSolana ? `
   // Deploy VK to Solana
   const handleDeploy = async () => {
@@ -745,6 +756,7 @@ import { Chain, Network } from '@izi-noir/sdk';` : "";
     try {
       const result = await iziInstance.deploy({ publicKey, sendTransaction });
       setVkAccount(result.vkAccount);
+      setDeployTx(result.signature);
     } catch (error) {
       console.error('Deploy error:', error);
       setDeployError((error as Error).message);
@@ -764,12 +776,23 @@ import { Chain, Network } from '@izi-noir/sdk';` : "";
       const result = await iziInstance.verifyOnChain({ publicKey, sendTransaction }, vkAccount);
       setVerified(result.verified);
     } catch (error) {
-      console.error('Verify error:', error);
-      setVerifyError((error as Error).message);
+      const err = error as Error;
+      console.error('Verify error details:', {
+        message: err.message,
+        cause: (err as unknown as { cause?: unknown }).cause,
+        stack: err.stack,
+      });
+      setVerifyError(err.message);
     } finally {
       setIsVerifying(false);
     }
   };` : "";
+  const solanaVkWarning = isSolana ? `
+          {vkAccount && compiledNoirCode !== noirCode && (
+            <div className="warning">
+              Circuit code changed. Generating a new proof will require re-deploying the VK.
+            </div>
+          )}` : "";
   const solanaDeploySection = isSolana ? `
         {/* Deploy & Verify Section */}
         {proof && (
@@ -791,21 +814,62 @@ import { Chain, Network } from '@izi-noir/sdk';` : "";
                     {isDeploying ? 'Deploying...' : vkAccount ? 'Deployed' : 'Deploy VK'}
                   </button>
                   {deployError && <p className="error">{deployError}</p>}
-                  {vkAccount && <p className="success">VK: {vkAccount.slice(0, 8)}...</p>}
+                  {vkAccount && (
+                    <div className="deploy-result">
+                      <div className="deploy-result-item">
+                        <span className="deploy-label">VK Account:</span>
+                        <a
+                          href={getExplorerAccountUrl(Network.Devnet, vkAccount)}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="explorer-link"
+                        >
+                          {vkAccount}
+                        </a>
+                      </div>
+                      {deployTx && (
+                        <div className="deploy-result-item">
+                          <span className="deploy-label">Transaction:</span>
+                          <a
+                            href={getExplorerTxUrl(Network.Devnet, deployTx)}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="explorer-link"
+                          >
+                            {deployTx}
+                          </a>
+                        </div>
+                      )}
+                    </div>
+                  )}
                 </div>
 
                 <div className="verify-box">
-                  {publicInputs && (
-                    <div className="public-inputs-display">
-                      <span>Public inputs:</span>
-                      <code>{JSON.stringify(publicInputs)}</code>
+                  {publicInputs && publicInputs.length > 0 && (
+                    <div className="claim-card">
+                      <p className="claim-label">Verifying claim:</p>
+                      <div className="claim-content">
+                        <p className="claim-text">
+                          "I know private values that satisfy the circuit constraints with these public inputs:"
+                        </p>
+                        <div className="public-inputs-grid">
+                          {publicInputs.map((hex, idx) => {
+                            const decimal = BigInt(hex).toString();
+                            return (
+                              <div key={idx} className="public-input-card">
+                                <span className="input-badge public">public</span>
+                                <span className="public-input-value">{decimal}</span>
+                              </div>
+                            );
+                          })}
+                        </div>
+                      </div>
                     </div>
                   )}
                   <button
                     onClick={handleVerify}
                     disabled={!vkAccount || isVerifying}
                     className="btn btn-primary"
-                    style={{ marginTop: publicInputs ? '0.5rem' : 0 }}
                   >
                     {isVerifying ? 'Verifying...' : verified ? 'Verified!' : 'Verify On-Chain'}
                   </button>
@@ -875,8 +939,9 @@ function App() {
   const [localVerified, setLocalVerified] = useState<boolean | null>(null);
   const [publicInputs, setPublicInputs] = useState<string[] | null>(null);
 
-  // IziNoir instance
+  // IziNoir instance and compiled code tracking
   const [iziInstance, setIziInstance] = useState<IziNoir | null>(null);
+  const [compiledNoirCode, setCompiledNoirCode] = useState<string | null>(null);
 ${solanaHooks}
 ${solanaState}
 
@@ -892,6 +957,9 @@ ${solanaState}
       setLocalVerified(null);
       setPublicInputs(null);
       setNoirCode(null);
+      // Reset compiled instance (forces recompilation)
+      setIziInstance(null);
+      setCompiledNoirCode(null);${solanaCircuitResetCode}
     }
   }, [selectedCircuit]);
 
@@ -939,14 +1007,21 @@ ${solanaState}
 
       const startTime = performance.now();
 
-      const izi = await IziNoir.init({
-        provider: Provider.${capitalizeFirst(options.provider)},${solanaProviderConfig}
-      });
+      // Reuse existing instance if circuit hasn't changed
+      let izi = iziInstance;
+      const needsRecompile = !izi || compiledNoirCode !== noirCode;
 
-      await izi.compile(noirCode);
+      if (needsRecompile) {
+        izi = await IziNoir.init({
+          provider: Provider.${capitalizeFirst(options.provider)},${solanaProviderConfig}
+        });
 
-      const proofResult = await izi.prove(inputs);
-      setIziInstance(izi);
+        await izi.compile(noirCode);
+        setIziInstance(izi);
+        setCompiledNoirCode(noirCode);${solanaRecompileResetCode}
+      }
+
+      const proofResult = await izi!.prove(inputs);
 
       // Get proof bytes
       const proofBytes = 'bytes' in proofResult.proof
@@ -957,7 +1032,7 @@ ${solanaState}
         : proofResult.publicInputs;
 
       // Local verification
-      const verified = await izi.verify(proofBytes, publicInputsHex);
+      const verified = await izi!.verify(proofBytes, publicInputsHex);
       setLocalVerified(verified);
 
       const endTime = performance.now();
@@ -970,7 +1045,7 @@ ${solanaState}
     } finally {
       setIsGenerating(false);
     }
-  }, [noirCode, inputs]);
+  }, [noirCode, inputs, iziInstance, compiledNoirCode]);
 ${solanaHandlers}
 
   return (
@@ -1042,7 +1117,7 @@ ${solanaHandlers}
 
         {/* Generate Proof */}
         <div className="section">
-          <h2>4. Generate Proof</h2>
+          <h2>4. Generate Proof</h2>${solanaVkWarning}
           <button
             onClick={handleGenerateProof}
             disabled={isGenerating || !noirCode || !!transpileError}
@@ -1076,7 +1151,7 @@ ${solanaDeploySection}
       </main>
 
       <footer>
-        <p>Built with <a href="https://github.com/izi-noir/izi-noir" target="_blank">IZI-NOIR</a></p>
+        <p>Built with <a href="https://github.com/izi-noir" target="_blank">IZI-NOIR</a></p>
       </footer>
     </div>
   );
@@ -1469,6 +1544,16 @@ main {
   border-radius: 8px;
 }
 
+.warning {
+  padding: 0.75rem 1rem;
+  background: rgba(255, 193, 7, 0.1);
+  border: 1px solid rgba(255, 193, 7, 0.3);
+  border-radius: 8px;
+  color: #ffc107;
+  font-size: 0.875rem;
+  margin-bottom: 1rem;
+}
+
 /* ================================
    Noir Code Details
    ================================ */
@@ -1526,22 +1611,138 @@ main {
 }
 
 .public-inputs-display {
-  margin-top: 0.75rem;
+  margin-bottom: 1rem;
+}
+
+.public-inputs-label {
+  display: block;
   font-size: 0.75rem;
   color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 0.75rem;
 }
 
-.public-inputs-display code {
-  display: block;
-  margin-top: 0.5rem;
-  padding: 0.75rem;
+.public-inputs-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.public-input-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
   background: rgba(0, 0, 0, 0.4);
   border: 1px solid var(--border);
+  border-radius: 12px;
+  transition: border-color 0.3s ease;
+}
+
+.public-input-item:hover {
+  border-color: rgba(20, 241, 149, 0.3);
+}
+
+.public-input-value {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--text);
+}
+
+/* ================================
+   Claim Card - Public Inputs Display
+   ================================ */
+.claim-card {
+  margin-bottom: 1rem;
+  padding: 1rem;
+  background: rgba(20, 241, 149, 0.05);
+  border: 1px solid rgba(20, 241, 149, 0.2);
+  border-radius: 12px;
+}
+
+.claim-label {
+  font-size: 0.75rem;
+  color: var(--solana-green);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  font-weight: 600;
+  margin-bottom: 0.75rem;
+}
+
+.claim-content {
+  padding: 0.5rem 0;
+}
+
+.claim-text {
+  font-size: 0.875rem;
+  color: var(--text-muted);
+  font-style: italic;
+  margin-bottom: 1rem;
+  line-height: 1.5;
+}
+
+.public-inputs-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.public-input-card {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  background: rgba(0, 0, 0, 0.4);
+  border: 1px solid rgba(20, 241, 149, 0.3);
+  border-radius: 12px;
+  transition: border-color 0.3s ease, transform 0.3s ease;
+}
+
+.public-input-card:hover {
+  border-color: var(--solana-green);
+  transform: translateY(-2px);
+}
+
+.deploy-result {
+  margin-top: 1rem;
+  padding: 1rem;
+  background: rgba(20, 241, 149, 0.05);
+  border: 1px solid rgba(20, 241, 149, 0.2);
   border-radius: 8px;
+}
+
+.deploy-result-item {
+  margin-bottom: 0.75rem;
+}
+
+.deploy-result-item:last-child {
+  margin-bottom: 0;
+}
+
+.deploy-label {
+  display: block;
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 0.25rem;
+}
+
+.explorer-link {
+  display: block;
   font-family: 'JetBrains Mono', monospace;
-  font-size: 0.7rem;
-  overflow-x: auto;
-  max-width: 100%;
+  font-size: 0.75rem;
+  color: var(--solana-green);
+  text-decoration: none;
+  word-break: break-all;
+  transition: color 0.3s ease;
+}
+
+.explorer-link:hover {
+  color: var(--solana-purple);
+  text-decoration: underline;
 }
 
 /* ================================
@@ -2741,7 +2942,7 @@ function printSuccessMessage(options) {
   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")
+    pc3.dim("Learn more: ") + pc3.blue("https://github.com/izi-noir")
   );
   console.log();
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-izi-noir",
-  "version": "0.2.10",
+  "version": "0.2.12",
   "description": "CLI to scaffold IZI-NOIR ZK projects",
   "type": "module",
   "bin": {
@@ -41,7 +41,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/izi-noir/izi-noir.git",
+    "url": "https://github.com/izi-noir.git",
     "directory": "packages/create-izi-noir"
   }
 }