ioedeveloper
2 years ago
parent
ea70c15de3
commit
1cabf35af1
@ -0,0 +1,59 @@ |
||||
{ |
||||
"name": "circuit-compiler", |
||||
"$schema": "../../node_modules/nx/schemas/project-schema.json", |
||||
"sourceRoot": "apps/circuit-compiler/src", |
||||
"projectType": "application", |
||||
"implicitDependencies": ["remixd"], |
||||
"targets": { |
||||
"build": { |
||||
"executor": "@nrwl/webpack:webpack", |
||||
"outputs": ["{options.outputPath}"], |
||||
"defaultConfiguration": "development", |
||||
"options": { |
||||
"compiler": "babel", |
||||
"outputPath": "dist/apps/circuit-compiler", |
||||
"index": "apps/circuit-compiler/src/index.html", |
||||
"baseHref": "./", |
||||
"main": "apps/circuit-compiler/src/main.tsx", |
||||
"polyfills": "apps/circuit-compiler/src/polyfills.ts", |
||||
"tsConfig": "apps/circuit-compiler/tsconfig.app.json", |
||||
"assets": ["apps/circuit-compiler/src/profile.json"], |
||||
"styles": ["apps/circuit-compiler/src/css/app.css"], |
||||
"scripts": [], |
||||
"webpackConfig": "apps/circuit-compiler/webpack.config.js" |
||||
}, |
||||
"configurations": { |
||||
"development": { |
||||
}, |
||||
"production": { |
||||
"fileReplacements": [ |
||||
{ |
||||
"replace": "apps/circuit-compiler/src/environments/environment.ts", |
||||
"with": "apps/circuit-compiler/src/environments/environment.prod.ts" |
||||
} |
||||
] |
||||
} |
||||
} |
||||
}, |
||||
"serve": { |
||||
"executor": "@nrwl/webpack:dev-server", |
||||
"defaultConfiguration": "development", |
||||
"options": { |
||||
"buildTarget": "circuit-compiler:build", |
||||
"hmr": true, |
||||
"baseHref": "/" |
||||
}, |
||||
"configurations": { |
||||
"development": { |
||||
"buildTarget": "circuit-compiler:build:development", |
||||
"port": 2023 |
||||
}, |
||||
"production": { |
||||
"buildTarget": "circuit-compiler:build:production" |
||||
} |
||||
} |
||||
} |
||||
}, |
||||
"tags": [] |
||||
} |
||||
|
||||
@ -0,0 +1,6 @@ |
||||
import { Dispatch } from "react" |
||||
import { Action } from "../types" |
||||
|
||||
export const dispatchCheckRemixd = (status: boolean) => (dispatch: Dispatch<Action<'SET_REMIXD_CONNECTION_STATUS'>>) => { |
||||
dispatch({ type: 'SET_REMIXD_CONNECTION_STATUS', payload: status }) |
||||
} |
||||
@ -0,0 +1,14 @@ |
||||
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() |
||||
} |
||||
@ -0,0 +1,56 @@ |
||||
import React, { useEffect, useReducer } 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' |
||||
|
||||
function App() { |
||||
const [appState, dispatch] = useReducer(appReducer, appInitialState) |
||||
|
||||
useEffect(() => { |
||||
initCircomPluginActions()(dispatch) |
||||
}, []) |
||||
|
||||
const handleConnectRemixd = () => { |
||||
activateRemixd() |
||||
} |
||||
|
||||
const value = { |
||||
appState, |
||||
dispatch |
||||
} |
||||
|
||||
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> |
||||
) |
||||
} |
||||
|
||||
export default App |
||||
@ -0,0 +1,4 @@ |
||||
import { createContext } from 'react' |
||||
import { IAppContext } from '../types' |
||||
|
||||
export const AppContext = createContext<IAppContext>({} as IAppContext) |
||||
@ -0,0 +1,18 @@ |
||||
import { Actions, AppState } from "../types" |
||||
|
||||
export const appInitialState: AppState = { |
||||
isRemixdConnected: null |
||||
} |
||||
|
||||
export const appReducer = (state = appInitialState, action: Actions): AppState => { |
||||
switch (action.type) { |
||||
case 'SET_REMIXD_CONNECTION_STATUS': |
||||
return { |
||||
...state, |
||||
isRemixdConnected: action.payload |
||||
} |
||||
|
||||
default: |
||||
throw new Error() |
||||
} |
||||
} |
||||
@ -0,0 +1,37 @@ |
||||
import { PluginClient } from '@remixproject/plugin' |
||||
import { createClient } from '@remixproject/plugin-webview' |
||||
import EventManager from 'events' |
||||
|
||||
export class CircomPluginClient extends PluginClient { |
||||
private connected: boolean |
||||
public internalEvents: EventManager |
||||
|
||||
constructor() { |
||||
super() |
||||
createClient(this) |
||||
this.internalEvents = new EventManager() |
||||
this.methods = ["sendAsync", "init", "deactivate"] |
||||
this.onload() |
||||
} |
||||
|
||||
init (): void { |
||||
console.log('initializing circom plugin...') |
||||
} |
||||
|
||||
onActivation(): void { |
||||
this.subscribeToEvents() |
||||
} |
||||
|
||||
activateRemixDeamon (): void { |
||||
this.call('manager', 'activatePlugin', 'remixd') |
||||
} |
||||
|
||||
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) |
||||
} |
||||
}) |
||||
} |
||||
} |
||||
@ -0,0 +1,22 @@ |
||||
import { Dispatch } from "react" |
||||
|
||||
export interface IAppContext { |
||||
appState: AppState, |
||||
dispatch: Dispatch<any> |
||||
} |
||||
|
||||
export interface ActionPayloadTypes { |
||||
SET_REMIXD_CONNECTION_STATUS: boolean |
||||
} |
||||
|
||||
|
||||
export interface Action <T extends keyof ActionPayloadTypes> { |
||||
type: T |
||||
payload: ActionPayloadTypes[T] |
||||
} |
||||
|
||||
export type Actions = { [A in keyof ActionPayloadTypes]: Action<A> }[keyof ActionPayloadTypes] |
||||
|
||||
export interface AppState { |
||||
isRemixdConnected: boolean |
||||
} |
||||
@ -0,0 +1,10 @@ |
||||
pragma circom 2.0.0; |
||||
|
||||
template Multiplier2() { |
||||
signal input a; |
||||
signal input b; |
||||
signal output c; |
||||
c <== a*b; |
||||
} |
||||
|
||||
component main = Multiplier2(); |
||||
@ -0,0 +1,15 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="utf-8" /> |
||||
<title>Circuit - Compiler</title> |
||||
<base href="./" /> |
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" /> |
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"/> |
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"> |
||||
</head> |
||||
<body> |
||||
<div id="root"></div> |
||||
</body> |
||||
</html> |
||||
|
After Width: | Height: | Size: 1.7 KiB |
@ -0,0 +1,8 @@ |
||||
import React from 'react' |
||||
import ReactDOM from 'react-dom' |
||||
import App from './app/app' |
||||
|
||||
ReactDOM.render( |
||||
<App />, |
||||
document.getElementById('root') |
||||
) |
||||
@ -0,0 +1,7 @@ |
||||
/** |
||||
* Polyfill stable language features. These imports will be optimized by `@babel/preset-env`. |
||||
* |
||||
* See: https://github.com/zloirock/core-js#babel
|
||||
*/ |
||||
import 'core-js/stable'; |
||||
import 'regenerator-runtime/runtime'; |
||||
@ -0,0 +1,17 @@ |
||||
{ |
||||
"name": "circuit-compiler", |
||||
"kind": "provider", |
||||
"displayName": "Circuit Compiler", |
||||
"events": [], |
||||
"version": "2.0.0", |
||||
"methods": ["sendAsync", "init"], |
||||
"canActivate": ["remixd"], |
||||
"url": "", |
||||
"description": "Enables circuit compilation and computing a witness for ZK proofs", |
||||
"icon": "https://docs.circom.io/assets/images/favicon.png", |
||||
"location": "sidePanel", |
||||
"documentation": "", |
||||
"repo": "https://github.com/ethereum/remix-project/tree/master/apps/circuit-compiler", |
||||
"maintainedBy": "Remix", |
||||
"authorContact": "" |
||||
} |
||||
@ -0,0 +1,24 @@ |
||||
{ |
||||
"extends": "./tsconfig.json", |
||||
"compilerOptions": { |
||||
"outDir": "../../dist/out-tsc", |
||||
"types": ["node"] |
||||
}, |
||||
"files": [ |
||||
"../../node_modules/@nrwl/react/typings/cssmodule.d.ts", |
||||
"../../node_modules/@nrwl/react/typings/image.d.ts" |
||||
], |
||||
"exclude": [ |
||||
"jest.config.ts", |
||||
"**/*.spec.ts", |
||||
"**/*.test.ts", |
||||
"**/*.spec.tsx", |
||||
"**/*.test.tsx", |
||||
"**/*.spec.js", |
||||
"**/*.test.js", |
||||
"**/*.spec.jsx", |
||||
"**/*.test.jsx" |
||||
], |
||||
"include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"] |
||||
} |
||||
|
||||
@ -0,0 +1,17 @@ |
||||
{ |
||||
"extends": "../../tsconfig.base.json", |
||||
"compilerOptions": { |
||||
"jsx": "react-jsx", |
||||
"allowJs": true, |
||||
"esModuleInterop": true, |
||||
"allowSyntheticDefaultImports": true |
||||
}, |
||||
"files": [], |
||||
"include": [], |
||||
"references": [ |
||||
{ |
||||
"path": "./tsconfig.app.json" |
||||
} |
||||
] |
||||
} |
||||
|
||||
@ -0,0 +1,90 @@ |
||||
const { composePlugins, withNx } = require('@nrwl/webpack') |
||||
const webpack = require('webpack') |
||||
const TerserPlugin = require("terser-webpack-plugin") |
||||
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin") |
||||
|
||||
// Nx plugins for webpack.
|
||||
module.exports = composePlugins(withNx(), (config) => { |
||||
// Update the webpack config as needed here.
|
||||
// e.g. `config.plugins.push(new MyPlugin())`
|
||||
// add fallback for node modules
|
||||
config.resolve.fallback = { |
||||
...config.resolve.fallback, |
||||
"crypto": require.resolve("crypto-browserify"), |
||||
"stream": require.resolve("stream-browserify"), |
||||
"path": require.resolve("path-browserify"), |
||||
"http": require.resolve("stream-http"), |
||||
"https": require.resolve("https-browserify"), |
||||
"constants": require.resolve("constants-browserify"), |
||||
"os": false, //require.resolve("os-browserify/browser"),
|
||||
"timers": false, // require.resolve("timers-browserify"),
|
||||
"zlib": require.resolve("browserify-zlib"), |
||||
"fs": false, |
||||
"module": false, |
||||
"tls": false, |
||||
"net": false, |
||||
"readline": false, |
||||
"child_process": false, |
||||
"buffer": require.resolve("buffer/"), |
||||
"vm": require.resolve('vm-browserify'), |
||||
} |
||||
|
||||
|
||||
// add externals
|
||||
config.externals = { |
||||
...config.externals, |
||||
solc: 'solc', |
||||
} |
||||
|
||||
// add public path
|
||||
config.output.publicPath = './' |
||||
|
||||
// add copy & provide plugin
|
||||
config.plugins.push( |
||||
new webpack.ProvidePlugin({ |
||||
Buffer: ['buffer', 'Buffer'], |
||||
url: ['url', 'URL'], |
||||
process: 'process/browser', |
||||
}) |
||||
) |
||||
|
||||
// set the define plugin to load the WALLET_CONNECT_PROJECT_ID
|
||||
config.plugins.push( |
||||
new webpack.DefinePlugin({ |
||||
WALLET_CONNECT_PROJECT_ID: JSON.stringify(process.env.WALLET_CONNECT_PROJECT_ID), |
||||
}) |
||||
) |
||||
|
||||
// souce-map loader
|
||||
config.module.rules.push({ |
||||
test: /\.js$/, |
||||
use: ["source-map-loader"], |
||||
enforce: "pre" |
||||
}) |
||||
|
||||
config.ignoreWarnings = [/Failed to parse source map/] // ignore source-map-loader warnings
|
||||
|
||||
|
||||
// set minimizer
|
||||
config.optimization.minimizer = [ |
||||
new TerserPlugin({ |
||||
parallel: true, |
||||
terserOptions: { |
||||
ecma: 2015, |
||||
compress: false, |
||||
mangle: false, |
||||
format: { |
||||
comments: false, |
||||
}, |
||||
}, |
||||
extractComments: false, |
||||
}), |
||||
new CssMinimizerPlugin(), |
||||
]; |
||||
|
||||
config.watchOptions = { |
||||
ignored: /node_modules/ |
||||
} |
||||
|
||||
return config; |
||||
}); |
||||
Loading…
Reference in new issue