128 lines
4.3 KiB
TypeScript
128 lines
4.3 KiB
TypeScript
import { Badge } from '@/components/ui/badge'
|
|
import { useFetchRelayInfo } from '@/hooks'
|
|
import { normalizeHttpUrl } from '@/lib/url'
|
|
import { GitBranch, Mail, SquareCode } from 'lucide-react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import RelayBadges from '../RelayBadges'
|
|
import RelayIcon from '../RelayIcon'
|
|
import UserAvatar from '../UserAvatar'
|
|
import Username from '../Username'
|
|
|
|
export default function RelayInfo({ url }: { url: string }) {
|
|
const { t } = useTranslation()
|
|
const { relayInfo, isFetching } = useFetchRelayInfo(url)
|
|
if (isFetching || !relayInfo) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<div className="px-4 space-y-4 mb-2">
|
|
<div className="space-y-2">
|
|
<div className="flex gap-2 items-center">
|
|
<RelayIcon url={url} className="w-8 h-8" />
|
|
<div className="text-2xl font-semibold truncate select-text">
|
|
{relayInfo.name || relayInfo.shortUrl}
|
|
</div>
|
|
</div>
|
|
<RelayBadges relayInfo={relayInfo} />
|
|
{!!relayInfo.tags?.length && (
|
|
<div className="flex gap-2">
|
|
{relayInfo.tags.map((tag) => (
|
|
<Badge variant="secondary">{tag}</Badge>
|
|
))}
|
|
</div>
|
|
)}
|
|
{relayInfo.description && (
|
|
<div className="text-wrap break-words whitespace-pre-wrap mt-2 select-text">
|
|
{relayInfo.description}
|
|
</div>
|
|
)}
|
|
</div>
|
|
{!!relayInfo.supported_nips?.length && (
|
|
<div className="space-y-2">
|
|
<div className="text-sm font-semibold text-muted-foreground">{t('Supported NIPs')}</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
{relayInfo.supported_nips
|
|
.sort((a, b) => a - b)
|
|
.map((nip) => (
|
|
<Badge
|
|
key={nip}
|
|
variant="secondary"
|
|
className="clickable"
|
|
onClick={() =>
|
|
window.open(
|
|
`https://github.com/nostr-protocol/nips/blob/master/${formatNip(nip)}.md`
|
|
)
|
|
}
|
|
>
|
|
{formatNip(nip)}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
{relayInfo.payments_url && (
|
|
<div className="space-y-2">
|
|
<div className="text-sm font-semibold text-muted-foreground">{t('Payment page')}:</div>
|
|
<a
|
|
href={normalizeHttpUrl(relayInfo.payments_url)}
|
|
target="_blank"
|
|
className="hover:underline text-primary select-text"
|
|
>
|
|
{relayInfo.payments_url}
|
|
</a>
|
|
</div>
|
|
)}
|
|
<div className="flex flex-wrap gap-4">
|
|
{relayInfo.pubkey && (
|
|
<div className="space-y-2 flex-1">
|
|
<div className="text-sm font-semibold text-muted-foreground">{t('Operator')}</div>
|
|
<div className="flex gap-2 items-center">
|
|
<UserAvatar userId={relayInfo.pubkey} size="small" />
|
|
<Username userId={relayInfo.pubkey} className="font-semibold" />
|
|
</div>
|
|
</div>
|
|
)}
|
|
{relayInfo.contact && (
|
|
<div className="space-y-2 flex-1">
|
|
<div className="text-sm font-semibold text-muted-foreground">{t('Contact')}</div>
|
|
<div className="flex gap-2 items-center font-semibold select-text">
|
|
<Mail />
|
|
{relayInfo.contact}
|
|
</div>
|
|
</div>
|
|
)}
|
|
{relayInfo.software && (
|
|
<div className="space-y-2 flex-1">
|
|
<div className="text-sm font-semibold text-muted-foreground">{t('Software')}</div>
|
|
<div className="flex gap-2 items-center font-semibold select-text">
|
|
<SquareCode />
|
|
{formatSoftware(relayInfo.software)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
{relayInfo.version && (
|
|
<div className="space-y-2 flex-1">
|
|
<div className="text-sm font-semibold text-muted-foreground">{t('Version')}</div>
|
|
<div className="flex gap-2 items-center font-semibold select-text">
|
|
<GitBranch />
|
|
{relayInfo.version}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function formatSoftware(software: string) {
|
|
const parts = software.split('/')
|
|
return parts[parts.length - 1]
|
|
}
|
|
|
|
function formatNip(nip: number) {
|
|
if (nip < 10) {
|
|
return `0${nip}`
|
|
}
|
|
return `${nip}`
|
|
}
|