diff --git a/.cspell.json b/.cspell.json index bc809dc..77b6f0c 100644 --- a/.cspell.json +++ b/.cspell.json @@ -6,11 +6,9 @@ "linkability", "Unlinkability", "waku", - "deplatforming", "gossipsub", "incentivized", "incentivizing", - "XMTP", "RAILGUN", "nwaku", "deanonymization", @@ -23,9 +21,7 @@ "proto", "multiaddr", "multiaddrs", - "Multiaddrs", "keyturn", - "Comms", "Protobuf", "supercrypto", "QUIC", @@ -47,11 +43,11 @@ "myaddr", "extip", "staticnode", - "permissioned", "Secp", "libpq", "dylib", "uncompromised", + "reactjs", ], "flagWords": [], "ignorePaths": [ @@ -76,7 +72,7 @@ "pattern": "/wss:.*/" }, { - "name": "youtube-link", + "name": "youtube", "pattern": "/< youtube.*/" }, { @@ -84,5 +80,5 @@ "pattern": "/enr:-.*/" } ], - "ignoreRegExpList": ["multiaddr", "dnsMultiaddr", "wss", "youtube-link", "enrUri"] + "ignoreRegExpList": ["multiaddr", "dnsMultiaddr", "wss", "youtube", "enrUri"] } diff --git a/docs/guides/js-waku/index.md b/docs/guides/js-waku/index.md index 73da0db..9631978 100644 --- a/docs/guides/js-waku/index.md +++ b/docs/guides/js-waku/index.md @@ -38,7 +38,7 @@ import * as waku from "https://unpkg.com/@waku/sdk@latest/bundle/index.js"; ## Getting Started -Check out the [quick start](/guides/js-waku/quick-start) guide and comprehensive tutorials to learn how to build applications with `js-waku`. +Check out the quick start guide and comprehensive tutorials to learn how to build applications using `js-waku`: | Guide | Description | | - | - | @@ -46,7 +46,8 @@ Check out the [quick start](/guides/js-waku/quick-start) guide and comprehensive | [Send and Receive Messages Using Relay](/guides/js-waku/relay-send-receive) | Learn how to set up a Waku node for sending and receiving messages using the [Relay](/overview/concepts/protocols#relay) protocol | | [Send and Receive Messages Using Light Push and Filter](/guides/js-waku/light-send-receive) | Learn how to send and receive messages on light nodes using the [Light Push](/overview/concepts/protocols#light-push) and [Filter](/overview/concepts/protocols#filter) protocols | | [Retrieve Messages Using Store](/guides/js-waku/store-retrieve-messages) | Learn how to retrieve and filter historical messages on light nodes using the [Store](/overview/concepts/protocols#store) protocol | -| [Bootstrap DApps Using @waku/create-app](/guides/js-waku/waku-create-app) | Learn how to use the [@waku/create-app](https://www.npmjs.com/package/@waku/create-app) package to bootstrap your next `js-waku` project from various example templates | +| [Build React DApps Using @waku/react](/guides/js-waku/use-waku-react) | Learn how to use the [@waku/react](https://www.npmjs.com/package/@waku/react) package seamlessly integrate `js-waku` into a React application | +| [Bootstrap DApps Using @waku/create-app](/guides/js-waku/use-waku-create-app) | Learn how to use the [@waku/create-app](https://www.npmjs.com/package/@waku/create-app) package to bootstrap your next `js-waku` project from various example templates | ## Get Help and Report Issues diff --git a/docs/guides/js-waku/light-send-receive.md b/docs/guides/js-waku/light-send-receive.md index c067cd5..cb58cf7 100644 --- a/docs/guides/js-waku/light-send-receive.md +++ b/docs/guides/js-waku/light-send-receive.md @@ -4,7 +4,7 @@ title: Send and Receive Messages Using Light Push and Filter This guide provides detailed steps to create a light node, send messages using the [Light Push protocol](/overview/concepts/protocols#light-push), and receive messages using the [Filter protocol](/overview/concepts/protocols#filter). -## Create a Waku Node +## Create a Light Node Set up a Waku node by creating a light node, connecting to network peers with `Light Push` and `Filter` enabled, choosing a [content topic](/overview/concepts/content-topics), and creating an `encoder` and `decoder` for [message encryption](https://rfc.vac.dev/spec/26/): @@ -14,7 +14,7 @@ import { waitForRemotePeer, Protocols, createEncoder, - createDecoder + createDecoder, } from "@waku/sdk"; // Create and start a light node @@ -23,8 +23,8 @@ await node.start(); // Wait for a successful peer connection await waitForRemotePeer(node, [ - Protocols.LightPush, - Protocols.Filter, + Protocols.LightPush, + Protocols.Filter, ]); // Choose a content topic @@ -44,13 +44,13 @@ import protobuf from "protobufjs"; // Create a message structure using Protobuf const ChatMessage = new protobuf.Type("ChatMessage") - .add(new protobuf.Field("timestamp", 1, "uint64")) - .add(new protobuf.Field("sender", 2, "string")) - .add(new protobuf.Field("message", 3, "string")); + .add(new protobuf.Field("timestamp", 1, "uint64")) + .add(new protobuf.Field("sender", 2, "string")) + .add(new protobuf.Field("message", 3, "string")); ``` :::info -Please refer to the [Protobuf installation](/guides/js-waku/quick-start#create-a-message-structure) guide for steps on adding the `protobufjs` package to your project. +Please refer to the [Protobuf installation](/guides/js-waku/quick-start#create-a-message-structure) guide for adding the `protobufjs` package to your project. ::: ## Send Messages Using Light Push @@ -76,22 +76,25 @@ await node.lightPush.send(encoder, { ## Receive Messages Using Filter -Use the `filter.subscribe()` function to listen for incoming messages on a specific content topic: +To receive messages using the `Filter` protocol, create a callback function to process the messages and use the `filter.subscribe()` function: ```js -// Subscribe to content topics and display new messages -const unsubscribe = await node.filter.subscribe([decoder], (wakuMessage) => { - // Check if there is a payload on the message - if (!wakuMessage.payload) return; - // Render the messageObj as desired in your application +// Create the callback function +const callback = (wakuMessage) => { + // Check if there is a payload on the message + if (!wakuMessage.payload) return; + // Render the messageObj as desired in your application const messageObj = ChatMessage.decode(wakuMessage.payload); console.log(messageObj); -}); +}; + +// Subscribe to content topics and display new messages +const unsubscribe = await node.filter.subscribe([decoder], callback); // Use the unsubscribe() function to stop receiving messages // await unsubscribe(); ``` :::tip Congratulations! -You have successfully sent and received messages over the Waku Network using the `Light Push` and `Filter` protocols. +You have successfully sent and received messages over the Waku Network using the `Light Push` and `Filter` protocols. Check out the [light-js](https://github.com/waku-org/js-waku-examples/tree/master/examples/light-js) and [light-chat](https://github.com/waku-org/js-waku-examples/tree/master/examples/light-chat) examples for working demos. ::: \ No newline at end of file diff --git a/docs/guides/js-waku/quick-start.md b/docs/guides/js-waku/quick-start.md index 74dbc74..6900b9e 100644 --- a/docs/guides/js-waku/quick-start.md +++ b/docs/guides/js-waku/quick-start.md @@ -6,12 +6,12 @@ This guide provides quick steps to start using the `js-waku` SDK by setting up a ## Create a Relay Node -Use the `createRelayNode()` function to create a relay node and interact with the Waku Network: +Use the `createRelayNode()` function to create a Relay Node and interact with the Waku Network: ```js import { createRelayNode } from "@waku/sdk"; -// Create and start a relay node +// Create and start a Relay Node const node = await createRelayNode({ defaultBootstrap: true }); await node.start(); @@ -20,7 +20,7 @@ await node.start(); ``` :::info -The `defaultBootstrap` option bootstraps your node using [pre-defined Waku nodes](/overview/concepts/static-peers). +When the `defaultBootstrap` flag is set to `true`, your node will be bootstrapped using [pre-defined Waku nodes](/overview/concepts/static-peers). The node does not connect to any remote peer or bootstrap node if omitted. ::: ## Connect to Remote Peers @@ -58,10 +58,17 @@ import { createEncoder } from "@waku/sdk"; // Choose a content topic const contentTopic = "/quick-start/1/message/proto"; -// Create a message encoder -const encoder = createEncoder({ contentTopic }); +// Create a message encoder without encryption +const encoder = createEncoder({ + contentTopic: contentTopic, // message content topic + ephemeral: false, // allows messages to be stored or not +}); ``` +:::info +When the `ephemeral` flag is set to `true`, your messages will not be stored by `Store` nodes. +::: + ## Create a Message Structure Create a message structure for your application using [Protocol Buffers](https://protobuf.dev/) (`proto`) for the following reasons: @@ -125,9 +132,9 @@ To send messages using the `Relay` protocol, create a new message object and use ```js // Create a new message object const protoMessage = ChatMessage.create({ - timestamp: Date.now(), - sender: "Alice", - message: "Hello, World!", + timestamp: Date.now(), + sender: "Alice", + message: "Hello, World!", }); // Serialize the message using Protobuf @@ -135,10 +142,10 @@ const serializedMessage = ChatMessage.encode(protoMessage).finish(); // Send the message using Relay await node.relay.send(encoder, { - payload: serializedMessage, + payload: serializedMessage, }); ``` :::tip Congratulations! -You have successfully added decentralized communication features to your application using `js-waku`. +You have successfully added decentralized communication features to your project using `js-waku`. To run your application smoothly, you can wrap these functions in JavaScript, React, or any other framework. ::: \ No newline at end of file diff --git a/docs/guides/js-waku/relay-send-receive.md b/docs/guides/js-waku/relay-send-receive.md index 13f317d..c05bd8a 100644 --- a/docs/guides/js-waku/relay-send-receive.md +++ b/docs/guides/js-waku/relay-send-receive.md @@ -4,19 +4,19 @@ title: Send and Receive Messages Using Relay This guide provides detailed steps to set up a Waku node for sending and receiving messages using the [Relay protocol](/overview/concepts/protocols#relay). -## Create a Waku Node +## Create a Relay Node -Set up a Waku node by creating a relay node, connecting to network peers, choosing a [content topic](/overview/concepts/content-topics), and creating an `encoder` and `decoder` for [message encryption](https://rfc.vac.dev/spec/26/): +Set up a Waku node by creating a Relay Node, connecting to network peers, choosing a [content topic](/overview/concepts/content-topics), and creating an `encoder` and `decoder` for [message encryption](https://rfc.vac.dev/spec/26/): ```js import { - createRelayNode, - waitForRemotePeer, - createEncoder, - createDecoder + createRelayNode, + waitForRemotePeer, + createEncoder, + createDecoder, } from "@waku/sdk"; -// Create and start a relay node +// Create and start a Relay Node const node = await createRelayNode({ defaultBootstrap: true, // bootstraps using pre-defined nodes emitSelf: true, // emits sent message events to itself @@ -35,7 +35,7 @@ const decoder = createDecoder(contentTopic); ``` :::info -The `emitSelf` option emits sent message events to itself and invokes the node's subscribers. +When the `emitSelf` flag is set to `true`, the node will emit sent message events to itself and invoke its subscribers. ::: ## Create a Message Structure @@ -47,13 +47,13 @@ import protobuf from "protobufjs"; // Create a message structure using Protobuf const ChatMessage = new protobuf.Type("ChatMessage") - .add(new protobuf.Field("timestamp", 1, "uint64")) - .add(new protobuf.Field("sender", 2, "string")) - .add(new protobuf.Field("message", 3, "string")); + .add(new protobuf.Field("timestamp", 1, "uint64")) + .add(new protobuf.Field("sender", 2, "string")) + .add(new protobuf.Field("message", 3, "string")); ``` :::info -Please refer to the [Protobuf installation](/guides/js-waku/quick-start#create-a-message-structure) guide for steps on adding the `protobufjs` package to your project. +Please refer to the [Protobuf installation](/guides/js-waku/quick-start#create-a-message-structure) guide for adding the `protobufjs` package to your project. ::: ## Send Messages Using Relay @@ -79,22 +79,25 @@ await node.relay.send(encoder, { ## Receive Messages Using Relay -Use the `relay.subscribe()` function to listen for incoming messages on a specific content topic: +To receive messages using the `Relay` protocol, create a callback function to process the messages and use the `relay.subscribe()` function: ```js +// Create the callback function +const callback = (wakuMessage) => { + // Check if there is a payload on the message + if (!wakuMessage.payload) return; + // Render the messageObj as desired in your application + const messageObj = ChatMessage.decode(wakuMessage.payload); + console.log(messageObj); +}; + // Subscribe to content topics and display new messages -const unsubscribe = await node.relay.subscribe([decoder], (wakuMessage) => { - // Check if there is a payload on the message - if (!wakuMessage.payload) return; - // Render the messageObj as desired in your application - const messageObj = ChatMessage.decode(wakuMessage.payload); - console.log(messageObj); -}); +const unsubscribe = await node.relay.subscribe([decoder], callback); // Use the unsubscribe() function to stop receiving messages // await unsubscribe(); ``` :::tip Congratulations! -You have successfully sent and received messages over the Waku Network using the `Relay` protocol. +You have successfully sent and received messages over the Waku Network using the `Relay` protocol. Check out the [relay-js](https://github.com/waku-org/js-waku-examples/tree/master/examples/relay-js), [relay-reactjs-chat](https://github.com/waku-org/js-waku-examples/tree/master/examples/relay-reactjs-chat), and [relay-angular-chat](https://github.com/waku-org/js-waku-examples/tree/master/examples/relay-angular-chat) examples for working demos. ::: \ No newline at end of file diff --git a/docs/guides/js-waku/store-retrieve-messages.md b/docs/guides/js-waku/store-retrieve-messages.md index 41c22b1..13777fb 100644 --- a/docs/guides/js-waku/store-retrieve-messages.md +++ b/docs/guides/js-waku/store-retrieve-messages.md @@ -2,23 +2,23 @@ title: Retrieve Messages Using Store --- -This guide provides detailed steps to create a light node for retrieving and filtering historical messages using the [Store protocol](/overview/concepts/protocols#store). +This guide provides detailed steps to create a Light Node for retrieving and filtering historical messages using the [Store protocol](/overview/concepts/protocols#store). ## Create a Light Node -Use the `createLightNode()` function to create a light node and interact with the Waku Network: +Use the `createLightNode()` function to create a Light Node and interact with the Waku Network: ```js import { createLightNode } from "@waku/sdk"; -// Create and start a light node +// Create and start a Light Node const node = await createLightNode({ defaultBootstrap: true }); await node.start(); ``` ## Connect to Store Peers -Use the `waitForRemotePeer()` function to wait for the node to connect with store peers: +Use the `waitForRemotePeer()` function to wait for the node to connect with Store peers: ```js import { waitForRemotePeer, Protocols } from "@waku/sdk"; @@ -57,7 +57,7 @@ The `store.queryOrderedCallback()` function provides a straightforward method fo // Create the callback function const callback = (wakuMessage) => { // Render the message/payload in your application - console.log(wakuMessage); + console.log(wakuMessage); }; // Set the query options @@ -65,7 +65,7 @@ const queryOptions = { pageSize: 5, }; -// Query the Store node +// Query the Store peer await node.store.queryOrderedCallback( [decoder], callback, @@ -95,9 +95,9 @@ const storeQuery = node.store.queryGenerator( // Process the messages for await (const messagesPromises of storeQuery) { // Fulfill all the messages promises - const messages = await Promise.all(messagesPromises); - // Render the message/payload in your application - console.log(messages); + const messages = await Promise.all(messagesPromises); + // Render the message/payload in your application + console.log(messages); } ``` @@ -171,14 +171,14 @@ import { waku } from "@waku/sdk"; // Create the callback function const messages = []; const callback = (wakuMessage) => { - messages.push(wakuMessage); + messages.push(wakuMessage); }; // Retrieve the first 10 messages await node.store.queryOrderedCallback( - [decoder], - callback, - { + [decoder], + callback, + { pageSize: 10, }, ); @@ -190,9 +190,9 @@ const cursor = await waku.createCursor(lastMessage); // Retrieve the next 10 messages // The message at the cursor index is excluded from the result await node.store.queryOrderedCallback( - [decoder], - callback, - { + [decoder], + callback, + { pageSize: 10, cursor: cursor, }, @@ -206,7 +206,7 @@ If you omit the `cursor` option, the query will start from the beginning or end ### `peerId` -The `peerId` option specifies the peer to query. If omitted, a pseudo-random peer is selected from the connected `Store` peers. +The `peerId` option specifies the peer to query. A pseudo-random peer is selected from the connected `Store` peers if omitted. ```js const queryOptions = { @@ -215,5 +215,5 @@ const queryOptions = { ``` :::tip Congratulations! -You have successfully retrieved and filtered historical messages on a light node using the `Store` protocol. +You have successfully retrieved and filtered historical messages on a Light Node using the `Store` protocol. Check out the [store-js](https://github.com/waku-org/js-waku-examples/tree/master/examples/store-js) and [store-reactjs-chat](https://github.com/waku-org/js-waku-examples/tree/master/examples/store-reactjs-chat) examples for working demos. ::: \ No newline at end of file diff --git a/docs/guides/js-waku/waku-create-app.md b/docs/guides/js-waku/use-waku-create-app.md similarity index 90% rename from docs/guides/js-waku/waku-create-app.md rename to docs/guides/js-waku/use-waku-create-app.md index 147644c..cfadbd8 100644 --- a/docs/guides/js-waku/waku-create-app.md +++ b/docs/guides/js-waku/use-waku-create-app.md @@ -14,17 +14,10 @@ import TabItem from '@theme/TabItem'; ``` - - -```shell -npx @waku/create-app [PROJECT DIRECTORY] -``` - - ```shell -npm init @waku/app [PROJECT DIRECTORY] +npx @waku/create-app [PROJECT DIRECTORY] ``` @@ -53,4 +46,4 @@ We welcome and appreciate the contributions of templates for the `@waku/create-a 2. Place the template in the `examples` folder in the [js-waku-examples](https://github.com/waku-org/js-waku-examples) repository's root. 3. Commit your changes with a detailed message and push them to your forked repository. 4. Finally, submit a pull request to the [js-waku-examples](https://github.com/waku-org/js-waku-examples) repository. -5. Our team will carefully review your submission and merge it upon approval. \ No newline at end of file +5. Our team will carefully review and merge your submission upon approval. \ No newline at end of file diff --git a/docs/guides/js-waku/use-waku-react.md b/docs/guides/js-waku/use-waku-react.md new file mode 100644 index 0000000..3514836 --- /dev/null +++ b/docs/guides/js-waku/use-waku-react.md @@ -0,0 +1,356 @@ +--- +title: "Build React DApps Using @waku/react" +--- + +The [@waku/react](https://www.npmjs.com/package/@waku/react) package provides components and UI adapters to integrate `js-waku` into React applications effortlessly. This guide provides detailed steps for using `@waku/react` in your project. + +## Install the Dependencies + +First, set up a project using any [production-grade React framework](https://react.dev/learn/start-a-new-react-project) or use an existing React application. For this guide, we will create a boilerplate using [Create React App (CRA)](https://create-react-app.dev/docs/getting-started): + +```mdx-code-block +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +``` + + + + +```shell +npx create-react-app [PROJECT DIRECTORY] +``` + + + + +```shell +yarn create react-app [PROJECT DIRECTORY] +``` + + + + +Next, install the `@waku/react` package using your preferred package manager: + + + + +```shell +npm install @waku/react @waku/sdk +``` + + + + +```shell +yarn add @waku/react @waku/sdk +``` + + + + +## Create a Relay Node + +Use the `useCreateRelayNode()` hook to create a Relay Node: + +```js title="App.js" +import { useCreateRelayNode } from "@waku/react"; + +function App() { + // Create and start a Relay Node + const { node, error, isLoading } = useCreateRelayNode({ + options: { + defaultBootstrap: true, + emitSelf: true, + } + }); + + // "node" is the created Relay Node + // "error" captures any error that occurs during node creation + // "isLoading" indicates whether the node is still being created + // Use these to handle states and render the UI in your application +} +``` + +## Create a Light Node + +Use the `useCreateLightNode()` hook to create a Light Node and specify the [protocols](/overview/concepts/protocols) for remote peers: + +```js title="App.js" +import { useCreateLightNode } from "@waku/react"; +import { Protocols } from "@waku/interfaces"; + +function App() { + // Create and start a Light Node and wait for remote peers + const { node, error, isLoading } = useCreateLightNode({ + options: { defaultBootstrap: true }, + protocols: [Protocols.LightPush, Protocols.Filter], + }); + + // "node" is the created Light Node + // "error" captures any error that occurs during node creation + // "isLoading" indicates whether the node is still being created + // Use these to handle states and render the UI in your application +} +``` + +## Create an Encoder and Decoder + +Use the `useCreateContentPair()` hook to create a message `encoder` and `decoder` pair: + +```js title="App.js" +import { useCreateContentPair } from "@waku/react"; + +function App() { + // Choose a content topic + const contentTopic = "/waku-react-guide/1/message/utf8"; + const ephemeral = false; + + // Create a message encoder and decoder pair + const { encoder, decoder } = useCreateContentPair(contentTopic, ephemeral); + + // "encoder" is the message encoder + // "decoder" is the message decoder + // Use these to handle the messages in your application +} +``` + +## Send Messages Using Light Push + +Use the `useLightPush()` hook to bind `Light Push` methods to a node and `encoder`: + +```js title="App.js" +import { + useCreateLightNode, + useCreateContentPair, + useLightPush, +} from "@waku/react"; +import { Protocols } from "@waku/interfaces"; +import { utf8ToBytes } from "@waku/sdk"; + +function App() { + // Create and start a Light Node and wait for remote peers + const { node, error, isLoading } = useCreateLightNode({ + options: { defaultBootstrap: true }, + protocols: [Protocols.LightPush, Protocols.Filter], + }); + + // Choose a content topic and create an encoder + const contentTopic = "/waku-react-guide/1/message/utf8"; + const { encoder } = useCreateContentPair(contentTopic); + + // Wait for the node to finish loading before sending messages + // (isLoading === false) + + // Bind push method to a node and encoder + const { push } = useLightPush({ node, encoder }); + + // Send the message using Light Push + const sendMessage = async (text) => { + if (!push || !text) { + return; + } + const payload = utf8ToBytes(text); + await push({ payload }); + }; + sendMessage("Hello, World!"); +} +``` + +:::info +Wait for the node to finish loading before sending messages (`isLoading` === `false`). +::: + +## Receive Messages Using Filter + +Use the `useFilterMessages()` hook to receive messages from a `Filter` subscription: + +```js title="App.js" +import { + useCreateLightNode, + useCreateContentPair, + useFilterMessages, +} from "@waku/react"; +import { Protocols } from "@waku/interfaces"; + +function App() { + // Create and start a Light Node and wait for remote peers + const { node } = useCreateLightNode({ + options: { defaultBootstrap: true }, + protocols: [Protocols.LightPush, Protocols.Filter], + }); + + // Choose a content topic and create a decoder + const contentTopic = "/waku-react-guide/1/message/utf8"; + const { decoder } = useCreateContentPair(contentTopic); + + // Receive messages from Filter subscription + const { error, messages, isLoading } = useFilterMessages({ node, decoder }); + console.log(messages); + + // "error" captures any error that occurs while receiving messages + // "messages" contains a list of messages the subscription received + // "isLoading" indicates whether the node is still subscribing to Filter + // Use these to handle states and render the UI in your application +} +``` + +## Retrieve Messages Using Store + +Use the `useStoreMessages()` hook to retrieve messages from the `Store` protocol: + +```js title="App.js" +import { + useCreateLightNode, + useCreateContentPair, + useStoreMessages, +} from "@waku/react"; +import { Protocols, PageDirection } from "@waku/interfaces"; + +function App() { + // Create and start a Light Node and wait for remote peers + const { node } = useCreateLightNode({ + options: { defaultBootstrap: true }, + protocols: [Protocols.LightPush, Protocols.Filter], + }); + + // Choose a content topic and create a decoder + const contentTopic = "/waku-react-guide/1/message/utf8"; + const { decoder } = useCreateContentPair(contentTopic); + + // Set the query options + const options = { + pageDirection: PageDirection.BACKWARD, + pageSize: 20, + }; + + // Query the Store peer + const { error, messages, isLoading } = useStoreMessages({ node, decoder, options }); + console.log(messages); + + // "error" captures any error that occurs during message retrieval + // "messages" contains a list of messages retrieved from the Store peer + // "isLoading" indicates whether the node is still retrieving messages + // Use these to handle states and render the UI in your application +} +``` + +:::info +To explore the available query options, please refer to the [Store Query Options](/guides/js-waku/store-retrieve-messages#store-query-options) guide. +::: + +## Using @waku/react Providers + +The `@waku/react` package provides a collection of [context providers](https://react.dev/reference/react/createContext#provider) to pass configuration options throughout the component hierarchy: + +### `RelayNodeProvider` + +The `RelayNodeProvider` context provider passes configuration options for creating a Relay Node: + +```js title="index.js" +import { RelayNodeProvider } from "@waku/react"; +import { Protocols } from "@waku/interfaces"; + +// Set the Relay Node options +const NODE_OPTIONS = { + defaultBootstrap: true, + emitSelf: true, +}; + +// Set the remote peer connections to wait for +const PROTOCOLS = [Protocols.Relay]; + +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render( + + // Use the Relay Node context provider + + + + +); +``` + +```js title="App.js" +import { useWaku } from "@waku/react"; + +function App() { + // Create and start a Relay Node + const { node, error, isLoading } = useWaku(); + // Use these to handle states and render the UI in your application +} +``` + +### `LightNodeProvider` + +The `LightNodeProvider` context provider passes configuration options for creating a Light Node: + +```js title="index.js" +import { LightNodeProvider } from "@waku/react"; +import { Protocols } from "@waku/interfaces"; + +// Set the Light Node options +const NODE_OPTIONS = { defaultBootstrap: true }; + +// Set the remote peer connections to wait for +const PROTOCOLS = [ + Protocols.LightPush, + Protocols.Filter, +]; + +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render( + + // Use the Light Node context provider + + + + +); +``` + +```js title="App.js" +import { useWaku } from "@waku/react"; + +function App() { + // Create and start a Light Node + const { node, error, isLoading } = useWaku(); + // Use these to handle states and render the UI in your application +} +``` + +### `ContentPairProvider` + +The `ContentPairProvider` context provider passes configuration options for creating an `encoder` and `decoder` pair: + +```js title="index.js" +import { ContentPairProvider } from "@waku/react"; + +// Choose a content topic +const CONTENT_TOPIC = "/waku-react-guide/1/message/utf8"; +const EPHEMERAL = false; + +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render( + + // Use the content pair context provider + + + + +); +``` + +```js title="App.js" +import { useContentPair } from "@waku/react"; + +function App() { + // Create a message encoder and decoder pair + const { encoder, decoder } = useContentPair(); + // Use these to handle the messages in your application +} +``` + +:::tip +You have successfully integrated `js-waku` into a React application using the `@waku/react` package. Check out the [web-chat](https://github.com/waku-org/js-waku-examples/tree/master/examples/web-chat) example for a working demo. +::: \ No newline at end of file diff --git a/docs/guides/nodes-and-sdks.md b/docs/guides/nodes-and-sdks.md index f5bcf1a..a302572 100644 --- a/docs/guides/nodes-and-sdks.md +++ b/docs/guides/nodes-and-sdks.md @@ -43,6 +43,6 @@ Waku provides integrations tailored for mobile applications, enabling Waku to ru | | Description | Documentation | | - | - | - | | JSON-RPC API | `JSON-RPC` API interface provided by `nwaku` and `go-waku` to interact with the Waku Network | | -| [@waku/react](https://www.npmjs.com/package/@waku/react) | React components and UI adapters designed for seamless integration with `js-waku` | | -| [@waku/create-app](https://www.npmjs.com/package/@waku/create-app) | Starter kit to bootstrap your next `js-waku` project from various example templates | [Bootstrap DApps Using @waku/create-app](/guides/js-waku/waku-create-app) | +| [@waku/react](https://www.npmjs.com/package/@waku/react) | React components and UI adapters designed for seamless integration with `js-waku` | [Build React DApps Using @waku/react](/guides/js-waku/use-waku-react) | +| [@waku/create-app](https://www.npmjs.com/package/@waku/create-app) | Starter kit to bootstrap your next `js-waku` project from various example templates | [Bootstrap DApps Using @waku/create-app](/guides/js-waku/use-waku-create-app) | | [nwaku-compose](https://github.com/alrevuelta/nwaku-compose) | Pre-configured Docker Compose setup for running and monitoring a `nwaku` node using Prometheus and Grafana | [Run Nwaku with Docker Compose](/guides/nwaku/run-docker-compose) | \ No newline at end of file diff --git a/sidebars.js b/sidebars.js index c686725..60bc7ba 100644 --- a/sidebars.js +++ b/sidebars.js @@ -75,7 +75,8 @@ const sidebars = { "guides/js-waku/relay-send-receive", "guides/js-waku/light-send-receive", "guides/js-waku/store-retrieve-messages", - "guides/js-waku/waku-create-app", + "guides/js-waku/use-waku-react", + "guides/js-waku/use-waku-create-app", { type: 'html', value: 'Examples', @@ -97,9 +98,9 @@ const sidebars = { }, ], community: [ - "powered-by-waku", "community", "contribute", + "powered-by-waku", "presentations", { type: 'html',