feature: compile & verifier.sol

hsy822 · hsy822 · commit 9c24f9f4a183 · 2025-10-22T09:52:25.000+09:00
diff --git a/apps/noir-compiler/src/app/app.tsx b/apps/noir-compiler/src/app/app.tsx
@@ -44,6 +44,19 @@ function App() {
         dispatch({ type: 'SET_COMPILER_FEEDBACK', payload: null })
       })
       plugin.internalEvents.on('noir_compiling_errored', noirCompilerErrored)
+
+      plugin.internalEvents.on('noir_proofing_start', () => {
+        dispatch({ type: 'SET_PROOFING_STATUS', payload: 'proofing' })
+      })
+      plugin.internalEvents.on('noir_proofing_done', (inputs) => {
+        dispatch({ type: 'SET_PROOFING_STATUS', payload: 'succeed' })
+        dispatch({ type: 'SET_VERIFIER_INPUTS', payload: inputs })
+      })
+      plugin.internalEvents.on('noir_proofing_errored', (error: Error) => {
+        dispatch({ type: 'SET_PROOFING_STATUS', payload: 'errored' })
+        dispatch({ type: 'SET_COMPILER_FEEDBACK', payload: error.message }) 
+      })
+
       setIsPluginActivated(true)
     })
   }, [])
diff --git a/apps/noir-compiler/src/app/components/container.tsx b/apps/noir-compiler/src/app/components/container.tsx
@@ -37,11 +37,23 @@ export function Container () {
     compileNoirCircuit(noirApp.plugin, noirApp.appState)
   }
 
+  const handleGenerateProofClick = () => {
+    if (!noirApp.appState.filePath) {
+      console.error("No file path selected for generating proof.")
+      return
+    }
+    noirApp.plugin.generateProof(noirApp.appState.filePath)
+  }
+
   const handleViewProgramArtefact = (e: React.MouseEvent<HTMLAnchorElement>) => {
     e.preventDefault()
+    const projectRoot = noirApp.appState.filePath.substring(0, noirApp.appState.filePath.lastIndexOf('/src/'))
+    const buildPath = projectRoot === '' ? 'build' : `${projectRoot}/build`
     noirApp.plugin.call('fileManager', 'open', 'build/program.json')
   }
 
