+
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 0000000000..0da9232f4a
--- /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 (
+
+
+
+ {getStatusText(state.state)}
+
+
+
+ {state.loading && state.progressMessages.length > 0 && (
+
+ {state.progressMessages[state.progressMessages.length - 1]}
+
+ )}
+ {state.state === 'Connected' &&
}
+ {state.error && (
+
{state.error}
+ )}
+
+
+ );
+}
+
+export default ConnectionStatus;
diff --git a/nym-vpn/ui/src/ui/ConnectionTimer.tsx b/nym-vpn/ui/src/pages/home/ConnectionTimer.tsx
similarity index 95%
rename from nym-vpn/ui/src/ui/ConnectionTimer.tsx
rename to nym-vpn/ui/src/pages/home/ConnectionTimer.tsx
index 68b139e188..bc06d93102 100644
--- a/nym-vpn/ui/src/ui/ConnectionTimer.tsx
+++ b/nym-vpn/ui/src/pages/home/ConnectionTimer.tsx
@@ -1,7 +1,7 @@
import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import dayjs from 'dayjs';
-import { useMainState } from '../contexts';
+import { useMainState } from '../../contexts';
function ConnectionTimer() {
const { sessionStartDate } = useMainState();
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 0000000000..cc53da9df3
--- /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 (
+
+ 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 0000000000..432233ff60
--- /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
('set_vpn_mode', { mode: value });
+ dispatch({ type: 'set-vpn-mode', mode: value });
+ } catch (e) {
+ console.log(e);
+ } finally {
+ setLoading(false);
+ }
+ }
+ };
+
+ const vpnModes: VpnModeOption[] = [
+ {
+ name: 'Mixnet',
+ title: t('mixnet-mode.title'),
+ desc: t('mixnet-mode.desc'),
+ },
+ {
+ name: 'TwoHop',
+ title: t('twohop-mode.title'),
+ desc: t('twohop-mode.desc'),
+ },
+ ];
+
+ const handleSelect = (value: VpnMode) => {
+ setSelected(value);
+ handleNetworkModeChange(value);
+ };
+
+ return (
+
+
+
+ {t('select-network-label')}
+
+
+ {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}
+
+
+
+
+ ))}
+
+
+
{children}
);
diff --git a/nym-vpn/ui/src/ui/TopBar.tsx b/nym-vpn/ui/src/ui/TopBar.tsx
index 3785dc4bc9..db31a5fcb3 100644
--- a/nym-vpn/ui/src/ui/TopBar.tsx
+++ b/nym-vpn/ui/src/ui/TopBar.tsx
@@ -67,7 +67,7 @@ export default function TopBar() {
}, [location.pathname, navBarData]);
return (
-