Add option to wipe wasm relay database

.changeset/clean-rabbits-complain.md

@@ -0,0 +1,5 @@
+---
+"nostrudel": minor
+---
+
+Add option to wipe wasm relay database

package.json

@@ -37,7 +37,7 @@
     "@noble/hashes": "^1.3.2",
     "@noble/secp256k1": "^1.7.0",
     "@scure/base": "^1.1.6",
-    "@snort/worker-relay": "^1.2.0",
+    "@snort/worker-relay": "^1.3.0",
     "@uiw/codemirror-theme-github": "^4.23.0",
     "@uiw/react-codemirror": "^4.23.0",
     "@webscopeio/react-textarea-autocomplete": "^4.9.2",

src/services/wasm-relay/index.ts

@@ -87,6 +87,10 @@ export default class WasmRelay implements SimpleRelay {
       this.subscriptions.delete(id);
     }
   }
+
+  wipe() {
+    return this.worker?.wipe();
+  }
 }
 
 class WasmRelaySubscription {

src/views/relays/cache/database/wasm.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useState } from "react";
 import {
+  Button,
   ButtonGroup,
   Card,
   Flex,
@@ -77,6 +78,18 @@ export default function WasmDatabasePage() {
     [worker, refresh],
   );
 
+  const [deleting, setDeleting] = useState(false);
+  const deleteDatabase = useCallback(async () => {
+    try {
+      setDeleting(true);
+      if (localRelay instanceof WasmRelay) {
+        await localRelay.wipe();
+        location.reload();
+      }
+    } catch (error) {}
+    setDeleting(false);
+  }, []);
+
   useEffect(() => {
     refresh();
   }, []);
@@ -88,6 +101,9 @@ export default function WasmDatabasePage() {
       <ButtonGroup flexWrap="wrap">
         <ImportEventsButton onLoad={importEvents} />
         <ExportEventsButton getEvents={exportEvents} />
+        <Button colorScheme="red" onClick={deleteDatabase} isLoading={deleting}>
+          Delete database
+        </Button>
       </ButtonGroup>
 
       <FormControl>

src/views/relays/cache/index.tsx

@@ -1,7 +1,11 @@
+import { useCallback, useState } from "react";
 import { useAsync } from "react-use";
 import {
   Box,
   Button,
+  ButtonGroup,
+  ButtonGroupProps,
+  ButtonProps,
   Card,
   CardBody,
   CardFooter,
@@ -9,7 +13,12 @@ import {
   Divider,
   Flex,
   Heading,
+  IconButton,
   Link,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
   Text,
   useDisclosure,
 } from "@chakra-ui/react";
@@ -18,9 +27,48 @@ import { Link as RouterLink } from "react-router-dom";
 
 import BackButton from "../../../components/router/back-button";
 import { NOSTR_RELAY_TRAY_URL, checkNostrRelayTray, localRelay } from "../../../services/local-relay";
-import WasmRelay from "../../../services/wasm-relay";
 import { ChevronDownIcon, ChevronUpIcon } from "../../../components/icons";
+import WasmRelay from "../../../services/wasm-relay";
 import MemoryRelay from "../../../classes/memory-relay";
+import Trash01 from "../../../components/icons/trash-01";
+import { deleteDatabase } from "../../../services/db";
+
+function EnableWithDelete({
+  enable,
+  enabled,
+  wipe,
+  ...props
+}: Omit<ButtonGroupProps, "children"> & {
+  enable: () => void;
+  enabled: boolean;
+  wipe: () => Promise<void>;
+}) {
+  const [deleting, setDeleting] = useState(false);
+  const wipeDatabase = useCallback(async () => {
+    try {
+      setDeleting(true);
+      await wipe();
+      location.reload();
+    } catch (error) {}
+    setDeleting(false);
+  }, []);
+
+  return (
+    <ButtonGroup isAttached {...props}>
+      <Button colorScheme="primary" onClick={enable} isDisabled={enabled}>
+        {enabled ? "Enabled" : "Enable"}
+      </Button>
+      <Menu>
+        <MenuButton as={IconButton} icon={<ChevronDownIcon />} aria-label="More options" />
+        <MenuList>
+          <MenuItem icon={<Trash01 />} color="red.500" onClick={wipeDatabase}>
+            Clear Database
+          </MenuItem>
+        </MenuList>
+      </Menu>
+    </ButtonGroup>
+  );
+}
 
 function InternalRelay() {
   const enabled = localRelay instanceof CacheRelay;
@@ -29,13 +77,15 @@ function InternalRelay() {
     location.reload();
   };
 
+  const wipe = async () => {
+    await deleteDatabase();
+  };
+
   return (
     <Card borderColor={enabled ? "primary.500" : undefined} variant="outline">
       <CardHeader p="4" display="flex" gap="2" alignItems="center">
         <Heading size="md">Browser Cache</Heading>
-        <Button size="sm" colorScheme="primary" ml="auto" onClick={enable} isDisabled={enabled}>
-          {enabled ? "Enabled" : "Enable"}
-        </Button>
+        <EnableWithDelete size="sm" ml="auto" enable={enable} enabled={enabled} wipe={wipe} />
       </CardHeader>
       <CardBody p="4" pt="0">
         <Text mb="2">Use the browsers built-in database to cache events.</Text>
@@ -60,13 +110,22 @@ function WasmWorkerRelay() {
     location.reload();
   };
 
+  const wipe = async () => {
+    if (localRelay instanceof WasmRelay) {
+      await localRelay.wipe();
+    } else {
+      // import and delete database
+      console.log("Importing worker to wipe database");
+      const { default: worker } = await import("../../../services/wasm-relay/worker");
+      await worker.wipe();
+    }
+  };
+
   return (
     <Card borderColor={enabled ? "primary.500" : undefined} variant="outline">
       <CardHeader p="4" display="flex" gap="2" alignItems="center">
         <Heading size="md">Internal SQLite Cache</Heading>
-        <Button size="sm" colorScheme="primary" ml="auto" onClick={enable} isDisabled={enabled}>
-          {enabled ? "Enabled" : "Enable"}
-        </Button>
+        <EnableWithDelete size="sm" ml="auto" enable={enable} enabled={enabled} wipe={wipe} />
       </CardHeader>
       <CardBody p="4" pt="0">
         <Text mb="2">
@@ -112,7 +171,7 @@ function NostrRelayTray() {
         <Link color="blue.500" href="https://github.com/CodyTseng/nostr-relay-tray" isExternal>
           GitHub
         </Link>
-        {available ? (
+        {available || enabled ? (
           <Button size="sm" colorScheme="primary" ml="auto" isLoading={checking} onClick={enable} isDisabled={enabled}>
             {enabled ? "Enabled" : "Enable"}
           </Button>

yarn.lock

@@ -2815,10 +2815,10 @@
     "@noble/hashes" "~1.3.2"
     "@scure/base" "~1.1.4"
 
-"@snort/worker-relay@^1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@snort/worker-relay/-/worker-relay-1.2.0.tgz#e8affd9b19f5929ab23cf7d8f1810e884ce955f7"
-  integrity sha512-xq4R193So4CJt2JlyuLQRhPRUsl6VhWplx9tndwD8IZ41DPxv2sx2MR4MYnBhwNEo3atwyp3fgfgcHfY1PrWeg==
+"@snort/worker-relay@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@snort/worker-relay/-/worker-relay-1.3.0.tgz#f6adf0e4d561f4cad3a15233b07c73d0a348e3c3"
+  integrity sha512-o6RuXCgwF4jG6lLATGTHXRRB1kllZMp7WnpMA4GzaY5fAI6uixSXFFna76WPwte6TMQ04uDM25hpByZrs2/L5Q==
   dependencies:
     "@sqlite.org/sqlite-wasm" "^3.46.1-build3"
     eventemitter3 "^5.0.1"