add npub and note links

src/components/post/post-cc.tsx

@@ -1,22 +1,6 @@
-import { Link, Text } from "@chakra-ui/react";
+import { Text } from "@chakra-ui/react";
-import { Link as RouterLink } from "react-router-dom";
-import { Bech32Prefix, normalizeToBech32 } from "../../helpers/nip-19";
-import { getUserDisplayName } from "../../helpers/user-metadata";
-import { useUserMetadata } from "../../hooks/use-user-metadata";
 import { isPTag, NostrEvent } from "../../types/nostr-event";
-
+import { UserLink } from "../user-link";
-const CC = ({ pubkey }: { pubkey: string }) => {
-  const metadata = useUserMetadata(pubkey);
-
-  return (
-    <Link
-      as={RouterLink}
-      to={`/u/${normalizeToBech32(pubkey, Bech32Prefix.Pubkey)}`}
-    >
-      {getUserDisplayName(metadata, pubkey)}
-    </Link>
-  );
-};
 
 export const PostCC = ({ event }: { event: NostrEvent }) => {
   const hasCC = event.tags.some(isPTag);
@@ -27,7 +11,7 @@ export const PostCC = ({ event }: { event: NostrEvent }) => {
       <span>Replying to: </span>
       {event.tags
         .filter(isPTag)
-        .map((t) => t[1] && <CC key={t[1]} pubkey={t[1]} />)
+        .map((t) => t[1] && <UserLink key={t[1]} pubkey={t[1]} />)
         .reduce((arr, el, i, original) => {
           if (i !== original.length - 1) {
             return arr.concat([el, ", "]);

src/components/post/post-contents.tsx

@@ -2,6 +2,8 @@ import React from "react";
 import { AspectRatio, Box, Image, ImageProps, Link, useDisclosure } from "@chakra-ui/react";
 import { InlineInvoiceCard } from "../inline-invoice-card";
 import { TweetEmbed } from "../tweet-embed";
+import { UserLink } from "../user-link";
+import { normalizeToHex } from "../../helpers/nip-19";
 
 const BlurredImage = (props: ImageProps) => {
   const { isOpen, onToggle } = useDisclosure();
@@ -62,6 +64,19 @@ const embeds: { regexp: RegExp; render: (match: RegExpMatchArray, trusted: boole
       </Link>
     ),
   },
+  // npub1 and note1 links
+  {
+    regexp: /@?((npub1|note1)[qpzry9x8gf2tvdw0s3jn54khce6mua7l]{58})/m,
+    render: (match) => {
+      switch (match[2]) {
+        case "npub1":
+          const id = normalizeToHex(match[1]);
+          return id ? <UserLink color="blue.500" pubkey={id} /> : match[0];
+        default:
+          return match[0];
+      }
+    },
+  },
 ];
 
 export type PostContentsProps = {

src/components/user-link.tsx

@@ -0,0 +1,19 @@
+import { Link, LinkProps } from "@chakra-ui/react";
+import { Link as RouterLink } from "react-router-dom";
+import { Bech32Prefix, normalizeToBech32 } from "../helpers/nip-19";
+import { getUserDisplayName } from "../helpers/user-metadata";
+import { useUserMetadata } from "../hooks/use-user-metadata";
+
+export type UserLinkProps = LinkProps & {
+  pubkey: string;
+};
+
+export const UserLink = ({ pubkey, ...props }: UserLinkProps) => {
+  const metadata = useUserMetadata(pubkey);
+
+  return (
+    <Link as={RouterLink} to={`/u/${normalizeToBech32(pubkey, Bech32Prefix.Pubkey)}`} {...props}>
+      @{getUserDisplayName(metadata, pubkey)}
+    </Link>
+  );
+};