From a274982457eb4cba4c70630ea6a8f8375ce5b596 Mon Sep 17 00:00:00 2001
From: danisharora099 <danisharora099@gmail.com>
Date: Fri, 9 Dec 2022 16:59:11 +0530
Subject: [PATCH] add: eslint & lint all files

---
 .husky/pre-commit                             |   2 +-
 ci/deploy.js                                  |  50 ++---
 light-js/index.html                           | 184 +++++++++---------
 package.json                                  |   3 +-
 relay-angular-chat/angular.json               |  18 +-
 relay-angular-chat/karma.conf.js              |  33 ++--
 .../src/@types/protons/types.d.ts             |   2 +-
 .../src/@types/time-cache/types.d.ts          |   4 +-
 .../src/app/app.component.spec.ts             |  23 ++-
 relay-angular-chat/src/app/app.component.ts   |  18 +-
 relay-angular-chat/src/app/app.module.ts      |  21 +-
 .../app/messages/messages.component.spec.ts   |  13 +-
 .../src/app/waku.service.spec.ts              |   8 +-
 .../src/environments/environment.prod.ts      |   2 +-
 .../src/environments/environment.ts           |   2 +-
 relay-angular-chat/src/test.ts                |  18 +-
 relay-angular-chat/tsconfig.app.json          |   8 +-
 relay-angular-chat/tsconfig.json              |   7 +-
 relay-angular-chat/tsconfig.spec.json         |  13 +-
 relay-reactjs-chat/craco.config.js            |  44 +++--
 relay-reactjs-chat/src/App.test.js            |   6 +-
 relay-reactjs-chat/src/index.js               |  10 +-
 relay-reactjs-chat/src/setupTests.js          |   2 +-
 store-reactjs-chat/src/App.js                 |   8 +-
 store-reactjs-chat/src/App.test.js            |   6 +-
 store-reactjs-chat/src/setupTests.js          |   2 +-
 26 files changed, 244 insertions(+), 263 deletions(-)

diff --git a/.husky/pre-commit b/.husky/pre-commit
index d24fdfc..5ba764e 100755
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1,4 +1,4 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-npx lint-staged
+pnpx lint-staged
diff --git a/ci/deploy.js b/ci/deploy.js
index a294825..340cf50 100755
--- a/ci/deploy.js
+++ b/ci/deploy.js
@@ -1,39 +1,43 @@
-const { promisify } = require('util')
-const { publish } = require('gh-pages')
-const ghpublish = promisify(publish)
+const { promisify } = require("util");
+const { publish } = require("gh-pages");
+const ghpublish = promisify(publish);
 
 /* fix for "Unhandled promise rejections" */
-process.on('unhandledRejection', err => { throw err })
+process.on("unhandledRejection", (err) => {
+  throw err;
+});
 
-const Args = process.argv.slice(2)
-const USE_HTTPS = Args[0] && Args[0].toUpperCase() === 'HTTPS'
+const Args = process.argv.slice(2);
+const USE_HTTPS = Args[0] && Args[0].toUpperCase() === "HTTPS";
 
-const branch = 'gh-pages'
-const org = 'waku-org'
-const repo = 'js-waku-examples'
+const branch = "gh-pages";
+const org = "waku-org";
+const repo = "js-waku-examples";
 /* use SSH auth by default */
 let repoUrl = USE_HTTPS
   ? `https://github.com/${org}/${repo}.git`
-  : `git@github.com:${org}/${repo}.git`
+  : `git@github.com:${org}/${repo}.git`;
 
 /* alternative auth using GitHub user and API token */
 if (process.env.GH_USER != undefined) {
-  repoUrl = (
-    'https://' + process.env.GH_USER +
-    ':' + process.env.GH_TOKEN +
-    '@' + `github.com/${org}/${repo}.git`
-  )
+  repoUrl =
+    "https://" +
+    process.env.GH_USER +
+    ":" +
+    process.env.GH_TOKEN +
+    "@" +
+    `github.com/${org}/${repo}.git`;
 }
 
