fix: remove unused code + burger menu + persist Libp2p main state (#35)

Author: maschad

packages/frontend/src/components/chat.tsx

@@ -31,10 +31,12 @@ function Message({ msg, from, peerId }: MessageProps) {
     <li ref={msgref} className={`flex ${from === 'me' ? 'justify-end' : 'justify-start'}`}>
       <div
 
-        className="flex relative max-w-xl px-4 py-2 text-gray-700 rounded shadow"
+        className="flex relative max-w-xl px-4 py-2 text-gray-700 rounded shadow bg-white"
       >
-        <span className="flex relative mx-3 px-4 py-4"> {peerId !== libp2p.peerId.toString() ? `from: ${peerId.slice(-4)}` : null} </span>
-        <span className="block">{msg} </span>
+        <div className="block">
+          {msg}
+          <p className="italic text-gray-400">{peerId !== libp2p.peerId.toString() ? `from: ${peerId.slice(-4)}` : null} </p>
+        </div>
       </div>
     </li>
   )
@@ -90,7 +92,7 @@ export default function ChatContainer() {
 
     setMessageHistory([...messageHistory, { msg: input, from: 'me', peerId: myPeerId }])
     setInput('')
-  }, [input, messageHistory, setInput, libp2p])
+  }, [input, messageHistory, setInput, libp2p, setMessageHistory])
 
   const handleKeyUp = useCallback(
     async (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -135,7 +137,7 @@ export default function ChatContainer() {
                 Public Chat
               </span>
             </div>
-            <div className="relative w-full p-6 overflow-y-auto h-[40rem]">
+            <div className="relative w-full p-6 overflow-y-auto h-[40rem] bg-gray-100">
               <ul className="space-y-2">
                 {/* messages start */}
                 {messageHistory.map(({ msg, from, peerId }, idx) => (

packages/frontend/src/components/nav.tsx

@@ -5,12 +5,6 @@ import Link from 'next/link'
 import Image from 'next/image'
 import { useRouter } from 'next/router'
 
-const user = {
-  name: 'Juan Benet',
-  email: '[email protected]',
-  imageUrl: 'https://github.com/achingbrain.png',
-}
-
 const navigationItems = [
   { name: 'Connecting to a Peer', href: '/' },
   { name: 'Chat', href: '/chat' },
@@ -42,16 +36,6 @@ export default function Navigation() {
                     height="46"
                     width="46"
                   />
-                  {/* <img
-                    className="block h-12 w-auto lg:hidden"
-                    src="/libp2p-logo.svg"
-                    alt="Your Company"
-                  />
-                  <img
-                    className="hidden h-12 w-auto lg:block"
-                    src="/libp2p-logo.svg"
-                    alt="Your Company"
-                  /> */}
                 </div>
                 <div className="hidden sm:-my-px sm:ml-6 sm:flex sm:space-x-8">
                   {navigationItems.map((item) => (
@@ -161,44 +145,6 @@ export default function Navigation() {
                 </Link>
               ))}
             </div>
-            <div className="border-t border-gray-200 pt-4 pb-3">
-              <div className="flex items-center px-4">
-                <div className="flex-shrink-0">
-                  <img
-                    className="h-10 w-10 rounded-full"
-                    src={user.imageUrl}
-                    alt=""
-                  />
-                </div>
-                <div className="ml-3">
-                  <div className="text-base font-medium text-gray-800">
-                    {user.name}
-                  </div>
-                  <div className="text-sm font-medium text-gray-500">
-                    {user.email}
-                  </div>
-                </div>
-                <button
-                  type="button"
-                  className="ml-auto flex-shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-                >
-                  <span className="sr-only">View notifications</span>
-                  <BellIcon className="h-6 w-6" aria-hidden="true" />
-                </button>
-              </div>
-              {/* <div className="mt-3 space-y-1">
-                {userNavigation.map((item) => (
-                  <Disclosure.Button
-                    key={item.name}
-                    as="a"
-                    href={item.href}
-                    className="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800"
-                  >
-                    {item.name}
-                  </Disclosure.Button>
-                ))}
-              </div> */}
-            </div>
           </Disclosure.Panel>
         </>
       )}

packages/frontend/src/components/stats.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useState } from 'react';
+import React, { ReactElement, ReactNode, createContext, useContext, useState } from 'react';
 import type { Connection } from '@libp2p/interface-connection'
 import { PeerId } from '@libp2p/interface-peer-id'
 
@@ -17,7 +17,7 @@ export interface PeerContextInterface {
 export const peerContext = createContext<PeerContextInterface>({
 	peerStats: {
 		peerIds: [],
-		connected: false,
+		connected: true,
 		connections: [],
 		latency: 0
 	},
@@ -28,7 +28,7 @@ export const usePeerContext = () => {
 	return useContext(peerContext);
 };
 
-export const PeerProvider = ({ children }: any) => {
+export const PeerProvider = ({ children }: { children: ReactNode }) => {
 	const [peerStats, setPeerStats] = useState<PeerStats>({
 		peerIds: [],
 		connected: false,

packages/frontend/src/context/peer-ctx.tsx

@@ -2,5 +2,4 @@ export const CHAT_TOPIC = "universal-connectivity"
 
 export const CIRCUIT_RELAY_CODE = 290
 
-
 export const BOOTSTRAP_NODE = "/ip4/18.195.246.16/udp/9090/webrtc-direct/certhash/uEiBy_U1UNQ0IDvot_PKlQM_QeU3yx-zCAVaMxxVm2JxWBg/p2p/12D3KooWGTDZj1zAjMCJ8XXx9Z88zAAd6vn3krQYLwZ67S4vMUxz"

packages/frontend/src/lib/constants.ts

@@ -56,7 +56,7 @@ export async function startLibp2p(options: {} = {}) {
         //  '/ip4/18.195.246.16/udp/9090/webrtc-direct/certhash/uEiBy_U1UNQ0IDvot_PKlQM_QeU3yx-zCAVaMxxVm2JxWBg/p2p/12D3KooWGTDZj1zAjMCJ8XXx9Z88zAAd6vn3krQYLwZ67S4vMUxz',
         // ],
         list: [
-          '/ip4/127.0.0.1/udp/9090/webrtc-direct/certhash/uEiBy_U1UNQ0IDvot_PKlQM_QeU3yx-zCAVaMxxVm2JxWBg/p2p/12D3KooWHNiikdQPqM6cyESe6x5TgBJ8NhTBM5Pg1mJdm4XGLYmD'
+          '/ip4/127.0.0.1/udp/9090/webrtc-direct/certhash/uEiA2twAWww-g6fXsJe6JPlROwCHbRj6fNgr_WHxiQGEK3g/p2p/12D3KooWLTB1SrjyF8R5Z1MKErcV8abs26eo4LpadQKWsxMUcDBJ'
         ],
       }),
     ],

packages/frontend/src/lib/libp2p.ts

@@ -3,22 +3,17 @@ import { CheckCircleIcon, XCircleIcon } from '@heroicons/react/20/solid'
 import Nav from '@/components/nav'
 import { useLibp2pContext } from '@/context/ctx'
 import { useInterval } from 'usehooks-ts'
-
+import type { PeerId } from '@libp2p/interface-peer-id'
 import type { Connection } from '@libp2p/interface-connection'
 import { usePeerContext } from '../context/peer-ctx'
+import { useEffect } from 'react'
 
 
 export default function Home() {
   const { libp2p } = useLibp2pContext()
   const { peerStats, setPeerStats } = usePeerContext()
 
   useInterval(() => {
-    const getConnectedPeers = async () => {
-      return await libp2p.getPeers()
-    }
-    const getConnections = async () => {
-      return await libp2p.getConnections()
-    }
 
     const ping = async () => {
       const { peerIds } = peerStats
@@ -36,16 +31,20 @@ export default function Home() {
       .catch((e) => {
         console.error(e, e?.error)
       })
+  }, 5000)
 
-    getConnectedPeers().then((peerIds) => {
-      setPeerStats({ ...peerStats, peerIds, connected: true })
-    })
+  useEffect(() => {
+    const peerConnectedCB = (evt: CustomEvent<Connection>) => {
+      const connection = evt.detail
+      setPeerStats({ ...peerStats, peerIds: [...peerStats.peerIds, connection.remotePeer], connections: [...peerStats.connections, connection], connected: true })
+    }
 
-    getConnections().then((connections) => {
-      // If one of the connected peers matches the one in input we're connected
-      setPeerStats({ ...peerStats, connections })
-    })
-  }, 5000)
+    libp2p.addEventListener('peer:connect', peerConnectedCB)
+
+    return () => {
+      libp2p.removeEventListener('peer:connect', peerConnectedCB)
+    }
+  }, [libp2p, peerStats, setPeerStats])
 
   const getUniqueConnections = (connections: Connection[]) => {
     const uniqueConnections: Connection[] = []
@@ -123,33 +122,3 @@ export default function Home() {
     </>
   )
 }
-
-export function Stats(
-  stats: { name: string; stat: string }[] = [
-    { name: 'Peer Ping Latency', stat: '' },
-    { name: 'Peer Count', stat: '' },
-  ],
-) {
-  return (
-    <div>
-      <h3 className="text-base font-semibold leading-6 text-gray-900">
-        Last 30 days
-      </h3>
-      <dl className="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-3">
-        {stats.map((item) => (
-          <div
-            key={item.name}
-            className="overflow-hidden rounded-lg bg-white px-4 py-5 shadow sm:p-6"
-          >
-            <dt className="truncate text-sm font-medium text-gray-500">
-              {item.name}
-            </dt>
-            <dd className="mt-1 text-3xl font-semibold tracking-tight text-gray-900">
-              {item.stat}
-            </dd>
-          </div>
-        ))}
-      </dl>
-    </div>
-  )
-}