cleanup cache relay view

src/helpers/nostr/event.ts

@@ -199,7 +199,7 @@ export function parseCoordinate(a: string, requireD = false, silent = true): Cus
 }
 
 export function parseHardcodedNoteContent(event: NostrEvent) {
-  const json = safeJson(event.content, null);
+  const json = safeJson<NostrEvent>(event.content);
   if (!json) return null;
 
   // ensure the note has tags

src/views/relays/cache/components/citrine-relay-card.tsx

@@ -0,0 +1,46 @@
+import { useAsync } from "react-use";
+import { Button, Card, CardBody, CardHeader, Heading, Link, Text } from "@chakra-ui/react";
+
+import { NOSTR_RELAY_TRAY_URL, checkNostrRelayTray, localRelay } from "../../../../services/local-relay";
+
+export default function CitrineRelayCard() {
+  const { value: available, loading: checking } = useAsync(checkNostrRelayTray);
+
+  const enabled = localRelay?.url.startsWith(NOSTR_RELAY_TRAY_URL);
+  const enable = () => {
+    localStorage.setItem("localRelay", NOSTR_RELAY_TRAY_URL);
+    location.reload();
+  };
+
+  return (
+    <Card borderColor={enabled ? "primary.500" : undefined} variant="outline">
+      <CardHeader p="4" display="flex" gap="2" alignItems="center">
+        <Heading size="md">Citrine</Heading>
+        <Link color="blue.500" href="https://github.com/greenart7c3/Citrine" isExternal>
+          GitHub
+        </Link>
+        {available ? (
+          <Button size="sm" colorScheme="primary" ml="auto" isLoading={checking} onClick={enable} isDisabled={enabled}>
+            {enabled ? "Enabled" : "Enable"}
+          </Button>
+        ) : (
+          <Button
+            as={Link}
+            isExternal
+            href="https://github.com/greenart7c3/Citrine"
+            colorScheme="blue"
+            size="sm"
+            ml="auto"
+          >
+            Get the app
+          </Button>
+        )}
+      </CardHeader>
+      <CardBody p="4" pt="0">
+        <Text mb="2">A cool little app that runs a local relay in your phone</Text>
+        <Text>Maximum capacity: Unlimited</Text>
+        <Text>Performance: As fast as your phone</Text>
+      </CardBody>
+    </Card>
+  );
+}

src/views/relays/cache/components/enable-with-delete.tsx

@@ -0,0 +1,51 @@
+import { useCallback, useState } from "react";
+import {
+  Button,
+  ButtonGroup,
+  ButtonGroupProps,
+  IconButton,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+} from "@chakra-ui/react";
+
+import { ChevronDownIcon } from "../../../../components/icons";
+import Trash01 from "../../../../components/icons/trash-01";
+
+export default 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>
+  );
+}

src/views/relays/cache/components/hosted-relay-card.tsx

@@ -0,0 +1,27 @@
+import { Button, Card, CardBody, CardHeader, Heading, Text } from "@chakra-ui/react";
+
+import { localRelay } from "../../../../services/local-relay";
+
+export default function HostedRelayCard() {
+  const enabled = localRelay?.url.includes(location.host + "/local-relay");
+  const enable = () => {
+    localStorage.removeItem("localRelay");
+    location.reload();
+  };
+
+  return (
+    <Card borderColor={enabled ? "primary.500" : undefined} variant="outline">
+      <CardHeader p="4" display="flex" gap="2" alignItems="center">
+        <Heading size="md">Hosted Relay</Heading>
+        <Button size="sm" colorScheme="primary" ml="auto" onClick={enable} isDisabled={enabled}>
+          {enabled ? "Enabled" : "Enable"}
+        </Button>
+      </CardHeader>
+      <CardBody p="4" pt="0">
+        <Text mb="2">Your installation of noStrudel is setup with a local relay that can be used as a cache</Text>
+        <Text>Maximum capacity: Unknown</Text>
+        <Text>Performance: Unknown, but probably fast...</Text>
+      </CardBody>
+    </Card>
+  );
+}

src/views/relays/cache/components/internal-relay-card.tsx

