diff --git a/.github/workflows/examples-ci.yml b/.github/workflows/examples-ci.yml index e2ca8abd27..674b39a9ce 100644 --- a/.github/workflows/examples-ci.yml +++ b/.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: diff --git a/CHANGELOG.md b/CHANGELOG.md index 312af25841..e8d2854d86 100644 --- a/CHANGELOG.md +++ b/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. diff --git a/README.md b/README.md index f00b0cd30d..e4b2676b09 100644 --- a/README.md +++ b/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). diff --git a/examples/examples.md b/examples/examples.md index 92031248ee..1fe653306d 100644 --- a/examples/examples.md +++ b/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`. diff --git a/examples/min-js-web-chat/.gitignore b/examples/min-react-js-chat/.gitignore similarity index 100% rename from examples/min-js-web-chat/.gitignore rename to examples/min-react-js-chat/.gitignore diff --git a/examples/min-js-web-chat/README.md b/examples/min-react-js-chat/README.md similarity index 94% rename from examples/min-js-web-chat/README.md rename to examples/min-react-js-chat/README.md index 05fec0419d..15ae038373 100644 --- a/examples/min-js-web-chat/README.md +++ b/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/ ``` diff --git a/examples/min-js-web-chat/package-lock.json b/examples/min-react-js-chat/package-lock.json similarity index 100% rename from examples/min-js-web-chat/package-lock.json rename to examples/min-react-js-chat/package-lock.json diff --git a/examples/min-js-web-chat/package.json b/examples/min-react-js-chat/package.json similarity index 100% rename from examples/min-js-web-chat/package.json rename to examples/min-react-js-chat/package.json diff --git a/examples/min-js-web-chat/public/favicon.ico b/examples/min-react-js-chat/public/favicon.ico similarity index 100% rename from examples/min-js-web-chat/public/favicon.ico rename to examples/min-react-js-chat/public/favicon.ico diff --git a/examples/min-js-web-chat/public/index.html b/examples/min-react-js-chat/public/index.html similarity index 100% rename from examples/min-js-web-chat/public/index.html rename to examples/min-react-js-chat/public/index.html diff --git a/examples/min-js-web-chat/public/logo192.png b/examples/min-react-js-chat/public/logo192.png similarity index 100% rename from examples/min-js-web-chat/public/logo192.png rename to examples/min-react-js-chat/public/logo192.png diff --git a/examples/min-js-web-chat/public/logo512.png b/examples/min-react-js-chat/public/logo512.png similarity index 100% rename from examples/min-js-web-chat/public/logo512.png rename to examples/min-react-js-chat/public/logo512.png diff --git a/examples/min-js-web-chat/public/manifest.json b/examples/min-react-js-chat/public/manifest.json similarity index 100% rename from examples/min-js-web-chat/public/manifest.json rename to examples/min-react-js-chat/public/manifest.json diff --git a/examples/min-js-web-chat/public/robots.txt b/examples/min-react-js-chat/public/robots.txt similarity index 100% rename from examples/min-js-web-chat/public/robots.txt rename to examples/min-react-js-chat/public/robots.txt diff --git a/examples/min-js-web-chat/src/App.css b/examples/min-react-js-chat/src/App.css similarity index 100% rename from examples/min-js-web-chat/src/App.css rename to examples/min-react-js-chat/src/App.css diff --git a/examples/min-js-web-chat/src/App.js b/examples/min-react-js-chat/src/App.js similarity index 98% rename from examples/min-js-web-chat/src/App.js rename to examples/min-react-js-chat/src/App.js index 2f34ad362b..ce6e902af1 100644 --- a/examples/min-js-web-chat/src/App.js +++ b/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 { diff --git a/examples/min-js-web-chat/src/App.test.js b/examples/min-react-js-chat/src/App.test.js similarity index 100% rename from examples/min-js-web-chat/src/App.test.js rename to examples/min-react-js-chat/src/App.test.js diff --git a/examples/min-js-web-chat/src/index.css b/examples/min-react-js-chat/src/index.css similarity index 100% rename from examples/min-js-web-chat/src/index.css rename to examples/min-react-js-chat/src/index.css diff --git a/examples/min-js-web-chat/src/index.js b/examples/min-react-js-chat/src/index.js similarity index 100% rename from examples/min-js-web-chat/src/index.js rename to examples/min-react-js-chat/src/index.js diff --git a/examples/min-js-web-chat/src/logo.svg b/examples/min-react-js-chat/src/logo.svg similarity index 100% rename from examples/min-js-web-chat/src/logo.svg rename to examples/min-react-js-chat/src/logo.svg diff --git a/examples/min-js-web-chat/src/reportWebVitals.js b/examples/min-react-js-chat/src/reportWebVitals.js similarity index 100% rename from examples/min-js-web-chat/src/reportWebVitals.js rename to examples/min-react-js-chat/src/reportWebVitals.js diff --git a/examples/min-js-web-chat/src/setupTests.js b/examples/min-react-js-chat/src/setupTests.js similarity index 100% rename from examples/min-js-web-chat/src/setupTests.js rename to examples/min-react-js-chat/src/setupTests.js diff --git a/examples/min-js-web-chat/test/custom-test-env.js b/examples/min-react-js-chat/test/custom-test-env.js similarity index 100% rename from examples/min-js-web-chat/test/custom-test-env.js rename to examples/min-react-js-chat/test/custom-test-env.js diff --git a/guides/reactjs-relay.md b/guides/reactjs-relay.md index 4c0c6cdfbd..52e6a5310e 100644 --- a/guides/reactjs-relay.md +++ b/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 -cd min-js-web-chat +npx create-react-app min-react-js-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).