make all note links nevent

.changeset/fuzzy-pumpkins-allow.md

@@ -0,0 +1,5 @@
+---
+"nostrudel": minor
+---
+
+Make all note links nevent

src/components/note-link.tsx

@@ -1,18 +1,31 @@
 import { Link, LinkProps } from "@chakra-ui/react";
 import { Link as RouterLink } from "react-router-dom";
-import { Bech32Prefix, normalizeToBech32 } from "../helpers/nip19";
 import { truncatedId } from "../helpers/nostr-event";
+import { nip19 } from "nostr-tools";
+import { getEventRelays } from "../services/event-relays";
+import relayScoreboardService from "../services/relay-scoreboard";
+import { useMemo } from "react";
+
+export function getSharableEncodedNoteId(eventId: string) {
+  const relays = getEventRelays(eventId).value;
+  const ranked = relayScoreboardService.getRankedRelays(relays);
+  const onlyTwo = ranked.slice(0, 2);
+
+  if (onlyTwo.length > 0) {
+    return nip19.neventEncode({ id: eventId, relays: onlyTwo });
+  } else return nip19.noteEncode(eventId);
+}
 
 export type NoteLinkProps = LinkProps & {
   noteId: string;
 };
 
-export const NoteLink = ({ noteId, ...props }: NoteLinkProps) => {
-  const note1 = normalizeToBech32(noteId, Bech32Prefix.Note) ?? noteId;
+export const NoteLink = ({ children, noteId, color = "blue.500", ...props }: NoteLinkProps) => {
+  const encoded = useMemo(() => getSharableEncodedNoteId(noteId), [noteId]);
 
   return (
-    <Link as={RouterLink} to={`/n/${note1}`} color="blue.500" {...props}>
-      {truncatedId(note1)}
+    <Link as={RouterLink} to={`/n/${encoded}`} color={color} {...props}>
+      {children || truncatedId(nip19.noteEncode(noteId))}
     </Link>
   );
 };

src/components/note/embeded-note.tsx

@@ -12,6 +12,7 @@ import useSubject from "../../hooks/use-subject";
 import appSettings from "../../services/app-settings";
 import EventVerificationIcon from "../event-verification-icon";
 import { TrustProvider } from "./trust";
+import { NoteLink } from "../note-link";
 
 export default function EmbeddedNote({ note }: { note: NostrEvent }) {
   const { showSignatureVerification } = useSubject(appSettings);
@@ -29,9 +30,9 @@ export default function EmbeddedNote({ note }: { note: NostrEvent }) {
             <UserDnsIdentityIcon pubkey={note.pubkey} onlyIcon />
             <Flex grow={1} />
             {showSignatureVerification && <EventVerificationIcon event={note} />}
-            <Link as={RouterLink} to={`/n/${normalizeToBech32(note.id, Bech32Prefix.Note)}`} whiteSpace="nowrap">
+            <NoteLink noteId={note.id} color="current" whiteSpace="nowrap">
               {moment(convertTimestampToDate(note.created_at)).fromNow()}
-            </Link>
+            </NoteLink>
           </Flex>
         </CardHeader>
         <CardBody p="0">

src/components/note/index.tsx

@@ -1,5 +1,4 @@
 import React, { useMemo } from "react";
-import { Link as RouterLink } from "react-router-dom";
 import moment from "moment";
 import {
   Box,
@@ -16,7 +15,6 @@ import {
 } from "@chakra-ui/react";
 import { NostrEvent } from "../../types/nostr-event";
 import { UserAvatarLink } from "../user-avatar-link";
-import { Bech32Prefix, normalizeToBech32 } from "../../helpers/nip19";
 
 import { NoteMenu } from "./note-menu";
 import { NoteRelays } from "./note-relays";
@@ -36,6 +34,7 @@ import { QuoteRepostButton } from "./buttons/quote-repost-button";
 import { ExternalLinkIcon } from "../icons";
 import NoteContentWithWarning from "./note-content-with-warning";
 import { TrustProvider } from "./trust";
+import { NoteLink } from "../note-link";
 
 export type NoteProps = {
   event: NostrEvent;
@@ -63,9 +62,9 @@ export const Note = React.memo(({ event, maxHeight, variant = "outline" }: NoteP
               <UserDnsIdentityIcon pubkey={event.pubkey} onlyIcon />
               <Flex grow={1} />
               {showSignatureVerification && <EventVerificationIcon event={event} />}
-              <Link as={RouterLink} to={`/n/${normalizeToBech32(event.id, Bech32Prefix.Note)}`} whiteSpace="nowrap">
+              <NoteLink noteId={event.id} whiteSpace="nowrap" color="current">
                 {moment(convertTimestampToDate(event.created_at)).fromNow()}
-              </Link>
+              </NoteLink>
             </Flex>
           </CardHeader>
           <CardBody p="0">

src/components/note/note-menu.tsx

@@ -13,7 +13,6 @@ import {
   useToast,
 } from "@chakra-ui/react";
 import { useCopyToClipboard } from "react-use";
-import { nip19 } from "nostr-tools";
 
 import { Bech32Prefix, normalizeToBech32 } from "../../helpers/nip19";
 import { NostrEvent } from "../../types/nostr-event";
@@ -21,8 +20,6 @@ import { MenuIconButton, MenuIconButtonProps } from "../menu-icon-button";
 
 import { ClipboardIcon, CodeIcon, LikeIcon, RepostIcon, TrashIcon } from "../icons";
 import NoteReactionsModal from "./note-zaps-modal";
-import { getEventRelays } from "../../services/event-relays";
-import relayScoreboardService from "../../services/relay-scoreboard";
 import NoteDebugModal from "../debug-modals/note-debug-modal";
 import { useCurrentAccount } from "../../hooks/use-current-account";
 import { useCallback, useState } from "react";
@@ -31,16 +28,7 @@ import { buildDeleteEvent } from "../../helpers/nostr-event";
 import signingService from "../../services/signing";
 import { nostrPostAction } from "../../classes/nostr-post-action";
 import clientRelaysService from "../../services/client-relays";
-
-function getShareLink(eventId: string) {
-  const relays = getEventRelays(eventId).value;
-  const ranked = relayScoreboardService.getRankedRelays(relays);
-  const onlyTwo = ranked.slice(0, 2);
-
-  if (onlyTwo.length > 0) {
-    return nip19.neventEncode({ id: eventId, relays: onlyTwo });
-  } else return nip19.noteEncode(eventId);
-}
+import { getSharableEncodedNoteId } from "../note-link";
 
 export const NoteMenu = ({ event, ...props }: { event: NostrEvent } & Omit<MenuIconButtonProps, "children">) => {
   const account = useCurrentAccount();
@@ -80,7 +68,7 @@ export const NoteMenu = ({ event, ...props }: { event: NostrEvent } & Omit<MenuI
         <MenuItem onClick={reactionsModal.onOpen} icon={<LikeIcon />}>
           Zaps/Reactions
         </MenuItem>
-        <MenuItem onClick={() => copyToClipboard("nostr:" + getShareLink(event.id))} icon={<RepostIcon />}>
+        <MenuItem onClick={() => copyToClipboard("nostr:" + getSharableEncodedNoteId(event.id))} icon={<RepostIcon />}>
           Copy Share Link
         </MenuItem>
         {noteId && (

src/views/notifications/index.tsx

@@ -9,27 +9,24 @@ import { useReadRelayUrls } from "../../hooks/use-client-relays";
 import { useCurrentAccount } from "../../hooks/use-current-account";
 import { useTimelineLoader } from "../../hooks/use-timeline-loader";
 import { NostrEvent } from "../../types/nostr-event";
+import { NoteLink } from "../../components/note-link";
 
-const Kind1Notification = ({ event }: { event: NostrEvent }) => {
-  const navigate = useNavigate();
-
-  return (
-    <Card size="sm" variant="outline">
-      <CardHeader>
-        <Flex gap="4" alignItems="center">
-          <UserAvatar pubkey={event.pubkey} size="sm" />
-          <UserLink pubkey={event.pubkey} />
-          <Button onClick={() => navigate(`/n/${event.id}`)} ml="auto" variant="link">
-            {moment(convertTimestampToDate(event.created_at)).fromNow()}
-          </Button>
-        </Flex>
-      </CardHeader>
-      <CardBody pt={0}>
-        <Text>{event.content.replace("\n", " ").slice(0, 64)}</Text>
-      </CardBody>
-    </Card>
-  );
-};
+const Kind1Notification = ({ event }: { event: NostrEvent }) => (
+  <Card size="sm" variant="outline">
+    <CardHeader>
+      <Flex gap="4" alignItems="center">
+        <UserAvatar pubkey={event.pubkey} size="sm" />
+        <UserLink pubkey={event.pubkey} />
+        <NoteLink noteId={event.id} color="current" ml="auto">
+          {moment(convertTimestampToDate(event.created_at)).fromNow()}
+        </NoteLink>
+      </Flex>
+    </CardHeader>
+    <CardBody pt={0}>
+      <Text>{event.content.replace("\n", " ").slice(0, 64)}</Text>
+    </CardBody>
+  </Card>
+);
 
 const NotificationItem = memo(({ event }: { event: NostrEvent }) => {
   if (event.kind === 1) {