@libp2p/devtools-metrics 0.1.1 → 0.2.0-15eb66428

package/dist/src/utils/get-peers.js

@@ -0,0 +1,42 @@
+import { base64 } from 'multiformats/bases/base64';
+import { toObject } from './to-object.js';
+export async function getPeers(components, log) {
+    const peers = [];
+    const connections = components.connectionManager.getConnectionsMap();
+    const connectedAddresses = [...connections.values()].flatMap(conn => conn).map(conn => conn.remoteAddr.toString());
+    for (const [peerId, conns] of connections.entries()) {
+        try {
+            const peer = await components.peerStore.get(peerId);
+            peers.push({
+                id: peerId,
+                addresses: peer.addresses.map(({ isCertified, multiaddr }) => {
+                    return {
+                        multiaddr,
+                        isCertified,
+                        isConnected: connectedAddresses.includes(multiaddr.toString())
+                    };
+                }),
+                protocols: [...peer.protocols],
+                tags: toObject(peer.tags, (t) => t.value),
+                metadata: toObject(peer.metadata, (buf) => base64.encode(buf))
+            });
+        }
+        catch (err) {
+            log.error('could not load peer data from peer store', err);
+            peers.push({
+                id: peerId,
+                addresses: conns.map(conn => {
+                    return {
+                        multiaddr: conn.remoteAddr,
+                        isConnected: connectedAddresses.includes(conn.remoteAddr.toString())
+                    };
+                }),
+                protocols: [],
+                tags: {},
+                metadata: {}
+            });
+        }
+    }
+    return peers;
+}
+//# sourceMappingURL=get-peers.js.map

package/dist/src/utils/get-peers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-peers.js","sourceRoot":"","sources":["../../../src/utils/get-peers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAUzC,MAAM,CAAC,KAAK,UAAU,QAAQ,CAAE,UAAsB,EAAE,GAAW;IACjE,MAAM,KAAK,GAAW,EAAE,CAAA;IACxB,MAAM,WAAW,GAAG,UAAU,CAAC,iBAAiB,CAAC,iBAAiB,EAAE,CAAA;IACpE,MAAM,kBAAkB,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAE,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,CAAC,CAAA;IAElH,KAAK,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,CAAC;QACpD,IAAI,CAAC;YACH,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;YAEnD,KAAK,CAAC,IAAI,CAAC;gBACT,EAAE,EAAE,MAAM;gBACV,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,EAAE;oBAC3D,OAAO;wBACL,SAAS;wBACT,WAAW;wBACX,WAAW,EAAE,kBAAkB,CAAC,QAAQ,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC;qBAC/D,CAAA;gBACH,CAAC,CAAC;gBACF,SAAS,EAAE,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC;gBAC9B,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;gBACzC,QAAQ,EAAE,QAAQ,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;aAC/D,CAAC,CAAA;QACJ,CAAC;QAAC,OAAO,GAAG,EAAE,CAAC;YACb,GAAG,CAAC,KAAK,CAAC,0CAA0C,EAAE,GAAG,CAAC,CAAA;YAE1D,KAAK,CAAC,IAAI,CAAC;gBACT,EAAE,EAAE,MAAM;gBACV,SAAS,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;oBAC1B,OAAO;wBACL,SAAS,EAAE,IAAI,CAAC,UAAU;wBAC1B,WAAW,EAAE,kBAAkB,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,CAAC;qBACrE,CAAA;gBACH,CAAC,CAAC;gBACF,SAAS,EAAE,EAAE;gBACb,IAAI,EAAE,EAAE;gBACR,QAAQ,EAAE,EAAE;aACb,CAAC,CAAA;QACJ,CAAC;IACH,CAAC;IAED,OAAO,KAAK,CAAA;AACd,CAAC"}

package/dist/src/utils/get-self.d.ts

@@ -0,0 +1,8 @@
+import type { Peer } from '../rpc/index.js';
+import type { PeerId, PeerStore } from '@libp2p/interface';
+export interface Components {
+    peerId: PeerId;
+    peerStore: PeerStore;
+}
+export declare function getSelf(components: Components): Promise<Peer>;
+//# sourceMappingURL=get-self.d.ts.map

