From b67fecad893b0ff32caddb014d4b0a4bc5a13da5 Mon Sep 17 00:00:00 2001 From: sifnoc Date: Sat, 5 Nov 2022 13:30:35 +0000 Subject: [PATCH 1/8] feat: add script and package files for @zkopru/client in local --- .gitignore | 3 ++ package-dev.json | 68 ++++++++++++++++++++++++++++++++++++++++ package-prod.json | 68 ++++++++++++++++++++++++++++++++++++++++ package.json | 2 ++ scripts/setupLocaldev.js | 18 +++++++++++ 5 files changed, 159 insertions(+) create mode 100644 package-dev.json create mode 100644 package-prod.json create mode 100644 scripts/setupLocaldev.js diff --git a/.gitignore b/.gitignore index e9bcb8d..3c0ca02 100644 --- a/.gitignore +++ b/.gitignore @@ -13,3 +13,6 @@ wrangler.toml workers-site .vercel + +# dev module +zkopru diff --git a/package-dev.json b/package-dev.json new file mode 100644 index 0000000..3a3c75a --- /dev/null +++ b/package-dev.json @@ -0,0 +1,68 @@ +{ + "name": "zkopru-webapp", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "start": "NODE_ENV=development node server.js", + "dev": "webpack-dev-server", + "buildnum": "node scripts/buildversion", + "build": "webpack --config webpack.prod.js --progress", + "clean": "rm -rf build", + "server": "node server", + "ipfs": "npm run clean && npm run build && node scripts/ipfsify.js", + "stats": " webpack --profile --json > stats.json", + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "Chance Hudson", + "license": "MIT", + "dependencies": { + "axios": "^0.20.0", + "compression": "^1.7.4", + "dayjs": "^1.10.6", + "especial": "0.0.4", + "eth-ens-namehash": "^2.0.8", + "express": "^4.17.1", + "js-sha512": "^0.8.0", + "lottie-web": "^5.8.1", + "route-cache": "^0.4.5", + "vue": "^2.6.12", + "vue-class-component": "^7.2.5", + "vue-meta": "^2.4.0", + "vue-router": "^3.4.9", + "vuex": "^3.5.1" + }, + "devDependencies": { + "@babel/core": "^7.11.6", + "@babel/plugin-proposal-class-properties": "^7.10.4", + "@babel/plugin-proposal-decorators": "^7.10.5", + "@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.5", + "@babel/plugin-proposal-optional-chaining": "^7.14.5", + "@babel/plugin-syntax-dynamic-import": "^7.8.3", + "@zkopru/client": "file:./zkopru/packages/client", + "babel-loader": "^8.1.0", + "chokidar": "^3.4.2", + "cidbadge": "^0.0.7", + "css-loader": "^3.2.0", + "dotenv-webpack": "^8.0.1", + "file-loader": "^6.1.0", + "has-tostringtag": "^1.0.0", + "html-webpack-inline-source-plugin": "0.0.10", + "html-webpack-plugin": "^4.4.1", + "husky": "^6.0.0", + "ipfs-unixfs-importer": "^9.0.6", + "memory-fs": "^0.5.0", + "shx": "^0.3.4", + "svgo-loader": "^3.0.0", + "vue-loader": "^15.9.3", + "vue-server-renderer": "^2.6.12", + "vue-style-loader": "^4.1.2", + "vue-template-compiler": "^2.6.12", + "webpack": "^4.44.1", + "webpack-cli": "^3.3.12", + "webpack-dev-server": "^3.11.0", + "webpack-hot-middleware": "^2.25.0", + "webpack-merge": "^5.1.4", + "webpack-node-externals": "^2.5.2" + } +} diff --git a/package-prod.json b/package-prod.json new file mode 100644 index 0000000..5180f9c --- /dev/null +++ b/package-prod.json @@ -0,0 +1,68 @@ +{ + "name": "zkopru-webapp", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "install-dev": "npm install --no-package-lock --no-save shelljs && node scripts/setupLocaldev.js", + "start": "NODE_ENV=development node server.js", + "dev": "webpack-dev-server", + "buildnum": "node scripts/buildversion", + "build": "webpack --config webpack.prod.js --progress", + "clean": "rm -rf build", + "server": "node server", + "ipfs": "npm run clean && npm run build && node scripts/ipfsify.js", + "stats": " webpack --profile --json > stats.json", + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "Chance Hudson", + "license": "MIT", + "dependencies": { + "axios": "^0.20.0", + "compression": "^1.7.4", + "dayjs": "^1.10.6", + "especial": "0.0.4", + "eth-ens-namehash": "^2.0.8", + "express": "^4.17.1", + "js-sha512": "^0.8.0", + "lottie-web": "^5.8.1", + "route-cache": "^0.4.5", + "vue": "^2.6.12", + "vue-class-component": "^7.2.5", + "vue-meta": "^2.4.0", + "vue-router": "^3.4.9", + "vuex": "^3.5.1" + }, + "devDependencies": { + "@babel/core": "^7.11.6", + "@babel/plugin-proposal-class-properties": "^7.10.4", + "@babel/plugin-proposal-decorators": "^7.10.5", + "@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.5", + "@babel/plugin-proposal-optional-chaining": "^7.14.5", + "@babel/plugin-syntax-dynamic-import": "^7.8.3", + "@zkopru/client": "^2.0.0-beta.5", + "babel-loader": "^8.1.0", + "chokidar": "^3.4.2", + "cidbadge": "^0.0.7", + "css-loader": "^3.2.0", + "dotenv-webpack": "^8.0.1", + "file-loader": "^6.1.0", + "has-tostringtag": "^1.0.0", + "html-webpack-inline-source-plugin": "0.0.10", + "html-webpack-plugin": "^4.4.1", + "husky": "^6.0.0", + "ipfs-unixfs-importer": "^9.0.6", + "memory-fs": "^0.5.0", + "svgo-loader": "^3.0.0", + "vue-loader": "^15.9.3", + "vue-server-renderer": "^2.6.12", + "vue-style-loader": "^4.1.2", + "vue-template-compiler": "^2.6.12", + "webpack": "^4.44.1", + "webpack-cli": "^3.3.12", + "webpack-dev-server": "^3.11.0", + "webpack-hot-middleware": "^2.25.0", + "webpack-merge": "^5.1.4", + "webpack-node-externals": "^2.5.2" + } +} diff --git a/package.json b/package.json index d382f4b..5180f9c 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "description": "", "main": "index.js", "scripts": { + "install-dev": "npm install --no-package-lock --no-save shelljs && node scripts/setupLocaldev.js", "start": "NODE_ENV=development node server.js", "dev": "webpack-dev-server", "buildnum": "node scripts/buildversion", @@ -44,6 +45,7 @@ "chokidar": "^3.4.2", "cidbadge": "^0.0.7", "css-loader": "^3.2.0", + "dotenv-webpack": "^8.0.1", "file-loader": "^6.1.0", "has-tostringtag": "^1.0.0", "html-webpack-inline-source-plugin": "0.0.10", diff --git a/scripts/setupLocaldev.js b/scripts/setupLocaldev.js new file mode 100644 index 0000000..29d6975 --- /dev/null +++ b/scripts/setupLocaldev.js @@ -0,0 +1,18 @@ +// import shell from 'shelljs'; +var shell = require('shelljs'); + +if (!shell.which('git')) { + shell.echo('Sorry, this script requires git'); + shell.exit(1); +} + +// clone zkopru repo for `@zkopru/client` package +shell.echo(`Clone and build zkopru`) +shell.exec(`git submodule update --init`); +shell.cd(`zkopru`); +shell.exec(`yarn && yarn build:ts:serial`); +shell.cd(`..`); + +// copy package file which is replaced local path +shell.echo(`Override package.json for using client package in local`); +shell.cp(`-f`, `package-dev.json`, `package.json`); From d920bf4266f07c0e2b6b99c5e33b08a27c14b33d Mon Sep 17 00:00:00 2001 From: sifnoc Date: Sat, 5 Nov 2022 13:36:15 +0000 Subject: [PATCH 2/8] fix: reinstall for applying local zkopru --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 5180f9c..c5efa85 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "description": "", "main": "index.js", "scripts": { - "install-dev": "npm install --no-package-lock --no-save shelljs && node scripts/setupLocaldev.js", + "install-dev": "npm install --no-package-lock --no-save shelljs && node scripts/setupLocaldev.js && npm install", "start": "NODE_ENV=development node server.js", "dev": "webpack-dev-server", "buildnum": "node scripts/buildversion", From 1f03a65fda43e8bf7d19e2fc008bf3b0958b2960 Mon Sep 17 00:00:00 2001 From: sifnoc Date: Sat, 5 Nov 2022 13:49:57 +0000 Subject: [PATCH 3/8] fix: install command and remove shx package no longer need --- package-dev.json | 1 - package-prod.json | 2 +- package.json | 2 +- 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/package-dev.json b/package-dev.json index 3a3c75a..8165530 100644 --- a/package-dev.json +++ b/package-dev.json @@ -52,7 +52,6 @@ "husky": "^6.0.0", "ipfs-unixfs-importer": "^9.0.6", "memory-fs": "^0.5.0", - "shx": "^0.3.4", "svgo-loader": "^3.0.0", "vue-loader": "^15.9.3", "vue-server-renderer": "^2.6.12", diff --git a/package-prod.json b/package-prod.json index 5180f9c..c5efa85 100644 --- a/package-prod.json +++ b/package-prod.json @@ -4,7 +4,7 @@ "description": "", "main": "index.js", "scripts": { - "install-dev": "npm install --no-package-lock --no-save shelljs && node scripts/setupLocaldev.js", + "install-dev": "npm install --no-package-lock --no-save shelljs && node scripts/setupLocaldev.js && npm install", "start": "NODE_ENV=development node server.js", "dev": "webpack-dev-server", "buildnum": "node scripts/buildversion", diff --git a/package.json b/package.json index c5efa85..5180f9c 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "description": "", "main": "index.js", "scripts": { - "install-dev": "npm install --no-package-lock --no-save shelljs && node scripts/setupLocaldev.js && npm install", + "install-dev": "npm install --no-package-lock --no-save shelljs && node scripts/setupLocaldev.js", "start": "NODE_ENV=development node server.js", "dev": "webpack-dev-server", "buildnum": "node scripts/buildversion", From a70cbfde8548a89acab29be023fa4f9c51cd0af7 Mon Sep 17 00:00:00 2001 From: sifnoc Date: Sat, 5 Nov 2022 15:06:58 +0000 Subject: [PATCH 4/8] feat: add environment variable using dotenv-webpack --- .env.example | 3 +++ src/stores/zkopru.js | 48 ++++++++++++++++++++++++++++++++------------ webpack.config.js | 8 +++----- 3 files changed, 41 insertions(+), 18 deletions(-) create mode 100644 .env.example diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..5f94f08 --- /dev/null +++ b/.env.example @@ -0,0 +1,3 @@ +WEBSOCKET=ws://127.0.0.1:8545 +ZKOPRU_ADDRESS=0x9A9f2CCfdE556A7E9Ff0848998Aa4a0CFD8863AE +CHAINID=31337 diff --git a/src/stores/zkopru.js b/src/stores/zkopru.js index 9db636c..1eaba55 100644 --- a/src/stores/zkopru.js +++ b/src/stores/zkopru.js @@ -1,5 +1,4 @@ import { fromWei } from '../utils/wei' -import dayjs from 'dayjs' import BN from 'bn.js' const DEFAULT_NETWORKS = { @@ -21,22 +20,45 @@ const DEFAULT_NETWORKS = { blockExplorerUrls: ['https://goerli.etherscan.io'] } }, - '69': { - NAME: 'Optimism testnet', - WEBSOCKET: 'wss://optimism-kovan.zkopru.network', + // After merged this optimism testnet deprecated + // '69': { + // NAME: 'Optimism testnet', + // WEBSOCKET: 'wss://optimism-kovan.zkopru.network', + // ZKOPRU_ADDRESSES: [ + // '0x31f3E51Fc7BE2BD24F258af92B0E371fa0A48762' // minimum stake amount 1 ETH + // ], + // METAMASK_PARAMS: { + // chainId: '0x45', + // chainName: 'Optimism-kovan', + // nativeCurrency: { + // name: 'Optimism ETH', + // symbol: 'ETH', + // decimals: 18 + // }, + // rpcUrls: ['https://kovan.optimism.io'], + // blockExplorerUrls: ['https://kovan-optimistic.etherscan.io'] + // } + // } +} + +if (process.env.NODE_ENV == "development") { + let chainId = '0x7A69' // 31337 + if (process.env.CHAINID) chainId = `0x${parseInt(process.env.CHAINID).toString(16)}` + + DEFAULT_NETWORKS[process.env.CHAINID ?? '31337'] = { + NAME: 'hardhat node', + WEBSOCKET: process.env.WEBSOCKET ?? 'ws://localhost:8546', ZKOPRU_ADDRESSES: [ - '0x31f3E51Fc7BE2BD24F258af92B0E371fa0A48762' // minimum stake amount 1 ETH + process.env.ZKOPRU_ADDRESS ?? '0x9A9f2CCfdE556A7E9Ff0848998Aa4a0CFD8863AE' // ], METAMASK_PARAMS: { - chainId: '0x45', - chainName: 'Optimism-kovan', + chainId, + chainName: 'testnet', nativeCurrency: { - name: 'Optimism ETH', + name: 'hardhat ETH', symbol: 'ETH', decimals: 18 }, - rpcUrls: ['https://kovan.optimism.io'], - blockExplorerUrls: ['https://kovan-optimistic.etherscan.io'] } } } @@ -134,9 +156,9 @@ export default { // Error code 4902 - no added network in metamask if (error.code == 4902 || error.code) { try { - await window.ethereum.request({ - method: 'wallet_addEthereumChain', - params: [DEFAULT_NETWORKS[chainId].METAMASK_PARAMS] + await window.ethereum.request({ + method: 'wallet_addEthereumChain', + params: [DEFAULT_NETWORKS[chainId].METAMASK_PARAMS] }) rootState.chainId = chainId } catch (error) { diff --git a/webpack.config.js b/webpack.config.js index b041ae2..0581f50 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,13 +1,11 @@ const { merge } = require('webpack-merge') const common = require('./webpack.common') const path = require('path') -// const VueSSRClientPlugin = require('vue-server-renderer/client-plugin') +const Dotenv = require('dotenv-webpack') module.exports = merge(common, { mode: 'development', - plugins: [ - // new VueSSRClientPlugin(), - ], + plugins: [new Dotenv()], devServer: { contentBase: path.join(__dirname, 'build'), publicPath: '/', @@ -16,5 +14,5 @@ module.exports = merge(common, { rewrites: [{ from: /^\/[0-9A-Za-z-/]+$/, to: '/index.html' }], index: 'index.html', }, - }, + } }) From c5a8320c4a4e58e7430c354bfb823c3c65cb56dd Mon Sep 17 00:00:00 2001 From: sifnoc Date: Sat, 5 Nov 2022 15:41:12 +0000 Subject: [PATCH 5/8] chore: updating docs and remove comments --- README.md | 13 +++++++++++++ package-prod.json | 1 + package.json | 3 ++- src/stores/zkopru.js | 19 ------------------- 4 files changed, 16 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index ff0785a..a3a6321 100644 --- a/README.md +++ b/README.md @@ -18,3 +18,16 @@ Additionally we need the `@zkopru/client` package. This needs to be linked local ## Development A development server with hot reload can be started with `npm run dev` it will be accessible at `localhost:8080`. + +## Development alongside @zkopru/client + +the web wallet download `@zkopru/client` module from npm while installing. for more convenience to develop alongside @zkopru/client, It would be better to use a client package that is locally cloned. + +For that, you can run `npm run install-dev`. It will run the script that clones the zkopru repo with the main branch then setup and build. + +If you are using the default hardhat node configuration in local environment, It would not need to load `.env` file. + +In some cases, you have to create `.env` (using `.env.example`) and then modify the hardhat node url, zkopru contract address and the chainId in the env file for connecting your hardhat node. +And please do not forget to build with `npm run build:dev` for applying the variables to the web server. + +To revert this setup, you can simply overwrite `package.json` with `package-prod.json` and then install it again. diff --git a/package-prod.json b/package-prod.json index c5efa85..ef8e422 100644 --- a/package-prod.json +++ b/package-prod.json @@ -9,6 +9,7 @@ "dev": "webpack-dev-server", "buildnum": "node scripts/buildversion", "build": "webpack --config webpack.prod.js --progress", + "build:dev": "webpack --progress", "clean": "rm -rf build", "server": "node server", "ipfs": "npm run clean && npm run build && node scripts/ipfsify.js", diff --git a/package.json b/package.json index 5180f9c..ef8e422 100644 --- a/package.json +++ b/package.json @@ -4,11 +4,12 @@ "description": "", "main": "index.js", "scripts": { - "install-dev": "npm install --no-package-lock --no-save shelljs && node scripts/setupLocaldev.js", + "install-dev": "npm install --no-package-lock --no-save shelljs && node scripts/setupLocaldev.js && npm install", "start": "NODE_ENV=development node server.js", "dev": "webpack-dev-server", "buildnum": "node scripts/buildversion", "build": "webpack --config webpack.prod.js --progress", + "build:dev": "webpack --progress", "clean": "rm -rf build", "server": "node server", "ipfs": "npm run clean && npm run build && node scripts/ipfsify.js", diff --git a/src/stores/zkopru.js b/src/stores/zkopru.js index 1eaba55..8748ea8 100644 --- a/src/stores/zkopru.js +++ b/src/stores/zkopru.js @@ -20,25 +20,6 @@ const DEFAULT_NETWORKS = { blockExplorerUrls: ['https://goerli.etherscan.io'] } }, - // After merged this optimism testnet deprecated - // '69': { - // NAME: 'Optimism testnet', - // WEBSOCKET: 'wss://optimism-kovan.zkopru.network', - // ZKOPRU_ADDRESSES: [ - // '0x31f3E51Fc7BE2BD24F258af92B0E371fa0A48762' // minimum stake amount 1 ETH - // ], - // METAMASK_PARAMS: { - // chainId: '0x45', - // chainName: 'Optimism-kovan', - // nativeCurrency: { - // name: 'Optimism ETH', - // symbol: 'ETH', - // decimals: 18 - // }, - // rpcUrls: ['https://kovan.optimism.io'], - // blockExplorerUrls: ['https://kovan-optimistic.etherscan.io'] - // } - // } } if (process.env.NODE_ENV == "development") { From 08663aff123014c864613ba7910a51802400309b Mon Sep 17 00:00:00 2001 From: sifnoc Date: Wed, 16 Nov 2022 13:32:30 +0000 Subject: [PATCH 6/8] feat: add more explanation for development --- README.md | 32 +++++++++++++++++++++----------- 1 file changed, 21 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index a3a6321..77e336c 100644 --- a/README.md +++ b/README.md @@ -10,24 +10,34 @@ Draft accessible [here](https://alpha.wallet.zkopru.network/). Install modules as usual with `npm install`. -Additionally we need the `@zkopru/client` package. This needs to be linked locally because it's not published on npm. This can be done using yarn by running the following: - -- First in `zkopru/packages/client`: `yarn link` -- Then in `zkopru-web`: `yarn link @zkopru/client` +It will download `@zkopru/client` module whilch is published on npm. ## Development A development server with hot reload can be started with `npm run dev` it will be accessible at `localhost:8080`. -## Development alongside @zkopru/client +## Development setup + +There are two options to using local `@zkopru/client` package without download from npm. + +1. Using `yarn link` + + This can be done using yarn by running the following: + + - First in `zkopru/packages/client`: `yarn link` + - Then in `zkopru-web`: `yarn link @zkopru/client` + + > Note that, you must unlink at some point. + +2. Using script -the web wallet download `@zkopru/client` module from npm while installing. for more convenience to develop alongside @zkopru/client, It would be better to use a client package that is locally cloned. + For more convenience to develop alongside @zkopru/client, It would be better to use a client package that is locally cloned. -For that, you can run `npm run install-dev`. It will run the script that clones the zkopru repo with the main branch then setup and build. + For that, you can run `npm run install-dev`. It will run the script that clones the zkopru repo with the main branch then setup and build. -If you are using the default hardhat node configuration in local environment, It would not need to load `.env` file. + If you are using the default hardhat node configuration in local environment, It would not need to load `.env` file. -In some cases, you have to create `.env` (using `.env.example`) and then modify the hardhat node url, zkopru contract address and the chainId in the env file for connecting your hardhat node. -And please do not forget to build with `npm run build:dev` for applying the variables to the web server. + In some cases, you have to create `.env` (using `.env.example`) and then modify the hardhat node url, zkopru contract address and the chainId in the env file for connecting your hardhat node. + And please do not forget to build with `npm run build:dev` for applying the variables to the web server. -To revert this setup, you can simply overwrite `package.json` with `package-prod.json` and then install it again. + To revert this setup, you can simply overwrite `package.json` with `package-prod.json` and then install it again. From 2b24b7df15293f98677d8c0ae5b33a21b52aadc8 Mon Sep 17 00:00:00 2001 From: sifnoc Date: Thu, 17 Nov 2022 07:48:27 +0000 Subject: [PATCH 7/8] chore: small fix typo --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 77e336c..53ee5c2 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ Draft accessible [here](https://alpha.wallet.zkopru.network/). Install modules as usual with `npm install`. -It will download `@zkopru/client` module whilch is published on npm. +It will download `@zkopru/client` module which is published on npm. ## Development @@ -18,7 +18,7 @@ A development server with hot reload can be started with `npm run dev` it will b ## Development setup -There are two options to using local `@zkopru/client` package without download from npm. +There are two options to using local `@zkopru/client` package without downloading from npm. 1. Using `yarn link` From c1ca899959ba5626bc764e9617a725c7b03237ad Mon Sep 17 00:00:00 2001 From: sifnoc Date: Sat, 19 Nov 2022 10:25:52 +0000 Subject: [PATCH 8/8] fix: missing submodule part --- .gitmodules | 3 +++ zkopru | 1 + 2 files changed, 4 insertions(+) create mode 100644 .gitmodules create mode 160000 zkopru diff --git a/.gitmodules b/.gitmodules new file mode 100644 index 0000000..c1e7dc8 --- /dev/null +++ b/.gitmodules @@ -0,0 +1,3 @@ +[submodule "zkopru"] + path = zkopru + url = https://github.com/zkopru-network/zkopru diff --git a/zkopru b/zkopru new file mode 160000 index 0000000..d6a30a9 --- /dev/null +++ b/zkopru @@ -0,0 +1 @@ +Subproject commit d6a30a9494a634e25e45dbd496f07c85c59ff8cc