-const main = async (url, branch)=> {
-  console.log(`Pushing to: ${url}`)
-  console.log(`On branch: ${branch}`)
-  await ghpublish('build/docs', {
+const main = async (url, branch) => {
+  console.log(`Pushing to: ${url}`);
+  console.log(`On branch: ${branch}`);
+  await ghpublish("build/docs", {
     repo: url,
     branch: branch,
     dotfiles: true,
-    silent: false
-  })
-}
+    silent: false,
+  });
+};
 
-main(repoUrl, branch)
+main(repoUrl, branch);
diff --git a/light-js/index.html b/light-js/index.html
index a12e010..923184f 100644
--- a/light-js/index.html
+++ b/light-js/index.html
@@ -1,121 +1,129 @@
 <!DOCTYPE html>
-<html lang='en'>
-
-<head>
-    <meta charset='UTF-8'/>
-    <meta content='width=device-width, initial-scale=1.0' name='viewport'/>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
     <title>JS-Waku light node example</title>
-</head>
+  </head>
 
-<body>
+  <body>
+    <div><h2>Status</h2></div>
+    <div id="status"></div>
 
-<div><h2>Status</h2></div>
-<div id='status'></div>
+    <div><h2>Local Peer Id</h2></div>
+    <div id="peer-id"></div>
 
-<div><h2>Local Peer Id</h2></div>
-<div id='peer-id'></div>
+    <div><h2>Remote Peer Id</h2></div>
+    <div id="remote-peer-id"></div>
 
-<div><h2>Remote Peer Id</h2></div>
-<div id='remote-peer-id'></div>
+    <label for="remote-multiaddr">Remote peer's multiaddr</label>
+    <input
+      id="remote-multiaddr"
+      type="text"
+      value="/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm"
+    />
+    <button disabled id="dial" type="button">Dial</button>
+    <br />
+    <button disabled id="subscribe" type="button">Subscribe with Filter</button>
+    <button disabled id="unsubscribe" type="button">
+      Unsubscribe with Filter
+    </button>
+    <br />
+    <label for="textInput">Message text</label>
+    <input id="textInput" placeholder="Type your message here" type="text" />
+    <button disabled id="sendButton" type="button">
+      Send message using Light Push
+    </button>
+    <br />
+    <div id="messages"></div>
 
-<label for='remote-multiaddr'>Remote peer's multiaddr</label>
-<input id='remote-multiaddr'
-       type='text'
-       value="/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm">
-<button disabled id='dial' type='button'>Dial</button>
-<br/>
-<button disabled id='subscribe' type='button'>Subscribe with Filter</button>
-<button disabled id='unsubscribe' type='button'>Unsubscribe with Filter</button>
-<br/>
-<label for='textInput'>Message text</label>
-<input id='textInput' placeholder='Type your message here' type='text'>
-<button disabled id='sendButton' type='button'>Send message using Light Push</button>
-<br/>
-<div id="messages"></div>
+    <script type="module">
+      import * as utils from "https://unpkg.com/@waku/byte-utils@0.0.2/bundle/index.js";
+      import { createLightNode } from "https://unpkg.com/@waku/create@0.0.4/bundle/index.js";
+      import { waitForRemotePeer } from "https://unpkg.com/@waku/core@0.0.6/bundle/lib/wait_for_remote_peer.js";
+      import {
+        EncoderV0,
+        DecoderV0,
+      } from "https://unpkg.com/@waku/core@0.0.6/bundle/lib/waku_message/version_0.js";
 
