Frontend build with Node.js 18 and Vite (WIP)

.circleci/config.yml

@@ -1,17 +1,28 @@
 ---
 version: 2.1
 
+parameters:
+  golang-tag:
+    type: string
+    default: "1.20"
+  nodejs-ver:
+    type: integer
+    default: 18
+  nodejs-tag:
+    type: string
+    default: "18.19"
+
 executors:
   docker-image-golang:
     environment:
       PROJECT_ROOT_FOLDER: ~/project
     docker:
-      - image: cimg/go:1.20
+      - image: cimg/go:<< pipeline.parameters.golang-tag >>
   docker-image-golang-dependencies:
     environment:
       PROJECT_ROOT_FOLDER: ~/project
     docker:
-      - image: cimg/go:1.20
+      - image: cimg/go:<< pipeline.parameters.golang-tag >>
       - image: proxeus/node-crypto-forex-rates
       - image: proxeus/document-service
       - image: proxeus/mongo-dev-cluster
@@ -25,7 +36,7 @@ executors:
 jobs:
   build-ui:
     docker:
-      - image: cimg/node:16.20
+      - image: cimg/node:<< pipeline.parameters.nodejs-tag >>
     steps:
       - checkout
       - restore_cache:
@@ -153,7 +164,7 @@ jobs:
             - go-mod-v2-{{ checksum "go.sum" }}
       - run: 
           name: Node.js
-          command: curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
+          command: curl -fsSL https://deb.nodesource.com/setup_<< pipeline.parameters.nodejs-ver >>.x | sudo -E bash -
       - run: 
           name: Yarn
           command: curl -sL https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -

README.md

