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