chore: format file

src/components/PageComponents/Connect/HTTP.tsx

@@ -28,13 +28,8 @@ export const HTTP = ({ closeDialog }: TabElementProps): JSX.Element => {
     },
   });
 
-  const tlsEnabled = useWatch({
-    control,
-    name: "tls",
-    defaultValue: location.protocol === "https:",
-  });
-
   const [connectionInProgress, setConnectionInProgress] = useState(false);
+  const [https, setHTTPS] = useState(false);
 
   const onSubmit = handleSubmit(async (data) => {
     setConnectionInProgress(true);
@@ -46,7 +41,7 @@ export const HTTP = ({ closeDialog }: TabElementProps): JSX.Element => {
     await connection.connect({
       address: data.ip,
       fetchInterval: 2000,
-      tls: data.tls,
+      tls: https,
     });
 
     setSelectedDevice(id);
@@ -60,8 +55,7 @@ export const HTTP = ({ closeDialog }: TabElementProps): JSX.Element => {
       <div className="flex h-48 flex-col gap-2">
         <Label>IP Address/Hostname</Label>
         <Input
-          // label="IP Address/Hostname"
+          prefix={https ? "https://" : "http://"}
-          prefix={tlsEnabled ? "https://" : "http://"}
           placeholder="000.000.000.000 / meshtastic.local"
           disabled={connectionInProgress}
           {...register("ip")}
@@ -71,8 +65,11 @@ export const HTTP = ({ closeDialog }: TabElementProps): JSX.Element => {
           control={control}
           render={({ field: { value, ...rest } }) => (
             <>
-              <Label>Use TLS</Label>
+              <Label>Use HTTPS</Label>
               <Switch
+                onCheckedChange={(checked) => {
+                  checked ? setHTTPS(true) : setHTTPS(false);
+                }}
                 // label="Use TLS"
                 // description="Description"
                 disabled={