adds peer-discovery to web-chat and relevant logs

examples/web-chat/package-lock.json

@@ -16,6 +16,7 @@
         "@waku/create": "^0.0.4",
         "@waku/dns-discovery": "0.0.5",
         "@waku/interfaces": "^0.0.5",
+        "@waku/peer-exchange": "^0.0.3",
         "process": "^0.11.10",
         "protons-runtime": "^3.1.0",
         "react": "^17.0.2",
@@ -6664,6 +6665,42 @@
         "node": ">=16"
       }
     },
+    "node_modules/@waku/peer-exchange": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@waku/peer-exchange/-/peer-exchange-0.0.3.tgz",
+      "integrity": "sha512-D1/A0Bk0utPJaxDweWBg3e8J7mF/sScuGEqfsveCwLtsFtoBDvZwJ9fxFv08Ht8oB5LzCfzDz4teiIJwntvO0w==",
+      "dependencies": {
+        "@libp2p/interface-connection": "^3.0.3",
+        "@libp2p/interface-peer-discovery": "^1.0.0",
+        "@libp2p/interface-peer-id": "^1.0.6",
+        "@libp2p/interface-peer-info": "^1.0.4",
+        "@libp2p/interface-peer-store": "^1.2.3",
+        "@waku/core": "*",
+        "@waku/enr": "*",
+        "@waku/interfaces": "*",
+        "@waku/libp2p-utils": "*",
+        "@waku/proto": "*",
+        "debug": "^4.3.4",
+        "it-all": "^1.0.6",
+        "it-length-prefixed": "^8.0.2",
+        "it-pipe": "^2.0.4",
+        "uint8arraylist": "^2.3.2"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/@waku/proto": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/@waku/proto/-/proto-0.0.2.tgz",
+      "integrity": "sha512-5+hERUscSRbERu2BkTqvSR4Jl3YMvtPegQ/YZbhwBTk5MBS23kGzMBxf1MdQ3Sfy5TiU7yc2Q5G5vItvPkEOUw==",
+      "dependencies": {
+        "protons-runtime": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
@@ -29141,6 +29178,36 @@
         "debug": "^4.3.4"
       }
     },
+    "@waku/peer-exchange": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@waku/peer-exchange/-/peer-exchange-0.0.3.tgz",
+      "integrity": "sha512-D1/A0Bk0utPJaxDweWBg3e8J7mF/sScuGEqfsveCwLtsFtoBDvZwJ9fxFv08Ht8oB5LzCfzDz4teiIJwntvO0w==",
+      "requires": {
+        "@libp2p/interface-connection": "^3.0.3",
+        "@libp2p/interface-peer-discovery": "^1.0.0",
+        "@libp2p/interface-peer-id": "^1.0.6",
+        "@libp2p/interface-peer-info": "^1.0.4",
+        "@libp2p/interface-peer-store": "^1.2.3",
+        "@waku/core": "*",
+        "@waku/enr": "*",
+        "@waku/interfaces": "*",
+        "@waku/libp2p-utils": "*",
+        "@waku/proto": "*",
+        "debug": "^4.3.4",
+        "it-all": "^1.0.6",
+        "it-length-prefixed": "^8.0.2",
+        "it-pipe": "^2.0.4",
+        "uint8arraylist": "^2.3.2"
+      }
+    },
+    "@waku/proto": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/@waku/proto/-/proto-0.0.2.tgz",
+      "integrity": "sha512-5+hERUscSRbERu2BkTqvSR4Jl3YMvtPegQ/YZbhwBTk5MBS23kGzMBxf1MdQ3Sfy5TiU7yc2Q5G5vItvPkEOUw==",
+      "requires": {
+        "protons-runtime": "^3.1.0"
+      }
+    },
     "@webassemblyjs/ast": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",

examples/web-chat/package.json

@@ -10,8 +10,9 @@
     "@waku/byte-utils": "^0.0.2",
     "@waku/core": "^0.0.6",
     "@waku/create": "^0.0.4",
-    "@waku/interfaces": "^0.0.5",
     "@waku/dns-discovery": "0.0.5",
+    "@waku/interfaces": "^0.0.5",
+    "@waku/peer-exchange": "^0.0.3",
     "process": "^0.11.10",
     "protons-runtime": "^3.1.0",
     "react": "^17.0.2",

examples/web-chat/src/App.tsx

@@ -7,6 +7,7 @@ import { ThemeProvider } from "@livechat/ui-kit";
 import { generate } from "server-name-generator";
 import { Message } from "./Message";
 import { wakuDnsDiscovery } from "@waku/dns-discovery";
+import { wakuPeerExchangeDiscovery } from "@waku/peer-exchange";
 import { waitForRemotePeer } from "@waku/core/lib/wait_for_remote_peer";
 import { Protocols, WakuLight } from "@waku/interfaces";
 import { createLightNode } from "@waku/create";
@@ -206,6 +207,7 @@ async function initWaku(setter: (waku: WakuLight) => void) {
             filter: 2,
             lightpush: 2,
           }),
+          wakuPeerExchangeDiscovery(),
         ],
       },
     });

examples/web-chat/src/Room.tsx

@@ -22,13 +22,26 @@ export default function Room(props: Props) {
   const [filterPeers, setFilterPeers] = useState(0);
   const [lightPushPeers, setLightPushPeers] = useState(0);
 
+  const [bootstrapPeers, setBootstrapPeers] = useState(new Set<string>());
+  const [peerExchangePeers, setPeerExchangePeers] = useState(new Set<string>());
+
   const ChatEncoder = new EncoderV0(ChatContentTopic);
 
   useEffect(() => {
     if (!waku) return;
 
     // Update store peer when new peer connected & identified
-    waku.libp2p.peerStore.addEventListener("change:protocols", async () => {
+    waku.libp2p.peerStore.addEventListener("change:protocols", async (evt) => {
+      const { peerId } = evt.detail;
+      const tags = (await waku.libp2p.peerStore.getTags(peerId)).map(
+        (t) => t.name
+      );
+      if (tags.includes("peer-exchange")) {
+        setPeerExchangePeers((peers) => new Set(peers).add(peerId.toString()));
+      } else {
+        setBootstrapPeers((peers) => new Set(peers).add(peerId.toString()));
+      }
+
       const storePeers = await waku.store.peers();
       setStorePeers(storePeers.length);
 
@@ -40,6 +53,14 @@ export default function Room(props: Props) {
     });
   }, [waku]);
 
+  useEffect(() => {
+    console.log("Bootstrap Peers:");
+    console.table(bootstrapPeers);
+
+    console.log("Peer Exchange Peers:");
+    console.table(peerExchangePeers);
+  }, [bootstrapPeers, peerExchangePeers]);
+
   return (
     <div
       className="chat-container"
@@ -49,6 +70,10 @@ export default function Room(props: Props) {
         leftIcons={[
           `Peers: ${lightPushPeers} light push, ${filterPeers} filter, ${storePeers} store.`,
         ]}
+        rightIcons={[
+          `Bootstrap (DNS Discovery): ${bootstrapPeers.size}, Peer exchange: ${peerExchangePeers.size}. `,
+          "View console for more details.",
+        ]}
         title="Waku v2 chat app"
       />
       <ChatList messages={props.messages} />