-<script type='module'>
-    import * as utils from 'https://unpkg.com/@waku/byte-utils@0.0.2/bundle/index.js';
-    import {createLightNode} from 'https://unpkg.com/@waku/create@0.0.4/bundle/index.js'
-    import {waitForRemotePeer} from 'https://unpkg.com/@waku/core@0.0.6/bundle/lib/wait_for_remote_peer.js'
-    import {EncoderV0, DecoderV0} from 'https://unpkg.com/@waku/core@0.0.6/bundle/lib/waku_message/version_0.js'
+      const peerIdDiv = document.getElementById("peer-id");
+      const remotePeerIdDiv = document.getElementById("remote-peer-id");
+      const statusDiv = document.getElementById("status");
+      const remoteMultiAddrDiv = document.getElementById("remote-multiaddr");
+      const dialButton = document.getElementById("dial");
+      const subscribeButton = document.getElementById("subscribe");
+      const unsubscribeButton = document.getElementById("unsubscribe");
+      const messagesDiv = document.getElementById("messages");
+      const textInput = document.getElementById("textInput");
+      const sendButton = document.getElementById("sendButton");
 
-    const peerIdDiv = document.getElementById('peer-id');
-    const remotePeerIdDiv = document.getElementById('remote-peer-id');
-    const statusDiv = document.getElementById('status');
-    const remoteMultiAddrDiv = document.getElementById('remote-multiaddr');
-    const dialButton = document.getElementById('dial')
-    const subscribeButton = document.getElementById('subscribe')
-    const unsubscribeButton = document.getElementById('unsubscribe')
-    const messagesDiv = document.getElementById('messages')
-    const textInput = document.getElementById('textInput');
-    const sendButton = document.getElementById('sendButton');
+      const ContentTopic = "/js-waku-examples/1/chat/utf8";
+      const decoder = new DecoderV0(ContentTopic);
+      const encoder = new EncoderV0(ContentTopic);
+      let messages = [];
+      let unsubscribe;
 
-    const ContentTopic = "/js-waku-examples/1/chat/utf8";
-    const decoder = new DecoderV0(ContentTopic);
-    const encoder = new EncoderV0(ContentTopic);
-    let messages = [];
-    let unsubscribe;
+      const updateMessages = (msgs, div) => {
+        div.innerHTML = "<ul>";
+        messages.forEach((msg) => (div.innerHTML += "<li>" + msg + "</li>"));
+        div.innerHTML += "</ul>";
+      };
 
-    const updateMessages = (msgs, div) => {
-        div.innerHTML = "<ul>"
-        messages.forEach(msg => div.innerHTML += "<li>" + msg + "</li>")
-        div.innerHTML += "</ul>"
-    }
+      statusDiv.innerHTML = "<p>Creating Waku node.</p>";
+      const node = await createLightNode();
 
-    statusDiv.innerHTML = '<p>Creating Waku node.</p>';
-    const node = await createLightNode();
+      statusDiv.innerHTML = "<p>Starting Waku node.</p>";
+      await node.start();
+      statusDiv.innerHTML = "<p>Waku node started.</p>";
+      peerIdDiv.innerHTML = "<p>" + node.libp2p.peerId.toString() + "</p>";
+      dialButton.disabled = false;
 
-    statusDiv.innerHTML = '<p>Starting Waku node.</p>';
-    await node.start();
-    statusDiv.innerHTML = '<p>Waku node started.</p>';
-    peerIdDiv.innerHTML = '<p>' + node.libp2p.peerId.toString() + '</p>'
-    dialButton.disabled = false;
-
-    dialButton.onclick = async () => {
-        const ma = remoteMultiAddrDiv.value
+      dialButton.onclick = async () => {
+        const ma = remoteMultiAddrDiv.value;
         if (!ma) {
-            statusDiv.innerHTML = '<p>Error: No multiaddr provided.</p>';
-            return;
+          statusDiv.innerHTML = "<p>Error: No multiaddr provided.</p>";
+          return;
         }
-        statusDiv.innerHTML = '<p>Dialing peer.</p>';
-        await node.dial(ma, ["filter", "lightpush"])
+        statusDiv.innerHTML = "<p>Dialing peer.</p>";
+        await node.dial(ma, ["filter", "lightpush"]);
         await waitForRemotePeer(node, ["filter", "lightpush"]);
         const peers = await node.libp2p.peerStore.all();
-        statusDiv.innerHTML = '<p>Peer dialed.</p>';
-        remotePeerIdDiv.innerHTML = '<p>' + peers[0].id.toString() + '</p>'
+        statusDiv.innerHTML = "<p>Peer dialed.</p>";
+        remotePeerIdDiv.innerHTML = "<p>" + peers[0].id.toString() + "</p>";
         textInput.disabled = false;
         sendButton.disabled = false;
         subscribeButton.disabled = false;
-    }
+      };
 
