chore(web-chat): bump js-waku to 0.29.0

web-chat/package.json

@@ -6,7 +6,7 @@
   "dependencies": {
     "@livechat/ui-kit": "^0.5.0-20",
     "@multiformats/multiaddr": "^10.4.0",
-    "js-waku": "0.28.1",
+    "js-waku": "0.29.0",
     "process": "^0.11.10",
     "protons-runtime": "^3.1.0",
     "react": "^17.0.2",

web-chat/pnpm-lock.yaml

@@ -9,7 +9,7 @@ specifiers:
   '@types/react-dom': ^17.0.11
   cspell: ^6.0.0
   gh-pages: ^4.0.0
-  js-waku: 0.28.1
+  js-waku: 0.29.0
   npm-run-all: ^4.1.5
   prettier: ^2.6.2
   process: ^0.11.10
@@ -26,7 +26,7 @@ specifiers:
 dependencies:
   '@livechat/ui-kit': 0.5.0-20_ibvs32p3vr2bbtbo3dwziny444
   '@multiformats/multiaddr': 10.4.0
-  js-waku: 0.28.1
+  js-waku: 0.29.0
   process: 0.11.10
   protons-runtime: 3.1.0_uint8arraylist@2.3.2
   react: 17.0.2
@@ -8382,8 +8382,8 @@ packages:
   /js-tokens/4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
-  /js-waku/0.28.1:
-    resolution: {integrity: sha512-0h9TpV6jywyjdes8hr9tFV/5iJh3LQN3sQFYHcXyi4cK+4htNiMrCRjBSqRBtfhs/j+4tOkrht8gRJRLHdA5RA==}
+  /js-waku/0.29.0:
+    resolution: {integrity: sha512-44GOpNbkFt/1/bDZ3tcaeemehaZaxw404QmTvHw7FUwY6dtvGsDEERLEw1TERUljDESFjvEOcJjYnLcNDY1MHg==}
     engines: {node: '>=16'}
     dependencies:
       '@chainsafe/libp2p-gossipsub': 4.1.1

web-chat/src/App.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useReducer, useState } from "react";
 import "./App.css";
-import { PageDirection, Protocols, WakuMessage } from "js-waku";
+import { PageDirection, Protocols } from "js-waku";
 import handleCommand from "./command";
 import Room from "./Room";
 import { WakuContext } from "./WakuContext";
@@ -16,6 +16,7 @@ import { PeerDiscoveryStaticPeers } from "js-waku/lib/peer_discovery_static_list
 import type { WakuLight } from "js-waku/lib/interfaces";
 import process from "process";
 import { createLightNode } from "js-waku/lib/create_waku";
