Merge pull request #3099 from nymtech/feature/nym-connect-select-sp

NymConnect Select a service provider

nym-connect/desktop/src/components/CustomTitleBar.tsx

@@ -39,7 +39,8 @@ const ArrowBackIcon = ({ onBack }: { onBack?: () => void }) => {
   return <CustomButton Icon={ArrowBack} onClick={handleBack} />;
 };
 
-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?:
   <Box data-tauri-drag-region style={customTitleBarStyles.titlebar}>
     {/* set width to keep logo centered */}
     <Box sx={{ width: '40px' }}>{path === '/' ? <MenuIcon /> : <ArrowBackIcon onBack={onBack} />}</Box>
-    {getTitleIcon(path)}
+    {getTitle(path)}
     <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
       <CustomButton Icon={Minimize} onClick={() => appWindow.minimize()} />
       <CustomButton Icon={Close} onClick={() => appWindow.close()} />

nym-connect/desktop/src/context/main.tsx

@@ -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,

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<string | undefined>(userDefinedGateway?.gateway);
 
   const handleIsValidGatewayKey = (isValid: boolean) => {
@@ -23,8 +23,6 @@ export const GatewaySettings = () => {
     setUserDefinedGateway((current) => ({ ...current, isActive: e.target.checked }));
   };
 
-  const { connectionStatus } = useClientContext();
-
   return (
     <Box height="100%">
       <Stack justifyContent="space-between" height="100%">
@@ -60,6 +58,7 @@ export const GatewaySettings = () => {
                 onValidate={handleIsValidGatewayKey}
                 sx={{ mt: 1 }}
                 disabled={connectionStatus === 'connected' || !userDefinedGateway?.isActive}
+                autoFocus
               />
             )}
           </FormControl>

nym-connect/desktop/src/pages/menu/settings/ServiceProviderSettings.tsx

@@ -0,0 +1,85 @@
+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<string>();
+  const [isOn, setIsOn] = useState(false);
+
+  const { connectionStatus, serviceProviders } = useClientContext();
+
+  const toggleOnOff = (e: ChangeEvent<HTMLInputElement>) => {
+    if (!isOn) setSPAddress(undefined);
+    setIsOn(e.target.checked);
+  };
+
+  const handleSelectFromList = (value: string | null) => {
+    setSPAddress(value ?? undefined);
+  };
+
+  return (
+    <Box height="100%">
+      <Stack justifyContent="space-between" height="100%">
+        <Box>
+          <Typography fontWeight="bold" variant="body2" mb={1}>
+            Select your Service Provider
+          </Typography>
+          <Typography color="grey.300" variant="body2" mb={2}>
+            Pick a service provider from the list or enter your own
+          </Typography>
+          <FormControl fullWidth>
+            <FormControlLabel
+              control={
+                <Switch
+                  checked={isOn}
+                  onChange={toggleOnOff}
+                  disabled={connectionStatus === ConnectionStatusKind.connected}
+                  size="small"
+                  sx={{ ml: 1 }}
+                />
+              }
+              label={isOn ? 'On' : 'Off'}
+            />
+            {connectionStatus === ConnectionStatusKind.connected && (
+              <FormHelperText sx={{ m: 0, my: 1 }}>This setting is disabled during an active connection</FormHelperText>
+            )}
+            {isOn && serviceProviders && (
+              <Autocomplete
+                clearOnEscape
+                sx={{ mt: 1 }}
+                options={serviceProviders.map((sp) => `${sp.address.substring(0, 20)}...`)}
+                freeSolo
+                onChange={(e, value) => handleSelectFromList(value)}
+                value={spAddress}
+                size="small"
+                renderInput={(params) => (
+                  <TextField
+                    autoFocus
+                    {...params}
+                    value={spAddress}
+                    onChange={(e) => console.log(e.target.value)}
+                    placeholder="Service provider"
+                  />
+                )}
+                ListboxProps={{ style: { background: 'unset', fontSize: '14px' } }}
+              />
+            )}
+          </FormControl>
+        </Box>
+        <AppVersion />
+      </Stack>
+    </Box>
+  );
+};

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 = () => (
   <Stack justifyContent="space-between" height="100%">

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 = () => (
   <Routes>
@@ -17,6 +18,7 @@ export const AppRoutes = () => (
       <Route path="settings">
         <Route index element={<SettingsMenu />} />
         <Route path="gateway" element={<GatewaySettings />} />
+        <Route path="service-provider" element={<ServiceProviderSettings />} />
       </Route>
     </Route>
   </Routes>

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<string | undefined>(initialValue);
   const [validationError, setValidationError] = React.useState<string | undefined>();
@@ -106,6 +108,7 @@ export const IdentityKeyFormField: FCWithChildren<{
       InputLabelProps={{ shrink: true }}
       size={size}
       disabled={disabled}
+      autoFocus={autoFocus}
     />
   );
 };