Merge pull request #4034 from nymtech/nymvpn-ui_NC-87

feat(vpn): bootstrap ui app

.github/workflows/ci-nym-vpn-ui-js.yml

@@ -0,0 +1,44 @@
+name: ci-nym-vpn-ui-js
+
+on:
+  push:
+    paths:
+      - 'nym-vpn/ui/src/**'
+      - 'nym-vpn/ui/package.json'
+      - 'nym-vpn/ui/index.html'
+  pull_request:
+    paths:
+      - 'nym-vpn/ui/src/**'
+      - 'nym-vpn/ui/package.json'
+      - 'nym-vpn/ui/index.html'
+
+jobs:
+  check:
+    runs-on: [ self-hosted, custom-linux ]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Install Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - name: Install Yarn
+        run: npm install -g yarn
+      - name: Install dependencies
+        working-directory: nym-vpn/ui
+        run: yarn
+      - name: Type-check
+        working-directory: nym-vpn/ui
+        run: yarn typecheck
+      - name: Check lint
+        working-directory: nym-vpn/ui
+        run: yarn lint
+      - name: Check formatting
+        working-directory: nym-vpn/ui
+        run: yarn fmt:check
+#      - name: Run tests
+#        working-directory: nym-vpn/ui
+#        run: yarn test
+      - name: Check build
+        working-directory: nym-vpn/ui
+        run: yarn build

.github/workflows/ci-nym-vpn-ui-rust.yml

@@ -0,0 +1,64 @@
+name: ci-nym-vpn-ui-rust
+
+on:
+  push:
+    paths:
+      - 'nym-vpn/ui/src-tauri/**'
+  pull_request:
+    paths:
+      - 'nym-vpn/ui/src-tauri/**'
+
+jobs:
+  build:
+    runs-on: [self-hosted, custom-linux]
+    env:
+      CARGO_TERM_COLOR: always
+      CARGOTOML_PATH: ./nym-vpn/ui/src-tauri/Cargo.toml
+    steps:
+      - name: Install Dependencies (Linux)
+        run: sudo apt-get update && sudo apt-get -y install libwebkit2gtk-4.0-dev build-essential curl wget libssl-dev libgtk-3-dev squashfs-tools libayatana-appindicator3-dev
+        continue-on-error: true
+
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install rust toolchain
+        uses: actions-rs/toolchain@v1
+        with:
+          profile: minimal
+          toolchain: stable
+          override: true
+          components: rustfmt, clippy
+
+      - name: Prepare build
+        working-directory: nym-vpn/ui/
+        run: mkdir dist
+
+      - name: Check build
+        working-directory: nym-vpn/ui/src-tauri
+        run: cargo build --release --lib --features custom-protocol
+
+#      - name: Run all tests
+#        uses: actions-rs/cargo@v1
+#        with:
+#          command: test
+#          args: --manifest-path ${{ env.CARGOTOML_PATH }} --workspace
+
+      - name: Check formatting
+        uses: actions-rs/cargo@v1
+        with:
+          command: fmt
+          args: --manifest-path ${{ env.CARGOTOML_PATH }} --all -- --check
+
+      - uses: actions-rs/clippy-check@v1
+        name: Clippy checks
+        continue-on-error: true
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          args: --manifest-path ${{ env.CARGOTOML_PATH }} --workspace --all-features
+
+      - name: Run clippy
+        uses: actions-rs/cargo@v1
+        with:
+          command: clippy
+          args: --manifest-path ${{ env.CARGOTOML_PATH }} --workspace --all-features -- -D warnings

Cargo.toml

@@ -119,7 +119,7 @@ default-members = [
     "explorer-api",
 ]
 
-exclude = ["explorer", "contracts", "nym-wallet", "nym-connect/mobile/src-tauri", "nym-connect/desktop", "cpu-cycles"]
+exclude = ["explorer", "contracts", "nym-wallet", "nym-connect/mobile/src-tauri", "nym-connect/desktop", "nym-vpn/ui/src-tauri", "cpu-cycles"]
 
 [workspace.package]
 authors = ["Nym Technologies SA"]

