fix(notes): nip05 preview and regex issue

src/components/Notes/NoteRender.tsx

@@ -6,19 +6,19 @@ import { Fragment } from 'react/jsx-runtime'
 import { BlogPreview } from './internal/BlogPreview'
 import { ModPreview } from './internal/ModPreview'
 import { NoteWrapper } from './internal/NoteWrapper'
-import { NIP05_REGEX } from 'nostr-tools/nip05'
 import { isValidImageUrl, isValidUrl, isValidVideoUrl } from 'utils'
 
 interface NoteRenderProps {
   content: string
 }
 const link =
-  /(?:https?:\/\/|www\.)(?:[a-zA-Z0-9.-]+\.[a-zA-Z]+(?::\d+)?)(?:[/?#][\p{L}\p{N}\p{M}&.-/?=#\-@%+_,:!~*]*)?/gu
+  /(?:https?:\/\/|www\.)(?:[a-zA-Z0-9.-]+\.[a-zA-Z]+(?::\d+)?)(?:[/?#][\p{L}\p{N}\p{M}&.-/?=#\-@%+_,:!~*]*)?/u
 const nostrMention =
-  /(?:nostr:|@)?(?:npub|note|nprofile|nevent|naddr)1[qpzry9x8gf2tvdw0s3jn54khce6mua7l]{58,}/gi
+  /(?:nostr:|@)?(?:npub|note|nprofile|nevent|naddr)1[qpzry9x8gf2tvdw0s3jn54khce6mua7l]{58,}/i
 const nostrEntity =
-  /(npub|note|nprofile|nevent|naddr)1[qpzry9x8gf2tvdw0s3jn54khce6mua7l]{58,}/gi
+  /(npub|note|nprofile|nevent|naddr)1[qpzry9x8gf2tvdw0s3jn54khce6mua7l]{58,}/i
-const nostrNip5Mention = /(?:nostr:|@)([^\s]{1,64}@[^\s]+\.[^\s]{2,})/gi
+const nostrNip05Mention = /(?:nostr:|@)[^\s]{1,64}@[^\s]+\.[^\s]{2,}/i
+const nip05Entity = /(?:nostr:|@)([^\s]{1,64}@[^\s]+\.[^\s]{2,})/i
 
 export const NoteRender = ({ content }: NoteRenderProps) => {
   const _content = useMemo(() => {
@@ -26,68 +26,81 @@ export const NoteRender = ({ content }: NoteRenderProps) => {
 
     const parts = content.split(
       new RegExp(
-        `(${link.source})|(${nostrMention.source})|${nostrNip5Mention.source}`,
+        `(${link.source})|(${nostrMention.source})|(${nostrNip05Mention.source})`,
         'gui'
       )
     )
 
-    const _parts = parts.map((part, index) => {
+    const _parts = parts
-      if (link.test(part)) {
+      .filter((p) => typeof p !== 'undefined')
-        const [href] = part.match(link) || []
+      .map((part, index) => {
+        const key = `${index}-${part}`
+        if (link.test(part)) {
+          const [href] = part.match(link) || []
 
-        if (href && isValidUrl(href)) {
+          if (href && isValidUrl(href)) {
-          if (isValidImageUrl(href)) {
+            if (isValidImageUrl(href)) {
-            // Image
+              // Image
-            return <img className='imgFeedRender' src={href} alt='' />
-          } else if (isValidVideoUrl(href)) {
-            // Video
-            return <video className='videoFeedRender' src={href} controls />
-          }
-        }
-
-        // Link
-        return (
-          <a key={index} target='_blank' href={href}>
-            {href}
-          </a>
-        )
-      } else if (nostrMention.test(part)) {
-        const [encoded] = part.match(nostrEntity) || []
-
-        if (!encoded) return part
-
-        try {
-          const decoded = nip19.decode(encoded)
-
-          switch (decoded.type) {
-            case 'nprofile':
-              return <ProfileLink key={index} pubkey={decoded.data.pubkey} />
-            case 'npub':
-              return <ProfileLink key={index} pubkey={decoded.data} />
-            case 'note':
-              return <NoteWrapper key={index} noteEntity={encoded} />
-            case 'nevent':
-              return <NoteWrapper key={index} noteEntity={encoded} />
-            case 'naddr':
               return (
-                <Fragment key={index}>
+                <img key={key} className='imgFeedRender' src={href} alt='' />
-                  {handleNaddr(decoded.data, part)}
-                </Fragment>
               )
-
+            } else if (isValidVideoUrl(href)) {
-            default:
+              // Video
-              return part
+              return (
+                <video
+                  key={key}
+                  className='videoFeedRender'
+                  src={href}
+                  controls
+                />
+              )
+            }
           }
-        } catch (error) {
+
-          return part
+          // Link
+          return (
+            <a key={key} target='_blank' href={href}>
+              {href}
+            </a>
+          )
+        } else if (nostrMention.test(part)) {
+          const [encoded] = part.match(nostrEntity) || []
+
+          if (!encoded) return part
+
+          try {
+            const decoded = nip19.decode(encoded)
+
+            switch (decoded.type) {
+              case 'nprofile':
+                return <ProfileLink key={key} pubkey={decoded.data.pubkey} />
+              case 'npub':
+                return <ProfileLink key={key} pubkey={decoded.data} />
+              case 'note':
+                return <NoteWrapper key={key} noteEntity={encoded} />
+              case 'nevent':
+                return <NoteWrapper key={key} noteEntity={encoded} />
+              case 'naddr':
+                return (
+                  <Fragment key={key}>
+                    {handleNaddr(decoded.data, part)}
+                  </Fragment>
+                )
+
+              default:
+                return part
+            }
+          } catch (error) {
+            return part
+          }
+        } else if (nostrNip05Mention.test(part)) {
+          const matches = nip05Entity.exec(part) || []
+          const nip05 = matches?.[1] || part
+          return <ProfileLink key={key} nip05={nip05} fallback={nip05} />
+        } else {
+          return <Fragment key={key}>{part}</Fragment>
         }
-      } else if (NIP05_REGEX.test(part)) {
+      })
-        const [nip05] = part.match(NIP05_REGEX) || []
-        return <ProfileLink key={index} nip05={nip05} />
-      } else {
-        return part
-      }
-    })
     return _parts
   }, [content])
 

src/components/ProfileSection.tsx

@@ -1,7 +1,7 @@
 import { FALLBACK_PROFILE_IMAGE } from 'constants.ts'
 import { Event, Filter, kinds, nip19, UnsignedEvent } from 'nostr-tools'
 import { QRCodeSVG } from 'qrcode.react'
-import { useEffect, useMemo, useState } from 'react'
+import { Fragment, useMemo, useState } from 'react'
 import { Link } from 'react-router-dom'
 import { toast } from 'react-toastify'
 import {
@@ -27,11 +27,7 @@ import {
 import { LoadingSpinner } from './LoadingSpinner'
 import { ZapPopUp } from './Zap'
 import placeholder from '../assets/img/DEGMods Placeholder Img.png'
-import {
+import { NDKEvent, NDKSubscriptionCacheUsage } from '@nostr-dev-kit/ndk'
-  NDKEvent,
-  NDKSubscriptionCacheUsage,
-  NDKUser
-} from '@nostr-dev-kit/ndk'
 import { useProfile } from 'hooks/useProfile'
 import { createPortal } from 'react-dom'
 
@@ -584,24 +580,26 @@ const FollowButton = ({ pubkey }: FollowButtonProps) => {
 type ProfileLinkProps = {
   pubkey?: string
   nip05?: string
+  fallback?: string
 }
-export const ProfileLink = ({ pubkey, nip05 }: ProfileLinkProps) => {
+export const ProfileLink = ({ pubkey, nip05, fallback }: ProfileLinkProps) => {
   const { ndk } = useNDKContext()
   const [hexPubkey, setHexPubkey] = useState<string>()
   const profile = useProfile(hexPubkey, {
     cacheUsage: NDKSubscriptionCacheUsage.PARALLEL
   })
-  useEffect(() => {
+
+  useDidMount(async () => {
     if (pubkey) {
       setHexPubkey(npubToHex(pubkey)!)
     } else if (nip05) {
-      NDKUser.fromNip05(nip05, ndk).then((user) => {
+      ndk.getUserFromNip05(nip05).then((user) => {
         if (user?.pubkey) {
           setHexPubkey(npubToHex(user.pubkey)!)
         }
       })
     }
-  }, [pubkey, nip05, ndk])
+  })
 
   const profileRoute = useMemo(() => {
     let nprofile: string | undefined
@@ -618,7 +616,7 @@ export const ProfileLink = ({ pubkey, nip05 }: ProfileLinkProps) => {
       log(true, LogType.Error, 'Failed to encode profile.', error)
     }
 
-    return nprofile ? getProfilePageRoute(nprofile) : appRoutes.home
+    return nprofile ? getProfilePageRoute(nprofile) : undefined
   }, [hexPubkey])
 
   const displayName = useMemo(() => {
@@ -627,5 +625,9 @@ export const ProfileLink = ({ pubkey, nip05 }: ProfileLinkProps) => {
     return displayName
   }, [hexPubkey, profile?.displayName, profile?.name])
 
+  if (!hexPubkey) return <Fragment>{fallback}</Fragment>
+
+  if (!profileRoute) return <Fragment>@{displayName}</Fragment>
+
   return <Link to={profileRoute}>@{displayName}</Link>
 }