deps: update libp2p to 0.45.x

packages/frontend/next.config.js

@@ -1,6 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  productionBrowserSourceMaps: true,
 }
 
 module.exports = nextConfig

packages/frontend/package.json

@@ -7,26 +7,27 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@chainsafe/libp2p-gossipsub": "6.2.0",
-    "@chainsafe/libp2p-noise": "^11.0.0",
-    "@chainsafe/libp2p-yamux": "^3.0.5",
+    "@chainsafe/libp2p-gossipsub": "^8.0.0",
+    "@chainsafe/libp2p-noise": "^12.0.1",
+    "@chainsafe/libp2p-yamux": "^4.0.2",
     "@download/blockies": "^1.0.3",
     "@headlessui/react": "^1.7.13",
     "@heroicons/react": "^2.0.16",
-    "@libp2p/bootstrap": "^6.0.0",
-    "@libp2p/kad-dht": "^8.0.6",
-    "@libp2p/webrtc": "^1.1.2",
-    "@libp2p/websockets": "^5.0.3",
-    "@libp2p/webtransport": "^1.0.7",
-    "@multiformats/mafmt": "^12.1.0",
-    "@multiformats/multiaddr": "^12.1.1",
+    "@libp2p/bootstrap": "^8.0.0",
+    "@libp2p/interface-pubsub": "^4.0.1",
+    "@libp2p/kad-dht": "^9.3.6",
+    "@libp2p/webrtc": "^2.0.6",
+    "@libp2p/websockets": "^6.0.3",
+    "@libp2p/webtransport": "^2.0.1",
+    "@multiformats/mafmt": "^12.1.5",
+    "@multiformats/multiaddr": "^12.1.3",
     "@types/node": "18.14.6",
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
     "debug": "^4.3.4",
     "eslint": "8.35.0",
     "eslint-config-next": "13.2.3",
-    "libp2p": "^0.44.0",
+    "libp2p": "^0.45.5",
     "next": "13.2.3",
     "private-ip": "^3.0.0",
     "react": "18.2.0",

packages/frontend/src/components/chat.tsx

@@ -62,12 +62,12 @@ export default function ChatContainer() {
       }
     }
 
-    libp2p.pubsub.addEventListener('message', messageCB)
+    libp2p.services.pubsub.addEventListener('message', messageCB)
 
     return () => {
       // Cleanup handlers 👇
       // libp2p.pubsub.unsubscribe(CHAT_TOPIC)
-      libp2p.pubsub.removeEventListener('message', messageCB)
+      libp2p.services.pubsub.removeEventListener('message', messageCB)
     }
   }, [libp2p, messageHistory, setMessageHistory])
 