package/dist/src/utils/get-self.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-self.d.ts","sourceRoot":"","sources":["../../../src/utils/get-self.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAA;AAC3C,OAAO,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAE1D,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,MAAM,CAAA;IACd,SAAS,EAAE,SAAS,CAAA;CACrB;AAED,wBAAsB,OAAO,CAAE,UAAU,EAAE,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC,CAUpE"}

package/dist/src/utils/get-self.js

@@ -0,0 +1,13 @@
+import { base64 } from 'multiformats/bases/base64';
+import { toObject } from './to-object.js';
+export async function getSelf(components) {
+    const peer = await components.peerStore.get(components.peerId);
+    return {
+        id: peer.id,
+        addresses: peer.addresses,
+        protocols: [...peer.protocols],
+        tags: toObject(peer.tags, (t) => t.value),
+        metadata: toObject(peer.metadata, (buf) => base64.encode(buf))
+    };
+}
+//# sourceMappingURL=get-self.js.map

package/dist/src/utils/get-self.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-self.js","sourceRoot":"","sources":["../../../src/utils/get-self.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AASzC,MAAM,CAAC,KAAK,UAAU,OAAO,CAAE,UAAsB;IACnD,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,MAAM,CAAC,CAAA;IAE9D,OAAO;QACL,EAAE,EAAE,IAAI,CAAC,EAAE;QACX,SAAS,EAAE,IAAI,CAAC,SAAS;QACzB,SAAS,EAAE,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC;QAC9B,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;QACzC,QAAQ,EAAE,QAAQ,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;KAC/D,CAAA;AACH,CAAC"}

package/dist/src/utils/to-object.d.ts

@@ -0,0 +1,2 @@
+export declare function toObject<T, R>(map: Map<string, T>, transform: (value: T) => R): Record<string, R>;
+//# sourceMappingURL=to-object.d.ts.map

package/dist/src/utils/to-object.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"to-object.d.ts","sourceRoot":"","sources":["../../../src/utils/to-object.ts"],"names":[],"mappings":"AAAA,wBAAgB,QAAQ,CAAE,CAAC,EAAE,CAAC,EAAG,GAAG,EAAE,GAAG,CAAC,MAAM,EAAE,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,CAQnG"}

package/dist/src/utils/to-object.js

@@ -0,0 +1,8 @@
+export function toObject(map, transform) {
+    const output = {};
+    for (const [key, value] of map.entries()) {
+        output[key] = transform(value);
+    }
+    return output;
+}
+//# sourceMappingURL=to-object.js.map

package/dist/src/utils/to-object.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"to-object.js","sourceRoot":"","sources":["../../../src/utils/to-object.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,QAAQ,CAAS,GAAmB,EAAE,SAA0B;IAC9E,MAAM,MAAM,GAAwB,EAAE,CAAA;IAEtC,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,GAAG,CAAC,OAAO,EAAE,EAAE,CAAC;QACzC,MAAM,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,CAAA;IAChC,CAAC;IAED,OAAO,MAAM,CAAA;AACf,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@libp2p/devtools-metrics",
-  "version": "0.1.1",
+  "version": "0.2.0-15eb66428",
   "description": "Collect libp2p metrics and send them to browser DevTools",
   "author": "",
   "license": "Apache-2.0 OR MIT",
@@ -18,6 +18,22 @@
   },
   "type": "module",
   "types": "./dist/src/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "*",
