Clearly segmment sections

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

@@ -1,11 +1,9 @@
-import { CompileBtn } from "./compileBtn";
-import { R1CSBtn } from "./r1csBtn";
+import { CompileBtn } from "./compileBtn"
 
 export function CircuitActions () {
   return (
-    <div className="pb-3">
+    <div className="pb-2">
       <CompileBtn />
-      <R1CSBtn />
     </div>
   )
 }

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

@@ -20,7 +20,7 @@ export function CompileBtn () {
       }
     >
       <button
-        className="btn btn-primary btn-block d-block w-100 text-break mb-1 mt-3"
+        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")}
         data-id="compile_circuit_btn"

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

@@ -4,9 +4,9 @@ import { ConfigurationsProps, PrimeValue } from "../types"
 
 export function Configurations ({primeValue, setPrimeValue, versionValue}: ConfigurationsProps) {
   return (
-    <div className="pb-2 border-bottom flex-column">
+    <div className="flex-column">
       <div className="flex-column d-flex">
-        <div className="mb-2 ml-0">
+        <div className="ml-0">
           <label className="circuit_inner_label form-check-label" htmlFor="circuitPrimeSelector">
             <FormattedMessage id="circuit.prime" />
           </label>

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

@@ -117,9 +117,11 @@ export function Container () {
               <Configurations setPrimeValue={handlePrimeChange} primeValue={circuitApp.appState.primeValue} versionValue={circuitApp.appState.version} />
             </Toggler>
             <CircuitActions />
-            <Toggler title='circuit.setupExports' dataId='setup_exports_toggler'>
+            <RenderIf condition={circuitApp.appState.signalInputs.length > 0}>
+              <Toggler title='circuit.setupExports' dataId='setup_exports_toggler' show={true}>
                 <SetupExports />
               </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} />

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

@@ -4,7 +4,7 @@ import { CompileOptionsProps } from '../types'
 export function CompileOptions ({autoCompile, hideWarnings, setCircuitAutoCompile, setCircuitHideWarnings}: CompileOptionsProps) {
 
   return (
-    <div className='pb-2'>
+    <div>
       <div className="mt-2 custom-control custom-checkbox">
         <input
           className="custom-control-input"

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

@@ -1,44 +0,0 @@
-import { CustomTooltip, RenderIf, RenderIfNot } from "@remix-ui/helper";
-import { useContext } from "react";
-import { CircuitAppContext } from "../contexts";
-import { FormattedMessage } from "react-intl";
-import { generateR1cs } from "../actions";
-
-export function R1CSBtn () {
-  const { plugin, appState } = useContext(CircuitAppContext)
-
-  return (
-    <button
-      className="btn btn-secondary btn-block d-block w-100 text-break mb-1 mt-2"
-      onClick={() => { generateR1cs(plugin, appState) }}
-      disabled={(appState.filePath === "") || (appState.status === "compiling") || (appState.status === "generating") || (appState.status === "computing")}
-      data-id="generate_r1cs_btn"
-    >
-      <CustomTooltip
-        placement="auto"
-        tooltipId="overlay-tooltip-compile"
-        tooltipText={
-          <div className="text-left">
-            <div>
-              Outputs the constraints in r1cs format
-            </div>
-          </div>
-        }
-      >
-        <div className="d-flex align-items-center justify-content-center">
-          <RenderIf condition={appState.status === 'generating'}>
-            <i className="fas fa-sync fa-spin mr-2" aria-hidden="true"></i>
-          </RenderIf>
-          <RenderIfNot condition={appState.status === 'generating'}>
-            <i className="fas fa-sync mr-2" aria-hidden="true"></i>
-          </RenderIfNot>
-          <div className="text-truncate overflow-hidden text-nowrap">
-            <span>
-              <FormattedMessage id="circuit.generateR1cs" />
-            </span>
-          </div>
-        </div>
-      </CustomTooltip>
-    </button>
-  )
-}

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

@@ -1,9 +1,10 @@
 import { CustomTooltip } from "@remix-ui/helper"
 import { FormattedMessage } from "react-intl"
+import { SetupExportsBtn } from "./setupExportsBtn"
 
 export function SetupExports () {
   return (
-    <div className="pb-2 border-bottom flex-column">
+    <div className="flex-column">
       <div className="flex-column d-flex">
         <div className="mb-1 ml-0">
           <label className="circuit_inner_label form-check-label">
@@ -60,7 +61,30 @@ export function SetupExports () {
           <label className="circuit_inner_label form-check-label" htmlFor="circuitRandomBeacon">
             <FormattedMessage id="circuit.randomBeacon" />
           </label>
-          <input className="form-control m-0 txinput" placeholder="0102030405060708090a0b0c0d0e0f101112131415161718191a1b1c1d1e1f" />
+          <input className="form-control m-0 txinput mb-1" placeholder="0102030405060708090a0b0c0d0e0f101112131415161718191a1b1c1d1e1f" />
+          <div className="mt-2 custom-control custom-checkbox">
+            <input
+              className="custom-control-input"
+              type="checkbox"
+              title="Export Verifier Contract"
+              id="circuitExportVerifierContract"
+            />
+            <label className="form-check-label custom-control-label" htmlFor="circuitExportVerifierContract">
+              <FormattedMessage id="circuit.exportVerifierContract" />
+            </label>
+          </div>
+          <div className="mt-2 custom-control custom-checkbox">
+            <input
+              className="custom-control-input"
+              type="checkbox"
+              title="Export Verification Key"
+              id="circuitExportVerificationKey"
+            />
+            <label className="form-check-label custom-control-label" htmlFor="circuitExportVerificationKey">
+              <FormattedMessage id="circuit.exportVerificationKey" />
+            </label>
+          </div>
+          <SetupExportsBtn />
         </div>
       </div>
     </div>

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

@@ -0,0 +1,34 @@
+import { CustomTooltip, RenderIf, RenderIfNot } from "@remix-ui/helper"
+import { useContext } from "react"
+import { CircuitAppContext } from "../contexts"
+import { FormattedMessage } from "react-intl"
+
+export function SetupExportsBtn () {
+  const { plugin, appState } = useContext(CircuitAppContext)
+
+  return (
+    <button
+      className="btn btn-secondary btn-block d-block w-100 text-break mt-2"
+    >
+      <CustomTooltip
+        placement="auto"
+        tooltipId="overlay-tooltip-compile"
+        tooltipText={
+          <div className="text-left">
+            <div>
+              Click to setup and export verification keys
+            </div>
+          </div>
+        }
+      >
+        <div className="d-flex align-items-center justify-content-center">
+          <div className="text-truncate overflow-hidden text-nowrap">
+            <span>
+              <FormattedMessage id="circuit.runSetup" />
+            </span>
+          </div>
+        </div>
+      </CustomTooltip>
+    </button>
+  )
+}

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

@@ -2,15 +2,15 @@ import { useState } from "react"
 import { FormattedMessage } from "react-intl"
 import { RenderIf, RenderIfNot } from "@remix-ui/helper"
 
-export function Toggler ({ children, title, dataId }: { children: JSX.Element, title: string, dataId: string }) {
-  const [toggleExpander, setToggleExpander] = useState<boolean>(false)
+export function Toggler ({ children, title, dataId, show = false }: { children: JSX.Element, title: string, dataId: string, show?: boolean }) {
+  const [toggleExpander, setToggleExpander] = useState<boolean>(show)
 
   const toggleConfigurations = () => {
     setToggleExpander(!toggleExpander)
   }
 
   return (
-    <div>
+    <div className="pt-2 border-top pb-2">
       <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">

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

@@ -16,5 +16,8 @@
   "circuit.provingScheme": "Proving Scheme",
   "circuit.ptau": "POWER OF TAU (PTAU)",
   "circuit.randomText": "Ceremony: Random Text",
-  "circuit.randomBeacon": "Ceremony: Random Beacon"
+  "circuit.randomBeacon": "Ceremony: Random Beacon",
+  "circuit.exportVerifierContract": "Export verifier contract",
+  "circuit.exportVerificationKey": "Export verification key",
+  "circuit.runSetup": "Run setup"
 }