@@ -76,10 +76,10 @@ export default function ChatContainer() {
 
     console.log(
       'peers in gossip:',
-      libp2p.pubsub.getSubscribers(CHAT_TOPIC).toString(),
+      libp2p.services.pubsub.getSubscribers(CHAT_TOPIC).toString(),
     )
 
-    const res = await libp2p.pubsub.publish(
+    const res = await libp2p.services.pubsub.publish(
       CHAT_TOPIC,
       new TextEncoder().encode(input),
     )

packages/frontend/src/context/ctx.tsx

@@ -10,10 +10,12 @@ import type { Libp2p } from 'libp2p'
 import { startLibp2p } from '../lib/libp2p'
 import { ChatProvider } from './chat-ctx'
 import { PeerProvider } from './peer-ctx'
+import { ListenAddressesProvider } from './listen-addresses-ctx'
+import { PubSub } from '@libp2p/interface-pubsub'
 
 // 👇 The context type will be avilable "anywhere" in the app
 interface Libp2pContextInterface {
-  libp2p: Libp2p
+  libp2p: Libp2p<{ pubsub: PubSub }>
 }
 export const libp2pContext = createContext<Libp2pContextInterface>({
   // @ts-ignore to avoid having to check isn't undefined everywhere. Can't be undefined because children are conditionally rendered
@@ -25,7 +27,7 @@ interface WrapperProps {
 }
 let loaded = false
 export function AppWrapper({ children }: WrapperProps) {
-  const [libp2p, setLibp2p] = useState<Libp2p>()
+  const [libp2p, setLibp2p] = useState<Libp2p<{ pubsub: PubSub }>>()
 
   useEffect(() => {
     const init = async () => {
@@ -58,7 +60,9 @@ export function AppWrapper({ children }: WrapperProps) {
     <libp2pContext.Provider value={{ libp2p }}>
       <ChatProvider>
         <PeerProvider>
-          {children}
+          <ListenAddressesProvider>
+            {children}
+          </ListenAddressesProvider>
         </PeerProvider>
       </ChatProvider>
     </libp2pContext.Provider>

packages/frontend/src/context/listen-addresses-ctx.tsx

@@ -0,0 +1,34 @@
+import React, { ReactNode, createContext, useContext, useState } from 'react'
+import { Multiaddr } from '@multiformats/multiaddr'
+
+export interface ListenAddresses {
+	multiaddrs: Multiaddr[]
+}
+
+export interface ListenAddressesContextInterface {
+	listenAddresses: ListenAddresses;
+	setListenAddresses: (addresses: ListenAddresses) => void;
+}
+
+export const listenAddressesContext = createContext<ListenAddressesContextInterface>({
+	listenAddresses: {
+		multiaddrs: []
+	},
+	setListenAddresses: () => { }
+})
+
+export const useListenAddressesContext = () => {
+	return useContext(listenAddressesContext);
+};
+
+export const ListenAddressesProvider = ({ children }: { children: ReactNode }) => {
+	const [listenAddresses, setListenAddresses] = useState<ListenAddresses>({
+		multiaddrs: []
+	});
+
+	return (
+		<listenAddressesContext.Provider value={{ listenAddresses, setListenAddresses }}>
+			{children}
+		</listenAddressesContext.Provider>
+	);
+};

packages/frontend/src/lib/libp2p.ts

@@ -1,4 +1,5 @@
 import { createLibp2p, Libp2p } from 'libp2p'
+import { identifyService } from 'libp2p/identify'
 import { noise } from '@chainsafe/libp2p-noise'
 import { yamux } from '@chainsafe/libp2p-yamux'
 import { bootstrap } from '@libp2p/bootstrap'
@@ -15,42 +16,47 @@ import { webTransport } from '@libp2p/webtransport'
 import { webRTC, webRTCDirect } from '@libp2p/webrtc'
 import { CHAT_TOPIC, CIRCUIT_RELAY_CODE, WEBRTC_BOOTSTRAP_NODE, WEBTRANSPORT_BOOTSTRAP_NODE } from './constants'
 import * as filters from "@libp2p/websockets/filters"
-
-// @ts-ignore
 import { circuitRelayTransport } from 'libp2p/circuit-relay'
 
-
 export async function startLibp2p() {
   // localStorage.debug = 'libp2p*,-*:trace'
   // application-specific data lives in the datastore
 
   const libp2p = await createLibp2p({
-    // set the inbound and outbound stream limits to these values
-    // because we were seeing a lot of the default limits being hit
-    dht: kadDHT({
-      protocolPrefix: "/universal-connectivity",
-      maxInboundStreams: 5000,
-      maxOutboundStreams: 5000,
-      clientMode: true
-    }),
-    transports: [webTransport(), webSockets({
-      filter: filters.all,
-    }), webRTC({
-      rtcConfiguration: {
-        iceServers:[
-          {
+    addresses: {
+      listen: [
+        '/webrtc'
+      ]
+    },
+    transports: [
+      webTransport(),
+      webSockets({
+        filter: filters.all,
+      }),
+      webRTC({
+        rtcConfiguration: {
+          iceServers:[{
             urls: [
               'stun:stun.l.google.com:19302',
               'stun:global.stun.twilio.com:3478'
             ]
-          }
-        ]
-      }
-    }), webRTCDirect(), circuitRelayTransport({
-      discoverRelays: 10,
-    }),],
+          }]
+        }
+      }),
+      webRTCDirect(),
+      circuitRelayTransport({
+        discoverRelays: 1,
+      })
+    ],
+    connectionManager: {
+      maxConnections: 10,
+      minConnections: 5
+    },
     connectionEncryption: [noise()],
     streamMuxers: [yamux()],
+    connectionGater: {
+      denyDialMultiaddr: async () => false,
+    },
     peerDiscovery: [
       bootstrap({
         list: [
@@ -59,36 +65,34 @@ export async function startLibp2p() {
         ],
       }),
     ],
-    pubsub: gossipsub({
-      allowPublishToZeroPeers: true,
-      msgIdFn: msgIdFnStrictNoSign,
-      ignoreDuplicatePublishError: true,
-    }),
-    identify: {
-      // these are set because we were seeing a lot of identify and identify push
-      // stream limits being hit
-      maxPushOutgoingStreams: 1000,
-      maxPushIncomingStreams: 1000,
-      maxInboundStreams: 1000,
-      maxOutboundStreams: 1000,
-    },
-    autonat: {
-      startupDelay: 60 * 60 * 24 * 1000,
-    },
+    services: {
+      pubsub: gossipsub({
+        allowPublishToZeroPeers: true,
+        msgIdFn: msgIdFnStrictNoSign,
+        ignoreDuplicatePublishError: true,
+      }),
+      dht: kadDHT({
+        protocolPrefix: "/universal-connectivity",
+        maxInboundStreams: 5000,
+        maxOutboundStreams: 5000,
+        clientMode: true,
+      }),
+      identify: identifyService()
+    }
   })
 
-  libp2p.pubsub.subscribe(CHAT_TOPIC)
+  libp2p.services.pubsub.subscribe(CHAT_TOPIC)
 
-  libp2p.peerStore.addEventListener('change:multiaddrs', ({detail: {peerId, multiaddrs}}) => {
+  libp2p.addEventListener('self:peer:update', ({detail: { peer }}) => {
+    const multiaddrs = peer.addresses.map(({ multiaddr }) => multiaddr)
 
-    console.log(`changed multiaddrs: peer ${peerId.toString()} multiaddrs: ${multiaddrs}`)
-    setWebRTCRelayAddress(multiaddrs, libp2p.peerId.toString())
+    console.log(`changed multiaddrs: peer ${peer.id.toString()} multiaddrs: ${multiaddrs}`)
   })
 
   return libp2p
 }
 
-// message IDs are used to dedup inbound messages
+// message IDs are used to dedupe inbound messages
 // every agent in network should use the same message id function
 // messages could be perceived as duplicate if this isnt added (as opposed to rust peer which has unique message ids)
 export async function msgIdFnStrictNoSign(msg: Message): Promise<Uint8Array> {
@@ -100,17 +104,6 @@ export async function msgIdFnStrictNoSign(msg: Message): Promise<Uint8Array> {
 }
 
 
-export const setWebRTCRelayAddress = (maddrs: Multiaddr[], peerId: string) => {
-  maddrs.forEach((maddr) => {
-    if (maddr.protoCodes().includes(CIRCUIT_RELAY_CODE)) {
-
-      const webRTCrelayAddress = multiaddr(maddr.toString() + '/webrtc/p2p/' + peerId)
-
-      console.log(`Listening on '${webRTCrelayAddress.toString()}'`)
-    }
-  })
-}
-
 export const connectToMultiaddr =
   (libp2p: Libp2p) => async (multiaddr: Multiaddr) => {
     console.log(`dialling: ${multiaddr.toString()}`)

packages/frontend/src/pages/index.tsx

@@ -8,26 +8,46 @@ import { useCallback, useEffect, useState } from 'react'
 import Image from 'next/image'
 import { multiaddr } from '@multiformats/multiaddr'
 import { connectToMultiaddr } from '../lib/libp2p'
-
+import { useListenAddressesContext } from '../context/listen-addresses-ctx'
 
 export default function Home() {
   const { libp2p } = useLibp2pContext()
   const { peerStats, setPeerStats } = usePeerContext()
+  const { listenAddresses, setListenAddresses } = useListenAddressesContext()
   const [maddr, setMultiaddr] = useState('')
 
   useEffect(() => {
-    const peerConnectedCB = (evt: any) => {
-      const connection = evt.detail
-      setPeerStats({ ...peerStats, peerIds: [...peerStats.peerIds, connection.remotePeer], connections: [...peerStats.connections, connection], connected: true })
-    }
+    const interval = setInterval(() => {
+      const connections = libp2p.getConnections()
 
-    libp2p.addEventListener('peer:connect', peerConnectedCB)
+      setPeerStats({
+        ...peerStats,
+        peerIds: connections.map(conn => conn.remotePeer),
+        connections: connections,
+        connected: connections.length > 0,
+      })
+    }, 1000)
 
     return () => {
-      libp2p.removeEventListener('peer:connect', peerConnectedCB)
+      clearInterval(interval)
     }
   }, [libp2p, peerStats, setPeerStats])
 
+  useEffect(() => {
+    const interval = setInterval(() => {
+      const multiaddrs = libp2p.getMultiaddrs()
+
+      setListenAddresses({
+        ...listenAddresses,
+        multiaddrs
+      })
+    }, 1000)
+
+    return () => {
+      clearInterval(interval)
+    }
+  }, [libp2p, listenAddresses, setListenAddresses])
+
   type PeerProtoTuple = {
     peerId: string
     protocols: string[]
@@ -54,7 +74,6 @@ export default function Home() {
       peerId,
       protocols,
     }))
-
   }
 
   const handleConnectToMultiaddr = useCallback(
@@ -113,6 +132,16 @@ export default function Home() {
               <ul className="my-2 space-y-2 break-all">
                 <li className="">This PeerID: {libp2p.peerId.toString()}</li>
               </ul>
+              Addresses:
+              <ul className="my-2 space-y-2 break-all">
+                {
+                  listenAddresses.multiaddrs.map((ma, index) => {
+                    return (
+                      <li key={`ma-${index}`}>{ma.toString()}</li>
+                    )
+                  })
+                }
+              </ul>
               <div className="my-6 w-1/2">
                 <label
                   htmlFor="peer-id"
@@ -141,7 +170,6 @@ export default function Home() {
                 </button>
               </div>
 
-
               <div className="my-4 inline-flex items-center text-xl">
                 Connected:{' '}
                 {peerStats.connected ? (