@@ -1,4 +1,4 @@
-[![CircleCI](https://circleci.com/gh/ProxeusApp/proxeus-core.svg?style=shield)](https://circleci.com/gh/ProxeusApp/proxeus-core.svg)
+[![CircleCI](https://dl.circleci.com/status-badge/img/gh/ProxeusApp/proxeus-core/tree/main.svg?style=svg)](https://dl.circleci.com/status-badge/redirect/gh/ProxeusApp/proxeus-core/tree/main)
 
 # Proxeus Core
 --------------

docs/build_all.md

@@ -12,11 +12,10 @@ Here is the list of dependencies:
 + go (1.10+, 64bit for Windows)
 + GOBIN added to your PATH (to check your GOBIN: `echo $(go env GOPATH)/bin`)
 + curl
-+ yarn (1.12+)
-+ node (14)
-+ vue-cli
 + git
-+ docker-compose (18.06.0+)
++ yarn (1.12+)
++ node (16+)
++ docker-compose (18+)
 + wget (for godoc generation)
 + (OSX) Brew Package Manager
 + (OSX) Command Line Tools (Xcode)
@@ -29,12 +28,11 @@ sudo apt-get install make golang curl npm git
 ```
 
 #### OSX
+
 If you currently do not have the OSX `Command Line Tools` installed run
-```
-xcode-select --install
-```
 
 ```
+xcode-select --install
 brew install make golang curl npm git
 ```
 
@@ -44,6 +42,7 @@ PATH=$PATH:$(go env GOPATH)/bin
 ```
 
 ### Clone repository
+
 The project uses go modules.
 
 Clone the repository outside your GOPATH:
@@ -54,21 +53,12 @@ cd proxeus-core
 ```
 
 ### Build
+
 All the build projects are stated in `./Makefile`.
 
-Before building Proxeus, make sure to set all [required environment variables](../README.md#quick-start-with-docker).
-```
-export PROXEUS_DATA_DIR=./data
-export PROXEUS_INFURA_API_KEY=<Your Infura project ID>
-export PROXEUS_SPARKPOST_API_KEY=<Your SparkPost API Key>
-export PROXEUS_ENCRYPTION_SECRET_KEY=<A 32-character random string>
-export PROXEUS_BLOCKCHAIN_CONTRACT_ADDRESS=0x1d3e5c81bf4bc60d41a8fbbb3d1bae6f03a75f71
-export PROXEUS_ALLOW_HTTP=true
-export PROXEUS_PLATFORM_DOMAIN=localhost
-export PROXEUS_EMAIL_FROM=youremail@example.com
+Before building Proxeus, make sure to set all [required environment variables](build_docker.md) (i.e. with an `.env` file).
 
-```
-Make sure that the email domain for `PROXEUS_EMAIL_FROM` is a configured sending domain in sparkpost
+Make sure that the email domain for `PROXEUS_EMAIL_FROM` is a configured sending domain in Sparkpost.
 
 To initialize dependencies run:
 ```

docs/build_docker.md

@@ -101,7 +101,6 @@ You may also want to include custom nodes. There is a sample configuration which
 
 ```
 docker-compose -f docker-compose.yml -f docker-compose-example.override.yml up
-
 ```
 
 See `docker-compose-extra.override.yml` for examples with several other nodes.

docs/frontend.md

@@ -1,9 +1,9 @@
 # Frontend Development
 
 ### Prerequisites
+
 + yarn (1.12+)
-+ node (14+)
-+ vue-cli
++ node (16+)
 
 > **Important**
 >
@@ -14,8 +14,10 @@
 > /core/central/ui/node_modules instead of the package subfolders (./core, etc.).
 
 #### Typescript
+
 Use typescript wherever you find it appropriate. Use it especially for critical
 modules and components where static type checking is helpful.
+
 Check https://vuejs.org/v2/guide/typescript.html for more information in regards to TypeScript in a Vue context.
 
 #### Frontend Dev Server

docs/test.md

@@ -1,6 +1,5 @@
 # Tests
 
-
 The following command runs all the tests without test coverage:
 
 ```

ui/core/babel.config.js

@@ -1,5 +1,4 @@
 module.exports = {
   presets: [
-    '@vue/cli-plugin-babel/preset'
   ]
 }

ui/core/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width,initial-scale=1">
+	<title>Proxeus</title>
+	<link rel="icon" href="/favicon.ico">
+	<script type="module" src="/src/main.js"></script>
+</head>
+<body>
+	<strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+</body>
+</html>

ui/core/package.json

@@ -5,23 +5,25 @@
   "description": "Proxeus UI",
   "author": "info@proxeus.com",
   "scripts": {
-    "serve": "node --max_old_space_size=4096 node_modules/.bin/vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "test:unit": "vue-cli-service test:unit",
-    "test:e2e": "vue-cli-service test:e2e",
-    "lint": "vue-cli-service lint",
+    "dev": "vite",
+    "serve": "node --max_old_space_size=4096 node_modules/.bin/vite preview",
+    "build": "vite build",
+    "test:unit": "vite test:unit",
+    "test:e2e": "vite test:e2e",
+    "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
     "check-node-version": "check-node-version --package"
   },
   "dependencies": {
     "@johmun/vue-tags-input": "^2.0.1",
     "@mdi/font": "^2.6.95",
     "@proxeus/wallet": "1.0.0",
+    "@vitejs/plugin-vue": "^1",
     "ajv": "^6.5.2",
     "async": "^3.2.5",
     "axios": "^1.6.2",
     "babel-runtime": "^6.26.0",
     "bootstrap": "^4.1.2",
-    "bootstrap-vue": "2.0.0-rc.12",
+    "bootstrap-vue": "^2.23.1",
     "brace": "^0.11.1",
     "codemirror": "^5.39.2",
     "core-js": "^3.34.0",
@@ -38,13 +40,16 @@
     "js-sha3": "^0.9.3",
     "moment": "^2.29.4",
     "popper.js": "^1.14.4",
+    "reconnecting-websocket": "^4.4.0",
     "sass": "^1.69.5",
     "sortablejs": "^1.7.0",
     "tippy.js": "^6.3.7",
     "underscore": "^1.8.3",
     "v-tooltip": "^2.0.0-rc.33",
     "velocity-animate": "^1.5.1",
     "vis": "^4.21.0",
+    "vite": "^2.5.10",
+    "vite-plugin-vue2": "^2.0.3",
     "vreme": "^3.0.2",
     "vue": "^2.5.17",
     "vue-append": "^2.2.0",
@@ -74,31 +79,27 @@
     "vuex": "^3.0.1",
     "vuex-i18n": "^1.10.5",
     "vuex-persist": "^1.2.2",
-    "web3": "^1.3.5",
+    "web3": "^4",
     "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
-    "@cypress/webpack-preprocessor": "^4.1.5",
-    "@vue/cli-plugin-babel": "^4",
-    "@vue/cli-plugin-e2e-cypress": "^4",
-    "@vue/cli-plugin-eslint": "^4",
-    "@vue/cli-service": "^4",
-    "@vue/eslint-config-standard": "^5.1.2",
-    "autoprefixer": "^9.0.1",
-    "babel-eslint": "^10.1.0",
-    "check-node-version": "^3.2.0",
-    "eslint": "^6.8.0",
-    "eslint-plugin-import": "^2.29.0",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-standard": "^5.0.0",
-    "eslint-plugin-vue": "^9.18.1",
-    "file-loader": "^3.0.1",
-    "less": "^3.8.1",
-    "less-loader": "^4.1.0",
-    "postcss-loader": "^3.0.0",
-    "sass-loader": "^10.1.1",
-    "vue-template-compiler": "^2.5.17",
+    "@cypress/webpack-preprocessor": "^4",
+    "@vue/eslint-config-standard": "^8",
+    "autoprefixer": "^9",
+    "babel-eslint": "^10",
+    "check-node-version": "^3",
+    "eslint": "^6",
+    "eslint-plugin-import": "^2",
+    "eslint-plugin-node": "^11",
+    "eslint-plugin-promise": "^4",
+    "eslint-plugin-standard": "^5",
+    "eslint-plugin-vue": "^9",
+    "file-loader": "^3",
+    "less": "^3",
+    "less-loader": "^4",
+    "postcss-loader": "^3",
+    "sass": "^1",
+    "vue-template-compiler": "^2",
     "webpack": "^4",
     "worker-loader": "^3"
   },
@@ -108,7 +109,7 @@
     "last 2 Firefox versions"
   ],
   "engines": {
-    "node": ">= 14.15.0",
+    "node": ">= 16.16.0",
     "yarn": ">= 1.22.0"
   }
 }

ui/core/src/App.vue

@@ -11,7 +11,7 @@
 
 <script>
 import baseApp from './baseApp'
-import Blocker from './components/Blocker'
+import Blocker from './components/Blocker.vue'
 
 export default {
   components: { Blocker },

ui/core/src/DocumentApp.vue

@@ -10,7 +10,6 @@
 </template>
 
 <script>
-// import SidebarUser from '@/views/appDependentComponents/SidebarUser'
 import baseApp from './baseApp'
 import Blocker from './components/Blocker'
 

ui/core/src/FrontendApp.vue

@@ -36,10 +36,10 @@
 </template>
 
 <script>
-import FrontendNavbar from '@/components/frontend/FrontendNavbar'
+import FrontendNavbar from '@/components/frontend/FrontendNavbar.vue'
 import _ from 'lodash'
 import baseApp from './baseApp'
-import Blocker from './components/Blocker'
+import Blocker from './components/Blocker.vue'
 
 export default {
   mixins: [baseApp],

ui/core/src/assets/styles/app.scss

@@ -1,6 +1,6 @@
-@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/_functions.scss";
 @import "variables.scss";
-@import "~bootstrap/scss/bootstrap";
+@import "~bootstrap/scss/bootstrap.scss";
 @import "fonts.scss";
 @import "buttons.scss";
 @import "nav-tabs";

ui/core/src/assets/styles/variables.scss

@@ -1,5 +1,5 @@
-@import "~bootstrap/scss/functions";
-@import "~bootstrap/scss/mixins";
+@import "~bootstrap/scss/_functions.scss";
+@import "~bootstrap/scss/_mixins.scss";
 
 // Variables
 //

ui/core/src/components/ChangeProfilePhoto.vue

@@ -38,7 +38,7 @@
 
 <script>
 import VueCropper from 'vue-cropperjs'
-import FileDropBox from './template/FileDropBox'
+import FileDropBox from './template/FileDropBox.vue'
 import mafdc from '@/mixinApp'
 
 export default {

ui/core/src/components/ChangeProfilePhotoModal.vue

@@ -12,10 +12,10 @@
 </template>
 
 <script>
-import bModal from 'bootstrap-vue/es/components/modal/modal'
-import bModalDirective from 'bootstrap-vue/es/directives/modal/modal'
+// import bModal from 'bootstrap-vue/es/components/modal/modal'
+// import bModalDirective from 'bootstrap-vue/es/directives/modal/modal'
 import mafdc from '@/mixinApp'
-import ChangeProfilePhoto from './ChangeProfilePhoto'
+import ChangeProfilePhoto from './ChangeProfilePhoto.vue'
 
 export default {
   mixins: [mafdc],

ui/core/src/components/ImportExport.vue

@@ -73,11 +73,11 @@
 
 <script>
 import mafdc from '@/mixinApp'
-import ImexResults from '../components/ImexResults'
-import Checkbox from '../components/Checkbox'
-import ImportOnly from './ImportOnly'
-import NavTabs from '@/components/nav-tabs/NavTabs'
-import Tab from '@/components/nav-tabs/Tab'
+import ImexResults from '@/components/ImexResults.vue'
+import Checkbox from '@/components/Checkbox.vue'
+import ImportOnly from './ImportOnly.vue'
+import NavTabs from '@/components/nav-tabs/NavTabs.vue'
+import Tab from '@/components/nav-tabs/Tab.vue'
 
 export default {
   mixins: [mafdc],