Re-order feedback alert and abstract r1cs function

apps/circuit-compiler/src/app/actions/index.ts

@@ -12,24 +12,12 @@ export const compileCircuit = async (plugin: CircomPluginClient, appState: AppSt
       console.log('Existing circuit compilation in progress')
     }
   } catch (e) {
+    plugin.emit('statusChanged', { key: 'error', title: e.message, type: 'error' })
     plugin.internalEvents.emit('circuit_compiling_errored', e)
     console.error(e)
   }
 }
 
-export const generateR1cs = async (plugin: CircomPluginClient, appState: AppState) => {
-  try {
-    if (appState.status !== "generating") {
-      await plugin.generateR1cs(appState.filePath, { version: appState.version, prime: appState.primeValue })
-    } else {
-      console.log('Existing r1cs generation in progress')
-    }
-  } catch (e) {
-    plugin.internalEvents.emit('circuit_generating_r1cs_errored', e)
-    console.error('Generating R1CS failed: ', e)
-  }
-}
-
 export const computeWitness = async (plugin: CircomPluginClient, status: string, witnessValues: Record<string, string>) => {
   try {
     if (status !== "computing") {
@@ -40,6 +28,7 @@ export const computeWitness = async (plugin: CircomPluginClient, status: string,
       console.log('Existing witness computation in progress')
     }
   } catch (e) {
+    plugin.emit('statusChanged', { key: 'error', title: e.message, type: 'error' })
     plugin.internalEvents.emit('circuit_computing_witness_errored', e)
     console.error('Computing witness failed: ', e)
   }
@@ -47,7 +36,7 @@ export const computeWitness = async (plugin: CircomPluginClient, status: string,
 
 export const runSetupAndExport = async (plugin: CircomPluginClient, appState: AppState) => {
   const ptau_final = `https://ipfs-cluster.ethdevops.io/ipfs/${appState.ptauList.find(ptau => ptau.name === appState.ptauValue)?.ipfsHash}`
-  if (appState.status !== "generating") await plugin.generateR1cs(appState.filePath, { version: appState.version, prime: appState.primeValue })
+  await plugin.generateR1cs(appState.filePath, { version: appState.version, prime: appState.primeValue })
 
   const fileName = extractNameFromKey(appState.filePath)
   const readPath = extractParentFromKey(appState.filePath) + `/.bin/${fileName.replace('.circom', '.r1cs')}`

apps/circuit-compiler/src/app/app.tsx

@@ -50,16 +50,11 @@ function App() {
     })
     plugin.internalEvents.on('circuit_compiling_errored', compilerErrored)
 
-    // r1cs events
-    plugin.internalEvents.on('circuit_generating_r1cs_start', () => dispatch({ type: 'SET_COMPILER_STATUS', payload: 'generating' }))
-    plugin.internalEvents.on('circuit_generating_r1cs_done', () => dispatch({ type: 'SET_COMPILER_STATUS', payload: 'idle' }))
-    plugin.internalEvents.on('circuit_generating_r1cs_errored', compilerErrored)
-
     // witness events
     plugin.internalEvents.on('circuit_computing_witness_start', () => dispatch({ type: 'SET_COMPILER_STATUS', payload: 'computing' }))
     plugin.internalEvents.on('circuit_computing_witness_done', () => {
       dispatch({ type: 'SET_COMPILER_STATUS', payload: 'idle' })
-      dispatch({ type: 'SET_COMPILER_FEEDBACK', payload: null })
+      dispatch({ type: 'SET_COMPUTE_FEEDBACK', payload: null })
     })
     plugin.internalEvents.on('circuit_computing_witness_errored', compilerErrored)
 
@@ -118,9 +113,9 @@ function App() {
     try {
       const report = JSON.parse(err.message)
 
-      dispatch({ type: 'SET_COMPILER_FEEDBACK', payload: report })
+      dispatch({ type: 'SET_COMPUTE_FEEDBACK', payload: report })
     } catch (e) {
-      dispatch({ type: 'SET_COMPILER_FEEDBACK', payload: err.message })
+      dispatch({ type: 'SET_COMPUTE_FEEDBACK', payload: err.message })
     }
   }
 

apps/circuit-compiler/src/app/components/compileBtn.tsx

@@ -22,16 +22,13 @@ export function CompileBtn () {
       <button
         className="btn btn-primary btn-block d-block w-100 text-break mb-1 mt-1"
         onClick={() => { compileCircuit(plugin, appState) }}
-        disabled={(appState.filePath === "") || (appState.status === "compiling") || (appState.status === "generating")}
+        disabled={(appState.filePath === "") || (appState.status === "compiling")}
         data-id="compile_circuit_btn"
       >
         <div className="d-flex align-items-center justify-content-center">
           <RenderIf condition={appState.status === 'compiling'}>
             <i className="fas fa-sync fa-spin mr-2" aria-hidden="true"></i>
           </RenderIf>
-          <RenderIfNot condition={appState.status === 'compiling'}>
-            <i className="fas fa-sync mr-2" aria-hidden="true"></i>
-          </RenderIfNot>
           <div className="text-truncate overflow-hidden text-nowrap">
             <span>
               <FormattedMessage id="circuit.compile" />

apps/circuit-compiler/src/app/components/container.tsx

@@ -117,19 +117,29 @@ export function Container () {
               <Configurations setPrimeValue={handlePrimeChange} primeValue={circuitApp.appState.primeValue} versionValue={circuitApp.appState.version} />
             </Toggler>
             <CircuitActions />
+            <RenderIf condition={circuitApp.appState.status !== 'compiling'}>
+              <CompilerFeedback feedback={circuitApp.appState.compilerFeedback} filePathToId={circuitApp.appState.filePathToId} openErrorLocation={handleOpenErrorLocation} hideWarnings={circuitApp.appState.hideWarnings} askGPT={askGPT} />
+            </RenderIf>
             <RenderIf condition={circuitApp.appState.signalInputs.length > 0}>
               <Toggler title='circuit.setupExports' dataId='setup_exports_toggler' show={true}>
-                <SetupExports />
+                <>
+                  <SetupExports />
+                  <RenderIf condition={circuitApp.appState.status !== 'exporting'}>
+                    <CompilerFeedback feedback={circuitApp.appState.setupExportFeedback} filePathToId={circuitApp.appState.filePathToId} openErrorLocation={handleOpenErrorLocation} hideWarnings={circuitApp.appState.hideWarnings} askGPT={askGPT} />
+                  </RenderIf>
+                </>
               </Toggler>
             </RenderIf>
             <RenderIf condition={circuitApp.appState.signalInputs.length > 0}>
               <Toggler title='circuit.computeWitness' dataId='witness_toggler'>
-                <WitnessSection plugin={circuitApp.plugin} signalInputs={circuitApp.appState.signalInputs} status={circuitApp.appState.status} />
+                <>
+                  <WitnessSection plugin={circuitApp.plugin} signalInputs={circuitApp.appState.signalInputs} status={circuitApp.appState.status} />
+                  <RenderIf condition={circuitApp.appState.status !== 'computing'}>
+                    <CompilerFeedback feedback={circuitApp.appState.computeFeedback} filePathToId={circuitApp.appState.filePathToId} openErrorLocation={handleOpenErrorLocation} hideWarnings={circuitApp.appState.hideWarnings} askGPT={askGPT} />
+                  </RenderIf>
+                </>
               </Toggler>
             </RenderIf>
-            <RenderIf condition={(circuitApp.appState.status !== 'compiling') && (circuitApp.appState.status !== 'computing') && (circuitApp.appState.status !== 'generating')}>
-              <CompilerFeedback feedback={circuitApp.appState.feedback} filePathToId={circuitApp.appState.filePathToId} openErrorLocation={handleOpenErrorLocation} hideWarnings={circuitApp.appState.hideWarnings} askGPT={askGPT} />
-            </RenderIf>
           </div>
         </div>
       </article>

apps/circuit-compiler/src/app/components/feedback.tsx

@@ -1,11 +1,11 @@
 import { useState } from 'react'
 import { CompilerFeedbackProps, CompilerReport } from '../types'
 import { RenderIf } from '@remix-ui/helper'
-import {CopyToClipboard} from '@remix-ui/clipboard'
+import { CopyToClipboard } from '@remix-ui/clipboard'
 import { FeedbackAlert } from './feedbackAlert'
 
 export function CompilerFeedback ({ feedback, filePathToId, hideWarnings, openErrorLocation, askGPT }: CompilerFeedbackProps) {
-  const [ showException, setShowException ] = useState<boolean>(true)
+  const [showException, setShowException] = useState<boolean>(true)
 
   const handleCloseException = () => {
     setShowException(false)
@@ -23,46 +23,50 @@ export function CompilerFeedback ({ feedback, filePathToId, hideWarnings, openEr
 
   return (
     <div>
-      <div className="circuit_errors_box py-4">
-        <RenderIf condition={ (typeof feedback === "string") && showException }>
-          <div className="circuit_feedback error alert alert-danger" data-id="circuit_feedback">
-            <span> <>{ feedback }</> </span>
-            <div className="close" data-id="renderer" onClick={handleCloseException}>
-              <i className="fas fa-times"></i>
-            </div>
-            <div className="d-flex pt-1 flex-row-reverse">
-              <span className="ml-3 pt-1 py-1" >
-                <CopyToClipboard content={feedback} className="p-0 m-0 far fa-copy error" direction={'top'} />
-              </span>
-            </div>
-          </div>
-        </RenderIf>
-        <RenderIf condition={ Array.isArray(feedback) }>
-          <>
-            {
-              Array.isArray(feedback) && feedback.map((response, index) => (
-                <div key={index} onClick={() => handleOpenError(response)}>
-                  <RenderIf condition={response.type === 'Error'}>
-                    <div className={`circuit_feedback ${response.type.toLowerCase()} alert alert-danger`} data-id="circuit_feedback">
-                      <FeedbackAlert
-                        message={response.message + (response.labels[0] ? ": " + response.labels[0].message + ` ${filePathToId[response.labels[0].file_id]}:${response.labels[0].range.start}:${response.labels[0].range.end}` : '')}
-                        askGPT={ () => handleAskGPT(response) } />
-                    </div>
-                  </RenderIf>
-                  <RenderIf condition={(response.type === 'Warning') && !hideWarnings}>
-                    <div className={`circuit_feedback ${response.type.toLowerCase()} alert alert-warning`} data-id="circuit_feedback">
-                      <FeedbackAlert
-                        message={response.message}
-                        askGPT={() => { handleAskGPT(response) }} />
-                    </div>
-                  </RenderIf>
+      {
+        (feedback && typeof feedback === 'string') || (Array.isArray(feedback) && feedback.length > 0) ? (
+          <div className="circuit_errors_box">
+            <RenderIf condition={ (typeof feedback === "string") && showException }>
+              <div className="circuit_feedback error alert alert-danger" data-id="circuit_feedback">
+                <span> <>{ feedback }</> </span>
+                <div className="close" data-id="renderer" onClick={handleCloseException}>
+                  <i className="fas fa-times"></i>
                 </div>
-              )
-              )
-            }
-          </>
-        </RenderIf>
-      </div>
+                <div className="d-flex pt-1 flex-row-reverse">
+                  <span className="ml-3 pt-1 py-1" >
+                    <CopyToClipboard content={feedback} className="p-0 m-0 far fa-copy error" direction={'top'} />
+                  </span>
+                </div>
+              </div>
+            </RenderIf>
+            <RenderIf condition={ Array.isArray(feedback) }>
+              <>
+                {
+                  Array.isArray(feedback) && feedback.map((response, index) => (
+                    <div key={index} onClick={() => handleOpenError(response)}>
+                      <RenderIf condition={response.type === 'Error'}>
+                        <div className={`circuit_feedback ${response.type.toLowerCase()} alert alert-danger`} data-id="circuit_feedback">
+                          <FeedbackAlert
+                            message={response.message + (response.labels[0] ? ": " + response.labels[0].message + ` ${filePathToId[response.labels[0].file_id]}:${response.labels[0].range.start}:${response.labels[0].range.end}` : '')}
+                            askGPT={ () => handleAskGPT(response) } />
+                        </div>
+                      </RenderIf>
+                      <RenderIf condition={(response.type === 'Warning') && !hideWarnings}>
+                        <div className={`circuit_feedback ${response.type.toLowerCase()} alert alert-warning`} data-id="circuit_feedback">
+                          <FeedbackAlert
+                            message={response.message}
+                            askGPT={() => { handleAskGPT(response) }} />
+                        </div>
+                      </RenderIf>
+                    </div>
+                  )
+                  )
+                }
+              </>
+            </RenderIf>
+          </div>
+        ) : <></>
+      }
     </div>
   )
 }

apps/circuit-compiler/src/app/components/setupExports.tsx

@@ -16,6 +16,18 @@ export function SetupExports () {
   //   circuitApp.dispatch({ type: 'SET_RANDOM_BEACON', payload: value })
   // }
 
+  const handleRunSetup = async () => {
+    try {
+      circuitApp.dispatch({ type: 'SET_COMPILER_STATUS', payload: 'exporting' })
+      await runSetupAndExport(circuitApp.plugin, circuitApp.appState)
+      circuitApp.dispatch({ type: 'SET_COMPILER_STATUS', payload: 'idle' })
+    } catch (e) {
+      circuitApp.dispatch({ type: 'SET_COMPILER_STATUS', payload: 'errored' })
+      circuitApp.dispatch({ type: 'SET_SETUP_EXPORT_FEEDBACK', payload: e.message })
+      console.error(e)
+    }
+  }
+
   return (
     <div className="flex-column">
       <div className="flex-column d-flex">
@@ -115,7 +127,7 @@ export function SetupExports () {
               <FormattedMessage id="circuit.exportVerificationKey" />
             </label>
           </div>
-          <SetupExportsBtn handleRunSetup={() => runSetupAndExport(circuitApp.plugin, circuitApp.appState)} />
+          <SetupExportsBtn handleRunSetup={handleRunSetup} status={circuitApp.appState.status} />
         </div>
       </div>
     </div>

apps/circuit-compiler/src/app/components/setupExportsBtn.tsx

@@ -1,7 +1,8 @@
-import { CustomTooltip } from "@remix-ui/helper"
+import { CustomTooltip, RenderIf } from "@remix-ui/helper"
 import { FormattedMessage } from "react-intl"
+import { CompilerStatus } from "../types"
 
-export function SetupExportsBtn ({ handleRunSetup }: { handleRunSetup: () => void }) {
+export function SetupExportsBtn ({ handleRunSetup, status }: { handleRunSetup: () => Promise<void>, status: CompilerStatus }) {
   return <button
     className="btn btn-secondary btn-block d-block w-100 text-break mt-2"
     onClick={handleRunSetup}
@@ -18,6 +19,9 @@ export function SetupExportsBtn ({ handleRunSetup }: { handleRunSetup: () => voi
       }
     >
       <div className="d-flex align-items-center justify-content-center">
+        <RenderIf condition={status === 'exporting'}>
+          <i className="fas fa-sync fa-spin mr-2" aria-hidden="true"></i>
+        </RenderIf>
         <div className="text-truncate overflow-hidden text-nowrap">
           <span>
             <FormattedMessage id="circuit.runSetup" />

apps/circuit-compiler/src/app/components/witness.tsx

@@ -34,7 +34,7 @@ export function WitnessSection ({ plugin, signalInputs, status }: {plugin: Circo
   }
 
   return (
-    <div className="pb-2 border-bottom flex-column">
+    <div className="border-bottom flex-column">
       <div className="flex-column d-flex">
         <RenderIf condition={signalInputs.length > 0}>
           <>
@@ -49,17 +49,14 @@ export function WitnessSection ({ plugin, signalInputs, status }: {plugin: Circo
               ))
             }
             <button
-              className="btn btn-sm btn-secondary"
+              className="btn btn-secondary btn-block d-block w-100 text-break mb-1 mt-1"
               onClick={() => { computeWitness(plugin, status, witnessValues) }}
-              disabled={(status === "compiling") || (status === "generating") || (status === "computing")}
+              disabled={(status === "compiling") || (status === "computing")}
               data-id="compute_witness_btn"
             >
               <RenderIf condition={status === 'computing'}>
                 <i className="fas fa-sync fa-spin mr-2" aria-hidden="true"></i>
               </RenderIf>
-              <RenderIfNot condition={status === 'computing'}>
-                <i className="fas fa-sync mr-2" aria-hidden="true"></i>
-              </RenderIfNot>
               <FormattedMessage id="circuit.compute" />
             </button>
           </>

apps/circuit-compiler/src/app/reducers/state.ts

@@ -11,7 +11,9 @@ export const appInitialState: AppState = {
   autoCompile: false,
   hideWarnings: false,
   signalInputs: [],
-  feedback: null,
+  compilerFeedback: null,
+  computeFeedback: null,
+  setupExportFeedback: null,
   provingScheme: 'groth16',
   ptauList: [
     {
@@ -83,7 +85,19 @@ export const appReducer = (state = appInitialState, action: Actions): AppState =
   case 'SET_COMPILER_FEEDBACK':
     return {
       ...state,
-      feedback: action.payload
+      compilerFeedback: action.payload
+    }
+
+  case 'SET_COMPUTE_FEEDBACK':
+    return {
+      ...state,
+      computeFeedback: action.payload
+    }
+
+  case 'SET_SETUP_EXPORT_FEEDBACK':
+    return {
+      ...state,
+      setupExportFeedback: action.payload
     }
 
   case 'SET_FILE_PATH_TO_ID':

apps/circuit-compiler/src/app/services/circomPluginClient.ts

@@ -197,24 +197,15 @@ export class CircomPluginClient extends PluginClient {
   }
 
   async generateR1cs (path: string, compilationConfig?: CompilationConfig): Promise<void> {
-    this.internalEvents.emit('circuit_generating_r1cs_start')
-    this.emit('statusChanged', { key: 'loading', title: 'Generating...', type: 'info' })
-    // @ts-ignore
-    this.call('terminal', 'log', { type: 'log', value: 'Generating R1CS for ' + path })
     const [parseErrors, filePathToId] = await this.parse(path)
 
     if (parseErrors && (parseErrors.length > 0)) {
       if (parseErrors[0].type === 'Error') {
-        this.internalEvents.emit('circuit_parsing_errored', parseErrors)
         this.logCompilerReport(parseErrors)
         return
       } else if (parseErrors[0].type === 'Warning') {
-        this.internalEvents.emit('circuit_parsing_warning', parseErrors)
         this.logCompilerReport(parseErrors)
       }
-    } else {
-      this.internalEvents.emit('circuit_parsing_done', parseErrors, filePathToId)
-      this.emit('statusChanged', { key: 'succeed', title: 'r1cs generated successfully', type: 'success' })
     }
     if (compilationConfig) {
       const { prime, version } = compilationConfig
@@ -232,7 +223,6 @@ export class CircomPluginClient extends PluginClient {
       this._paq.push(['trackEvent', 'circuit-compiler', 'generateR1cs', 'R1CS Generation failed'])
       throw new Error(r1csErrors)
     } else {
-      this.internalEvents.emit('circuit_generating_r1cs_done')
       const fileName = extractNameFromKey(path)
       const writePath = extractParentFromKey(path) + "/.bin/" + fileName.replace('circom', 'r1cs')
 

apps/circuit-compiler/src/app/types/index.ts

@@ -2,7 +2,7 @@ import { compiler_list } from 'circom_wasm'
 import { Dispatch } from 'react'
 import type { CircomPluginClient } from '../services/circomPluginClient'
 
-export type CompilerStatus = "compiling" | "generating" | "computing" | "idle" | "errored" | "warning"
+export type CompilerStatus = "compiling" | "computing" | "idle" | "errored" | "warning" | "exporting"
 
 export type ProvingScheme = 'groth16' | 'plonk'
 
@@ -27,7 +27,9 @@ export interface ActionPayloadTypes {
   SET_AUTO_COMPILE: boolean,
   SET_HIDE_WARNINGS: boolean,
   SET_SIGNAL_INPUTS: string[],
-  SET_COMPILER_FEEDBACK: string | CompilerReport[]
+  SET_COMPILER_FEEDBACK: string | CompilerReport[],
+  SET_COMPUTE_FEEDBACK: string | CompilerReport[],
+  SET_SETUP_EXPORT_FEEDBACK: string | CompilerReport[],
   SET_FILE_PATH_TO_ID: Record<number, string>,
   SET_PROVING_SCHEME: ProvingScheme,
   SET_PTAU_VALUE: string,
@@ -53,7 +55,9 @@ export interface AppState {
   autoCompile: boolean,
   hideWarnings: boolean,
   signalInputs: string[],
-  feedback: string | CompilerReport[],
+  compilerFeedback: string | CompilerReport[],
+  computeFeedback: string | CompilerReport[],
+  setupExportFeedback: string | CompilerReport[],
   provingScheme: ProvingScheme,
   ptauList: Array<PtauFile>,
   ptauValue: string,

apps/circuit-compiler/src/css/app.css

@@ -37,8 +37,6 @@ body {
     text-transform: uppercase;
 }
 .circuit_errors_box {
-    padding-left: 5px;
-    padding-right: 5px;
     word-break: break-word;
 }
 .circuit_feedback.success,

apps/circuit-compiler/src/profile.json

@@ -4,7 +4,7 @@
   "displayName": "Circom ZKP compiler",
   "events": [],
   "version": "2.0.0",
-  "methods": ["init", "parse", "compile", "generateR1cs"],
+  "methods": ["init", "parse", "compile"],
   "canActivate": [],
   "url": "",
   "description": "Enables circuit compilation and computing a witness for ZK proofs",