Merge remote-tracking branch 'origin/main' into add-webrtc-to-go-peer

* origin/main:
  deps: upgrade to libp2p v2 (#202)
  chore: enable unoptimised images
  chore: fix output mode
  feat: direct messages (#175)
  feat: loading screen (#176)
  deps: bump @libp2p/circuit-relay-v2 from 1.0.22 to 1.0.25 in /js-peer (#163)
  feat: rust peer joins peer discovery topic (#174)
  deps: bump @types/node from 20.12.7 to 20.14.8 in /js-peer (#166)
  deps: bump @types/react from 18.3.2 to 18.3.3 in /js-peer (#164)
  deps: bump libp2p from 1.5.1 to 1.6.1 in /js-peer (#162)
  deps: bump @libp2p/webtransport from 4.0.30 to 4.0.32 in js-peer (#161)
  deps: bump eslint-config-next from 14.2.2 to 14.2.3 in /js-peer (#159)
  deps: bump github.com/multiformats/go-multiaddr in /go-peer (#155)
  deps: bump react-dom and @types/react-dom in /js-peer (#158)
  deps: bump next from 14.2.2 to 14.2.3 in /js-peer (#151)
  deps: bump react and @types/react in /js-peer (#152)

js-peer/.eslintrc.json

@@ -1,3 +1,7 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "@next/next/no-img-element": "off"
+  },
+  "ignorePatterns": ["node_modules/", "build/", ".next/", "src/lib/protobuf/"]
 }

js-peer/.gitignore

@@ -34,3 +34,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+certificates

js-peer/next.config.js

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

js-peer/package.json

@@ -1,51 +1,57 @@
 {
   "name": "universal-connectivity-browser",
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --experimental-https",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "tsc": "tsc --noEmit -p tsconfig.json",
+    "protobuf": "protons src/lib/protobuf/*.proto"
   },
   "dependencies": {
-    "@chainsafe/libp2p-gossipsub": "^13.1.0",
-    "@chainsafe/libp2p-noise": "^15.1.0",
-    "@chainsafe/libp2p-yamux": "^6.0.2",
+    "@chainsafe/libp2p-gossipsub": "^14.1.0",
+    "@chainsafe/libp2p-noise": "^16.0.0",
+    "@chainsafe/libp2p-yamux": "^7.0.1",
     "@headlessui/react": "^2.0.1",
-    "@helia/delegated-routing-v1-http-api-client": "^3.0.1",
+    "@helia/delegated-routing-v1-http-api-client": "^4.1.1",
     "@heroicons/react": "^2.1.3",
-    "@libp2p/bootstrap": "^10.1.1",
-    "@libp2p/circuit-relay-v2": "^1.1.1",
-    "@libp2p/identify": "^2.1.1",
+    "@libp2p/bootstrap": "^11.0.10",
+    "@libp2p/circuit-relay-v2": "^3.1.0",
+    "@libp2p/identify": "^3.0.10",
     "@libp2p/interface-pubsub": "^4.0.1",
-    "@libp2p/logger": "^4.0.16",
-    "@libp2p/pubsub-peer-discovery": "^10.0.2",
-    "@libp2p/webrtc": "^4.1.1",
-    "@libp2p/websockets": "^8.1.1",
-    "@libp2p/webtransport": "^4.1.1",
-    "@multiformats/multiaddr": "^12.2.1",
+    "@libp2p/logger": "^5.1.3",
+    "@libp2p/ping": "^2.0.10",
+    "@libp2p/pubsub-peer-discovery": "^11.0.0",
+    "@libp2p/webrtc": "^5.0.16",
+    "@libp2p/websockets": "^9.0.11",
+    "@libp2p/webtransport": "^5.0.16",
+    "@multiformats/multiaddr": "^12.3.1",
     "clsx": "^2.1.1",
-    "debug": "^4.3.4",
-    "it-length-prefixed": "^9.0.4",
-    "it-map": "^3.1.0",
+    "debug": "^4.3.7",
+    "it-length-prefixed": "^9.1.0",
+    "it-map": "^3.1.1",
     "it-pipe": "^3.0.1",
-    "libp2p": "^1.8.0",
-    "next": "14.2.2",
-    "react": "18.2.0",
+    "it-protobuf-stream": "^1.1.5",
+    "libp2p": "^2.2.1",
+    "next": "14.2.13",
+    "protons-runtime": "^5.5.0",
+    "react": "18.3.1",
     "react-18-blockies": "^1.0.6",
-    "react-dom": "18.2.0",
-    "uint8arrays": "^5.0.3",
+    "react-dom": "18.3.1",
+    "uint8arrays": "^5.1.0",
     "usehooks-ts": "^3.1.0",
-    "uuid": "^9.0.1"
+    "uuid": "^10.0.0"
   },
   "devDependencies": {
-    "@types/node": "20.12.7",
-    "@types/react": "18.2.79",
-    "@types/react-dom": "18.2.25",
+    "@types/node": "20.14.8",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
     "@types/uuid": "^9.0.8",
     "autoprefixer": "^10.4.19",
     "eslint": "8.57.0",
-    "eslint-config-next": "14.2.2",
+    "eslint-config-next": "14.2.3",
     "postcss": "^8.4.38",
+    "protons": "^7.6.0",
     "tailwindcss": "^3.4.3",
     "typescript": "5.4.5"
   }

js-peer/src/components/booting.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import Image from 'next/image'
+import Spinner from './spinner'
+
+interface Props {
+  error?: string
+}
+
+export function Booting({ error }: Props) {
+  return (
+    <div className="grid h-screen place-items-center">
+      <div className="text-center">
+        <Image
+          src="/libp2p-logo.svg"
+          alt="libp2p logo"
+          height="156"
+          width="156"
+          className="text-white mx-auto mb-5"
+        />
+        <h2 className="text-3xl font-bold text-gray-900 mb-2">Initializing libp2p peer</h2>
+        {!error && (
+          <>
+            <p className="text-lg text-gray-900 mb-2">Connecting to bootstrap nodes...</p>
+            <Spinner />
+          </>
+        )}
+        {error && error !== '' && <p className="text-lg text-gray-900">{error}</p>}
+        {error && error === '' && <p className="text-lg text-gray-900">Unknown error</p>}
+      </div>
+    </div>
+  )
+}

js-peer/src/components/chat-peer-list.tsx

@@ -2,15 +2,15 @@ import { useLibp2pContext } from '@/context/ctx'
 import { CHAT_TOPIC } from '@/lib/constants'
 import React, { useEffect, useState } from 'react'
 import type { PeerId } from '@libp2p/interface'
-import Blockies from 'react-18-blockies'
+import { PeerWrapper } from './peer'
 
 export function ChatPeerList() {
   const { libp2p } = useLibp2pContext()
   const [subscribers, setSubscribers] = useState<PeerId[]>([])
 
   useEffect(() => {
     const onSubscriptionChange = () => {
-      const subscribers = libp2p.services.pubsub.getSubscribers(CHAT_TOPIC)
+      const subscribers = libp2p.services.pubsub.getSubscribers(CHAT_TOPIC) as PeerId[]
       setSubscribers(subscribers)
     }
     onSubscriptionChange()
@@ -23,28 +23,16 @@ export function ChatPeerList() {
   return (
     <div className="border-l border-gray-300 lg:col-span-1">
       <h2 className="my-2 mb-2 ml-2 text-lg text-gray-600">Peers</h2>
-      <ul className="overflow-auto h-[32rem]">
-        {<Peer key={libp2p.peerId.toString()} peer={libp2p.peerId} self />}
+      <div className="overflow-auto h-[32rem]">
+        <div className="px-3 py-2 border-b border-gray-300 focus:outline-none">
+          {<PeerWrapper peer={libp2p.peerId} self withName={true} withUnread={false} />}
+        </div>
         {subscribers.map((p) => (
-          <Peer key={p.toString()} peer={p} self={false} />
+          <div key={p.toString()} className="px-3 py-2 border-b border-gray-300 focus:outline-none">
+            <PeerWrapper peer={p} self={false} withName={true} withUnread={true} />
+          </div>
         ))}
-      </ul>
-    </div>
-  )
-}
-
-function Peer({ peer, self }: { peer: PeerId; self: boolean }) {
-  return (
-    <li className="flex items-center px-3 py-2 text-sm transition duration-150 ease-in-out border-b border-gray-300 focus:outline-none">
-      <Blockies seed={peer.toString()} size={15} scale={3} className="rounded max-h-10 max-w-10" />
-      <div className="w-full pb-2">
-        <div className="flex justify-between">
-          <span className={`block ml-2 font-semibold ${self ? 'text-indigo-700-600' : 'text-gray-600'}`}>
-            {peer.toString().slice(-7)}
-            {self && ' (You)'}
-          </span>
-        </div>
       </div>
-    </li>
+    </div>
   )
 }