From 2f455c14c5d73509c8b1c7f93b468e730577ce0a Mon Sep 17 00:00:00 2001
From: Arseniy Klempner <adklempner@gmail.com>
Date: Thu, 2 Nov 2023 04:54:34 -0700
Subject: [PATCH] feat: select peer to dial from drop down (#282)

---
 examples/light-js/index.html | 135 ++++++++++++++++++++++++++++-------
 1 file changed, 109 insertions(+), 26 deletions(-)
diff --git a/examples/light-js/index.html b/examples/light-js/index.html
index 04d730f..4ad44b3 100644
--- a/examples/light-js/index.html
+++ b/examples/light-js/index.html
@@ -10,18 +10,42 @@
   </head>
 
   <body>
-    <div><h2>Status</h2></div>
+    <div>
+      <h2>Status</h2>
+    </div>
     <div id="status"></div>
 
-    <div><h2>Local Peer Id</h2></div>
+    <div>
+      <h2>Local Peer Id</h2>
+    </div>
     <div id="peer-id"></div>
 
-    <div><h2>Remote Peer Id</h2></div>
-    <div id="remote-peer-id"></div>
-
-    <label for="remote-multiaddr">Remote peer's multiaddr</label>
-    <input id="remote-multiaddr" type="text" value="" />
+    <div>
+      <h2>Select Peer</h2>
+    </div>
+    <div>
+      <button id="getPeersButton" type="button">Refresh Peers</button>
+      <select id="peer-select">
+        <option value=""></option>
+      </select>
+    </div>
+    <div>
+      <label for="remote-multiaddr">Remote peer's multiaddr</label>
+    </div>
+    <div style="margin-right: 1em">
+      <input
+        id="remote-multiaddr"
+        type="text"
+        value=""
+        style="width: 100%; max-width: 900px"
+      />
+    </div>
     <button disabled id="dial" type="button">Dial</button>
+
+    <div>
+      <h2>Remote Peers</h2>
+    </div>
+    <div id="remote-peer-id"></div>
     <br />
     <button disabled id="subscribe" type="button">Subscribe with Filter</button>
     <button disabled id="unsubscribe" type="button">
@@ -61,6 +85,8 @@
       const messagesDiv = document.getElementById("messages");
       const textInput = document.getElementById("textInput");
       const sendButton = document.getElementById("sendButton");
+      const getPeersButton = document.getElementById("getPeersButton");
+      const peersSelector = document.getElementById("peer-select");
 
       const ContentTopic = "/js-waku-examples/1/chat/utf8";
       const decoder = createDecoder(ContentTopic);
@@ -75,7 +101,7 @@
       };
 
       try {
-        await searchForPeer(statusDiv, remoteMultiAddrDiv);
+        await getPeers();
       } catch (e) {
         console.log("Failed to find a peer", e);
         remoteMultiAddrDiv.value =
@@ -87,6 +113,37 @@
 
       statusDiv.innerHTML = "<p>Starting Waku node.</p>";
       await node.start();
+
+      // Queries all peers from libp2p peer store and updates list of connected peers
+      const updatePeersList = async () => {
+        // Generate <p> element with connection string from each peer
+        const peers = await node.libp2p.peerStore.all();
+        const peerIdElements = peers.map((peer) => {
+          const element = document.createElement("p");
+          element.textContent = `${peer.addresses[1].multiaddr}/p2p/${peer.id}`;
+          return element;
+        });
+        // Update elements displaying list of peers
+        remotePeerIdDiv.replaceChildren(...peerIdElements);
+      };
+
+      // Refreshes list of connected peers each time a new one is detected
+      node.store.addLibp2pEventListener("peer:connect", async (event) => {
+        const peerId = event.detail;
+        console.log(`Peer connected with peer id: ${peerId}`);
+        // Wait half a second after receiving event for peer to show up in peer store
+        setTimeout(async () => {
+          updatePeersList();
+        }, 500);
+
+        // Update status
+        statusDiv.innerHTML = `<p>Peer dialed: ${peerId}</p>`;
+        // Enable send and subscribe inputs as we are now connected to a peer
+        textInput.disabled = false;
+        sendButton.disabled = false;
+        subscribeButton.disabled = false;
+      });
+
       statusDiv.innerHTML = "<p>Waku node started.</p>";
       peerIdDiv.innerHTML = "<p>" + node.libp2p.peerId.toString() + "</p>";
       dialButton.disabled = false;
@@ -98,15 +155,14 @@
           return;
         }
         statusDiv.innerHTML = "<p>Dialing peer.</p>";
-        const multiaddr = MultiformatsMultiaddr.multiaddr(ma);
+        let multiaddr;
+        try {
+          multiaddr = MultiformatsMultiaddr.multiaddr(ma);
+        } catch (err) {
+          statusDiv.innerHTML = "<p>Error: invalid multiaddr provided</p>";
+          throw err;
+        }
         await node.dial(multiaddr, ["filter", "lightpush"]);
-        await waitForRemotePeer(node, ["filter", "lightpush"]);
-        const peers = await node.libp2p.peerStore.all();
-        statusDiv.innerHTML = "<p>Peer dialed.</p>";
-        remotePeerIdDiv.innerHTML = "<p>" + peers[0].id.toString() + "</p>";
-        textInput.disabled = false;
-        sendButton.disabled = false;
-        subscribeButton.disabled = false;
       };
 
       const callback = (wakuMessage) => {
@@ -139,19 +195,46 @@
         textInput.value = null;
       };
 
-      async function searchForPeer(statusNode, multiaddrNode) {
-        statusDiv.innerHTML = "<p>Discovering peer</p>";
+      getPeersButton.onclick = async () => {
+        await getPeers(statusDiv, remoteMultiAddrDiv);
+      };
 
+      peersSelector.addEventListener("change", function (event) {
+        remoteMultiAddrDiv.value = event.target.value;
+      });
+
+      //
+      async function getPeers() {
+        // Display status
+        statusDiv.innerHTML = "<p>Discovering peers</p>";
+
+        // Clear all options in select element
+        peersSelector.innerHTML = "";
+
+        // Get peers using DNS discovery
+        const defaultNodeCount = 5;
         const dnsDiscovery = await DnsNodeDiscovery.dnsOverHttp();
-        const peersIterator = await dnsDiscovery.getNextPeer(
-          [enrTree["TEST"]],
-          { lightPush: 1, filter: 1 }
-        );
-        const peerEnr = await peersIterator.next();
-        const ma = peerEnr.value.multiaddrs.map((v) => v.toString())[1];
-        const peerId = peerEnr.value.peerId.toString();
+        const peers = await dnsDiscovery.getPeers([enrTree["TEST"]], {
+          relay: defaultNodeCount,
+          store: defaultNodeCount,
+          filter: defaultNodeCount,
+          lightPush: defaultNodeCount,
+        });
 
-        multiaddrNode.value = `${ma}/p2p/${peerId}`;
+        // Create an option element for each peer's multiaddr and append to select element
+        const optionElements = peers.map((peer) => {
+          const optionElement = document.createElement("option");
+          optionElement.value = `${peer.multiaddrs[1]}/p2p/${peer.peerId}`;
+          optionElement.text = `${peer.multiaddrs[1]}/p2p/${peer.peerId}`;
+          return optionElement;
+        });
+        peersSelector.append(...optionElements);
+
+        // Set first peer as selected
+        peersSelector.options[0].selected = true;
+        remoteMultiAddrDiv.value = selectElement.options[0].value;
+
+        statusDiv.innerHTML = "<p>Peers discovered</p>";
       }
     </script>
   </body>