+  const formattedPublicInputsString = JSON.stringify(noirApp.appState.formattedPublicInputs, null, 2)
+
   return (
     <section>
       <article>
@@ -66,9 +78,66 @@ export function Container () {
               <CompilerFeedback feedback={noirApp.appState.compilerFeedback} filePathToId={noirApp.appState.filePathToId} openErrorLocation={handleOpenErrorLocation} hideWarnings={noirApp.appState.hideWarnings} askGPT={askGPT} />
             </RenderIf>
             <RenderIf condition={noirApp.appState.status === 'succeed'}>
-              <a data-id="view-noir-compilation-result" className="cursor-pointer text-decoration-none" href='#' onClick={handleViewProgramArtefact}>
-                <i className="text-success mt-1 px-1 fas fa-check"></i> View compiled noir program artefact.
-              </a>
+              <>
+                <div className='mt-2'>
+                  <a data-id="view-noir-compilation-result" className="cursor-pointer text-decoration-none" href='#' onClick={handleViewProgramArtefact}>
+                    <i className="text-success mt-1 px-1 fas fa-check"></i> View compiled noir program artefact.
+                  </a>
+                </div>
+
+                <div className="mt-2">
+                <button
+                  id="noir_generate_proof"
+                  className="btn btn-primary w-100"
+                  onClick={handleGenerateProofClick}
+                  disabled={noirApp.appState.proofingStatus === 'proofing' || noirApp.appState.status === 'compiling'}
+                >
+                  {noirApp.appState.proofingStatus === 'proofing' ? (
+                    <>
+                      <span className="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+                      <span className="ms-1">Generating Proof...</span>
+                    </>
+                  ) : (
+                    <FormattedMessage id="noir.generateProof" defaultMessage="Generate Proof" />
+                  )}
+                </button>
+              </div>
+              </>   
+            </RenderIf>
+            <RenderIf condition={noirApp.appState.proofingStatus === 'succeed' && !!noirApp.appState.formattedProof}>
+              <div className="mt-3">
+                <label className="noir_label form-check-label">
+                  <FormattedMessage id="noir.verifierInputs" defaultMessage="Verifier Inputs" />
+                </label>
+                
+                {/* _proof (bytes) */}
+                <div className="mt-2">
+                  <label className="form-label small mb-0">
+                    <code>_proof (bytes)</code>
+                  </label>
+                  <textarea
+                    className="form-control form-control-sm"
+                    value={noirApp.appState.formattedProof}
+                    readOnly
+                    rows={4}
+                    data-id="noir-verifier-input-proof"
+                  ></textarea>
+                </div>
+
+                {/* _publicInputs (bytes32[]) */}
+                <div className="mt-2">
+                  <label className="form-label small mb-0">
+                    <code>_publicInputs (bytes32[])</code>
+                  </label>
+                  <textarea
+                    className="form-control form-control-sm"
+                    value={formattedPublicInputsString}
+                    readOnly
+                    rows={4}
+                    data-id="noir-verifier-input-public-inputs"
+                  ></textarea>
+                </div>
+              </div>
             </RenderIf>
           </div>
         </div>
diff --git a/apps/noir-compiler/src/app/reducers/state.ts b/apps/noir-compiler/src/app/reducers/state.ts
@@ -6,7 +6,10 @@ export const appInitialState: AppState = {
   autoCompile: false,
   hideWarnings: false,
   status: 'idle',
-  compilerFeedback: ''
+  compilerFeedback: '',
+  proofingStatus: 'idle',
+  formattedProof: '',
+  formattedPublicInputs: []
 }
 
 export const appReducer = (state = appInitialState, action: Actions): AppState => {
@@ -37,11 +40,41 @@ export const appReducer = (state = appInitialState, action: Actions): AppState =
     }
 
   case 'SET_COMPILER_STATUS':
+    if (action.payload === 'compiling') {
+      return {
+        ...state,
+        status: action.payload,
+        proofingStatus: 'idle',
+        formattedProof: '',
+        formattedPublicInputs: []
+      }
+    }
     return {
       ...state,
       status: action.payload
     }
 
+  case 'SET_PROOFING_STATUS':
+    if (action.payload === 'proofing') {
+      return {
+        ...state,
+        proofingStatus: action.payload,
+        formattedProof: '',
+        formattedPublicInputs: []
+      }
+    }
+    return {
+      ...state,
+      proofingStatus: action.payload
+    }
+  
+  case 'SET_VERIFIER_INPUTS':
+    return {
+      ...state,
+      formattedProof: action.payload.proof,
+      formattedPublicInputs: action.payload.publicInputs
+    }
+
   default:
     throw new Error()
   }
diff --git a/apps/noir-compiler/src/app/services/noirPluginClient.ts b/apps/noir-compiler/src/app/services/noirPluginClient.ts
@@ -5,6 +5,14 @@ import { DEFAULT_TOML_CONFIG } from '../actions/constants'
 import NoirParser from './noirParser'
 import { extractNameFromKey } from '@remix-ui/helper'
 import axios from 'axios'
+import JSZip from 'jszip'
+import { VerifierInputs } from '../types'
+
+interface NoirAbi {
+  parameters: { name: string, type: any, visibility: 'public' | 'private' }[]
+  return_type?: { visibility: 'public' | 'private' }
+}
+
 export class NoirPluginClient extends PluginClient {
   public internalEvents: EventManager
   public parser: NoirParser
@@ -17,7 +25,7 @@ export class NoirPluginClient extends PluginClient {
 
   constructor() {
     super()
-    this.methods = ['init', 'parse', 'compile']
+    this.methods = ['init', 'parse', 'compile', 'generateProof']
     createClient(this)
     this.internalEvents = new EventManager()
     this.parser = new NoirParser()
@@ -71,6 +79,10 @@ export class NoirPluginClient extends PluginClient {
     }
   }
 
+  private bytesToHex(bytes: Uint8Array): string {
+    return Array.from(bytes, byte => byte.toString(16).padStart(2, '0')).join('');
+  }
+
   generateRequestID(): string {
     const timestamp = Math.floor(Date.now() / 1000)
     const random = Math.random().toString(36).substring(2, 15)
@@ -151,9 +163,10 @@ export class NoirPluginClient extends PluginClient {
           const { compiledJson, proverToml } = response.data
 
           const buildPath = projectRoot === '/' ? 'build' : `${projectRoot}/build`
-
           this.call('fileManager', 'writeFile', `${buildPath}/program.json`, compiledJson)
-          this.call('fileManager', 'writeFile', `${buildPath}/prover.toml`, proverToml)
+
+          const proverTomlPath = projectRoot === '/' ? 'Prover.toml' : `${projectRoot}/Prover.toml`
+          this.call('fileManager', 'writeFile', proverTomlPath, proverToml)
 
           this.internalEvents.emit('noir_compiling_done')
           this.emit('statusChanged', { key: 'succeed', title: 'Noir circuit compiled successfully', type: 'success' })
@@ -169,6 +182,140 @@ export class NoirPluginClient extends PluginClient {
     }
   }
 
+  async generateProof(path: string): Promise<void> {
+    const requestID = this.generateRequestID()
+    console.log(`[${requestID}] New proof generation request for: ${path}`)
+
+    // this.internalEvents.emit('noir_proofing_start')
+    this.internalEvents.emit('noir_proofing_start')
+    this.emit('statusChanged', { key: 'loading', title: 'Generating Proof...', type: 'info' })
+    this.call('terminal', 'log', { type: 'log', value: 'Generating proof for ' + path })
+
+    let projectRoot: string | null = null
+
+    try {
+      if (this.ws.readyState !== WebSocket.OPEN) {
+        throw new Error('WebSocket connection not open. Cannot generate proof.')
+      }
+      
+      projectRoot = await this.findProjectRoot(path)
+      if (projectRoot === null) {
+        throw new Error(`Invalid project structure for '${path}'. Could not find project root.`)
+      }
+
+      // @ts-ignore
+      const zippedProject: Blob = await this.call('fileManager', 'download', projectRoot, false)
+      const formData = new FormData()
+      formData.append('file', zippedProject, `${extractNameFromKey(path)}.zip`)
+
+      this.ws.send(JSON.stringify({ requestId: requestID }))
+    
+      // @ts-ignore
+      const response = await axios.post(`${BASE_URL}/generate-proof-with-verifier?requestId=${requestID}`, formData, {
+        responseType: 'blob'
+      })
+
+      if (response.status !== 200) {
+        try {
+          const errorJson = JSON.parse(await response.data.text())
+          throw new Error(errorJson.error || `Backend returned status ${response.status}`)
+        } catch (parseError) {
+          throw new Error(`Backend returned status ${response.status}: ${response.statusText}`)
+        }
+      }
+
+      const receivedBlob = response.data
+      this.call('terminal', 'log', { type: 'log', value: 'Received proof artifacts. Extracting files...' })
+
+      const zip = await JSZip.loadAsync(receivedBlob)
+      const buildPath = projectRoot === '/' ? 'build' : `${projectRoot}/build`
+      
+      const filesToSave = {
+        'proof': { path: `${buildPath}/proof`, type: 'hex' },
+        'vk': { path: `${buildPath}/vk`, type: 'hex' },
+        'verifier/solidity/Verifier.sol': { path: 'contracts/Verifier.sol', type: 'string' },
+        'program.json': { path: `${buildPath}/program.json`, type: 'string' },
+      }
+
+      for (const [zipPath, info] of Object.entries(filesToSave)) {
+        const file = zip.file(zipPath)
+        if (file) {
+          let content: string;
+          if (info.type === 'hex') {
+            const bytes = await file.async('uint8array');
+            content = this.bytesToHex(bytes);
+          } else {
+            content = await file.async('string');
+          }
+          await this.call('fileManager', 'writeFile', info.path, content)
+          // @ts-ignore
+          this.call('terminal', 'log', { type: 'log', value: `Wrote artifact: ${info.path}` })
+        }
+      }
+
+
+      this.call('terminal', 'log', { type: 'log', value: 'Formatting Verifier.sol inputs...' })
+      
+      const proofFile = zip.file('formatted_proof.txt');
+      const inputsFile = zip.file('formatted_public_inputs.json');
+
+      if (!proofFile || !inputsFile) {
+        throw new Error("Formatted proof or public inputs not found in zip response from backend.");
+      }
+
+      const formattedProof = await proofFile.async('string');
+      const formattedPublicInputsStr = await inputsFile.async('string');
+      const formattedPublicInputs = JSON.parse(formattedPublicInputsStr);
+      
+      const verifierInputs: VerifierInputs = {
+        proof: formattedProof,
+        publicInputs: formattedPublicInputs
+      }
+
+      this.internalEvents.emit('noir_proofing_done', verifierInputs)
+
+      this.emit('statusChanged', { key: 'succeed', title: 'Proof generated successfully', type: 'success' })
+      this.call('terminal', 'log', { type: 'log', value: 'Proof generation and file extraction complete.' })
+      // this.internalEvents.emit('noir_proofing_done')
+
+    } catch (e) {
+      console.error(`[${requestID}] Proof generation failed:`, e)
+      let errorMsg = e.message || 'Unknown error during proof generation'
+
+      if (e.response && e.response.data) {
+        try {
+          let errorData = e.response.data
+          
+          if (e.response.data instanceof Blob) {
+            const errorText = await e.response.data.text()
+            errorData = JSON.parse(errorText)
+          }
+
+          if (errorData.error) {
+            errorMsg = errorData.error
+          } else if (typeof errorData === 'string') {
+            errorMsg = errorData
+          }
+        } catch (parseError) {
+          console.error('Failed to parse backend error response:', parseError)
+          errorMsg = e.response.statusText || e.message
+        }
+      }
+      this.internalEvents.emit('noir_proofing_errored', e)
+      this.call('terminal', 'log', { type: 'error', value: errorMsg })
+      // this.internalEvents.emit('noir_proofing_errored', new Error(errorMsg))
+
+      if (projectRoot !== null) {
+        try {
+          const buildPath = projectRoot === '/' ? 'build' : `${projectRoot}/build`
+          await this.call('fileManager', 'writeFile', `${buildPath}/proof_error.log`, errorMsg)
+        } catch (logError) {
+          console.error('Failed to write error log file:', logError)
+        }
+      }
+    }
+  }
+
   async parse(path: string, content?: string): Promise<void> {
     if (!content) content = await this.call('fileManager', 'readFile', path)
     const result = this.parser.parseNoirCode(content)
diff --git a/apps/noir-compiler/src/app/types/index.ts b/apps/noir-compiler/src/app/types/index.ts
@@ -3,6 +3,8 @@ import { Dispatch } from 'react'
 import type { NoirPluginClient } from '../services/noirPluginClient'
 
 export type CompilerStatus = "compiling" | "idle" | "errored" | "warning" | "succeed"
+export type ProofingStatus = "idle" | "proofing" | "succeed" | "errored"
+
 export interface INoirAppContext {
   appState: AppState
   dispatch: Dispatch<Actions>,
@@ -15,15 +17,25 @@ export interface AppState {
   autoCompile: boolean,
   hideWarnings: boolean,
   status: CompilerStatus,
-  compilerFeedback: string
+  compilerFeedback: string,
+  proofingStatus: ProofingStatus,
+  formattedProof: string,
+  formattedPublicInputs: string[]
+}
+
+export interface VerifierInputs {
+  proof: string,
+  publicInputs: string[]
 }
 
 export interface ActionPayloadTypes {
   SET_AUTO_COMPILE: boolean,
   SET_HIDE_WARNINGS: boolean,
   SET_FILE_PATH: string,
   SET_COMPILER_FEEDBACK: string,
-  SET_COMPILER_STATUS: CompilerStatus
+  SET_COMPILER_STATUS: CompilerStatus,
+  SET_PROOFING_STATUS: ProofingStatus,
+  SET_VERIFIER_INPUTS: VerifierInputs
 }
 export interface Action<T extends keyof ActionPayloadTypes> {
   type: T
