feat: read global from specific (paid) relays

src/Element/Timeline.tsx

@@ -23,6 +23,7 @@ export interface TimelineProps {
   method: "TIME_RANGE" | "LIMIT_UNTIL";
   ignoreModeration?: boolean;
   window?: number;
+  relay?: string;
 }
 
 /**
@@ -34,11 +35,13 @@ export default function Timeline({
   method,
   ignoreModeration = false,
   window,
+  relay,
 }: TimelineProps) {
   const { muted, isMuted } = useModeration();
   const { main, related, latest, parent, loadMore, showLatest } = useTimelineFeed(subject, {
     method,
     window: window,
+    relay,
   });
 
   const filterPosts = useCallback(

src/Feed/Subscription.ts

@@ -13,6 +13,7 @@ export type NoteStore = {
 export type UseSubscriptionOptions = {
   leaveOpen: boolean;
   cache: boolean;
+  relay?: string;
 };
 
 interface ReducerArg {
@@ -130,10 +131,16 @@ export default function useSubscription(
         });
       };
 
-      console.debug("Adding sub: ", subDebounce.ToObject());
-      System.AddSubscription(subDebounce);
+      const subObj = subDebounce.ToObject();
+      console.debug("Adding sub: ", subObj);
+      if (options?.relay) {
+        System.AddSubscriptionToRelay(subDebounce, options.relay);
+      } else {
+        System.AddSubscription(subDebounce);
+      }
       return () => {
-        console.debug("Removing sub: ", subDebounce.ToObject());
+        console.debug("Removing sub: ", subObj);
+        subDebounce.OnEvent = () => undefined;
         System.RemoveSubscription(subDebounce.Id);
       };
     }

src/Feed/TimelineFeed.ts

@@ -11,6 +11,7 @@ import { UserPreferences } from "State/Login";
 export interface TimelineFeedOptions {
   method: "TIME_RANGE" | "LIMIT_UNTIL";
   window?: number;
+  relay?: string;
 }
 
 export interface TimelineSubject {
@@ -56,7 +57,7 @@ export default function useTimelineFeed(subject: TimelineSubject, options: Timel
       }
     }
     return sub;
-  }, [subject.type, subject.items, subject.discriminator]);
+  }, [subject.type, subject.items, subject.discriminator, options.relay]);
 
   const sub = useMemo(() => {
     const sub = createSub();
@@ -89,7 +90,7 @@ export default function useTimelineFeed(subject: TimelineSubject, options: Timel
     return sub;
   }, [until, since, options.method, pref, createSub]);
 
-  const main = useSubscription(sub, { leaveOpen: true, cache: true });
+  const main = useSubscription(sub, { leaveOpen: true, cache: subject.type !== "global", relay: options.relay });
 
   const subRealtime = useMemo(() => {
     const subLatest = createSub();
@@ -104,8 +105,15 @@ export default function useTimelineFeed(subject: TimelineSubject, options: Timel
   const latest = useSubscription(subRealtime, {
     leaveOpen: true,
     cache: false,
+    relay: options.relay,
   });
 
+  useEffect(() => {
+    // clear store if chaning relays
+    main.clear();
+    latest.clear();
+  }, [options.relay]);
+
   const subNext = useMemo(() => {
     let sub: Subscriptions | undefined;
     if (trackingEvents.length > 0 && pref.enableReactions) {
@@ -117,7 +125,7 @@ export default function useTimelineFeed(subject: TimelineSubject, options: Timel
     return sub ?? null;
   }, [trackingEvents, pref, subject.type]);
 
-  const others = useSubscription(subNext, { leaveOpen: true, cache: true });
+  const others = useSubscription(subNext, { leaveOpen: true, cache: subject.type !== "global", relay: options.relay });
 
   const subParents = useMemo(() => {
     if (trackingParentEvents.length > 0) {
@@ -129,7 +137,7 @@ export default function useTimelineFeed(subject: TimelineSubject, options: Timel
     return null;
   }, [trackingParentEvents, subject.type]);
 
-  const parent = useSubscription(subParents);
+  const parent = useSubscription(subParents, { leaveOpen: false, cache: false, relay: options.relay });
 
   useEffect(() => {
     if (main.store.notes.length > 0) {

src/Nostr/RelayInfo.ts

@@ -6,4 +6,7 @@ export interface RelayInfo {
   supported_nips?: number[];
   software?: string;
   version?: string;
+  limitation?: {
+    payment_required: boolean;
+  };
 }

src/Nostr/System.ts

@@ -75,6 +75,10 @@ export class NostrSystem {
     }
   }
 
+  AddSubscriptionToRelay(sub: Subscriptions, relay: string) {
+    this.Sockets.get(relay)?.AddSubscription(sub);
+  }
+
   AddSubscription(sub: Subscriptions) {
     for (const [, s] of this.Sockets) {
       s.AddSubscription(sub);

src/Pages/Root.tsx

@@ -1,5 +1,5 @@
 import "./Root.css";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { useSelector } from "react-redux";
 import { Link } from "react-router-dom";
 import { useIntl, FormattedMessage } from "react-intl";
@@ -10,6 +10,7 @@ import Timeline from "Element/Timeline";
 import { TimelineSubject } from "Feed/TimelineFeed";
 
 import messages from "./messages";
+import { System } from "Nostr/System";
 
 export default function RootPage() {
   const { formatMessage } = useIntl();
@@ -29,6 +30,7 @@ export default function RootPage() {
     },
   };
   const [tab, setTab] = useState<Tab>(RootTab.Posts);
+  const [relay, setRelay] = useState<string>();
   const tagTabs = tags.map((t, idx) => {
     return { text: `#${t}`, value: idx + 3 };
   });
@@ -51,6 +53,20 @@ export default function RootPage() {
     }
   }
 
+  const globalRelays = useMemo(() => {
+    const ret: string[] = [];
+    System.Sockets.forEach((v, k) => {
+      if (v.Info?.limitation?.payment_required === true) {
+        ret.push(k);
+      }
+    });
+
+    if (ret.length > 0 && !relay) {
+      setRelay(ret[0]);
+    }
+    return ret;
+  }, [relays, relay]);
+
   const isGlobal = loggedOut || tab.value === RootTab.Global.value;
   const timelineSubect: TimelineSubject = (() => {
     if (isGlobal) {
@@ -63,16 +79,38 @@ export default function RootPage() {
 
     return { type: "pubkey", items: follows, discriminator: "follows" };
   })();
+
+  if (isGlobal && globalRelays.length === 0) return null;
   return (
     <>
       <div className="main-content">{pubKey && <Tabs tabs={tabs} tab={tab} setTab={setTab} />}</div>
+      {isGlobal && (
+        <div className="flex mb10">
+          <div className="f-grow">
+            <FormattedMessage
+              defaultMessage="Read global from"
+              description="Label for reading global feed from specific relays"
+            />
+          </div>
+          <div>
+            <select onChange={e => setRelay(e.target.value)}>
+              {globalRelays.map(a => (
+                <option key={a} value={a}>
+                  {new URL(a).host}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+      )}
       {followHints()}
       <Timeline
         key={tab.value}
         subject={timelineSubect}
         postsOnly={tab.value === RootTab.Posts.value}
         method={"TIME_RANGE"}
-        window={tab.value === RootTab.Global.value ? 60 : undefined}
+        window={isGlobal ? 60 : undefined}
+        relay={isGlobal ? relay : undefined}
       />
     </>
   );