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

Merge branch 'master' into danisharora/credentials-from-wallet

Browse Source
This commit is contained in:
Danish Arora 2022-12-12 10:30:14 +05:30 committed by GitHub
commit 561eb60a57
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
39 changed files with 1910 additions and 414 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";

6
rln-js/index.html
View File

@ -83,6 +83,7 @@
<div class="row rcenter"> <div class="row rcenter">
<h4>Key</h4> <h4>Key</h4>
<code class="value" id="key">none</code> <code class="value" id="key">none</code>
</div> </div>
<div class="row rcenter"> <div class="row rcenter">
<h4>Commitment</h4> <h4>Commitment</h4>
@ -203,6 +204,7 @@
node, node,
nodeConnected, nodeConnected,
rlnInstance; rlnInstance;
const allMemberships = []; const allMemberships = [];
let retrievedRLNEvents = false; let retrievedRLNEvents = false;
const rlnInstancePromise = create(); const rlnInstancePromise = create();
@ -252,6 +254,7 @@
); );
importManually.disabled = !( importManually.disabled = !(
membershipIdInput.value && membershipIdInput.value &&
identityKeyInput.value && identityKeyInput.value &&
commitmentKeyInput.value commitmentKeyInput.value
@ -287,6 +290,7 @@
commitmentKeyInput.onchange = updateFields; commitmentKeyInput.onchange = updateFields;
importManually.onclick = () => { importManually.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);
@ -345,6 +349,7 @@
const handleMembership = (pubkey, index) => { const handleMembership = (pubkey, index) => {
try { try {
allMemberships.push({ pubkey, index }); allMemberships.push({ pubkey, index });
const idCommitment = ethers.utils.zeroPad( const idCommitment = ethers.utils.zeroPad(
ethers.utils.arrayify(pubkey), ethers.utils.arrayify(pubkey),
32 32
@ -381,6 +386,7 @@
checkChain(network.chainId); checkChain(network.chainId);
importFromWalletButton.disabled = false; importFromWalletButton.disabled = false;
} catch (e) { } catch (e) {
console.log("No web3 provider available", e); console.log("No web3 provider available", e);
} }

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;
} }