refactor: 🏗️

src/components/MailboxSetting/index.tsx

@@ -1,5 +1,4 @@
 import { Button } from '@/components/ui/button'
-import { relayListToMailboxRelay } from '@/lib/relay'
 import { normalizeUrl } from '@/lib/url'
 import { useNostr } from '@/providers/NostrProvider'
 import { TMailboxRelay, TMailboxRelayScope } from '@/types'
@@ -18,7 +17,7 @@ export default function MailboxSetting() {
   useEffect(() => {
     if (!relayList) return
 
-    setRelays(relayListToMailboxRelay(relayList))
+    setRelays(relayList.originalRelays)
   }, [relayList])
 
   if (!pubkey) {

src/components/OthersRelayList/index.tsx

@@ -4,7 +4,6 @@ import { Button } from '@/components/ui/button'
 import { useFetchRelayList } from '@/hooks'
 import { toRelay } from '@/lib/link'
 import { userIdToPubkey } from '@/lib/pubkey'
-import { relayListToMailboxRelay } from '@/lib/relay'
 import { simplifyUrl } from '@/lib/url'
 import { TMailboxRelay } from '@/types'
 import { ListPlus, Telescope } from 'lucide-react'
@@ -17,7 +16,6 @@ export default function OthersRelayList({ userId }: { userId: string }) {
   const { t } = useTranslation()
   const pubkey = useMemo(() => userIdToPubkey(userId), [userId])
   const { relayList, isFetching } = useFetchRelayList(pubkey)
-  const mailboxRelays = useMemo(() => relayListToMailboxRelay(relayList), [relayList])
 
   if (isFetching) {
     return <div className="text-center text-sm text-muted-foreground">{t('loading...')}</div>
@@ -25,7 +23,7 @@ export default function OthersRelayList({ userId }: { userId: string }) {
 
   return (
     <div className="space-y-2">
-      {mailboxRelays.map((relay, index) => (
+      {relayList.originalRelays.map((relay, index) => (
         <RelayItem key={`read-${relay.url}-${index}`} relay={relay} />
       ))}
     </div>

src/components/RelayInfo/index.tsx

@@ -20,8 +20,13 @@ export default function RelayInfo({ url }: { url: string }) {
           {relayInfo.name && <div className="text-2xl font-semibold">{relayInfo.name}</div>}
         </div>
         <RelayBadges relayInfo={relayInfo} />
-        {!!relayInfo.tags?.length &&
-          relayInfo.tags.map((tag) => <Badge variant="secondary">{tag}</Badge>)}
+        {!!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">
             {relayInfo.description}

src/lib/event.ts

@@ -81,10 +81,10 @@ export function getFollowingsFromFollowListEvent(event: Event) {
 
 export function getRelayListFromRelayListEvent(event?: Event) {
   if (!event) {
-    return { write: BIG_RELAY_URLS, read: BIG_RELAY_URLS }
+    return { write: BIG_RELAY_URLS, read: BIG_RELAY_URLS, originalRelays: [] }
   }
 
-  const relayList = { write: [], read: [] } as TRelayList
+  const relayList = { write: [], read: [], originalRelays: [] } as TRelayList
   event.tags.filter(tagNameEquals('r')).forEach(([, url, type]) => {
     if (!url || !isWebsocketUrl(url)) return
 
@@ -92,18 +92,22 @@ export function getRelayListFromRelayListEvent(event?: Event) {
     switch (type) {
       case 'write':
         relayList.write.push(normalizedUrl)
+        relayList.originalRelays.push({ url: normalizedUrl, scope: 'write' })
         break
       case 'read':
         relayList.read.push(normalizedUrl)
+        relayList.originalRelays.push({ url: normalizedUrl, scope: 'read' })
         break
       default:
         relayList.write.push(normalizedUrl)
         relayList.read.push(normalizedUrl)
+        relayList.originalRelays.push({ url: normalizedUrl, scope: 'both' })
     }
   })
   return {
     write: relayList.write.length ? relayList.write : BIG_RELAY_URLS,
-    read: relayList.read.length ? relayList.read : BIG_RELAY_URLS
+    read: relayList.read.length ? relayList.read : BIG_RELAY_URLS,
+    originalRelays: relayList.originalRelays
   }
 }
 

src/lib/relay.ts

@@ -1,4 +1,4 @@
-import { TMailboxRelay, TRelayInfo, TRelayList } from '@/types'
+import { TRelayInfo } from '@/types'
 
 export function checkAlgoRelay(relayInfo: TRelayInfo | undefined) {
   return relayInfo?.software === 'https://github.com/bitvora/algo-relay' // hardcode for now
@@ -7,16 +7,3 @@ export function checkAlgoRelay(relayInfo: TRelayInfo | undefined) {
 export function checkSearchRelay(relayInfo: TRelayInfo | undefined) {
   return relayInfo?.supported_nips?.includes(50)
 }
-
-export function relayListToMailboxRelay(relayList: TRelayList): TMailboxRelay[] {
-  const mailboxRelays: TMailboxRelay[] = relayList.read.map((url) => ({ url, scope: 'read' }))
-  relayList.write.forEach((url) => {
-    const item = mailboxRelays.find((r) => r.url === url)
-    if (item) {
-      item.scope = 'both'
-    } else {
-      mailboxRelays.push({ url, scope: 'write' })
-    }
-  })
-  return mailboxRelays
-}

src/services/client.service.ts

@@ -422,7 +422,11 @@ class ClientService extends EventTarget {
   async fetchRelayList(pubkey: string): Promise<TRelayList> {
     const event = await this.relayListEventDataLoader.load(pubkey)
     if (!event) {
-      return { write: BIG_RELAY_URLS, read: BIG_RELAY_URLS }
+      return {
+        write: BIG_RELAY_URLS,
+        read: BIG_RELAY_URLS,
+        originalRelays: []
+      }
     }
     return getRelayListFromRelayListEvent(event)
   }

src/types.ts

@@ -10,10 +10,15 @@ export type TProfile = {
   about?: string
   created_at?: number
 }
-
+export type TMailboxRelayScope = 'read' | 'write' | 'both'
+export type TMailboxRelay = {
+  url: string
+  scope: TMailboxRelayScope
+}
 export type TRelayList = {
   write: string[]
   read: string[]
+  originalRelays: TMailboxRelay[]
 }
 
 export type TRelayInfo = {
@@ -82,9 +87,3 @@ export type TFeedType = 'following' | 'relays' | 'temporary'
 export type TLanguage = 'en' | 'zh'
 
 export type TImageInfo = { url: string; blurHash?: string; dim?: { width: number; height: number } }
-
-export type TMailboxRelayScope = 'read' | 'write' | 'both'
-export type TMailboxRelay = {
-  url: string
-  scope: TMailboxRelayScope
-}