add config file, use content pair provider

examples/web-chat/package-lock.json

@@ -12199,9 +12199,9 @@
       "dev": true
     },
     "node_modules/hpack.js/node_modules/readable-stream": {
-      "version": "2.3.7",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
-      "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
       "dev": true,
       "dependencies": {
         "core-util-is": "~1.0.0",
@@ -13343,9 +13343,9 @@
       }
     },
     "node_modules/it-pair": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/it-pair/-/it-pair-2.0.3.tgz",
-      "integrity": "sha512-heCgsbYscFCQY5YvltlGT9tjgLGYo7NxPEoJyl55X4BD2KOXpTyuwOhPLWhi9Io0y6+4ZUXCkyaQXIB6Y8xhRw==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/it-pair/-/it-pair-2.0.4.tgz",
+      "integrity": "sha512-S3y3mTJ3muuxcHBGcIzNONofAN+G3iAgmSjS78qARkRWI2ImJXybjj0h52uSW+isgrJqIx2iFB/T8ZEBc8kDSw==",
       "dependencies": {
         "it-stream-types": "^1.0.3",
         "p-defer": "^4.0.0"
@@ -13356,9 +13356,9 @@
       }
     },
     "node_modules/it-pb-stream": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/it-pb-stream/-/it-pb-stream-2.0.3.tgz",
-      "integrity": "sha512-nuJzftDqk52gZmVD6T0sIKggXMhBkLSAFCD1OecxqGTVwk2wuDYY0ZHpcXZJuHty3kIuLY4xlWZrnDH9efV4YA==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/it-pb-stream/-/it-pb-stream-2.0.4.tgz",
+      "integrity": "sha512-p0chBIT3HrZt3hIqvBEi+NgZxxT25MTJ362nKoHmzA/k/WsUPPbeSz7Ad+wRcGxZn2O5JEXCS5lOGRjSDSnlNg==",
       "dependencies": {
         "it-handshake": "^4.1.2",
         "it-length-prefixed": "^8.0.2",
@@ -18920,9 +18920,9 @@
       }
     },
     "node_modules/readable-stream": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-      "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.1.tgz",
