Merge pull request #388 from status-im/example-upgrade

.github/workflows/examples-ci.yml

@@ -12,7 +12,7 @@ jobs:
   examples_build_and_test:
     strategy:
       matrix:
-        example: [ web-chat, eth-pm, eth-pm-wallet-encryption, min-react-js-chat, store-reactjs-chat ]
+        example: [ web-chat, eth-pm, eth-pm-wallet-encryption, relay-reactjs-chat, store-reactjs-chat ]
     runs-on: ubuntu-latest
     steps:
 

examples/README.md

@@ -4,8 +4,14 @@ Here is the list of the code examples and the features they demonstrate:
 
 - [Web Chat App](web-chat): Group chat, React/TypeScript, Relay, Store.
 - [Ethereum Private Message Web App](eth-pm): Private Messaging, React/TypeScript, Light Push, Signature with Web3, Asymmetric Encryption.
-- [Minimal ReactJS Chat App](min-react-js-chat): Group chat, React/JavaScript, Relay, Protobuf using `protons`.
+- [Minimal ReactJS Waku Relay App](relay-reactjs-chat):
+  Group chat,
+  React/JavaScript,
+  `create-react-app`/`react-scripts` 5.0.0,
+  Waku Relay
+  Protobuf using `protons`,
+  No async/await syntax.
 - [Minimal ReactJS Waku Store App](store-reactjs-chat): Waku Store, React/JavaScript, Protobuf using `protons`.
-- [Pure Javascript Using Minified Library](unpkg-js-store): Stop retrieving results from Waku Store on condition, Use minified bundle from Unpkg.com, JavaScript. 
+- [Pure Javascript Using Minified Library](unpkg-js-store): Stop retrieving results from Waku Store on condition, Use minified bundle from Unpkg.com, JavaScript.
 
 See https://docs.dappconnect.dev/docs/examples/ for more examples.

examples/min-react-js-chat/.env

@@ -1,3 +0,0 @@
-# Remove ReactJS warning about webpack
-# because this is not a monorepo, ReactJS projects are examples
-SKIP_PREFLIGHT_CHECK=true

examples/min-react-js-chat/package.json

@@ -1,41 +0,0 @@
-{
-  "name": "min-js-web-chat",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "js-waku": "../../build/esm",
-    "protons": "^2.0.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3",
-    "web-vitals": "^1.0.1"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts build",
-    "react-test": "react-scripts test --env=./test/custom-test-env.js",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}

examples/min-react-js-chat/test/custom-test-env.js

@@ -1,12 +0,0 @@
-const Environment = require('jest-environment-jsdom');
-
-module.exports = class CustomTestEnvironment extends Environment {
-  async setup() {
-    await super.setup();
-    if (typeof this.global.TextEncoder === 'undefined') {
-      const { TextEncoder, TextDecoder } = require('util');
-      this.global.TextEncoder = TextEncoder;
-      this.global.TextDecoder = TextDecoder;
-    }
-  }
-};

examples/relay-reactjs-chat/README.md

@@ -1,14 +1,15 @@
-# Minimal ReactJS Web Chat App
+# Minimal ReactJS Waku Relay App
 
 **Demonstrates**:
 
 - Group chat
 - React/JavaScript
+- `create-react-app`/`react-scripts` 5.0.0
 - Waku Relay
 - Protobuf using `protons`.
 - No async/await syntax.
 
-A barebone chat app to illustrate the [ReactJS Relay guide](/guides/reactjs-relay.md).
+A barebone chat app to illustrate the [ReactJS Relay guide](https://docs.dappconnect.dev/docs/guides/07_reactjs_relay/).
 
 To run a development version locally, do:
 
@@ -16,7 +17,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-react-js-chat
+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/
 ```

examples/relay-reactjs-chat/config/webpack.extend.js

@@ -0,0 +1,60 @@
+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: require.resolve('crypto-browserify'),
+      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: require.resolve('crypto-browserify'),
+      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;
+  },
+};

examples/relay-reactjs-chat/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "relay-reactjs-chat",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/user-event": "^13.5.0",
+    "js-waku": "../../build/esm",
+    "protons": "^2.0.3",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "5.0.0",
+    "web-vitals": "^2.1.3"
+  },
+  "scripts": {
+    "start": "cra-webpack-rewired start",
+    "build": "cra-webpack-rewired build",
+    "test": "cra-webpack-rewired test",
+    "eject": "cra-webpack-rewired eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not ie <= 99",
+      "not android <= 4.4.4",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "cra-webpack-rewired": "^1.0.1"
+  }
+}

examples/relay-reactjs-chat/src/App.js

@@ -1,9 +1,9 @@
-import './App.css';
+import { Waku } from 'js-waku';
-import { Waku, WakuMessage } from 'js-waku';
 import * as React from 'react';
 import protons from 'protons';
+import { WakuMessage } from 'js-waku';
 
-const ContentTopic = `/min-react-js-chat/1/chat/proto`;
+const ContentTopic = `/relay-reactjs-chat/1/chat/proto`;
 
 const proto = protons(`
 message SimpleChatMessage {
@@ -15,6 +15,7 @@ message SimpleChatMessage {
 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([]);
 
@@ -33,7 +34,6 @@ function App() {
     });
   }, [waku, wakuStatus]);
 
