Setup and exports UI

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

@@ -1,16 +1,16 @@
 import { useContext } from 'react'
 import { CustomTooltip, RenderIf } from '@remix-ui/helper'
-import {FormattedMessage} from 'react-intl'
+import { FormattedMessage } from 'react-intl'
 import { CircuitAppContext } from '../contexts'
 import { CompileOptions } from './options'
 import { VersionList } from './versions'
-import { ConfigToggler } from './configToggler'
+import { Toggler } from './toggler'
 import { Configurations } from './configurations'
 import { CircuitActions } from './actions'
-import { WitnessToggler } from './witnessToggler'
 import { WitnessSection } from './witness'
 import { CompilerFeedback } from './feedback'
 import { CompilerReport, PrimeValue } from '../types'
+import { SetupExports } from './setupExports'
 
 export function Container () {
   const circuitApp = useContext(CircuitAppContext)
@@ -113,14 +113,17 @@ export function Container () {
             </CustomTooltip>
             <VersionList setVersion={handleVersionSelect} versionList={circuitApp.appState.versionList} currentVersion={circuitApp.appState.version} />
             <CompileOptions setCircuitAutoCompile={handleCircuitAutoCompile} setCircuitHideWarnings={handleCircuitHideWarnings} autoCompile={circuitApp.appState.autoCompile} hideWarnings={circuitApp.appState.hideWarnings} />
-            <ConfigToggler>
+            <Toggler title='circuit.advancedConfigurations' dataId=''>
               <Configurations setPrimeValue={handlePrimeChange} primeValue={circuitApp.appState.primeValue} versionValue={circuitApp.appState.version} />
-            </ConfigToggler>
+            </Toggler>
             <CircuitActions />
+            <Toggler title='circuit.setupExports' dataId='setup_exports_toggler'>
+              <SetupExports />
+            </Toggler>
             <RenderIf condition={circuitApp.appState.signalInputs.length > 0}>
-              <WitnessToggler>
+              <Toggler title='circuit.computeWitness' dataId='witness_toggler'>
                 <WitnessSection plugin={circuitApp.plugin} signalInputs={circuitApp.appState.signalInputs} status={circuitApp.appState.status} />
-              </WitnessToggler>
+              </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} />

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

@@ -0,0 +1,68 @@
+import { CustomTooltip } from "@remix-ui/helper"
+import { FormattedMessage } from "react-intl"
+
+export function SetupExports () {
+  return (
+    <div className="pb-2 border-bottom flex-column">
+      <div className="flex-column d-flex">
+        <div className="mb-1 ml-0">
+          <label className="circuit_inner_label form-check-label">
+            <FormattedMessage id="circuit.provingScheme" />
+          </label>
+          <div className="radio custom-control custom-radio mb-1 form-check">
+            <input
+              type="radio"
+              className="align-middle custom-control-input"
+              name="circuitProvingScheme"
+              id="groth16ProvingScheme"
+            />
+            <label className="form-check-label custom-control-label" htmlFor="groth16ProvingScheme" style={{ paddingTop: '0.125rem' }}>
+              Groth16
+            </label>
+          </div>
+          <div className="radio custom-control custom-radio form-check">
+            <input
+              type="radio"
+              className="align-middle custom-control-input"
+              name="circuitProvingScheme"
+              id="plonkProvingScheme"
+            />
+            <label className="form-check-label custom-control-label" htmlFor="plonkProvingScheme" style={{ paddingTop: '0.125rem' }}>
+              Plonk
+            </label>
+          </div>
+        </div>
+        <div className="mb-1 ml-0">
+          <label className="circuit_inner_label form-check-label">
+            <FormattedMessage id="circuit.ptau" />
+          </label>
+          <CustomTooltip
+            placement={"auto"}
+            tooltipId="circuitPtauTooltip"
+            tooltipClasses="text-nowrap"
+            tooltipText={<span>{'To choose the from the list of ptau files'}</span>}
+          >
+            <div className="mb-1">
+              <select
+                value={'final_08.ptau'}
+                className="custom-select"
+                style={{
+                  pointerEvents: 'auto'
+                }}
+              >
+              </select>
+            </div>
+          </CustomTooltip>
+          <label className="circuit_inner_label form-check-label" htmlFor="circuitRandomText">
+            <FormattedMessage id="circuit.randomText" />
+          </label>
+          <input className="form-control m-0 txinput mb-1" placeholder="My First Contribution" />
+          <label className="circuit_inner_label form-check-label" htmlFor="circuitRandomBeacon">
+            <FormattedMessage id="circuit.randomBeacon" />
+          </label>
+          <input className="form-control m-0 txinput" placeholder="0102030405060708090a0b0c0d0e0f101112131415161718191a1b1c1d1e1f" />
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -2,7 +2,7 @@ import { useState } from "react"
 import { FormattedMessage } from "react-intl"
 import { RenderIf, RenderIfNot } from "@remix-ui/helper"
 
-export function ConfigToggler ({ children }: { children: JSX.Element }) {
+export function Toggler ({ children, title, dataId }: { children: JSX.Element, title: string, dataId: string }) {
   const [toggleExpander, setToggleExpander] = useState<boolean>(false)
 
   const toggleConfigurations = () => {
@@ -11,10 +11,10 @@ export function ConfigToggler ({ children }: { children: JSX.Element }) {
 
   return (
     <div>
-      <div className="d-flex circuit_config_section justify-content-between" onClick={toggleConfigurations}>
+      <div className="d-flex circuit_config_section justify-content-between" onClick={toggleConfigurations} data-id={dataId}>
         <div className="d-flex">
           <label className="mt-1 circuit_config_section">
-            <FormattedMessage id="circuit.advancedConfigurations" />
+            <FormattedMessage id={title} />
           </label>
         </div>
         <div>

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

@@ -1,36 +0,0 @@
-import { useState } from "react"
-import { FormattedMessage } from "react-intl"
-import { RenderIf, RenderIfNot } from "@remix-ui/helper"
-
-export function WitnessToggler ({ children }: { children: JSX.Element }) {
-  const [toggleExpander, setToggleExpander] = useState<boolean>(false)
-
-  const toggleConfigurations = () => {
-    setToggleExpander(!toggleExpander)
-  }
-
-  return (
-    <div>
-      <div className="d-flex circuit_config_section justify-content-between" onClick={toggleConfigurations} data-id="witness_toggler">
-        <div className="d-flex">
-          <label className="mt-1 circuit_config_section">
-            <FormattedMessage id="circuit.computeWitness" />
-          </label>
-        </div>
-        <div>
-          <span data-id="scConfigExpander" onClick={toggleConfigurations}>
-            <RenderIf condition={toggleExpander}>
-              <i className="fas fa-angle-down" aria-hidden="true"></i>
-            </RenderIf>
-            <RenderIfNot condition={toggleExpander}>
-              <i className="fas fa-angle-right" aria-hidden="true"></i>
-            </RenderIfNot>
-          </span>
-        </div>
-      </div>
-      <RenderIf condition={toggleExpander}>
-        { children }
-      </RenderIf>
-    </div>
-  )
-}

apps/remix-ide/src/app/tabs/locales/en/circuit.json

@@ -11,5 +11,10 @@
   "circuit.generateR1cs": "Generate R1CS",
   "circuit.computeWitness": "Compute Witness",
   "circuit.signalInput": "Signal Input",
-  "circuit.compute": "Compute"
+  "circuit.compute": "Compute",
+  "circuit.setupExports": "Setup and Exports",
+  "circuit.provingScheme": "Proving Scheme",
+  "circuit.ptau": "POWER OF TAU (PTAU)",
+  "circuit.randomText": "Ceremony: Random Text",
+  "circuit.randomBeacon": "Ceremony: Random Beacon"
 }