create-izi-noir 0.2.10 → 0.2.11

package/dist/index.js

@@ -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,6 +728,7 @@ 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
@@ -745,6 +746,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,8 +766,13 @@ 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);
     }
@@ -791,21 +798,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>
@@ -1526,22 +1574,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;
 }
 
 /* ================================

package/package.json

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