Merge pull request #50 from waku-org/upgrade-js-waku

2025-02-23 13:18:07 +00:00 · 2022-08-20 00:34:23 +10:00 · 2022-08-20 00:34:23 +10:00 · b1ec46d8b4
commit b1ec46d8b4
parent 06f6c6f250 2aec5c71a2
10 changed files with 1805 additions and 2443 deletions
--- a/eth-pm/.npmrc
+++ b/eth-pm/.npmrc
@ -0,0 +1 @@
+auto-install-peers=true
--- a/eth-pm/pnpm-lock.yaml
+++ b/eth-pm/pnpm-lock.yaml
@ -36,7 +36,7 @@ dependencies:
  eth-sig-util: 3.0.1
  ethers: 5.6.9
  fontsource-roboto: 4.0.0
-  js-waku: 0.24.0
+  js-waku: 0.24.0_node-fetch@2.6.7
  protobufjs: 6.11.3
  react: 17.0.2
  react-dom: 17.0.2_react@17.0.2
@ -56,7 +56,7 @@ devDependencies:
  npm-run-all: 4.1.5
  prettier: 2.7.1
  process: 0.11.10
-  react-scripts: 5.0.0_s7dhm7uhgnhsqh75wuilf3r4wi
+  react-scripts: 5.0.0_gvvjj6sbvhexabfkitslmiwvqa
  stream-browserify: 3.0.0
  typescript: 4.7.4

@ -3711,8 +3711,10 @@ packages:
      indent-string: 4.0.0
    dev: false

-  /ajv-formats/2.1.1:
+  /ajv-formats/2.1.1_ajv@8.11.0:
    resolution: {integrity: sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==}
+    peerDependencies:
+      ajv: ^8.0.0
    peerDependenciesMeta:
      ajv:
        optional: true
@ -5327,11 +5329,11 @@ packages:
    resolution: {integrity: sha512-z+paD6YUQsk+AbGCEM4PrOXSss5gd66QfcVBFTKR/HpFL9jCqikS94HYwKww6fQyO7IxrIIyUu+g0Ka9tUS2Cg==}
    dev: true

-  /dns-over-http-resolver/1.2.3:
+  /dns-over-http-resolver/1.2.3_node-fetch@2.6.7:
    resolution: {integrity: sha512-miDiVSI6KSNbi4SVifzO/reD8rMnxgrlnkrlkugOLQpWQTe2qMdHsZp5DmfKjxNE+/T3VAAYLQUZMv9SMr6+AA==}
    dependencies:
      debug: 4.3.4
-      native-fetch: 3.0.0
+      native-fetch: 3.0.0_node-fetch@2.6.7
      receptacle: 1.3.2
    transitivePeerDependencies:
      - node-fetch
@ -5673,7 +5675,7 @@ packages:
      source-map: 0.6.1
    dev: true

-  /eslint-config-react-app/7.0.1_gxsh7ni3jr2i4mnimuxscncbum:
+  /eslint-config-react-app/7.0.1_x3alemznk2vpfvvnowlkwitfze:
    resolution: {integrity: sha512-K6rNzvkIeHaTd8m/QEh1Zko0KI7BACWkkneSs6s9cKZC/J27X3eZR6Upt1jkmZ/4FK+XUOPPxMEN7+lbUXfSlA==}
    engines: {node: '>=14.0.0'}
    peerDependencies:
@ -5691,7 +5693,7 @@ packages:
      babel-preset-react-app: 10.0.1
      confusing-browser-globals: 1.0.11
      eslint: 8.21.0
-      eslint-plugin-flowtype: 8.0.3_eslint@8.21.0
+      eslint-plugin-flowtype: 8.0.3_bfhyaeqlroxospgntnspvajiaq
      eslint-plugin-import: 2.26.0_wuikv5nqgdfyng42xxm7lklfmi
      eslint-plugin-jest: 25.7.0_rgnm43ao3zb6h53qs7rzyfjfmm
      eslint-plugin-jsx-a11y: 6.6.1_eslint@8.21.0
@ -5743,7 +5745,7 @@ packages:
      - supports-color
    dev: true

-  /eslint-plugin-flowtype/8.0.3_eslint@8.21.0:
+  /eslint-plugin-flowtype/8.0.3_bfhyaeqlroxospgntnspvajiaq:
    resolution: {integrity: sha512-dX8l6qUL6O+fYPtpNRideCFSpmWOUVx5QcaGLVqe/vlDiBSe4vYljDWDETwnyFzpl7By/WVIu6rcrniCgH9BqQ==}
    engines: {node: '>=12.0.0'}
    peerDependencies:
@ -5751,6 +5753,8 @@ packages:
      '@babel/plugin-transform-react-jsx': ^7.14.9
      eslint: ^8.1.0
    dependencies:
+      '@babel/plugin-syntax-flow': 7.18.6_@babel+core@7.18.10
+      '@babel/plugin-transform-react-jsx': 7.18.10_@babel+core@7.18.10
      eslint: 8.21.0
      lodash: 4.17.21
      string-natural-compare: 3.0.1
@ -8249,7 +8253,7 @@ packages:
  /js-tokens/4.0.0:
    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}

-  /js-waku/0.24.0:
+  /js-waku/0.24.0_node-fetch@2.6.7:
    resolution: {integrity: sha512-8l7/WuadaaGy6XmVKutZpJ61JohbBe8WamJUtNiTd8WdxhBuz/rXh5RUiD8mjiiG8kEzQ+3+E68rvIpb/+BbXw==}
    engines: {node: '>=16'}
    dependencies:
@ -8263,15 +8267,15 @@ packages:
      it-length-prefixed: 5.0.3
      it-pipe: 1.1.0
      js-sha3: 0.8.0
-      libp2p: 0.36.2
-      libp2p-bootstrap: 0.14.0
+      libp2p: 0.36.2_node-fetch@2.6.7
+      libp2p-bootstrap: 0.14.0_node-fetch@2.6.7
      libp2p-crypto: 0.21.2
-      libp2p-gossipsub: 0.13.0
-      libp2p-interfaces: 4.0.6
+      libp2p-gossipsub: 0.13.0_node-fetch@2.6.7
+      libp2p-interfaces: 4.0.6_node-fetch@2.6.7
      libp2p-mplex: 0.10.7
-      libp2p-websockets: 0.16.2
+      libp2p-websockets: 0.16.2_node-fetch@2.6.7
      long: 4.0.0
-      multiaddr: 10.0.1
+      multiaddr: 10.0.1_node-fetch@2.6.7
      multiformats: 9.7.1
      peer-id: 0.16.0
      protobufjs: 6.11.3
@ -8549,13 +8553,13 @@ packages:
      type-check: 0.4.0
    dev: true

-  /libp2p-bootstrap/0.14.0:
+  /libp2p-bootstrap/0.14.0_node-fetch@2.6.7:
    resolution: {integrity: sha512-j3slZo5nOdA8wVlav8dRZeAXutZ7psz/f10DLoIEX/EFif7uU5oZfIYvjbVGo3ZDl+VQLo2tR0m1lV0westQ3g==}
    engines: {node: '>=15.0.0'}
    dependencies:
      debug: 4.3.4
-      mafmt: 10.0.0
-      multiaddr: 10.0.1
+      mafmt: 10.0.0_node-fetch@2.6.7
+      multiaddr: 10.0.1_node-fetch@2.6.7
      peer-id: 0.16.0
    transitivePeerDependencies:
      - node-fetch
@ -8576,7 +8580,7 @@ packages:
      uint8arrays: 3.1.0
    dev: false

-  /libp2p-gossipsub/0.13.0:
+  /libp2p-gossipsub/0.13.0_node-fetch@2.6.7:
    resolution: {integrity: sha512-xy2jRZGmJpjy++Di6f1admtjve8Fx0z5l8NISTQS282egwbRMmTPE6/UeYktb6hNGAgtSTIwXdHjXmMOiTarFA==}
    dependencies:
      '@types/debug': 4.1.7
@ -8584,7 +8588,7 @@ packages:
      denque: 1.5.1
      err-code: 3.0.1
      it-pipe: 1.1.0
-      libp2p-interfaces: 4.0.6
+      libp2p-interfaces: 4.0.6_node-fetch@2.6.7
      peer-id: 0.16.0
      protobufjs: 6.11.3
      uint8arrays: 3.1.0
@ -8593,7 +8597,7 @@ packages:
      - supports-color
    dev: false

-  /libp2p-interfaces/4.0.6:
+  /libp2p-interfaces/4.0.6_node-fetch@2.6.7:
    resolution: {integrity: sha512-3KjzNEIWhi+VoOamLvgKKUE/xqwxSw/JYqsBnfMhAWVRvRtosROtVT03wci2XbuuowCYw+/hEX1xKJIR1w5n0A==}
    dependencies:
      abortable-iterator: 3.0.2
@ -8603,7 +8607,7 @@ packages:
      it-pipe: 1.1.0
      it-pushable: 1.4.2
      libp2p-crypto: 0.21.2
-      multiaddr: 10.0.1
+      multiaddr: 10.0.1_node-fetch@2.6.7
      multiformats: 9.7.1
      p-queue: 6.6.2
      peer-id: 0.16.0
@ -8628,7 +8632,7 @@ packages:
      - supports-color
    dev: false

-  /libp2p-utils/0.4.1:
+  /libp2p-utils/0.4.1_node-fetch@2.6.7:
    resolution: {integrity: sha512-kq/US2unamiyY+YwP47dO1uqpAdcbdYI2Fzi9JIEhjfPBaD1MR/uyQ/YP7ABthl3EaxAjIQYd1TVp85d6QKAtQ==}
    dependencies:
      abortable-iterator: 3.0.2
@ -8636,14 +8640,14 @@ packages:
      err-code: 3.0.1
      ip-address: 8.1.0
      is-loopback-addr: 1.0.1
-      multiaddr: 10.0.1
+      multiaddr: 10.0.1_node-fetch@2.6.7
      private-ip: 2.3.3
    transitivePeerDependencies:
      - node-fetch
      - supports-color
    dev: false

-  /libp2p-websockets/0.16.2:
+  /libp2p-websockets/0.16.2_node-fetch@2.6.7:
    resolution: {integrity: sha512-QGfo8jX1Ks16yi8C67CCyMW7k9cfCYiQ0lzKVJBud0fV3ymbMO2L8gzU6iXUUZTHILo8ka26zKhwQ4lmUMI+nA==}
    dependencies:
      abortable-iterator: 3.0.2
@ -8652,10 +8656,10 @@ packages:
      err-code: 3.0.1
      ipfs-utils: 9.0.7
      it-ws: 4.0.0
-      libp2p-utils: 0.4.1
-      mafmt: 10.0.0
-      multiaddr: 10.0.1
-      multiaddr-to-uri: 8.0.0
+      libp2p-utils: 0.4.1_node-fetch@2.6.7
+      mafmt: 10.0.0_node-fetch@2.6.7
+      multiaddr: 10.0.1_node-fetch@2.6.7
+      multiaddr-to-uri: 8.0.0_node-fetch@2.6.7
      p-defer: 3.0.0
      p-timeout: 4.1.0
    transitivePeerDependencies:
@ -8665,7 +8669,7 @@ packages:
      - utf-8-validate
    dev: false

-  /libp2p/0.36.2:
+  /libp2p/0.36.2_node-fetch@2.6.7:
    resolution: {integrity: sha512-UpNYBMQVivMu56zoibdGitopv39uBBAybIBOEGWmFy/I2NnTVGUutLPrxo47AuN2kntYgo/TNJfW+PpswUgSaw==}
    engines: {node: '>=15.0.0'}
    dependencies:
@ -8696,12 +8700,12 @@ packages:
      it-sort: 1.0.1
      it-take: 1.0.2
      libp2p-crypto: 0.21.2
-      libp2p-interfaces: 4.0.6
-      libp2p-utils: 0.4.1
-      mafmt: 10.0.0
+      libp2p-interfaces: 4.0.6_node-fetch@2.6.7
+      libp2p-utils: 0.4.1_node-fetch@2.6.7
+      mafmt: 10.0.0_node-fetch@2.6.7
      merge-options: 3.0.4
      mortice: 2.0.1
-      multiaddr: 10.0.1
+      multiaddr: 10.0.1_node-fetch@2.6.7
      multiformats: 9.7.1
      multistream-select: 3.0.2
      mutable-proxy: 1.0.0
@ -8843,10 +8847,10 @@ packages:
      yallist: 4.0.0
    dev: true

-  /mafmt/10.0.0:
+  /mafmt/10.0.0_node-fetch@2.6.7:
    resolution: {integrity: sha512-K1bziJOXcnepfztu+2Xy9FLKVLaFMDuspmiyJIYRxnO0WOxFSV7XKSdMxMrVZxcvg1+YjlTIvSGTImUHU2k4Aw==}
    dependencies:
-      multiaddr: 10.0.1
+      multiaddr: 10.0.1_node-fetch@2.6.7
    transitivePeerDependencies:
      - node-fetch
      - supports-color
@ -9021,19 +9025,19 @@ packages:
  /ms/2.1.3:
    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}

-  /multiaddr-to-uri/8.0.0:
+  /multiaddr-to-uri/8.0.0_node-fetch@2.6.7:
    resolution: {integrity: sha512-dq4p/vsOOUdVEd1J1gl+R2GFrXJQH8yjLtz4hodqdVbieg39LvBOdMQRdQnfbg5LSM/q1BYNVf5CBbwZFFqBgA==}
    dependencies:
-      multiaddr: 10.0.1
+      multiaddr: 10.0.1_node-fetch@2.6.7
    transitivePeerDependencies:
      - node-fetch
      - supports-color
    dev: false

-  /multiaddr/10.0.1:
+  /multiaddr/10.0.1_node-fetch@2.6.7:
    resolution: {integrity: sha512-G5upNcGzEGuTHkzxezPrrD6CaIHR9uo+7MwqhNVcXTs33IInon4y7nMiGxl2CY5hG7chvYQUQhz5V52/Qe3cbg==}
    dependencies:
-      dns-over-http-resolver: 1.2.3
+      dns-over-http-resolver: 1.2.3_node-fetch@2.6.7
      err-code: 3.0.1
      is-ip: 3.1.0
      multiformats: 9.7.1
@ -9102,12 +9106,6 @@ packages:
      - supports-color
    dev: false

-  /native-fetch/3.0.0:
-    resolution: {integrity: sha512-G3Z7vx0IFb/FQ4JxvtqGABsOTIqRWvgQz6e+erkB+JJD6LrszQtMozEHI4EkmgZQvnGHrpLVzUWk7t4sJCIkVw==}
-    peerDependencies:
-      node-fetch: '*'
-    dev: false
-
  /native-fetch/3.0.0_hmwa7nplpltavckpkeobtw6pv4:
    resolution: {integrity: sha512-G3Z7vx0IFb/FQ4JxvtqGABsOTIqRWvgQz6e+erkB+JJD6LrszQtMozEHI4EkmgZQvnGHrpLVzUWk7t4sJCIkVw==}
    peerDependencies:
@ -9116,6 +9114,14 @@ packages:
      node-fetch: /@achingbrain/node-fetch/2.6.7
    dev: false

+  /native-fetch/3.0.0_node-fetch@2.6.7:
+    resolution: {integrity: sha512-G3Z7vx0IFb/FQ4JxvtqGABsOTIqRWvgQz6e+erkB+JJD6LrszQtMozEHI4EkmgZQvnGHrpLVzUWk7t4sJCIkVw==}
+    peerDependencies:
+      node-fetch: '*'
+    dependencies:
+      node-fetch: 2.6.7
+    dev: false
+
  /natural-compare/1.4.0:
    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
    dev: true
@ -9159,7 +9165,6 @@ packages:
        optional: true
    dependencies:
      whatwg-url: 5.0.0
-    dev: true

  /node-forge/1.3.1:
    resolution: {integrity: sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==}
@ -10673,6 +10678,12 @@ packages:
  /react-dev-utils/12.0.1_o76vzsp5j2es3tw47tgtdagf3m:
    resolution: {integrity: sha512-84Ivxmr17KjUupyqzFode6xKhjwuEJDROWKJy/BthkL7Wn6NJ8h4WE6k/exAv6ImS+0oZLRRW5j/aINMHyeGeQ==}
    engines: {node: '>=14'}
+    peerDependencies:
+      typescript: '>=2.7'
+      webpack: '>=4'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
    dependencies:
      '@babel/code-frame': 7.18.6
      address: 1.2.0
@ -10698,12 +10709,12 @@ packages:
      shell-quote: 1.7.3
      strip-ansi: 6.0.1
      text-table: 0.2.0
+      typescript: 4.7.4
+      webpack: 5.74.0
    transitivePeerDependencies:
      - eslint
      - supports-color
-      - typescript
      - vue-template-compiler
-      - webpack
    dev: true

  /react-dom/17.0.2_react@17.0.2:
@ -10742,11 +10753,12 @@ packages:
    engines: {node: '>=0.10.0'}
    dev: true

-  /react-scripts/5.0.0_s7dhm7uhgnhsqh75wuilf3r4wi:
+  /react-scripts/5.0.0_gvvjj6sbvhexabfkitslmiwvqa:
    resolution: {integrity: sha512-3i0L2CyIlROz7mxETEdfif6Sfhh9Lfpzi10CtcGs1emDQStmZfWjJbAIMtRD0opVUjQuFWqHZyRZ9PPzKCFxWg==}
    engines: {node: '>=14.0.0'}
    hasBin: true
    peerDependencies:
+      eslint: '*'
      react: '>= 16'
      typescript: ^3.2.1 || ^4
    peerDependenciesMeta:
@ -10769,7 +10781,7 @@ packages:
      dotenv: 10.0.0
      dotenv-expand: 5.1.0
      eslint: 8.21.0
-      eslint-config-react-app: 7.0.1_gxsh7ni3jr2i4mnimuxscncbum
+      eslint-config-react-app: 7.0.1_x3alemznk2vpfvvnowlkwitfze
      eslint-webpack-plugin: 3.2.0_u2suxbtqimpjcabkd5w2ufy4qm
      file-loader: 6.2.0_webpack@5.74.0
      fs-extra: 10.1.0
@ -10795,7 +10807,7 @@ packages:
      semver: 7.3.7
      source-map-loader: 3.0.1_webpack@5.74.0
      style-loader: 3.3.1_webpack@5.74.0
-      tailwindcss: 3.1.8
+      tailwindcss: 3.1.8_postcss@8.4.16
      terser-webpack-plugin: 5.3.3_webpack@5.74.0
      typescript: 4.7.4
      webpack: 5.74.0
@ -11296,7 +11308,7 @@ packages:
    dependencies:
      '@types/json-schema': 7.0.11
      ajv: 8.11.0
-      ajv-formats: 2.1.1
+      ajv-formats: 2.1.1_ajv@8.11.0
      ajv-keywords: 5.1.0_ajv@8.11.0
    dev: true

@ -11920,10 +11932,12 @@ packages:
      string-width: 3.1.0
    dev: true

-  /tailwindcss/3.1.8:
+  /tailwindcss/3.1.8_postcss@8.4.16:
    resolution: {integrity: sha512-YSneUCZSFDYMwk+TGq8qYFdCA3yfBRdBlS7txSq0LUmzyeqRe3a8fBQzbz9M3WS/iFT4BNf/nmw9mEzrnSaC0g==}
    engines: {node: '>=12.13.0'}
    hasBin: true
+    peerDependencies:
+      postcss: ^8.0.9
    dependencies:
      arg: 5.0.2
      chokidar: 3.5.3
@ -12101,7 +12115,6 @@ packages:

  /tr46/0.0.3:
    resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
-    dev: true

  /tr46/1.0.1:
    resolution: {integrity: sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==}
@ -12446,7 +12459,6 @@ packages:

  /webidl-conversions/3.0.1:
    resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
-    dev: true

  /webidl-conversions/4.0.2:
    resolution: {integrity: sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==}
@ -12628,7 +12640,6 @@ packages:
    dependencies:
      tr46: 0.0.3
      webidl-conversions: 3.0.1
-    dev: true

  /whatwg-url/7.1.0:
    resolution: {integrity: sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==}
--- a/relay-reactjs-chat/.npmrc
+++ b/relay-reactjs-chat/.npmrc
@ -0,0 +1 @@
+auto-install-peers=true
--- a/relay-reactjs-chat/README.md
+++ b/relay-reactjs-chat/README.md
@ -6,20 +6,15 @@
 - React/JavaScript
 - `create-react-app`/`react-scripts` 5.0.0
 - Waku Relay
- Protobuf using `protons`.
- No async/await syntax.
+- Protobuf using `protobufjs`.

 A barebone chat app to illustrate the [ReactJS Relay guide](https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/).

-The `master` branch's HEAD is deployed at https://js-waku.wakuconnect.dev/examples/relay-reactjs-chat/.
-
 To run a development version locally, do:

 ```shell
-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/relay-reactjs-chat
-npm install   # Install dependencies for the web app
-npm run start # Start development server to serve the web app on http://localhost:3000/
+git clone https://github.com/waku-org/js-waku-examples/
+cd js-waku-examples/relay-reactjs-chat
+npm install
+npm run start
 ```
--- a/relay-reactjs-chat/config/webpack.extend.js
+++ b/relay-reactjs-chat/config/webpack.extend.js
@ -1,60 +0,0 @@
-const webpack = require('webpack');
-
-module.exports = {
-  dev: (config) => {
-    // Override webpack 5 config from react-scripts to load polyfills
-    if (!config.resolve) config.resolve = {};
-    if (!config.resolve.fallback) config.resolve.fallback = {};
-    Object.assign(config.resolve.fallback, {
-      buffer: require.resolve('buffer'),
-      crypto: false,
-      stream: require.resolve('stream-browserify'),
-    });
-
-    if (!config.plugins) config.plugins = [];
-    config.plugins.push(
-      new webpack.DefinePlugin({
-        'process.env.ENV': JSON.stringify('dev'),
-      })
-    );
-    config.plugins.push(
-      new webpack.ProvidePlugin({
-        process: 'process/browser.js',
-        Buffer: ['buffer', 'Buffer'],
-      })
-    );
-
-    if (!config.ignoreWarnings) config.ignoreWarnings = [];
-    config.ignoreWarnings.push(/Failed to parse source map/);
-
-    return config;
-  },
-  prod: (config) => {
-    // Override webpack 5 config from react-scripts to load polyfills
-    if (!config.resolve) config.resolve = {};
-    if (!config.resolve.fallback) config.resolve.fallback = {};
-    Object.assign(config.resolve.fallback, {
-      buffer: require.resolve('buffer'),
-      crypto: false,
-      stream: require.resolve('stream-browserify'),
-    });
-
-    if (!config.plugins) config.plugins = [];
-    config.plugins.push(
-      new webpack.DefinePlugin({
-        'process.env.ENV': JSON.stringify('prod'),
-      })
-    );
-    config.plugins.push(
-      new webpack.ProvidePlugin({
-        process: 'process/browser.js',
-        Buffer: ['buffer', 'Buffer'],
-      })
-    );
-
-    if (!config.ignoreWarnings) config.ignoreWarnings = [];
-    config.ignoreWarnings.push(/Failed to parse source map/);
-
-    return config;
-  },
-};
--- a/relay-reactjs-chat/craco.config.js
+++ b/relay-reactjs-chat/craco.config.js
@ -0,0 +1,26 @@
+const {getLoaders, loaderByName} = require("@craco/craco");
+
+module.exports = {
+    webpack: {
+        configure: (webpackConfig) => {
+            const {hasFoundAny, matches} = getLoaders(webpackConfig, loaderByName("babel-loader"));
+
+            if (hasFoundAny) {
+                matches.forEach(c => {
+                    // Modify test to include cjs for @chainsafe/libp2p-gossipsub rpc module
+                    if (c.loader.test.toString().includes("mjs")) {
+                        // If your project uses typescript then do not forget to include `ts`/`tsx`
+                        if (c.loader.test.toString().includes('jsx')) {
+                            c.loader.test = /\.(js|cjs|mjs|jsx)$/
+                        } else {
+                            c.loader.test = /\.(js|cjs|mjs)$/
+                        }
+                    }
+                });
+            }
+
+            return webpackConfig;
+        }
+    }
+}
+
--- a/relay-reactjs-chat/package.json
+++ b/relay-reactjs-chat/package.json
@ -2,22 +2,22 @@
  "name": "relay-reactjs-chat",
  "version": "0.1.0",
  "private": true,
-  "homepage": "/examples/relay-reactjs-chat",
+  "homepage": "/relay-reactjs-chat",
  "dependencies": {
-    "@testing-library/jest-dom": "^5.16.2",
-    "@testing-library/react": "^13.2.0",
-    "@testing-library/user-event": "^14.0.4",
-    "js-waku": "^0.24.0",
-    "protobufjs": "^6.11.2",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/user-event": "^13.5.0",
+    "js-waku": "0.24.0-63bfb9b",
+    "protobufjs": "^7.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1"
  },
  "scripts": {
-    "start": "cra-webpack-rewired start",
-    "build": "cra-webpack-rewired build",
-    "test": "cra-webpack-rewired test",
-    "eject": "cra-webpack-rewired eject"
+    "start": "craco start",
+    "build": "craco build",
+    "test": "exit 0",
+    "eject": "craco eject"
  },
  "eslintConfig": {
    "extends": [
@ -40,9 +40,8 @@
    ]
  },
  "devDependencies": {
-    "cra-webpack-rewired": "^1.0.1",
-    "process": "^0.11.10",
-    "stream-browserify": "^3.0.0",
+    "@craco/craco": "7.0.0-alpha.7",
+    "eslint": "^8.22.0",
    "typescript": "^4.7.4"
  }
 }
--- a/relay-reactjs-chat/pnpm-lock.yaml
+++ b/relay-reactjs-chat/pnpm-lock.yaml
--- a/relay-reactjs-chat/src/App.js
+++ b/relay-reactjs-chat/src/App.js
@ -1,111 +1,115 @@
-import { Waku, WakuMessage } from "js-waku";
+import {WakuMessage, waitForRemotePeer} from "js-waku";
 import * as React from "react";
 import protobuf from "protobufjs";
+import {createWaku} from "js-waku/lib/create_waku";

 const ContentTopic = `/relay-reactjs-chat/1/chat/proto`;

 const SimpleChatMessage = new protobuf.Type("SimpleChatMessage")
-  .add(new protobuf.Field("timestamp", 1, "uint64"))
-  .add(new protobuf.Field("text", 2, "string"));
+    .add(new protobuf.Field("timestamp", 1, "uint32"))
+    .add(new protobuf.Field("text", 2, "string"));

 function App() {
-  const [waku, setWaku] = React.useState(undefined);
-  const [wakuStatus, setWakuStatus] = React.useState("None");
-  // Using a counter just for the messages to be different
-  const [sendCounter, setSendCounter] = React.useState(0);
-  const [messages, setMessages] = React.useState([]);
+    const [waku, setWaku] = React.useState(undefined);
+    const [wakuStatus, setWakuStatus] = React.useState("None");
+    // Using a counter just for the messages to be different
+    const [sendCounter, setSendCounter] = React.useState(0);
+    const [messages, setMessages] = React.useState([]);

-  React.useEffect(() => {
-    if (!!waku) return;
-    if (wakuStatus !== "None") return;
+    React.useEffect(() => {
+        if (!!waku) return;
+        if (wakuStatus !== "None") return;

-    setWakuStatus("Starting");
+        setWakuStatus("Starting");
+        (async () => {

-    Waku.create({ bootstrap: { default: true } }).then((waku) => {
-      setWaku(waku);
-      setWakuStatus("Connecting");
-      waku.waitForRemotePeer().then(() => {
-        setWakuStatus("Ready");
-      });
-    });
-  }, [waku, wakuStatus]);
+            const waku = await createWaku({defaultBootstrap: true})

-  const processIncomingMessage = React.useCallback((wakuMessage) => {
-    if (!wakuMessage.payload) return;
+            setWaku(waku);
+            await waku.start();
+            setWakuStatus("Connecting");
+            await waitForRemotePeer(waku, ["relay"]);
+            setWakuStatus("Ready");
+        })();
+    }, [waku, wakuStatus]);

-    const { text, timestamp } = SimpleChatMessage.decode(wakuMessage.payload);
+    const processIncomingMessage = React.useCallback((wakuMessage) => {
+        if (!wakuMessage.payload) return;

-    const time = new Date();
-    time.setTime(timestamp);
-    const message = { text, timestamp: time };
+        const {text, timestamp} = SimpleChatMessage.decode(wakuMessage.payload);

-    setMessages((messages) => {
-      return [message].concat(messages);
-    });
-  }, []);
+        const time = new Date();

-  React.useEffect(() => {
-    if (!waku) return;
+        time.setTime(timestamp);
+        const message = {text, timestamp: time};

-    // Pass the content topic to only process messages related to your dApp
-    waku.relay.addObserver(processIncomingMessage, [ContentTopic]);
+        setMessages((messages) => {
+            return [message].concat(messages);
+        });
+    }, []);

-    // `cleanUp` is called when the component is unmounted, see ReactJS doc.
-    return function cleanUp() {
-      waku.relay.deleteObserver(processIncomingMessage, [ContentTopic]);
+    React.useEffect(() => {
+        if (!waku) return;
+
+        // Pass the content topic to only process messages related to your dApp
+        waku.relay.addObserver(processIncomingMessage, [ContentTopic]);
+
+        // `cleanUp` is called when the component is unmounted, see ReactJS doc.
+        return function cleanUp() {
+            waku.relay.deleteObserver(processIncomingMessage, [ContentTopic]);
+        };
+    }, [waku, wakuStatus, processIncomingMessage]);
+
+    const sendMessageOnClick = () => {
+        // Check Waku is started and connected first.
+        if (wakuStatus !== "Ready") return;
+
+        sendMessage(`Here is message #${sendCounter}`, waku, new Date()).then(() =>
+            console.log("Message sent")
+        );
+
+        // For demonstration purposes.
+        setSendCounter(sendCounter + 1);
    };
-  }, [waku, wakuStatus, processIncomingMessage]);

-  const sendMessageOnClick = () => {
-    // Check Waku is started and connected first.
-    if (wakuStatus !== "Ready") return;
-
-    sendMessage(`Here is message #${sendCounter}`, waku, new Date()).then(() =>
-      console.log("Message sent")
+    return (
+        <div className="App">
+            <header className="App-header">
+                <p>{wakuStatus}</p>
+                <button onClick={sendMessageOnClick} disabled={wakuStatus !== "Ready"}>
+                    Send Message
+                </button>
+                <ul>
+                    {messages.map((msg) => {
+                        return (
+                            <li key={msg.timestamp.valueOf()}>
+                                <p>
+                                    {msg.timestamp.toString()}: {msg.text}
+                                </p>
+                            </li>
+                        );
+                    })}
+                </ul>
+            </header>
+        </div>
    );
-
-    // For demonstration purposes.
-    setSendCounter(sendCounter + 1);
-  };
-
-  return (
-    <div className="App">
-      <header className="App-header">
-        <p>{wakuStatus}</p>
-        <button onClick={sendMessageOnClick} disabled={wakuStatus !== "Ready"}>
-          Send Message
-        </button>
-        <ul>
-          {messages.map((msg) => {
-            return (
-              <li key={msg.timestamp.valueOf()}>
-                <p>
-                  {msg.timestamp.toString()}: {msg.text}
-                </p>
-              </li>
-            );
-          })}
-        </ul>
-      </header>
-    </div>
-  );
 }

 function sendMessage(message, waku, timestamp) {
-  const time = timestamp.getTime();
+    const time = timestamp.getTime();

-  // Encode to protobuf
-  const protoMsg = SimpleChatMessage.create({
-    timestamp: time,
-    text: message,
-  });
-  const payload = SimpleChatMessage.encode(protoMsg).finish();
+    // Encode to protobuf
+    const protoMsg = SimpleChatMessage.create({
+        timestamp: time,
+        text: message,
+    });
+    const payload = SimpleChatMessage.encode(protoMsg).finish();

-  // Wrap in a Waku Message
-  return WakuMessage.fromBytes(payload, ContentTopic).then((wakuMessage) =>
-    // Send over Waku Relay
-    waku.relay.send(wakuMessage)
-  );
+    // Wrap in a Waku Message
+    return WakuMessage.fromBytes(payload, ContentTopic).then((wakuMessage) =>
+        // Send over Waku Relay
+        waku.relay.send(wakuMessage)
+    );
 }

 export default App;
--- a/relay-reactjs-chat/src/index.js
+++ b/relay-reactjs-chat/src/index.js
@ -1,11 +1,11 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';

-ReactDOM.render(
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
  <React.StrictMode>
    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+  </React.StrictMode>
 );