Merge pull request #381 from status-im/web-chat-upgrade

.github/dependabot.yml

@@ -7,3 +7,10 @@ updates:
       day: "sunday"
     reviewers:
       - "d4nte"
+  - package-ecosystem: "npm"
+    directory: "/examples/web-chat"
+    schedule:
+      interval: "weekly"
+      day: "sunday"
+    reviewers:
+      - "d4nte"

examples/web-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/web-chat/package.json

@@ -4,39 +4,42 @@
   "private": true,
   "homepage": "/js-waku",
   "dependencies": {
-    "@livechat/ui-kit": "*",
+    "@livechat/ui-kit": "^0.5.0-20",
+    "buffer": "^6.0.3",
+    "crypto-browserify": "^3.12.0",
     "js-waku": "../../build/main",
-    "react": "^16.14.0",
+    "process": "^0.11.10",
-    "react-dom": "^16.14.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "server-name-generator": "^1.0.5",
-    "web-vitals": "^1.1.1"
+    "stream-browserify": "^3.0.0"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.11.10",
+    "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/react": "^11.2.6",
+    "@testing-library/react": "^12.1.2",
-    "@testing-library/user-event": "^12.8.3",
+    "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^26.0.22",
+    "@types/jest": "^27.4.0",
-    "@types/node": "^12.20.7",
+    "@types/node": "^17.0.8",
-    "@types/react": "^17.0.3",
+    "@types/react": "^17.0.38",
-    "@types/react-dom": "^17.0.3",
+    "@types/react-dom": "^17.0.11",
-    "cspell": "^5.3.12",
+    "cra-webpack-rewired": "^1.0.1",
-    "gh-pages": "^3.1.0",
+    "cspell": "^5.14.0",
+    "gh-pages": "^3.2.3",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.2.1",
+    "prettier": "^2.5.1",
-    "react-scripts": "4.0.3",
+    "react-scripts": "5.0.0",
-    "typescript": "^4.2.4"
+    "typescript": "^4.5.4"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "cra-webpack-rewired start",
-    "build": "react-scripts build",
+    "build": "cra-webpack-rewired build",
-    "test:unit": "react-scripts test",
+    "test:unit": "cra-webpack-rewired test",
-    "eject": "react-scripts eject",
     "fix": "run-s fix:*",
     "test": "run-s build test:*",
     "test:lint": "eslint src --ext .ts --ext .tsx",
-    "test:prettier": "prettier \"src/**/*.{ts,tsx}\" \"./*.json\" --list-different",
+    "test:prettier": "prettier \"src/**/*.{ts,tsx}\" \"./*.json\" \"./config/*.js\" --list-different",
     "test:spelling": "cspell \"{README.md,.github/*.md,src/**/*.{ts,tsx},public/**/*.html}\" -c ../../.cspell.json",
-    "fix:prettier": "prettier \"src/**/*.{ts,tsx}\" \"./*.json\" --write",
+    "fix:prettier": "prettier \"src/**/*.{ts,tsx}\" \"./*.json\" \"./config/*.js\" --write",
     "fix:lint": "eslint src --ext .ts --ext .tsx --fix",
     "proto": "run-s proto:*",
     "proto:build": "buf generate",

examples/web-chat/src/App.tsx

@@ -86,10 +86,8 @@ export default function App() {
     const persistedNick = window.localStorage.getItem('nick');
     return persistedNick !== null ? persistedNick : generate();
   });
-  const [
+  const [historicalMessagesRetrieved, setHistoricalMessagesRetrieved] =
-    historicalMessagesRetrieved,
+    useState(false);
-    setHistoricalMessagesRetrieved,
-  ] = useState(false);
 
   useEffect(() => {
     localStorage.setItem('nick', nick);

examples/web-chat/src/Room.tsx

@@ -29,7 +29,7 @@ export default function Room(props: Props) {
       style={{ height: '98vh', display: 'flex', flexDirection: 'column' }}
     >
       <TitleBar
-        leftIcons={`Peers: ${relayPeers} relay, ${storePeers} store.`}
+        leftIcons={[`Peers: ${relayPeers} relay ${storePeers} store.`]}
         title="Waku v2 chat app"
       />
       <ChatList messages={props.messages} />

examples/web-chat/src/proto/chat_message.ts

@@ -10,7 +10,9 @@ export interface ChatMessage {
   payload: Uint8Array;
 }
 
-const baseChatMessage: object = { timestamp: 0, nick: '' };
+function createBaseChatMessage(): ChatMessage {
+  return { timestamp: 0, nick: '', payload: new Uint8Array() };
+}
 
 export const ChatMessage = {
   encode(
@@ -32,8 +34,7 @@ export const ChatMessage = {
   decode(input: _m0.Reader | Uint8Array, length?: number): ChatMessage {
     const reader = input instanceof _m0.Reader ? input : new _m0.Reader(input);
     let end = length === undefined ? reader.len : reader.pos + length;
-    const message = { ...baseChatMessage } as ChatMessage;
+    const message = createBaseChatMessage();
-    message.payload = new Uint8Array();
     while (reader.pos < end) {
       const tag = reader.uint32();
       switch (tag >>> 3) {
@@ -55,27 +56,26 @@ export const ChatMessage = {
   },
 
   fromJSON(object: any): ChatMessage {
-    const message = { ...baseChatMessage } as ChatMessage;
+    const message = createBaseChatMessage();
-    message.payload = new Uint8Array();
+    message.timestamp =
-    if (object.timestamp !== undefined && object.timestamp !== null) {
+      object.timestamp !== undefined && object.timestamp !== null
-      message.timestamp = Number(object.timestamp);
+        ? Number(object.timestamp)
-    } else {
+        : 0;
-      message.timestamp = 0;
+    message.nick =
-    }
+      object.nick !== undefined && object.nick !== null
-    if (object.nick !== undefined && object.nick !== null) {
+        ? String(object.nick)
-      message.nick = String(object.nick);
+        : '';
-    } else {
+    message.payload =
-      message.nick = '';
+      object.payload !== undefined && object.payload !== null
-    }
+        ? bytesFromBase64(object.payload)
-    if (object.payload !== undefined && object.payload !== null) {
+        : new Uint8Array();
-      message.payload = bytesFromBase64(object.payload);
-    }
     return message;
   },
 
   toJSON(message: ChatMessage): unknown {
     const obj: any = {};
-    message.timestamp !== undefined && (obj.timestamp = message.timestamp);
+    message.timestamp !== undefined &&
+      (obj.timestamp = Math.round(message.timestamp));
     message.nick !== undefined && (obj.nick = message.nick);
     message.payload !== undefined &&
       (obj.payload = base64FromBytes(
@@ -84,29 +84,20 @@ export const ChatMessage = {
     return obj;
   },
 
-  fromPartial(object: DeepPartial<ChatMessage>): ChatMessage {
+  fromPartial<I extends Exact<DeepPartial<ChatMessage>, I>>(
-    const message = { ...baseChatMessage } as ChatMessage;
+    object: I
-    if (object.timestamp !== undefined && object.timestamp !== null) {
+  ): ChatMessage {
-      message.timestamp = object.timestamp;
+    const message = createBaseChatMessage();
-    } else {
+    message.timestamp = object.timestamp ?? 0;
-      message.timestamp = 0;
+    message.nick = object.nick ?? '';
-    }
+    message.payload = object.payload ?? new Uint8Array();
-    if (object.nick !== undefined && object.nick !== null) {
-      message.nick = object.nick;
-    } else {
-      message.nick = '';
-    }
-    if (object.payload !== undefined && object.payload !== null) {
-      message.payload = object.payload;
-    } else {
-      message.payload = new Uint8Array();
-    }
     return message;
   },
 };
 
 declare var self: any | undefined;
 declare var window: any | undefined;
+declare var global: any | undefined;
 var globalThis: any = (() => {
   if (typeof globalThis !== 'undefined') return globalThis;
   if (typeof self !== 'undefined') return self;
@@ -146,6 +137,7 @@ type Builtin =
   | number
   | boolean
   | undefined;
+
 export type DeepPartial<T> = T extends Builtin
   ? T
   : T extends Array<infer U>
@@ -156,6 +148,14 @@ export type DeepPartial<T> = T extends Builtin
   ? { [K in keyof T]?: DeepPartial<T[K]> }
   : Partial<T>;
 
+type KeysOfUnion<T> = T extends T ? keyof T : never;
+export type Exact<P, I extends P> = P extends Builtin
+  ? P
+  : P & { [K in keyof P]: Exact<P[K], I[K]> } & Record<
+        Exclude<keyof I, KeysOfUnion<P>>,
+        never
+      >;
+
 function longToNumber(long: Long): number {
   if (long.gt(Number.MAX_SAFE_INTEGER)) {
     throw new globalThis.Error('Value is larger than Number.MAX_SAFE_INTEGER');

examples/web-chat/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "incremental": true,
-    "target": "es2017",
+    "target": "es2020",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,