-
- );
-}
diff --git a/nym-vpn/ui/src/pages/MainLayout.tsx b/nym-vpn/ui/src/pages/MainLayout.tsx
deleted file mode 100644
index 86fe1b76bb..0000000000
--- a/nym-vpn/ui/src/pages/MainLayout.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Outlet } from 'react-router-dom';
-import clsx from 'clsx';
-import { TopBar } from '../ui';
-
-function MainLayout() {
- return (
- Oops!
-Sorry, an unexpected error has occurred.
-- {error.statusText || error.message} -
-
-
- );
-}
-
-export default MainLayout;
diff --git a/nym-vpn/ui/src/pages/home/ConnectionStatus.tsx b/nym-vpn/ui/src/pages/home/ConnectionStatus.tsx
deleted file mode 100644
index 738e26503f..0000000000
--- a/nym-vpn/ui/src/pages/home/ConnectionStatus.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-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: ['text-vert-menthe', 'bg-vert-prasin bg-opacity-10'],
- Disconnected: [
- 'bg-cement-feet bg-opacity-10',
- 'text-coal-mine-light',
- 'dark:bg-oil dark:bg-opacity-15',
- 'dark:text-coal-mine-dark',
- ],
- Connecting: [
- 'bg-cement-feet bg-opacity-10',
- 'text-baltic-sea',
- 'dark:bg-oil dark:bg-opacity-15',
- 'dark:text-white',
- ],
- Disconnecting: [
- 'bg-cement-feet bg-opacity-10',
- 'text-baltic-sea',
- 'dark:bg-oil dark:bg-opacity-15',
- 'dark:text-white',
- ],
- Unknown: [
- 'bg-cement-feet bg-opacity-10',
- 'text-coal-mine-light',
- 'dark:bg-oil dark:bg-opacity-15',
- '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 (
-
-
-
-
-
-
- );
-}
-
-export default ConnectionStatus;
diff --git a/nym-vpn/ui/src/pages/home/ConnectionTimer.tsx b/nym-vpn/ui/src/pages/home/ConnectionTimer.tsx
deleted file mode 100644
index a06f0cdd41..0000000000
--- a/nym-vpn/ui/src/pages/home/ConnectionTimer.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-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.error && (
-
-
-
- )}
- {state.state === 'Connected' && - {t( - `connection-progress.${ - state.progressMessages[state.progressMessages.length - 1] - }`, - { - ns: 'backendMessages', - }, - )} -
-
-
- )}
- {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
deleted file mode 100644
index 3841adbf71..0000000000
--- a/nym-vpn/ui/src/pages/home/Home.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { invoke } from '@tauri-apps/api';
-import clsx from 'clsx';
-import { Button } from '@mui/base';
-import { useNavigate } from 'react-router-dom';
-import { useMainDispatch, useMainState } from '../../contexts';
-import { CmdError, StateDispatch } from '../../types';
-import { routes } from '../../constants';
-import NetworkModeSelect from './NetworkModeSelect';
-import ConnectionStatus from './ConnectionStatus';
-import HopSelect from './HopSelect';
-
-function Home() {
- const {
- state,
- loading,
- entryNodeLocation,
- exitNodeLocation,
- entrySelector,
- defaultNodeLocation,
- } = useMainState();
- const dispatch = useMainDispatch() as StateDispatch;
- const navigate = useNavigate();
- const { t } = useTranslation('home');
-
- const handleClick = async () => {
- dispatch({ type: 'disconnect' });
- if (state === 'Connected') {
- invoke('disconnect')
- .then((result) => {
- console.log('disconnect result');
- console.log(result);
- })
- .catch((e: CmdError) => {
- console.warn(`backend error: ${e.source} - ${e.message}`);
- dispatch({ type: 'set-error', error: e.message });
- });
- } else if (state === 'Disconnected') {
- dispatch({ type: 'connect' });
- invoke('connect')
- .then((result) => {
- console.log('connect result');
- console.log(result);
- })
- .catch((e: CmdError) => {
- console.warn(`backend error: ${e.source} - ${e.message}`);
- dispatch({ type: 'set-error', error: e.message });
- });
- }
- };
-
- const getButtonText = useCallback(() => {
- 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');
- }
- }, [state, t]);
-
- return (
- - {t('connection-time')} -
-- {connectionTime} -
-
-
- );
-}
-
-export default Home;
diff --git a/nym-vpn/ui/src/pages/home/HopSelect.tsx b/nym-vpn/ui/src/pages/home/HopSelect.tsx
deleted file mode 100644
index 6f3611a9a3..0000000000
--- a/nym-vpn/ui/src/pages/home/HopSelect.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import clsx from 'clsx';
-import { Country, NodeHop } from '../../types';
-import { useMainState } from '../../contexts';
-
-interface HopSelectProps {
- country: Country;
- onClick: () => void;
- nodeHop: NodeHop;
-}
-
-export default function HopSelect({
- nodeHop,
- country,
- onClick,
-}: HopSelectProps) {
- const { state } = useMainState();
- const { t } = useTranslation('home');
-
- return (
-
-
-
-
-
-
-
-
-
-
- {t('select-node-title')}
-
-
- {entrySelector && (
- {
- if (state === 'Disconnected') {
- navigate(routes.entryNodeLocation);
- }
- }}
- nodeHop="entry"
- />
- )}
- {
- if (state === 'Disconnected') {
- navigate(routes.exitNodeLocation);
- }
- }}
- nodeHop="exit"
- />
-
-
-
- );
-}
diff --git a/nym-vpn/ui/src/pages/home/NetworkModeSelect.tsx b/nym-vpn/ui/src/pages/home/NetworkModeSelect.tsx
deleted file mode 100644
index 9967ad447c..0000000000
--- a/nym-vpn/ui/src/pages/home/NetworkModeSelect.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import { useEffect, 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');
-
- useEffect(() => {
- if (state.vpnMode !== selected) {
- setSelected(state.vpnMode);
- }
- }, [state.vpnMode, selected]);
-
- const handleNetworkModeChange = async (value: VpnMode) => {
- if (state.state === 'Disconnected' && value !== state.vpnMode) {
- setLoading(true);
- try {
- await invoke
- {nodeHop === 'entry' ? t('first-hop') : t('last-hop')}
-
-
- }.svg`})
-
-
- arrow_right
-
-
- {country.name}
-
-
-
- {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
deleted file mode 100644
index c2d92a5746..0000000000
--- a/nym-vpn/ui/src/pages/home/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Home } from './Home';
diff --git a/nym-vpn/ui/src/pages/index.ts b/nym-vpn/ui/src/pages/index.ts
deleted file mode 100644
index a948bb4bd9..0000000000
--- a/nym-vpn/ui/src/pages/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from './home';
-export * from './settings';
-export { default as MainLayout } from './MainLayout';
-export * from './location';
-export { default as Error } from './Error';
diff --git a/nym-vpn/ui/src/pages/location/CountryList.tsx b/nym-vpn/ui/src/pages/location/CountryList.tsx
deleted file mode 100644
index 8aa738e0d4..0000000000
--- a/nym-vpn/ui/src/pages/location/CountryList.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import clsx from 'clsx';
-import { Country } from '../../types';
-
-interface CountryListProps {
- countries: Country[];
- onClick: (name: string, code: string) => void;
- isSelected: (code: string) => boolean;
-}
-
-export default function CountryList({
- countries,
- onClick,
- isSelected,
-}: CountryListProps) {
- const { t } = useTranslation('nodeLocation');
-
- return (
-
- {vpnModes.map((mode) => (
-
- clsx([
- 'bg-white dark:bg-baltic-sea-jaguar relative flex rounded-lg px-5 py-2 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}
-
-
- -
- {countries && countries.length > 0 ? (
- countries.map((country) => (
-
-
- onClick(country.name, country.code)} - className={clsx([ - 'flex flex-row justify-between', - 'hover:bg-gun-powder hover:bg-opacity-10', - 'dark:hover:bg-laughing-jack dark:hover:bg-opacity-10', - 'rounded-lg cursor-pointer px-3 py-1', - isSelected(country.code) && - 'bg-gun-powder dark:bg-laughing-jack bg-opacity-15 dark:bg-opacity-15', - ])} - onClick={() => onClick(country.name, country.code)} - > ----
- - {country.name} --- {isSelected(country.code) && t('selected')} --
- ))
- ) : (
-
{t('none-found')}
- )} -
-
- );
-}
-
-export default NodeLocation;
diff --git a/nym-vpn/ui/src/pages/location/QuickConnect.tsx b/nym-vpn/ui/src/pages/location/QuickConnect.tsx
deleted file mode 100644
index 680e0d5714..0000000000
--- a/nym-vpn/ui/src/pages/location/QuickConnect.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { useMainState } from '../../contexts';
-import { QuickConnectPrefix } from '../../constants';
-
-interface QuickConnectProps {
- onClick: (name: string, code: string) => void;
-}
-
-export default function QuickConnect({ onClick }: QuickConnectProps) {
- const { defaultNodeLocation } = useMainState();
-
- return (
-
-
-
- onClick(defaultNodeLocation.name, defaultNodeLocation.code)
- }
- className="flex px-1 flex-row items-center w-full py-5 cursor-pointer"
- onClick={() =>
- onClick(defaultNodeLocation.name, defaultNodeLocation.code)
- }
- >
- bolt
-
- );
-}
diff --git a/nym-vpn/ui/src/pages/location/SearchBox.tsx b/nym-vpn/ui/src/pages/location/SearchBox.tsx
deleted file mode 100644
index 2918b796a7..0000000000
--- a/nym-vpn/ui/src/pages/location/SearchBox.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import clsx from 'clsx';
-import { InputEvent } from '../../types';
-
-interface SearchProps {
- value: string;
- onChange: (e: InputEvent) => void;
- placeholder: string;
-}
-
-export default function SearchBox({
- value,
- onChange,
- placeholder,
-}: SearchProps) {
- return (
- {`${QuickConnectPrefix} (${defaultNodeLocation.name})`}
-
-
-
- );
-}
diff --git a/nym-vpn/ui/src/pages/location/index.ts b/nym-vpn/ui/src/pages/location/index.ts
deleted file mode 100644
index 991fa94860..0000000000
--- a/nym-vpn/ui/src/pages/location/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as NodeLocation } from './NodeLocation';
diff --git a/nym-vpn/ui/src/pages/settings/Settings.tsx b/nym-vpn/ui/src/pages/settings/Settings.tsx
deleted file mode 100644
index ce42647846..0000000000
--- a/nym-vpn/ui/src/pages/settings/Settings.tsx
+++ /dev/null
@@ -1,228 +0,0 @@
-import { useEffect, useState } from 'react';
-import clsx from 'clsx';
-import { invoke } from '@tauri-apps/api';
-import { Switch } from '@headlessui/react';
-import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
-import { routes } from '../../constants';
-import { useMainDispatch, useMainState } from '../../contexts';
-import { StateDispatch } from '../../types';
-import SettingsGroup from './SettingsGroup';
-
-function Settings() {
- const state = useMainState();
- const navigate = useNavigate();
- const dispatch = useMainDispatch() as StateDispatch;
- const { t } = useTranslation('settings');
-
- const [entrySelector, setEntrySelector] = useState(state.entrySelector);
- const [autoConnect, setAutoConnect] = useState(state.autoConnect);
- const [monitoring, setMonitoring] = useState(state.monitoring);
-
- useEffect(() => {
- setEntrySelector(state.entrySelector);
- setAutoConnect(state.autoConnect);
- setMonitoring(state.monitoring);
- }, [state]);
-
- const handleEntrySelectorChange = async () => {
- const isSelected = !state.entrySelector;
- dispatch({ type: 'set-entry-selector', entrySelector: isSelected });
- invoke
- Search
-
-
- search
-
-
-
-
-
- ),
- },
- {
- title: t('entry-selector.title'),
- desc: t('entry-selector.desc'),
- leadingIcon: 'looks_two',
- trailing: (
-
-
-
- ),
- },
- ]}
- />
- {
- navigate(routes.display);
- },
- trailing: (
- {
- navigate(routes.logs);
- },
- trailing: (
- {
- navigate(routes.feedback);
- },
- trailing: (
-
-
-
- ),
- },
- {
- title: t('faq'),
- leadingIcon: 'help',
- disabled: true,
- trailing: (
- {
- navigate(routes.legal);
- },
- disabled: true,
- trailing: (
- {
- //TODO shutdown gracefully
- },
- disabled: true,
- },
- ]}
- />
-
- );
-}
-
-export default Settings;
diff --git a/nym-vpn/ui/src/pages/settings/SettingsGroup.tsx b/nym-vpn/ui/src/pages/settings/SettingsGroup.tsx
deleted file mode 100644
index fb4400aee0..0000000000
--- a/nym-vpn/ui/src/pages/settings/SettingsGroup.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import clsx from 'clsx';
-import { ReactNode } from 'react';
-import { RadioGroup } from '@headlessui/react';
-
-type Setting = {
- title: string;
- leadingIcon?: string;
- desc?: string;
- onClick?: () => void;
- trailing?: ReactNode;
- disabled?: boolean;
-};
-
-interface Props {
- settings: Setting[];
-}
-
-function SettingsGroup({ settings }: Props) {
- return (
-
- arrow_right
-
- ),
- },
- ]}
- />
-
- arrow_right
-
- ),
- disabled: true,
- },
- ]}
- />
-
- arrow_right
-
- ),
- disabled: true,
- },
- {
- title: t('error-reporting.title'),
- desc: t('error-reporting.desc'),
- leadingIcon: 'error',
- disabled: true,
- trailing: (
- launch
- ),
- },
- ]}
- />
-
- arrow_right
-
- ),
- },
- ]}
- />
-
- Version {state.version}
-
-
- {setting.leadingIcon && (
-
- {setting.leadingIcon}
-
- )}
-
-
-
-
-
- {setting.title}
-
-
- {setting.desc}
-
-
- {setting.trailing}
-
-
- );
-}
-
-export default Display;
diff --git a/nym-vpn/ui/src/pages/settings/display/UiScaler.tsx b/nym-vpn/ui/src/pages/settings/display/UiScaler.tsx
deleted file mode 100644
index 7781eceeba..0000000000
--- a/nym-vpn/ui/src/pages/settings/display/UiScaler.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { ChangeEvent, useEffect, useState } from 'react';
-import { invoke } from '@tauri-apps/api';
-import clsx from 'clsx';
-import { useTranslation } from 'react-i18next';
-import { useMainDispatch, useMainState } from '../../../contexts';
-import { CmdError, StateDispatch } from '../../../types';
-
-function UiScaler() {
- const [slideValue, setSlideValue] = useState(12);
- const dispatch = useMainDispatch() as StateDispatch;
- const { rootFontSize } = useMainState();
- const { t } = useTranslation('settings');
-
- useEffect(() => {
- setSlideValue(rootFontSize);
- }, [rootFontSize]);
-
- const handleChange = (e: ChangeEvent
-
- Dark mode
-
-
-
- - {t('ui-mode.dark')} -
-
-
- );
-}
-
-export default UiScaler;
diff --git a/nym-vpn/ui/src/pages/settings/display/index.ts b/nym-vpn/ui/src/pages/settings/display/index.ts
deleted file mode 100644
index fa2dc562ff..0000000000
--- a/nym-vpn/ui/src/pages/settings/display/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Display } from './Display';
diff --git a/nym-vpn/ui/src/pages/settings/feedback/Feedback.tsx b/nym-vpn/ui/src/pages/settings/feedback/Feedback.tsx
deleted file mode 100644
index e6a9d5cd81..0000000000
--- a/nym-vpn/ui/src/pages/settings/feedback/Feedback.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-function Feedback() {
- return (
- - {`${t('zoom-level')}: ${slideValue}`} -
- -
-
-
- );
-}
-
-export default Feedback;
diff --git a/nym-vpn/ui/src/pages/settings/feedback/index.ts b/nym-vpn/ui/src/pages/settings/feedback/index.ts
deleted file mode 100644
index 4a06655c88..0000000000
--- a/nym-vpn/ui/src/pages/settings/feedback/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Feedback } from './Feedback';
diff --git a/nym-vpn/ui/src/pages/settings/index.ts b/nym-vpn/ui/src/pages/settings/index.ts
deleted file mode 100644
index 65ba8ccb8d..0000000000
--- a/nym-vpn/ui/src/pages/settings/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export { default as Settings } from './Settings';
-export { default as SettingsLayout } from './SettingsLayout';
-export * from './display';
-export * from './feedback';
-export * from './legal';
diff --git a/nym-vpn/ui/src/pages/settings/legal/Legal.tsx b/nym-vpn/ui/src/pages/settings/legal/Legal.tsx
deleted file mode 100644
index f3d88a319d..0000000000
--- a/nym-vpn/ui/src/pages/settings/legal/Legal.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-function Legal() {
- return (
-
-
-
- );
-}
-
-export default Legal;
diff --git a/nym-vpn/ui/src/pages/settings/legal/index.ts b/nym-vpn/ui/src/pages/settings/legal/index.ts
deleted file mode 100644
index 77d3ce9eb2..0000000000
--- a/nym-vpn/ui/src/pages/settings/legal/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Legal } from './Legal';
diff --git a/nym-vpn/ui/src/router.tsx b/nym-vpn/ui/src/router.tsx
deleted file mode 100644
index 221beb378a..0000000000
--- a/nym-vpn/ui/src/router.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { createBrowserRouter } from 'react-router-dom';
-import {
- Display,
- Error,
- Feedback,
- Home,
- Legal,
- MainLayout,
- NodeLocation,
- Settings,
- SettingsLayout,
-} from './pages';
-import { routes } from './constants';
-
-const router = createBrowserRouter([
- {
- path: routes.root,
- element:
- {children}
-
- );
-}
diff --git a/nym-vpn/ui/src/ui/TopBar.tsx b/nym-vpn/ui/src/ui/TopBar.tsx
deleted file mode 100644
index 2f3bfe7fa8..0000000000
--- a/nym-vpn/ui/src/ui/TopBar.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';
-import clsx from 'clsx';
-import { 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