-    const callback = (wakuMessage) => {
-        const text = utils.bytesToUtf8(wakuMessage.payload)
-        const timestamp = wakuMessage.timestamp.toString()
-        messages.push(text + " - " + timestamp)
-        updateMessages(messages, messagesDiv)
-    }
+      const callback = (wakuMessage) => {
+        const text = utils.bytesToUtf8(wakuMessage.payload);
+        const timestamp = wakuMessage.timestamp.toString();
+        messages.push(text + " - " + timestamp);
+        updateMessages(messages, messagesDiv);
+      };
 
-    subscribeButton.onclick = async () => {
-        unsubscribe = await node.filter.subscribe([decoder], callback)
+      subscribeButton.onclick = async () => {
+        unsubscribe = await node.filter.subscribe([decoder], callback);
         unsubscribeButton.disabled = false;
         subscribeButton.disabled = true;
-    }
+      };
 
-    unsubscribeButton.onclick = async () => {
+      unsubscribeButton.onclick = async () => {
         await unsubscribe();
-        unsubscribe = undefined
+        unsubscribe = undefined;
         unsubscribeButton.disabled = true;
         subscribeButton.disabled = false;
-    }
+      };
 
-    sendButton.onclick = async () => {
+      sendButton.onclick = async () => {
         const text = textInput.value;
 
-        await node.lightPush.push(encoder, {payload: utils.utf8ToBytes(text)});
-        console.log('Message sent!');
+        await node.lightPush.push(encoder, {
+          payload: utils.utf8ToBytes(text),
+        });
+        console.log("Message sent!");
         textInput.value = null;
-    };
-</script>
-</body>
-
+      };
+    </script>
+  </body>
 </html>
diff --git a/package.json b/package.json
index 6a7ef96..d5abba1 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "prepare": "husky install"
   },
   "lint-staged": {
-    "*.{js,css,md,html}": "prettier --write"
+    "*.{html,css,js,ts,jsx,tsx,json}": "prettier --write",
+    "*.{js,ts}": "eslint --fix"
   }
 }
diff --git a/relay-angular-chat/angular.json b/relay-angular-chat/angular.json
index e9a094f..d0c2392 100644
--- a/relay-angular-chat/angular.json
+++ b/relay-angular-chat/angular.json
@@ -21,13 +21,8 @@
             "index": "src/index.html",
             "main": "src/main.ts",
             "tsConfig": "tsconfig.app.json",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.css"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
+            "styles": ["src/styles.css"],
             "scripts": []
           },
           "configurations": {
@@ -87,13 +82,8 @@
             "main": "src/test.ts",
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.css"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
+            "styles": ["src/styles.css"],
             "scripts": []
           }
         }
