p2p poc

.github/CODEOWNERS

@@ -1 +1 @@
-* @alexcos20 @bogdanfazakas @jamiehewitt15 @mariacarmina @paulo-ocean @mihaisc
+* @alexcos20 @bogdanfazakas @mihaisc @giurgiur99 @denisiuriet @ndrpp @andreip136

next.config.mjs

@@ -1,6 +1,16 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  webpack(config) {
+  webpack(config, { isServer }) {
+    if (!isServer) {
+      config.resolve.fallback = {
+        ...config.resolve.fallback,
+        fs: false,
+        net: false,
+        tls: false,
+        dgram: false,
+        dns: false
+      }
+    }
     config.module.rules.push({
       test: /\.svg$/,
       use: ['@svgr/webpack'],

package.json

@@ -9,9 +9,13 @@
     "build": "NODE_ENV=production  next build",
     "start": "next start",
     "lint": "eslint --ignore-path .gitignore --ext .ts,.tsx .",
-    "lint:fix": "eslint --ignore-path .gitignore --ext .ts,.tsx . --fix"
+    "lint:fix": "eslint --ignore-path .gitignore --ext .ts,.tsx . --fix",
+    "format": "prettier --parser typescript --ignore-path .gitignore --write '**/*.{js,jsx,ts,tsx}'"
   },
   "dependencies": {
+    "@chainsafe/libp2p-noise": "^15.1.0",
+    "@chainsafe/libp2p-yamux": "^6.0.2",
+    "@multiformats/multiaddr": "^12",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@mui/icons-material": "^7.3.4",
@@ -30,7 +34,16 @@
     "normalize.css": "^8.0.1",
     "react": "^18",
     "react-dom": "^18",
-    "recharts": "^3.3.0"
+    "recharts": "^3.3.0",
+    "libp2p": "^1.8.0",
+    "it-pipe": "^3.0.1",
+    "@libp2p/bootstrap": "^10.1.1",
+    "@libp2p/identify": "^2.1.1",
+    "@libp2p/kad-dht": "^12.1.1",
+    "@libp2p/peer-id": "^4.1.4",
+    "@libp2p/ping": "^1.1.1",
+    "@libp2p/websockets": "^8.1.1",
+    "uint8arrays": "^4.0.6"
   },
   "devDependencies": {
     "@svgr/webpack": "^8.1.0",
@@ -49,5 +62,8 @@
     "prettier-plugin-organize-imports": "^4.3.0",
     "typescript": "^5"
   },
+  "overrides": {
+    "@multiformats/multiaddr": "^12"
+  },
   "packageManager": "[email protected]+sha512.341db9396b6e289fecc30cd7ab3af65060e05ebff4b3b47547b278b9e67b08f485ecd8c79006b405446262142c7a38154445ef7f17c1d5d1de7d90bf9ce7054d"
 }

src/contexts/P2PContext.tsx

@@ -0,0 +1,93 @@
+import React, { createContext, useContext, useEffect, useState, useCallback } from 'react'
+import { Libp2p } from 'libp2p'
+import { initializeNode, sendCommandToPeer, getNodeEnvs } from '@/services/nodeService'
+import { OCEAN_BOOTSTRAP_NODES } from '@/shared/consts/bootstrapNodes'
+
+interface P2PContextType {
+  node: Libp2p | null
+  isReady: boolean
+  error: string | null
+  sendCommand: (peerId: string, command: any, protocol?: string) => Promise<any>
+  getEnvs: (peerId: string) => Promise<any>
+}
+
+const P2PContext = createContext<P2PContextType | undefined>(undefined)
+
+export function P2PProvider({ children }: { children: React.ReactNode }) {
+  const [node, setNode] = useState<Libp2p | null>(null)
+  const [isReady, setIsReady] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    let mounted = true
+    let peerCountInterval: NodeJS.Timeout
+
+    async function init() {
+      try {
+        console.log('P2PContext: Initializing libp2p node in background...')
+
+        const nodeInstance = await initializeNode(OCEAN_BOOTSTRAP_NODES)
+
+        if (mounted) {
+          setNode(nodeInstance)
+          setIsReady(true)
+
+          console.log('P2PContext: Node ready')
+        }
+      } catch (err: any) {
+        console.error('P2PContext: Failed to initialize node:', err)
+        if (mounted) {
+          setError(err.message)
+        }
+      }
+    }
+
+    init()
+
+    return () => {
+      mounted = false
+    }
+  }, [])
+
+  const sendCommand = useCallback(
+    async (peerId: string, command: any, protocol?: string) => {
+      if (!isReady || !node) {
+        throw new Error('Node not ready')
+      }
+      return sendCommandToPeer(peerId, command, protocol)
+    },
+    [isReady, node]
+  )
+
+  const getEnvs = useCallback(
+    async (peerId: string) => {
+      if (!isReady || !node) {
+        throw new Error('Node not ready')
+      }
+      return getNodeEnvs(peerId)
+    },
+    [isReady, node]
+  )
+
+  return (
+    <P2PContext.Provider
+      value={{
+        node,
+        isReady,
+        error,
+        sendCommand,
+        getEnvs
+      }}
+    >
+      {children}
+    </P2PContext.Provider>
+  )
+}
+
+export function useP2P() {
+  const context = useContext(P2PContext)
+  if (!context) {
+    throw new Error('useP2P must be used within P2PProvider')
+  }
+  return context
+}

src/pages/_app.tsx

@@ -1,6 +1,7 @@
 import RootLayout from '@/components/Layout';
 import { AppKit } from '@/context/app-kit';
 import { StatsProvider } from '@/context/stats-context';
+import { P2PProvider } from '@/contexts/P2PContext';
 import '@/styles/globals.css';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import cx from 'classnames';
@@ -37,9 +38,11 @@ export default function App({ Component, pageProps }: AppProps) {
       <QueryClientProvider client={queryClientRef.current}>
         <StatsProvider>
           <AppKit>
-            <RootLayout>
-              <Component {...pageProps} />
-            </RootLayout>
+            <P2PProvider>
+              <RootLayout>
+                <Component {...pageProps} />
+              </RootLayout>
+            </P2PProvider>
           </AppKit>
         </StatsProvider>
       </QueryClientProvider>