nym-vpn/ui/.eslintignore

@@ -0,0 +1,2 @@
+*.config.js
+*.config.ts

nym-vpn/ui/.eslintrc.cjs

@@ -0,0 +1,21 @@
+module.exports = {
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+    'prettier',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    project: './tsconfig.json',
+  },
+  plugins: ['@typescript-eslint'],
+  root: true,
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+};

nym-vpn/ui/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

nym-vpn/ui/.prettierignore

@@ -0,0 +1,2 @@
+src-tauri/target
+src-tauri/src

nym-vpn/ui/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["tauri-apps.tauri-vscode", "rust-lang.rust-analyzer"]
+}

nym-vpn/ui/README.md

@@ -0,0 +1,62 @@
+# NymVPN UI app for desktop clients
+
+This is the application UI layer for the next NymVPN clients.
+
+## Install
+
+#### Prerequisites
+
+- Rust
+- Nodejs, latest LTS version recommended
+- yarn 1.x
+
+Some system libraries are required depending on the host platform.
+Follow the instructions for your specific OS [here](https://tauri.app/v1/guides/getting-started/prerequisites)
+
+To install run
+
+```
+yarn
+```
+
+## Dev
+
+```
+yarn dev:app
+```
+
+## Dev in the browser
+
+For convenience and better development experience, we can run the
+app directly in the browser
+
+```
+yarn dev:browser
+```
+
+Then press `o` to open the app in the browser.
+
+#### Tauri commands mock
+
+Browser mode requires all tauri [commands](https://tauri.app/v1/guides/features/command) (IPC calls) to be mocked.
+When creating new tauri command, be sure to add the corresponding
+mock definition into `nym-vpn/ui/src/dev/tauri-cmd-mocks/` and
+update `nym-vpn/ui/src/dev/setup.ts` accordingly.
+
+## Build
+
+To build as a **shared library**
+
+```
+yarn build && cd src-tauri && cargo build --release --lib --features custom-protocol
+
+#alias
+yarn build:app
+```
+
+You can build for a different platform using [Cross](https://github.com/cross-rs/cross).
+For example, to build for Windows on Linux:
+
+```
+cross build --target x86_64-pc-windows-gnu --release --lib --features custom-protocol
+```

nym-vpn/ui/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Tauri + React + TS</title>
+  </head>
+
+  <body>
+    <div id="root" class="bg-gray-900"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

nym-vpn/ui/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "nym-vpn-ui",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "dev:app": "WEBKIT_DISABLE_COMPOSITING_MODE=1 tauri dev",
+    "dev:browser": "vite --mode dev-browser",
+    "build": "tsc && vite build",
+    "build:app": "yarn build && cd src-tauri && cargo build --release --lib --features custom-protocol",
+    "preview": "vite preview",
+    "lint": "eslint --ext .ts,.tsx src/",
+    "lint:fix": "eslint --ext .js,.ts --fix src/",
+    "fmt": "prettier --write --ignore-unknown \"**/*\"",
+    "fmt:check": "prettier --check --ignore-unknown \"**/*\"",
+    "typecheck": "tsc --noEmit",
+    "tauri": "tauri"
+  },
+  "dependencies": {
+    "@mui/base": "^5.0.0-beta.20",
+    "@mui/material": "^5.14.14",
+    "@tauri-apps/api": "^1.5.0",
+    "clsx": "^2.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@tauri-apps/cli": "^1.5.0",
+    "@types/react": "^18.2.31",
+    "@types/react-dom": "^18.2.14",
+    "@typescript-eslint/eslint-plugin": "^6.8.0",
+    "@typescript-eslint/parser": "^6.8.0",
+    "@vitejs/plugin-react-swc": "^3.3.2",
+    "autoprefixer": "^10.4.16",
+    "eslint": "^8.52.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "postcss": "^8.4.31",
+    "postcss-import": "^15.1.0",
+    "prettier": "^3.0.3",
+    "tailwindcss": "^3.3.3",
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5"
+  }
+}

nym-vpn/ui/postcss.config.js

@@ -0,0 +1,8 @@
+export default {
+  plugins: {
+    'postcss-import': {},
+    'tailwindcss/nesting': {},
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

nym-vpn/ui/prettier.config.js

@@ -0,0 +1,9 @@
+/** @type {import("prettier").Config} */
+
+const config = {
+  tabWidth: 2,
+  semi: true,
+  singleQuote: true,
+};
+
+export default config;

nym-vpn/ui/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

nym-vpn/ui/src-tauri/.gitignore

@@ -0,0 +1,4 @@
+# Generated by Cargo
+# will have compiled files and executables
+/target/
+

nym-vpn/ui/src-tauri/Cargo.toml

@@ -0,0 +1,24 @@
+[package]
+name = "nymvpn-ui"
+version = "0.0.0"
+description = "Application UI for Nym VPN desktop clients"
+authors = ["you"]
+license = ""
+repository = ""
+edition = "2021"
+
+[lib]
+crate-type = ["cdylib"]
+
+[build-dependencies]
+tauri-build = { version = "1.5", features = [] }
+
+[dependencies]
+tauri = { version = "1.5", features = ["shell-open"] }
+serde = { version = "1.0", features = ["derive"] }
+serde_json = "1.0"
+
+[features]
+# this feature is used for production builds or when `devPath` points to the filesystem
+# DO NOT REMOVE!!
+custom-protocol = ["tauri/custom-protocol"]

nym-vpn/ui/src-tauri/Cross.toml

@@ -0,0 +1,2 @@
+[build.env]
+volumes = ["VOL1_ARG=../dist"]

nym-vpn/ui/src-tauri/build.rs

@@ -0,0 +1,3 @@
+fn main() {
+    tauri_build::build()
+}

nym-vpn/ui/src-tauri/src/lib.rs

@@ -0,0 +1,16 @@
+// Prevents additional console window on Windows in release, DO NOT REMOVE!!
+#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
+
+// Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
+#[tauri::command]
+fn greet(name: &str) -> String {
+    format!("Hello, {}! You've been greeted from Rust!", name)
+}
+
+#[no_mangle]
+pub extern "C" fn run_tauri() {
+    tauri::Builder::default()
+        .invoke_handler(tauri::generate_handler![greet])
+        .run(tauri::generate_context!())
+        .expect("error while running tauri application");
+}

nym-vpn/ui/src-tauri/src/main.rs

@@ -0,0 +1,15 @@
+// Prevents additional console window on Windows in release, DO NOT REMOVE!!
+#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
+
+// Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
+#[tauri::command]
+fn greet(name: &str) -> String {
+    format!("Hello, {}! You've been greeted from Rust!", name)
+}
+
+fn main() {
+    tauri::Builder::default()
+        .invoke_handler(tauri::generate_handler![greet])
+        .run(tauri::generate_context!())
+        .expect("error while running tauri application");
+}

nym-vpn/ui/src-tauri/tauri.conf.json

@@ -0,0 +1,46 @@
+{
+  "build": {
+    "beforeDevCommand": "yarn dev",
+    "beforeBuildCommand": "yarn build",
+    "devPath": "http://localhost:1420",
+    "distDir": "../dist",
+    "withGlobalTauri": false
+  },
+  "package": {
+    "productName": "nymvpn-ui",
+    "version": "0.0.0"
+  },
+  "tauri": {
+    "allowlist": {
+      "all": false,
+      "shell": {
+        "all": false,
+        "open": true
+      }
+    },
+    "bundle": {
+      "active": true,
+      "targets": "all",
+      "identifier": "com.tauri.dev",
+      "icon": [
+        "icons/32x32.png",
+        "icons/128x128.png",
+        "icons/128x128@2x.png",
+        "icons/icon.icns",
+        "icons/icon.ico"
+      ]
+    },
+    "security": {
+      "csp": null
+    },
+    "windows": [
+      {
+        "fullscreen": false,
+        "resizable": true,
+        "title": "NymVPN",
+        "width": 800,
+        "height": 600
+      }
+    ]
+  }
+}

nym-vpn/ui/src/App.tsx

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import { invoke } from '@tauri-apps/api/tauri';
+import { Button as BaseButton, ButtonProps } from '@mui/base/Button';
+import clsx from 'clsx';
+
+// eslint-disable-next-line react/display-name
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (props, ref) => {
+    const { className, ...other } = props;
+    return (
+      <BaseButton
+        ref={ref}
+        className={clsx(
+          'cursor-pointer disabled:cursor-not-allowed text-sm font-sans bg-violet-500 hover:bg-violet-600 active:bg-violet-700 text-white rounded-lg font-semibold px-4 py-2 border-none disabled:opacity-50',
+          className,
+        )}
+        {...other}
+      />
+    );
+  },
+);
+
+function App() {
+  const [greetMsg, setGreetMsg] = useState('');
+  const [name, setName] = useState('');
+
+  async function greet() {
+    // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
+    setGreetMsg(await invoke('greet', { name }));
+  }
+
+  return (
+    <div>
+      <h1>Welcome to Tauri!</h1>
+
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          greet();
+        }}
+      >
+        <input
+          id="greet-input"
+          onChange={(e) => setName(e.currentTarget.value)}
+          placeholder="Enter a name..."
+        />
+        <Button type="submit">Greet</Button>
+      </form>
+
+      <p>{greetMsg}</p>
+    </div>
+  );
+}
+
+export default App;

