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

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.

Start with the peer-discovery source linked in the issue, especially the code emitting the peer event, and trace how js-libp2p produces the peer:discovery event. Reproduce the WebRTC circuit-relay case from the browser WebRTC guide and compare the emitted multiaddrs with the original peer event. Done means dialing the event's maddrs succeeds without the consumer manually appending the peer ID.