js-peer: add ability to connect via peerID

[Nkovaturient]

Issue: #177

• PR created as part and discussion, here -> Issue

Aims:

• Example where two peers find each other with the peer-id only (in the best case with a dht for detecting the multiadders)
• Function to fetch peerinfo, connect thru known peers in peerStore
• DHT lookup attempts
• Compnent to render the list of peerIds connected with the entered peerID

Description:
1)findByPeerId function aims to find through PeerStore or DHT Lookup
2)DHT response and peerResponse as fallback

Fix needed:

• peerInfo response is retrieving a list of mutiaddrs alongwith bootstrap addrs, however on clicking connect thru either of them, an error of NoValidAddressesError: The dial request has no valid addresses or "DHT lookup failed"

• OUTPUT from PEERINFO obj(mainly thru Known Peer, not DHT)

addresses
: 
(10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
id
: 
Ed25519PeerId {type: 'Ed25519', multihash: Digest, publicKey: Ed25519PublicKey, string: undefined, Symbol(@libp2p/peer-id): true}
metadata
: 
Map(3) {'AgentVersion' => Uint8Array(64), 'last-dial-success' => Uint8Array(13), 'ProtocolVersion' => Uint8Array(0)}
peerRecordEnvelope
: 
Uint8Array(737) [10, 36, 8, 1, 18, 32, 87, 101, 178, 119, 212, 235, 230, 116, 127, 160, 63, 160, 129, 209, 158, 114, 12, 73, 56, 97, 94, 174, 237, 156, 100, 176, 89, 177, 213, 203, 191, 239, 18, 2, 3, 1, 26, 242, 4, 10, 38, 0, 36, 8, 1, 18, 32, 87, 101, 178, 119, 212, 235, 230, 116, 127, 160, 63, 160, 129, 209, 158, 114, 12, 73, 56, 97, 94, 174, 237, 156, 100, 176, 89, 177, 213, 203, 191, 239, 16, 199, 222, 166, 171, 183, 153, 254, 142, 24, 26, 50, 10, 48, 4, …]
protocols
: 
(10) ['/floodsub/1.0.0', '/ipfs/id/1.0.0', '/ipfs/id/push/1.0.0', '/ipfs/kad/1.0.0', '/ipfs/ping/1.0.0', '/libp2p/circuit/relay/0.2.0/hop', '/libp2p/circuit/relay/0.2.0/stop', '/meshsub/1.0.0', '/meshsub/1.1.0', '/meshsub/1.2.0']
tags
: 
Map(7) {'kad-close' => {…}, 'kad-peer' => {…}, 'keep-alive-circuit-relay' => {…}, 'keep-alive-kad-dht' => {…}, 'universal-connectivity' => {…}, …}

• why DHT lookup is failing?
• How to fetch peerInfo by entering peerId of known connections with valid addrs

[2color]

Thanks for the PR, Neha.

Before a proper review:

• Can you please run prettier on the files you edited in this PR to format changes (I've opened js-peer: add prettier for consistent styling #211 to address this). A lot of changes in this PR are code style changes adding unnecessary noise that makes reviewing harder.
• Can you please remove any commented out code that isn't relevant for this.

[Nkovaturient]

Thanks for the PR, Neha.

Before a proper review:

• Can you please run prettier on the files you edited in this PR to format changes (I've opened js-peer: add prettier for consistent styling #211 to address this). A lot of changes in this PR are code style changes adding unnecessary noise that makes reviewing harder.
• Can you please remove any commented out code that isn't relevant for this.

Roger that! @2color

[Nkovaturient]

Hey, @2color
wanna update you with recent commits:-

• ran prettier on files and code changes
• modified kadDHT to peerRouting methods-indeed an effective way of finding peers
• updated the peerFind handler in index.tsx
  

[Nkovaturient]

Hey, kindly review and provide guidance--
summary of the key changes made for peer connectivity:

Basically findBypeerID is fetching a list of multiaddrs --> in peer-maddr.tsx -we are filtering it with valid transport stack --> then trying to connect with either of them handleConnect

• Connection Handling:

• Fixed connection object creation to use actual libp2p connection
• Updated connection type interface to match simplified structure
• Added proper connection state management

• Transport Protocol Validation:

• Added checks for WebTransport + certhash
• Added checks for WebRTC + QUIC + certhash
• Added external address validation

• Connection Flow:

• Parse multiaddr to extract peerID
• Validate transport stack
• Attempt connection via connectToMultiaddr
• Store successful connection in state
• Clear resolved multiaddrs after connection
• Handle connection errors with user feedback

• UI Improvements:

• Added connection priority system
• Show transport protocol badges
• Display connection status indicators
• Added loading states during connection

[Nkovaturient]

@2color any updates/guidance?

[2color]

This is starting to take shape nicely. See comments.

Main points:

• Please remove redundant logic that's already in js-libp2p as explained in https://github.com/libp2p/universal-connectivity/pull/210/files#r1952594020
• Try to keep the new components as UI focused (with as little libp2p specific logic as possible)
• See comment about the libp2p context.

[Nkovaturient]

@2color Thanks a bunch for reviewing it.
I shall get back to you with an update.

[Nkovaturient]

Hello there, @2color
I have updated with the following changes:-

• Remove the redundant findPeerById function and use libp2p.dial() directly
• Move connection state management to the context
• Create a dedicated PeerConnect component for the UI
• Simplify the connection logic by leveraging js-libp2p's built-in peer routing
• Remove the unnecessary peer multiaddr list component since we're connecting directly via PeerID

https://www.loom.com/share/8d3333d1d316419b8a882e4cb4f648f3?sid=b65f2e97-a290-424a-a0ad-1a6b608965c0

[2color]

Thanks @Nkovaturient.

I just took a look at this and think we can simplify this further. Instead of adding a new component to connect to PeerIDs, let's repurpose the existing multiaddr input and also allow PeerIDs there too.

In the handler (what's now called handleConnectToMultiaddr), you can use heuristics (like inspecting the first char /) or just try parsing as PeerID and if that fails, try creating a Multiaddr.

Final note, before committing, please run npm run format.

[Nkovaturient]

Sure @2color , that would be an efficient approach, lemme modify it as desired

[Nkovaturient]

Hey @2color , why was the bootstrap module removed from main?
Albeit short-term, It was an efficient module for anyone getting started with uc and avoiding unnecessary err of no addresses discovered

[Nkovaturient]

#225

Got it, okay 👍

[Nkovaturient]

@2color , websockets connections are failing to establish connections on Chrome and Edge browser. I have tried refreshing a lot but to no avail ...??

[2color]

@Nkovaturient Are you getting these errors with the latest main branch too?

Can you also share the result of https://test-ipv6.com/? I pushed a fix (34b6b35) that may cause be related to this.

[Nkovaturient]

@Nkovaturient Are you getting these errors with the latest main branch too?

Can you also share the result of https://test-ipv6.com/? I pushed a fix (34b6b35) that may cause be related to this.

Yeah, I have updated with the main branch yet the same errors. pkg update and fix (34b6b35) seems okay, I have not been able to open the server since the bootstraplistenaddr were removed and replaced by ipv4 and websockets nonetheless the relaylistenaddr

ipv6 tests

[2color]

The latest changes undo the functionality intended to be introduced by this PR