feat: allow good peers to be saved and dial on reloads

examples/web-chat/src/Room.tsx

@@ -5,6 +5,8 @@ import { useWaku, useContentPair, useLightPush } from "@waku/react";
 import { ChatMessage } from "./chat_message";
 import { useNodePeers, usePeers } from "./hooks";
 import type { RoomProps } from "./types";
+import { useEffect } from "react";
+import { getMultiaddrsFromLocalStorage } from "./utils";
 
 export default function Room(props: RoomProps) {
   const { node } = useWaku<LightNode>();
@@ -41,6 +43,23 @@ export default function Room(props: RoomProps) {
     }
   };
 
+  useEffect(() => {
+    if (!node) return;
+
+    const multiaddrs = getMultiaddrsFromLocalStorage();
+    (async () => {
+      console.log(
+        `Dialing ${multiaddrs.length} multiaddrs found in local storage`
+      );
+
+      try {
+        await Promise.all(multiaddrs.map((multiaddr) => node.dial(multiaddr)));
+      } catch (error) {
+        console.error(error);
+      }
+    })();
+  }, [node]);
+
   const allConnectedLength = orZero(allConnected?.length);
   const lightPushPeersLength = orZero(lightPushPeers?.length);
   const filterPeersLength = orZero(filterPeers?.length);

examples/web-chat/src/hooks.ts

@@ -11,7 +11,7 @@ import type {
   UsePeersParams,
   UsePeersResults,
 } from "./types";
-import { handleCatch } from "./utils";
+import { handleCatch, saveMultiaddrsToLocalStorage } from "./utils";
 
 export const usePersistentNick = (): [
   string,
@@ -86,6 +86,7 @@ export const useNodePeers = (node: undefined | LightNode) => {
     };
 
     const handleConnectPeerExchange = (event: CustomEvent<PeerId>) => {
+      saveMultiaddrsToLocalStorage(node.libp2p.peerStore.get(event.detail));
       setConnectedPeerExchangePeers(
         (peers) => new Set([...peers, event.detail])
       );

examples/web-chat/src/utils.ts

@@ -1,4 +1,5 @@
 import type { Peer } from "@libp2p/interface-peer-store";
+import { Multiaddr, multiaddr } from "@multiformats/multiaddr";
 
 export async function handleCatch(
   promise?: Promise<Peer[]>
@@ -13,3 +14,35 @@ export async function handleCatch(
     return undefined;
   }
 }
+
+export async function saveMultiaddrsToLocalStorage(
+  peerPromise?: Promise<Peer>
+) {
+  let addresses: Peer["addresses"] = [];
+
+  try {
+    addresses = (await peerPromise)?.addresses ?? [];
+  } catch (error) {}
+
+  for (const addr of addresses) {
+    if (!addr.multiaddr.toString().includes("wss")) continue;
+
+    localStorage.setItem(
+      `peer-exchange-${addr.multiaddr.toString()}`,
+      addr.multiaddr.toString()
+    );
+  }
+}
+
+export function getMultiaddrsFromLocalStorage(): Multiaddr[] {
+  const multiaddrs: Multiaddr[] = [];
+  for (const key in localStorage) {
+    if (key.startsWith("peer-exchange-")) {
+      const addr = localStorage.getItem(key);
+      if (addr) {
+        multiaddrs.push(multiaddr(addr));
+      }
+    }
+  }
+  return multiaddrs;
+}