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,28 +26,40 @@ 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
+      .filter((p) => typeof p !== 'undefined')
+      .map((part, index) => {
+        const key = `${index}-${part}`
         if (link.test(part)) {
           const [href] = part.match(link) || []
 
           if (href && isValidUrl(href)) {
             if (isValidImageUrl(href)) {
               // Image
-            return <img className='imgFeedRender' src={href} alt='' />
+              return (
+                <img key={key} className='imgFeedRender' src={href} alt='' />
+              )
             } else if (isValidVideoUrl(href)) {
               // Video
-            return <video className='videoFeedRender' src={href} controls />
+              return (
+                <video
+                  key={key}
+                  className='videoFeedRender'
+                  src={href}
+                  controls
+                />
+              )
             }
           }
 
           // Link
           return (
-          <a key={index} target='_blank' href={href}>
+            <a key={key} target='_blank' href={href}>
               {href}
             </a>
           )
@@ -61,16 +73,16 @@ export const NoteRender = ({ content }: NoteRenderProps) => {
 
             switch (decoded.type) {
               case 'nprofile':
-              return <ProfileLink key={index} pubkey={decoded.data.pubkey} />
+                return <ProfileLink key={key} pubkey={decoded.data.pubkey} />
               case 'npub':
-              return <ProfileLink key={index} pubkey={decoded.data} />
+                return <ProfileLink key={key} pubkey={decoded.data} />
               case 'note':
-              return <NoteWrapper key={index} noteEntity={encoded} />
+                return <NoteWrapper key={key} noteEntity={encoded} />
               case 'nevent':
-              return <NoteWrapper key={index} noteEntity={encoded} />
+                return <NoteWrapper key={key} noteEntity={encoded} />
               case 'naddr':
                 return (
-                <Fragment key={index}>
+                  <Fragment key={key}>
                     {handleNaddr(decoded.data, part)}
                   </Fragment>
                 )
@@ -81,11 +93,12 @@ export const NoteRender = ({ content }: NoteRenderProps) => {
           } catch (error) {
             return part
           }
-      } else if (NIP05_REGEX.test(part)) {
+        } else if (nostrNip05Mention.test(part)) {
-        const [nip05] = part.match(NIP05_REGEX) || []
+          const matches = nip05Entity.exec(part) || []
-        return <ProfileLink key={index} nip05={nip05} />
+          const nip05 = matches?.[1] || part
+          return <ProfileLink key={key} nip05={nip05} fallback={nip05} />
         } else {
-        return part
+          return <Fragment key={key}>{part}</Fragment>
         }
       })
     return _parts

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>
 }