diff --git a/relay-angular-chat/karma.conf.js b/relay-angular-chat/karma.conf.js
index 92ac035..8f8db63 100644
--- a/relay-angular-chat/karma.conf.js
+++ b/relay-angular-chat/karma.conf.js
@@ -3,14 +3,14 @@
 
 module.exports = function (config) {
   config.set({
-    basePath: '',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    basePath: "",
+    frameworks: ["jasmine", "@angular-devkit/build-angular"],
     plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage'),
-      require('@angular-devkit/build-angular/plugins/karma')
+      require("karma-jasmine"),
+      require("karma-chrome-launcher"),
+      require("karma-jasmine-html-reporter"),
+      require("karma-coverage"),
+      require("@angular-devkit/build-angular/plugins/karma"),
     ],
     client: {
       jasmine: {
@@ -19,26 +19,23 @@ module.exports = function (config) {
         // for example, you can disable the random execution with `random: false`
         // or set a specific seed with `seed: 4321`
       },
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
+      clearContext: false, // leave Jasmine Spec Runner output visible in browser
     },
     jasmineHtmlReporter: {
-      suppressAll: true // removes the duplicated traces
+      suppressAll: true, // removes the duplicated traces
     },
     coverageReporter: {
-      dir: require('path').join(__dirname, './coverage/relay-angular-chat'),
-      subdir: '.',
-      reporters: [
-        { type: 'html' },
-        { type: 'text-summary' }
-      ]
+      dir: require("path").join(__dirname, "./coverage/relay-angular-chat"),
+      subdir: ".",
+      reporters: [{ type: "html" }, { type: "text-summary" }],
     },
-    reporters: ['progress', 'kjhtml'],
+    reporters: ["progress", "kjhtml"],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
-    browsers: ['Chrome'],
+    browsers: ["Chrome"],
     singleRun: false,
-    restartOnFileChange: true
+    restartOnFileChange: true,
   });
 };
diff --git a/relay-angular-chat/src/@types/protons/types.d.ts b/relay-angular-chat/src/@types/protons/types.d.ts
index 855f312..c6a2d28 100644
--- a/relay-angular-chat/src/@types/protons/types.d.ts
+++ b/relay-angular-chat/src/@types/protons/types.d.ts
@@ -1 +1 @@
-declare module 'protons';
+declare module "protons";
diff --git a/relay-angular-chat/src/@types/time-cache/types.d.ts b/relay-angular-chat/src/@types/time-cache/types.d.ts
index e864f47..7684034 100644
--- a/relay-angular-chat/src/@types/time-cache/types.d.ts
+++ b/relay-angular-chat/src/@types/time-cache/types.d.ts
@@ -1,8 +1,7 @@
 declare module "time-cache" {
-
   interface ITimeCache {
     put(key: string, value: any, validity: number): void;
-    get(key: string): any;  
+    get(key: string): any;
     has(key: string): boolean;
   }
 
@@ -11,5 +10,4 @@ declare module "time-cache" {
   function TimeCache(options: object): TimeCache;
 
   export = TimeCache;
-
 }
diff --git a/relay-angular-chat/src/app/app.component.spec.ts b/relay-angular-chat/src/app/app.component.spec.ts
index d49ec96..07e4e54 100644
--- a/relay-angular-chat/src/app/app.component.spec.ts
+++ b/relay-angular-chat/src/app/app.component.spec.ts
@@ -1,18 +1,15 @@
-import { TestBed } from '@angular/core/testing';
-import { AppComponent } from './app.component';
-import { MessagesComponent } from './messages/messages.component';
+import { TestBed } from "@angular/core/testing";
+import { AppComponent } from "./app.component";
+import { MessagesComponent } from "./messages/messages.component";
 
-describe('AppComponent', () => {
+describe("AppComponent", () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [
-        AppComponent,
-        MessagesComponent
-      ],
+      declarations: [AppComponent, MessagesComponent],
     }).compileComponents();
   });
 
