From 7033f92d82ce913dd20ec264a88797b139d860f1 Mon Sep 17 00:00:00 2001 From: fmtabbara Date: Thu, 23 Feb 2023 17:33:03 +0000 Subject: [PATCH 1/4] add UI for picking service provider --- .../desktop/src/components/CustomTitleBar.tsx | 5 +- nym-connect/desktop/src/context/main.tsx | 5 +- .../pages/menu/settings/GatewaySettings.tsx | 4 +- .../menu/settings/ServiceProviderSettings.tsx | 84 +++++++++++++++++++ .../desktop/src/pages/menu/settings/index.tsx | 5 +- nym-connect/desktop/src/routes/index.tsx | 2 + 6 files changed, 98 insertions(+), 7 deletions(-) create mode 100644 nym-connect/desktop/src/pages/menu/settings/ServiceProviderSettings.tsx diff --git a/nym-connect/desktop/src/components/CustomTitleBar.tsx b/nym-connect/desktop/src/components/CustomTitleBar.tsx index 88235e6074..5baa05c5b0 100644 --- a/nym-connect/desktop/src/components/CustomTitleBar.tsx +++ b/nym-connect/desktop/src/components/CustomTitleBar.tsx @@ -39,7 +39,8 @@ const ArrowBackIcon = ({ onBack }: { onBack?: () => void }) => { return ; }; -const getTitleIcon = (path: string) => { +const getTitle = (path: string) => { + if (path.includes('settings')) return 'Settings'; if (path !== '/') { const title = path.split('/').slice(-1); return ( @@ -61,7 +62,7 @@ export const CustomTitleBar = ({ path = '/', onBack }: { path?: string; onBack?: {/* set width to keep logo centered */} {path === '/' ? : } - {getTitleIcon(path)} + {getTitle(path)} appWindow.minimize()} /> appWindow.close()} /> diff --git a/nym-connect/desktop/src/context/main.tsx b/nym-connect/desktop/src/context/main.tsx index a933a8c36f..0cbba54383 100644 --- a/nym-connect/desktop/src/context/main.tsx +++ b/nym-connect/desktop/src/context/main.tsx @@ -8,7 +8,7 @@ import { UserDefinedGateway } from 'src/types/gateway'; import { forage } from '@tauri-apps/tauri-forage'; import { ConnectionStatusKind, GatewayPerformance } from '../types'; import { ConnectionStatsItem } from '../components/ConnectionStats'; -import { ServiceProvider } from '../types/directory'; +import { ServiceProvider, Services } from '../types/directory'; const FORAGE_KEY = 'nym-connect-user-gateway'; @@ -25,6 +25,7 @@ export type TClientContext = { selectedProvider?: ServiceProvider; showInfoModal: boolean; userDefinedGateway?: UserDefinedGateway; + serviceProviders?: ServiceProvider[]; setMode: (mode: ModeType) => void; clearError: () => void; setConnectionStatus: (connectionStatus: ConnectionStatusKind) => void; @@ -165,6 +166,7 @@ export const ClientContextProvider: FCWithChildren = ({ children }) => { showInfoModal, setConnectionStats, selectedProvider, + serviceProviders, connectedSince, setConnectedSince, setRandomSerivceProvider, @@ -180,6 +182,7 @@ export const ClientContextProvider: FCWithChildren = ({ children }) => { appVersion, error, showInfoModal, + serviceProviders, connectedSince, connectionStatus, connectionStats, diff --git a/nym-connect/desktop/src/pages/menu/settings/GatewaySettings.tsx b/nym-connect/desktop/src/pages/menu/settings/GatewaySettings.tsx index c273a8a007..43f4e84a2b 100644 --- a/nym-connect/desktop/src/pages/menu/settings/GatewaySettings.tsx +++ b/nym-connect/desktop/src/pages/menu/settings/GatewaySettings.tsx @@ -6,7 +6,7 @@ import { ConnectionStatusKind } from 'src/types'; import { AppVersion } from 'src/components/AppVersion'; export const GatewaySettings = () => { - const { userDefinedGateway, setUserDefinedGateway } = useClientContext(); + const { userDefinedGateway, setUserDefinedGateway, connectionStatus } = useClientContext(); const [gatewayKey, setGatewayKey] = useState(userDefinedGateway?.gateway); const handleIsValidGatewayKey = (isValid: boolean) => { @@ -23,8 +23,6 @@ export const GatewaySettings = () => { setUserDefinedGateway((current) => ({ ...current, isActive: e.target.checked })); }; - const { connectionStatus } = useClientContext(); - return ( diff --git a/nym-connect/desktop/src/pages/menu/settings/ServiceProviderSettings.tsx b/nym-connect/desktop/src/pages/menu/settings/ServiceProviderSettings.tsx new file mode 100644 index 0000000000..bb8a159319 --- /dev/null +++ b/nym-connect/desktop/src/pages/menu/settings/ServiceProviderSettings.tsx @@ -0,0 +1,84 @@ +import React, { ChangeEvent, useState } from 'react'; +import { + Autocomplete, + Box, + FormControl, + FormControlLabel, + FormHelperText, + Stack, + Switch, + TextField, + Typography, +} from '@mui/material'; +import { AppVersion } from 'src/components/AppVersion'; +import { ConnectionStatusKind } from 'src/types'; +import { useClientContext } from 'src/context/main'; + +export const ServiceProviderSettings = () => { + const [spAddress, setSPAddress] = useState(); + const [isOn, setIsOn] = useState(false); + + const { connectionStatus, serviceProviders } = useClientContext(); + + const toggleOnOff = (e: ChangeEvent) => { + if (!isOn) setSPAddress(undefined); + setIsOn(e.target.checked); + }; + + const handleSelectFromList = (value: string | null) => { + setSPAddress(value ?? undefined); + }; + + return ( + + + + + Select your Service Provider + + + Pick a service provider form the list or enter your own + + + + } + label={isOn ? 'On' : 'Off'} + /> + {connectionStatus === ConnectionStatusKind.connected && ( + This setting is disabled during an active connection + )} + {isOn && serviceProviders && ( + sp.address)} + freeSolo + onChange={(e, value) => handleSelectFromList(value)} + value={spAddress} + size="small" + renderInput={(params) => ( + console.log(e.target.value)} + placeholder="Service provider" + /> + )} + /> + )} + + + + + + ); +}; diff --git a/nym-connect/desktop/src/pages/menu/settings/index.tsx b/nym-connect/desktop/src/pages/menu/settings/index.tsx index edd1050272..bc58b69f1b 100644 --- a/nym-connect/desktop/src/pages/menu/settings/index.tsx +++ b/nym-connect/desktop/src/pages/menu/settings/index.tsx @@ -4,7 +4,10 @@ import { Link, List, ListItem, ListItemButton, ListItemText, Stack } from '@mui/ import { AppVersion } from 'src/components/AppVersion'; import { toggleLogViewer } from 'src/utils'; -const menuSchema = [{ title: 'Select your gateway', path: 'gateway' }]; +const menuSchema = [ + { title: 'Select your gateway', path: 'gateway' }, + { title: 'Select a service provider', path: 'service-provider' }, +]; export const SettingsMenu = () => ( diff --git a/nym-connect/desktop/src/routes/index.tsx b/nym-connect/desktop/src/routes/index.tsx index aaf09fac16..dd3eec678e 100644 --- a/nym-connect/desktop/src/routes/index.tsx +++ b/nym-connect/desktop/src/routes/index.tsx @@ -6,6 +6,7 @@ import { CompatibleApps } from 'src/pages/menu/Apps'; import { HelpGuide } from 'src/pages/menu/Guide'; import { SettingsMenu } from 'src/pages/menu/settings'; import { GatewaySettings } from 'src/pages/menu/settings/GatewaySettings'; +import { ServiceProviderSettings } from 'src/pages/menu/settings/ServiceProviderSettings'; export const AppRoutes = () => ( @@ -17,6 +18,7 @@ export const AppRoutes = () => ( } /> } /> + } /> From af6bab7703314d0c00257d9e86141411e2e0fdcb Mon Sep 17 00:00:00 2001 From: fmtabbara Date: Thu, 23 Feb 2023 17:40:39 +0000 Subject: [PATCH 2/4] fix lint error --- nym-connect/desktop/src/context/main.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/nym-connect/desktop/src/context/main.tsx b/nym-connect/desktop/src/context/main.tsx index 0cbba54383..2efdc49289 100644 --- a/nym-connect/desktop/src/context/main.tsx +++ b/nym-connect/desktop/src/context/main.tsx @@ -8,7 +8,7 @@ import { UserDefinedGateway } from 'src/types/gateway'; import { forage } from '@tauri-apps/tauri-forage'; import { ConnectionStatusKind, GatewayPerformance } from '../types'; import { ConnectionStatsItem } from '../components/ConnectionStats'; -import { ServiceProvider, Services } from '../types/directory'; +import { ServiceProvider } from '../types/directory'; const FORAGE_KEY = 'nym-connect-user-gateway'; From 6d29774744398bf09d83c716bf2944840692d27e Mon Sep 17 00:00:00 2001 From: fmtabbara Date: Thu, 23 Feb 2023 22:57:21 +0000 Subject: [PATCH 3/4] style tweaks --- .../desktop/src/pages/menu/settings/GatewaySettings.tsx | 1 + .../src/pages/menu/settings/ServiceProviderSettings.tsx | 5 +++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/nym-connect/desktop/src/pages/menu/settings/GatewaySettings.tsx b/nym-connect/desktop/src/pages/menu/settings/GatewaySettings.tsx index 43f4e84a2b..80efa7988a 100644 --- a/nym-connect/desktop/src/pages/menu/settings/GatewaySettings.tsx +++ b/nym-connect/desktop/src/pages/menu/settings/GatewaySettings.tsx @@ -58,6 +58,7 @@ export const GatewaySettings = () => { onValidate={handleIsValidGatewayKey} sx={{ mt: 1 }} disabled={connectionStatus === 'connected' || !userDefinedGateway?.isActive} + autoFocus /> )} diff --git a/nym-connect/desktop/src/pages/menu/settings/ServiceProviderSettings.tsx b/nym-connect/desktop/src/pages/menu/settings/ServiceProviderSettings.tsx index bb8a159319..8906c67129 100644 --- a/nym-connect/desktop/src/pages/menu/settings/ServiceProviderSettings.tsx +++ b/nym-connect/desktop/src/pages/menu/settings/ServiceProviderSettings.tsx @@ -37,7 +37,7 @@ export const ServiceProviderSettings = () => { Select your Service Provider - Pick a service provider form the list or enter your own + Pick a service provider from the list or enter your own { sp.address)} + options={serviceProviders.map((sp) => `${sp.address.substring(0, 20)}...`)} freeSolo onChange={(e, value) => handleSelectFromList(value)} value={spAddress} @@ -73,6 +73,7 @@ export const ServiceProviderSettings = () => { placeholder="Service provider" /> )} + ListboxProps={{ style: { background: 'unset', fontSize: '14px' } }} /> )} From c08efef8ed095b06240d7415a4b2a4bb747c049f Mon Sep 17 00:00:00 2001 From: fmtabbara Date: Thu, 23 Feb 2023 22:58:59 +0000 Subject: [PATCH 4/4] add autofocus to IdentityKeyComponent --- .../src/components/mixnodes/IdentityKeyFormField.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/ts-packages/react-components/src/components/mixnodes/IdentityKeyFormField.tsx b/ts-packages/react-components/src/components/mixnodes/IdentityKeyFormField.tsx index 4417bbffe5..692e666fe7 100644 --- a/ts-packages/react-components/src/components/mixnodes/IdentityKeyFormField.tsx +++ b/ts-packages/react-components/src/components/mixnodes/IdentityKeyFormField.tsx @@ -22,6 +22,7 @@ export const IdentityKeyFormField: FCWithChildren<{ size?: 'small' | 'medium'; sx?: SxProps; disabled?: boolean; + autoFocus?: boolean; }> = ({ required, fullWidth, @@ -37,6 +38,7 @@ export const IdentityKeyFormField: FCWithChildren<{ showTickOnValid = true, size, disabled, + autoFocus, }) => { const [value, setValue] = React.useState(initialValue); const [validationError, setValidationError] = React.useState(); @@ -106,6 +108,7 @@ export const IdentityKeyFormField: FCWithChildren<{ InputLabelProps={{ shrink: true }} size={size} disabled={disabled} + autoFocus={autoFocus} /> ); };