+        "dist/*",
+        "dist/src/*",
+        "dist/src/*/index"
+      ],
+      "src/*": [
+        "*",
+        "dist/*",
+        "dist/src/*",
+        "dist/src/*/index"
+      ]
+    }
+  },
   "files": [
     "src",
     "dist",
@@ -28,6 +44,10 @@
     ".": {
       "types": "./dist/src/index.d.ts",
       "import": "./dist/src/index.js"
+    },
+    "./rpc": {
+      "types": "./dist/src/rpc/index.d.ts",
+      "import": "./dist/src/rpc/index.js"
     }
   },
   "eslintConfig": {
@@ -47,16 +67,22 @@
     "test:chrome": "aegir test -t browser --cov"
   },
   "dependencies": {
-    "@libp2p/interface": "^1.4.1",
-    "@libp2p/interface-internal": "^1.2.3",
-    "@libp2p/logger": "^4.0.14",
-    "@libp2p/simple-metrics": "^1.0.3",
-    "multiformats": "^13.1.0"
+    "@libp2p/interface": "1.5.0-15eb66428",
+    "@libp2p/interface-internal": "1.2.4-15eb66428",
+    "@libp2p/logger": "4.0.15-15eb66428",
+    "@libp2p/peer-id": "4.1.4-15eb66428",
+    "@libp2p/simple-metrics": "1.1.0-15eb66428",
+    "@multiformats/multiaddr": "^12.3.0",
+    "cborg": "^4.2.2",
+    "it-pipe": "^3.0.1",
+    "it-pushable": "^3.2.3",
+    "it-rpc": "^1.0.0",
+    "multiformats": "^13.1.0",
+    "progress-events": "^1.0.0"
   },
   "devDependencies": {
-    "@libp2p/peer-id-factory": "^4.1.3",
+    "@libp2p/peer-id-factory": "4.1.4-15eb66428",
     "aegir": "^43.0.1",
-    "race-event": "^1.3.0",
     "sinon-ts": "^2.0.0"
   },
   "sideEffects": false

package/src/index.ts

@@ -16,12 +16,23 @@
  * for Chrome or Firefox to inspect the state of your running node.
  */
 
-import { start, stop } from '@libp2p/interface'
-import { enable, disable } from '@libp2p/logger'
+import { serviceCapabilities, start, stop } from '@libp2p/interface'
 import { simpleMetrics } from '@libp2p/simple-metrics'
+import { pipe } from 'it-pipe'
+import { pushable } from 'it-pushable'
+import { rpc, type RPC } from 'it-rpc'
 import { base64 } from 'multiformats/bases/base64'
-import type { ComponentLogger, Connection, Libp2pEvents, Logger, Metrics, MultiaddrConnection, PeerId, Peer as PeerStorePeer, PeerStore, PeerUpdate, Stream, TypedEventEmitter } from '@libp2p/interface'
-import type { TransportManager, Registrar, ConnectionManager } from '@libp2p/interface-internal'
+import { valueCodecs } from './rpc/index.js'
+import { metricsRpc } from './rpc/rpc.js'
+import { debounce } from './utils/debounce.js'
+import { getPeers } from './utils/get-peers.js'
+import { getSelf } from './utils/get-self.js'
+import type { DevToolsRPC } from './rpc/index.js'
+import type { ComponentLogger, Connection, Libp2pEvents, Logger, Metrics, MultiaddrConnection, PeerId, PeerStore, Stream, ContentRouting, PeerRouting, TypedEventTarget, Startable } from '@libp2p/interface'
+import type { TransportManager, Registrar, ConnectionManager, AddressManager } from '@libp2p/interface-internal'
+import type { Pushable } from 'it-pushable'
+
+export * from './rpc/index.js'
 
 export const SOURCE_DEVTOOLS = '@libp2p/devtools-metrics:devtools'
 export const SOURCE_SERVICE_WORKER = '@libp2p/devtools-metrics:worker'
@@ -36,39 +47,12 @@ Object.defineProperty(globalThis, LIBP2P_DEVTOOLS_METRICS_KEY, {
   writable: false
 })
 
-/**
- * Sent when new metrics are available
- */
-export interface MetricsMessage {
-  source: typeof SOURCE_METRICS
-  type: 'metrics'
-  metrics: Record<string, any>
-}
-
-/**
- * This message represents the current state of the libp2p node
- */
-export interface SelfMessage {
-  source: typeof SOURCE_METRICS
-  type: 'self'
-  peer: SelfPeer
-}
-
-/**
- * This message represents the current state of the libp2p node
- */
-export interface PeersMessage {
-  source: typeof SOURCE_METRICS
-  type: 'peers'
-  peers: Peer[]
-}
-
 /**
  * Sent by the DevTools service worker to the DevTools panel when the inspected
  * page has finished (re)loading
  */
 export interface PageLoadedMessage {
-  source: '@libp2p/devtools-metrics:devtools'
+  source: typeof SOURCE_DEVTOOLS
   type: 'page-loaded'
   tabId: number
 }
