Nym Documentation by Nym Technologies is licensed under CC BY-NC-SA 4.0
Nym Documentation by Nym Technologies is licensed under CC BY-NC-SA 4.0
Nym Documentation by Nym Technologies is licensed under CC BY-NC-SA 4.0
Nym Documentation by Nym Technologies is licensed under CC BY-NC-SA 4.0
+
+ );
+}
+
+export default NavLayout;
diff --git a/nym-vpn/ui/src/pages/NodeLocation.tsx b/nym-vpn/ui/src/pages/NodeLocation.tsx
new file mode 100644
index 00000000000..2c55ddd30b1
--- /dev/null
+++ b/nym-vpn/ui/src/pages/NodeLocation.tsx
@@ -0,0 +1,17 @@
+import { useTranslation } from 'react-i18next';
+
+type Props = {
+ node: 'entry' | 'exit';
+};
+
+function NodeLocation({ node }: Props) {
+ const { t } = useTranslation();
+
+ return (
+
+ {node === 'entry' ? t('fist-hop-selection') : t('last-hop-selection')}
+
+ );
+}
+
+export default NodeLocation;
diff --git a/nym-vpn/ui/src/pages/home.tsx b/nym-vpn/ui/src/pages/home.tsx
deleted file mode 100644
index 50d43e8f2d7..00000000000
--- a/nym-vpn/ui/src/pages/home.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import { invoke } from '@tauri-apps/api';
-import { useMainDispatch, useMainState } from '../contexts';
-import { StateDispatch } from '../types';
-
-function Home() {
- const state = useMainState();
- const dispatch = useMainDispatch() as StateDispatch;
-
- const { t } = useTranslation();
-
- const handleClick = async () => {
- if (state.state === 'Connected') {
- dispatch({ type: 'disconnect' });
- invoke('disconnect').then((result) => {
- console.log(result);
- });
- } else if (state.state === 'Disconnected') {
- dispatch({ type: 'connect' });
- invoke('connect').then((result) => {
- console.log(result);
- });
- }
- };
-
- return (
-
-
- );
-}
-
-export default Home;
diff --git a/nym-vpn/ui/src/pages/home/ConnectionStatus.tsx b/nym-vpn/ui/src/pages/home/ConnectionStatus.tsx
new file mode 100644
index 00000000000..0da9232f4a9
--- /dev/null
+++ b/nym-vpn/ui/src/pages/home/ConnectionStatus.tsx
@@ -0,0 +1,84 @@
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { ConnectionState } from '../../types';
+import { useMainState } from '../../contexts';
+import ConnectionTimer from './ConnectionTimer';
+
+function ConnectionStatus() {
+ const state = useMainState();
+
+ const { t } = useTranslation('home');
+ const statusBadgeDynStyles = {
+ Connected: [
+ 'bg-blanc-nacre-icicle',
+ 'text-vert-menthe',
+ 'dark:bg-baltic-sea-quartzite',
+ ],
+ Disconnected: [
+ 'bg-blanc-nacre-platinum',
+ 'text-coal-mine-light',
+ 'dark:bg-baltic-sea-oil',
+ 'dark:text-coal-mine-dark',
+ ],
+ Connecting: [
+ 'bg-blanc-nacre-platinum',
+ 'text-baltic-sea',
+ 'dark:bg-baltic-sea-oil',
+ 'dark:text-white',
+ ],
+ Disconnecting: [
+ 'bg-blanc-nacre-platinum',
+ 'text-baltic-sea',
+ 'dark:bg-baltic-sea-oil',
+ 'dark:text-white',
+ ],
+ Unknown: [
+ 'bg-blanc-nacre-platinum',
+ 'text-coal-mine-light',
+ 'dark:bg-baltic-sea-oil',
+ 'dark:text-coal-mine-dark',
+ ],
+ };
+
+ const getStatusText = (state: ConnectionState) => {
+ switch (state) {
+ case 'Connected':
+ return t('status.connected');
+ case 'Disconnected':
+ return t('status.disconnected');
+ case 'Connecting':
+ return t('status.connecting');
+ case 'Disconnecting':
+ return t('status.disconnecting');
+ case 'Unknown':
+ return t('status.unknown');
+ }
+ };
+ return (
+ NymVPN
- connection state: {state.state} - {state.loading ? ( - 'loading…' - ) : ( - - )} -
+
+ );
+}
+
+export default ConnectionStatus;
diff --git a/nym-vpn/ui/src/pages/home/ConnectionTimer.tsx b/nym-vpn/ui/src/pages/home/ConnectionTimer.tsx
new file mode 100644
index 00000000000..bc06d93102b
--- /dev/null
+++ b/nym-vpn/ui/src/pages/home/ConnectionTimer.tsx
@@ -0,0 +1,41 @@
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import dayjs from 'dayjs';
+import { useMainState } from '../../contexts';
+
+function ConnectionTimer() {
+ const { sessionStartDate } = useMainState();
+ const [connectionTime, setConnectionTime] = useState('00:00:00');
+ const { t } = useTranslation('home');
+
+ useEffect(() => {
+ if (!sessionStartDate) {
+ return;
+ }
+
+ const elapsed = dayjs.duration(dayjs().diff(sessionStartDate));
+ setConnectionTime(elapsed.format('HH:mm:ss'));
+
+ const interval = setInterval(() => {
+ const elapsed = dayjs.duration(dayjs().diff(sessionStartDate));
+ setConnectionTime(elapsed.format('HH:mm:ss'));
+ }, 500);
+
+ return () => {
+ clearInterval(interval);
+ };
+ }, [sessionStartDate]);
+
+ return (
+
+
+
+ {getStatusText(state.state)}
+
+
+ {state.loading && state.progressMessages.length > 0 && (
+
+ + {state.progressMessages[state.progressMessages.length - 1]} +
+ )} + {state.state === 'Connected' &&{state.error}
+ )} +
+
+ );
+}
+
+export default ConnectionTimer;
diff --git a/nym-vpn/ui/src/pages/home/Home.tsx b/nym-vpn/ui/src/pages/home/Home.tsx
new file mode 100644
index 00000000000..cc53da9df3b
--- /dev/null
+++ b/nym-vpn/ui/src/pages/home/Home.tsx
@@ -0,0 +1,79 @@
+import { useTranslation } from 'react-i18next';
+import { invoke } from '@tauri-apps/api';
+import clsx from 'clsx';
+import { Button } from '@mui/base';
+import { useMainDispatch, useMainState } from '../../contexts';
+import { ConnectionState, StateDispatch } from '../../types';
+import NetworkModeSelect from './NetworkModeSelect';
+import ConnectionStatus from './ConnectionStatus';
+
+function Home() {
+ const state = useMainState();
+ const dispatch = useMainDispatch() as StateDispatch;
+
+ const { t } = useTranslation('home');
+
+ const handleClick = async () => {
+ if (state.state === 'Connected') {
+ dispatch({ type: 'disconnect' });
+ invoke('disconnect').then((result) => {
+ console.log(result);
+ });
+ } else if (state.state === 'Disconnected') {
+ dispatch({ type: 'connect' });
+ invoke('connect').then((result) => {
+ console.log(result);
+ });
+ }
+ };
+
+ const getButtonText = (state: ConnectionState) => {
+ switch (state) {
+ case 'Connected':
+ return t('disconnect');
+ case 'Disconnected':
+ return t('connect');
+ case 'Connecting':
+ return (
+ + {t('connection-time')} +
++ {connectionTime} +
+
+ autorenew
+
+ );
+ case 'Disconnecting':
+ return (
+
+ autorenew
+
+ );
+ case 'Unknown':
+ return t('status.unknown');
+ }
+ };
+
+ return (
+
+
+ );
+}
+
+export default Home;
diff --git a/nym-vpn/ui/src/pages/home/NetworkModeSelect.tsx b/nym-vpn/ui/src/pages/home/NetworkModeSelect.tsx
new file mode 100644
index 00000000000..432233ff608
--- /dev/null
+++ b/nym-vpn/ui/src/pages/home/NetworkModeSelect.tsx
@@ -0,0 +1,116 @@
+import { useState } from 'react';
+import { RadioGroup } from '@headlessui/react';
+import { invoke } from '@tauri-apps/api';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { useMainDispatch, useMainState } from '../../contexts';
+import { StateDispatch, VpnMode } from '../../types';
+
+type VpnModeOption = { name: VpnMode; title: string; desc: string };
+
+function NetworkModeSelect() {
+ const state = useMainState();
+ const dispatch = useMainDispatch() as StateDispatch;
+ const [selected, setSelected] = useState(state.vpnMode);
+ const [loading, setLoading] = useState(false);
+
+ const { t } = useTranslation('home');
+
+ const handleNetworkModeChange = async (value: VpnMode) => {
+ if (state.state === 'Disconnected' && value !== state.vpnMode) {
+ setLoading(true);
+ try {
+ await invoke
+
+
+
+
+
+
+
+ {t('select-network-label')}
+
+
+
+ );
+}
+
+export default NetworkModeSelect;
diff --git a/nym-vpn/ui/src/pages/home/index.ts b/nym-vpn/ui/src/pages/home/index.ts
new file mode 100644
index 00000000000..c2d92a57466
--- /dev/null
+++ b/nym-vpn/ui/src/pages/home/index.ts
@@ -0,0 +1 @@
+export { default as Home } from './Home';
diff --git a/nym-vpn/ui/src/pages/index.ts b/nym-vpn/ui/src/pages/index.ts
index a49d340c0c3..45aece47e1c 100644
--- a/nym-vpn/ui/src/pages/index.ts
+++ b/nym-vpn/ui/src/pages/index.ts
@@ -1,4 +1,5 @@
-export { default as PageLayout } from './pageLayout';
-export { default as Home } from './home';
-export { default as Settings } from './settings';
-export { default as Error } from './error';
+export * from './home';
+export * from './settings';
+export { default as NavLayout } from './NavLayout';
+export { default as NodeLocation } from './NodeLocation';
+export { default as Error } from './Error';
diff --git a/nym-vpn/ui/src/pages/pageLayout.tsx b/nym-vpn/ui/src/pages/pageLayout.tsx
deleted file mode 100644
index 25121bb9ed6..00000000000
--- a/nym-vpn/ui/src/pages/pageLayout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Outlet } from 'react-router-dom';
-
-function PageLayout() {
- return (
-
+ {vpnModes.map((mode) => (
+
+ clsx([
+ 'bg-white dark:bg-baltic-sea-jaguar relative flex rounded-lg px-5 py-3 shadow-md focus:outline-none',
+ (state.state !== 'Disconnected' || loading) &&
+ 'cursor-not-allowed',
+ checked &&
+ 'ring-0 ring-melon ring-offset-2 ring-offset-melon',
+ state.state === 'Disconnected' && 'cursor-pointer',
+ ])
+ }
+ disabled={state.state !== 'Disconnected' || loading}
+ >
+ {({ checked }) => {
+ return (
+
+ ))}
+
+
+ {checked ? (
+
+ radio_button_checked
+
+ ) : (
+
+ radio_button_unchecked
+
+ )}
+
+ );
+ }}
+
+
+
+
+ {mode.title}
+
+
+ {mode.desc}
+
+
+
-
- );
-}
-
-export default PageLayout;
diff --git a/nym-vpn/ui/src/pages/settings.tsx b/nym-vpn/ui/src/pages/settings.tsx
deleted file mode 100644
index 14f65912dbc..00000000000
--- a/nym-vpn/ui/src/pages/settings.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-function Settings() {
- return Settings
;
-}
-
-export default Settings;
diff --git a/nym-vpn/ui/src/pages/settings/Settings.tsx b/nym-vpn/ui/src/pages/settings/Settings.tsx
new file mode 100644
index 00000000000..220105a8577
--- /dev/null
+++ b/nym-vpn/ui/src/pages/settings/Settings.tsx
@@ -0,0 +1,58 @@
+import { useEffect, useState } from 'react';
+import clsx from 'clsx';
+import { invoke } from '@tauri-apps/api';
+import { Switch } from '@headlessui/react';
+import { useMainDispatch, useMainState } from '../../contexts';
+import { StateDispatch } from '../../types';
+
+function Settings() {
+ const state = useMainState();
+ const dispatch = useMainDispatch() as StateDispatch;
+
+ const [enabled, setEnabled] = useState(state.uiTheme === 'Dark');
+
+ useEffect(() => {
+ setEnabled(state.uiTheme === 'Dark');
+ }, [state.uiTheme]);
+
+ const handleThemeChange = async (darkMode: boolean) => {
+ if (darkMode && state.uiTheme === 'Light') {
+ dispatch({ type: 'set-ui-theme', theme: 'Dark' });
+ } else if (!darkMode && state.uiTheme === 'Dark') {
+ dispatch({ type: 'set-ui-theme', theme: 'Light' });
+ }
+ invoke
+
+ );
+}
+
+export default Settings;
diff --git a/nym-vpn/ui/src/pages/settings/index.ts b/nym-vpn/ui/src/pages/settings/index.ts
new file mode 100644
index 00000000000..1f16002f16c
--- /dev/null
+++ b/nym-vpn/ui/src/pages/settings/index.ts
@@ -0,0 +1 @@
+export { default as Settings } from './Settings';
diff --git a/nym-vpn/ui/src/router.tsx b/nym-vpn/ui/src/router.tsx
new file mode 100644
index 00000000000..a7b8dc5d39b
--- /dev/null
+++ b/nym-vpn/ui/src/router.tsx
@@ -0,0 +1,35 @@
+import { createBrowserRouter } from 'react-router-dom';
+import { Error, Home, NavLayout, NodeLocation, Settings } from './pages';
+import { routes } from './constants';
+
+const router = createBrowserRouter([
+ {
+ path: routes.root,
+ element:
+
+ Dark mode
+
+
+
+ + Dark Mode +
+
+ {children}
+
+ );
+}
diff --git a/nym-vpn/ui/src/ui/TopBar.tsx b/nym-vpn/ui/src/ui/TopBar.tsx
new file mode 100644
index 00000000000..db31a5fcb30
--- /dev/null
+++ b/nym-vpn/ui/src/ui/TopBar.tsx
@@ -0,0 +1,95 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { AppName, routes } from '../constants';
+import { Routes } from '../types';
+
+type NavLocation = {
+ title: string;
+ leftIcon?: React.ReactNode;
+ handleLeftNav?: () => void;
+ rightIcon?: React.ReactNode;
+ handleRightNav?: () => void;
+};
+
+type NavBarData = {
+ [key in Routes]: NavLocation;
+};
+
+export default function TopBar() {
+ const location = useLocation();
+ const navigate = useNavigate();
+ const { t } = useTranslation();
+
+ const [currentNavLocation, setCurrentNavLocation] = useState