nym-vpn/ui/src/dev/setup.ts

@@ -0,0 +1,11 @@
+import { mockIPC, mockWindows } from '@tauri-apps/api/mocks';
+import { greet } from './tauri-cmd-mocks';
+
+mockWindows('main');
+
+mockIPC(async (cmd, args) => {
+  console.log(`IPC call mocked "${cmd}"`);
+  if (cmd === 'greet') {
+    return greet(args.name as string);
+  }
+});

nym-vpn/ui/src/dev/tauri-cmd-mocks/greet.ts

@@ -0,0 +1,3 @@
+export default function greet(name: string): string {
+  return `Hello, ${name}!`;
+}

nym-vpn/ui/src/dev/tauri-cmd-mocks/index.ts

@@ -0,0 +1 @@
+export { default as greet } from './greet';

nym-vpn/ui/src/main.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './styles.css';
+
+if (import.meta.env.MODE === 'dev-browser') {
+  console.log('Running in dev-browser mode. Mocking tauri window and IPCs');
+  import('./dev/setup');
+}
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

nym-vpn/ui/src/styles.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

nym-vpn/ui/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

nym-vpn/ui/tailwind.config.js

@@ -0,0 +1,10 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+  // Toggling dark mode manually
+  darkMode: 'class',
+};

nym-vpn/ui/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

nym-vpn/ui/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

nym-vpn/ui/vite.config.ts

@@ -0,0 +1,20 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react-swc';
+
+// https://vitejs.dev/config/
+export default defineConfig(async () => ({
+  plugins: [react()],
+
+  // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
+  //
+  // 1. prevent vite from obscuring rust errors
+  clearScreen: false,
+  // 2. tauri expects a fixed port, fail if that port is not available
+  server: {
+    port: 1420,
+    strictPort: true,
+  },
+  // 3. to make use of `TAURI_DEBUG` and other env variables
+  // https://tauri.app/v1/api/config#buildconfig.beforedevcommand
+  envPrefix: ['VITE_', 'TAURI_'],
+}));