| 1 | import { FloatingPanel, Heading, Group, Libp2pIcon, ShipyardIcon, Footer } from '@ipshipyard/libp2p-inspector-ui' |
| 2 | import { TargetListPanel } from './target-list.tsx' |
| 3 | import type { InspectTarget } from '../../ipc/index.ts' |
| 4 | import type { PeerId } from '@libp2p/interface' |
| 5 | import type { JSX } from 'react' |
| 6 | |
| 7 | export interface ConnectingPanelProps { |
| 8 | targets: InspectTarget[] |
| 9 | onConnect(evt: React.UIEvent, peer: string | PeerId): void |
| 10 | onCancelConnect(evt: React.UIEvent): void |
| 11 | } |
| 12 | |
| 13 | export const ConnectPanel = ({ targets, onConnect }: ConnectingPanelProps): JSX.Element => { |
| 14 | return ( |
| 15 | <> |
| 16 | <FloatingPanel className='ConnectPanel'> |
| 17 | <Group> |
| 18 | <Libp2pIcon height={64} width={64} style={{ marginBottom: 8 }} /> |
| 19 | <Heading> |
| 20 | <h1>Connect to libp2p</h1> |
| 21 | </Heading> |
| 22 | {/* <p>Enter a multiaddr or choose from a detected node</p> |
| 23 | <form onSubmit={(evt) => onConnect}> |
| 24 | <TextInput type="text" value={address} placeholder="/ip4/127.0.0.1/tcp/1234" onChange={(e) => { setAddress(e.target.value) }} /> |
| 25 | <Button disabled={connecting} onClick={(evt) => onConnect(evt, address)} primary={true}>Connect</Button> |
| 26 | </form> |
| 27 | </Group> |
| 28 | <Group> |
| 29 | <h2>Detected nodes</h2> */} |
| 30 | <TargetListPanel targets={targets} onConnect={onConnect} /> |
| 31 | </Group> |
| 32 | <Footer> |
| 33 | <small>With ❤️ from <a href='https://ipshipyard.com/' target='_blank' rel='noreferrer'><ShipyardIcon /> SHIPYARD</a></small> |
| 34 | </Footer> |
| 35 | </FloatingPanel> |
| 36 | </> |
| 37 | ) |
| 38 | } |