diff --git a/packages/app/src/Pages/Root.tsx b/packages/app/src/Pages/Root.tsx index af41fa00..6a5d85ba 100644 --- a/packages/app/src/Pages/Root.tsx +++ b/packages/app/src/Pages/Root.tsx @@ -13,6 +13,11 @@ import { TimelineSubject } from "Feed/TimelineFeed"; import messages from "./messages"; import { debounce } from "Util"; +interface RelayOption { + url: string; + paid: boolean; +} + export default function RootPage() { const { formatMessage } = useIntl(); const { loggedOut, publicKey: pubKey, follows, tags, relays, preferences } = useSelector((s: RootState) => s.login); @@ -40,8 +45,8 @@ export default function RootPage() { return RootTab.Posts; } }); - const [relay, setRelay] = useState(); - const [globalRelays, setGlobalRelays] = useState([]); + const [relay, setRelay] = useState(); + const [globalRelays, setGlobalRelays] = useState([]); const tagTabs = tags.map((t, idx) => { return { text: `#${t}`, value: idx + 3 }; }); @@ -66,12 +71,14 @@ export default function RootPage() { useEffect(() => { return debounce(1_000, () => { - const ret: string[] = []; + const ret: RelayOption[] = []; System.Sockets.forEach((v, k) => { - if (v.Info?.limitation?.payment_required === true) { - ret.push(k); - } + ret.push({ + url: k, + paid: v.Info?.limitation?.payment_required ?? false, + }); }); + ret.sort(a => (a.paid ? 1 : -1)); if (ret.length > 0 && !relay) { setRelay(ret[0]); @@ -93,6 +100,8 @@ export default function RootPage() { return { type: "pubkey", items: follows, discriminator: "follows" }; })(); + const paidRelays = globalRelays.filter(a => a.paid); + const publicRelays = globalRelays.filter(a => !a.paid); return ( <>
@@ -104,12 +113,23 @@ export default function RootPage() { description="Label for reading global feed from specific relays" />   - setRelay(globalRelays.find(a => a.url === e.target.value))}> + {paidRelays.length > 0 && ( + + {paidRelays.map(a => ( + + ))} + + )} + + {publicRelays.map(a => ( + + ))} +
)} @@ -121,7 +141,7 @@ export default function RootPage() { postsOnly={tab.value === RootTab.Posts.value} method={"TIME_RANGE"} window={undefined} - relay={isGlobal ? relay : undefined} + relay={isGlobal ? relay?.url : undefined} /> );