Compile circuit using editor play button

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

@@ -1,14 +1 @@
-import { Dispatch } from 'react'
-import { CircomPluginClient } from '../services/circomPluginClient'
-
-const plugin = new CircomPluginClient()
-
-export const initCircomPluginActions = () => async (dispatch: Dispatch<any>) => {
-    plugin.internalEvents.on('connectionChanged', (connected: boolean) => {
-        dispatch({ type: 'SET_REMIXD_CONNECTION_STATUS', payload: connected })
-    })
-}
-
-export function activateRemixd () {
-    plugin.activateRemixDeamon()
-}
+import { Dispatch } from 'react'

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

@@ -1,21 +1,20 @@
-import React, { useEffect, useReducer } from 'react'
+import React, { useEffect, useReducer, useState } from 'react'
 import { RenderIf, RenderIfNot } from '@remix-ui/helper'
 import { Alert, Button, Tabs, Tab } from 'react-bootstrap'
 
 import { AppContext } from './contexts'
 import { appInitialState, appReducer } from './reducers'
-import { activateRemixd, initCircomPluginActions } from './actions'
+import { CircomPluginClient } from './services/circomPluginClient'
 
 function App() {
   const [appState, dispatch] = useReducer(appReducer, appInitialState)
+  const [plugin, setPlugin] = useState<CircomPluginClient>(null)
 
   useEffect(() => {
-    initCircomPluginActions()(dispatch)
-  }, [])
+    const plugin = new CircomPluginClient()
 
-  const handleConnectRemixd = () => {
-    activateRemixd()
-  }
+    setPlugin(plugin)
+  }, [])
 
   const value = {
     appState,
@@ -25,29 +24,6 @@ function App() {
   return (
     <AppContext.Provider value={value}>
       <div className="App">
-        <RenderIfNot condition={appState.isRemixdConnected}>
-          <Alert variant="info" dismissible>
-            <Alert.Heading>Requirements!</Alert.Heading>
-            <ol>
-              <li>Circuit Compiler requires that you have Rust lang installed on your machine.</li>
-              <li>Remix-IDE is connected to your local file system.</li>
-            </ol>
-            <div className="d-flex justify-content-end">
-              <Button variant='outline-primary' onClick={handleConnectRemixd}>Connect to File System </Button>
-            </div>
-          </Alert>
-        </RenderIfNot>
-        <RenderIf condition={appState.isRemixdConnected}>
-          <div className='mx-2 mb-2 d-flex flex-column'>
-            <Tabs
-              defaultActiveKey={'compile'}
-              id="circuitCompilerTabs"
-            >
-              <Tab eventKey={'compile'} title="Compiler"></Tab>
-              <Tab eventKey={'witness'} title="Witness"></Tab>
-            </Tabs>
-          </div>
-        </RenderIf>
       </div>
     </AppContext.Provider>
   )

apps/circuit-compiler/src/app/components/compiler.ts

@@ -0,0 +1,30 @@
+// const compile = () => {
+//     const currentFile = api.currentFile
+
+//     if (currentFile.endsWith('.circom')) return compileCircuit()
+//     if (!isSolFileSelected()) return
+//     _setCompilerVersionFromPragma(currentFile)
+//     let externalCompType
+//     if (hhCompilation) externalCompType = 'hardhat'
+//     else if (truffleCompilation) externalCompType = 'truffle'
+//     compileTabLogic.runCompiler(externalCompType)
+//   }
+
+//   const compileAndRun = () => {
+//     const currentFile = api.currentFile
+
+//     if (currentFile.endsWith('.circom')) return compileCircuit()
+//     if (!isSolFileSelected()) return
+//     _setCompilerVersionFromPragma(currentFile)
+//     let externalCompType
+//     if (hhCompilation) externalCompType = 'hardhat'
+//     else if (truffleCompilation) externalCompType = 'truffle'
+//     api.runScriptAfterCompilation(currentFile)
+//     compileTabLogic.runCompiler(externalCompType)
+//   }
+
+//   const compileCircuit = () => {
+//     const currentFile = api.currentFile
+
+//     console.log('Compiling circuit ' + currentFile)
+//   }

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

@@ -1,5 +1,6 @@
 import { PluginClient } from '@remixproject/plugin'
 import { createClient } from '@remixproject/plugin-webview'
+import { parse_circuit_browser } from 'apps/circuit-compiler/pkg/circom'
 import EventManager from 'events'
 
 export class CircomPluginClient extends PluginClient {
@@ -10,7 +11,7 @@ export class CircomPluginClient extends PluginClient {
         super()
         createClient(this)
         this.internalEvents = new EventManager()
-        this.methods = ["sendAsync", "init", "deactivate"]
+        this.methods = ["init", "compile"]
         this.onload()
     }
 
@@ -18,20 +19,13 @@ export class CircomPluginClient extends PluginClient {
         console.log('initializing circom plugin...')
     }
 
-    onActivation(): void {
-        this.subscribeToEvents()
-    }
+    async compile (path: string) {
+        console.log('compiling circuit ' + path)
+        const fileContent = await this.call('fileManager', 'readFile', path)
 
-    activateRemixDeamon (): void {
-        this.call('manager', 'activatePlugin', 'remixd')
-    }
+        console.log('file content: ' + fileContent)
+        const compilationResult = parse_circuit_browser(fileContent, 0)
 
-    subscribeToEvents (): void {
-        this.on('filePanel', 'setWorkspace', (workspace: { name: string, isLocalhost: boolean }) => {
-            if (this.connected !== workspace.isLocalhost) {
-                this.connected = workspace.isLocalhost
-                this.internalEvents.emit('connectionChanged', this.connected)
-            }
-        })
+        console.log('compilation result: ' + compilationResult)
     }
 }

apps/circuit-compiler/src/example/simple.circom

@@ -7,4 +7,5 @@ template Multiplier2() {
     c <== a*b;
  }
 
- component main = Multiplier2();
+ component main = Multiplier2();
+ 

apps/circuit-compiler/src/profile.json

@@ -4,8 +4,8 @@
   "displayName": "Circuit Compiler",
   "events": [],
   "version": "2.0.0",
-  "methods": ["sendAsync", "init"],
-  "canActivate": ["remixd"],
+  "methods": ["init", "compile"],
+  "canActivate": [],
   "url": "",
   "description": "Enables circuit compilation and computing a witness for ZK proofs",
   "icon": "https://docs.circom.io/assets/images/favicon.png",

apps/circuit-compiler/webpack.config.js

@@ -86,5 +86,7 @@ module.exports = composePlugins(withNx(), (config) => {
     ignored: /node_modules/
   }
 
+  config.experiments.syncWebAssembly = true
+
   return config;
 });

libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx

@@ -514,7 +514,6 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
   const compile = () => {
     const currentFile = api.currentFile
 
-    if (currentFile.endsWith('.circom')) return compileCircuit()
     if (!isSolFileSelected()) return
     _setCompilerVersionFromPragma(currentFile)
     let externalCompType
@@ -526,7 +525,6 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
   const compileAndRun = () => {
     const currentFile = api.currentFile
 
-    if (currentFile.endsWith('.circom')) return compileCircuit()
     if (!isSolFileSelected()) return
     _setCompilerVersionFromPragma(currentFile)
     let externalCompType
@@ -536,12 +534,6 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
     compileTabLogic.runCompiler(externalCompType)
   }
 
-  const compileCircuit = () => {
-    const currentFile = api.currentFile
-
-    console.log('Compiling circuit ' + currentFile)
-  }
-
   const _updateVersionSelector = (version, customUrl = '') => {
     // update selectedversion of previous one got filtered out
     let selectedVersion = version

libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx

@@ -167,7 +167,7 @@ export const TabsUI = (props: TabsUIProps) => {
           <button
             data-id="play-editor"
             className="btn text-success py-0"
-            disabled={!(tabsState.currentExt === 'js' || tabsState.currentExt === 'ts' || tabsState.currentExt === 'sol')}
+            disabled={!(tabsState.currentExt === 'js' || tabsState.currentExt === 'ts' || tabsState.currentExt === 'sol' || tabsState.currentExt === 'circom')}
             onClick={async () => {
               const path = active().substr(active().indexOf('/') + 1, active().length)
               const content = await props.plugin.call('fileManager', 'readFile', path)
@@ -177,6 +177,10 @@ export const TabsUI = (props: TabsUIProps) => {
               } else if (tabsState.currentExt === 'sol' || tabsState.currentExt === 'yul') {
                 await props.plugin.call('solidity', 'compile', path)
                 _paq.push(['trackEvent', 'editor', 'clickRunFromEditor', tabsState.currentExt])
+              } else if (tabsState.currentExt === 'circom') {
+                await props.plugin.call('circuit-compiler', 'compile', path)
+                console.log('called cricuit compiler: ', path)
+                _paq.push(['trackEvent', 'editor', 'clickRunFromEditor', tabsState.currentExt])
               }
             }}
           >

yarn.lock

@@ -10309,7 +10309,7 @@ comma-separated-tokens@^2.0.0:
   resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz#4e89c9458acb61bc8fef19f4529973b2392839ee"
   integrity sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==
 
-command-exists@^1.2.8:
+command-exists@^1.2.7, command-exists@^1.2.8:
   version "1.2.9"
   resolved "https://registry.yarnpkg.com/command-exists/-/command-exists-1.2.9.tgz#c50725af3808c8ab0260fd60b01fbfa25b954f69"
   integrity sha512-LTQ/SGc+s0Xc0Fu5WaKnR0YiygZkm9eKFvyS+fRsU7/ZWFF8ykFM6Pc9aCVf1+xasOOZpO3BAVgVrKvsqKHV7w==
@@ -27536,7 +27536,7 @@ watchify@^3.9.0:
     through2 "^2.0.0"
     xtend "^4.0.0"
 
-watchpack@^2.4.0:
+watchpack@^2.1.1, watchpack@^2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.0.tgz#fa33032374962c78113f93c7f2fb4c54c9862a5d"
   integrity sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==