From 7929bac6855cdf2a1abd22c3618bb36e253eba9f Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Mon, 27 Feb 2023 14:20:16 +0000
Subject: [PATCH] turn off user defined SP address is input it empty

---
 nym-connect/desktop/src/components/AppWindowFrame.tsx | 11 ++++++++++-
 nym-connect/desktop/src/context/main.tsx              |  2 +-
 .../pages/menu/settings/ServiceProviderSettings.tsx   |  9 ++++++---
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/nym-connect/desktop/src/components/AppWindowFrame.tsx b/nym-connect/desktop/src/components/AppWindowFrame.tsx
index 01aa390286..f8304ce00b 100644
--- a/nym-connect/desktop/src/components/AppWindowFrame.tsx
+++ b/nym-connect/desktop/src/components/AppWindowFrame.tsx
@@ -6,7 +6,8 @@ import { CustomTitleBar } from './CustomTitleBar';
 
 export const AppWindowFrame: FCWithChildren = ({ children }) => {
   const location = useLocation();
-  const { userDefinedGateway, setUserDefinedGateway } = useClientContext();
+  const { userDefinedGateway, setUserDefinedGateway, userDefinedSPAddress, setUserDefinedSPAddress } =
+    useClientContext();
 
   // defined functions to be used when moving away from pages
   const onBack = () => {
@@ -19,6 +20,14 @@ export const AppWindowFrame: FCWithChildren = ({ children }) => {
             setUserDefinedGateway((current) => ({ ...current, isActive: false }));
           }
         };
+      case '/menu/settings/service-provider':
+        return () => {
+          // when the user moves away from the settings page and the gateway is not valid
+          // set isActive to false
+          if (!userDefinedSPAddress?.address) {
+            setUserDefinedSPAddress((current) => ({ ...current, isActive: false }));
+          }
+        };
       default:
         return undefined;
     }
diff --git a/nym-connect/desktop/src/context/main.tsx b/nym-connect/desktop/src/context/main.tsx
index c861eb9bf0..b999b957a2 100644
--- a/nym-connect/desktop/src/context/main.tsx
+++ b/nym-connect/desktop/src/context/main.tsx
@@ -74,7 +74,7 @@ export const ClientContextProvider: FCWithChildren = ({ children }) => {
 
   useEffect(() => {
     setItemInStorage({ key: FORAGE_SP_KEY, value: userDefinedSPAddress });
-  }, [userDefinedGateway]);
+  }, [userDefinedSPAddress]);
 
   const initialiseApp = async () => {
     const services = await invoke('get_services');
diff --git a/nym-connect/desktop/src/pages/menu/settings/ServiceProviderSettings.tsx b/nym-connect/desktop/src/pages/menu/settings/ServiceProviderSettings.tsx
index 580d36e9d6..8f18caaacd 100644
--- a/nym-connect/desktop/src/pages/menu/settings/ServiceProviderSettings.tsx
+++ b/nym-connect/desktop/src/pages/menu/settings/ServiceProviderSettings.tsx
@@ -33,6 +33,10 @@ export const ServiceProviderSettings = () => {
     return 'The service provider specified is not in our known list.';
   };
 
+  const validateInput = (value: string) => {
+    setUserDefinedSPAddress((current) => ({ ...current, address: !value.length ? undefined : value }));
+  };
+
   return (
     <Box height="100%">
       <Stack justifyContent="space-between" height="100%">
@@ -63,11 +67,10 @@ export const ServiceProviderSettings = () => {
               <Autocomplete
                 clearOnEscape
                 disabled={connectionStatus === 'connected'}
-                value={userDefinedSPAddress.address}
                 sx={{ mt: 1 }}
                 options={serviceProviders.map((sp) => sp.address)}
-                getOptionLabel={(address) => `${address.substring(0, 18)}...`}
                 freeSolo
+                value={userDefinedSPAddress.address || ''}
                 onChange={(e, value) => handleSelectFromList(value)}
                 size="small"
                 renderInput={(params) => (
@@ -75,7 +78,7 @@ export const ServiceProviderSettings = () => {
                     autoFocus
                     {...params}
                     placeholder="Service provider"
-                    onChange={(e) => setUserDefinedSPAddress((current) => ({ ...current, address: e.target.value }))}
+                    onChange={(e) => validateInput(e.target.value)}
                   />
                 )}
                 ListboxProps={{ style: { background: 'unset', fontSize: '14px' } }}