From fe0be684639a038f8475b5b84f5042295a7dcc18 Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Mon, 29 Jul 2024 15:21:44 +0100
Subject: [PATCH] Show icons for setup export

---
 apps/circuit-compiler/src/app/app.tsx         |  1 +
 .../src/app/components/container.tsx          |  4 +-
 .../src/app/components/setupExports.tsx       |  3 ++
 .../src/app/components/toggler.tsx            |  9 +++-
 .../src/app/components/witness.tsx            | 54 +++++++++----------
 .../src/app/reducers/state.ts                 |  7 +++
 apps/circuit-compiler/src/app/types/index.ts  |  6 ++-
 7 files changed, 51 insertions(+), 33 deletions(-)

diff --git a/apps/circuit-compiler/src/app/app.tsx b/apps/circuit-compiler/src/app/app.tsx
index 8dddf3c09d..747d0b89d7 100644
--- a/apps/circuit-compiler/src/app/app.tsx
+++ b/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])
 
diff --git a/apps/circuit-compiler/src/app/components/container.tsx b/apps/circuit-compiler/src/app/components/container.tsx
index 165c8c2ded..179cc7b941 100644
--- a/apps/circuit-compiler/src/app/components/container.tsx
+++ b/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'}>
diff --git a/apps/circuit-compiler/src/app/components/setupExports.tsx b/apps/circuit-compiler/src/app/components/setupExports.tsx
index b60d9b9ec9..3fd5598720 100644
--- a/apps/circuit-compiler/src/app/components/setupExports.tsx
+++ b/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
diff --git a/apps/circuit-compiler/src/app/components/toggler.tsx b/apps/circuit-compiler/src/app/components/toggler.tsx
index abcd1b53c2..1400c8ffb5 100644
--- a/apps/circuit-compiler/src/app/components/toggler.tsx
+++ b/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>
diff --git a/apps/circuit-compiler/src/app/components/witness.tsx b/apps/circuit-compiler/src/app/components/witness.tsx
index 6ef3b08ec4..0a14537cde 100644
--- a/apps/circuit-compiler/src/app/components/witness.tsx
+++ b/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>
   )
 }
\ No newline at end of file
diff --git a/apps/circuit-compiler/src/app/reducers/state.ts b/apps/circuit-compiler/src/app/reducers/state.ts
index 26a56f09f5..74aa682aca 100644
--- a/apps/circuit-compiler/src/app/reducers/state.ts
+++ b/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()
   }
diff --git a/apps/circuit-compiler/src/app/types/index.ts b/apps/circuit-compiler/src/app/types/index.ts
index 6c5b1644a7..d1977aac07 100644
--- a/apps/circuit-compiler/src/app/types/index.ts
+++ b/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,