feat: add recommended relays to home page

src/constants.ts

@@ -10,6 +10,8 @@ export const DEFAULT_FAVORITE_RELAYS = [
   'wss://news.utxo.one/'
 ]
 
+export const RECOMMENDED_RELAYS = DEFAULT_FAVORITE_RELAYS.concat(['wss://yabu.me/'])
+
 export const StorageKey = {
   VERSION: 'version',
   THEME_SETTING: 'themeSetting',

src/pages/secondary/HomePage/index.tsx

@@ -1,38 +1,34 @@
 import { usePrimaryPage, useSecondaryPage } from '@/PageManager'
 import RelaySimpleInfo from '@/components/RelaySimpleInfo'
 import { Button } from '@/components/ui/button'
+import { RECOMMENDED_RELAYS } from '@/constants'
 import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
 import { toRelay } from '@/lib/link'
 import relayInfoService from '@/services/relay-info.service'
 import { TNip66RelayInfo } from '@/types'
-import { ArrowRight, RefreshCcw, Server } from 'lucide-react'
+import { ArrowRight, Server } from 'lucide-react'
-import { forwardRef, useCallback, useEffect, useState } from 'react'
+import { forwardRef, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 const HomePage = forwardRef(({ index }: { index?: number }, ref) => {
   const { t } = useTranslation()
   const { navigate } = usePrimaryPage()
   const { push } = useSecondaryPage()
-  const [randomRelayInfos, setRandomRelayInfos] = useState<TNip66RelayInfo[]>([])
+  const [recommendedRelayInfos, setRecommendedRelayInfos] = useState<TNip66RelayInfo[]>([])
-
-  const refresh = useCallback(async () => {
-    const relayInfos = await relayInfoService.getRandomRelayInfos(10)
-    const relayUrls = new Set<string>()
-    const uniqueRelayInfos = relayInfos.filter((relayInfo) => {
-      if (relayUrls.has(relayInfo.url)) {
-        return false
-      }
-      relayUrls.add(relayInfo.url)
-      return true
-    })
-    setRandomRelayInfos(uniqueRelayInfos)
-  }, [])
 
   useEffect(() => {
-    refresh()
+    const init = async () => {
+      try {
+        const relays = await relayInfoService.getRelayInfos(RECOMMENDED_RELAYS)
+        setRecommendedRelayInfos(relays.filter(Boolean) as TNip66RelayInfo[])
+      } catch (error) {
+        console.error('Failed to fetch recommended relays:', error)
+      }
+    }
+    init()
   }, [])
 
-  if (!randomRelayInfos.length) {
+  if (!recommendedRelayInfos.length) {
     return (
       <SecondaryPageLayout ref={ref} index={index} hideBackButton>
         <div className="text-muted-foreground w-full h-screen flex items-center justify-center">
@@ -49,20 +45,14 @@ const HomePage = forwardRef(({ index }: { index?: number }, ref) => {
       title={
         <>
           <Server />
-          <div>{t('Random Relays')}</div>
+          <div>{t('Recommended relays')}</div>
         </>
       }
-      controls={
-        <Button variant="ghost" className="h-10 [&_svg]:size-3" onClick={() => refresh()}>
-          <RefreshCcw />
-          <div>{t('randomRelaysRefresh')}</div>
-        </Button>
-      }
       hideBackButton
     >
       <div className="px-4">
         <div className="grid grid-cols-2 gap-3">
-          {randomRelayInfos.map((relayInfo) => (
+          {recommendedRelayInfos.map((relayInfo) => (
             <RelaySimpleInfo
               key={relayInfo.url}
               className="clickable h-auto p-3 rounded-lg border"