bug fixing and improvements (#33)

README.md

@@ -35,6 +35,15 @@ npm install
 npm run dev
 ```
 
+The default API endpoint used to contact a Waku Node is http://localhost:8645
+
+In order to set a custom endpoint, please set the env variable `VITE_API_ENDPOINT`
+
+For example
+```
+export VITE_API_ENDPOINT=<my-other-endpoint>
+```
+
 ### Docker
 
 ```
@@ -66,7 +75,7 @@ your-domain.com {
 ## Depend APIs
 
 - /relay/v1/auto/messages
-- /store/v1/messages
+- /store/v3/messages
 
 ## Known Issues
 

package-lock.json

@@ -1,11 +1,11 @@
 {
-  "name": "ferry-chat",
+  "name": "waku-frontend",
   "version": "0.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "ferry-chat",
+      "name": "waku-frontend",
       "version": "0.0.0",
       "dependencies": {
         "@radix-ui/react-dialog": "^1.0.5",

src/App.tsx

@@ -20,7 +20,7 @@ import logo from "./assets/logo-waku.svg";
 
 interface Message {
   payload: string;
-  contentTopic: string;
+  content_topic: string;
   timestamp: number;
 }
 
@@ -38,12 +38,17 @@ interface ResponseData {
   cursor?: Cursor;
 }
 
+interface MessageData {
+  message: Message;
+  message_hash: string;
+}
+
 interface CommunityMetadata {
   name: string;
   contentTopic: string;
 }
 
-const SERVICE_ENDPOINT = "https://waku.whisperd.tech";
+const SERVICE_ENDPOINT = import.meta.env.VITE_API_ENDPOINT || "http://localhost:8645";
 const COMMUNITY_CONTENT_TOPIC_PREFIX = "/universal/1/community";
 
 function App() {
@@ -68,7 +73,7 @@ function App() {
     setUsername(name);
 
     const endpoint = localStorage.getItem("apiEndpoint");
-    if (endpoint) {
+    if (endpoint && !import.meta.env.VITE_API_ENDPOINT) {
       setApiEndpoint(endpoint);
     }
 
@@ -98,17 +103,19 @@ function App() {
           return;
         }
 
-        let url = `${apiEndpoint}/store/v1/messages?contentTopics=${joinedContentTopics}&ascending=false&pageSize=300`;
+        let url = `${apiEndpoint}/store/v3/messages?contentTopics=${encodeURIComponent(joinedContentTopics)}&ascending=false&pageSize=300&includeData=true`;
         const response = await axios.get(url);
         console.log("Data:", response.data);
 
+        const parsedResponse = response.data.messages.map((obj: MessageData) => obj.message);
+        
         setMessages((prev) => {
-          const filtered = response.data.messages.filter((msg: Message) => {
+          const filtered = parsedResponse.filter((msg: Message) => {
             const found = prev.find(
               (item) =>
                 item.payload === msg.payload &&
                 item.timestamp === msg.timestamp &&
-                item.contentTopic === msg.contentTopic
+                item.content_topic === msg.content_topic
             );
             return !found;
           });
@@ -136,7 +143,7 @@ function App() {
               (item) =>
                 item.payload === msg.payload &&
                 item.timestamp === msg.timestamp &&
-                item.contentTopic === msg.contentTopic
+                item.content_topic === msg.content_topic
             );
             return !found;
           });
@@ -277,7 +284,7 @@ function App() {
   const decodeMsg = (index: number, msg: Message) => {
     try {
       if (
-        msg.contentTopic !==
+        msg.content_topic !==
         `${COMMUNITY_CONTENT_TOPIC_PREFIX}/${community?.contentTopic}`
       ) {
         return;