+import { DecoderV0, MessageV0 } from "js-waku/lib/waku_message/version_0";
 
 const themes = {
   AuthorName: {
@@ -47,6 +48,7 @@ const themes = {
 };
 
 export const ChatContentTopic = "/toy-chat/2/huilong/proto";
+const ChatDecoder = new DecoderV0(ChatContentTopic);
 
 async function retrieveStoreMessages(
   waku: WakuLight,
@@ -60,7 +62,7 @@ async function retrieveStoreMessages(
 
   try {
     for await (const messagesPromises of waku.store.queryGenerator(
-      [ChatContentTopic],
+      [ChatDecoder],
       {
         pageSize: 5,
         pageDirection: PageDirection.FORWARD,
@@ -70,11 +72,11 @@ async function retrieveStoreMessages(
         },
       }
     )) {
-      const messages: Message[] = [];
       const wakuMessages = await Promise.all(messagesPromises);
 
+      const messages: Message[] = [];
       wakuMessages
-        .filter(isWakuMessageDefined)
+        .filter(isMessageDefined)
         .map((wakuMsg) => Message.fromWakuMessage(wakuMsg))
         .forEach((message) => {
           if (message) {
@@ -113,7 +115,7 @@ export default function App() {
     // Let's retrieve previous messages before listening to new messages
     if (!historicalMessagesRetrieved) return;
 
-    const handleIncomingMessage = (wakuMsg: WakuMessage) => {
+    const handleIncomingMessage = (wakuMsg: MessageV0) => {
       console.log("Message received: ", wakuMsg);
       const msg = Message.fromWakuMessage(wakuMsg);
       if (msg) {
@@ -122,7 +124,7 @@ export default function App() {
     };
 
     let unsubscribe: undefined | (() => Promise<void>);
-    waku.filter.subscribe(handleIncomingMessage, [ChatContentTopic]).then(
+    waku.filter.subscribe([ChatDecoder], handleIncomingMessage).then(
       (_unsubscribe) => {
         console.log("subscribed to ", ChatContentTopic);
         unsubscribe = _unsubscribe;
@@ -229,8 +231,6 @@ function reduceMessages(state: Message[], newMessages: Message[]) {
   return state.concat(newMessages);
 }
 
-const isWakuMessageDefined = (
-  msg: WakuMessage | undefined
-): msg is WakuMessage => {
+const isMessageDefined = (msg: MessageV0 | undefined): msg is MessageV0 => {
   return !!msg;
 };

web-chat/src/Message.ts

@@ -1,4 +1,4 @@
-import { WakuMessage } from "js-waku";
+import { MessageV0 } from "js-waku/lib/waku_message/version_0";
 import { ChatMessage } from "./chat_message";
 
 export class Message {
@@ -11,7 +11,7 @@ export class Message {
     this.sentTimestamp = sentTimestamp;
   }
 
-  static fromWakuMessage(wakuMsg: WakuMessage): Message | undefined {
+  static fromWakuMessage(wakuMsg: MessageV0): Message | undefined {
     if (wakuMsg.payload) {
       try {
         const chatMsg = ChatMessage.decode(wakuMsg.payload);

web-chat/src/Room.tsx

@@ -1,4 +1,4 @@
-import { PushResponse, WakuMessage } from "js-waku";
+import type { Message as WakuMessage } from "js-waku/lib/interfaces";
 import { ChatContentTopic } from "./App";
 import ChatList from "./ChatList";
 import MessageInput from "./MessageInput";
@@ -7,6 +7,7 @@ import { TitleBar } from "@livechat/ui-kit";
 import { Message } from "./Message";
 import { ChatMessage } from "./chat_message";
 import { useEffect, useState } from "react";
+import { EncoderV0 } from "js-waku/lib/waku_message/version_0";
 
 interface Props {
   messages: Message[];
@@ -21,6 +22,8 @@ export default function Room(props: Props) {
   const [filterPeers, setFilterPeers] = useState(0);
   const [lightPushPeers, setLightPushPeers] = useState(0);
 
+  const ChatEncoder = new EncoderV0(ChatContentTopic);
+
   useEffect(() => {
     if (!waku) return;
 
@@ -57,7 +60,9 @@ export default function Room(props: Props) {
                   messageToSend,
                   props.nick,
                   props.commandHandler,
-                  waku.lightPush.push.bind(waku.lightPush)
+                  async (msg) => {
+                    await waku.lightPush.push(ChatEncoder, msg);
+                  }
                 );
               }
             : undefined
@@ -71,18 +76,15 @@ async function handleMessage(
   message: string,
   nick: string,
   commandHandler: (cmd: string) => void,
-  messageSender: (msg: WakuMessage) => Promise<PushResponse | null>
+  sender: (wakuMsg: WakuMessage) => Promise<void>
 ) {
   if (message.startsWith("/")) {
     commandHandler(message);
   } else {
     const timestamp = new Date();
     const chatMessage = ChatMessage.fromUtf8String(timestamp, nick, message);
-    const wakuMsg = await WakuMessage.fromBytes(
-      chatMessage.encode(),
-      ChatContentTopic,
-      { timestamp }
-    );
-    await messageSender(wakuMsg);
+    const payload = chatMessage.encode();
+
+    await sender({ payload, timestamp });
   }
 }