+      "integrity": "sha512-+rQmrWMYGA90yenhTYsLWAsLsqVC8osOw6PKE1HDYiO0gdPeKe/xDHNzIAIn4C91YQ6oenEhfYqqc1883qHbjQ==",
       "dev": true,
       "dependencies": {
         "inherits": "^2.0.3",
@@ -20615,9 +20615,9 @@
       }
     },
     "node_modules/terser": {
-      "version": "5.16.4",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.16.4.tgz",
-      "integrity": "sha512-5yEGuZ3DZradbogeYQ1NaGz7rXVBDWujWlx1PT8efXO6Txn+eWbfKqB2bTDVmFXmePFkoLU6XI8UektMIEA0ug==",
+      "version": "5.16.5",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.16.5.tgz",
+      "integrity": "sha512-qcwfg4+RZa3YvlFh0qjifnzBHjKGNbtDo9yivMqMFDy9Q6FSaQWSB/j1xKhsoUFJIqDOM3TsN6D5xbrMrFcHbg==",
       "dev": true,
       "dependencies": {
         "@jridgewell/source-map": "^0.3.2",

examples/web-chat/src/App.tsx

@@ -11,7 +11,6 @@ import { useWaku, useContentPair } from "@waku/react";
 
 import { useMessages, usePersistentNick } from "./hooks";
 
-export const ChatContentTopic = "/toy-chat/2/huilong/proto";
 const startTime = new Date();
 // Only retrieve a week of history
 startTime.setTime(Date.now() - 1000 * 60 * 60 * 24 * 7);
@@ -19,7 +18,7 @@ const endTime = new Date();
 
 export default function App() {
   const { node } = useWaku<LightNode>();
-  const { decoder } = useContentPair(ChatContentTopic);
+  const { decoder } = useContentPair();
   const messages = useMessages({
     node,
     decoder,

examples/web-chat/src/Room.tsx

@@ -2,10 +2,9 @@ import type {
   IDecodedMessage as WakuMessage,
   LightNode,
 } from "@waku/interfaces";
-import { ChatContentTopic } from "./App";
 import ChatList from "./ChatList";
 import MessageInput from "./MessageInput";
-import { useWaku } from "@waku/react";
+import { useWaku, useContentPair } from "@waku/react";
 import { TitleBar } from "@livechat/ui-kit";
 import { Message } from "./Message";
 import { ChatMessage } from "./chat_message";
@@ -20,6 +19,7 @@ interface Props {
 
 export default function Room(props: Props) {
   const { node } = useWaku<LightNode>();
+  const { encoder } = useContentPair();
 
   const [storePeers, setStorePeers] = useState(0);
   const [filterPeers, setFilterPeers] = useState(0);
@@ -28,8 +28,6 @@ export default function Room(props: Props) {
   const [bootstrapPeers, setBootstrapPeers] = useState(new Set<string>());
   const [peerExchangePeers, setPeerExchangePeers] = useState(new Set<string>());
 
-  const ChatEncoder = new Encoder(ChatContentTopic);
-
   useEffect(() => {
     if (!node) return;
 
@@ -89,7 +87,7 @@ export default function Room(props: Props) {
                   props.nick,
                   props.commandHandler,
                   async (msg) => {
-                    await node.lightPush.push(ChatEncoder, msg);
+                    await node.lightPush.push(encoder as Encoder, msg);
                   }
                 );
               }

examples/web-chat/src/config.ts

@@ -0,0 +1,13 @@
+import { Protocols } from "@waku/interfaces";
+
+export const CONTENT_TOPIC = "/toy-chat/2/huilong/proto";
+
+const PUBLIC_KEY = "AOGECG2SPND25EEFMAJ5WF3KSGJNSGV356DSTL2YVLLZWIV6SAYBM";
+const FQDN = "test.waku.nodes.status.im";
+export const ENR_TREE = `enrtree://${PUBLIC_KEY}@${FQDN}`;
+
+export const PROTOCOLS = [
+  Protocols.Filter,
+  Protocols.Store,
+  Protocols.LightPush,
+];

examples/web-chat/src/hooks.ts

@@ -23,7 +23,7 @@ export const usePersistentNick = (): [
 
 type UseMessagesParams = {
   node: undefined | LightNode;
-  decoder: Decoder;
+  decoder: undefined | Decoder;
   options: StoreQueryOptions;
 };
 

examples/web-chat/src/index.tsx

@@ -1,17 +1,14 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import { ThemeProvider } from "@livechat/ui-kit";
-import { LightNodeProvider } from "@waku/react";
+import { LightNodeProvider, ContentPairProvider } from "@waku/react";
 import { wakuDnsDiscovery } from "@waku/dns-discovery";
-import { Protocols } from "@waku/interfaces";
 import { wakuPeerExchangeDiscovery } from "@waku/peer-exchange";
 
 import "./index.css";
 import App from "./App";
+import { ENR_TREE, CONTENT_TOPIC, PROTOCOLS } from "./config";
 
-const PUBLIC_KEY = "AOGECG2SPND25EEFMAJ5WF3KSGJNSGV356DSTL2YVLLZWIV6SAYBM";
-const FQDN = "test.waku.nodes.status.im";
-const ENR_TREE = `enrtree://${PUBLIC_KEY}@${FQDN}`;
 const NODE_OPTIONS = {
   libp2p: {
     peerDiscovery: [
@@ -25,8 +22,6 @@ const NODE_OPTIONS = {
   },
 };
 
-const PROTOCOLS = [Protocols.Filter, Protocols.Store, Protocols.LightPush];
-
 const THEMES = {
   AuthorName: {
     css: {
@@ -60,7 +55,9 @@ ReactDOM.render(
   <React.StrictMode>
     <ThemeProvider theme={THEMES}>
       <LightNodeProvider options={NODE_OPTIONS} protocols={PROTOCOLS}>
-        <App />
+        <ContentPairProvider contentTopic={CONTENT_TOPIC}>
+          <App />
+        </ContentPairProvider>
       </LightNodeProvider>
     </ThemeProvider>
   </React.StrictMode>,