/webrtc-direct listener breaks Status page

[lidel]

Describe the bug

This is the same problems as #2033 but for /webrtc-direct

To Reproduce

1. Run Kubo v0.24.0
2. Enable WebRTCDirect by
   1. adding "/ip4/0.0.0.0/udp/4002/webrtc-direct" to Addresses.Swarm
   2. enabling transport via ipfs config Swarm.Transports.Network.WebRTCDirect --json true
3. Restart node, wait a minute for listeners to set up via UPnP
4. Open webui
5. See broken state:

   

See Release Notes for more info: https://github.com/ipfs/kubo/blob/master/docs/changelogs/v0.24.md

Expected behavior

Show /webrtc-direct (spec) listeners returned by ipfs.id
While at it, also make sure /webrtc (spec) is supported as well (not in kubo yet, but will be added in near future).

To avoid a big refactor, a fix similar to patches/multiaddr+8.1.2.patch from #2057 would be sufficient for solving the problem at hand.
Add codes for webrtc-direct and webrtc https://github.com/multiformats/multiaddr/blob/master/protocols.csv

[lidel]

Better repro steps:

$ # shut down local node (if you have it)
$ go install github.com/ipfs/kubo/cmd/ipfs@v0.24.0 # use latest binary
$ export IPFS_PATH=/tmp/test-webrtc # use empty profile
$ ipfs init 
...
initializing IPFS node at /tmp/test-webrtc
$ ipfs config Swarm.Transports.Network.WebRTCDirect --json true
$ ipfs config Addresses.Swarm --json '["/ip4/0.0.0.0/udp/4002/webrtc-direct"]'
$ ipfs daemon
...
WebUI: http://127.0.0.1:5001/webui

Opening WebUI at http://127.0.0.1:5001/webui should produce screenshot I described, clicking on Advanced will reveal empty addresses: