chore: update waku deps, add notes example, move other examples to experimental (#58)

.github/workflows/ci.yml

@@ -13,14 +13,13 @@ jobs:
       matrix:
         example:
           [
-            relay-angular-chat,
-            relay-reactjs-chat,
-            web-chat,
-            noise-js,
-            noise-rtc,
-            relay-direct-rtc,
-            rln-js,
-            rln-identity
+            experimental/web-chat,
+            experimental/noise-js,
+            experimental/noise-rtc,
+            experimental/relay-direct-rtc,
+            experimental/rln-js,
+            experimental/rln-identity,
+            flush-notes
           ]
     runs-on: ubuntu-latest
     steps:

README.md

@@ -7,60 +7,54 @@ This repository is dedicated to experimental proof of concepts and research rela
 Webapps in this repo are hosted at https://lab.waku.org/
 For ready-to-use examples to build with js-waku. Go to https://examples.waku.org/
 
+### Notes App
+
+- [code](examples/flush-notes)
+- [website](https://lab.waku.org/flush-notes)
+- Demonstrates: Light Push, Filter, Store, Message encryption/decryption
+
+## Experimental Examples
+
+The following examples are not as actively maintained as the above and may not work with latest js-waku packages.
+
 ### Web Chat App
 
-- [code](examples/web-chat)
-- [website](https://lab.waku.org/web-chat)
+- [code](examples/experimental/web-chat)
+- [website](https://lab.waku.org/experimental/web-chat)
 - Demonstrates: Group chat, React/TypeScript, Relay, Store.
 
 ### Waku Light Client in JavaScript
 
 Send messages between several users (or just one) using light client targetted protocols.
 
-- [code](examples/light-js)
-- [website](https://lab.waku.org/light-js)
+- [code](examples/experimental/light-js)
+- [website](https://lab.waku.org/experimental/light-js)
 - Demonstrates: Waku Light node: Filter + Light Push, Pure Javascript/HTML using ESM/unpkg bundle.
 
-### Minimal Angular (v13) Waku Relay
-
-A barebone messaging app to illustrate the seamless integration of `js-waku` into AngularJS.
-
-- [code](examples/relay-angular-chat)
-- [website](https://lab.waku.org/relay-angular-chat)
-- Demonstrates: Group messaging, Angular, Waku Relay, Protobuf using `protobufjs`, No async/await syntax.
-
 ### Waku Relay in JavaScript
 
 This example uses Waku Relay to send and receive simple text messages.
 
-- [code](examples/relay-js)
-- [website](https://lab.waku.org/relay-js)
+- [code](examples/experimental/relay-js)
+- [website](https://lab.waku.org/experimental/relay-js)
 - Demonstrates: Waku Relay, Pure Javascript/HTML using ESM/unpkg bundle.
 
-### Waku Relay in ReactJS
-
-A barebone chat app to illustrate the seamless integration of `js-waku` into ReactJS.
-
-- [code](examples/relay-reactjs-chat)
-- [website](https://lab.waku.org/relay-reactjs-chat)
-- Demonstrates: Group chat, React/JavaScript, Waku Relay, Protobuf using `protobufjs`.
-
 ### Noise JS
 
-- [code](examples/noise-js)
-- [website](https://lab.waku.org/noise-js)
+- [code](examples/experimental/noise-js)
+- [website](https://lab.waku.org/experimental/noise-js)
 - Demonstrates: LightPush, Filter, [Noise encryption](https://rfc.vac.dev/spec/35/).
 
 ### Noise RTC
 
-- [code](examples/noise-rtc)
-- [website](https://lab.waku.org/noise-rtc)
+- [code](examples/experimental/noise-rtc)
+- [website](https://lab.waku.org/experimental/noise-rtc)
 - Demonstrates: LightPush, Filter, [Noise encryption](https://rfc.vac.dev/spec/35/), WebRTC.
 
 ### Relay Direct RTC
 
-- [code](examples/relay-direct-rtc)
-- [website](https://lab.waku.org/relay-direct-rtc)
+- [code](examples/experimental/relay-direct-rtc)
+- [website](https://lab.waku.org/experimental/relay-direct-rtc)
 - Demonstrates: Relay over WebRTC.
 
 

ci/Jenkinsfile

@@ -35,21 +35,20 @@ pipeline {
 
     stage('Examples') {
       parallel {
-        stage('relay-angular-chat') { steps { script { buildExample() } } }
-        stage('relay-reactjs-chat') { steps { script { buildExample() } } }
-        stage('web-chat') { steps { script { buildExample() } } }
-        stage('noise-js') { steps { script { buildExample() } } }
-        stage('noise-rtc') { steps { script { buildExample() } } }
-        stage('relay-direct-rtc') { steps { script { buildExample() } } }
-        stage('rln-js') { steps { script { buildExample() } } }
-        stage('rln-identity') { steps { script { buildExample() } } }
+        stage('experimental/web-chat') { steps { script { buildExample() } } }
+        stage('experimental/noise-js') { steps { script { buildExample() } } }
+        stage('experimental/noise-rtc') { steps { script { buildExample() } } }
+        stage('experimental/relay-direct-rtc') { steps { script { buildExample() } } }
+        stage('experimental/rln-js') { steps { script { buildExample() } } }
+        stage('experimental/rln-identity') { steps { script { buildExample() } } }
+        stage('flush-notes') { steps { script { buildExample() } } }
       }
     }
 
     stage('HTML Examples') {
       parallel {
-        stage('relay-js') { steps { script { copyExample() } } }
-        stage('light-js') { steps { script { copyExample() } } }
+        stage('experimental/relay-js') { steps { script { copyExample() } } }
+        stage('experimental/light-js') { steps { script { copyExample() } } }
       }
     }
 

examples/experimental/noise-js/package-lock.json

@@ -11691,4 +11691,4 @@
       }
     }
   }
-}
+}

examples/experimental/noise-rtc/package.json

@@ -9,9 +9,9 @@
     "start": "webpack-dev-server"
   },
   "dependencies": {
-    "@waku/sdk": "0.0.18",
-    "@waku/noise": "0.0.3-31510da",
-    "@waku/utils": "0.0.10",
+    "@waku/sdk": "0.0.25-fd60cc2.0",
+    "@waku/noise": "0.0.3-056e650",
+    "@waku/utils": "0.0.17-fd60cc2.0",
     "protobufjs": "^7.1.2",
     "qrcode": "^1.5.1"
   },

examples/experimental/relay-direct-rtc/package.json

@@ -13,8 +13,8 @@
   "dependencies": {
     "@libp2p/webrtc": "^2.0.11",
     "@libp2p/websockets": "^6.0.3",
-    "@waku/dns-discovery": "^0.0.15",
-    "@waku/sdk": "^0.0.17",
+    "@waku/dns-discovery": "0.0.21",
+    "@waku/sdk": "0.0.24",
     "libp2p": "^0.45.9"
   },
   "devDependencies": {

examples/experimental/rln-identity/package.json

@@ -8,15 +8,15 @@
   },
   "dependencies": {
     "@waku/rln": "0.1.3",
-    "@waku/sdk": "^0.0.22",
-    "@waku/utils": "^0.0.14",
+    "@waku/sdk": "0.0.24",
+    "@waku/utils": "0.0.16",
     "ethers": "^5.7.2",
     "multiaddr": "^10.0.1"
   },
   "devDependencies": {
+    "copy-webpack-plugin": "^11.0.0",
     "eslint": "^8",
     "eslint-config-next": "13.5.6",
-    "copy-webpack-plugin": "^11.0.0",
     "webpack": "^5.74.0",
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.11.1"

examples/experimental/rln-js/package.json

@@ -7,16 +7,16 @@
     "start": "webpack-dev-server"
   },
   "dependencies": {
-    "@waku/rln": "0.1.2-126bce3",
-    "@waku/sdk": "^0.0.21",
-    "@waku/utils": "^0.0.14",
+    "@waku/rln": "0.1.3",
+    "@waku/sdk": "0.0.24",
+    "@waku/utils": "0.0.16",
     "multiaddr": "^10.0.1",
     "protobufjs": "^7.2.5"
   },
   "devDependencies": {
+    "copy-webpack-plugin": "^11.0.0",
     "eslint": "^8",
     "eslint-config-next": "13.5.6",
-    "copy-webpack-plugin": "^11.0.0",
     "webpack": "^5.74.0",
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.11.1"

examples/experimental/web-chat/package.json

@@ -5,11 +5,11 @@
   "homepage": "/web-chat",
   "dependencies": {
     "@libp2p/bootstrap": "^8.0.0",
-    "@waku/react": "^0.0.5-effaf55",
-    "@waku/interfaces": "^0.0.18",
     "@livechat/ui-kit": "^0.5.0-24",
     "@multiformats/multiaddr": "12.1.5",
-    "@waku/sdk": "^0.0.19",
+    "@waku/interfaces": "^0.0.23",
+    "@waku/react": "0.0.5-8c435e4",
+    "@waku/sdk": "0.0.24",
     "process": "^0.11.10",
     "protons-runtime": "^4.0.1",
     "react": "^17.0.2",

examples/experimental/web-chat/src/hooks.ts

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { generate } from "server-name-generator";
 import { Message } from "./Message";
 import { EPeersByDiscoveryEvents, LightNode, Tags } from "@waku/interfaces";
-import type { PeerId } from "@libp2p/interface-peer-id";
+import type { PeerId } from "@libp2p/interface";
 
 import { useFilterMessages, useStoreMessages } from "@waku/react";
 import type {

examples/experimental/web-chat/src/types.ts

@@ -1,4 +1,4 @@
-import type { PeerId } from "@libp2p/interface-peer-id";
+import type { PeerId } from "@libp2p/interface";
 import type { LightNode, StoreQueryOptions, Waku } from "@waku/interfaces";
 import type { Decoder } from "@waku/sdk";
 import type { Message } from "./Message";

examples/experimental/web-chat/src/utils.ts

@@ -0,0 +1,30 @@
+import type { Peer } from "@libp2p/interface";
+import type { IFilter, ILightPushSDK, IStoreSDK } from "@waku/interfaces";
+
+export async function handleCatch(
+  promise?: Promise<Peer[]>
+): Promise<Peer[] | undefined> {
+  if (!promise) {
+    return Promise.resolve(undefined);
+  }
+
+  try {
+    return await promise;
+  } catch (_) {
+    return undefined;
+  }
+}
+
+export function getPeerIdsForProtocol(
+  protocol: IStoreSDK | ILightPushSDK | IFilter | undefined,
+  peers: Peer[]
+) {
+  if (!protocol) {
+    return [];
+  }
+  const multicodec =
+    "multicodec" in protocol
+      ? protocol.multicodec
+      : protocol.protocol.multicodec;
+  return peers.filter((p) => p.protocols.includes(multicodec)).map((p) => p.id);
+}

examples/flush-notes/.gitignore

@@ -8,16 +8,28 @@
 # testing
 /coverage
 
+# next.js
+/.next/
+/out/
+
 # production
 /build
 
 # misc
 .DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+*.pem
 
+# debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts