logos-messaging/examples.waku.org
1
0
Fork 0
mirror of https://github.com/logos-messaging/examples.waku.org.git synced 2026-01-07 15:23:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #165 from waku-org/danisharora/add-prettier

Browse Source 
feat: prettier to precommit; prettify everything
This commit is contained in:
Danish Arora 2022-12-12 10:27:58 +05:30 committed by GitHub
commit 7387ed4d35
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
39 changed files with 2277 additions and 720 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
.eslintrc.json Normal file
View File

@ -0,0 +1,16 @@
{
"env": {
"browser": true,
"commonjs": true,
"es2021": true,
"node": true
},
"extends": "plugin:react/recommended",
"overrides": [],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": "latest"
},
"plugins": ["react", "@typescript-eslint"],
"rules": {}
}

1
.husky/.gitignore vendored Normal file
View File

@ -0,0 +1 @@
_

4
.husky/pre-commit Executable file
View File

@ -0,0 +1,4 @@
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
pnpx lint-staged

50
ci/deploy.js
View File

@ -1,39 +1,43 @@
const { promisify } = require('util') const { promisify } = require("util");
const { publish } = require('gh-pages') const { publish } = require("gh-pages");
const ghpublish = promisify(publish) const ghpublish = promisify(publish);
/* fix for "Unhandled promise rejections" */ /* fix for "Unhandled promise rejections" */
process.on('unhandledRejection', err => { throw err }) process.on("unhandledRejection", (err) => {
throw err;
});
const Args = process.argv.slice(2) const Args = process.argv.slice(2);
const USE_HTTPS = Args[0] && Args[0].toUpperCase() === 'HTTPS' const USE_HTTPS = Args[0] && Args[0].toUpperCase() === "HTTPS";
const branch = 'gh-pages' const branch = "gh-pages";
const org = 'waku-org' const org = "waku-org";
const repo = 'js-waku-examples' const repo = "js-waku-examples";
/* use SSH auth by default */ /* use SSH auth by default */
let repoUrl = USE_HTTPS let repoUrl = USE_HTTPS
? `https://github.com/${org}/${repo}.git` ? `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 */ /* alternative auth using GitHub user and API token */
if (process.env.GH_USER != undefined) { if (process.env.GH_USER != undefined) {
repoUrl = ( repoUrl =
'https://' + process.env.GH_USER + "https://" +
':' + process.env.GH_TOKEN + process.env.GH_USER +
'@' + `github.com/${org}/${repo}.git` ":" +
) process.env.GH_TOKEN +
"@" +
`github.com/${org}/${repo}.git`;
} }
const main = async (url, branch)=> { const main = async (url, branch) => {
console.log(`Pushing to: ${url}`) console.log(`Pushing to: ${url}`);
console.log(`On branch: ${branch}`) console.log(`On branch: ${branch}`);
await ghpublish('build/docs', { await ghpublish("build/docs", {
repo: url, repo: url,
branch: branch, branch: branch,
dotfiles: true, dotfiles: true,
silent: false silent: false,
}) });
} };
main(repoUrl, branch) main(repoUrl, branch);

6
eth-pm/src/index.css
View File

@ -1,13 +1,13 @@
body { body {
margin: 0; margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif; sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
code { code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace; monospace;
} }

184
light-js/index.html
View File

@ -1,121 +1,129 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang='en'> <html lang="en">
<head>
<head> <meta charset="UTF-8" />
<meta charset='UTF-8'/> <meta content="width=device-width, initial-scale=1.0" name="viewport" />
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
<title>JS-Waku light node example</title> <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><h2>Local Peer Id</h2></div>
<div id='status'></div> <div id="peer-id"></div>
<div><h2>Local Peer Id</h2></div> <div><h2>Remote Peer Id</h2></div>
<div id='peer-id'></div> <div id="remote-peer-id"></div>
<div><h2>Remote Peer Id</h2></div> <label for="remote-multiaddr">Remote peer's multiaddr</label>
<div id='remote-peer-id'></div> <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> <script type="module">
<input id='remote-multiaddr' import * as utils from "https://unpkg.com/@waku/byte-utils@0.0.2/bundle/index.js";
type='text' import { createLightNode } from "https://unpkg.com/@waku/create@0.0.4/bundle/index.js";
value="/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm"> import { waitForRemotePeer } from "https://unpkg.com/@waku/core@0.0.6/bundle/lib/wait_for_remote_peer.js";
<button disabled id='dial' type='button'>Dial</button> import {
<br/> EncoderV0,
<button disabled id='subscribe' type='button'>Subscribe with Filter</button> DecoderV0,
<button disabled id='unsubscribe' type='button'>Unsubscribe with Filter</button> } from "https://unpkg.com/@waku/core@0.0.6/bundle/lib/waku_message/version_0.js";
<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'> const peerIdDiv = document.getElementById("peer-id");
import * as utils from 'https://unpkg.com/@waku/byte-utils@0.0.2/bundle/index.js'; const remotePeerIdDiv = document.getElementById("remote-peer-id");
import {createLightNode} from 'https://unpkg.com/@waku/create@0.0.4/bundle/index.js' const statusDiv = document.getElementById("status");
import {waitForRemotePeer} from 'https://unpkg.com/@waku/core@0.0.6/bundle/lib/wait_for_remote_peer.js' const remoteMultiAddrDiv = document.getElementById("remote-multiaddr");
import {EncoderV0, DecoderV0} from 'https://unpkg.com/@waku/core@0.0.6/bundle/lib/waku_message/version_0.js' 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 ContentTopic = "/js-waku-examples/1/chat/utf8";
const remotePeerIdDiv = document.getElementById('remote-peer-id'); const decoder = new DecoderV0(ContentTopic);
const statusDiv = document.getElementById('status'); const encoder = new EncoderV0(ContentTopic);
const remoteMultiAddrDiv = document.getElementById('remote-multiaddr'); let messages = [];
const dialButton = document.getElementById('dial') let unsubscribe;
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 updateMessages = (msgs, div) => {
const decoder = new DecoderV0(ContentTopic); div.innerHTML = "<ul>";
const encoder = new EncoderV0(ContentTopic); messages.forEach((msg) => (div.innerHTML += "<li>" + msg + "</li>"));
let messages = []; div.innerHTML += "</ul>";
let unsubscribe; };
const updateMessages = (msgs, div) => { statusDiv.innerHTML = "<p>Creating Waku node.</p>";
div.innerHTML = "<ul>" const node = await createLightNode();
messages.forEach(msg => div.innerHTML += "<li>" + msg + "</li>")
div.innerHTML += "</ul>"
}
statusDiv.innerHTML = '<p>Creating Waku node.</p>'; statusDiv.innerHTML = "<p>Starting Waku node.</p>";
const node = await createLightNode(); 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>'; dialButton.onclick = async () => {
await node.start(); const ma = remoteMultiAddrDiv.value;
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
if (!ma) { if (!ma) {
statusDiv.innerHTML = '<p>Error: No multiaddr provided.</p>'; statusDiv.innerHTML = "<p>Error: No multiaddr provided.</p>";
return; return;
} }
statusDiv.innerHTML = '<p>Dialing peer.</p>'; statusDiv.innerHTML = "<p>Dialing peer.</p>";
await node.dial(ma, ["filter", "lightpush"]) await node.dial(ma, ["filter", "lightpush"]);
await waitForRemotePeer(node, ["filter", "lightpush"]); await waitForRemotePeer(node, ["filter", "lightpush"]);
const peers = await node.libp2p.peerStore.all(); const peers = await node.libp2p.peerStore.all();
statusDiv.innerHTML = '<p>Peer dialed.</p>'; statusDiv.innerHTML = "<p>Peer dialed.</p>";
remotePeerIdDiv.innerHTML = '<p>' + peers[0].id.toString() + '</p>' remotePeerIdDiv.innerHTML = "<p>" + peers[0].id.toString() + "</p>";
textInput.disabled = false; textInput.disabled = false;
sendButton.disabled = false; sendButton.disabled = false;
subscribeButton.disabled = false; subscribeButton.disabled = false;
} };
const callback = (wakuMessage) => { const callback = (wakuMessage) => {
const text = utils.bytesToUtf8(wakuMessage.payload) const text = utils.bytesToUtf8(wakuMessage.payload);
const timestamp = wakuMessage.timestamp.toString() const timestamp = wakuMessage.timestamp.toString();
messages.push(text + " - " + timestamp) messages.push(text + " - " + timestamp);
updateMessages(messages, messagesDiv) updateMessages(messages, messagesDiv);
} };
subscribeButton.onclick = async () => { subscribeButton.onclick = async () => {
unsubscribe = await node.filter.subscribe([decoder], callback) unsubscribe = await node.filter.subscribe([decoder], callback);
unsubscribeButton.disabled = false; unsubscribeButton.disabled = false;
subscribeButton.disabled = true; subscribeButton.disabled = true;
} };
unsubscribeButton.onclick = async () => { unsubscribeButton.onclick = async () => {
await unsubscribe(); await unsubscribe();
unsubscribe = undefined unsubscribe = undefined;
unsubscribeButton.disabled = true; unsubscribeButton.disabled = true;
subscribeButton.disabled = false; subscribeButton.disabled = false;
} };
sendButton.onclick = async () => { sendButton.onclick = async () => {
const text = textInput.value; const text = textInput.value;
await node.lightPush.push(encoder, {payload: utils.utf8ToBytes(text)}); await node.lightPush.push(encoder, {
console.log('Message sent!'); payload: utils.utf8ToBytes(text),
});
console.log("Message sent!");
textInput.value = null; textInput.value = null;
}; };
</script> </script>
</body> </body>
</html> </html>

17
package.json
View File

@ -1,5 +1,22 @@
{ {
"dependencies": { "dependencies": {
"gh-pages": "^4.0.0" "gh-pages": "^4.0.0"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^5.46.0",
"@typescript-eslint/parser": "^5.46.0",
"eslint": "^8.29.0",
"eslint-plugin-react": "^7.31.11",
"husky": "^8.0.0",
"prettier": "^2.8.1",
"pretty-quick": "^3.1.3",
"typescript": "^4.9.4"
},
"scripts": {
"prepare": "husky install"
},
"lint-staged": {
"*.{html,css,js,ts,jsx,tsx,json}": "prettier --write",
"*.{js,ts}": "eslint --fix"
} }
} }

1494
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

18
relay-angular-chat/angular.json
View File

@ -21,13 +21,8 @@
"index": "src/index.html", "index": "src/index.html",
"main": "src/main.ts", "main": "src/main.ts",
"tsConfig": "tsconfig.app.json", "tsConfig": "tsconfig.app.json",
"assets": [ "assets": ["src/favicon.ico", "src/assets"],
"src/favicon.ico", "styles": ["src/styles.css"],
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": [] "scripts": []
}, },
"configurations": { "configurations": {
@ -87,13 +82,8 @@
"main": "src/test.ts", "main": "src/test.ts",
"tsConfig": "tsconfig.spec.json", "tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js", "karmaConfig": "karma.conf.js",
"assets": [ "assets": ["src/favicon.ico", "src/assets"],
"src/favicon.ico", "styles": ["src/styles.css"],
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": [] "scripts": []
} }
} }

33
relay-angular-chat/karma.conf.js
View File

@ -3,14 +3,14 @@
module.exports = function (config) { module.exports = function (config) {
config.set({ config.set({
basePath: '', basePath: "",
frameworks: ['jasmine', '@angular-devkit/build-angular'], frameworks: ["jasmine", "@angular-devkit/build-angular"],
plugins: [ plugins: [
require('karma-jasmine'), require("karma-jasmine"),
require('karma-chrome-launcher'), require("karma-chrome-launcher"),
require('karma-jasmine-html-reporter'), require("karma-jasmine-html-reporter"),
require('karma-coverage'), require("karma-coverage"),
require('@angular-devkit/build-angular/plugins/karma') require("@angular-devkit/build-angular/plugins/karma"),
], ],
client: { client: {
jasmine: { jasmine: {
@ -19,26 +19,23 @@ module.exports = function (config) {
// for example, you can disable the random execution with `random: false` // for example, you can disable the random execution with `random: false`
// or set a specific seed with `seed: 4321` // 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: { jasmineHtmlReporter: {
suppressAll: true // removes the duplicated traces suppressAll: true, // removes the duplicated traces
}, },
coverageReporter: { coverageReporter: {
dir: require('path').join(__dirname, './coverage/relay-angular-chat'), dir: require("path").join(__dirname, "./coverage/relay-angular-chat"),
subdir: '.', subdir: ".",
reporters: [ reporters: [{ type: "html" }, { type: "text-summary" }],
{ type: 'html' },
{ type: 'text-summary' }
]
}, },
reporters: ['progress', 'kjhtml'], reporters: ["progress", "kjhtml"],
port: 9876, port: 9876,
colors: true, colors: true,
logLevel: config.LOG_INFO, logLevel: config.LOG_INFO,
autoWatch: true, autoWatch: true,
browsers: ['Chrome'], browsers: ["Chrome"],
singleRun: false, singleRun: false,
restartOnFileChange: true restartOnFileChange: true,
}); });
}; };

2
relay-angular-chat/src/@types/protons/types.d.ts vendored
View File

@ -1 +1 @@
declare module 'protons'; declare module "protons";

4
relay-angular-chat/src/@types/time-cache/types.d.ts vendored
View File

@ -1,8 +1,7 @@
declare module "time-cache" { declare module "time-cache" {
interface ITimeCache { interface ITimeCache {
put(key: string, value: any, validity: number): void; put(key: string, value: any, validity: number): void;
get(key: string): any; get(key: string): any;
has(key: string): boolean; has(key: string): boolean;
} }
@ -11,5 +10,4 @@ declare module "time-cache" {
function TimeCache(options: object): TimeCache; function TimeCache(options: object): TimeCache;
export = TimeCache; export = TimeCache;
} }

23
relay-angular-chat/src/app/app.component.spec.ts
View File

@ -1,18 +1,15 @@
import { TestBed } from '@angular/core/testing'; import { TestBed } from "@angular/core/testing";
import { AppComponent } from './app.component'; import { AppComponent } from "./app.component";
import { MessagesComponent } from './messages/messages.component'; import { MessagesComponent } from "./messages/messages.component";
describe('AppComponent', () => { describe("AppComponent", () => {
beforeEach(async () => { beforeEach(async () => {
await TestBed.configureTestingModule({ await TestBed.configureTestingModule({
declarations: [ declarations: [AppComponent, MessagesComponent],
AppComponent,
MessagesComponent
],
}).compileComponents(); }).compileComponents();
}); });
xit('should create the app', () => { xit("should create the app", () => {
const fixture = TestBed.createComponent(AppComponent); const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance; const app = fixture.componentInstance;
expect(app).toBeTruthy(); expect(app).toBeTruthy();
@ -21,13 +18,15 @@ describe('AppComponent', () => {
xit(`should have as title 'relay-angular-chat'`, () => { xit(`should have as title 'relay-angular-chat'`, () => {
const fixture = TestBed.createComponent(AppComponent); const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance; 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); const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges(); fixture.detectChanges();
const compiled = fixture.nativeElement as HTMLElement; const compiled = fixture.nativeElement as HTMLElement;
expect(compiled.querySelector('.h1')?.textContent).toContain('relay-angular-chat'); expect(compiled.querySelector(".h1")?.textContent).toContain(
"relay-angular-chat"
);
}); });
}); });

18
relay-angular-chat/src/app/app.component.ts
View File

@ -1,22 +1,20 @@
import { Component } from '@angular/core'; import { Component } from "@angular/core";
import { WakuService } from './waku.service'; import { WakuService } from "./waku.service";
@Component({ @Component({
selector: 'app-root', selector: "app-root",
templateUrl: './app.component.html', templateUrl: "./app.component.html",
styleUrls: ['./app.component.css'] styleUrls: ["./app.component.css"],
}) })
export class AppComponent { export class AppComponent {
title: string = "relay-angular-chat";
title: string = 'relay-angular-chat';
wakuStatus!: string; wakuStatus!: string;
constructor(private wakuService: WakuService) {} constructor(private wakuService: WakuService) {}
ngOnInit(): void { ngOnInit(): void {
this.wakuService.init(); this.wakuService.init();
this.wakuService.wakuStatus.subscribe(wakuStatus => { this.wakuService.wakuStatus.subscribe((wakuStatus) => {
this.wakuStatus = wakuStatus; this.wakuStatus = wakuStatus;
}); });
} }

21
relay-angular-chat/src/app/app.module.ts
View File

@ -1,17 +1,12 @@
import { NgModule } from '@angular/core'; import { NgModule } from "@angular/core";
import { BrowserModule } from '@angular/platform-browser'; import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from './app.component'; import { AppComponent } from "./app.component";
import { MessagesComponent } from './messages/messages.component'; import { MessagesComponent } from "./messages/messages.component";
@NgModule({ @NgModule({
declarations: [ declarations: [AppComponent, MessagesComponent],
AppComponent, imports: [BrowserModule],
MessagesComponent
],
imports: [
BrowserModule
],
providers: [], providers: [],
bootstrap: [AppComponent] bootstrap: [AppComponent],
}) })
export class AppModule { } export class AppModule {}

4
relay-angular-chat/src/app/messages/messages.component.html
View File

@ -1,4 +1,6 @@
<button (click)="sendMessage()" [disabled]="wakuStatus !== 'Connected'">Send Message</button> <button (click)="sendMessage()" [disabled]="wakuStatus !== 'Connected'">
Send Message
</button>
<h2>Messages</h2> <h2>Messages</h2>
<ul class="messages"> <ul class="messages">
<li *ngFor="let message of messages"> <li *ngFor="let message of messages">

13
relay-angular-chat/src/app/messages/messages.component.spec.ts
View File

@ -1,15 +1,14 @@
import { ComponentFixture, TestBed } from '@angular/core/testing'; import { ComponentFixture, TestBed } from "@angular/core/testing";
import { MessagesComponent } from './messages.component'; import { MessagesComponent } from "./messages.component";
describe('MessagesComponent', () => { describe("MessagesComponent", () => {
let component: MessagesComponent; let component: MessagesComponent;
let fixture: ComponentFixture<MessagesComponent>; let fixture: ComponentFixture<MessagesComponent>;
beforeEach(async () => { beforeEach(async () => {
await TestBed.configureTestingModule({ await TestBed.configureTestingModule({
declarations: [ MessagesComponent ] declarations: [MessagesComponent],
}) }).compileComponents();
.compileComponents();
}); });
beforeEach(() => { beforeEach(() => {
@ -18,7 +17,7 @@ describe('MessagesComponent', () => {
fixture.detectChanges(); fixture.detectChanges();
}); });
xit('should create', () => { xit("should create", () => {
expect(component).toBeTruthy(); expect(component).toBeTruthy();
}); });
}); });

8
relay-angular-chat/src/app/waku.service.spec.ts
View File

@ -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; let service: WakuService;
beforeEach(() => { beforeEach(() => {
@ -10,7 +10,7 @@ describe('WakuService', () => {
service = TestBed.inject(WakuService); service = TestBed.inject(WakuService);
}); });
it('should be created', () => { it("should be created", () => {
expect(service).toBeTruthy(); expect(service).toBeTruthy();
}); });
}); });

2
relay-angular-chat/src/environments/environment.prod.ts
View File

@ -1,3 +1,3 @@
export const environment = { export const environment = {
production: true production: true,
}; };

2
relay-angular-chat/src/environments/environment.ts
View File

@ -3,7 +3,7 @@
// The list of file replacements can be found in `angular.json`. // The list of file replacements can be found in `angular.json`.
export const environment = { export const environment = {
production: false production: false,
}; };
/* /*

22
relay-angular-chat/src/index.html
View File

@ -1,13 +1,13 @@
<!doctype html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<title>RelayAngularChat</title> <title>RelayAngularChat</title>
<base href="/"> <base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="favicon.ico" />
</head> </head>
<body> <body>
<app-root></app-root> <app-root></app-root>
</body> </body>
</html> </html>

18
relay-angular-chat/src/test.ts
View File

@ -1,14 +1,18 @@
// This file is required by karma.conf.js and loads recursively all the .spec and framework files // This file is required by karma.conf.js and loads recursively all the .spec and framework files
import 'zone.js/testing'; import "zone.js/testing";
import { getTestBed } from '@angular/core/testing'; import { getTestBed } from "@angular/core/testing";
import { import {
BrowserDynamicTestingModule, BrowserDynamicTestingModule,
platformBrowserDynamicTesting platformBrowserDynamicTesting,
} from '@angular/platform-browser-dynamic/testing'; } from "@angular/platform-browser-dynamic/testing";
declare const require: { declare const require: {
context(path: string, deep?: boolean, filter?: RegExp): { context(
path: string,
deep?: boolean,
filter?: RegExp
): {
<T>(id: string): T; <T>(id: string): T;
keys(): string[]; keys(): string[];
}; };
@ -17,10 +21,10 @@ declare const require: {
// First, initialize the Angular testing environment. // First, initialize the Angular testing environment.
getTestBed().initTestEnvironment( getTestBed().initTestEnvironment(
BrowserDynamicTestingModule, BrowserDynamicTestingModule,
platformBrowserDynamicTesting(), platformBrowserDynamicTesting()
); );
// Then we find all the tests. // Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/); const context = require.context("./", true, /\.spec\.ts$/);
// And load the modules. // And load the modules.
context.keys().map(context); context.keys().map(context);

8
relay-angular-chat/tsconfig.app.json
View File

@ -5,10 +5,6 @@
"outDir": "./out-tsc/app", "outDir": "./out-tsc/app",
"types": [] "types": []
}, },
"files": [ "files": ["src/main.ts"],
"src/main.ts", "include": ["src/**/*.d.ts"]
],
"include": [
"src/**/*.d.ts"
]
} }

7
relay-angular-chat/tsconfig.json
View File

@ -18,11 +18,8 @@
"importHelpers": true, "importHelpers": true,
"target": "es2020", "target": "es2020",
"module": "es2020", "module": "es2020",
"lib": [ "lib": ["es2020", "dom"],
"es2020", "allowSyntheticDefaultImports": true
"dom"
],
"allowSyntheticDefaultImports": true,
}, },
"angularCompilerOptions": { "angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false, "enableI18nLegacyMessageIdFormat": false,

13
relay-angular-chat/tsconfig.spec.json
View File

@ -3,15 +3,8 @@
"extends": "./tsconfig.json", "extends": "./tsconfig.json",
"compilerOptions": { "compilerOptions": {
"outDir": "./out-tsc/spec", "outDir": "./out-tsc/spec",
"types": [ "types": ["jasmine"]
"jasmine"
]
}, },
"files": [ "files": ["src/test.ts"],
"src/test.ts", "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
],
"include": [
"src/**/*.spec.ts",
"src/**/*.d.ts"
]
} }

133
relay-js/index.html
View File

@ -1,75 +1,85 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang='en'> <html lang="en">
<head>
<head> <meta charset="UTF-8" />
<meta charset='UTF-8'/> <meta content="width=device-width, initial-scale=1.0" name="viewport" />
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
<title>JS-Waku Chat</title> <title>JS-Waku Chat</title>
</head> </head>
<body> <body>
<div><h1>Waku Node Status</h1></div>
<div id="status"></div>
<div><h1>Waku Node Status</h1></div> <label for="textInput">Message text</label>
<div id='status'></div> <input
disabled
id="textInput"
placeholder="Type your message here"
type="text"
/>
<button disabled id="sendButton" type="button">
Send Message using Relay
</button>
<label for='textInput'>Message text</label> <div><h1>Messages</h1></div>
<input disabled id='textInput' placeholder='Type your message here' type='text'> <div id="messages"></div>
<button disabled id='sendButton' type='button'>Send Message using Relay</button>
<div><h1>Messages</h1></div> <script type="module">
<div id='messages'></div> /**
* Demonstrate usage of js-waku in the browser. Use relay, gossip sub protocol to send and receive messages.
* Recommended payload is protobuf. Using simple utf-8 string for demo purposes only.
*/
import {
bytesToUtf8,
utf8ToBytes,
} from "https://unpkg.com/@waku/byte-utils@0.0.2/bundle/index.js";
import { createPrivacyNode } 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 {
DecoderV0,
EncoderV0,
} from "https://unpkg.com/@waku/core@0.0.6/bundle/lib/waku_message/version_0.js";
<script type='module'> const statusDiv = document.getElementById("status");
/** const messagesDiv = document.getElementById("messages");
* Demonstrate usage of js-waku in the browser. Use relay, gossip sub protocol to send and receive messages. const textInput = document.getElementById("textInput");
* Recommended payload is protobuf. Using simple utf-8 string for demo purposes only. const sendButton = document.getElementById("sendButton");
*/
import {bytesToUtf8, utf8ToBytes} from 'https://unpkg.com/@waku/byte-utils@0.0.2/bundle/index.js'; // Every Waku Message has a content topic that categorizes it.
import {createPrivacyNode} from 'https://unpkg.com/@waku/create@0.0.4/bundle/index.js' // It is always encoded in clear text.
import {waitForRemotePeer} from 'https://unpkg.com/@waku/core@0.0.6/bundle/lib/wait_for_remote_peer.js' // Recommendation: `/dapp-name/version/functionality/codec`
import {DecoderV0, EncoderV0} from "https://unpkg.com/@waku/core@0.0.6/bundle/lib/waku_message/version_0.js"; // We recommend to use protobuf as codec (`proto`), this demo uses utf-8
// for simplicity's sake.
const contentTopic = "/js-waku-examples/1/chat/utf8";
const statusDiv = document.getElementById('status'); // Prepare encoder and decoder, `V0` for clear text messages.
const messagesDiv = document.getElementById('messages');
const textInput = document.getElementById('textInput');
const sendButton = document.getElementById('sendButton');
// Every Waku Message has a content topic that categorizes it. const encoder = new EncoderV0(contentTopic);
// It is always encoded in clear text. const decoder = new DecoderV0(contentTopic);
// Recommendation: `/dapp-name/version/functionality/codec`
// We recommend to use protobuf as codec (`proto`), this demo uses utf-8
// for simplicity's sake.
const contentTopic = '/js-waku-examples/1/chat/utf8';
// Prepare encoder and decoder, `V0` for clear text messages. try {
statusDiv.innerHTML = "<p>Starting</p>";
const encoder = new EncoderV0(contentTopic);
const decoder = new DecoderV0(contentTopic);
try {
statusDiv.innerHTML = '<p>Starting</p>';
// Create and starts a Waku node. // Create and starts a Waku node.
// `default: true` bootstraps by connecting to pre-defined/hardcoded Waku nodes. // `default: true` bootstraps by connecting to pre-defined/hardcoded Waku nodes.
// We are currently working on migrating this method to DNS Discovery. // We are currently working on migrating this method to DNS Discovery.
// //
// https://js.waku.org/functions/lib_create_waku.createPrivacyNode.html // https://js.waku.org/functions/lib_create_waku.createPrivacyNode.html
const waku = await createPrivacyNode({defaultBootstrap: true}); const waku = await createPrivacyNode({ defaultBootstrap: true });
await waku.start(); await waku.start();
// Add a hook to process all incoming messages on a specified content topic. // Add a hook to process all incoming messages on a specified content topic.
// //
// https://js.waku.org/classes/index.waku_relay.WakuRelay.html#addObserver // https://js.waku.org/classes/index.waku_relay.WakuRelay.html#addObserver
waku.relay.addObserver(decoder, (message) => { waku.relay.addObserver(
decoder,
(message) => {
// Checks there is a payload on the message. // Checks there is a payload on the message.
// Waku Message is encoded in protobuf, in proto v3 fields are always optional. // Waku Message is encoded in protobuf, in proto v3 fields are always optional.
// //
// https://js.waku.org/interfaces/index.proto_message.WakuMessage-1.html#payload // https://js.waku.org/interfaces/index.proto_message.WakuMessage-1.html#payload
if (!message.payload) if (!message.payload) return;
return;
// Helper method to decode the payload to utf-8. A production dApp should // Helper method to decode the payload to utf-8. A production dApp should
// use `wakuMessage.payload` (Uint8Array) which enables encoding a data // use `wakuMessage.payload` (Uint8Array) which enables encoding a data
@ -77,10 +87,13 @@
// //
// https://js.waku.org/functions/index.utils.bytesToUtf8.html // https://js.waku.org/functions/index.utils.bytesToUtf8.html
const text = bytesToUtf8(message.payload); const text = bytesToUtf8(message.payload);
messagesDiv.innerHTML = `<p>${text}</p><br />` + messagesDiv.innerHTML; messagesDiv.innerHTML =
}, [contentTopic]); `<p>${text}</p><br />` + messagesDiv.innerHTML;
},
[contentTopic]
);
statusDiv.innerHTML = '<p>Connecting to a peer</p>'; statusDiv.innerHTML = "<p>Connecting to a peer</p>";
// Best effort method that waits for the Waku node to be connected to remote // Best effort method that waits for the Waku node to be connected to remote
// waku nodes (peers) and for appropriate handshakes to be done. // waku nodes (peers) and for appropriate handshakes to be done.
@ -92,24 +105,22 @@
// function that sends the text input over Waku Relay, the gossipsub // function that sends the text input over Waku Relay, the gossipsub
// protocol. // protocol.
sendButton.onclick = async () => { sendButton.onclick = async () => {
const payload = utf8ToBytes(textInput.value) const payload = utf8ToBytes(textInput.value);
await waku.relay.send(encoder, {payload}); await waku.relay.send(encoder, { payload });
console.log('Message sent!'); console.log("Message sent!");
// Reset the text input. // Reset the text input.
textInput.value = null; textInput.value = null;
}; };
// Ready to send & receive messages, enable text input. // Ready to send & receive messages, enable text input.
textInput.disabled = false; textInput.disabled = false;
sendButton.disabled = false; sendButton.disabled = false;
statusDiv.innerHTML = '<p>Ready!</p>'; statusDiv.innerHTML = "<p>Ready!</p>";
} catch (e) {
} catch (e) { statusDiv.innerHTML = "Failed to start application";
statusDiv.innerHTML = 'Failed to start application';
console.log(e); console.log(e);
} }
</script> </script>
</body> </body>
</html> </html>

44
relay-reactjs-chat/craco.config.js
View File

@ -1,26 +1,28 @@
const {getLoaders, loaderByName} = require("@craco/craco"); const { getLoaders, loaderByName } = require("@craco/craco");
module.exports = { module.exports = {
webpack: { webpack: {
configure: (webpackConfig) => { configure: (webpackConfig) => {
const {hasFoundAny, matches} = getLoaders(webpackConfig, loaderByName("babel-loader")); const { hasFoundAny, matches } = getLoaders(
webpackConfig,
loaderByName("babel-loader")
);
if (hasFoundAny) { if (hasFoundAny) {
matches.forEach(c => { matches.forEach((c) => {
// Modify test to include cjs for @chainsafe/libp2p-gossipsub rpc module // Modify test to include cjs for @chainsafe/libp2p-gossipsub rpc module
if (c.loader.test.toString().includes("mjs")) { if (c.loader.test.toString().includes("mjs")) {
// If your project uses typescript then do not forget to include `ts`/`tsx` // If your project uses typescript then do not forget to include `ts`/`tsx`
if (c.loader.test.toString().includes('jsx')) { if (c.loader.test.toString().includes("jsx")) {
c.loader.test = /\.(js|cjs|mjs|jsx)$/ c.loader.test = /\.(js|cjs|mjs|jsx)$/;
} else { } else {
c.loader.test = /\.(js|cjs|mjs)$/ c.loader.test = /\.(js|cjs|mjs)$/;
}
}
});
} }
}
});
}
return webpackConfig; return webpackConfig;
} },
} },
} };

6
relay-reactjs-chat/src/App.test.js
View File

@ -1,7 +1,7 @@
import { render, screen } from '@testing-library/react'; import { render, screen } from "@testing-library/react";
import App from './App'; import App from "./App";
test('renders learn react link', () => { test("renders learn react link", () => {
render(<App />); render(<App />);
const linkElement = screen.getByText(/learn react/i); const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument(); expect(linkElement).toBeInTheDocument();

6
relay-reactjs-chat/src/index.css
View File

@ -1,13 +1,13 @@
body { body {
margin: 0; margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif; sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
code { code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace; monospace;
} }

10
relay-reactjs-chat/src/index.js
View File

@ -1,9 +1,9 @@
import React from 'react'; import React from "react";
import ReactDOM from 'react-dom/client'; import ReactDOM from "react-dom/client";
import './index.css'; import "./index.css";
import App from './App'; import App from "./App";
const root = ReactDOM.createRoot(document.getElementById('root')); const root = ReactDOM.createRoot(document.getElementById("root"));
root.render( root.render(
<React.StrictMode> <React.StrictMode>
<App /> <App />

2
relay-reactjs-chat/src/setupTests.js
View File

@ -2,4 +2,4 @@
// allows you to do things like: // allows you to do things like:
// expect(element).toHaveTextContent(/react/i) // expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom // learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom'; import "@testing-library/jest-dom";

679
rln-js/index.html
View File

@ -1,457 +1,524 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang='en'> <html lang="en">
<head>
<head> <meta charset="UTF-8" />
<meta charset='UTF-8'/> <meta content="width=device-width, initial-scale=1.0" name="viewport" />
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
<title>JS-Waku light node example</title> <title>JS-Waku light node example</title>
<link href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css" rel="stylesheet"> <link
<link href="style.css" rel="stylesheet"> href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"
</head> rel="stylesheet"
/>
<link href="style.css" rel="stylesheet" />
</head>
<body> <body>
<div class="row rcenter">
<h1>Waku RLN</h1>
<button id="connect-wallet" type="button">Connect Wallet</button>
</div>
<div class="row rcenter"> <span id="status"></span>
<h1>Waku RLN</h1>
<button id='connect-wallet' type='button'>Connect Wallet</button>
</div>
<span id='status'></span> <h2 class="mu1">Blockchain</h2>
<hr />
<h2 class="mu1">Blockchain</h2> <div class="row rcenter">
<hr/> <h4>Address</h4>
<code class="value" id="address"></code>
</div>
<div class="row rcenter"> <div class="row mu1 rcenter">
<h4>Address</h4> <h4>Contract Data</h4>
<code class="value" id="address"></code> <button disabled id="retrieve-rln-details" type="button">
</div>
<div class="row mu1 rcenter">
<h4>Contract Data</h4>
<button disabled id='retrieve-rln-details' type='button'>
Retrieve contract state from blockchain Retrieve contract state from blockchain
</button> </button>
</div> </div>
<div class="row rcenter"> <div class="row rcenter">
<h4>Latest membership id on contract</h4> <h4>Latest membership id on contract</h4>
<code class="value" id="latest-membership-id">Not loaded yet</code> <code class="value" id="latest-membership-id">Not loaded yet</code>
</div> </div>
<h2 class="mu1">Credentials</h2>
<hr />
<h2 class="mu1">Credentials</h2> <div class="row">
<hr/> <div class="w50">
<div class="row">
<div class="w50">
<h4>You can either generate new credentials:</h4> <h4>You can either generate new credentials:</h4>
<button disabled id='generate-credentials' type='button'>Generate RLN Credentials</button> <button disabled id="generate-credentials" type="button">
<br/> Generate RLN Credentials
<br/> </button>
<button disabled id='register-button' type='button'>Register Credentials in Contract</button> <br />
</div> <br />
<div class="w50"> <button disabled id="register-button" type="button">
Register Credentials in Contract
</button>
</div>
<div class="w50">
<h4>Or import existing ones:</h4> <h4>Or import existing ones:</h4>
<label for="membership-id">Membership ID (your index in the RLN smart contract):</label> <label for="membership-id"
<input id="membership-id" name="membership-id" type="text"/> >Membership ID (your index in the RLN smart contract):</label
>
<input id="membership-id" name="membership-id" type="text" />
<label for="id-key">RLN Identity Key (hex string):</label> <label for="id-key">RLN Identity Key (hex string):</label>
<input id="id-key" name="id-key" type="text"/> <input id="id-key" name="id-key" type="text" />
<label for="commitment-key">RLN Commitment Key (hex string):</label> <label for="commitment-key">RLN Commitment Key (hex string):</label>
<input id="commitment-key" name="commitment-key" type="text"/> <input id="commitment-key" name="commitment-key" type="text" />
<button disabled id='import-button' type='button'>Import RLN Credentials</button> <button disabled id="import-button" type="button">
Import RLN Credentials
</button>
</div>
</div>
<div class="row rcenter mu1">
<h4>Membership id</h4>
<code class="value" id="id">none</code>
</div>
<div class="row rcenter">
<h4>Key</h4>
<code class="value" id="key">none</code>
</div>
<div class="row rcenter">
<h4>Commitment</h4>
<code class="value" id="commitment">none</code>
</div> </div>
</div>
<div class="row rcenter mu1">
<h4>Membership id</h4>
<code class="value" id="id">none</code>
</div>
<div class="row rcenter">
<h4>Key</h4>
<code class="value" id="key">none</code>
</div>
<div class="row rcenter">
<h4>Commitment</h4>
<code class="value" id="commitment">none</code>
</div>
<h2 class="mu1">Waku</h2>
<hr />
<div id="waku-status"></div>
<h2 class="mu1">Waku</h2> <div class="row rcenter mu1 mf">
<hr/> <label for="remote-multiaddr">Remote peer's multiaddr</label>
<div id="waku-status"></div> <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>
</div>
<div class="row rcenter mu1 mf"> <div class="row rcenter mf">
<label for='remote-multiaddr'>Remote peer's multiaddr</label> <label for="nick-input">Your nickname</label>
<input id='remote-multiaddr' <input
type='text' class="p100"
value="/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm"> id="nick-input"
<button disabled id='dial' type='button'>Dial</button> placeholder="Choose a nickname"
</div> type="text"
/>
</div>
<div class="row rcenter mf"> <div class="row rcenter mf">
<label for='nick-input'>Your nickname</label> <label for="textInput">Message text</label>
<input class="p100" id='nick-input' placeholder='Choose a nickname' type='text'> <input
</div> class="p100"
disabled
id="textInput"
placeholder="Type your message here"
type="text"
/>
<button disabled id="sendButton" type="button">
Send message using Light Push
</button>
</div>
<span id="sending-status"></span>
<div class="row rcenter mf"> <h4 class="mu1">Messages</h4>
<label for='textInput'>Message text</label> <div id="messages"></div>
<input class="p100" disabled id='textInput' placeholder='Type your message here' type='text'>
<button disabled id='sendButton' type='button'>Send message using Light Push</button>
</div>
<span id='sending-status'></span>
<h4 class="mu1">Messages</h4> <script type="module">
<div id="messages"></div> import { utils } from "https://unpkg.com/js-waku@0.30.0/bundle/index.js";
import { createLightNode } from "https://unpkg.com/js-waku@0.30.0/bundle/lib/create_waku.js";
<script type='module'> import { waitForRemotePeer } from "https://unpkg.com/js-waku@0.30.0/bundle/lib/wait_for_remote_peer.js";
import {utils} from 'https://unpkg.com/js-waku@0.30.0/bundle/index.js'; import {
import {createLightNode} from 'https://unpkg.com/js-waku@0.30.0/bundle/lib/create_waku.js'
import {waitForRemotePeer} from 'https://unpkg.com/js-waku@0.30.0/bundle/lib/wait_for_remote_peer.js'
import {
EncoderV0, EncoderV0,
DecoderV0 DecoderV0,
} from 'https://unpkg.com/js-waku@0.30.0/bundle/lib/waku_message/version_0.js' } from "https://unpkg.com/js-waku@0.30.0/bundle/lib/waku_message/version_0.js";
import {protobuf} from "https://taisukef.github.io/protobuf-es.js/dist/protobuf-es.js"; import { protobuf } from "https://taisukef.github.io/protobuf-es.js/dist/protobuf-es.js";
import { import {
create, create,
MembershipKey, MembershipKey,
RLNDecoder, RLNDecoder,
RLNEncoder RLNEncoder,
} from "https://unpkg.com/@waku/rln@0.0.12-6875952/bundle/index.js"; } from "https://unpkg.com/@waku/rln@0.0.12-6875952/bundle/index.js";
import {ethers} from "https://unpkg.com/ethers@5.7.2/dist/ethers.esm.min.js" import { ethers } from "https://unpkg.com/ethers@5.7.2/dist/ethers.esm.min.js";
const statusSpan = document.getElementById('status') const statusSpan = document.getElementById("status");
// Blockchain Elements // Blockchain Elements
const addressDiv = document.getElementById('address'); const addressDiv = document.getElementById("address");
const connectWalletButton = document.getElementById('connect-wallet'); const connectWalletButton = document.getElementById("connect-wallet");
const latestMembershipSpan = document.getElementById('latest-membership-id') const latestMembershipSpan = document.getElementById(
const retrieveRLNDetailsButton = document.getElementById('retrieve-rln-details') "latest-membership-id"
);
const retrieveRLNDetailsButton = document.getElementById(
"retrieve-rln-details"
);
// Credentials Elements // Credentials Elements
const generateCredsButton = document.getElementById('generate-credentials') const generateCredsButton = document.getElementById(
"generate-credentials"
);
const membershipIdInput = document.getElementById('membership-id') const membershipIdInput = document.getElementById("membership-id");
const identityKeyInput = document.getElementById('id-key') const identityKeyInput = document.getElementById("id-key");
const commitmentKeyInput = document.getElementById('commitment-key') const commitmentKeyInput = document.getElementById("commitment-key");
const importButton = document.getElementById('import-button') const importButton = document.getElementById("import-button");
const idDiv = document.getElementById('id'); const idDiv = document.getElementById("id");
const keyDiv = document.getElementById('key'); const keyDiv = document.getElementById("key");
const commitmentDiv = document.getElementById('commitment'); const commitmentDiv = document.getElementById("commitment");
const registerButton = document.getElementById('register-button'); const registerButton = document.getElementById("register-button");
// Waku Elements // Waku Elements
const statusDiv = document.getElementById('waku-status'); const statusDiv = document.getElementById("waku-status");
const remoteMultiAddrInput = document.getElementById('remote-multiaddr') const remoteMultiAddrInput = document.getElementById("remote-multiaddr");
const dialButton = document.getElementById('dial') const dialButton = document.getElementById("dial");
const nicknameInput = document.getElementById('nick-input') const nicknameInput = document.getElementById("nick-input");
const textInput = document.getElementById('textInput'); const textInput = document.getElementById("textInput");
const sendButton = document.getElementById('sendButton'); const sendButton = document.getElementById("sendButton");
const sendingStatusSpan = document.getElementById('sending-status'); const sendingStatusSpan = document.getElementById("sending-status");
const messagesDiv = document.getElementById('messages') const messagesDiv = document.getElementById("messages");
let membershipId, membershipKey, encoder, node, nodeConnected, rlnInstance; let membershipId,
let retrievedRLNEvents = false; membershipKey,
const rlnInstancePromise = create(); encoder,
node,
nodeConnected,
rlnInstance;
let retrievedRLNEvents = false;
const rlnInstancePromise = create();
// Load zero-kit WASM blob. // Load zero-kit WASM blob.
statusSpan.innerText = 'WASM Blob download in progress...' statusSpan.innerText = "WASM Blob download in progress...";
rlnInstancePromise.then((_rlnInstance) => { rlnInstancePromise.then((_rlnInstance) => {
rlnInstance = _rlnInstance rlnInstance = _rlnInstance;
statusSpan.innerText = 'WASM Blob download in progress... done!' statusSpan.innerText = "WASM Blob download in progress... done!";
updateFields() updateFields();
}) });
const ContentTopic = "/toy-chat/2/luzhou/proto"; const ContentTopic = "/toy-chat/2/luzhou/proto";
// Protobuf // Protobuf
const ProtoChatMessage = new protobuf.Type("ChatMessage") const ProtoChatMessage = new protobuf.Type("ChatMessage")
.add(new protobuf.Field("timestamp", 1, "uint64")) .add(new protobuf.Field("timestamp", 1, "uint64"))
.add(new protobuf.Field("nick", 2, "string")) .add(new protobuf.Field("nick", 2, "string"))
.add(new protobuf.Field("text", 3, "bytes")); .add(new protobuf.Field("text", 3, "bytes"));
// Function to update the fields to guide the user by disabling buttons. // Function to update the fields to guide the user by disabling buttons.
const updateFields = () => { const updateFields = () => {
if (membershipKey) { if (membershipKey) {
keyDiv.innerHTML = utils.bytesToHex(membershipKey.IDKey) keyDiv.innerHTML = utils.bytesToHex(membershipKey.IDKey);
commitmentDiv.innerHTML = utils.bytesToHex(membershipKey.IDCommitment) commitmentDiv.innerHTML = utils.bytesToHex(
idDiv.innerHTML = membershipId || "not registered yet" membershipKey.IDCommitment
);
idDiv.innerHTML = membershipId || "not registered yet";
if (membershipId && rlnInstance) { if (membershipId && rlnInstance) {
encoder = new RLNEncoder( encoder = new RLNEncoder(
new EncoderV0(ContentTopic), new EncoderV0(ContentTopic),
rlnInstance, rlnInstance,
membershipId, membershipId,
membershipKey membershipKey
); );
} }
} }
generateCredsButton.disabled = !rlnInstance generateCredsButton.disabled = !rlnInstance;
registerButton.disabled = !(membershipKey && retrievedRLNEvents && !membershipId) registerButton.disabled = !(
membershipKey &&
retrievedRLNEvents &&
!membershipId
);
importButton.disabled = !(membershipIdInput.value importButton.disabled = !(
&& identityKeyInput.value membershipIdInput.value &&
&& commitmentKeyInput.value); identityKeyInput.value &&
commitmentKeyInput.value
);
const readyToSend = (membershipKey && membershipId && nodeConnected && nicknameInput.value) const readyToSend =
membershipKey && membershipId && nodeConnected && nicknameInput.value;
textInput.disabled = !readyToSend; textInput.disabled = !readyToSend;
sendButton.disabled = !readyToSend; sendButton.disabled = !readyToSend;
dialButton.disabled = !(node && node.isStarted() && retrievedRLNEvents) dialButton.disabled = !(node && node.isStarted() && retrievedRLNEvents);
retrieveRLNDetailsButton.disabled = !rlnInstance || retrievedRLNEvents; retrieveRLNDetailsButton.disabled = !rlnInstance || retrievedRLNEvents;
} };
// Blockchain // Blockchain
generateCredsButton.onclick = () => { generateCredsButton.onclick = () => {
membershipKey = rlnInstance.generateMembershipKey() membershipKey = rlnInstance.generateMembershipKey();
updateFields(); updateFields();
} };
membershipIdInput.onchange = updateFields; membershipIdInput.onchange = updateFields;
identityKeyInput.onchange = updateFields; identityKeyInput.onchange = updateFields;
commitmentKeyInput.onchange = updateFields; commitmentKeyInput.onchange = updateFields;
importButton.onclick = () => { importButton.onclick = () => {
const idKey = utils.hexToBytes(identityKeyInput.value) const idKey = utils.hexToBytes(identityKeyInput.value);
const idCommitment = utils.hexToBytes(commitmentKeyInput.value) const idCommitment = utils.hexToBytes(commitmentKeyInput.value);
membershipKey = new MembershipKey(idKey, idCommitment) membershipKey = new MembershipKey(idKey, idCommitment);
membershipId = membershipIdInput.value; membershipId = membershipIdInput.value;
updateFields() updateFields();
} };
const checkChain = async (chainId) => { const checkChain = async (chainId) => {
retrieveRLNDetailsButton.disabled = retrievedRLNEvents || chainId !== 5; retrieveRLNDetailsButton.disabled = retrievedRLNEvents || chainId !== 5;
registerButton.disabled = !(chainId === 5 && retrievedRLNEvents); registerButton.disabled = !(chainId === 5 && retrievedRLNEvents);
if (chainId !== 5) { if (chainId !== 5) {
alert("Switch to Goerli") alert("Switch to Goerli");
} }
} };
const rlnDeployBlk = 7109391; const rlnDeployBlk = 7109391;
const rlnAddress = "0x4252105670fe33d2947e8ead304969849e64f2a6"; const rlnAddress = "0x4252105670fe33d2947e8ead304969849e64f2a6";
const rlnAbi = [ const rlnAbi = [
"function MEMBERSHIP_DEPOSIT() public view returns(uint256)", "function MEMBERSHIP_DEPOSIT() public view returns(uint256)",
"function register(uint256 pubkey) external payable", "function register(uint256 pubkey) external payable",
"function withdraw(uint256 secret, uint256 _pubkeyIndex, address payable receiver) external", "function withdraw(uint256 secret, uint256 _pubkeyIndex, address payable receiver) external",
"event MemberRegistered(uint256 pubkey, uint256 index)", "event MemberRegistered(uint256 pubkey, uint256 index)",
"event MemberWithdrawn(uint256 pubkey, uint256 index)" "event MemberWithdrawn(uint256 pubkey, uint256 index)",
]; ];
const provider = new ethers.providers.Web3Provider(window.ethereum, "any"); const provider = new ethers.providers.Web3Provider(
window.ethereum,
"any"
);
let accounts; let accounts;
let rlnContract; let rlnContract;
const handleMembership = (pubkey, index) => { const handleMembership = (pubkey, index) => {
try { try {
const idCommitment = ethers.utils.zeroPad(ethers.utils.arrayify(pubkey), 32); const idCommitment = ethers.utils.zeroPad(
rlnInstance.insertMember(idCommitment); ethers.utils.arrayify(pubkey),
const indexInt = index.toNumber() 32
if (!latestMembershipSpan.innerText || indexInt > latestMembershipSpan.innerText) { );
latestMembershipSpan.innerText = indexInt rlnInstance.insertMember(idCommitment);
} const indexInt = index.toNumber();
console.debug("IDCommitment registered in tree", idCommitment, indexInt); if (
latestMembershipSpan.innerHTML = indexInt; !latestMembershipSpan.innerText ||
indexInt > latestMembershipSpan.innerText
) {
latestMembershipSpan.innerText = indexInt;
}
console.debug(
"IDCommitment registered in tree",
idCommitment,
indexInt
);
latestMembershipSpan.innerHTML = indexInt;
} catch (err) { } catch (err) {
console.error(err); // TODO: the merkle tree can be in a wrong state. The app should be disabled console.error(err); // TODO: the merkle tree can be in a wrong state. The app should be disabled
} }
} };
const setAccounts = acc => { const setAccounts = (acc) => {
accounts = acc; accounts = acc;
addressDiv.innerHTML = accounts.length ? accounts[0] : ""; addressDiv.innerHTML = accounts.length ? accounts[0] : "";
} };
connectWalletButton.onclick = async () => { connectWalletButton.onclick = async () => {
try { try {
accounts = await provider.send("eth_requestAccounts", []); accounts = await provider.send("eth_requestAccounts", []);
setAccounts(accounts); setAccounts(accounts);
const network = await provider.getNetwork(); const network = await provider.getNetwork();
checkChain(network.chainId); checkChain(network.chainId);
} catch (e) { } catch (e) {
console.log("No web3 provider available", e); console.log("No web3 provider available", e);
} }
}; };
retrieveRLNDetailsButton.onclick = async () => { retrieveRLNDetailsButton.onclick = async () => {
rlnContract = new ethers.Contract(rlnAddress, rlnAbi, provider); rlnContract = new ethers.Contract(rlnAddress, rlnAbi, provider);
const filter = rlnContract.filters.MemberRegistered() const filter = rlnContract.filters.MemberRegistered();
// populating merkle tree: // populating merkle tree:
const alreadyRegisteredMembers = await rlnContract.queryFilter(filter, rlnDeployBlk) const alreadyRegisteredMembers = await rlnContract.queryFilter(
alreadyRegisteredMembers.forEach(event => { filter,
handleMembership(event.args.pubkey, event.args.index, event); rlnDeployBlk
);
alreadyRegisteredMembers.forEach((event) => {
handleMembership(event.args.pubkey, event.args.index, event);
}); });
retrievedRLNEvents = true; retrievedRLNEvents = true;
// reacting to new registrations // reacting to new registrations
rlnContract.on(filter, (pubkey, index, event) => { rlnContract.on(filter, (pubkey, index, event) => {
handleMembership(event.args.pubkey, event.args.index, event); handleMembership(event.args.pubkey, event.args.index, event);
}); });
updateFields() updateFields();
} };
window.ethereum.on('accountsChanged', setAccounts); window.ethereum.on("accountsChanged", setAccounts);
window.ethereum.on('chainChanged', chainId => { window.ethereum.on("chainChanged", (chainId) => {
checkChain(parseInt(chainId, 16)); checkChain(parseInt(chainId, 16));
}); });
registerButton.onclick = async () => { registerButton.onclick = async () => {
try { try {
registerButton.disabled = true; registerButton.disabled = true;
const pubkey = ethers.BigNumber.from(membershipKey.IDCommitment); const pubkey = ethers.BigNumber.from(membershipKey.IDCommitment);
const price = await rlnContract.MEMBERSHIP_DEPOSIT(); const price = await rlnContract.MEMBERSHIP_DEPOSIT();
const signer = provider.getSigner() const signer = provider.getSigner();
const rlnContractWithSigner = rlnContract.connect(signer); const rlnContractWithSigner = rlnContract.connect(signer);
const txResponse = await rlnContractWithSigner.register(pubkey, {value: price}); const txResponse = await rlnContractWithSigner.register(pubkey, {
console.log("Transaction broadcasted:", txResponse); value: price,
});
console.log("Transaction broadcasted:", txResponse);
const txReceipt = await txResponse.wait(); const txReceipt = await txResponse.wait();
console.log("Transaction receipt", txReceipt); console.log("Transaction receipt", txReceipt);
// Update membershipId // Update membershipId
membershipId = txReceipt.events[0].args.index.toNumber(); membershipId = txReceipt.events[0].args.index.toNumber();
console.log("Obtained index for current membership credentials", membershipId); console.log(
updateFields(); "Obtained index for current membership credentials",
registerButton.disabled = false; membershipId
);
updateFields();
registerButton.disabled = false;
} catch (err) { } catch (err) {
alert(err); alert(err);
registerButton.disabled = false; registerButton.disabled = false;
} }
};
} // Waku
nicknameInput.onchange = updateFields;
nicknameInput.onblur = updateFields;
// Waku let messages = [];
nicknameInput.onchange = updateFields
nicknameInput.onblur = updateFields;
let messages = []; const updateMessages = () => {
messagesDiv.innerHTML = "<ul>";
messages.forEach((msg) => {
messagesDiv.innerHTML += `<li>${msg.msg} - [epoch: ${msg.epoch}, proof: ${msg.proofState} ]</li>`;
const updateMessages = () => { if (msg.proofState === "verifying...") {
messagesDiv.innerHTML = "<ul>" try {
messages.forEach(msg => { console.log("Verifying proof without roots");
messagesDiv.innerHTML += `<li>${msg.msg} - [epoch: ${msg.epoch}, proof: ${msg.proofState} ]</li>` console.time("proof_verify_timer");
const res = msg.verifyNoRoot();
if (msg.proofState === "verifying...") { console.timeEnd("proof_verify_timer");
try { console.log("proof verified without roots", res);
console.log("Verifying proof without roots") if (res === undefined) {
console.time("proof_verify_timer") msg.proofState = "no proof attached";
const res = msg.verifyNoRoot() } else if (res) {
console.timeEnd("proof_verify_timer") msg.proofState = "verified.";
console.log("proof verified without roots", res) } else {
if (res === undefined) { msg.proofState = "invalid!";
msg.proofState = "no proof attached" }
} else if (res) { } catch (e) {
msg.proofState = "verified." msg.proofState = "Error encountered, check console";
} else { console.error("Error verifying proof:", e);
msg.proofState = "invalid!"
}
} catch (e) {
msg.proofState = "Error encountered, check console"
console.error("Error verifying proof:", e)
}
updateMessages()
console.log("Verifying proof with roots", msg.verify())
} }
}) updateMessages();
messagesDiv.innerHTML += "</ul>" console.log("Verifying proof with roots", msg.verify());
} }
});
messagesDiv.innerHTML += "</ul>";
};
const callback = (wakuMessage) => { const callback = (wakuMessage) => {
const {timestamp, nick, text} = ProtoChatMessage.decode(wakuMessage.payload) const { timestamp, nick, text } = ProtoChatMessage.decode(
wakuMessage.payload
);
const time = new Date(); const time = new Date();
time.setTime(Number(timestamp) * 1000); time.setTime(Number(timestamp) * 1000);
let proofState, verify, verifyNoRoot; let proofState, verify, verifyNoRoot;
if (typeof wakuMessage.rateLimitProof === "undefined") { if (typeof wakuMessage.rateLimitProof === "undefined") {
proofState = "no proof attached"; proofState = "no proof attached";
} else { } else {
console.log("Proof received:", wakuMessage.rateLimitProof) console.log("Proof received:", wakuMessage.rateLimitProof);
verify = wakuMessage.verify.bind(wakuMessage); verify = wakuMessage.verify.bind(wakuMessage);
verifyNoRoot = wakuMessage.verifyNoRoot.bind(wakuMessage); verifyNoRoot = wakuMessage.verifyNoRoot.bind(wakuMessage);
proofState = "verifying..."; proofState = "verifying...";
} }
messages.push({ messages.push({
msg: `(${nick}) <strong>${utils.bytesToUtf8(text)}</strong> <i>[${time.toISOString()}]</i>`, msg: `(${nick}) <strong>${utils.bytesToUtf8(
epoch: wakuMessage.epoch, text
verify, )}</strong> <i>[${time.toISOString()}]</i>`,
verifyNoRoot, epoch: wakuMessage.epoch,
proofState verify,
verifyNoRoot,
proofState,
}); });
updateMessages() updateMessages();
} };
(async () => {
(async () => { statusDiv.innerHTML = "<p>Creating Waku node.</p>";
statusDiv.innerHTML = '<p>Creating Waku node.</p>';
node = await createLightNode(); node = await createLightNode();
statusDiv.innerHTML = '<p>Starting Waku node.</p>'; statusDiv.innerHTML = "<p>Starting Waku node.</p>";
await node.start(); await node.start();
statusDiv.innerHTML = '<p>Waku node started.</p>'; statusDiv.innerHTML = "<p>Waku node started.</p>";
updateFields() updateFields();
})() })();
dialButton.onclick = async () => { dialButton.onclick = async () => {
const ma = remoteMultiAddrInput.value const ma = remoteMultiAddrInput.value;
if (!ma) { if (!ma) {
statusDiv.innerHTML = '<p>Error: No multiaddr provided.</p>'; statusDiv.innerHTML = "<p>Error: No multiaddr provided.</p>";
return; return;
} }
statusDiv.innerHTML = '<p>Dialing peer.</p>'; statusDiv.innerHTML = "<p>Dialing peer.</p>";
await node.dial(ma, ["filter", "lightpush"]) await node.dial(ma, ["filter", "lightpush"]);
await waitForRemotePeer(node, ["filter", "lightpush"]); await waitForRemotePeer(node, ["filter", "lightpush"]);
statusDiv.innerHTML = '<p>Waku node connected.</p>'; statusDiv.innerHTML = "<p>Waku node connected.</p>";
await rlnInstancePromise; await rlnInstancePromise;
const decoder = new RLNDecoder(rlnInstance, new DecoderV0(ContentTopic)); const decoder = new RLNDecoder(
await node.filter.subscribe([decoder], callback) rlnInstance,
statusDiv.innerHTML = '<p>Waku node subscribed.</p>'; new DecoderV0(ContentTopic)
);
await node.filter.subscribe([decoder], callback);
statusDiv.innerHTML = "<p>Waku node subscribed.</p>";
nodeConnected = true; nodeConnected = true;
updateFields() updateFields();
} };
sendButton.onclick = async () => { sendButton.onclick = async () => {
const text = utils.utf8ToBytes(textInput.value); const text = utils.utf8ToBytes(textInput.value);
const timestamp = new Date(); const timestamp = new Date();
const msg = ProtoChatMessage.create({ const msg = ProtoChatMessage.create({
text, text,
nick: nicknameInput.value, nick: nicknameInput.value,
timestamp: Math.floor(timestamp.valueOf() / 1000) timestamp: Math.floor(timestamp.valueOf() / 1000),
}); });
const payload = ProtoChatMessage.encode(msg).finish(); const payload = ProtoChatMessage.encode(msg).finish();
console.log("Sending message with proof...") console.log("Sending message with proof...");
sendingStatusSpan.innerText = 'sending...' sendingStatusSpan.innerText = "sending...";
await node.lightPush.push(encoder, {payload, timestamp}); await node.lightPush.push(encoder, { payload, timestamp });
sendingStatusSpan.innerText = 'sent!' sendingStatusSpan.innerText = "sent!";
console.log("Message sent!") console.log("Message sent!");
textInput.value = null; textInput.value = null;
setTimeout(() => { setTimeout(() => {
sendingStatusSpan.innerText = '' sendingStatusSpan.innerText = "";
}, 5000) }, 5000);
}; };
</script> </script>
</body> </body>
</html> </html>

91
store-js/index.html
View File

@ -1,62 +1,65 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang='en'> <html lang="en">
<head>
<head> <meta charset="UTF-8" />
<meta charset='UTF-8'/> <meta content="width=device-width, initial-scale=1.0" name="viewport" />
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
<title>JS-Waku store script tag example</title> <title>JS-Waku store script tag example</title>
</head> </head>
<body> <body>
<div><h1>Timestamp of the latest message seen in store</h1></div>
<div id="timestamp"></div>
<div><h1>Timestamp of the latest message seen in store</h1></div> <script type="module">
<div id='timestamp'></div> import {
defaultLibp2p,
defaultPeerDiscovery,
} 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 {
wakuStore,
WakuNode,
} from "https://unpkg.com/@waku/core@0.0.6/bundle/index.js";
import { DecoderV0 } from "https://unpkg.com/@waku/core@0.0.6/bundle/lib/waku_message/version_0.js";
<script type='module'> /**
import {defaultLibp2p, defaultPeerDiscovery} from 'https://unpkg.com/@waku/create@0.0.4/bundle/index.js' * This example demonstrates how to use the js-waku minified bundle
import {waitForRemotePeer} from 'https://unpkg.com/@waku/core@0.0.6/bundle/lib/wait_for_remote_peer.js' * available on unpkg.com.
import {wakuStore, WakuNode} from 'https://unpkg.com/@waku/core@0.0.6/bundle/index.js' *
import {DecoderV0} from 'https://unpkg.com/@waku/core@0.0.6/bundle/lib/waku_message/version_0.js' * It is a simple script that uses Waku Store to retrieve ping relay messages
* and displays the timestamp of the most recent ping relay message.
*/
const timestampDiv = document.getElementById("timestamp");
/** timestampDiv.innerHTML = "<p>Creating waku.</p>";
* This example demonstrates how to use the js-waku minified bundle
* available on unpkg.com.
*
* It is a simple script that uses Waku Store to retrieve ping relay messages
* and displays the timestamp of the most recent ping relay message.
*/
const timestampDiv = document.getElementById('timestamp');
timestampDiv.innerHTML = '<p>Creating waku.</p>'; const libp2p = await defaultLibp2p(undefined, {
peerDiscovery: [defaultPeerDiscovery()],
});
const store = wakuStore();
const node = new WakuNode({}, libp2p, store);
const libp2p = await defaultLibp2p( timestampDiv.innerHTML = "<p>Starting waku.</p>";
undefined, await node.start();
{peerDiscovery: [defaultPeerDiscovery()]},
);
const store = wakuStore();
const node = new WakuNode({}, libp2p, store,);
timestampDiv.innerHTML = '<p>Starting waku.</p>'; timestampDiv.innerHTML = "<p>Connecting to a peer.</p>";
await node.start(); await waitForRemotePeer(node, ["store"]);
timestampDiv.innerHTML = '<p>Connecting to a peer.</p>'; timestampDiv.innerHTML = "<p>Retrieving messages.</p>";
await waitForRemotePeer(node, ["store"]); const callback = (wakuMessage) => {
timestampDiv.innerHTML = '<p>Retrieving messages.</p>';
const callback = (wakuMessage) => {
// When `backward` direction is passed, first message is the most recent // When `backward` direction is passed, first message is the most recent
timestampDiv.innerHTML = wakuMessage.timestamp; timestampDiv.innerHTML = wakuMessage.timestamp;
// When returning true, `queryHistory` stops retrieving pages // When returning true, `queryHistory` stops retrieving pages
// In our case, we only want one message, hence one page. // In our case, we only want one message, hence one page.
return true; return true;
}; };
await node.store
.queryOrderedCallback([new DecoderV0("/relay-ping/1/ping/null")],
callback,
{pageDirection: 'backward'});
</script>
</body>
await node.store.queryOrderedCallback(
[new DecoderV0("/relay-ping/1/ping/null")],
callback,
{ pageDirection: "backward" }
);
</script>
</body>
</html> </html>

8
store-reactjs-chat/src/App.js
View File

@ -1,9 +1,9 @@
import * as React from "react"; import * as React from "react";
import protobuf from "protobufjs"; import protobuf from "protobufjs";
import {createLightNode} from "@waku/create"; import { createLightNode } from "@waku/create";
import {waitForRemotePeer} from "@waku/core/lib/wait_for_remote_peer"; import { waitForRemotePeer } from "@waku/core/lib/wait_for_remote_peer";
import {DecoderV0} from "@waku/core/lib/waku_message/version_0"; import { DecoderV0 } from "@waku/core/lib/waku_message/version_0";
import {bytesToUtf8} from "@waku/byte-utils" import { bytesToUtf8 } from "@waku/byte-utils";
const ContentTopic = "/toy-chat/2/huilong/proto"; const ContentTopic = "/toy-chat/2/huilong/proto";
const Decoder = new DecoderV0(ContentTopic); const Decoder = new DecoderV0(ContentTopic);

6
store-reactjs-chat/src/App.test.js
View File

@ -1,7 +1,7 @@
import { render, screen } from '@testing-library/react'; import { render, screen } from "@testing-library/react";
import App from './App'; import App from "./App";
test('renders learn react link', () => { test("renders learn react link", () => {
render(<App />); render(<App />);
const linkElement = screen.getByText(/learn react/i); const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument(); expect(linkElement).toBeInTheDocument();

6
store-reactjs-chat/src/index.css
View File

@ -1,13 +1,13 @@
body { body {
margin: 0; margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif; sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
code { code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace; monospace;
} }

2
store-reactjs-chat/src/setupTests.js
View File

@ -2,4 +2,4 @@
// allows you to do things like: // allows you to do things like:
// expect(element).toHaveTextContent(/react/i) // expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom // learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom'; import "@testing-library/jest-dom";

8
web-chat/public/index.html
View File

@ -4,11 +4,11 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" /> <link
<meta rel="stylesheet"
name="description" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
content="Chat app powered by js-waku"
/> />
<meta name="description" content="Chat app powered by js-waku" />
<!-- <!--
manifest.json provides metadata used when your web app is installed on a manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

8
web-chat/src/index.css
View File

@ -2,15 +2,15 @@
body { body {
margin: 0; margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif; sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
code { code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace; monospace;
} }
@ -25,6 +25,6 @@ code {
display: table; display: table;
} }
.chat-room{ .chat-room {
margin: 2px; margin: 2px;
} }