feat(tauri): add dev menu (#1871)

doums · web-flow · commit 59cd3a4c9d7e · 2025-01-09T11:47:17.000+01:00
* add a dev menu

* update workflows
diff --git a/.github/workflows/build-nym-vpn-app-linux.yml b/.github/workflows/build-nym-vpn-app-linux.yml
@@ -109,7 +109,7 @@ jobs:
           TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
           APP_SENTRY_DSN: ${{ secrets.DESKTOP_JS_SENTRY_DSN }}
           # RUSTFLAGS: "-L ${{ env.WG_GO_LIB_PATH }}"
-          NETWORK_ENV_SELECT: ${{ inputs.dev_mode == true }}
+          DEV_MODE: ${{ inputs.dev_mode == true }}
         run: |
           if [ "${{ env.CARGO_TARGET }}" = "release" ]; then
             npm run tauri build
diff --git a/.github/workflows/build-nym-vpn-app-windows-ev-sign.yml b/.github/workflows/build-nym-vpn-app-windows-ev-sign.yml
@@ -239,7 +239,7 @@ jobs:
           RUSTFLAGS: "-L ${{ env.TAURI_SRC }}/x86_64-pc-windows-msvc -L ${{ env.TAURI_SRC }} -Clink-args=/LIBPATH:${{ env.TAURI_SRC }}/x64-${{ env.CPP_BUILD_MODES }}"
           WINDOWS_CERTIFICATE: ${{ secrets.WINDOWS_SIGNING_PFX_BASE64 }}
           WINDOWS_CERTIFICATE_PASSWORD: ${{ secrets.WINDOWS_SIGNING_PFX_PASSWORD }}
-          NETWORK_ENV_SELECT: ${{ inputs.dev_mode == true }}
+          DEV_MODE: ${{ inputs.dev_mode == true }}
         run: |
           if [ "${{ env.CARGO_TARGET }}" = "release" ]; then
             npm run tauri build
diff --git a/.github/workflows/build-nym-vpn-app-windows.yml b/.github/workflows/build-nym-vpn-app-windows.yml
@@ -239,7 +239,7 @@ jobs:
           RUSTFLAGS: "-L ${{ env.TAURI_SRC }}/x86_64-pc-windows-msvc -L ${{ env.TAURI_SRC }} -Clink-args=/LIBPATH:${{ env.TAURI_SRC }}/x64-${{ env.CPP_BUILD_MODES }}"
           WINDOWS_CERTIFICATE: ${{ secrets.WINDOWS_SIGNING_PFX_BASE64 }}
           WINDOWS_CERTIFICATE_PASSWORD: ${{ secrets.WINDOWS_SIGNING_PFX_PASSWORD }}
-          NETWORK_ENV_SELECT: ${{ inputs.dev_mode == true }}
+          DEV_MODE: ${{ inputs.dev_mode == true }}
         run: |
           if [ "${{ env.CARGO_TARGET }}" = "release" ]; then
             npm run tauri build
diff --git a/.github/workflows/publish-nym-vpn-app.yml b/.github/workflows/publish-nym-vpn-app.yml
@@ -14,7 +14,7 @@ on:
         type: boolean
         default: false
       dev_mode:
-        description: "dev build (enable env selector)"
+        description: "Enable dev mode (in-app dev menu)"
         required: true
         type: boolean
         default: false
diff --git a/nym-vpn-app/src-tauri/src/cli.rs b/nym-vpn-app/src-tauri/src/cli.rs
@@ -73,9 +73,9 @@ pub struct Cli {
     #[arg(short = 's', long)]
     pub nosplash: bool,
 
-    /// Enable zknyms credentials mode
+    // Run in 'dev' mode
     #[arg(long, hide = true)]
-    pub credentials_mode: bool,
+    pub dev_mode: bool,
 
     #[command(subcommand)]
     pub command: Option<Commands>,
diff --git a/nym-vpn-app/src-tauri/src/commands/connection.rs b/nym-vpn-app/src-tauri/src/commands/connection.rs
@@ -76,6 +76,7 @@ pub async fn connect(
         .dns_server
         .clone()
         .map(|ip| nym_vpn_proto::Dns { ip });
+    let credentials_mode = app_state.credentials_mode;
     // release the lock
     drop(app_state);
 
@@ -146,6 +147,7 @@ pub async fn connect(
             entry_node,
             exit_node,
             two_hop_mod,
+            credentials_mode,
             use_netstack_wireguard,
             dns,
         )
diff --git a/nym-vpn-app/src-tauri/src/commands/daemon.rs b/nym-vpn-app/src-tauri/src/commands/daemon.rs
@@ -1,4 +1,4 @@
-use crate::env::NETWORK_ENV_SELECT;
+use crate::env::DEV_MODE;
 use crate::error::BackendError;
 use crate::grpc::client::{FeatureFlags, GrpcClient, SystemMessage, VpndStatus};
 use crate::states::SharedAppState;
@@ -41,8 +41,8 @@ pub async fn set_network(
     grpc_client: State<'_, GrpcClient>,
     network: NetworkEnv,
 ) -> Result<(), BackendError> {
-    if !*NETWORK_ENV_SELECT {
-        warn!("network env selector is disabled");
+    if !*DEV_MODE {
+        warn!("not in dev mode");
         return Err(BackendError::internal("nope", None));
     }
     grpc_client
diff --git a/nym-vpn-app/src-tauri/src/commands/dev.rs b/nym-vpn-app/src-tauri/src/commands/dev.rs
@@ -0,0 +1,27 @@
+use crate::env::DEV_MODE;
+use crate::error::BackendError;
+use crate::states::SharedAppState;
+use tauri::State;
+use tracing::{instrument, warn};
+
+#[instrument(skip(state))]
+#[tauri::command]
+pub async fn get_credentials_mode(state: State<'_, SharedAppState>) -> Result<bool, BackendError> {
+    let state = state.lock().await;
+    Ok(state.credentials_mode)
+}
+
+#[instrument(skip(state))]
+#[tauri::command]
+pub async fn set_credentials_mode(
+    state: State<'_, SharedAppState>,
+    enabled: bool,
+) -> Result<(), BackendError> {
+    if !*DEV_MODE {
+        warn!("not in dev mode");
+        return Err(BackendError::internal("nope", None));
+    }
+    let mut state = state.lock().await;
+    state.credentials_mode = enabled;
+    Ok(())
+}
diff --git a/nym-vpn-app/src-tauri/src/commands/env.rs b/nym-vpn-app/src-tauri/src/commands/env.rs
@@ -1,4 +1,4 @@
-use crate::env::NETWORK_ENV_SELECT;
+use crate::env::DEV_MODE;
 use serde::Serialize;
 use tracing::instrument;
 use ts_rs::TS;
@@ -7,13 +7,13 @@ use ts_rs::TS;
 #[serde(rename_all = "SCREAMING_SNAKE_CASE")]
 #[ts(export)]
 pub struct Env {
-    network_env_select: bool,
+    dev_mode: bool,
 }
 
 #[instrument(skip_all)]
 #[tauri::command]
 pub async fn env() -> Env {
     Env {
-        network_env_select: *NETWORK_ENV_SELECT,
+        dev_mode: *DEV_MODE,
     }
 }
diff --git a/nym-vpn-app/src-tauri/src/commands/mod.rs b/nym-vpn-app/src-tauri/src/commands/mod.rs
@@ -4,6 +4,7 @@ pub mod connection;
 pub mod country;
 pub mod daemon;
 pub mod db;
+pub mod dev;
 pub mod env;
 pub mod fs;
 pub mod log;
diff --git a/nym-vpn-app/src-tauri/src/env.rs b/nym-vpn-app/src-tauri/src/env.rs
@@ -2,12 +2,12 @@ use once_cell::sync::Lazy;
 use std::env;
 
 /// SemVer version requirement for daemon compatibility
-//  set at compile time
+//  comptime
 pub const VPND_COMPAT_REQ: Option<&str> = option_env!("VPND_COMPAT_REQ");
 
-// set at compile time
-pub static NETWORK_ENV_SELECT: Lazy<bool> = Lazy::new(|| {
-    option_env!("NETWORK_ENV_SELECT")
+// comptime
+pub static DEV_MODE: Lazy<bool> = Lazy::new(|| {
+    option_env!("DEV_MODE")
         .map(|v| v == "1" || v.to_lowercase() == "true")
         .unwrap_or(false)
 });
diff --git a/nym-vpn-app/src-tauri/src/grpc/client.rs b/nym-vpn-app/src-tauri/src/grpc/client.rs
@@ -36,7 +36,7 @@ use crate::env::VPND_COMPAT_REQ;
 use crate::error::BackendError;
 use crate::fs::config::AppConfig;
 use crate::states::app::ConnectionState;
-use crate::{env, vpn_status};
+use crate::vpn_status;
 use crate::{events::AppHandleEventEmitter, states::SharedAppState};
 
 const VPND_SERVICE: &str = "nym.vpn.NymVpnd";
@@ -59,7 +59,6 @@ pub struct GrpcClient {
     transport: Transport,
     pkg_info: PackageInfo,
     user_agent: UserAgent,
-    credentials_mode: bool,
 }
 
 impl GrpcClient {
@@ -69,7 +68,6 @@ impl GrpcClient {
             transport: Transport::from((config, cli)),
             pkg_info: pkg.clone(),
             user_agent: GrpcClient::user_agent(pkg, None),
-            credentials_mode: cli.credentials_mode || env::is_truthy("ENABLE_CREDENTIALS_MODE"),
         };
         match &client.transport {
             Transport::Http(endpoint) => {
@@ -348,12 +346,13 @@ impl GrpcClient {
         entry_node: EntryNode,
         exit_node: ExitNode,
         two_hop_mod: bool,
+        credentials_mode: bool,
         netstack: bool,
         dns: Option<Dns>,
     ) -> Result<(), VpndError> {
         let mut vpnd = self.vpnd().await?;
 
-        if self.credentials_mode {
+        if credentials_mode {
             info!("credentials mode enabled");
         }
         let request = Request::new(ConnectRequest {
@@ -364,7 +363,7 @@ impl GrpcClient {
             netstack,
             disable_poisson_rate: false,
             disable_background_cover_traffic: false,
-            enable_credentials_mode: self.credentials_mode,
+            enable_credentials_mode: credentials_mode,
             dns,
             user_agent: Some(self.user_agent.clone()),
             min_mixnode_performance: None,
diff --git a/nym-vpn-app/src-tauri/src/main.rs b/nym-vpn-app/src-tauri/src/main.rs
@@ -19,6 +19,7 @@ use clap::Parser;
 use commands::country as cmd_country;
 use commands::daemon as cmd_daemon;
 use commands::db as cmd_db;
+use commands::dev as cmd_dev;
 use commands::env as cmd_env;
 use commands::fs as cmd_fs;
 use commands::log as cmd_log;
@@ -222,6 +223,8 @@ async fn main() -> Result<()> {
             connection::connect,
             connection::disconnect,
             connection::get_connection_start_time,
+            cmd_dev::get_credentials_mode,
+            cmd_dev::set_credentials_mode,
             cmd_db::db_set,
             cmd_db::db_get,
             cmd_db::db_flush,
diff --git a/nym-vpn-app/src-tauri/src/states/app.rs b/nym-vpn-app/src-tauri/src/states/app.rs
@@ -45,6 +45,7 @@ pub struct AppState {
     pub vpn_mode: VpnMode,
     pub connection_start_time: Option<OffsetDateTime>,
     pub dns_server: Option<String>,
+    pub credentials_mode: bool,
 }
 
 impl AppState {
@@ -61,6 +62,7 @@ impl AppState {
         AppState {
             vpn_mode,
             dns_server,
+            credentials_mode: cli.dev_mode,
             ..Default::default()
         }
     }
diff --git a/nym-vpn-app/src-tauri/tauri.conf.json b/nym-vpn-app/src-tauri/tauri.conf.json
@@ -35,7 +35,7 @@
     },
     "linux": {
       "deb": {
-        "depends": ["nym-vpnd (>= 1.1.0~beta.2)"],
+        "depends": ["nym-vpnd (>= 1.2.0~dev)"],
         "conflicts": ["nymvpn-x"],
         "desktopTemplate": "./bundle/deb/main.desktop"
       }
diff --git a/nym-vpn-app/src/dev/setup.ts b/nym-vpn-app/src/dev/setup.ts
@@ -161,7 +161,7 @@ export function mockTauriIPC() {
     if (cmd === 'env') {
       return new Promise((resolve) =>
         resolve({
-          NETWORK_ENV_SELECT: true,
+          DEV_MODE: true,
         }),
       );
     }
diff --git a/nym-vpn-app/src/main.tsx b/nym-vpn-app/src/main.tsx
@@ -76,9 +76,9 @@ async function setSplashTheme(window: WebviewWindow) {
   }
 
   const env = await invoke<Record<string, unknown>>('env');
-  if (env.NETWORK_ENV_SELECT === true) {
-    console.info('network env selector enabled');
-    S_STATE.networkEnvSelect = true;
+  if (env.DEV_MODE === true) {
+    console.info('dev mode enabled');
+    S_STATE.devMode = true;
   }
 
   // check for unrecoverable errors
diff --git a/nym-vpn-app/src/router.tsx b/nym-vpn-app/src/router.tsx
@@ -4,6 +4,7 @@ import * as Sentry from '@sentry/react';
 import {
   Appearance,
   AppearanceRouteIndex,
+  Dev,
   Display,
   Error,
   Lang,
@@ -36,6 +37,7 @@ export const routes = {
   licensesRust: '/settings/legal/licenses-rust',
   licensesJs: '/settings/legal/licenses-js',
   licenseDetails: '/settings/legal/license-details',
+  dev: '/settings/dev',
   entryNodeLocation: '/entry-node-location',
   exitNodeLocation: '/exit-node-location',
   hideout: '/hideout',
@@ -72,6 +74,11 @@ const router = createRouterFn([
             errorElement: <Error />,
             index: true,
           },
+          {
+            path: routes.dev,
+            element: <Dev />,
+            errorElement: <Error />,
+          },
           {
             path: routes.appearance,
             element: <AppearanceRouteIndex />,
diff --git a/nym-vpn-app/src/screens/settings/dev/Dev.tsx b/nym-vpn-app/src/screens/settings/dev/Dev.tsx
@@ -0,0 +1,43 @@
+import { useEffect, useState } from 'react';
+import { invoke } from '@tauri-apps/api/core';
+import { PageAnim, SettingsMenuCard, Switch } from '../../../ui';
+import { useMainState } from '../../../contexts';
+import NetworkEnvSelect from './NetworkEnvSelect';
+
+function Dev() {
+  const [credentialsMode, setCredentialsMode] = useState(false);
+
+  const { daemonStatus, networkEnv } = useMainState();
+
+  useEffect(() => {
+    const getCredentialsMode = async () => {
+      const enabled = await invoke<boolean>('get_credentials_mode');
+      console.log('credentials mode:', enabled);
+      setCredentialsMode(enabled);
+    };
+    getCredentialsMode();
+  }, []);
+
+  const credentialsModeChanged = (enabled: boolean) => {
+    invoke('set_credentials_mode', { enabled }).then(() => {
+      setCredentialsMode(enabled);
+    });
+  };
+
+  return (
+    <PageAnim className="h-full flex flex-col py-6 gap-6">
+      <SettingsMenuCard
+        title={'CREDENTIALS_MODE'}
+        onClick={() => credentialsModeChanged(!credentialsMode)}
+        trailingComponent={
+          <Switch checked={credentialsMode} onChange={credentialsModeChanged} />
+        }
+      />
+      {daemonStatus !== 'NotOk' && networkEnv && (
+        <NetworkEnvSelect current={networkEnv} />
+      )}
+    </PageAnim>
+  );
+}
+
+export default Dev;
diff --git a/nym-vpn-app/src/screens/settings/dev/NetworkEnvSelect.tsx b/nym-vpn-app/src/screens/settings/dev/NetworkEnvSelect.tsx
diff --git a/nym-vpn-app/src/screens/settings/dev/index.ts b/nym-vpn-app/src/screens/settings/dev/index.ts
diff --git a/nym-vpn-app/src/screens/settings/index.ts b/nym-vpn-app/src/screens/settings/index.ts
diff --git a/nym-vpn-app/src/screens/settings/info-data/InfoData.tsx b/nym-vpn-app/src/screens/settings/info-data/InfoData.tsx
diff --git a/nym-vpn-app/src/screens/settings/info-data/NetworkEnvSelect.tsx b/nym-vpn-app/src/screens/settings/info-data/NetworkEnvSelect.tsx
diff --git a/nym-vpn-app/src/static.ts b/nym-vpn-app/src/static.ts
diff --git a/nym-vpn-app/src/ui/TopBar.tsx b/nym-vpn-app/src/ui/TopBar.tsx
diff --git a/nym-vpn-app/vpnd_compat.toml b/nym-vpn-app/vpnd_compat.toml
