subscribe and display connections

main.js

@@ -3,6 +3,7 @@ const Path = require('node:path')
 const URL = require('node:url')
 const p = require('node:util').promisify
 const Keypair = require('ppppp-keypair')
+const awaitable = require('pull-awaitable')
 
 // WARNING monkey patch! --------------------------------------
 const na = require('sodium-native')
@@ -62,7 +63,7 @@ const peer = require('secret-stack/bare')()
       },
     },
     net: {
-      autostart: true,
+      autostart: false,
     },
   })
 
@@ -111,6 +112,8 @@ async function loadAccount() {
   const name = profile?.name ?? ''
   globalAccountName = name
 
+  peer.net.start()
+
   return { id, name }
 }
 
@@ -210,6 +213,16 @@ function subscribeToReadElements() {
   }, 32)
 }
 
+let hasSubscribedToConnections = false
+async function subscribeToConnections() {
+  if (hasSubscribedToConnections) return
+  hasSubscribedToConnections = true
+
+  for await (const connections of awaitable(peer.net.peers())) {
+    mainWindow.webContents.send('connections', connections)
+  }
+}
+
 async function handlePPPPPUri(ev, uri) {
   if (!globalAccountID) {
     setTimeout(handlePPPPPUri, 100, null, uri)
@@ -287,6 +300,7 @@ if (!hasLock) {
     ipcMain.handle('writeElements', writeElements)
     ipcMain.handle('consumeInvite', handlePPPPPUri)
     ipcMain.handle('subscribeToReadElements', subscribeToReadElements)
+    ipcMain.handle('subscribeToConnections', subscribeToConnections)
     createWindow()
     if (process.argv.length > 1) {
       handlePPPPPUri(null, process.argv[process.argv.length - 1])

package-lock.json

@@ -22,10 +22,11 @@
         "ppppp-hub-client": "github:staltz/ppppp-hub-client#554a36e46637c5e6314d3393db20736f2b8e59bc",
         "ppppp-invite": "github:staltz/ppppp-invite#745eea3de0b98a4896face25cb31288c9b0c9ed2",
         "ppppp-keypair": "github:staltz/ppppp-keypair#61ef4420578f450dc2cc7b1efc1c5a691a871c74",
-        "ppppp-net": "github:staltz/ppppp-net#809d3e774bca8742652be06e7e39b01182dca193",
+        "ppppp-net": "github:staltz/ppppp-net#5b79b9566bb425e27169f90544bc54b8b418b87c",
         "ppppp-promise": "github:staltz/ppppp-promise#55a48ddd069e8b9673442927a9f91d6931cb520d",
         "ppppp-set": "github:staltz/ppppp-set#8983ba29f03db95a76b4bd9a55aa4392b350fdbb",
         "ppppp-sync": "github:staltz/ppppp-sync#1d3169724d80b688f7c3cf20e492de8ae86cb350",
+        "pull-awaitable": "1.0.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-outside-click-handler": "1.3.0",
@@ -15816,8 +15817,8 @@
     },
     "node_modules/ppppp-net": {
       "version": "1.0.0",
-      "resolved": "git+ssh://git@github.com/staltz/ppppp-net.git#809d3e774bca8742652be06e7e39b01182dca193",
+      "resolved": "git+ssh://git@github.com/staltz/ppppp-net.git#5b79b9566bb425e27169f90544bc54b8b418b87c",
-      "integrity": "sha512-miCv7SGqfUO7Kju8S72GT9ok2/zg0DYpcFjrVaNB/Mx4r5+kkJCva0X0BpHC9Nij5uCMAyny4o5MSuXV1fIl7w==",
+      "integrity": "sha512-jepywRPKWX8O5Z3fj9FC59dhhNWpI3DuFNHPU/ggWlUPpflsRh+eVB6thcWdxB21HWF50G6nHf9kAPNQuhy7KA==",
       "license": "MIT",
       "dependencies": {
         "@types/pull-stream": "^3.6.7",

package.json

@@ -28,8 +28,9 @@
     "ppppp-conductor": "github:staltz/ppppp-conductor#51d61bcd5b49192b22027d0e31a3cbf3c691724c",
     "ppppp-hub-client": "github:staltz/ppppp-hub-client#554a36e46637c5e6314d3393db20736f2b8e59bc",
     "ppppp-invite": "github:staltz/ppppp-invite#745eea3de0b98a4896face25cb31288c9b0c9ed2",
-    "ppppp-net": "github:staltz/ppppp-net#809d3e774bca8742652be06e7e39b01182dca193",
+    "ppppp-net": "github:staltz/ppppp-net#5b79b9566bb425e27169f90544bc54b8b418b87c",
     "ppppp-promise": "github:staltz/ppppp-promise#55a48ddd069e8b9673442927a9f91d6931cb520d",
+    "pull-awaitable": "1.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-outside-click-handler": "1.3.0",

preload.js

@@ -10,5 +10,9 @@ contextBridge.exposeInMainWorld('electronAPI', {
   onReadElements: (callback) => {
     ipcRenderer.invoke('subscribeToReadElements')
     ipcRenderer.on('readElements', (_event, value) => callback(value))
-  }
+  },
+  onConnections: (callback) => {
+    ipcRenderer.invoke('subscribeToConnections')
+    ipcRenderer.on('connections', (_event, value) => callback(value))
+  },
 })

src/App.js

@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { Excalidraw } from '@excalidraw/excalidraw'
 import debounce from 'debounce'
 import MyAccount from './MyAccount'
+import Connections from './Connections'
 import Button from './Button'
 import GreenButton from './GreenButton'
 import CreateInviteModal from './CreateInviteModal'
@@ -75,6 +76,7 @@ function App() {
         <Button onClick={createInvite}>Invite</Button>
         <div className="h-2"> </div>
         <GreenButton onClick={join}>Join</GreenButton>
+        <Connections />
       </div>
       <div className="w-5/6">
         <Excalidraw

src/Connections.js

@@ -0,0 +1,39 @@
+const { useState, useEffect } = require('react')
+
+function tinyMultiaddr(multiaddr) {
+  const [before, cred] = multiaddr.split('/shse/')
+  const pubkey = cred.split('.')[0]
+  return pubkey.slice(0, 12) + '…' + (before.includes('/ip4') ? ' (hub)' : '')
+}
+
+function Connections() {
+  const [connections, setConnections] = useState([])
+  useEffect(() => {
+    window.electronAPI.onConnections((arr) => {
+      setConnections(arr)
+    })
+  })
+
+  return (
+    <>
+    {connections.length > 0 &&
+      <div className="mt-4 text-sm text-gray-500">Connections:</div>
+    }
+      {connections.map(([multiaddr, info]) => (
+        <div
+          key={multiaddr}
+          className="flex flex-row items-center mt-1 text-xs text-gray-500 font-mono overflow-x-hidden overflow-ellipsis"
+        >
+          {info.state === 'connected' ? (
+            <div className="shrink-0 w-2 h-2 mb-0.5 bg-green-500 rounded-full mr-1" />
+          ) : (
+            <div className="shrink-0 w-2 h-2 mb-0.5 bg-yellow-500 rounded-full mr-1" />
+          )}
+          {tinyMultiaddr(multiaddr)}
+        </div>
+      ))}
+    </>
+  )
+}
+
+export default Connections