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

Updates

Browse Source
This commit is contained in:
status-im-auto 2022-12-12 04:59:35 +00:00 committed by Jenkins
parent b14cdf9411
commit 29d024e08b
11 changed files with 603 additions and 514 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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>

18
relay-angular-chat/index.html
View File

@ -1,12 +1,12 @@
<!DOCTYPE html><html lang="en"><head> <!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>RelayAngularChat</title> <title>RelayAngularChat</title>
<base href="/relay-angular-chat"> <base href="/relay-angular-chat">
<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">
<link rel="stylesheet" href="/relay-angular-chat/styles.ef46db3751d8e999.css"></head> <link rel="stylesheet" href="/relay-angular-chat/styles.ef46db3751d8e999.css"></head>
<body> <body>
<app-root></app-root> <app-root></app-root>
<script src="/relay-angular-chat/runtime.08a22decfce51efb.js" type="module"></script><script src="/relay-angular-chat/main.982aa72e173d7f74.js" type="module"></script> <script src="/relay-angular-chat/runtime.08a22decfce51efb.js" type="module"></script><script src="/relay-angular-chat/main.4bc6d4996ff8dc3f.js" type="module"></script>
</body></html> </body></html>

2
relay-angular-chat/main.982aa72e173d7f74.js → relay-angular-chat/main.4bc6d4996ff8dc3f.js
View File

File diff suppressed because one or more lines are too long

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>

2
relay-reactjs-chat/static/css/main.e6c13ad2.css.map
View File

@ -1 +1 @@
{"version":3,"file":"static/css/main.e6c13ad2.css","mappings":"AAAA,KAKE,kCAAmC,CACnC,iCAAkC,CAJlC,mIAEY,CAHZ,QAMF,CAEA,KACE,uEAEF","sources":["index.css"],"sourcesContent":["body {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\n monospace;\n}\n"],"names":[],"sourceRoot":""} {"version":3,"file":"static/css/main.e6c13ad2.css","mappings":"AAAA,KAKE,kCAAmC,CACnC,iCAAkC,CAJlC,mIAEY,CAHZ,QAMF,CAEA,KACE,uEAEF","sources":["index.css"],"sourcesContent":["body {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\",\n \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\",\n monospace;\n}\n"],"names":[],"sourceRoot":""}

2
relay-reactjs-chat/static/js/main.264de85d.js.map
View File

File diff suppressed because one or more lines are too long

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>

2
store-reactjs-chat/static/css/main.e6c13ad2.css.map
View File

@ -1 +1 @@
{"version":3,"file":"static/css/main.e6c13ad2.css","mappings":"AAAA,KAKE,kCAAmC,CACnC,iCAAkC,CAJlC,mIAEY,CAHZ,QAMF,CAEA,KACE,uEAEF","sources":["index.css"],"sourcesContent":["body {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\n monospace;\n}\n"],"names":[],"sourceRoot":""} {"version":3,"file":"static/css/main.e6c13ad2.css","mappings":"AAAA,KAKE,kCAAmC,CACnC,iCAAkC,CAJlC,mIAEY,CAHZ,QAMF,CAEA,KACE,uEAEF","sources":["index.css"],"sourcesContent":["body {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\",\n \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\",\n monospace;\n}\n"],"names":[],"sourceRoot":""}

2
store-reactjs-chat/static/js/main.464a3c47.js.map
View File

File diff suppressed because one or more lines are too long

2
web-chat/static/css/main.b267dcda.css.map
View File

File diff suppressed because one or more lines are too long