-  xit('should create the app', () => {
+  xit("should create the app", () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
     expect(app).toBeTruthy();
@@ -21,13 +18,15 @@ describe('AppComponent', () => {
   xit(`should have as title 'relay-angular-chat'`, () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
-    expect(app.title).toEqual('relay-angular-chat');
+    expect(app.title).toEqual("relay-angular-chat");
   });
 
-  xit('should render title', () => {
+  xit("should render title", () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('.h1')?.textContent).toContain('relay-angular-chat');
+    expect(compiled.querySelector(".h1")?.textContent).toContain(
+      "relay-angular-chat"
+    );
   });
 });
diff --git a/relay-angular-chat/src/app/app.component.ts b/relay-angular-chat/src/app/app.component.ts
index c0db533..536fcae 100644
--- a/relay-angular-chat/src/app/app.component.ts
+++ b/relay-angular-chat/src/app/app.component.ts
@@ -1,22 +1,20 @@
-import { Component } from '@angular/core';
-import { WakuService } from './waku.service';
+import { Component } from "@angular/core";
+import { WakuService } from "./waku.service";
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  selector: "app-root",
+  templateUrl: "./app.component.html",
+  styleUrls: ["./app.component.css"],
 })
-
 export class AppComponent {
-
-  title: string = 'relay-angular-chat';
+  title: string = "relay-angular-chat";
   wakuStatus!: string;
 
   constructor(private wakuService: WakuService) {}
-  
+
   ngOnInit(): void {
     this.wakuService.init();
-    this.wakuService.wakuStatus.subscribe(wakuStatus => {
+    this.wakuService.wakuStatus.subscribe((wakuStatus) => {
       this.wakuStatus = wakuStatus;
     });
   }
diff --git a/relay-angular-chat/src/app/app.module.ts b/relay-angular-chat/src/app/app.module.ts
index f873cc7..77dfd24 100644
--- a/relay-angular-chat/src/app/app.module.ts
+++ b/relay-angular-chat/src/app/app.module.ts
@@ -1,17 +1,12 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { AppComponent } from './app.component';
-import { MessagesComponent } from './messages/messages.component';
+import { NgModule } from "@angular/core";
+import { BrowserModule } from "@angular/platform-browser";
+import { AppComponent } from "./app.component";
+import { MessagesComponent } from "./messages/messages.component";
 
 @NgModule({
-  declarations: [
-    AppComponent,
-    MessagesComponent
-  ],
-  imports: [
-    BrowserModule
-  ],
+  declarations: [AppComponent, MessagesComponent],
+  imports: [BrowserModule],
   providers: [],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}
diff --git a/relay-angular-chat/src/app/messages/messages.component.spec.ts b/relay-angular-chat/src/app/messages/messages.component.spec.ts
index 13cf947..a07d003 100644
--- a/relay-angular-chat/src/app/messages/messages.component.spec.ts
+++ b/relay-angular-chat/src/app/messages/messages.component.spec.ts
@@ -1,15 +1,14 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MessagesComponent } from './messages.component';
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { MessagesComponent } from "./messages.component";
 
-describe('MessagesComponent', () => {
+describe("MessagesComponent", () => {
   let component: MessagesComponent;
   let fixture: ComponentFixture<MessagesComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ MessagesComponent ]
-    })
-    .compileComponents();
+      declarations: [MessagesComponent],
+    }).compileComponents();
   });
 
   beforeEach(() => {
@@ -18,7 +17,7 @@ describe('MessagesComponent', () => {
     fixture.detectChanges();
   });
 
-  xit('should create', () => {
+  xit("should create", () => {
     expect(component).toBeTruthy();
   });
 });
diff --git a/relay-angular-chat/src/app/waku.service.spec.ts b/relay-angular-chat/src/app/waku.service.spec.ts
index e24c7f3..ae1ab11 100644
--- a/relay-angular-chat/src/app/waku.service.spec.ts
+++ b/relay-angular-chat/src/app/waku.service.spec.ts
@@ -1,8 +1,8 @@
-import { TestBed } from '@angular/core/testing';
+import { TestBed } from "@angular/core/testing";
 
-import { WakuService } from './waku.service';
+import { WakuService } from "./waku.service";
 
-describe('WakuService', () => {
+describe("WakuService", () => {
   let service: WakuService;
 
   beforeEach(() => {
@@ -10,7 +10,7 @@ describe('WakuService', () => {
     service = TestBed.inject(WakuService);
   });
 
-  it('should be created', () => {
+  it("should be created", () => {
     expect(service).toBeTruthy();
   });
 });
diff --git a/relay-angular-chat/src/environments/environment.prod.ts b/relay-angular-chat/src/environments/environment.prod.ts
index 3612073..c966979 100644
--- a/relay-angular-chat/src/environments/environment.prod.ts
+++ b/relay-angular-chat/src/environments/environment.prod.ts
@@ -1,3 +1,3 @@
 export const environment = {
-  production: true
+  production: true,
 };
diff --git a/relay-angular-chat/src/environments/environment.ts b/relay-angular-chat/src/environments/environment.ts
index f56ff47..66998ae 100644
--- a/relay-angular-chat/src/environments/environment.ts
+++ b/relay-angular-chat/src/environments/environment.ts
@@ -3,7 +3,7 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false
+  production: false,
 };
 
 /*
diff --git a/relay-angular-chat/src/test.ts b/relay-angular-chat/src/test.ts
index 00025da..08be60f 100644
--- a/relay-angular-chat/src/test.ts
+++ b/relay-angular-chat/src/test.ts
@@ -1,14 +1,18 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
-import 'zone.js/testing';
-import { getTestBed } from '@angular/core/testing';
+import "zone.js/testing";
+import { getTestBed } from "@angular/core/testing";
 import {
   BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
+  platformBrowserDynamicTesting,
+} from "@angular/platform-browser-dynamic/testing";
 
 declare const require: {
-  context(path: string, deep?: boolean, filter?: RegExp): {
+  context(
+    path: string,
+    deep?: boolean,
+    filter?: RegExp
+  ): {
     <T>(id: string): T;
     keys(): string[];
   };
@@ -17,10 +21,10 @@ declare const require: {
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting(),
+  platformBrowserDynamicTesting()
 );
 
 // Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
+const context = require.context("./", true, /\.spec\.ts$/);
 // And load the modules.
 context.keys().map(context);
diff --git a/relay-angular-chat/tsconfig.app.json b/relay-angular-chat/tsconfig.app.json
index 6491c75..84f1f99 100644
--- a/relay-angular-chat/tsconfig.app.json
+++ b/relay-angular-chat/tsconfig.app.json
@@ -5,10 +5,6 @@
     "outDir": "./out-tsc/app",
     "types": []
   },
-  "files": [
-    "src/main.ts",
-  ],
-  "include": [
-    "src/**/*.d.ts"
-  ]
+  "files": ["src/main.ts"],
+  "include": ["src/**/*.d.ts"]
 }
diff --git a/relay-angular-chat/tsconfig.json b/relay-angular-chat/tsconfig.json
index f6f890b..1c08359 100644
--- a/relay-angular-chat/tsconfig.json
+++ b/relay-angular-chat/tsconfig.json
@@ -18,11 +18,8 @@
     "importHelpers": true,
     "target": "es2020",
     "module": "es2020",
-    "lib": [
-      "es2020",
-      "dom"
-    ],
-    "allowSyntheticDefaultImports": true,
+    "lib": ["es2020", "dom"],
+    "allowSyntheticDefaultImports": true
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,
diff --git a/relay-angular-chat/tsconfig.spec.json b/relay-angular-chat/tsconfig.spec.json
index 790229a..f140ce1 100644
--- a/relay-angular-chat/tsconfig.spec.json
+++ b/relay-angular-chat/tsconfig.spec.json
@@ -3,15 +3,8 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
-    "types": [
-      "jasmine"
-    ]
+    "types": ["jasmine"]
   },
-  "files": [
-    "src/test.ts",
-  ],
-  "include": [
-    "src/**/*.spec.ts",
-    "src/**/*.d.ts"
-  ]
+  "files": ["src/test.ts"],
+  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
 }
diff --git a/relay-reactjs-chat/craco.config.js b/relay-reactjs-chat/craco.config.js
index eb675a9..37e7ab2 100644
--- a/relay-reactjs-chat/craco.config.js
+++ b/relay-reactjs-chat/craco.config.js
@@ -1,26 +1,28 @@
-const {getLoaders, loaderByName} = require("@craco/craco");
+const { getLoaders, loaderByName } = require("@craco/craco");
 
 module.exports = {
-    webpack: {
-        configure: (webpackConfig) => {
-            const {hasFoundAny, matches} = getLoaders(webpackConfig, loaderByName("babel-loader"));
+  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)$/
-                        }
-                    }
-                });
+      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;
-        }
-    }
-}
-
+      return webpackConfig;
+    },
+  },
+};
diff --git a/relay-reactjs-chat/src/App.test.js b/relay-reactjs-chat/src/App.test.js
index 1f03afe..9382b9a 100644
--- a/relay-reactjs-chat/src/App.test.js
+++ b/relay-reactjs-chat/src/App.test.js
@@ -1,7 +1,7 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
+import { render, screen } from "@testing-library/react";
+import App from "./App";
 
