feat: embed provider webrtc maddr into share link #206

2color · 2025-01-13T13:31:48Z

Background

Providing to the DHT is slow and heavily constrained by transports, i.e. most DHT servers are not dialable from the browser
Providing from the browser is flakey

What's in this PR

Embed maddr into share URL and connect optimistically
Fix styling, e.g. PeerID overflow from node-info on mobile
Fix node info transport counts: use Circuit.exactMatch && WebRTC.matches in order to correctly display the relay dialable address count, e.g. as a browser you are initially only dialable using a circuit relay, which may be over any of the relay's nodes transports, e.g. QUIC, WebSockets etc.
refactor code to remove the pending prop which isn't needed
Move side-effects relating to data fetching to the files-provider to encapsulate all needed retrieval logic in a single place
Remove the download provider and context. Instead encapsulate this login the "router" (use-current-page.ts) and dispatch an action to the files provider.

TODO

Make providing to the DHT optional with a toggle d0fc2c8
Test to make sure there aren't any bugs with the encoding of maddr in the url

* remove download provider * dispatch begin download in use-current page

SgtPooki · 2025-01-23T15:56:59Z

Just want to say while i'm looking into this that I love the updates to the node info:

SgtPooki · 2025-01-23T16:02:00Z

maddrs is empty in my share link (I have 0 listen addrs..) so I checked the logs and webrtc is throwing some interesting errors:

libp2p:kad-dht:network:error could not send PING to 12D3KooWA7CeLxjCSxRXbf8sbrMieFpzGBGfp6ABavUx98YsrB9T - WebRTC/DataChannelError: WebRTC transport error: [stream: data] data channel error: Data channel was never opened: state: connecting    at http://localhost:5173/node_modules/.vite/deps/helia.js?v=24dc1a65:38743:18

I believe this is related to libp2p/js-libp2p#2805.. I wonder if I can get things working by dialing a local kubo node directly..

SgtPooki · 2025-01-23T17:23:28Z

FYI that Daniel and I were able to successfully share a file using the changes in this PR. reviewing code now

SgtPooki

love all the clarification jsdoc items around use effects, and the consolidation of a lot of the code. I would love to break up files-provider a lot more, but i think this is a huge net win. I'm good with merging as is but I left some comments and code suggestions

SgtPooki · 2025-01-23T17:33:09Z

src/hooks/use-current-page.ts

+    const decodedMaddrs = maddrs != null ? decodeURIComponent(maddrs).split(',') : null
+    const multiaddrs = decodedMaddrs != null ? decodedMaddrs.map(maddr => multiaddr(maddr)) : null


nit: I feel like a separate useMemo on a maddrs dep with the fully resolved multiaddrs would be a little better.. but there is likely little difference.. sometimes react can get wonky if you have different effects too separated.

SgtPooki · 2025-01-23T17:35:52Z

src/hooks/use-current-page.ts

+    const decodedMaddrs = maddrs != null ? decodeURIComponent(maddrs).split(',') : null
+    const multiaddrs = decodedMaddrs != null ? decodedMaddrs.map(maddr => multiaddr(maddr)) : null
+
+    dispatch({ type: 'fetch_start', cid: maybeCid, filename: decodedFilename, providerMaddrs: multiaddrs })


I think we need to cancel the fetch on unmount. maybe create an abort controller and pass signal to fetch_start, and abort on unmount?

Suggested change

dispatch({ type: 'fetch_start', cid: maybeCid, filename: decodedFilename, providerMaddrs: multiaddrs })

const abrtCtl = new AbortController()

// ...

dispatch({ type: 'fetch_start', cid: maybeCid, filename: decodedFilename, providerMaddrs: multiaddrs, signal: abrtCtl.signal })

return () => {

// cancel fetching

abrtCtl.abort('unmounted effect..')

}

SgtPooki · 2025-01-23T17:40:59Z

src/lib/share-addresses.ts

+  // TODO: Get only WebRTC addrs dialable from other browsers, e.g. WebRTC Direct, WebRTC Secure WebSockets, and WebRTC WebTransport (currently not included in Helia transports)
+  return addrs?.filter((addr: Multiaddr) => WebRTC.exactMatch(addr)) ?? []


are you talking about:

Suggested change

// TODO: Get only WebRTC addrs dialable from other browsers, e.g. WebRTC Direct, WebRTC Secure WebSockets, and WebRTC WebTransport (currently not included in Helia transports)

return addrs?.filter((addr: Multiaddr) => WebRTC.exactMatch(addr)) ?? []

return addrs?.filter((addr: Multiaddr) => WebRTC.exactMatch(addr) || (Circuit.exactMatch(addr) && (WebRTCDirect.matches(addr) || WebTransport.matches(addr) || WebSockets.matches(addr) || WebSocketsSecure.matches(addr)))) ?? []

SgtPooki · 2025-01-23T17:41:46Z

src/providers/files-provider.tsx

+  // Whether or not to provide CIDs to the DHT
+  provideToDHT: boolean


love this. unfortunately, providing seems to hang forever when this is checked and I add a file.

Also, we will want a TODO or issue for "reproviding" to DHT if this is checked after files have already been added.

SgtPooki · 2025-01-23T17:43:38Z

src/providers/files-provider.tsx

