Misc changes and fixes (#35)

Dockerfile

@@ -17,7 +17,7 @@ COPY . .
 RUN npm install -g vite
 
 # Expose the port Vite runs on
-EXPOSE 5173
+EXPOSE 4000
 
 # Ensure node_modules/.bin is in the PATH
 ENV PATH /app/node_modules/.bin:$PATH

README.md

@@ -48,10 +48,10 @@ export VITE_API_ENDPOINT=<my-other-endpoint>
 
 ```
 docker build -t waku-frontend .
-docker run -p 5173:5173 waku-frontend
+docker run -p 4000:4000 waku-frontend
 ```
 
-And go to `http://localhost:5173`.
+And go to `http://localhost:4000`.
 
 ## Caddy configuration
 

src/App.tsx

@@ -20,7 +20,7 @@ import logo from "./assets/logo-waku.svg";
 
 interface Message {
   payload: string;
-  content_topic: string;
+  contentTopic: string;
   timestamp: number;
 }
 
@@ -48,9 +48,33 @@ interface CommunityMetadata {
   contentTopic: string;
 }
 
+interface InfoResponse {
+  listenAddresses: string[];
+  enrUri: string;
+}
+
+interface HealthResponse {
+  nodeHealth: string;
+  protocolsHealth: string[];
+}
+
 const SERVICE_ENDPOINT = import.meta.env.VITE_API_ENDPOINT || "http://localhost:8645";
 const COMMUNITY_CONTENT_TOPIC_PREFIX = "/universal/1/community";
 
+export function handleError(error: any): void {
+  let message: string;
+
+  if (error.response) {
+      message = `Error: ${error.response.status}\nMessage: ${error.response.data}`;
+  } else if (error.request) {
+      message = 'Error: No response received from server';
+  } else {
+      message = `Error: ${error.message}`;
+  }
+
+  alert(message);
+}
+
 function App() {
   const [newMessage, setNewMessage] = useState("");
   const [username, setUsername] = useState("");
@@ -65,6 +89,8 @@ function App() {
   const [communityName, setCommunityName] = useState("");
   const [apiEndpoint, setApiEndpoint] = useState(SERVICE_ENDPOINT);
   const [nwakuVersion, setNwakuVersion] = useState("");
+  const [infoNode, setInfoNode] = useState<InfoResponse>();
+  const [health, setHealth] = useState<HealthResponse>();
   const [numPeers, setNumPeers] = useState("")
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -102,6 +128,38 @@ function App() {
 
   }, [apiEndpoint]);
 
+  useEffect(() => {
+    const fetchInfoNode = async () => {
+      try {
+        let url = `${apiEndpoint}/debug/v1/info`;
+        const response = await axios.get<InfoResponse>(url);
+        console.log("fetchInfoNode data:", response.data);
+        setInfoNode(response.data);
+      } catch (error) {
+        console.error("Error fetching data:", error);
+      }
+    };
+    
+    fetchInfoNode()
+
+  }, [apiEndpoint]);
+
+  useEffect(() => {
+    const fetchHealth = async () => {
+      try {
+        let url = `${apiEndpoint}/health`;
+        const response = await axios.get<HealthResponse>(url);
+        console.log("fetchHealth data:", response.data);
+        setHealth(response.data);
+      } catch (error) {
+        console.error("Error fetching data:", error);
+      }
+    };
+    
+    fetchHealth()
+
+  }, [apiEndpoint]);
+
   useEffect(() => {
     const fetchAllMessages = async () => {
       try {
@@ -128,7 +186,7 @@ function App() {
               (item) =>
                 item.payload === msg.payload &&
                 item.timestamp === msg.timestamp &&
-                item.content_topic === msg.content_topic
+                item.contentTopic === msg.contentTopic
             );
             return !found;
           });
@@ -168,7 +226,7 @@ function App() {
               (item) =>
                 item.payload === msg.payload &&
                 item.timestamp === msg.timestamp &&
-                item.content_topic === msg.content_topic
+                item.contentTopic === msg.contentTopic
             );
             return !found;
           });
@@ -223,16 +281,21 @@ function App() {
         community!.contentTopic
       }`,
     };
-    const response = await axios.post(
+
-      `${apiEndpoint}/relay/v1/auto/messages`,
+    try{
-      JSON.stringify(message),
+      const response = await axios.post(
-      {
+        `${apiEndpoint}/relay/v1/auto/messages`,
-        headers: {
+        JSON.stringify(message),
-          "Content-Type": "application/json",
+        {
-        },
+          headers: {
-      }
+            "Content-Type": "application/json",
-    );
+          },
-    return response.data;
+        }
+      );
+      return response.data;
+    } catch (error) {
+      handleError(error);
+    }
   };
 
   const sendMessage = async () => {
@@ -319,7 +382,7 @@ function App() {
   const decodeMsg = (index: number, msg: Message) => {
     try {
       if (
-        msg.content_topic !==
+        msg.contentTopic !==
         `${COMMUNITY_CONTENT_TOPIC_PREFIX}/${community?.contentTopic}`
       ) {
         return;
@@ -443,8 +506,11 @@ function App() {
       <div className="absolute right-16 top-16">{settingsDialog()}</div>
 
       <div className="absolute left-16 top-16 flex flex-col">
+        <Label className="text-md">Health: {health?.nodeHealth === "Ready" ? "🟢" : "🔴"}</Label>
         <Label className="text-md">Nwaku Version: {nwakuVersion}</Label>
         <Label className="text-md">Number of Peers: {numPeers}</Label>
+        <Label className="text-md">Multiaddress: {infoNode?.listenAddresses}</Label>
+        {/*<Label className="text-md">ENR: {infoNode?.enrUri}</Label>*/}
       </div>
       
       {!username && (

vite.config.ts

@@ -6,7 +6,7 @@ import react from '@vitejs/plugin-react'
 export default defineConfig({
   server: {
     host: "0.0.0.0",
-    port: 5173,
+    port: 4000,
   },
   plugins: [react()],
   resolve: {