Update node status display

packages/core/package.json

@@ -33,13 +33,14 @@
 	"dependencies": {
 		"@emotion/react": "^11.11.4",
 		"@emotion/styled": "^11.11.5",
-		"@helia/unixfs": "^3.0.4",
+		"@helia/unixfs": "^3.0.6",
 		"@libp2p/pnet": "^1.0.1",
 		"@mui/icons-material": "^5.15.15",
 		"@mui/material": "^5.15.15",
 		"@preact/signals-react": "^2.0.1",
-		"helia": "^4.1.1",
+		"helia": "^4.2.1",
 		"i18next": "^23.11.2",
+		"minidenticons": "^4.2.1",
 		"multiformats": "^13.1.0",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",

packages/core/src/components/atoms/Identicon.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { minidenticon } from 'minidenticons';
+
+export function Identicon(props: { value: string; }) {
+	return <img src={'data:image/svg+xml;utf8,' + encodeURIComponent(minidenticon(props.value))} width={25} height={25} />;
+}

packages/core/src/components/atoms/index.ts

@@ -1,2 +1,4 @@
 export { ImageView } from './ImageView';
 export { Loader } from './Loader';
+export { Identicon } from './Identicon';
+export { ThemeToggle } from './ThemeToggle';

packages/core/src/components/molecules/ConnectionStatus.tsx

@@ -1,10 +1,16 @@
-import React from "react";
+import { Badge, IconButton, List, ListItem, ListItemIcon, ListItemText, Popover } from "@mui/material";
 import { useComputed, useSignal, useSignalEffect } from "@preact/signals-react";
-import { Button } from "@mui/material";
+import React from "react";
 import { IIpfsService } from "../../service";
+import { Identicon } from '../atoms';
+import { useTranslation } from 'react-i18next';
 
 export function ConnectionStatus(props: { ipfs: IIpfsService; }) {
 	const peers = useSignal<string[]>([]);
+	const anchor = useSignal<HTMLButtonElement | undefined>(undefined);
+	const count = useComputed(() => peers.value.length);
+	const [_t] = useTranslation();
+
 
 	useSignalEffect(() => {
 		const updatePeers = () => {
@@ -22,7 +28,46 @@ export function ConnectionStatus(props: { ipfs: IIpfsService; }) {
 		};
 	});
 
-	return useComputed(() => (
-		<Button onClick={() => console.log(peers.value)}>{peers.value.length}</Button>
-	));
+	const popover = useComputed(() => anchor.value != undefined ? (
+		<Popover
+			open={true}
+			anchorEl={anchor.value}
+			onClose={() => anchor.value = undefined}
+			anchorOrigin={{
+				vertical: 'bottom',
+				horizontal: 'right',
+			}}
+		>
+			<List>
+				{peers.value.length > 0 ? peers.value.map(p => (
+					<ListItem key={p}>
+						<ListItemIcon>
+							<Identicon value={p} />
+						</ListItemIcon>
+						<ListItemText>{p}</ListItemText>
+					</ListItem>
+				)) : (
+					<ListItem>
+						<ListItemText>{_t('NoNodes')}</ListItemText>
+					</ListItem>
+				)}
+			</List>
+		</Popover>
+	) : undefined);
+
+	return (<>
+		<Badge
+			anchorOrigin={{
+				vertical: 'bottom',
+				horizontal: 'left',
+			}}
+			badgeContent={<>{count}</>}
+			color={'primary'}
+		>
+			<IconButton onClick={(ev) => anchor.value = ev.currentTarget}>
+				<Identicon value={props.ipfs.id()} />
+			</IconButton>
+		</Badge>
+		{popover}
+	</>);
 }

packages/core/src/createRemoteIpfsService.ts

@@ -0,0 +1,42 @@
+import { IFileInfo, IIpfsService } from './service';
+import { create } from 'kubo-rpc-client';
+
+export async function createRemoteIpfsService(url: string): Promise<IIpfsService> {
+	const node = create({ url: url });
+	const connString = (await node.config.get('Addresses.Gateway')) as string;
+	const port = connString.substring(connString.lastIndexOf('/') + 1);
+	const id = (await node.id()).id.toString();
+	return {
+		async ls(cid: string) {
+			const files: IFileInfo[] = [];
+			for await (const file of node.ls(cid)) {
+				files.push({
+					type: file.type,
+					name: file.name,
+					cid: file.cid.toString(),
+				});
+			}
+			return files;
+		},
+		stop() {
+			return Promise.resolve();
+		},
+		toUrl(cid: string) {
+			return `http://127.0.0.1:${port}/ipfs/${cid}`;
+		},
+		id() {
+			return id;
+		},
+		async peers() {
+			return (await node.swarm.peers()).map(p => p.addr.toString());
+		},
+		async resolve(name) {
+			let result = '';
+			for await (const res of node.name.resolve(name)) {
+				result = res;
+			}
+
+			return result;
+		},
+	};
+}

packages/core/src/index.ts

@@ -10,3 +10,4 @@ export type {
 	IInternalProfile,
 	IRemoteProfile,
 } from './service';
+export { createRemoteIpfsService } from './createRemoteIpfsService';

packages/core/src/service/IIpfsService.ts

@@ -25,4 +25,9 @@ export interface IIpfsService {
 	 * @param ipns ipns address.
 	 */
 	resolve(ipns: string): Promise<string>;
+
+	/**
+	 * Returns node id.
+	 */
+	id(): string;
 }

packages/core/src/translations/de.json

@@ -5,6 +5,7 @@
 	"Loading": "Laden...",
 	"Logout": "Abmelden",
 	"Movies": "Filme",
+	"NoNodes": "Keine verbundene Geräte",
 	"Search": "Suche",
 	"Start": "Starten",
 	"Starting": "Starten...",

packages/core/src/translations/en.json

@@ -5,6 +5,7 @@
 	"Loading": "Loading...",
 	"Logout": "Logout",
 	"Movies": "Movies",
+	"NoNodes": "No connected nodes",
 	"Search": "Search",
 	"Start": "Start",
 	"Starting": "Starting node...",

packages/core/vite.config.ts

@@ -22,7 +22,7 @@ export default defineConfig(({ mode }) => ({
 		},
 		rollupOptions: {
 			preserveSymlinks: true,
-			external: ['helia', 'react', '@mui/material', '@mui/base', '@emotion/react'],
+			external: ['helia', 'react', '@mui/material', '@emotion/react'],
 			output: {
 				// Provide global variables to use in the UMD build
 				// for externalized deps

packages/desktop/package.json

@@ -25,20 +25,23 @@
 		]
 	},
 	"dependencies": {
+		"@chainsafe/libp2p-gossipsub": "13.0.0",
 		"@chainsafe/libp2p-noise": "^15.0.0",
 		"@electron-toolkit/preload": "^3.0.1",
 		"@electron-toolkit/utils": "^3.0.0",
-		"@helia/unixfs": "^3.0.4",
+		"@helia/unixfs": "^3.0.6",
 		"@libp2p/bootstrap": "^10.0.22",
+		"@libp2p/identify": "^2.0.0",
 		"@libp2p/pnet": "^1.0.1",
+		"@libp2p/pubsub-peer-discovery": "^10.0.2",
 		"@libp2p/tcp": "^9.0.16",
 		"@libp2p/websockets": "^8.0.16",
-		"@libp2p/webtransport": "^4.0.20",
+		"@libp2p/webtransport": "4.0.21",
 		"blockstore-fs": "^1.1.10",
 		"datastore-level": "^10.1.8",
 		"electron-updater": "6.2.1",
 		"express": "^4.19.2",
-		"helia": "^4.1.1",
+		"helia": "^4.2.1",
 		"ipmc-core": "workspace:^",
 		"kubo-rpc-client": "^4.1.1",
 		"libp2p": "^1.3.0",

packages/desktop/src/preload/index.d.ts

@@ -1,10 +1,8 @@
-import { ElectronAPI } from '@electron-toolkit/preload'
-import { IConfigurationService, INodeService } from 'ipm-core'
+import { IConfigurationService, INodeService } from 'ipm-core';
 
 declare global {
 	interface Window {
-		electron: ElectronAPI
-		nodeService: INodeService
-		configService: IConfigurationService
+		nodeService: INodeService;
+		configService: IConfigurationService;
 	}
 }