relay req info

packages/app/src/Element/Relay.tsx

@@ -11,6 +11,7 @@ import {
   faWifi,
   faPlugCircleXmark,
   faGear,
+  faWarning,
 } from "@fortawesome/free-solid-svg-icons";
 import { RelaySettings } from "@snort/nostr";
 
@@ -86,7 +87,7 @@ export default function Relay(props: RelayProps) {
           </div>
           <div className="flex">
             <div className="f-grow">
-              <FontAwesomeIcon icon={faWifi} />{" "}
+              <FontAwesomeIcon icon={faWifi} className="mr5 ml5" />
               {latency > 2000
                 ? formatMessage(messages.Seconds, {
                     n: (latency / 1000).toFixed(0),
@@ -95,7 +96,9 @@ export default function Relay(props: RelayProps) {
                     n: latency.toLocaleString(),
                   })}
               &nbsp;
-              <FontAwesomeIcon icon={faPlugCircleXmark} /> {state?.disconnects}
+              <FontAwesomeIcon icon={faPlugCircleXmark} className="mr5 ml5" /> {state?.disconnects}
+              <FontAwesomeIcon icon={faWarning} className="mr5 ml5" />
+              {state?.pendingRequests?.length}
             </div>
             <div>
               <span className="icon-btn" onClick={() => navigate(state?.id ?? "")}>

packages/app/src/Pages/settings/RelayInfo.tsx

@@ -15,7 +15,6 @@ const RelayInfo = () => {
   const dispatch = useDispatch();
 
   const conn = Array.from(System.Sockets.values()).find(a => a.Id === params.id);
-  console.debug(conn);
   const stats = useRelayState(conn?.Address ?? "");
 
   return (
@@ -75,11 +74,7 @@ const RelayInfo = () => {
             </h4>
             <div className="f-grow">
               {stats.info.supported_nips.map(a => (
-                <a
-                  target="_blank"
-                  rel="noreferrer"
-                  href={`https://github.com/nostr-protocol/nips/blob/master/${a.toString().padStart(2, "0")}.md`}
-                  className="pill">
+                <a target="_blank" rel="noreferrer" href={`https://nips.be/${a}`} className="pill">
                   NIP-{a.toString().padStart(2, "0")}
                 </a>
               ))}
@@ -90,7 +85,21 @@ const RelayInfo = () => {
           <FormattedMessage defaultMessage="Active Subscriptions" />
         </h4>
         <div className="f-grow">
-          <span className="pill">TBD</span>
+          {stats?.activeRequests.map(a => (
+            <span className="pill" key={a}>
+              {a}
+            </span>
+          ))}
+        </div>
+        <h4>
+          <FormattedMessage defaultMessage="Pending Subscriptions" />
+        </h4>
+        <div className="f-grow">
+          {stats?.pendingRequests.map(a => (
+            <span className="pill" key={a}>
+              {a}
+            </span>
+          ))}
         </div>
         <div className="flex mt10 f-end">
           <div

packages/nostr/src/legacy/Connection.ts

@@ -2,7 +2,7 @@ import { v4 as uuid } from "uuid";
 
 import { DefaultConnectTimeout } from "./Const";
 import { ConnectionStats } from "./ConnectionStats";
-import { RawEvent, RawReqFilter, ReqCommand, TaggedRawEvent, u256 } from "./index";
+import { RawEvent, ReqCommand, TaggedRawEvent, u256 } from "./index";
 import { RelayInfo } from "./RelayInfo";
 import { unwrap } from "./Util";
 
@@ -20,7 +20,7 @@ export interface RelaySettings {
 /**
  * Snapshot of connection stats
  */
-export type StateSnapshot = {
+export interface StateSnapshot {
   connected: boolean;
   disconnects: number;
   avgLatency: number;
@@ -29,6 +29,8 @@ export type StateSnapshot = {
     send: number;
   };
   info?: RelayInfo;
+  pendingRequests: Array<string>;
+  activeRequests: Array<string>;
   id: string;
 };
 
@@ -297,6 +299,7 @@ export class Connection {
       this.ActiveRequests.add(cmd[1]);
       this.#SendJson(cmd);
     }
+    this.#UpdateState();
   }
 
   CloseReq(id: string) {
@@ -305,6 +308,7 @@ export class Connection {
       this.OnEose?.(id);
       this.#SendQueuedRequests();
     }
+    this.#UpdateState();
   }
 
   #SendQueuedRequests() {
@@ -329,6 +333,7 @@ export class Connection {
     this.ActiveRequests.clear();
     this.PendingRequests = [];
     this.PendingRaw = [];
+    this.#UpdateState();
   }
 
   #UpdateState() {
@@ -343,6 +348,8 @@ export class Connection {
     this.CurrentState.disconnects = this.Stats.Disconnects;
     this.CurrentState.info = this.Info;
     this.CurrentState.id = this.Id;
+    this.CurrentState.pendingRequests = [...this.PendingRequests.map(a => a[1])];
+    this.CurrentState.activeRequests = [...this.ActiveRequests];
     this.Stats.Latency = this.Stats.Latency.slice(-20); // trim
     this.HasStateChange = true;
     this.#NotifyState();

packages/nostr/src/legacy/ConnectionStats.ts

@@ -5,39 +5,30 @@ export class ConnectionStats {
   /**
    * Last n records of how long between REQ->EOSE
    */
-  Latency: number[];
+  Latency: number[] = [];
 
   /**
    * Total number of REQ's sent on this connection
    */
-  Subs: number;
+  Subs: number = 0;
 
   /**
    * Count of REQ which took too long and where abandoned
    */
-  SubsTimeout: number;
+  SubsTimeout: number = 0;
 
   /**
    * Total number of EVENT messages received
    */
-  EventsReceived: number;
+  EventsReceived: number = 0;
 
   /**
    * Total number of EVENT messages sent
    */
-  EventsSent: number;
+  EventsSent: number = 0;
 
   /**
    * Total number of times this connection was lost
    */
-  Disconnects: number;
-
-  constructor() {
-    this.Latency = [];
-    this.Subs = 0;
-    this.SubsTimeout = 0;
-    this.EventsReceived = 0;
-    this.EventsSent = 0;
-    this.Disconnects = 0;
-  }
+  Disconnects: number = 0;
 }