@@ -0,0 +1,39 @@
+import { Button, Card, CardBody, CardFooter, CardHeader, Heading, Text } from "@chakra-ui/react";
+import { CacheRelay, clearDB } from "nostr-idb";
+import { Link as RouterLink } from "react-router-dom";
+
+import { localDatabase, localRelay } from "../../../../services/local-relay";
+import EnableWithDelete from "../components/enable-with-delete";
+
+export default function InternalRelayCard() {
+  const enabled = localRelay instanceof CacheRelay;
+  const enable = () => {
+    localStorage.setItem("localRelay", "nostr-idb://internal");
+    location.reload();
+  };
+
+  const wipe = async () => {
+    await clearDB(localDatabase);
+  };
+
+  return (
+    <Card borderColor={enabled ? "primary.500" : undefined} variant="outline">
+      <CardHeader p="4" display="flex" gap="2" alignItems="center">
+        <Heading size="md">Browser Cache</Heading>
+        <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>
+        <Text>Maximum capacity: 10k events</Text>
+        <Text>Performance: Usable, but limited by the browser</Text>
+      </CardBody>
+      {enabled && (
+        <CardFooter p="4" pt="0">
+          <Button size="sm" colorScheme="primary" ml="auto" as={RouterLink} to="/relays/cache/database">
+            Database Tools
+          </Button>
+        </CardFooter>
+      )}
+    </Card>
+  );
+}

src/views/relays/cache/components/memory-relay-card.tsx

@@ -0,0 +1,37 @@
+import { Button, Card, CardBody, CardFooter, CardHeader, Heading, Text } from "@chakra-ui/react";
+import { Link as RouterLink } from "react-router-dom";
+
+import { localRelay } from "../../../../services/local-relay";
+import MemoryRelay from "../../../../classes/memory-relay";
+
+export default function MemoryRelayCard() {
+  const enabled = localRelay instanceof MemoryRelay;
+  const enable = () => {
+    localStorage.setItem("localRelay", ":memory:");
+    location.reload();
+  };
+
+  return (
+    <Card borderColor={enabled ? "primary.500" : undefined} variant="outline">
+      <CardHeader p="4" display="flex" gap="2" alignItems="center">
+        <Heading size="md">In-memory Cache</Heading>
+        <Button size="sm" colorScheme="primary" ml="auto" onClick={enable} isDisabled={enabled}>
+          {enabled ? "Enabled" : "Enable"}
+        </Button>
+      </CardHeader>
+      <CardBody p="4" pt="0">
+        <Text mb="2">Stores all events in memory</Text>
+        <Text>Maximum capacity: Unlimited, until your system freezes</Text>
+        <Text>Performance: Very fast</Text>
+        <Text color="yellow.500">NOTE: All events are forgotten when you close the app</Text>
+      </CardBody>
+      {enabled && (
+        <CardFooter p="4" pt="0">
+          <Button size="sm" colorScheme="primary" ml="auto" as={RouterLink} to="/relays/cache/database">
+            Database Tools
+          </Button>
+        </CardFooter>
+      )}
+    </Card>
+  );
+}

src/views/relays/cache/components/no-relay-card.tsx

@@ -0,0 +1,27 @@
+import { Button, Card, CardBody, CardHeader, Heading, Text } from "@chakra-ui/react";
+import { localRelay } from "../../../../services/local-relay";
+
+export default function NoRelayCard() {
+  const enabled = localRelay === null;
+  const enable = () => {
+    localStorage.setItem("localRelay", ":none:");
+    location.reload();
+  };
+
+  return (
+    <Card borderColor={enabled ? "primary.500" : undefined} variant="outline">
+      <CardHeader p="4" display="flex" gap="2" alignItems="center">
+        <Heading size="md">No Cache</Heading>
+        <Button size="sm" colorScheme="primary" ml="auto" onClick={enable} isDisabled={enabled}>
+          {enabled ? "Enabled" : "Enable"}
+        </Button>
+      </CardHeader>
+      <CardBody p="4" pt="0">
+        <Text mb="2">No local relay, nothing is cached</Text>
+        <Text>Maximum capacity: 0</Text>
+        <Text>Performance: As fast as the relays your connecting to</Text>
+        <Text color="blue.500">NOTE: Profiles and Timelines are still cached in memory</Text>
+      </CardBody>
+    </Card>
+  );
+}

src/views/relays/cache/components/nostr-relay-tray-card.tsx

