Merge pull request #473 from mysteriumnetwork/make-it-dark

Make it dark

README.md

@@ -4,6 +4,8 @@
 [![Downloads](https://img.shields.io/github/downloads/mysteriumnetwork/mysterium-vpn-desktop/total.svg)](https://github.com/mysteriumnetwork/mysterium-vpn-desktop/releases)
 [![Lint](https://github.com/mysteriumnetwork/mysterium-vpn-desktop/workflows/Lint/badge.svg?event=push)](https://github.com/mysteriumnetwork/mysterium-vpn-desktop/actions?query=workflow%3ALint)
 
+## ⚠️ MysteriumVPN 2.0 for Desktop is available. https://www.mysteriumvpn.com
+
 Mysterium VPN is a Desktop VPN client for Windows, macOS and Linux.
 
 It is the first Mysterium Network use case in action. Our dVPN is our flagship product and showcases the potential of our residential IP network. [Learn more](https://docs.mysterium.network/)

monkey-patch-crypto.js

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) 2022 BlockDev AG
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const crypto = require("crypto")
+
+/**
+ * @see {@link https://stackoverflow.com/a/72219174}
+ */
+let cryptoPatched = false
+const monkeyPatchCrypto = () => {
+    if (cryptoPatched) return
+    cryptoPatched = true
+
+    /**
+     * The MD4 algorithm is not available anymore in Node.js 17+ (because of library SSL 3).
+     * In that case, silently replace MD4 by the MD5 algorithm.
+     */
+    try {
+        crypto.createHash("md4")
+    } catch (e) {
+        console.warn('Crypto "MD4" is not supported anymore by this Node.js version')
+        const origCreateHash = crypto.createHash
+        crypto.createHash = (alg, opts) => {
+            return origCreateHash(alg === "md4" ? "md5" : alg, opts)
+        }
+    }
+}
+
+monkeyPatchCrypto()

package.json

@@ -1,7 +1,7 @@
 {
   "name": "mysterium-vpn-desktop",
-  "productName": "MysteriumVPN",
-  "description": "Desktop VPN client for Mysterium Network",
+  "productName": "MysteriumDark",
+  "description": "Desktop VPN client (legacy) for Mysterium Network",
   "version": "0.0.0-snapshot",
   "main": "index.js",
   "author": {
@@ -44,7 +44,6 @@
     "mysterium-vpn-js": "26.0.0",
     "node-machine-id": "^1.1.12",
     "open": "^7.0.0",
-    "pushy-electron": "^1.0.8",
     "qrcode.react": "^2.0.0",
     "react": "^18.2.0",
     "react-autosuggest": "^10.1.0",
@@ -85,6 +84,7 @@
     "@typescript-eslint/eslint-plugin": "^5.23.0",
     "@typescript-eslint/parser": "^5.23.0",
     "chmodr": "^1.2.0",
+    "cross-env": "^7.0.3",
     "electron": "^20.1.2",
     "electron-builder": "^23.3.3",
     "electron-devtools-installer": "^3.2.0",
@@ -110,13 +110,15 @@
   },
   "analyticsUrl": "https://analytics.mysterium.network",
   "intercomAppId": "sjkeehf4",
-  "pushyAppId": "5f23dc54d4786d7760003a71",
   "sentryDsn": "https://[email protected]/5222592",
   "electronWebpack": {
     "renderer": {
       "sourceDirectory": "src/app",
       "template": "src/app/index.html",
       "webpackConfig": "webpack.renderer.additions.js"
+    },
+    "main": {
+      "webpackConfig": "webpack.main.additions.js"
     }
   },
   "build": {

src/app/config/store.ts

@@ -36,6 +36,7 @@ export interface DesktopConfig {
     "nat-compatibility"?: "auto" | "off"
     "quick-connect"?: boolean
     filters?: ProposalFilters
+    "vpn2-offered"?: boolean
 }
 
 export interface ProposalFilters {
@@ -171,4 +172,12 @@ export class ConfigStore {
             "keep-connected-on-fail": enabled,
         })
     }
+
+    get vpn2Offered(): boolean {
+        return this.config.desktop?.["vpn2-offered"] === true
+    }
+
+    setVpn2Offered = async (): Promise<void> => {
+        return this.updateDesktopConfigPartial({ "vpn2-offered": true })
+    }
 }

src/app/connection/store.ts

@@ -16,7 +16,6 @@ import { newUIProposal, UIProposal } from "../proposals/uiProposal"
 import { MainIpcListenChannels } from "../../shared/ipc"
 import { log, logErrorMessage } from "../../shared/log/log"
 import { eventBus, tequilapi } from "../tequilapi"
-import { subscribePush } from "../push/push"
 import { parseError } from "../../shared/errors/parseError"
 import { analytics } from "../analytics/analytics"
 import { EventName } from "../analytics/event"
@@ -235,7 +234,6 @@ export class ConnectionStore {
         try {
             const location = await tequilapi.location()
             this.setOriginalLocation(location)
-            subscribePush(location.country)
         } catch (err) {
             const msg = parseError(err)
             logErrorMessage("Failed to lookup original location", msg)

src/app/identity/store.ts

@@ -13,8 +13,6 @@ import BigNumber from "bignumber.js"
 import { RootStore, Step } from "../store"
 import { eventBus, tequilapi } from "../tequilapi"
 import { log } from "../../shared/log/log"
-import { PushTopic } from "../../shared/push/topics"
-import { subscribePush, unsubscribePush } from "../push/push"
 import { ExportIdentityOpts, ImportIdentityOpts, mysteriumNodeIPC } from "../../shared/node/mysteriumNodeIPC"
 import { analytics } from "../analytics/analytics"
 import { EventName } from "../analytics/event"
@@ -74,11 +72,6 @@ export class IdentityStore {
         reaction(
             () => Number(this.identity?.balanceTokens.human ?? 0),
             (balance) => {
-                if (balance != null && balance < 0.5) {
-                    subscribePush(PushTopic.LessThanHalfMyst)
-                } else {
-                    unsubscribePush(PushTopic.LessThanHalfMyst)
-                }
                 reportBalanceUpdate(balance)
             },
         )

src/app/navigation/components/TitleBar/TitleBar.tsx

@@ -18,7 +18,7 @@ import { locations } from "../../locations"
 import { titleBarSize } from "../../../../config"
 import { ProtectionStatus } from "../../../location/components/ProtectionStatus/ProtectionStatus"
 import { CurrentIP } from "../../../location/components/CurrentIP/CurrentIP"
-import { darkBlue, greyBlue1 } from "../../../ui-kit/colors"
+import { greyBlue1, greyBlue2, lightBlue } from "../../../ui-kit/colors"
 import { displayTokens2 } from "../../../payment/display"
 
 import { WindowButtonsWindows } from "./WindowButtonsWindows"
@@ -37,8 +37,8 @@ export const Container = styled.div`
         padding-left: 80px;
     }
 
-    color: ${darkBlue};
-    background: #fcfcfc;
+    color: ${lightBlue};
+    background: #0c0c0c;
     display: flex;
     align-items: center;
 
@@ -69,7 +69,7 @@ const NavigationButton = styled.div<{ active: boolean }>`
         background: ${(props) => (props.active ? greyBlue1 : "#aeaedb33")};
         color: ${(props) => (props.active ? "#fff" : "inherit")};
     }
-    background: ${(props) => (props.active ? greyBlue1 : "inherit")};
+    background: ${(props) => (props.active ? greyBlue2 : "inherit")};
     color: ${(props) => (props.active ? "#fff" : "inherit")};
 
     display: flex;

src/app/ui-kit/colors.ts

@@ -11,5 +11,5 @@ export const greyBlue1 = "#9090bb"
 export const greyBlue2 = "#5a597d"
 export const darkBlue = "#3c3857"
 
-export const bg1 = "linear-gradient(180deg, #562160 0%, #7B2061 48.96%, #64205D 100%)"
+export const bg1 = "#020202"
 export const bg2 = "linear-gradient(180deg, #2B2745 0%, #454565 46.88%, #212045 100%)"

src/app/ui-kit/components/MysteriumVPN2Toast/MysteriumVPN2Toast.tsx

@@ -0,0 +1,55 @@
+/* eslint-disable */
+/**
+ * Copyright (c) 2021 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 React, { useEffect } from "react";
+import icon from "./icon.png";
+import { toast } from "react-hot-toast";
+import { dismissibleToast } from "../dismissibleToast";
+import { shell } from "electron";
+import styled from "styled-components";
+import { useStores } from "../../../store";
+
+const Container = styled.div`
+  cursor: pointer;
+`;
+export const MysteriumVPN2Toast: React.FC = () => {
+  const root = useStores()
+  const { config } = root
+  useEffect(() => {
+    if (config.vpn2Offered) {
+      return
+    }
+
+    let link: string
+    if (root.isWindows) {
+      link = "https://www.mysteriumvpn.com/mysterium-vpn-v2?utm_source=MysteriumDark&utm_medium=Windows&utm_campaign=Banner"
+    } else if (root.isMacOS) {
+      link = "https://www.mysteriumvpn.com/mysterium-vpn-v2?utm_source=MysteriumDark&utm_medium=Mac&utm_campaign=Banner"
+    } else {
+      link = "https://www.mysteriumvpn.com/mysterium-vpn-v2?utm_source=MysteriumDark&utm_medium=Other&utm_campaign=Banner"
+    }
+
+    toast(dismissibleToast(
+      <Container>
+        <a onClick={() => {
+          shell.openExternal(link);
+          config.setVpn2Offered()
+        }}>
+          <b>MysteriumVPN 2.0 for Desktop is available</b><br />
+          <span>Download the new app to use Mysterium VPN on Android, iOS, Mac and Windows</span>
+        </a>
+      </Container>
+    ), {
+      duration: Infinity,
+      icon: <img src={icon} width={64} height={64} />,
+      style: {
+        maxWidth: 400,
+      }
+    });
+  });
+  return <></>;
+};

src/app/ui-kit/components/dismissibleToast.tsx

@@ -17,7 +17,7 @@ const Container = styled.div`
 const Dismiss = styled.div`
     width: 22px;
     display: flex;
-    align-items: center;
+    align-items: start;
     justify-content: flex-end;
     font-size: 18px;
     color: #ccc;

src/app/views/consumer/Proposals/ManualConnectView.tsx

@@ -19,6 +19,7 @@ import { ViewSidebar } from "../../../navigation/components/ViewSidebar/ViewSide
 import { ViewContent } from "../../../navigation/components/ViewContent/ViewContent"
 import { darkBlue } from "../../../ui-kit/colors"
 import { Preset } from "../../../proposals/components/Preset/Preset"
+import { MysteriumVPN2Toast } from "../../../ui-kit/components/MysteriumVPN2Toast/MysteriumVPN2Toast"
 
 import { SwitchConnectView } from "./SwitchConnectView"
 import { ProposalSearch } from "./ProposalSearch"
@@ -73,6 +74,7 @@ export const ManualConnectView: React.FC = observer(function ManualConnectView()
     }, [])
     return (
         <ViewContainer>
+            <MysteriumVPN2Toast />
             <ViewNavBar>
                 <NavContainer>
                     <SwitchConnectView />

src/app/views/consumer/Proposals/QuickConnectView.tsx

@@ -22,6 +22,7 @@ import { brand } from "../../../ui-kit/colors"
 import { Preset } from "../../../proposals/components/Preset/Preset"
 import { RippleButton } from "../../../ui-kit/components/Button/RippleButton"
 import { dismissibleToast } from "../../../ui-kit/components/dismissibleToast"
+import { MysteriumVPN2Toast } from "../../../ui-kit/components/MysteriumVPN2Toast/MysteriumVPN2Toast"
 
 import animationQuickConnect from "./animation_quick_connect.json"
 import { SwitchConnectView } from "./SwitchConnectView"
@@ -117,6 +118,7 @@ export const QuickConnectView: React.FC = observer(function QuickConnectView() {
     }
     return (
         <ViewContainer>
+            <MysteriumVPN2Toast />
             <ViewNavBar>
                 <NavContainer>
                     <SwitchConnectView />

src/main/index.tsx

@@ -20,7 +20,6 @@ import { isDevelopment, isProduction } from "../utils/env"
 import { MainIpcListenChannels, WebIpcListenChannels } from "../shared/ipc"
 import { handleProcessExit } from "../utils/handleProcessExit"
 
-import { initialize as initializePushNotifications } from "./push/push"
 import { createTray, refreshTrayIcon } from "./tray"
 import { supervisor } from "./node/supervisor"
 import { createMenu } from "./menu"
@@ -79,7 +78,7 @@ const createMainWindow = async (): Promise<BrowserWindow> => {
         fullscreen: false,
         fullscreenable: false,
         maximizable: false,
-        backgroundColor: "#882f61",
+        backgroundColor: "#020202",
         webPreferences: {
             webSecurity: false, // Make requests to local tequilapi despite CORS policy
             contextIsolation: false,
@@ -121,9 +120,6 @@ const createMainWindow = async (): Promise<BrowserWindow> => {
             window.focus()
         })
     })
-    window.webContents.on("did-finish-load", () => {
-        initializePushNotifications()
-    })
 
     return window
 }