chore(relay-reactjs-chat): bump js-waku to 0.27.0

relay-reactjs-chat/package.json

@@ -7,7 +7,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
-    "js-waku": "0.24.0-63bfb9b",
+    "js-waku": "0.27.0",
     "protobufjs": "^7.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -19,6 +19,9 @@
     "test": "exit 0",
     "eject": "craco eject"
   },
+  "browser": {
+    "crypto": false
+  },
   "eslintConfig": {
     "extends": [
       "react-app",

relay-reactjs-chat/src/App.js

@@ -1,115 +1,115 @@
-import {WakuMessage, waitForRemotePeer} from "js-waku";
+import { WakuMessage } from "js-waku";
 import * as React from "react";
 import protobuf from "protobufjs";
-import {createWaku} from "js-waku/lib/create_waku";
+import { createWaku } from "js-waku/lib/create_waku";
+import { waitForRemotePeer } from "js-waku/lib/wait_for_remote_peer";
 
 const ContentTopic = `/relay-reactjs-chat/1/chat/proto`;
 
 const SimpleChatMessage = new protobuf.Type("SimpleChatMessage")
-    .add(new protobuf.Field("timestamp", 1, "uint32"))
+  .add(new protobuf.Field("timestamp", 1, "uint32"))
-    .add(new protobuf.Field("text", 2, "string"));
+  .add(new protobuf.Field("text", 2, "string"));
 
 function App() {
-    const [waku, setWaku] = React.useState(undefined);
+  const [waku, setWaku] = React.useState(undefined);
-    const [wakuStatus, setWakuStatus] = React.useState("None");
+  const [wakuStatus, setWakuStatus] = React.useState("None");
-    // Using a counter just for the messages to be different
+  // Using a counter just for the messages to be different
-    const [sendCounter, setSendCounter] = React.useState(0);
+  const [sendCounter, setSendCounter] = React.useState(0);
-    const [messages, setMessages] = React.useState([]);
+  const [messages, setMessages] = React.useState([]);
 
-    React.useEffect(() => {
+  React.useEffect(() => {
-        if (!!waku) return;
+    if (!!waku) return;
-        if (wakuStatus !== "None") return;
+    if (wakuStatus !== "None") return;
 
-        setWakuStatus("Starting");
+    setWakuStatus("Starting");
-        (async () => {
+    (async () => {
+      const waku = await createWaku({ defaultBootstrap: true });
 
-            const waku = await createWaku({defaultBootstrap: true})
+      setWaku(waku);
+      await waku.start();
+      setWakuStatus("Connecting");
+      await waitForRemotePeer(waku, ["relay"]);
+      setWakuStatus("Ready");
+    })();
+  }, [waku, wakuStatus]);
 
-            setWaku(waku);
+  const processIncomingMessage = React.useCallback((wakuMessage) => {
-            await waku.start();
+    if (!wakuMessage.payload) return;
-            setWakuStatus("Connecting");
-            await waitForRemotePeer(waku, ["relay"]);
-            setWakuStatus("Ready");
-        })();
-    }, [waku, wakuStatus]);
 
-    const processIncomingMessage = React.useCallback((wakuMessage) => {
+    const { text, timestamp } = SimpleChatMessage.decode(wakuMessage.payload);
-        if (!wakuMessage.payload) return;
 
-        const {text, timestamp} = SimpleChatMessage.decode(wakuMessage.payload);
+    const time = new Date();
 
-        const time = new Date();
+    time.setTime(timestamp);
+    const message = { text, timestamp: time };
 
-        time.setTime(timestamp);
+    setMessages((messages) => {
-        const message = {text, timestamp: time};
+      return [message].concat(messages);
+    });
+  }, []);
 
-        setMessages((messages) => {
+  React.useEffect(() => {
-            return [message].concat(messages);
+    if (!waku) return;
-        });
-    }, []);
 
-    React.useEffect(() => {
+    // Pass the content topic to only process messages related to your dApp
-        if (!waku) return;
+    waku.relay.addObserver(processIncomingMessage, [ContentTopic]);
 
-        // Pass the content topic to only process messages related to your dApp
+    // `cleanUp` is called when the component is unmounted, see ReactJS doc.
-        waku.relay.addObserver(processIncomingMessage, [ContentTopic]);
+    return function cleanUp() {
-
+      waku.relay.deleteObserver(processIncomingMessage, [ContentTopic]);
-        // `cleanUp` is called when the component is unmounted, see ReactJS doc.
-        return function cleanUp() {
-            waku.relay.deleteObserver(processIncomingMessage, [ContentTopic]);
-        };
-    }, [waku, wakuStatus, processIncomingMessage]);
-
-    const sendMessageOnClick = () => {
-        // Check Waku is started and connected first.
-        if (wakuStatus !== "Ready") return;
-
-        sendMessage(`Here is message #${sendCounter}`, waku, new Date()).then(() =>
-            console.log("Message sent")
-        );
-
-        // For demonstration purposes.
-        setSendCounter(sendCounter + 1);
     };
+  }, [waku, wakuStatus, processIncomingMessage]);
 
-    return (
+  const sendMessageOnClick = () => {
-        <div className="App">
+    // Check Waku is started and connected first.
-            <header className="App-header">
+    if (wakuStatus !== "Ready") return;
-                <p>{wakuStatus}</p>
+
-                <button onClick={sendMessageOnClick} disabled={wakuStatus !== "Ready"}>
+    sendMessage(`Here is message #${sendCounter}`, waku, new Date()).then(() =>
-                    Send Message
+      console.log("Message sent")
-                </button>
-                <ul>
-                    {messages.map((msg) => {
-                        return (
-                            <li key={msg.timestamp.valueOf()}>
-                                <p>
-                                    {msg.timestamp.toString()}: {msg.text}
-                                </p>
-                            </li>
-                        );
-                    })}
-                </ul>
-            </header>
-        </div>
     );
+
+    // For demonstration purposes.
+    setSendCounter(sendCounter + 1);
+  };
+
+  return (
+    <div className="App">
+      <header className="App-header">
+        <p>{wakuStatus}</p>
+        <button onClick={sendMessageOnClick} disabled={wakuStatus !== "Ready"}>
+          Send Message
+        </button>
+        <ul>
+          {messages.map((msg) => {
+            return (
+              <li key={msg.timestamp.valueOf()}>
+                <p>
+                  {msg.timestamp.toString()}: {msg.text}
+                </p>
+              </li>
+            );
+          })}
+        </ul>
+      </header>
+    </div>
+  );
 }
 
 function sendMessage(message, waku, timestamp) {
-    const time = timestamp.getTime();
+  const time = timestamp.getTime();
 
-    // Encode to protobuf
+  // Encode to protobuf
-    const protoMsg = SimpleChatMessage.create({
+  const protoMsg = SimpleChatMessage.create({
-        timestamp: time,
+    timestamp: time,
-        text: message,
+    text: message,
-    });
+  });
-    const payload = SimpleChatMessage.encode(protoMsg).finish();
+  const payload = SimpleChatMessage.encode(protoMsg).finish();
 
-    // Wrap in a Waku Message
+  // Wrap in a Waku Message
-    return WakuMessage.fromBytes(payload, ContentTopic).then((wakuMessage) =>
+  return WakuMessage.fromBytes(payload, ContentTopic).then((wakuMessage) =>
-        // Send over Waku Relay
+    // Send over Waku Relay
-        waku.relay.send(wakuMessage)
+    waku.relay.send(wakuMessage)
-    );
+  );
 }
 
 export default App;