Setup electron, loading/terms views

.yarnclean

@@ -0,0 +1,2 @@
+@types/react-native
+

package.json

@@ -9,21 +9,19 @@
   },
   "license": "MIT",
   "scripts": {
+    "dev": "electron-webpack dev",
+    "compile": "electron-webpack",
     "lint": "eslint --ext .ts,.tsx src",
-    "dev": "webpack --mode=development",
     "start": "qode --inspect ./dist/index.js",
     "clean": "rm -rf dist ./deploy/darwin/build",
     "build": "webpack -p",
     "bundle": "bash ./deploy/pack-macos.sh"
   },
   "dependencies": {
     "@mysteriumnetwork/terms": "^0.0.24",
-    "@nodegui/nodegui": "^0.18.2",
-    "@nodegui/qode": "^2.0.4",
-    "@nodegui/react-nodegui": "^0.6.1",
     "async-retry": "^1.3.1",
     "byte-size": "^6.2.0",
-    "eventsource": "^1.0.7",
+    "history": "^4.10.1",
     "lodash": "^4.17.15",
     "mkdirp": "^1.0.4",
     "mobx": "^5.15.4",
@@ -34,30 +32,33 @@
     "open": "^7.0.0",
     "qrcode-generator": "^1.4.4",
     "react": "^16.13.1",
-    "showdown": "^1.9.1",
+    "react-dom": "^16.13.1",
+    "react-is": "^16.13.1",
+    "react-markdown": "^4.3.1",
+    "react-router-dom": "^5.1.2",
+    "styled-components": "^4.4.1",
     "sudo-prompt": "^9.1.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.9.0",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/plugin-proposal-decorators": "^7.8.3",
-    "@babel/preset-env": "^7.9.5",
     "@babel/preset-react": "^7.9.4",
-    "@babel/preset-typescript": "^7.9.0",
-    "@nodegui/packer": "^1.4.1",
     "@types/async-retry": "^1.4.1",
-    "@types/eventsource": "^1.1.2",
+    "@types/css-font-loading-module": "^0.0.4",
     "@types/lodash": "^4.14.149",
     "@types/node": "12.12.35",
     "@types/node-fetch": "^2.5.4",
     "@types/react": "^16.9.33",
+    "@types/react-dom": "^16.9.6",
+    "@types/react-router-dom": "^5.1.4",
     "@types/showdown": "^1.9.3",
+    "@types/styled-components": "^5.1.0",
     "@types/webpack-env": "^1.14.1",
     "@typescript-eslint/eslint-plugin": "^2.27.0",
     "@typescript-eslint/parser": "^2.27.0",
-    "babel-loader": "^8.1.0",
     "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "^5.1.1",
+    "electron": "^8.2.2",
+    "electron-webpack": "^2.8.2",
+    "electron-webpack-ts": "^4.0.1",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.10.1",
     "eslint-plugin-header": "^3.0.0",
@@ -69,10 +70,13 @@
     "native-addon-loader": "^2.0.1",
     "prettier": "^2.0.4",
     "typescript": "^3.7.4",
+    "url-loader": "^4.1.0",
     "webpack": "^4.42.1",
     "webpack-cli": "^3.3.10"
   },
-  "resolutions": {
-    "@types/react": "^16.9.33"
+  "electronWebpack": {
+    "renderer": {
+      "webpackConfig": "webpack.renderer.additions.js"
+    }
   }
 }

src/app.tsx

@@ -5,42 +5,33 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from "react"
-import { observer } from "mobx-react-lite"
-import { View } from "@nodegui/react-nodegui"
-import { ConnectionStatus, IdentityRegistrationStatus } from "mysterium-vpn-js"
+import { HashRouter, Route, Switch } from "react-router-dom"
 
-import { useStores } from "./store"
-import { DaemonStatusType } from "./daemon/store"
-import { SelectProposalView } from "./views/consumer/select-proposal/select-proposal-view"
-import { winSize } from "./config"
-import { ConnectedView } from "./views/consumer/connected/connected-view"
-import { SelectIdentityView } from "./views/common/select-identity/select-identity-view"
-import { WalletView } from "./views/consumer/wallet/wallet-view"
 import { LoadingView } from "./views/common/loading/loading-view"
 import { AcceptTermsView } from "./views/common/accept-terms/accept-terms-view"
 import { WelcomeView } from "./views/common/welcome/welcome-view"
