| 1 | import 'react' |
| 2 | import { getAgent } from '../utils/get-agent.js' |
| 3 | import { Heading } from './heading.js' |
| 4 | import { MultiaddrList } from './multiaddr-list.js' |
| 5 | import { Panel } from './panel.js' |
| 6 | import type { PeerAddress } from '@ipshipyard/libp2p-inspector-metrics' |
| 7 | import type { PeerId } from '@libp2p/interface' |
| 8 | import type { ReactElement } from 'react' |
| 9 | |
| 10 | export interface NodeProps { |
| 11 | id: PeerId |
| 12 | addresses: PeerAddress[] |
| 13 | protocols: string[] |
| 14 | metadata: Record<string, string> |
| 15 | } |
| 16 | |
| 17 | export function Node ({ id, addresses, protocols, metadata }: NodeProps): ReactElement { |
| 18 | const agent = getAgent(metadata) |
| 19 | let agentVersion |
| 20 | |
| 21 | if (agent != null) { |
| 22 | agentVersion = ( |
| 23 | <> |
| 24 | <Heading help='The agent is sent to peers during Identify'> |
| 25 | <h2>Agent</h2> |
| 26 | </Heading> |
| 27 | <p>{agent}</p> |
| 28 | </> |
| 29 | ) |
| 30 | } |
| 31 | |
| 32 | return ( |
| 33 | <Panel> |
| 34 | <Heading help="A PeerId is derived from a node's cryptographic key and uniquely identifies it on the network"> |
| 35 | <h2>PeerId</h2> |
| 36 | </Heading> |
| 37 | <p>{id.toString()}</p> |
| 38 | {agentVersion} |
| 39 | <Heading help='Multiaddrs are addresses that other nodes can use to contact this node'> |
| 40 | <h2>Multiaddrs</h2> |
| 41 | </Heading> |
| 42 | <MultiaddrList |
| 43 | addresses={addresses.map(address => { |
| 44 | let multiaddr = address.multiaddr |
| 45 | |
| 46 | if (multiaddr.getComponents().some(c => c.name === 'p2p') === false) { |
| 47 | multiaddr = multiaddr.encapsulate(`/p2p/${id}`) |
| 48 | } |
| 49 | |
| 50 | return { multiaddr } |
| 51 | })} |
| 52 | /> |
| 53 | <Heading help='This node will respond to these protocols'> |
| 54 | <h2>Supported protocols</h2> |
| 55 | </Heading> |
| 56 | <Protocols protocols={protocols} /> |
| 57 | </Panel> |
| 58 | ) |
| 59 | } |
| 60 | |
| 61 | export interface ProtocolsPanelProps { |
| 62 | protocols: string[] |
| 63 | } |
| 64 | |
| 65 | function Protocols ({ protocols }: ProtocolsPanelProps): ReactElement { |
| 66 | if (protocols.length === 0) { |
| 67 | return ( |
| 68 | <p>This node has does not support any protocols.</p> |
| 69 | ) |
| 70 | } |
| 71 | |
| 72 | return ( |
| 73 | <ul> |
| 74 | {protocols.map((protocol, index) => <li key={`protocol-${index}`}>{protocol}</li>)} |
| 75 | </ul> |
| 76 | ) |
| 77 | } |