Merge pull request #251 from status-im/rename-min-web-chat

.github/workflows/examples-ci.yml

@@ -12,7 +12,7 @@ jobs:
   examples_build_and_test:
     strategy:
       matrix:
-        example: [ cli-chat, web-chat, eth-dm, min-js-web-chat ]
+        example: [ cli-chat, web-chat, eth-dm, min-react-js-chat ]
     runs-on: ubuntu-latest
     steps:
 

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+- Relay and ReactJS guides and examples
+  ([#56](https://github.com/status-im/js-waku/issues/56)).
+
 ### Changed
 - **Breaking**: The `WakuMessage` APIs have been changed to move `contentTopic` out of the optional parameters.
 

README.md

@@ -2,6 +2,23 @@
 
 A JavaScript implementation of the [Waku v2 protocol](https://rfc.vac.dev/spec/10/).
 
+## Documentation
+
+In the [section below](#usage) you can find explanations for the main API.
+
+We also have [guides](https://github.com/status-im/js-waku/blob/main/guides/menu.md) available
+and [code examples](https://github.com/status-im/js-waku/blob/main/examples/examples.md).
+
+You can read the latest `main` branch documentation at [https://status-im.github.io/js-waku/docs/](https://status-im.github.io/js-waku/docs/).
+
+Docs can also be generated locally using:
+
+```shell
+npm install
+npm run doc
+```
+
+
 ## Usage
 
 Install `js-waku` package:
@@ -249,18 +266,6 @@ const sigPubKey = wakuMessage.signaturePublicKey;
 const isSignedByAlice = sigPubKey && equalByteArrays(sigPubKey, alicePublicKey);
 ```
 
-## More documentation
-
-Find more [examples](#examples) below
-or checkout the latest `main` branch documentation at [https://status-im.github.io/js-waku/docs/](https://status-im.github.io/js-waku/docs/).
-
-Docs can also be generated locally using:
-
-```shell
-npm install
-npm run doc
-```
-
 ## Changelog
 
 Release changelog can be found [here](https://github.com/status-im/js-waku/blob/main/CHANGELOG.md).
@@ -273,11 +278,6 @@ To get help, join #dappconnect-support on [Vac Discord](https://discord.gg/j5pGb
 
 For more general discussion and latest news, join #dappconnect on [Vac Discord](https://discord.gg/9DgykdmpZ6) or [Telegram](https://t.me/dappconnect).
 
-## Examples
-
-We have a number of code examples available,
-you can find them in the [examples](https://github.com/status-im/js-waku/blob/main/examples/examples.md) directory.
-
 ## Waku Protocol Support
 
 You can track progress on the [project board](https://github.com/status-im/js-waku/projects/1).

examples/examples.md

@@ -5,4 +5,4 @@ Here is the list of the code examples and the features they demonstrate:
 - [Web Chat App](web-chat): Group chat, React/TypeScript, Relay, Store.
 - [CLI Chat App](cli-chat): Group chat, Node JS/TypeScript, Relay, Light Push, Store.
 - [Ethereum Direct Message Web App](eth-dm): Private Messaging, React/TypeScript, Light Push, Signature with Web3, Asymmetric Encryption.
-- [Minimal JS Web Chat App](min-js-web-chat): Group chat, React/JavaScript, Relay, Protobuf using `protons`.
+- [Minimal ReactJS Chat App](min-react-js-chat): Group chat, React/JavaScript, Relay, Protobuf using `protons`.

examples/min-react-js-chat/README.md

@@ -15,7 +15,7 @@ To run a development version locally, do:
 git clone https://github.com/status-im/js-waku/ ; cd js-waku
 npm install   # Install dependencies for js-waku
 npm run build # Build js-waku
-cd examples/min-js-web-chat
+cd examples/min-react-js-chat
 npm install   # Install dependencies for the web app
 npm run start # Start development server to serve the web app on http://localhost:3000/
 ```

examples/min-react-js-chat/src/App.js

@@ -3,7 +3,7 @@ import { getStatusFleetNodes, Waku, WakuMessage } from 'js-waku';
 import * as React from 'react';
 import protons from 'protons';
 
-const ContentTopic = `/min-js-web-chat/1/chat/proto`;
+const ContentTopic = `/min-react-js-chat/1/chat/proto`;
 
 const proto = protons(`
 message SimpleChatMessage {

guides/reactjs-relay.md

@@ -5,15 +5,15 @@ In this guide, we will demonstrate how your ReactJS dApp can use Waku Relay to s
 
 Before starting, you need to choose a _Content Topic_ for your dApp.
 Check out the [how to choose a content topic guide](choose-content-topic.md) to learn more about content topics.
-For this guide, we are using a single content topic: `/min-js-web-chat/1/chat/proto`.
+For this guide, we are using a single content topic: `/min-react-js-chat/1/chat/proto`.
 
 # Setup
 
 Create a new react app:
 
 ```shell
-npx create-react-app min-js-web-chat
+npx create-react-app min-react-js-chat
-cd min-js-web-chat
+cd min-react-js-chat
 ```
 
 Then, install [js-waku](https://npmjs.com/package/js-waku):
@@ -145,7 +145,7 @@ Create a function that takes the Waku instance and a message to send:
 ```js
 import { WakuMessage } from 'js-waku';
 
-const ContentTopic = `/min-js-web-chat/1/chat/proto`;
+const ContentTopic = `/min-react-js-chat/1/chat/proto`;
 
 async function sendMessage(message, timestamp, waku) {
   const time = timestamp.getTime();
@@ -311,4 +311,4 @@ function App() {
 And Voilà! You should now be able to send and receive messages.
 Try out by opening the app from different browsers.
 
-You can see the complete code in the [Minimal JS Web Chat App](/examples/min-js-web-chat).
+You can see the complete code in the [Minimal ReactJS Chat App](/examples/min-react-js-chat).