feat: groups badge

src/components/OthersRelayList/index.tsx

@@ -1,7 +1,7 @@
 import { useSecondaryPage } from '@/PageManager'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
-import { useFetchRelayList } from '@/hooks/useFetchRelayList'
+import { useFetchRelayList } from '@/hooks'
 import { toRelay } from '@/lib/link'
 import { userIdToPubkey } from '@/lib/pubkey'
 import { relayListToMailboxRelay } from '@/lib/relay'

src/components/RelayIcon/index.tsx

@@ -1,4 +1,5 @@
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { useFetchRelayInfo } from '@/hooks'
 import { Server } from 'lucide-react'
 import { useMemo } from 'react'
 
@@ -11,14 +12,18 @@ export default function RelayIcon({
   className?: string
   iconSize?: number
 }) {
-  const icon = useMemo(() => {
+  const { relayInfo } = useFetchRelayInfo(url)
+  const iconUrl = useMemo(() => {
+    if (relayInfo?.icon) {
+      return relayInfo.icon
+    }
     const u = new URL(url)
     return `${u.protocol === 'wss:' ? 'https:' : 'http:'}//${u.host}/favicon.ico`
-  }, [url])
+  }, [url, relayInfo])
 
   return (
     <Avatar className={className}>
-      <AvatarImage src={icon} />
+      <AvatarImage src={iconUrl} />
       <AvatarFallback>
         <Server size={iconSize} />
       </AvatarFallback>

src/components/RelayInfo/index.tsx

@@ -1,5 +1,5 @@
 import { Badge } from '@/components/ui/badge'
-import { useFetchRelayInfos } from '@/hooks'
+import { useFetchRelayInfo } from '@/hooks'
 import { TRelayInfo } from '@/types'
 import { GitBranch, Mail, SquareCode } from 'lucide-react'
 import RelayIcon from '../RelayIcon'
@@ -7,10 +7,7 @@ import UserAvatar from '../UserAvatar'
 import Username from '../Username'
 
 export default function RelayInfo({ url }: { url: string }) {
-  const {
-    relayInfos: [relayInfo],
-    isFetching
-  } = useFetchRelayInfos([url])
+  const { relayInfo, isFetching } = useFetchRelayInfo(url)
   if (isFetching || !relayInfo) {
     return null
   }
@@ -90,6 +87,9 @@ function RelayBadges({ relayInfo }: { relayInfo: TRelayInfo }) {
       {relayInfo.limitation?.payment_required && (
         <Badge className="bg-orange-400 hover:bg-orange-400/80">Payment</Badge>
       )}
+      {relayInfo.supported_nips?.includes(29) && (
+        <Badge className="bg-blue-400 hover:bg-blue-400/80">Groups</Badge>
+      )}
     </div>
   )
 }

src/components/RelaySetsSetting/RelayUrl.tsx

@@ -1,6 +1,6 @@
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
-import { useFetchRelayInfos } from '@/hooks'
+import { useFetchRelayInfo } from '@/hooks'
 import { isWebsocketUrl, normalizeUrl } from '@/lib/url'
 import { useRelaySets } from '@/providers/RelaySetsProvider'
 import { CircleX, SearchCheck } from 'lucide-react'
@@ -77,9 +77,7 @@ export default function RelayUrls({ relaySetId }: { relaySetId: string }) {
 
 function RelayUrl({ url, onRemove }: { url: string; onRemove: () => void }) {
   const { t } = useTranslation()
-  const {
-    relayInfos: [relayInfo]
-  } = useFetchRelayInfos([url])
+  const { relayInfo } = useFetchRelayInfo(url)
 
   return (
     <div className="flex items-center justify-between">

src/hooks/index.tsx

@@ -3,6 +3,8 @@ export * from './useFetchEvent'
 export * from './useFetchFollowings'
 export * from './useFetchNip05'
 export * from './useFetchProfile'
+export * from './useFetchRelayInfo'
 export * from './useFetchRelayInfos'
+export * from './useFetchRelayList'
 export * from './useSearchParams'
 export * from './useSearchProfiles'

src/hooks/useFetchRelayInfo.tsx

@@ -0,0 +1,30 @@
+import client from '@/services/client.service'
+import { TRelayInfo } from '@/types'
+import { useEffect, useState } from 'react'
+
+export function useFetchRelayInfo(url: string) {
+  const [isFetching, setIsFetching] = useState(true)
+  const [relayInfo, setRelayInfo] = useState<TRelayInfo | undefined>(undefined)
+
+  useEffect(() => {
+    const fetchRelayInfos = async () => {
+      setIsFetching(true)
+      const timer = setTimeout(() => {
+        setIsFetching(false)
+      }, 5000)
+      try {
+        const [relayInfo] = await client.fetchRelayInfos([url])
+        setRelayInfo(relayInfo)
+      } catch (err) {
+        console.error(err)
+      } finally {
+        clearTimeout(timer)
+        setIsFetching(false)
+      }
+    }
+
+    fetchRelayInfos()
+  }, [url])
+
+  return { relayInfo, isFetching }
+}