version list UI

.gitignore

@@ -69,4 +69,8 @@ apps/remixdesktop/build*
 apps/remixdesktop/reports
 apps/remixdesktop/logs/
 apps/remixdesktop/bin/
+apps/remixdesktop/circom-windows-amd64.exe
+apps/remixdesktop/circom-macos-amd64
+apps/remixdesktop/circom-linux-amd64
+apps/remixdesktop/log_input_signals.txt
 logs

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

@@ -1,26 +1,186 @@
-import { RenderIf } from "@remix-ui/helper";
 import { AppState } from "../types";
+import { Dropdown } from "react-bootstrap";
+import React, { Ref } from "react";
 
 export function VersionList ({ currentVersion, versionList, setVersion }: { versionList: AppState['versionList'], currentVersion: string, setVersion: (version: string) => void }) {
   const versionListKeys = Object.keys(versionList)
-  
   return (
-    <select
+    <Dropdown>
-      value={currentVersion}
+      <Dropdown.Toggle as={CircomVersionMenuToggle} id="circomVersionList" className="btn btn-light btn-block w-100 d-inline-block border border-dark form-control">
-      onChange={(e) => setVersion(e.target.value)}
+        <div style={{ flexGrow: 1, overflow: 'hidden', display:'flex', justifyContent:'left' }}>
-      className="custom-select"
+          { versionList[currentVersion].name }
-    >
+        </div>
-      <RenderIf condition={versionListKeys.length > 0}>
+      </Dropdown.Toggle>
-        <>
+
-          {
+      <Dropdown.Menu as={CircomVersionMenu} className="w-100 custom-dropdown-items overflow-hidden">
-            versionListKeys.map((version, index) => (
+        {
-              <option value={version} key={index}>
+          versionListKeys.map((version, index) => (
-                { versionList[version].name }
+            <Dropdown.Item key={index} onClick={() => {
-              </option>
+              setVersion(version)
-            ))
+            }}>
-          }
+              <div className='d-flex w-100 justify-content-between'>
-        </>
+                <div className="text-truncate">
-      </RenderIf>
+                  { versionList[version].name }
-    </select>
+                </div>
+              </div>
+            </Dropdown.Item>
+          ))
+        }
+      </Dropdown.Menu>
+    </Dropdown>
   )
 }
+
+const CircomVersionMenuToggle = React.forwardRef(
+  (
+    {
+      children,
+      onClick,
+      className = ''
+    }: {
+      children: React.ReactNode
+      onClick: (e) => void
+      className: string
+    },
+    ref: Ref<HTMLButtonElement>
+  ) => (
+    <button
+      ref={ref}
+      onClick={(e) => {
+        e.preventDefault()
+        onClick(e)
+      }}
+      className={className.replace('dropdown-toggle', '')}
+    >
+      <div className="d-flex">
+        {children}
+        <div>
+          <i className="fad fa-sort-circle"></i>
+        </div>
+      </div>
+    </button>
+  )
+)
+
+const CircomVersionMenu = React.forwardRef(
+  (
+    {
+      children,
+      style,
+      'data-id': dataId,
+      className,
+      'aria-labelledby': labeledBy
+    }: {
+      'children': React.ReactNode
+      'style'?: React.CSSProperties
+      'data-id'?: string
+      'className': string
+      'aria-labelledby'?: string
+    },
+    ref: Ref<HTMLDivElement>
+  ) => {
+    const height = window.innerHeight * 0.6
+    return (
+      <div ref={ref} style={style} className={className} aria-labelledby={labeledBy} data-id={dataId}>
+        <ul className="list-unstyled mb-0" style={{ maxHeight: height + 'px',overflowY:'auto' }}>
+          {children}
+        </ul>
+      </div>
+    )
+  }
+)
+
+// export const CompilerDropdown = (props: compilerDropdownProps) => {
+//   const online = useContext(onLineContext)
+//   const platform = useContext(platformContext)
+//   const { customVersions, selectedVersion, defaultVersion, allversions, handleLoadVersion, _shouldBeAdded, onlyDownloaded } = props
+//   return (
+//     <Dropdown id="versionSelector" data-id="versionSelector">
+//       <Dropdown.Toggle as={CompilerMenuToggle} id="dropdown-custom-components" className="btn btn-light btn-block w-100 d-inline-block border border-dark form-control" icon={null}>
+//         <div style={{ flexGrow: 1, overflow: 'hidden', display:'flex', justifyContent:'left' }}>
+//           <div className="text-truncate">
+//             {customVersions.map((url, i) => {
+//               if (selectedVersion === url) return (<span data-id="selectedVersion" key={i}>custom</span>)
+//             })}
+//             {allversions.map((build, i) => {
+
+//               if ((selectedVersion || defaultVersion) === build.path) {
+//                 return (<span data-id="selectedVersion" key={i}>{build.longVersion}</span>)
+//               }
+//             })}
+//           </div>
+//         </div>
+//       </Dropdown.Toggle>
+
+//       <Dropdown.Menu as={CompilerMenu} className="w-100 custom-dropdown-items overflow-hidden" data-id="custom-dropdown-items">
+//         {allversions.length <= 0 && (
+//           <Dropdown.Item
+//             key={`default`}
+//             data-id='builtin'
+//             onClick={() => {}}
+//           >
+//             <div className='d-flex w-100 justify-content-between'>
+//               {selectedVersion === defaultVersion ? <span className='fas fa-check text-success mr-2'></span> : null}
+//               <div style={{ flexGrow: 1, overflow: 'hidden' }}>
+//                 <div className="text-truncate">
+//                   {defaultVersion}
+//                 </div>
+//               </div>
+//             </div>
+//           </Dropdown.Item>
+//         )}
+//         {allversions.length <= 0 && (
+//           <Dropdown.Item
+//             key={`builtin`}
+//             data-id='builtin'
+//             onClick={() => {}}
+//           >
+//             <div className='d-flex w-100 justify-content-between'>
+//               {selectedVersion === "builtin" ? <span className='fas fa-check text-success mr-2'></span> : null}
+//               <div style={{ flexGrow: 1, overflow: 'hidden' }}>
+//                 <div className="text-truncate">
+//                   builtin
+//                 </div>
+//               </div>
+//             </div>
+//           </Dropdown.Item>
+//         )}
+//         {customVersions.map((url, i) => (
+//           <Dropdown.Item
+//             key={`custom-${i}`}
+//             data-id={`dropdown-item-${url}`}
+//             onClick={() => handleLoadVersion(url)}
+//           >
+//             <div className='d-flex w-100 justify-content-between'>
+//               {selectedVersion === url ? <span className='fas fa-check text-success mr-2'></span> : null}
+//               <div style={{ flexGrow: 1, overflow: 'hidden' }}>
+//                 <div className="text-truncate">
+//                   custom: {url}
+//                 </div>
+//               </div>
+//             </div>
+//           </Dropdown.Item>
+//         ))}
+//         {allversions.map((build, i) => {
+//           if (onlyDownloaded && !build.isDownloaded) return null
+//           return _shouldBeAdded(build.longVersion) ? (
+//             <Dropdown.Item
+//               key={`soljson-${i}`}
+//               data-id={`dropdown-item-${build.path}`}
+//               onClick={() => handleLoadVersion(build.path)}
+//             >
+//               <div className='d-flex w-100 justify-content-between'>
+//                 {selectedVersion === build.path ? <span className='fas fa-check text-success mr-2'></span> : null}
+//                 <div style={{ flexGrow: 1, overflow: 'hidden' }}>
+//                   <div className="text-truncate">
+//                     {build.longVersion}
+//                   </div>
+//                 </div>
+//                 {platform == appPlatformTypes.desktop ? (build.isDownloaded ? <div className='fas fa-arrow-circle-down text-success ml-auto'></div> : <div className='far fa-arrow-circle-down'></div>) : null}
+//               </div>
+//             </Dropdown.Item>
+//           ) : null
+//         })}
+//       </Dropdown.Menu>
+//     </Dropdown>
+//   );

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

