`peer:discovery` maddrs are missing the `/p2p/{PEER_ID}/` part for circuit relay maddrs

[2color]

Problem

The browser WebRTC guide uses @libp2p/pubsub-peer-discovery to discover peers. While the module correctly emits the peer event with maddrs of discovered webrtc peers (source), js-libp2p emits a peer:discovery event, however it's missing the /p2p/PEER_ID component that is present in the original peer event.

I've worked around this as follows:

  libp2p.addEventListener('peer:discovery', async (evt) => {
    console.log(
      `Discovered new peer (${evt.detail.id.toString()}). Dialling...`,
      evt.detail.multiaddrs.map((ma) => ma.toString()),
    )
    try {
      const maddrs = evt.detail.multiaddrs.map((ma) => ma.encapsulate(`/p2p/${evt.detail.id.toString()}`))
      await libp2p.dial(maddrs) // dial the new peer
      console.log(`Successfully dialed peer (${evt.detail.id.toString()})`)
    } catch (err) {
      console.error(`Failed to dial peer (${evt.detail.id.toString()}):`, err)
    }
  })

The problem is that if you just dial the maddrs in the event the dial will fail for webrtc maddrs.

[2color]

I can confirm that this is a regression that was introduced somewhere between js-libp2p 2.7.4 → 2.9.0

[Chandelier-02]

I'm not too sure how much this helps, but I have also been dealing with this issue, and it started happening after this commit https://github.com/libp2p/js-libp2p/commit/a5a33afd9fc7e5cc9060e0ac8d6daa8edb566ea8 started calling ma.decapsulate on the multiaddr in the "dedupeFilterAndSortAddresses" in changes to the dedupe-addresses.ts file.

I created a patch in my system to undo this change and my WebRTC peers are able to discover each other and properly connect like they used to be able to do.