@@ -81,47 +65,40 @@ export interface PageLoadedMessage {
  * not having granted permission for the script to run.
  */
 export interface PermissionsErrorMessage {
-  source: '@libp2p/devtools-metrics:devtools'
+  source: typeof SOURCE_DEVTOOLS
   type: 'permissions-error'
   tabId: number
 }
 
 /**
- * This message is sent by DevTools when no `self` message has been received
+ * This event is intercepted by the service worker which injects a content
+ * script into the current page which copies the passed value to the clipboard.
  */
-export interface IdentifyMessage {
-  source: '@libp2p/devtools-metrics:devtools'
-  type: 'identify'
+export interface CopyToClipboardMessage {
+  source: typeof SOURCE_DEVTOOLS
+  type: 'copy-to-clipboard'
   tabId: number
+  value: string
 }
 
 /**
- * This message is sent by DevTools when no `self` message has been received
+ * Invoke a method on the libp2p object
  */
-export interface EnableDebugMessage {
-  source: '@libp2p/devtools-metrics:devtools'
-  type: 'debug'
-  namespace: string
+export interface RPCMessage {
+  source: typeof SOURCE_DEVTOOLS | typeof SOURCE_METRICS
+  type: 'libp2p-rpc'
   tabId: number
-}
 
-/**
- * We cannot use the web extension API to copy text to the cliboard yet as it's
- * not supported in Firefox yet, so get the page to do it
- *
- * @see https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard#writing_to_the_clipboard
- */
-export interface CopyToClipboardMessage {
-  source: '@libp2p/devtools-metrics:devtools'
-  type: 'copy-to-clipboard'
-  value: string
-  tabId: number
+  /**
+   * The RPC message encoded as a multibase string
+   */
+  message: string
 }
 
 /**
  * Messages that are sent from the application page to the DevTools panel
  */
-export type ApplicationMessage = MetricsMessage | SelfMessage | PeersMessage
+export type ApplicationMessage = RPCMessage
 
 /**
  * Messages that are sent from the service worker
@@ -131,34 +108,7 @@ export type WorkerMessage = PageLoadedMessage | PermissionsErrorMessage
 /**
  * Messages that are sent from the DevTools panel page to the application page
  */
-export type DevToolsMessage = IdentifyMessage | EnableDebugMessage | CopyToClipboardMessage
-
-export interface SelfPeer {
-  /**
-   * The identifier of the peer
-   */
-  id: string
-
-  /**
-   * The list of multiaddrs the peer is listening on
-   */
-  multiaddrs: string[]
-
-  /**
-   * Any peer store tags the peer has
-   */
-  tags: Record<string, number>
-
-  /**
-   * Any peer store metadata the peer has
-   */
-  metadata: Record<string, string>
-
-  /**
-   * The protocols the peer supports
-   */
-  protocols: string[]
-}
+export type DevToolsMessage = CopyToClipboardMessage | RPCMessage
 
 export interface Address {
   /**
@@ -178,33 +128,6 @@ export interface Address {
   isConnected?: boolean
 }
 
-export interface Peer {
-  /**
-   * The identifier of the remote peer
-   */
-  id: string
-
-  /**
-   * The list of addresses the peer has that we know about
-   */
-  addresses: Address[]
-
-  /**
-   * Any peer store tags the peer has
-   */
-  tags: Record<string, number>
-
-  /**
-   * Any peer store metadata the peer has
-   */
-  metadata: Record<string, string>
-
-  /**
-   * The protocols the peer supports, if known
-   */
-  protocols: string[]
-}
-
 export interface DevToolsMetricsInit {
   /**
    * How often to pass metrics to the DevTools panel
@@ -214,46 +137,63 @@ export interface DevToolsMetricsInit {
 
 export interface DevToolsMetricsComponents {
   logger: ComponentLogger
-  events: TypedEventEmitter<Libp2pEvents>
+  events: TypedEventTarget<Libp2pEvents>
   peerId: PeerId
   transportManager: TransportManager
   registrar: Registrar
   connectionManager: ConnectionManager
   peerStore: PeerStore
+
+  contentRouting: ContentRouting
+  peerRouting: PeerRouting
+  addressManager: AddressManager
 }
 
-class DevToolsMetrics implements Metrics {
+class DevToolsMetrics implements Metrics, Startable {
   private readonly log: Logger
   private readonly components: DevToolsMetricsComponents
   private readonly simpleMetrics: Metrics
   private readonly intervalMs?: number
+  private readonly rpcQueue: Pushable<Uint8Array>
+  private readonly rpc: RPC
+  private readonly devTools: DevToolsRPC
 
   constructor (components: DevToolsMetricsComponents, init?: Partial<DevToolsMetricsInit>) {
     this.log = components.logger.forComponent('libp2p:devtools-metrics')
     this.intervalMs = init?.intervalMs
     this.components = components
 
+    // create RPC endpoint
+    this.rpcQueue = pushable()
+    this.rpc = rpc({
+      valueCodecs
+    })
+    this.devTools = this.rpc.createClient('devTools')
+
     // collect information on current peers and sent it to the dev tools panel
     this.onPeersUpdate = debounce(this.onPeersUpdate.bind(this), 1000)
-    this.onSelfUpdate = this.onSelfUpdate.bind(this)
+    this.onSelfUpdate = debounce(this.onSelfUpdate.bind(this), 1000)
     this.onIncomingMessage = this.onIncomingMessage.bind(this)
 
     // collect metrics
     this.simpleMetrics = simpleMetrics({
       intervalMs: this.intervalMs,
       onMetrics: (metrics) => {
-        const message: MetricsMessage = {
-          source: SOURCE_METRICS,
-          type: 'metrics',
-          metrics
-        }
-
-        this.log('post metrics message')
-        window.postMessage(message, '*')
+        this.devTools.safeDispatchEvent('metrics', {
+          detail: metrics
+        }).catch(err => {
+          this.log.error('error sending metrics', err)
+        })
       }
     })({})
   }
 
+  readonly [Symbol.toStringTag] = '@libp2p/devtools-metrics'
+
+  readonly [serviceCapabilities]: string[] = [
+    '@libp2p/metrics'
+  ]
+
   trackMultiaddrConnection (maConn: MultiaddrConnection): void {
     this.simpleMetrics.trackMultiaddrConnection(maConn)
   }
@@ -291,8 +231,32 @@ class DevToolsMetrics implements Metrics {
     // process incoming messages from devtools
     window.addEventListener('message', this.onIncomingMessage)
 
+    // create rpc target
+    this.rpc.createTarget('metrics', metricsRpc(this.components))
+
     // send metrics
     await start(this.simpleMetrics)
+
+    // send RPC messages
+    Promise.resolve()
+      .then(async () => {
+        await pipe(
+          this.rpcQueue,
+          this.rpc,
+          async source => {
+            for await (const buf of source) {
+              window.postMessage({
+                source: SOURCE_METRICS,
+                type: 'libp2p-rpc',
+                message: base64.encode(buf)
+              })
+            }
+          }
+        )
+      })
+      .catch(err => {
+        this.log.error('error while reading RPC messages', err)
+      })
   }
 
   async stop (): Promise<void> {
@@ -305,90 +269,6 @@ class DevToolsMetrics implements Metrics {
     await stop(this.simpleMetrics)
   }
 
-  private onPeersUpdate (): void {
-    Promise.resolve().then(async () => {
-      const message: PeersMessage = {
-        source: SOURCE_METRICS,
-        type: 'peers',
-        peers: []
-      }
-
-      const connections = this.components.connectionManager.getConnectionsMap()
-      const connectedAddresses = [...connections.values()].flatMap(conn => conn).map(conn => conn.remoteAddr.toString())
-
-      for (const [peerId, conns] of connections.entries()) {
-        try {
-          const peer = await this.components.peerStore.get(peerId)
-
-          message.peers.push({
-            id: peerId.toString(),
-            addresses: peer.addresses.map(({ isCertified, multiaddr }) => {
-              const addr = multiaddr.toString()
-
-              return {
-                multiaddr: addr,
-                isCertified,
-                isConnected: connectedAddresses.includes(addr)
-              }
-            }),
-            protocols: [...peer.protocols],
-            tags: toObject(peer.tags, (t) => t.value),
-            metadata: toObject(peer.metadata, (buf) => base64.encode(buf))
-          })
-        } catch (err) {
-          this.log.error('could not load peer data from peer store', err)
-
-          message.peers.push({
-            id: peerId.toString(),
-            addresses: conns.map(conn => {
-              const addr = conn.remoteAddr.toString()
-
-              return {
-                multiaddr: addr,
-                isConnected: connectedAddresses.includes(addr)
-              }
-            }),
-            protocols: [],
-            tags: {},
-            metadata: {}
-          })
-        }
-      }
-
-      window.postMessage(message, '*')
-    })
-      .catch(err => {
-        this.log.error('error sending peers message', err)
-      })
-  }
-
-  private onSelfUpdate (evt: CustomEvent<PeerUpdate>): void {
-    this.sendSelfUpdate(evt.detail.peer)
-  }
-
-  private sendSelfUpdate (peer: PeerStorePeer): void {
-    Promise.resolve()
-      .then(async () => {
-        const message: SelfMessage = {
-          source: SOURCE_METRICS,
-          type: 'self',
-          peer: {
-            id: peer.id.toString(),
-            multiaddrs: peer.addresses.map(({ multiaddr }) => multiaddr.toString()),
-            protocols: [...peer.protocols],
-            tags: toObject(peer.tags, (t) => t.value),
-            metadata: toObject(peer.metadata, (buf) => base64.encode(buf))
-          }
-        }
-
-        this.log('post node update message')
-        window.postMessage(message, '*')
-      })
-      .catch(err => {
-        this.log.error('error sending self update', err)
-      })
-  }
-
   private onIncomingMessage (event: MessageEvent<DevToolsMessage>): void {
     // Only accept messages from same frame
     if (event.source !== window) {
@@ -402,29 +282,33 @@ class DevToolsMetrics implements Metrics {
       return
     }
 
-    // respond to identify request
-    if (message.type === 'identify') {
-      Promise.resolve()
-        .then(async () => {
-          const peer = await this.components.peerStore.get(this.components.peerId)
+    if (message.type === 'libp2p-rpc') {
+      this.rpcQueue.push(base64.decode(message.message))
+    }
+  }
 
-          this.sendSelfUpdate(peer)
-          // also send our current peer list
-          this.onPeersUpdate()
-        })
-        .catch(err => {
-          this.log.error('error sending identify response', err)
+  private onSelfUpdate (): void {
+    Promise.resolve()
+      .then(async () => {
+        await this.devTools.safeDispatchEvent('self', {
+          detail: await getSelf(this.components)
         })
-    }
+      })
+      .catch(err => {
+        this.log.error('error sending peers message', err)
+      })
+  }
 
-    // handle enabling/disabling debug namespaces
-    if (message.type === 'debug') {
-      if (message.namespace.length > 0) {
-        enable(message.namespace)
-      } else {
-        disable()
-      }
-    }
+  private onPeersUpdate (): void {
+    Promise.resolve()
+      .then(async () => {
+        await this.devTools.safeDispatchEvent('peers', {
+          detail: await getPeers(this.components, this.log)
+        })
+      })
+      .catch(err => {
+        this.log.error('error sending peers message', err)
+      })
   }
 }
 
@@ -433,37 +317,3 @@ export function devToolsMetrics (init?: Partial<DevToolsMetricsInit>): (componen
     return new DevToolsMetrics(components, init)
   }
 }
-
-function toObject <T, R> (map: Map<string, T>, transform: (value: T) => R): Record<string, R> {
-  const output: Record<string, any> = {}
-
-  for (const [key, value] of map.entries()) {
-    output[key] = transform(value)
-  }
-
-  return output
-}
-
-function debounce (callback: () => void, wait: number = 100): () => void {
-  let timeout: ReturnType<typeof setTimeout>
-  let start: number | undefined
-
-  return (): void => {
-    if (start == null) {
-      start = Date.now()
-    }
-
-    if (timeout != null && Date.now() - start > wait) {
-      clearTimeout(timeout)
-      start = undefined
-      callback()
-      return
-    }
-
-    clearTimeout(timeout)
-    timeout = setTimeout(() => {
-      start = undefined
-      callback()
-    }, wait)
-  }
-}

package/src/rpc/codecs/cid.ts

@@ -0,0 +1,9 @@
+import { CID } from 'multiformats/cid'
+import type { ValueCodec } from 'it-rpc'
+
+export const cidCodec: ValueCodec<CID> = {
+  type: 4096,
+  canEncode: (val) => val.code != null && val.version != null && val.multihash != null && val['/'] != null,
+  encode: (val) => val.bytes,
+  decode: (buf) => CID.decode(buf)
+}