+import { SelectIdentityView } from "./views/common/select-identity/select-identity-view"
 
-// To avoid hiccups on screen re-render, render all screens and use style to switch between them.
-// Hidden elements have zero width.
-const fitWindowIfVisible = (visible: boolean): string => {
-    return `width: ${visible ? winSize.width : 0}; height: ${winSize.height};`
-}
-
-enum Nav {
-    Loader,
-    Welcome,
-    AcceptTerms,
-    SelectIdentity,
-    SelectProposal,
-    ConnectionActive,
-    Wallet,
-}
-
-export const App = observer(() => {
-    const root = useStores()
-    const { daemon, connection, identity, config } = root
-
-    // Poor man's navigation, but performs better than re-rendering the whole screen.
+export const App: React.FC = () => {
+    return (
+        <HashRouter>
+            <Switch>
+                <Route path="/welcome">
+                    <WelcomeView />
+                </Route>
+                <Route path="/terms">
+                    <AcceptTermsView />
+                </Route>
+                <Route path="/identity">
+                    <SelectIdentityView />
+                </Route>
+                <Route path="/loading">
+                    <LoadingView />
+                </Route>
+            </Switch>
+        </HashRouter>
+    )
+    /*// Poor man's navigation, but performs better than re-rendering the whole screen.
     let screen: Nav
     if (daemon.status == DaemonStatusType.Down) {
         screen = Nav.Loader
@@ -71,5 +62,5 @@ export const App = observer(() => {
             <ConnectedView style={fitWindowIfVisible(screen == Nav.ConnectionActive)} />
             <WalletView style={fitWindowIfVisible(screen == Nav.Wallet)} />
         </View>
-    )
-})
+    )*/
+}

src/config/store.ts

@@ -39,6 +39,19 @@ export class ConfigStore {
                 }
             },
         )
+        reaction(
+            () => this.config,
+            () => {
+                if (!this.currentTermsAgreed() && this.root.welcome) {
+                    console.log("welcome")
+                    this.root.history.push("/welcome")
+                } else if (!this.currentTermsAgreed()) {
+                    this.root.history.push("/terms")
+                } else {
+                    this.root.history.push("/identity")
+                }
+            },
+        )
     }
 
     @action

src/daemon/store.ts

@@ -6,10 +6,10 @@
  */
 import tequilapi from "mysterium-vpn-js"
 import { action, observable, reaction, when } from "mobx"
-import EventSource from "eventsource"
 
 import { supervisor } from "../supervisor/supervisor"
 import { sseConnect } from "../tequila-sse"
+import { RootStore } from "../store"
 
 export enum DaemonStatusType {
     Up = "UP",
@@ -27,29 +27,28 @@ export class DaemonStore {
 
     eventSource?: EventSource
 
-    constructor() {
+    root: RootStore
+
+    constructor(root: RootStore) {
+        this.root = root
         setInterval(async () => {
             await this.healthcheck()
         }, 2000)
         when(
             () => this.status == DaemonStatusType.Down,
             async () => {
+                this.root.history.push("/loading")
                 await this.start()
             },
         )
-        reaction(
-            () => this.status,
-            async (status) => {
-                if (status == DaemonStatusType.Down) {
-                    await this.start()
-                }
-            },
-        )
         reaction(
             () => this.status,
             async (status) => {
                 if (status == DaemonStatusType.Up) {
                     this.eventSource = sseConnect()
+                } else {
+                    this.root.history.push("/loading")
+                    await this.start()
                 }
             },
         )

src/declarations.d.ts

@@ -15,3 +15,5 @@ declare module "byte-size" {
 declare module "@mysteriumnetwork/terms" {
     const TermsEndUser: string
 }
+
+declare const __static: string

src/history.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2020 BlockDev AG
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { createHashHistory } from "history"
+
+export const history = createHashHistory()