degmods/degmods.com
6
1
Fork 0
Code Issues 34 Pull Requests Actions Packages Projects 3 Releases Wiki Activity

fix(notes): nip05 preview and regex issue

Browse Source
This commit is contained in:
en 2025-02-21 21:46:37 +01:00
parent e752ed2bb1
commit 6321c32adf
2 changed files with 84 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/components/Notes/NoteRender.tsx
View File

@ -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
const nostrNip5Mention = /(?:nostr:|@)([^\s]{1,64}@[^\s]+\.[^\s]{2,})/gi
/(npub|note|nprofile|nevent|naddr)1[qpzry9x8gf2tvdw0s3jn54khce6mua7l]{58,}/i
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)) {
const [nip05] = part.match(NIP05_REGEX) || []
return <ProfileLink key={index} nip05={nip05} />
} 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 part
return <Fragment key={key}>{part}</Fragment>
}
})
return _parts

24
src/components/ProfileSection.tsx
View File

@ -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 {
NDKEvent,
NDKSubscriptionCacheUsage,
NDKUser
} from '@nostr-dev-kit/ndk'
import { NDKEvent, NDKSubscriptionCacheUsage } 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>
}