-test('renders learn react link', () => {
+test("renders learn react link", () => {
   render(<App />);
   const linkElement = screen.getByText(/learn react/i);
   expect(linkElement).toBeInTheDocument();
diff --git a/relay-reactjs-chat/src/index.js b/relay-reactjs-chat/src/index.js
index 2cb1087..31508db 100644
--- a/relay-reactjs-chat/src/index.js
+++ b/relay-reactjs-chat/src/index.js
@@ -1,9 +1,9 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
     <App />
diff --git a/relay-reactjs-chat/src/setupTests.js b/relay-reactjs-chat/src/setupTests.js
index 8f2609b..1dd407a 100644
--- a/relay-reactjs-chat/src/setupTests.js
+++ b/relay-reactjs-chat/src/setupTests.js
@@ -2,4 +2,4 @@
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
+import "@testing-library/jest-dom";
diff --git a/store-reactjs-chat/src/App.js b/store-reactjs-chat/src/App.js
index fe6ef8f..42e74de 100644
--- a/store-reactjs-chat/src/App.js
+++ b/store-reactjs-chat/src/App.js
@@ -1,9 +1,9 @@
 import * as React from "react";
 import protobuf from "protobufjs";
-import {createLightNode} from "@waku/create";
-import {waitForRemotePeer} from "@waku/core/lib/wait_for_remote_peer";
-import {DecoderV0} from "@waku/core/lib/waku_message/version_0";
-import {bytesToUtf8} from "@waku/byte-utils"
+import { createLightNode } from "@waku/create";
+import { waitForRemotePeer } from "@waku/core/lib/wait_for_remote_peer";
+import { DecoderV0 } from "@waku/core/lib/waku_message/version_0";
+import { bytesToUtf8 } from "@waku/byte-utils";
 
 const ContentTopic = "/toy-chat/2/huilong/proto";
 const Decoder = new DecoderV0(ContentTopic);
diff --git a/store-reactjs-chat/src/App.test.js b/store-reactjs-chat/src/App.test.js
index 1f03afe..9382b9a 100644
--- a/store-reactjs-chat/src/App.test.js
+++ b/store-reactjs-chat/src/App.test.js
@@ -1,7 +1,7 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
+import { render, screen } from "@testing-library/react";
+import App from "./App";
 
-test('renders learn react link', () => {
+test("renders learn react link", () => {
   render(<App />);
   const linkElement = screen.getByText(/learn react/i);
   expect(linkElement).toBeInTheDocument();
diff --git a/store-reactjs-chat/src/setupTests.js b/store-reactjs-chat/src/setupTests.js
index 8f2609b..1dd407a 100644
--- a/store-reactjs-chat/src/setupTests.js
+++ b/store-reactjs-chat/src/setupTests.js
@@ -2,4 +2,4 @@
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
+import "@testing-library/jest-dom";