Fix most of the bare client issue

src/pages/Settings/Proxy.tsx

@@ -4,8 +4,8 @@ import Dropdown from "./Dropdown";
 import BareInput from "./BareInput";
 import WispInput from "./WispInput";
 import ProxyInput from "./ProxyInput";
-import { changeTransport } from "../../util/transports";
 import { useTranslation } from "react-i18next";
+import TransportDropdown from "./transportDropdown";
 
 const Proxy = ({ id, active }) => {
   const { t } = useTranslation();
@@ -118,10 +118,10 @@ const Proxy = ({ id, active }) => {
           <div className="text-md p-4 font-bold text-input-text">
             Select the transport to use
           </div>
-          <Dropdown
+          <TransportDropdown
             storageKey="transport"
             options={transports}
-            refresh={true}
+            refresh={false}
           />
         </div>
       </motion.div>

src/pages/Settings/transportDropdown.tsx

@@ -0,0 +1,76 @@
+import { FaAngleDown } from "react-icons/fa";
+import { useState, useEffect } from "preact/hooks"
+import { changeTransport } from "../../util/transports.ts";
+const wispUrl = localStorage.getItem("wispUrl") || (location.protocol === "https:" ? "wss://" : "ws://") + location.host + "/wisp/";
+
+interface Option {
+  id: string;
+  label: string; // Translations CAN be passed
+}
+
+const TransportDropdown = ({
+  storageKey,
+  options,
+  refresh
+}: {
+  storageKey: string;
+  options: Option[];
+  refresh: boolean;
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const [choice, setChoice] = useState(() => {
+    return localStorage.getItem(storageKey) || options[0]?.id || "";
+  });
+
+  // update on localstorage change
+  useEffect(() => {
+    setChoice(localStorage.getItem(storageKey) || options[0]?.id || "");
+  }, [storageKey, options]);
+
+  return (
+    <div className="relative text-center">
+      <div
+        className={`font-roboto flex h-14 w-56 cursor-pointer flex-col items-center justify-center border border-input-border-color bg-input text-center text-xl ${
+          isOpen ? "rounded-t-2xl" : "rounded-2xl"
+        }`}
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        <div className="flex h-full w-full select-none flex-row items-center">
+          <div className="h-full w-1/4"></div>
+          <div className="flex w-2/4 flex-col items-center text-input-text">
+            {options.find((o) => o.id === choice)?.label}
+          </div>
+          <div className="flex w-1/4 flex-col items-center text-input-text">
+            <FaAngleDown />
+          </div>
+        </div>
+        {isOpen && (
+          <div className="absolute top-full w-full">
+            {options.map((option, index) => (
+              <div
+                key={option.id}
+                className={`border border-input-border-color bg-input p-2 text-input-text hover:bg-dropdown-option-hover-color ${
+                  index === options.length - 1 ? "rounded-b-2xl" : ""
+                }`}
+                onClick={() => {
+                  setIsOpen(false);
+                  setChoice(option.id);
+                  localStorage.setItem(storageKey, option.id);
+                  changeTransport(option.id, wispUrl);
+                  if (refresh === true) {
+                    window.location.reload();
+                  }
+                }}
+              >
+                {option.label}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default TransportDropdown;

src/routes.tsx

@@ -7,6 +7,7 @@ import { Radon } from "./pages/Radon";
 import { Settings } from "./pages/Settings/";
 import { AboutBlank } from "./AboutBlank";
 import { Faq } from "./pages/Faq";
+import { setTransport } from "./util/transports";
 
 import "./style.css";
 import "./i18n";
@@ -20,6 +21,7 @@ export default function Routes() {
         })
         .then(() => {
           console.log("Service worker registered successfully");
+          setTransport();
         });
     });
   }

src/util/SWHelper.js

@@ -16,4 +16,7 @@ function uninstallServiceWorkers() {
   });
 }
 
+function reInitServiceWorkers() {
+}
+
 export { updateServiceWorkers, uninstallServiceWorkers };

src/util/transports.ts

@@ -2,6 +2,7 @@ import {
   SetTransport,
   registerRemoteListener
 } from "@mercuryworkshop/bare-mux";
+//import { isIOS } from "./IosDetector";
 
 function changeTransport(transport: string, wispUrl: string) {
   switch (transport) {
@@ -15,7 +16,7 @@ function changeTransport(transport: string, wispUrl: string) {
       console.log("Setting transport to Libcurl");
       SetTransport("CurlMod.LibcurlClient", {
         wisp: wispUrl,
-        wasm: "https://cdn.jsdelivr.net/npm/libcurl.js@v0.5.2/libcurl.wasm"
+        wasm: "https://cdn.jsdelivr.net/npm/libcurl.js@v0.5.3/libcurl.wasm"
       });
       break;
     case "bare":
@@ -29,7 +30,7 @@ function changeTransport(transport: string, wispUrl: string) {
     default:
       SetTransport("CurlMod.LibcurlClient", {
         wisp: wispUrl,
-        wasm: "/libcurl.wasm"
+        wasm: "https://cdn.jsdelivr.net/npm/libcurl.js@v0.5.3/libcurl.wasm"
       });
       break;
   }
@@ -45,10 +46,30 @@ const wispUrl =
   "/wisp/";
 registerRemoteListener(navigator.serviceWorker.controller!);
 
+//if (isIOS) {
+//  console.log("iOS device detected. Bare will be used.");
+//  changeTransport(
+//    localStorage.getItem("transport") || "libcurl",
+//    localStorage.getItem("wispUrl") || wispUrl
+//  );
+//} else {
+//  changeTransport(
+//   localStorage.getItem("transport") || "bare",
+//   localStorage.getItem("wispUrl") || wispUrl
+//  );
+//}
 
-changeTransport(
+//changeTransport(
-  localStorage.getItem("transport") || "libcurl",
+//    localStorage.getItem("transport") || "libcurl",
-  localStorage.getItem("wispUrl") || wispUrl
+//    localStorage.getItem("wispUrl") || wispUrl 
-);
+//);
 
-export { changeTransport, getTransport };
+// helper function for  ../routes.tsx
+function setTransport() {
+  changeTransport(
+    localStorage.getItem("transport") || "libcurl",
+    localStorage.getItem("wispUrl") || wispUrl
+  );
+}
+
+export { changeTransport, getTransport, setTransport };