allow switching verification methods without reload

src/services/local-settings.ts

@@ -47,6 +47,9 @@ const webRtcRecentConnections = new LocalStorageEntry(
 // posting
 const addClientTag = new BooleanLocalStorageEntry("add-client-tag", ENABLE_CLIENT_TAG);
 
+// performance
+const verifyEventMethod = new LocalStorageEntry("verify-event-method", "wasm"); // wasm, internal, none
+
 const localSettings = {
   idbMaxEvents,
   wasmPersistForDays,
@@ -56,6 +59,7 @@ const localSettings = {
   webRtcSignalingRelays,
   webRtcRecentConnections,
   addClientTag,
+  verifyEventMethod,
 };
 
 if (import.meta.env.DEV) {

src/services/verify-event.ts

@@ -1,20 +1,18 @@
-import { NostrEvent, VerifiedEvent, verifiedSymbol, verifyEvent } from "nostr-tools";
+import { NostrEvent, VerifiedEvent, verifiedSymbol, verifyEvent as internalVerifyEvent } from "nostr-tools";
 import { setNostrWasm, verifyEvent as wasmVerifyEvent } from "nostr-tools/wasm";
 import { logger } from "../helpers/debug";
-
-const localStorageKey = "verify-event-method";
+import localSettings from "./local-settings";
 
 const log = logger.extend("VerifyEvent");
-let selectedMethod = "wasm";
-let verifyEventMethod: typeof verifyEvent;
-let alwaysVerify: typeof verifyEvent;
+let verifyEventMethod: typeof internalVerifyEvent;
+let alwaysVerifyMethod: typeof internalVerifyEvent;
 
 export function fakeVerifyEvent(event: NostrEvent): event is VerifiedEvent {
   return (event[verifiedSymbol] = true);
 }
 
 function loadWithTimeout() {
-  return new Promise<typeof verifyEvent>((res, rej) => {
+  return new Promise<typeof internalVerifyEvent>((res, rej) => {
     const timeout = setTimeout(() => {
       log("Timeout");
       rej(new Error("Timeout"));
@@ -33,34 +31,41 @@ function loadWithTimeout() {
   });
 }
 
-try {
-  selectedMethod = localStorage.getItem(localStorageKey) ?? "wasm";
-
-  switch (selectedMethod) {
-    case "wasm":
-      if (!("WebAssembly" in window)) throw new Error("WebAssembly not supported");
-      log("Loading WebAssembly module");
-      verifyEventMethod = alwaysVerify = await loadWithTimeout();
-      log("Loaded");
-      break;
-    case "none":
-      log("Using fake verify event method");
-      verifyEventMethod = fakeVerifyEvent;
-      alwaysVerify = verifyEvent;
-      break;
-    case "internal":
-    default:
-      log("Using internal nostr-tools");
-      verifyEventMethod = alwaysVerify = verifyEvent;
-      break;
-  }
-} catch (error) {
-  console.error("Failed to initialize event verification method, disabling");
-  console.log(error);
-
-  localStorage.setItem(localStorageKey, "none");
-  verifyEventMethod = alwaysVerify = verifyEvent;
+export default function verifyEvent(event: NostrEvent) {
+  return verifyEventMethod(event);
+}
+export function alwaysVerify(event: NostrEvent) {
+  return alwaysVerifyMethod(event);
 }
 
-export { alwaysVerify, selectedMethod };
-export default verifyEventMethod;
+async function updateVerifyMethod() {
+  try {
+    switch (localSettings.verifyEventMethod.value) {
+      case "wasm":
+        if (!("WebAssembly" in window)) throw new Error("WebAssembly not supported");
+        log("Loading WebAssembly module");
+        verifyEventMethod = alwaysVerifyMethod = await loadWithTimeout();
+        log("Loaded");
+        break;
+      case "none":
+        log("Using fake verify event method");
+        verifyEventMethod = fakeVerifyEvent;
+        alwaysVerifyMethod = internalVerifyEvent;
+        break;
+      case "internal":
+      default:
+        log("Using internal nostr-tools");
+        verifyEventMethod = alwaysVerifyMethod = internalVerifyEvent;
+        break;
+    }
+  } catch (error) {
+    console.error("Failed to initialize event verification method, disabling");
+    console.log(error);
+
+    localSettings.verifyEventMethod.next("none");
+    verifyEventMethod = alwaysVerifyMethod = internalVerifyEvent;
+  }
+}
+
+localSettings.verifyEventMethod.subscribe(updateVerifyMethod);
+await updateVerifyMethod();

src/views/settings/performance/index.tsx

@@ -9,20 +9,17 @@ import {
   FormErrorMessage,
   Select,
   Button,
-  Text,
   Heading,
 } from "@chakra-ui/react";
-import { useLocalStorage } from "react-use";
 
 import { safeUrl } from "../../../helpers/parse";
-import { selectedMethod } from "../../../services/verify-event";
 import VerticalPageLayout from "../../../components/vertical-page-layout";
 import useSettingsForm from "../use-settings-form";
+import useSubject from "../../../hooks/use-subject";
+import localSettings from "../../../services/local-settings";
 
 function VerifyEventSettings() {
-  const [verifyEventMethod, setVerifyEventMethod] = useLocalStorage<string>("verify-event-method", "internal", {
-    raw: true,
-  });
+  const verifyEventMethod = useSubject(localSettings.verifyEventMethod);
 
   return (
     <>
@@ -30,7 +27,11 @@ function VerifyEventSettings() {
         <FormLabel htmlFor="verifyEventMethod" mb="0">
           Verify event method
         </FormLabel>
-        <Select value={verifyEventMethod} onChange={(e) => setVerifyEventMethod(e.target.value)} maxW="sm">
+        <Select
+          value={verifyEventMethod}
+          onChange={(e) => localSettings.verifyEventMethod.next(e.target.value)}
+          maxW="sm"
+        >
           <option value="wasm">WebAssembly</option>
           <option value="internal">Internal</option>
           <option value="none">None</option>
@@ -38,17 +39,6 @@ function VerifyEventSettings() {
         <FormHelperText>Default: All events signatures are checked</FormHelperText>
         <FormHelperText>WebAssembly: Events signatures are checked in a separate thread</FormHelperText>
         <FormHelperText>None: Only Profiles, Follows, and replaceable event signatures are checked</FormHelperText>
-
-        {selectedMethod !== verifyEventMethod && (
-          <>
-            <Text color="blue.500" mt="2">
-              NOTE: You must reload the app for this setting to take effect
-            </Text>
-            <Button colorScheme="primary" size="sm" onClick={() => location.reload()}>
-              Reload App
-            </Button>
-          </>
-        )}
       </FormControl>
     </>
   );