Noir Boilerplate

ethereum · Sep 26, 2024 · d5f93a0 · d5f93a0
1 parent b24a1a0
commit d5f93a0
Show file tree

Hide file tree

Showing 11 changed files with 293 additions and 0 deletions.
diff --git a/apps/noir-compiler/.eslintrc b/apps/noir-compiler/.eslintrc
@@ -0,0 +1,3 @@
+{
+  "extends": "../../.eslintrc.json",
+}
diff --git a/apps/noir-compiler/project.json b/apps/noir-compiler/project.json
@@ -0,0 +1,67 @@
+{
+    "name": "noir-compiler",
+    "$schema": "../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "apps/noir-compiler/src",
+    "projectType": "application",
+    "implicitDependencies": [],
+    "targets": {
+      "build": {
+        "executor": "@nrwl/webpack:webpack",
+        "outputs": ["{options.outputPath}"],
+        "defaultConfiguration": "development",
+        "options": {
+          "compiler": "babel",
+          "outputPath": "dist/apps/noir-compiler",
+          "index": "apps/noir-compiler/src/index.html",
+          "baseHref": "./",
+          "main": "apps/noir-compiler/src/main.tsx",
+          "polyfills": "apps/noir-compiler/src/polyfills.ts",
+          "tsConfig": "apps/noir-compiler/tsconfig.app.json",
+          "assets": ["apps/noir-compiler/src/profile.json", "apps/noir-compiler/src/snarkjs.min.js"],
+          "styles": ["apps/noir-compiler/src/css/app.css"],
+          "scripts": [],
+          "webpackConfig": "apps/noir-compiler/webpack.config.js"          
+        },
+        "configurations": {
+          "development": {
+          },
+          "production": {
+            "fileReplacements": [
+              {
+                "replace": "apps/noir-compiler/src/environments/environment.ts",
+                "with": "apps/noir-compiler/src/environments/environment.prod.ts"
+              }
+            ]
+          }
+        }
+      },
+      "lint": {
+        "executor": "@nrwl/linter:eslint",
+        "outputs": ["{options.outputFile}"],
+        "options": {
+          "lintFilePatterns": ["apps/noir-compiler/**/*.ts"],
+          "eslintConfig": "apps/noir-compiler/.eslintrc"
+        }
+      },
+      "serve": {
+        "executor": "@nrwl/webpack:dev-server",
+        "defaultConfiguration": "development",
+        "options": {
+          "buildTarget": "noir-compiler:build",
+          "hmr": true,
+          "baseHref": "/"
+        },
+        "configurations": {
+          "development": {
+            "buildTarget": "noir-compiler:build:development",
+            "port": 2023
+          },
+          "production": {
+            "buildTarget": "noir-compiler:build:production"
+          }
+        }
+      }
+    },
+    "tags": []
+  }
+
diff --git a/apps/noir-compiler/src/app/services/noirPluginClient.ts b/apps/noir-compiler/src/app/services/noirPluginClient.ts
@@ -0,0 +1,27 @@
+import { PluginClient } from '@remixproject/plugin'
+import { createClient } from '@remixproject/plugin-webview'
+import EventManager from 'events'
+
+export class CircomPluginClient extends PluginClient {
+  public internalEvents: EventManager
+
+  constructor() {
+    super()
+    this.methods = ['init', 'parse']
+    createClient(this)
+    this.internalEvents = new EventManager()
+    this.onload()
+  }
+
+  init(): void {
+    console.log('initializing noir plugin...')
+  }
+
+  onActivation(): void {
+    this.internalEvents.emit('noir_activated')
+  }
+
+  async parse(path: string, fileContent?: string) {
+
+  }
+}
diff --git a/apps/noir-compiler/src/index.html b/apps/noir-compiler/src/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Noir - 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"> -->
+    <link rel="stylesheet" integrity="ha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
+		crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
+  </head>
+  <body>
+    <script>
+      var global = window
+    </script>
+    <div id="root"></div>
+    <script src="snarkjs.min.js">   </script>
+    <script src="https://kit.fontawesome.com/41dd021e94.js" crossorigin="anonymous"></script>
+  </body>
+</html>
diff --git a/apps/noir-compiler/src/main.tsx b/apps/noir-compiler/src/main.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+
+const container = document.getElementById('root')
+
+if (container) {
+  createRoot(container).render(<></>)
+}
diff --git a/apps/noir-compiler/src/polyfills.ts b/apps/noir-compiler/src/polyfills.ts
@@ -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';
diff --git a/apps/noir-compiler/src/profile.json b/apps/noir-compiler/src/profile.json
@@ -0,0 +1,17 @@
+{
+  "name": "noir-compiler",
+  "kind": "provider",
+  "displayName": "Noir Compiler",
+  "events": [],
+  "version": "2.0.0",
+  "methods": ["init", "parse"],
+  "canActivate": [],
+  "url": "",
+  "description": "Enables support for noir circuit compilation",
+  "icon": "assets/img/circom-icon-bw-800b.webp",
+  "location": "sidePanel",
+  "documentation": "",
+  "repo": "https://github.com/ethereum/remix-project/tree/master/apps/noir-compiler",
+  "maintainedBy": "Remix",
+  "authorContact": ""
+}
diff --git a/apps/noir-compiler/src/snarkjs.min.js b/apps/noir-compiler/src/snarkjs.min.js
diff --git a/apps/noir-compiler/tsconfig.app.json b/apps/noir-compiler/tsconfig.app.json
@@ -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"]
+  }
+
diff --git a/apps/noir-compiler/tsconfig.json b/apps/noir-compiler/tsconfig.json
@@ -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"
+      }
+    ]
+  }
+
diff --git a/apps/noir-compiler/webpack.config.js b/apps/noir-compiler/webpack.config.js
@@ -0,0 +1,92 @@
+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/
+  }
+
+  config.experiments.syncWebAssembly = true
+
+  return config;
+});