Show icons for setup export

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

@@ -81,6 +81,7 @@ function App() {
         if (appState.autoCompile) await compileCircuit(plugin, appState)
       })()
       setIsContentChanged(false)
+      if (appState.setupExportStatus === 'done') dispatch({ type: 'SET_SETUP_EXPORT_STATUS', payload: 'update' })
     }
   }, [appState.autoCompile, isContentChanged])
 

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

@@ -121,7 +121,7 @@ export function Container () {
               <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}>
+              <Toggler title='circuit.setupExports' dataId='setup_exports_toggler' show={!circuitApp.appState.setupExportStatus} icon={ circuitApp.appState.setupExportStatus === 'done' ? 'fas fa-check-circle text-success' : circuitApp.appState.setupExportStatus === 'update' ? 'fas fa-exclamation-triangle text-warning' : null }>
                 <>
                   <SetupExports />
                   <RenderIf condition={circuitApp.appState.status !== 'exporting'}>
@@ -131,7 +131,7 @@ export function Container () {
               </Toggler>
             </RenderIf>
             <RenderIf condition={circuitApp.appState.signalInputs.length > 0}>
-              <Toggler title='circuit.computeWitness' dataId='witness_toggler'>
+              <Toggler title='circuit.computeWitness' dataId='witness_toggler' show={!!circuitApp.appState.setupExportStatus}>
                 <>
                   <WitnessSection plugin={circuitApp.plugin} signalInputs={circuitApp.appState.signalInputs} status={circuitApp.appState.status} />
                   <RenderIf condition={circuitApp.appState.status !== 'computing'}>

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

@@ -21,6 +21,7 @@ export function SetupExports () {
       circuitApp.dispatch({ type: 'SET_COMPILER_STATUS', payload: 'exporting' })
       await runSetupAndExport(circuitApp.plugin, circuitApp.appState)
       circuitApp.dispatch({ type: 'SET_COMPILER_STATUS', payload: 'idle' })
+      circuitApp.dispatch({ type: 'SET_SETUP_EXPORT_STATUS', payload: 'done' })
     } catch (e) {
       circuitApp.dispatch({ type: 'SET_COMPILER_STATUS', payload: 'errored' })
       circuitApp.dispatch({ type: 'SET_SETUP_EXPORT_FEEDBACK', payload: e.message })
@@ -44,6 +45,7 @@ export function SetupExports () {
               onClick={() => circuitApp.dispatch({ type: 'SET_PROVING_SCHEME', payload: 'groth16' })}
               value='groth16'
               checked={circuitApp.appState.provingScheme === 'groth16'}
+              readOnly
             />
             <label className="form-check-label custom-control-label" htmlFor="groth16ProvingScheme" style={{ paddingTop: '0.125rem' }}>
               Groth16
@@ -58,6 +60,7 @@ export function SetupExports () {
               onClick={() => circuitApp.dispatch({ type: 'SET_PROVING_SCHEME', payload: 'plonk' })}
               value='plonk'
               checked={circuitApp.appState.provingScheme === 'plonk'}
+              readOnly
             />
             <label className="form-check-label custom-control-label" htmlFor="plonkProvingScheme" style={{ paddingTop: '0.125rem' }}>
               Plonk

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

@@ -1,10 +1,14 @@
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import { FormattedMessage } from "react-intl"
 import { RenderIf, RenderIfNot } from "@remix-ui/helper"
 
-export function Toggler ({ children, title, dataId, show = false }: { children: JSX.Element, title: string, dataId: string, show?: boolean }) {
+export function Toggler ({ children, title, dataId, show = false, icon }: { children: JSX.Element, title: string, dataId: string, show?: boolean, icon?: string }) {
   const [toggleExpander, setToggleExpander] = useState<boolean>(show)
 
+  useEffect(() => {
+    setToggleExpander(show)
+  }, [show])
+
   const toggleConfigurations = () => {
     setToggleExpander(!toggleExpander)
   }
@@ -15,6 +19,7 @@ export function Toggler ({ children, title, dataId, show = false }: { children:
         <div className="d-flex">
           <label className="mt-1 circuit_config_section">
             <FormattedMessage id={title} />
+            { icon && <span className={`${icon} border-0 p-0 ml-2`} aria-hidden="true"></span> }
           </label>
         </div>
         <div>

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

@@ -34,34 +34,32 @@ export function WitnessSection ({ plugin, signalInputs, status }: {plugin: Circo
   }
 
   return (
-    <div className="border-bottom flex-column">
-      <div className="flex-column d-flex">
-        <RenderIf condition={signalInputs.length > 0}>
-          <>
-            {
-              signalInputs.map((input, index) => (
-                <div className="mb-2 ml-0" key={index}>
-                  <label className="circuit_inner_label form-check-label" htmlFor="circuitPrimeSelector">
-                    <FormattedMessage id="circuit.signalInput" /> { input }
-                  </label>
-                  <input className="form-control m-0 txinput" placeholder={input} name={input} onChange={handleSignalInput} data-id={`circuit_input_${input}`} />
-                </div>
-              ))
-            }
-            <button
-              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 === "computing")}
-              data-id="compute_witness_btn"
-            >
-              <RenderIf condition={status === 'computing'}>
-                <i className="fas fa-sync fa-spin mr-2" aria-hidden="true"></i>
-              </RenderIf>
-              <FormattedMessage id="circuit.compute" />
-            </button>
-          </>
-        </RenderIf>
-      </div>
+    <div className="flex-column d-flex">
+      <RenderIf condition={signalInputs.length > 0}>
+        <>
+          {
+            signalInputs.map((input, index) => (
+              <div className="mb-2 ml-0" key={index}>
+                <label className="circuit_inner_label form-check-label" htmlFor="circuitPrimeSelector">
+                  <FormattedMessage id="circuit.signalInput" /> { input }
+                </label>
+                <input className="form-control m-0 txinput" placeholder={input} name={input} onChange={handleSignalInput} data-id={`circuit_input_${input}`} />
+              </div>
+            ))
+          }
+          <button
+            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 === "computing")}
+            data-id="compute_witness_btn"
+          >
+            <RenderIf condition={status === 'computing'}>
+              <i className="fas fa-sync fa-spin mr-2" aria-hidden="true"></i>
+            </RenderIf>
+            <FormattedMessage id="circuit.compute" />
+          </button>
+        </>
+      </RenderIf>
     </div>
   )
 }

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

@@ -14,6 +14,7 @@ export const appInitialState: AppState = {
   compilerFeedback: null,
   computeFeedback: null,
   setupExportFeedback: null,
+  setupExportStatus: null,
   provingScheme: 'groth16',
   ptauList: [
     {
@@ -142,6 +143,12 @@ export const appReducer = (state = appInitialState, action: Actions): AppState =
       exportVerificationKey: action.payload
     }
 
+  case 'SET_SETUP_EXPORT_STATUS':
+    return {
+      ...state,
+      setupExportStatus: action.payload
+    }
+
   default:
     throw new Error()
   }

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

@@ -6,6 +6,8 @@ export type CompilerStatus = "compiling" | "computing" | "idle" | "errored" | "w
 
 export type ProvingScheme = 'groth16' | 'plonk'
 
+export type SetupExportStatus = 'done' | 'update'
+
 export type PtauFile = {
   name: string,
   power: number,
@@ -36,7 +38,8 @@ export interface ActionPayloadTypes {
   // SET_RANDOM_TEXT: string,
   // SET_RANDOM_BEACON: string
   SET_EXPORT_VERIFICATION_CONTRACT: boolean,
-  SET_EXPORT_VERIFICATION_KEY: boolean
+  SET_EXPORT_VERIFICATION_KEY: boolean,
+  SET_SETUP_EXPORT_STATUS: SetupExportStatus
 }
 export interface Action<T extends keyof ActionPayloadTypes> {
   type: T
@@ -58,6 +61,7 @@ export interface AppState {
   compilerFeedback: string | CompilerReport[],
   computeFeedback: string | CompilerReport[],
   setupExportFeedback: string | CompilerReport[],
+  setupExportStatus: SetupExportStatus,
   provingScheme: ProvingScheme,
   ptauList: Array<PtauFile>,
   ptauValue: string,