diff --git a/examples/web-chat/package-lock.json b/examples/web-chat/package-lock.json index 66dcddd..b5d22c6 100644 --- a/examples/web-chat/package-lock.json +++ b/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", diff --git a/examples/web-chat/src/App.tsx b/examples/web-chat/src/App.tsx index a7d6bfb..44769d4 100644 --- a/examples/web-chat/src/App.tsx +++ b/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(); - const { decoder } = useContentPair(ChatContentTopic); + const { decoder } = useContentPair(); const messages = useMessages({ node, decoder, diff --git a/examples/web-chat/src/Room.tsx b/examples/web-chat/src/Room.tsx index d3accb7..7097e33 100644 --- a/examples/web-chat/src/Room.tsx +++ b/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(); + 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()); const [peerExchangePeers, setPeerExchangePeers] = useState(new Set()); - 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); } ); } diff --git a/examples/web-chat/src/config.ts b/examples/web-chat/src/config.ts new file mode 100644 index 0000000..a0f956a --- /dev/null +++ b/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, +]; diff --git a/examples/web-chat/src/hooks.ts b/examples/web-chat/src/hooks.ts index 8b87393..7412d2c 100644 --- a/examples/web-chat/src/hooks.ts +++ b/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; }; diff --git a/examples/web-chat/src/index.tsx b/examples/web-chat/src/index.tsx index 5125389..2810a93 100644 --- a/examples/web-chat/src/index.tsx +++ b/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( - + + + ,