-  // Need to keep the same reference around to add and delete from relay observer
   const processIncomingMessage = React.useCallback((wakuMessage) => {
     if (!wakuMessage.payload) return;
 
@@ -45,28 +45,32 @@ function App() {
     time.setTime(timestamp);
     const message = { text, timestamp: time };
 
-    setMessages((currMessages) => {
+    setMessages((messages) => {
-      return [message].concat(currMessages);
+      return [message].concat(messages);
     });
   }, []);
 
   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}`, new Date(), waku).then(() =>
+    sendMessage(`Here is message #${sendCounter}`, waku, new Date()).then(() =>
       console.log('Message sent')
     );
 
+    // For demonstration purposes.
     setSendCounter(sendCounter + 1);
   };
 
@@ -93,17 +97,20 @@ function App() {
   );
 }
 
-export default App;
+function sendMessage(message, waku, timestamp) {
-
-function sendMessage(message, timestamp, waku) {
   const time = timestamp.getTime();
 
+  // Encode to protobuf
   const payload = proto.SimpleChatMessage.encode({
     timestamp: time,
-    text: message,
+    text: message
   });
 
+  // Wrap in a Waku Message
   return WakuMessage.fromBytes(payload, ContentTopic).then((wakuMessage) =>
+    // Send over Waku Relay
     waku.relay.send(wakuMessage)
   );
 }
+
+export default App;

examples/store-reactjs-chat/.env

@@ -1,3 +0,0 @@
-# Remove ReactJS warning about webpack
-# because this is not a monorepo, ReactJS projects are examples
-SKIP_PREFLIGHT_CHECK=true

examples/store-reactjs-chat/README.md

@@ -1,12 +1,13 @@
 # Minimal ReactJS Waku Store App
 
 - React/JavaScript,
+- `create-react-app`/`react-scripts` 5.0.0
 - Waku Store,
 - Protobuf using `protons`.
 - No async/await syntax.
 
 A simple app that retrieves chat messages using [Waku Store](https://rfc.vac.dev/spec/13/)
-to illustrate the [Retrieve Messages Using Waku Store With ReactJS guide](/guides/reactjs-store.md).
+to illustrate the [Retrieve Messages Using Waku Store With ReactJS guide](https://docs.dappconnect.dev/docs/guides/08_reactjs_store/).
 
 To run a development version locally, do:
 

examples/store-reactjs-chat/config/webpack.extend.js

@@ -0,0 +1,60 @@
+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: require.resolve('crypto-browserify'),
+      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: require.resolve('crypto-browserify'),
+      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;
+  },
+};

examples/store-reactjs-chat/package.json

@@ -3,21 +3,25 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/react": "^11.2.7",
+    "@testing-library/react": "^12.1.2",
-    "@testing-library/user-event": "^12.8.3",
+    "@testing-library/user-event": "^13.5.0",
-    "js-waku": "../../build/esm",
+    "assert": "^2.0.0",
-    "protons": "^2.0.1",
+    "buffer": "^6.0.3",
+    "crypto-browserify": "^3.12.0",
+    "js-waku": "^0.14.2",
+    "protons": "^2.0.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3",
+    "react-scripts": "5.0.0",
-    "web-vitals": "^1.1.2"
+    "stream-browserify": "^3.0.0",
+    "web-vitals": "^2.1.3"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "cra-webpack-rewired start",
-    "build": "react-scripts build",
+    "build": "cra-webpack-rewired build",
-    "test": "react-scripts build",
+    "test": "cra-webpack-rewired test",
-    "eject": "react-scripts eject"
+    "eject": "cra-webpack-rewired eject"
   },
   "eslintConfig": {
     "extends": [
@@ -28,6 +32,8 @@
   "browserslist": {
     "production": [
       ">0.2%",
+      "not ie <= 99",
+      "not android <= 4.4.4",
       "not dead",
       "not op_mini all"
     ],
@@ -36,5 +42,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "cra-webpack-rewired": "^1.0.1"
   }
 }

examples/store-reactjs-chat/src/App.js

@@ -1,4 +1,3 @@
-import './App.css';
 import { Waku } from 'js-waku';
 import * as React from 'react';
 import protons from 'protons';