@@ -142,20 +142,16 @@ export class CircomPluginClient extends PluginClient {
       // @ts-ignore
       this.call('terminal', 'log', { type: 'log', value: 'Compiling ' + path })
       // @ts-ignore
-      await this.call('circom', 'run', path, {
+      const { stdout, stderr } = await this.call('circom', 'run', path, { prime: this._compilationConfig.prime, wasm: "", inputs: "" })
-        prime: this._compilationConfig.prime,
+      const fileName = extractNameFromKey(path)
-        wasm: ""
-      })
-      // const fileContent = this.lastParsedFiles[path]
-      // const searchComponentName = fileContent.match(/component\s+main\s*(?:{[^{}]*})?\s*=\s*([A-Za-z_]\w*)\s*\(.*\)/)
 
-      // if (searchComponentName) {
+      this.lastCompiledCircuitPath = extractParentFromKey(path) + "/.bin/" + fileName.replace('.circom', '_js') + "/" + fileName.replace('circom', 'wasm')
-      //   const componentName = searchComponentName[1]
+      if (stderr) this.call('terminal', 'log', { type: 'error', value: stderr })
-      //   const signals = circuitApi.input_signals(componentName)
+      if (stdout) this.call('terminal', 'log', { type: 'log', value: stdout })
+      // @ts-ignore
+      const signals = await this.call('circom', 'getInputs')
 
-      //   this.internalEvents.emit('circuit_compiling_done', signals)
+      this.internalEvents.emit('circuit_compiling_done', signals)
-      // } else {
-      this.internalEvents.emit('circuit_compiling_done', [])
       this.emit('statusChanged', { key: 'succeed', title: 'circuit compiled successfully', type: 'success' })
       // }
     } else {
@@ -287,7 +283,7 @@ export class CircomPluginClient extends PluginClient {
     const dataRead = new Uint8Array(buffer)
     const witness = this.compiler ? await this.compiler.generate_witness(dataRead, input) : await generate_witness(dataRead, input)
     // @ts-ignore
-    await this.call('fileManager', 'writeFile', wasmPath.replace('.wasm', '.wtn'), witness, true)
+    await this.call('fileManager', 'writeFile', wasmPath.replace('.wasm', '.wtn'), witness, { encoding: null })
     this._paq.push(['trackEvent', 'circuit-compiler', 'computeWitness', 'compiler.generate_witness', wasmPath.replace('.wasm', '.wtn')])
     this.internalEvents.emit('circuit_computing_witness_done')
     this.emit('statusChanged', { key: 'succeed', title: 'witness computed successfully', type: 'success' })