@@ -0,0 +1,52 @@
+import { useAsync } from "react-use";
+import { Button, Card, CardBody, CardHeader, Heading, Link, Text } from "@chakra-ui/react";
+
+import { NOSTR_RELAY_TRAY_URL, checkNostrRelayTray, localRelay } from "../../../../services/local-relay";
+
+export default function NostrRelayTrayCard() {
+  const { value: available, loading: checking } = useAsync(checkNostrRelayTray);
+
+  const enabled = localRelay?.url.startsWith(NOSTR_RELAY_TRAY_URL);
+  const enable = () => {
+    localStorage.setItem("localRelay", NOSTR_RELAY_TRAY_URL);
+    location.reload();
+  };
+
+  return (
+    <Card borderColor={enabled ? "primary.500" : undefined} variant="outline">
+      <CardHeader p="4" display="flex" gap="2" alignItems="center">
+        <Heading size="md">Nostr Relay Tray</Heading>
+        <Link color="blue.500" href="https://github.com/CodyTseng/nostr-relay-tray" isExternal>
+          GitHub
+        </Link>
+        {available || enabled ? (
+          <Button size="sm" colorScheme="primary" ml="auto" isLoading={checking} onClick={enable} isDisabled={enabled}>
+            {enabled ? "Enabled" : "Enable"}
+          </Button>
+        ) : (
+          <Button
+            as={Link}
+            isExternal
+            href="https://github.com/CodyTseng/nostr-relay-tray/releases"
+            colorScheme="blue"
+            size="sm"
+            ml="auto"
+          >
+            Get the app
+          </Button>
+        )}
+      </CardHeader>
+      <CardBody p="4" pt="0">
+        <Text mb="2">A cool little app that runs a local relay in your systems tray</Text>
+        <Text>Maximum capacity: Unlimited</Text>
+        <Text>Performance: As fast as your computer</Text>
+        {!available && (
+          <Text color="yellow.500">
+            If the app is running and the button still says "Get the app" the browser is probably blocking access to the
+            relay
+          </Text>
+        )}
+      </CardBody>
+    </Card>
+  );
+}

src/views/relays/cache/components/satellite-relay-card.tsx

@@ -0,0 +1,31 @@
+import { useAsync } from "react-use";
+import { Button, Card, CardBody, CardHeader, Heading, Text } from "@chakra-ui/react";
+
+import { localRelay } from "../../../../services/local-relay";
+
+export default function SatelliteRelayCard() {
+  const { value: relay } = useAsync(() => window.satellite!.getLocalRelay());
+  const { value: enabled } = useAsync(async () => localRelay?.url === relay, [localRelay?.url, relay]);
+  const enable = () => {
+    if (relay) {
+      localStorage.setItem("localRelay", relay);
+      location.reload();
+    }
+  };
+
+  return (
+    <Card borderColor={enabled ? "primary.500" : undefined} variant="outline">
+      <CardHeader p="4" display="flex" gap="2" alignItems="center">
+        <Heading size="md">Satellite Relay</Heading>
+        <Button size="sm" colorScheme="primary" ml="auto" onClick={enable} isDisabled={enabled}>
+          {enabled ? "Enabled" : "Enable"}
+        </Button>
+      </CardHeader>
+      <CardBody p="4" pt="0">
+        <Text mb="2">Satellite desktop exposes a local caching relay that can be used to store you events</Text>
+        <Text>Maximum capacity: Unlimited</Text>
+        <Text>Performance: As fast as your computer</Text>
+      </CardBody>
+    </Card>
+  );
+}

src/views/relays/cache/components/wasm-relay-card.tsx

@@ -0,0 +1,58 @@
+import { Button, Card, CardBody, CardFooter, CardHeader, Heading, Link, Text } from "@chakra-ui/react";
+import { Link as RouterLink } from "react-router-dom";
+
+import { localRelay } from "../../../../services/local-relay";
+import WasmRelay from "../../../../services/wasm-relay";
+import EnableWithDelete from "./enable-with-delete";
+
+export default function WasmRelayCard() {
+  const enabled = localRelay instanceof WasmRelay;
+  const enable = () => {
+    localStorage.setItem("localRelay", "nostr-idb://wasm-worker");
+    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>
+        <EnableWithDelete size="sm" ml="auto" enable={enable} enabled={enabled} wipe={wipe} />
+      </CardHeader>
+      <CardBody p="4" pt="0">
+        <Text mb="2">
+          Use{" "}
+          <Link
+            href="https://git.v0l.io/Kieran/snort/src/branch/main/packages/worker-relay"
+            isExternal
+            color="blue.500"
+          >
+            @snort/worker-relay
+          </Link>{" "}
+          with SQLite running in the browser.
+        </Text>
+        <Text>Maximum capacity: Unlimited</Text>
+        <Text>Performance: Slightly slower than Browser Cache</Text>
+        <Text color="yellow.500">NOTE: Can increase the initial load time of the app by ~2 seconds</Text>
+        <Text color="yellow.500">NOTE: Does not work well with multiple tabs</Text>
+      </CardBody>
+      {enabled && (
+        <CardFooter p="4" pt="0">
+          <Button size="sm" colorScheme="primary" ml="auto" as={RouterLink} to="/relays/cache/database">
+            Database Tools
+          </Button>
+        </CardFooter>
+      )}
+    </Card>
+  );
+}