update hooks for new API/add verbosity

examples/web-chat/src/Room.tsx

@@ -24,7 +24,9 @@ export default function Room(props: Props) {
     discoveredBootstrapPeers,
     discoveredPeerExchangePeers,
   } = useNodePeers(node);
-  const { storePeers, filterPeers, lightPushPeers } = usePeers({ node });
+  const { allConnected, storePeers, filterPeers, lightPushPeers } = usePeers({
+    node,
+  });
 
   const onSend = async (text: string) => {
     if (!onPush || !text) {
@@ -46,13 +48,29 @@ export default function Room(props: Props) {
     }
   };
 
+  const allConnectedLength = orZero(allConnected?.length);
   const lightPushPeersLength = orZero(lightPushPeers?.length);
   const filterPeersLength = orZero(filterPeers?.length);
   const storePeersLength = orZero(storePeers?.length);
 
-  const peersMessage = `Peers: ${lightPushPeersLength} light push, ${filterPeersLength} filter, ${storePeersLength} store.`;
-  const bootstrapPeersMessage = `Bootstrap peers: ${connectedBootstrapPeers.length} connected, ${discoveredBootstrapPeers.length} discovered.`;
-  const peerExchangePeersMessage = `Peer exchange peers: ${connectedPeerExchangePeers.length} connected, ${discoveredPeerExchangePeers.length} discovered.`;
+  const peersMessage = `Peers Connected: ${allConnectedLength}
+    Store: ${storePeersLength}
+    Filter: ${filterPeersLength}
+    Light Push: ${lightPushPeersLength}
+  `;
+
+  const protocolsPeersMessage = `Peers Discovered: ${
+    discoveredBootstrapPeers.size + discoveredPeerExchangePeers.size
+  }
+    Bootstrap: ${discoveredBootstrapPeers.size}
+    Peer Exchange: ${discoveredPeerExchangePeers.size}; 
+    
+    Peers Connected: ${
+      connectedBootstrapPeers.size + connectedPeerExchangePeers.size
+    }
+    Bootstrap: ${connectedBootstrapPeers.size}
+    Peer Exchange: ${connectedPeerExchangePeers.size}
+  `;
 
   return (
     <div
@@ -61,7 +79,7 @@ export default function Room(props: Props) {
     >
       <TitleBar
         leftIcons={[peersMessage]}
-        rightIcons={[bootstrapPeersMessage, " ", peerExchangePeersMessage]}
+        rightIcons={[protocolsPeersMessage]}
         title="Waku v2 chat app"
       />
       <ChatList messages={props.messages} />

examples/web-chat/src/hooks.ts

@@ -1,12 +1,14 @@
 import React, { useEffect, useState } from "react";
 import { generate } from "server-name-generator";
 import { Message } from "./Message";
+import type { PeerId } from "@libp2p/interface-peer-id";
 import type { Peer } from "@libp2p/interface-peer-store";
 import {
   EPeersByDiscoveryEvents,
   LightNode,
   StoreQueryOptions,
   Waku,
+  Tags,
 } from "@waku/interfaces";
 import type { waku } from "@waku/sdk";
 
@@ -64,45 +66,93 @@ export const useMessages = (params: UseMessagesParams): UseMessagesResult => {
 // can be safely ignored
 // this is for experiments on waku side around new discovery options
 export const useNodePeers = (node: undefined | LightNode) => {
-  const [discoveredBootstrapPeers, setBootstrapPeers] = useState<Peer[]>([]);
-  const [connectedBootstrapPeers, setConnectedBootstrapPeers] = useState<
-    Peer[]
-  >([]);
-  const [discoveredPeerExchangePeers, setPeerExchangePeers] = useState<Peer[]>(
-    []
+  const [discoveredBootstrapPeers, setBootstrapPeers] = useState<Set<PeerId>>(
+    new Set()
   );
+  const [connectedBootstrapPeers, setConnectedBootstrapPeers] = useState<
+    Set<PeerId>
+  >(new Set());
+  const [discoveredPeerExchangePeers, setPeerExchangePeers] = useState<
+    Set<PeerId>
+  >(new Set());
   const [connectedPeerExchangePeers, setConnectedPeerExchangePeers] = useState<
-    Peer[]
-  >([]);
+    Set<PeerId>
+  >(new Set());
 
   useEffect(() => {
     if (!node) return;
 
-    //TODO: remove any once @waku/sdk is updated
-    (node as any).connectionManager.addEventListener(
-      EPeersByDiscoveryEvents.PEER_DISCOVERY_BOOTSTRAP,
-      (event: CustomEvent<Peer>) => {
-        setBootstrapPeers((prev) => [...prev, event.detail]);
-      }
-    );
-    (node as any).connectionManager.addEventListener(
-      EPeersByDiscoveryEvents.PEER_CONNECT_BOOTSTRAP,
-      (event: CustomEvent<Peer>) => {
-        setConnectedBootstrapPeers((prev) => [...prev, event.detail]);
-      }
-    );
-    (node as any).connectionManager.addEventListener(
-      EPeersByDiscoveryEvents.PEER_DISCOVERY_PEER_EXCHANGE,
-      (event: CustomEvent<Peer>) => {
-        setPeerExchangePeers((prev) => [...prev, event.detail]);
-      }
-    );
-    (node as any).connectionManager.addEventListener(
-      EPeersByDiscoveryEvents.PEER_CONNECT_PEER_EXCHANGE,
-      (event: CustomEvent<Peer>) => {
-        setConnectedPeerExchangePeers((prev) => [...prev, event.detail]);
-      }
-    );
+    const handleDiscoveryBootstrap = (event: CustomEvent<PeerId>) => {
+      setBootstrapPeers((peers) => new Set([...peers, event.detail]));
+    };
+
+    const handleConnectBootstrap = (event: CustomEvent<PeerId>) => {
+      setConnectedBootstrapPeers((peers) => new Set([...peers, event.detail]));
+    };
+
+    const handleDiscoveryPeerExchange = (event: CustomEvent<PeerId>) => {
+      setPeerExchangePeers((peers) => new Set([...peers, event.detail]));
+    };
+
+    const handleConnectPeerExchange = (event: CustomEvent<PeerId>) => {
+      setConnectedPeerExchangePeers(
+        (peers) => new Set([...peers, event.detail])
+      );
+    };
+
+    const fetchData = async () => {
+      const { CONNECTED, DISCOVERED } =
+        await node.connectionManager.getPeersByDiscovery();
+
+      setConnectedBootstrapPeers(
+        new Set(CONNECTED[Tags.BOOTSTRAP].map((p) => p.id))
+      );
+      setConnectedPeerExchangePeers(
+        new Set(CONNECTED[Tags.PEER_EXCHANGE].map((p) => p.id))
+      );
+      setBootstrapPeers(new Set(DISCOVERED[Tags.BOOTSTRAP].map((p) => p.id)));
+      setPeerExchangePeers(
+        new Set(DISCOVERED[Tags.PEER_EXCHANGE].map((p) => p.id))
+      );
+
+      node.connectionManager.addEventListener(
+        EPeersByDiscoveryEvents.PEER_DISCOVERY_BOOTSTRAP,
+        handleDiscoveryBootstrap
+      );
+      node.connectionManager.addEventListener(
+        EPeersByDiscoveryEvents.PEER_CONNECT_BOOTSTRAP,
+        handleConnectBootstrap
+      );
+      node.connectionManager.addEventListener(
+        EPeersByDiscoveryEvents.PEER_DISCOVERY_PEER_EXCHANGE,
+        handleDiscoveryPeerExchange
+      );
+      node.connectionManager.addEventListener(
+        EPeersByDiscoveryEvents.PEER_CONNECT_PEER_EXCHANGE,
+        handleConnectPeerExchange
+      );
+    };
+
+    fetchData();
+
+    return () => {
+      node.connectionManager.removeEventListener(
+        EPeersByDiscoveryEvents.PEER_DISCOVERY_BOOTSTRAP,
+        handleDiscoveryBootstrap
+      );
+      node.connectionManager.removeEventListener(
+        EPeersByDiscoveryEvents.PEER_CONNECT_BOOTSTRAP,
+        handleConnectBootstrap
+      );
+      node.connectionManager.removeEventListener(
+        EPeersByDiscoveryEvents.PEER_DISCOVERY_PEER_EXCHANGE,
+        handleDiscoveryPeerExchange
+      );
+      node.connectionManager.removeEventListener(
+        EPeersByDiscoveryEvents.PEER_CONNECT_PEER_EXCHANGE,
+        handleConnectPeerExchange
+      );
+    };
   }, [node]);
 
   return {
@@ -118,9 +168,10 @@ type UsePeersParams = {
 };
 
 type UsePeersResults = {
-  storePeers?: undefined | Peer[];
-  filterPeers?: undefined | Peer[];
-  lightPushPeers?: undefined | Peer[];
+  allConnected?: PeerId[];
+  storePeers?: PeerId[];
+  filterPeers?: PeerId[];
+  lightPushPeers?: PeerId[];
 };
 
 /**
@@ -135,22 +186,24 @@ export const usePeers = (params: UsePeersParams): UsePeersResults => {
   const { node } = params;
   const [peers, setPeers] = React.useState<UsePeersResults>({});
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (!node) {
       return;
     }
 
     const listener = async () => {
       const peers = await Promise.all([
+        node?.libp2p.getConnections().map((c) => c.remotePeer),
         handleCatch(node?.store?.peers()),
         handleCatch(node?.filter?.peers()),
         handleCatch(node?.lightPush?.peers()),
       ]);
 
       setPeers({
-        storePeers: peers[0],
-        filterPeers: peers[1],
-        lightPushPeers: peers[2],
+        allConnected: peers[0],
+        storePeers: peers[1]?.map((p) => p.id),
+        filterPeers: peers[2]?.map((p) => p.id),
+        lightPushPeers: peers[3]?.map((p) => p.id),
       });
     };