use @waku/react provider

examples/web-chat/src/App.tsx

@@ -1,10 +1,9 @@
 /* eslint no-use-before-define: 0 */
 // @ts-ignore
-import React, { useEffect, useReducer, useState } from "react";
+import React, { useEffect, useState } from "react";
 import "./App.css";
 import handleCommand from "./command";
 import Room from "./Room";
-import { WakuContext } from "./WakuContext";
 import { generate } from "server-name-generator";
 import { Message } from "./Message";
 import { LightNode } from "@waku/interfaces";
@@ -65,22 +64,18 @@ export default function App() {
       className="chat-app"
       style={{ height: "100vh", width: "100vw", overflow: "hidden" }}
     >
-      <WakuContext.Provider value={{ waku: node }}>
+      <Room
-        <Room
+        nick={nick}
-          nick={nick}
+        messages={[]}
-          messages={[]}
+        commandHandler={(input: string) => {
-          commandHandler={(input: string) => {
+          handleCommand(input, node, setNick).then(({ command, response }) => {
-            handleCommand(input, node, setNick).then(
+            const commandMessages = response.map((msg) => {
-              ({ command, response }) => {
+              return Message.fromUtf8String(command, msg);
-                const commandMessages = response.map((msg) => {
+            });
-                  return Message.fromUtf8String(command, msg);
+            console.log("trying to send", commandMessages);
-                });
+          });
-                console.log("trying to send", commandMessages);
+        }}
-              }
+      />
-            );
-          }}
-        />
-      </WakuContext.Provider>
     </div>
   );
 }

examples/web-chat/src/MessageInput.tsx

@@ -1,5 +1,6 @@
 import { ChangeEvent, KeyboardEvent, useEffect, useState } from "react";
-import { useWaku } from "./WakuContext";
+import { useWaku } from "@waku/react";
+import { LightNode } from "@waku/interfaces";
 import {
   TextInput,
   TextComposer,
@@ -16,7 +17,7 @@ interface Props {
 export default function MessageInput(props: Props) {
   const [inputText, setInputText] = useState<string>("");
   const [activeButton, setActiveButton] = useState<boolean>(false);
-  const { waku } = useWaku();
+  const { node } = useWaku<LightNode>();
 
   const sendMessage = async () => {
     if (props.sendMessage) {
@@ -44,9 +45,9 @@ export default function MessageInput(props: Props) {
   useEffect(() => {
     if (inputText.startsWith("/")) {
       setActiveButton(true);
-    } else if (waku) {
+    } else if (node) {
       (async () => {
-        const peers = await waku.lightPush.peers();
+        const peers = await node.lightPush.peers();
         if (!!peers) {
           setActiveButton(true);
         } else {
@@ -54,7 +55,7 @@ export default function MessageInput(props: Props) {
         }
       })();
     }
-  }, [activeButton, inputText, waku]);
+  }, [activeButton, inputText, node]);
 
   return (
     <TextComposer

examples/web-chat/src/Room.tsx

@@ -1,8 +1,11 @@
-import type { IDecodedMessage as WakuMessage } from "@waku/interfaces";
+import type {
+  IDecodedMessage as WakuMessage,
+  LightNode,
+} from "@waku/interfaces";
 import { ChatContentTopic } from "./App";
 import ChatList from "./ChatList";
 import MessageInput from "./MessageInput";
-import { useWaku } from "./WakuContext";
+import { useWaku } from "@waku/react";
 import { TitleBar } from "@livechat/ui-kit";
 import { Message } from "./Message";
 import { ChatMessage } from "./chat_message";
@@ -16,7 +19,7 @@ interface Props {
 }
 
 export default function Room(props: Props) {
-  const { waku } = useWaku();
+  const { node } = useWaku<LightNode>();
 
   const [storePeers, setStorePeers] = useState(0);
   const [filterPeers, setFilterPeers] = useState(0);
@@ -28,12 +31,12 @@ export default function Room(props: Props) {
   const ChatEncoder = new Encoder(ChatContentTopic);
 
   useEffect(() => {
-    if (!waku) return;
+    if (!node) return;
 
     // Update store peer when new peer connected & identified
-    waku.libp2p.peerStore.addEventListener("change:protocols", async (evt) => {
+    node.libp2p.peerStore.addEventListener("change:protocols", async (evt) => {
       const { peerId } = evt.detail;
-      const tags = (await waku.libp2p.peerStore.getTags(peerId)).map(
+      const tags = (await node.libp2p.peerStore.getTags(peerId)).map(
         (t) => t.name
       );
       if (tags.includes("peer-exchange")) {
@@ -42,16 +45,16 @@ export default function Room(props: Props) {
         setBootstrapPeers((peers) => new Set(peers).add(peerId.toString()));
       }
 
-      const storePeers = await waku.store.peers();
+      const storePeers = await node.store.peers();
       setStorePeers(storePeers.length);
 
-      const filterPeers = await waku.filter.peers();
+      const filterPeers = await node.filter.peers();
       setFilterPeers(filterPeers.length);
 
-      const lightPushPeers = await waku.lightPush.peers();
+      const lightPushPeers = await node.lightPush.peers();
       setLightPushPeers(lightPushPeers.length);
     });
-  }, [waku]);
+  }, [node]);
 
   useEffect(() => {
     console.log("Bootstrap Peers:");
@@ -79,14 +82,14 @@ export default function Room(props: Props) {
       <ChatList messages={props.messages} />
       <MessageInput
         sendMessage={
-          waku
+          node
             ? async (messageToSend) => {
                 return handleMessage(
                   messageToSend,
                   props.nick,
                   props.commandHandler,
                   async (msg) => {
-                    await waku.lightPush.push(ChatEncoder, msg);
+                    await node.lightPush.push(ChatEncoder, msg);
                   }
                 );
               }

examples/web-chat/src/WakuContext.ts

@@ -1,9 +0,0 @@
-import { createContext, useContext } from "react";
-import type { LightNode as WakuLight } from "@waku/interfaces";
-
-export type WakuContextType = {
-  waku?: WakuLight;
-};
-
-export const WakuContext = createContext<WakuContextType>({ waku: undefined });
-export const useWaku = () => useContext(WakuContext);