+   * - For each unpublished file:
+   * --- Provides the file to the IPFS network
+   * --- Updates state on success/failure
+   * - Handles cancellation via AbortController


i haven't confirmed whether this is working for files that are added when "provide to DHT" is not checked, and then the "provide to DHT" is checked.. but we should be kicking off publishing to DHT and updating UI that something is in progress.

SgtPooki · 2025-01-24T17:51:33Z

FYI there is a bug here. When i share a single file, and click the folder share (after previously having multiple files.. but after a refresh) I get a link that loads up all the multiple files, even though my share is currently only showing a single file:

Sharer view

Downloader view

2color · 2025-01-24T18:24:52Z

FYI there is a bug here. When i share a single file, and click the folder share (after previously having multiple files.. but after a refresh) I get a link that loads up all the multiple files, even though my share is currently only showing a single file:

I'll take a look at that.

I think the combination of a persisted block/data store and the way we use mfs, causes that to happen naturally (maybe on main too?)

SgtPooki · 2025-01-24T19:55:19Z

I think the combination of a persisted block/data store and the way we use mfs, causes that to happen naturally (maybe on main too?)

it totally may be on main.. let me test that out

SgtPooki · 2025-01-27T16:12:33Z

it totally may be on main.. let me test that out

its pretty difficult to get main to publish to DHT and get the share link tbh..

SgtPooki · 2025-01-27T16:21:25Z

Ok yep, issue exists on main:

Provider

Downloader

2color added 3 commits January 10, 2025 15:14

refactor: remove unused pending prop

b0b8715

deps: bump downstream deps like libp2p

013a901

feat: embed provider webrtc maddr into share link

f964926

2color requested a review from SgtPooki January 13, 2025 13:31

2color added 10 commits January 13, 2025 16:52

fix: add missing dep

d63b775

fix: lint error

f8e1ff0

fix: linting errors

3831b9d

fix: build error

86360cc

fix: refine dialability in node info box

3dd4e1e

fix: peer id overflow on mobile

843611e

refactor: side effects in files-provider

e0d3cbb

* remove download provider * dispatch begin download in use-current page

chore: remove unnecessary style

6b9b15d

fix: small fixes

50c8cb4

feat: make dht providing optional

d0fc2c8

SgtPooki approved these changes Jan 23, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: embed provider webrtc maddr into share link #206

feat: embed provider webrtc maddr into share link #206

2color commented Jan 13, 2025 •

edited

Loading

SgtPooki commented Jan 23, 2025

SgtPooki commented Jan 23, 2025 •

edited

Loading

SgtPooki commented Jan 23, 2025

SgtPooki left a comment

SgtPooki Jan 23, 2025

SgtPooki Jan 23, 2025

SgtPooki Jan 23, 2025

SgtPooki Jan 23, 2025

SgtPooki Jan 23, 2025

SgtPooki commented Jan 24, 2025

2color commented Jan 24, 2025

SgtPooki commented Jan 24, 2025

SgtPooki commented Jan 27, 2025

SgtPooki commented Jan 27, 2025

		const decodedMaddrs = maddrs != null ? decodeURIComponent(maddrs).split(',') : null
		const multiaddrs = decodedMaddrs != null ? decodedMaddrs.map(maddr => multiaddr(maddr)) : null

-    dispatch({ type: 'fetch_start', cid: maybeCid, filename: decodedFilename, providerMaddrs: multiaddrs })
+    const abrtCtl = new AbortController()
+    // ...
+    dispatch({ type: 'fetch_start', cid: maybeCid, filename: decodedFilename, providerMaddrs: multiaddrs, signal: abrtCtl.signal })
+    return () => {
+      // cancel fetching
+      abrtCtl.abort('unmounted effect..')
+    }

		// TODO: Get only WebRTC addrs dialable from other browsers, e.g. WebRTC Direct, WebRTC Secure WebSockets, and WebRTC WebTransport (currently not included in Helia transports)
		return addrs?.filter((addr: Multiaddr) => WebRTC.exactMatch(addr)) ?? []

		// Whether or not to provide CIDs to the DHT
		provideToDHT: boolean

feat: embed provider webrtc maddr into share link #206

Are you sure you want to change the base?

feat: embed provider webrtc maddr into share link #206

Conversation

2color commented Jan 13, 2025 • edited Loading

Background

What's in this PR

TODO

SgtPooki commented Jan 23, 2025

SgtPooki commented Jan 23, 2025 • edited Loading

SgtPooki commented Jan 23, 2025

SgtPooki left a comment

Choose a reason for hiding this comment

SgtPooki Jan 23, 2025

Choose a reason for hiding this comment

SgtPooki Jan 23, 2025

Choose a reason for hiding this comment

SgtPooki Jan 23, 2025

Choose a reason for hiding this comment

SgtPooki Jan 23, 2025

Choose a reason for hiding this comment

SgtPooki Jan 23, 2025

Choose a reason for hiding this comment

SgtPooki commented Jan 24, 2025

Sharer view

Downloader view

2color commented Jan 24, 2025

SgtPooki commented Jan 24, 2025

SgtPooki commented Jan 27, 2025

SgtPooki commented Jan 27, 2025

Provider

Downloader

2color commented Jan 13, 2025 •

edited

Loading

SgtPooki commented Jan 23, 2025 •

edited

Loading