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

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

@ -1,12 +1,12 @@
<!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8">
<title>RelayAngularChat</title>
<base href="/relay-angular-chat">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="/relay-angular-chat/styles.ef46db3751d8e999.css"></head>
<body>
<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>
<meta charset="utf-8">
<title>RelayAngularChat</title>
<base href="/relay-angular-chat">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="/relay-angular-chat/styles.ef46db3751d8e999.css"></head>
<body>
<app-root></app-root>
<script src="/relay-angular-chat/runtime.08a22decfce51efb.js" type="module"></script><script src="/relay-angular-chat/main.4bc6d4996ff8dc3f.js" type="module"></script>
</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>
<html lang='en'>
<head>
<meta charset='UTF-8'/>
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>JS-Waku Chat</title>
</head>
</head>
<body>
<body>
<div><h1>Waku Node Status</h1></div>
<div id="status"></div>
<div><h1>Waku Node Status</h1></div>
<div id='status'></div>
<label for="textInput">Message text</label>
<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>
<input disabled id='textInput' placeholder='Type your message here' type='text'>
<button disabled id='sendButton' type='button'>Send Message using Relay</button>
<div><h1>Messages</h1></div>
<div id="messages"></div>
<div><h1>Messages</h1></div>
<div id='messages'></div>
<script type="module">
/**
* 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'>
/**
* 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.
*/
const statusDiv = document.getElementById("status");
const messagesDiv = document.getElementById("messages");
const textInput = document.getElementById("textInput");
const sendButton = document.getElementById("sendButton");
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";
// Every Waku Message has a content topic that categorizes it.
// It is always encoded in clear text.
// 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";
const statusDiv = document.getElementById('status');
const messagesDiv = document.getElementById('messages');
const textInput = document.getElementById('textInput');
const sendButton = document.getElementById('sendButton');
// Prepare encoder and decoder, `V0` for clear text messages.
// Every Waku Message has a content topic that categorizes it.
// It is always encoded in clear text.
// 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';
const encoder = new EncoderV0(contentTopic);
const decoder = new DecoderV0(contentTopic);
// Prepare encoder and decoder, `V0` for clear text messages.
const encoder = new EncoderV0(contentTopic);
const decoder = new DecoderV0(contentTopic);
try {
statusDiv.innerHTML = '<p>Starting</p>';
try {
statusDiv.innerHTML = "<p>Starting</p>";
// Create and starts a Waku node.
// `default: true` bootstraps by connecting to pre-defined/hardcoded Waku nodes.
// We are currently working on migrating this method to DNS Discovery.
//
// 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();
// Add a hook to process all incoming messages on a specified content topic.
//
// 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.
// 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
if (!message.payload)
return;
if (!message.payload) return;
// Helper method to decode the payload to utf-8. A production dApp should
// use `wakuMessage.payload` (Uint8Array) which enables encoding a data
@ -77,10 +87,13 @@
//
// https://js.waku.org/functions/index.utils.bytesToUtf8.html
const text = bytesToUtf8(message.payload);
messagesDiv.innerHTML = `<p>${text}</p><br />` + messagesDiv.innerHTML;
}, [contentTopic]);
messagesDiv.innerHTML =
`<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
// 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
// protocol.
sendButton.onclick = async () => {
const payload = utf8ToBytes(textInput.value)
await waku.relay.send(encoder, {payload});
console.log('Message sent!');
const payload = utf8ToBytes(textInput.value);
await waku.relay.send(encoder, { payload });
console.log("Message sent!");
// Reset the text input.
textInput.value = null;
// Reset the text input.
textInput.value = null;
};
// Ready to send & receive messages, enable text input.
textInput.disabled = false;
sendButton.disabled = false;
statusDiv.innerHTML = '<p>Ready!</p>';
} catch (e) {
statusDiv.innerHTML = 'Failed to start application';
statusDiv.innerHTML = "<p>Ready!</p>";
} catch (e) {
statusDiv.innerHTML = "Failed to start application";
console.log(e);
}
</script>
</body>
}
</script>
</body>
</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>
<html lang='en'>
<head>
<meta charset='UTF-8'/>
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>JS-Waku light node example</title>
<link href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<link
href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"
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">
<h1>Waku RLN</h1>
<button id='connect-wallet' type='button'>Connect Wallet</button>
</div>
<span id="status"></span>
<span id='status'></span>
<h2 class="mu1">Blockchain</h2>
<hr />
<h2 class="mu1">Blockchain</h2>
<hr/>
<div class="row rcenter">
<h4>Address</h4>
<code class="value" id="address"></code>
</div>
<div class="row rcenter">
<h4>Address</h4>
<code class="value" id="address"></code>
</div>
<div class="row mu1 rcenter">
<h4>Contract Data</h4>
<button disabled id='retrieve-rln-details' type='button'>
<div class="row mu1 rcenter">
<h4>Contract Data</h4>
<button disabled id="retrieve-rln-details" type="button">
Retrieve contract state from blockchain
</button>
</div>
</button>
</div>
<div class="row rcenter">
<h4>Latest membership id on contract</h4>
<code class="value" id="latest-membership-id">Not loaded yet</code>
</div>
<div class="row rcenter">
<h4>Latest membership id on contract</h4>
<code class="value" id="latest-membership-id">Not loaded yet</code>
</div>
<h2 class="mu1">Credentials</h2>
<hr />
<h2 class="mu1">Credentials</h2>
<hr/>
<div class="row">
<div class="w50">
<div class="row">
<div class="w50">
<h4>You can either generate new credentials:</h4>
<button disabled id='generate-credentials' type='button'>Generate RLN Credentials</button>
<br/>
<br/>
<button disabled id='register-button' type='button'>Register Credentials in Contract</button>
</div>
<div class="w50">
<button disabled id="generate-credentials" type="button">
Generate RLN Credentials
</button>
<br />
<br />
<button disabled id="register-button" type="button">
Register Credentials in Contract
</button>
</div>
<div class="w50">
<h4>Or import existing ones:</h4>
<label for="membership-id">Membership ID (your index in the RLN smart contract):</label>
<input id="membership-id" name="membership-id" type="text"/>
<label for="membership-id"
>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>
<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>
<input id="commitment-key" name="commitment-key" type="text"/>
<button disabled id='import-button' type='button'>Import RLN Credentials</button>
<input id="commitment-key" name="commitment-key" type="text" />
<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 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>
<hr/>
<div id="waku-status"></div>
<div class="row rcenter mu1 mf">
<label for="remote-multiaddr">Remote peer's multiaddr</label>
<input
id="remote-multiaddr"
type="text"
value="/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm"
/>
<button disabled id="dial" type="button">Dial</button>
</div>
<div class="row rcenter mu1 mf">
<label for='remote-multiaddr'>Remote peer's multiaddr</label>
<input id='remote-multiaddr'
type='text'
value="/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm">
<button disabled id='dial' type='button'>Dial</button>
</div>
<div class="row rcenter mf">
<label for="nick-input">Your nickname</label>
<input
class="p100"
id="nick-input"
placeholder="Choose a nickname"
type="text"
/>
</div>
<div class="row rcenter mf">
<label for='nick-input'>Your nickname</label>
<input class="p100" id='nick-input' placeholder='Choose a nickname' type='text'>
</div>
<div class="row rcenter mf">
<label for="textInput">Message text</label>
<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>
<div class="row rcenter mf">
<label for='textInput'>Message text</label>
<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>
<div id="messages"></div>
<h4 class="mu1">Messages</h4>
<div id="messages"></div>
<script type='module'>
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'
import {waitForRemotePeer} from 'https://unpkg.com/js-waku@0.30.0/bundle/lib/wait_for_remote_peer.js'
import {
<script type="module">
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";
import { waitForRemotePeer } from "https://unpkg.com/js-waku@0.30.0/bundle/lib/wait_for_remote_peer.js";
import {
EncoderV0,
DecoderV0
} from 'https://unpkg.com/js-waku@0.30.0/bundle/lib/waku_message/version_0.js'
DecoderV0,
} 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,
MembershipKey,
RLNDecoder,
RLNEncoder
} from "https://unpkg.com/@waku/rln@0.0.12-6875952/bundle/index.js";
RLNEncoder,
} 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
const addressDiv = document.getElementById('address');
const connectWalletButton = document.getElementById('connect-wallet');
// Blockchain Elements
const addressDiv = document.getElementById("address");
const connectWalletButton = document.getElementById("connect-wallet");
const latestMembershipSpan = document.getElementById('latest-membership-id')
const retrieveRLNDetailsButton = document.getElementById('retrieve-rln-details')
const latestMembershipSpan = document.getElementById(
"latest-membership-id"
);
const retrieveRLNDetailsButton = document.getElementById(
"retrieve-rln-details"
);
// Credentials Elements
const generateCredsButton = document.getElementById('generate-credentials')
// Credentials Elements
const generateCredsButton = document.getElementById(
"generate-credentials"
);
const membershipIdInput = document.getElementById('membership-id')
const identityKeyInput = document.getElementById('id-key')
const commitmentKeyInput = document.getElementById('commitment-key')
const importButton = document.getElementById('import-button')
const membershipIdInput = document.getElementById("membership-id");
const identityKeyInput = document.getElementById("id-key");
const commitmentKeyInput = document.getElementById("commitment-key");
const importButton = document.getElementById("import-button");
const idDiv = document.getElementById('id');
const keyDiv = document.getElementById('key');
const commitmentDiv = document.getElementById('commitment');
const idDiv = document.getElementById("id");
const keyDiv = document.getElementById("key");
const commitmentDiv = document.getElementById("commitment");
const registerButton = document.getElementById('register-button');
const registerButton = document.getElementById("register-button");
// Waku Elements
const statusDiv = document.getElementById('waku-status');
// Waku Elements
const statusDiv = document.getElementById("waku-status");
const remoteMultiAddrInput = document.getElementById('remote-multiaddr')
const dialButton = document.getElementById('dial')
const remoteMultiAddrInput = document.getElementById("remote-multiaddr");
const dialButton = document.getElementById("dial");
const nicknameInput = document.getElementById('nick-input')
const nicknameInput = document.getElementById("nick-input");
const textInput = document.getElementById('textInput');
const sendButton = document.getElementById('sendButton');
const sendingStatusSpan = document.getElementById('sending-status');
const textInput = document.getElementById("textInput");
const sendButton = document.getElementById("sendButton");
const sendingStatusSpan = document.getElementById("sending-status");
const messagesDiv = document.getElementById('messages')
const messagesDiv = document.getElementById("messages");
let membershipId, membershipKey, encoder, node, nodeConnected, rlnInstance;
let retrievedRLNEvents = false;
const rlnInstancePromise = create();
let membershipId,
membershipKey,
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...'
rlnInstancePromise.then((_rlnInstance) => {
rlnInstance = _rlnInstance
statusSpan.innerText = 'WASM Blob download in progress... done!'
updateFields()
})
statusSpan.innerText = "WASM Blob download in progress...";
rlnInstancePromise.then((_rlnInstance) => {
rlnInstance = _rlnInstance;
statusSpan.innerText = "WASM Blob download in progress... done!";
updateFields();
});
const ContentTopic = "/toy-chat/2/luzhou/proto";
const ContentTopic = "/toy-chat/2/luzhou/proto";
// Protobuf
const ProtoChatMessage = new protobuf.Type("ChatMessage")
// Protobuf
const ProtoChatMessage = new protobuf.Type("ChatMessage")
.add(new protobuf.Field("timestamp", 1, "uint64"))
.add(new protobuf.Field("nick", 2, "string"))
.add(new protobuf.Field("text", 3, "bytes"));
// Function to update the fields to guide the user by disabling buttons.
const updateFields = () => {
// Function to update the fields to guide the user by disabling buttons.
const updateFields = () => {
if (membershipKey) {
keyDiv.innerHTML = utils.bytesToHex(membershipKey.IDKey)
commitmentDiv.innerHTML = utils.bytesToHex(membershipKey.IDCommitment)
idDiv.innerHTML = membershipId || "not registered yet"
keyDiv.innerHTML = utils.bytesToHex(membershipKey.IDKey);
commitmentDiv.innerHTML = utils.bytesToHex(
membershipKey.IDCommitment
);
idDiv.innerHTML = membershipId || "not registered yet";
if (membershipId && rlnInstance) {
encoder = new RLNEncoder(
new EncoderV0(ContentTopic),
rlnInstance,
membershipId,
membershipKey
);
}
if (membershipId && rlnInstance) {
encoder = new RLNEncoder(
new EncoderV0(ContentTopic),
rlnInstance,
membershipId,
membershipKey
);
}
}
generateCredsButton.disabled = !rlnInstance
generateCredsButton.disabled = !rlnInstance;
registerButton.disabled = !(membershipKey && retrievedRLNEvents && !membershipId)
registerButton.disabled = !(
membershipKey &&
retrievedRLNEvents &&
!membershipId
);
importButton.disabled = !(membershipIdInput.value
&& identityKeyInput.value
&& commitmentKeyInput.value);
importButton.disabled = !(
membershipIdInput.value &&
identityKeyInput.value &&
commitmentKeyInput.value
);
const readyToSend = (membershipKey && membershipId && nodeConnected && nicknameInput.value)
const readyToSend =
membershipKey && membershipId && nodeConnected && nicknameInput.value;
textInput.disabled = !readyToSend;
sendButton.disabled = !readyToSend;
dialButton.disabled = !(node && node.isStarted() && retrievedRLNEvents)
dialButton.disabled = !(node && node.isStarted() && retrievedRLNEvents);
retrieveRLNDetailsButton.disabled = !rlnInstance || retrievedRLNEvents;
}
};
// Blockchain
// Blockchain
generateCredsButton.onclick = () => {
membershipKey = rlnInstance.generateMembershipKey()
generateCredsButton.onclick = () => {
membershipKey = rlnInstance.generateMembershipKey();
updateFields();
}
};
membershipIdInput.onchange = updateFields;
identityKeyInput.onchange = updateFields;
commitmentKeyInput.onchange = updateFields;
membershipIdInput.onchange = updateFields;
identityKeyInput.onchange = updateFields;
commitmentKeyInput.onchange = updateFields;
importButton.onclick = () => {
const idKey = utils.hexToBytes(identityKeyInput.value)
const idCommitment = utils.hexToBytes(commitmentKeyInput.value)
membershipKey = new MembershipKey(idKey, idCommitment)
importButton.onclick = () => {
const idKey = utils.hexToBytes(identityKeyInput.value);
const idCommitment = utils.hexToBytes(commitmentKeyInput.value);
membershipKey = new MembershipKey(idKey, idCommitment);
membershipId = membershipIdInput.value;
updateFields()
}
updateFields();
};
const checkChain = async (chainId) => {
const checkChain = async (chainId) => {
retrieveRLNDetailsButton.disabled = retrievedRLNEvents || chainId !== 5;
registerButton.disabled = !(chainId === 5 && retrievedRLNEvents);
if (chainId !== 5) {
alert("Switch to Goerli")
alert("Switch to Goerli");
}
}
};
const rlnDeployBlk = 7109391;
const rlnAddress = "0x4252105670fe33d2947e8ead304969849e64f2a6";
const rlnAbi = [
const rlnDeployBlk = 7109391;
const rlnAddress = "0x4252105670fe33d2947e8ead304969849e64f2a6";
const rlnAbi = [
"function MEMBERSHIP_DEPOSIT() public view returns(uint256)",
"function register(uint256 pubkey) external payable",
"function withdraw(uint256 secret, uint256 _pubkeyIndex, address payable receiver) external",
"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 rlnContract;
let accounts;
let rlnContract;
const handleMembership = (pubkey, index) => {
const handleMembership = (pubkey, index) => {
try {
const idCommitment = ethers.utils.zeroPad(ethers.utils.arrayify(pubkey), 32);
rlnInstance.insertMember(idCommitment);
const indexInt = index.toNumber()
if (!latestMembershipSpan.innerText || indexInt > latestMembershipSpan.innerText) {
latestMembershipSpan.innerText = indexInt
}
console.debug("IDCommitment registered in tree", idCommitment, indexInt);
latestMembershipSpan.innerHTML = indexInt;
const idCommitment = ethers.utils.zeroPad(
ethers.utils.arrayify(pubkey),
32
);
rlnInstance.insertMember(idCommitment);
const indexInt = index.toNumber();
if (
!latestMembershipSpan.innerText ||
indexInt > latestMembershipSpan.innerText
) {
latestMembershipSpan.innerText = indexInt;
}
console.debug(
"IDCommitment registered in tree",
idCommitment,
indexInt
);
latestMembershipSpan.innerHTML = indexInt;
} 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;
addressDiv.innerHTML = accounts.length ? accounts[0] : "";
}
};
connectWalletButton.onclick = async () => {
connectWalletButton.onclick = async () => {
try {
accounts = await provider.send("eth_requestAccounts", []);
setAccounts(accounts);
const network = await provider.getNetwork();
checkChain(network.chainId);
accounts = await provider.send("eth_requestAccounts", []);
setAccounts(accounts);
const network = await provider.getNetwork();
checkChain(network.chainId);
} 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);
const filter = rlnContract.filters.MemberRegistered()
const filter = rlnContract.filters.MemberRegistered();
// populating merkle tree:
const alreadyRegisteredMembers = await rlnContract.queryFilter(filter, rlnDeployBlk)
alreadyRegisteredMembers.forEach(event => {
handleMembership(event.args.pubkey, event.args.index, event);
const alreadyRegisteredMembers = await rlnContract.queryFilter(
filter,
rlnDeployBlk
);
alreadyRegisteredMembers.forEach((event) => {
handleMembership(event.args.pubkey, event.args.index, event);
});
retrievedRLNEvents = true;
// reacting to new registrations
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('chainChanged', chainId => {
window.ethereum.on("accountsChanged", setAccounts);
window.ethereum.on("chainChanged", (chainId) => {
checkChain(parseInt(chainId, 16));
});
});
registerButton.onclick = async () => {
registerButton.onclick = async () => {
try {
registerButton.disabled = true;
registerButton.disabled = true;
const pubkey = ethers.BigNumber.from(membershipKey.IDCommitment);
const price = await rlnContract.MEMBERSHIP_DEPOSIT();
const pubkey = ethers.BigNumber.from(membershipKey.IDCommitment);
const price = await rlnContract.MEMBERSHIP_DEPOSIT();
const signer = provider.getSigner()
const rlnContractWithSigner = rlnContract.connect(signer);
const signer = provider.getSigner();
const rlnContractWithSigner = rlnContract.connect(signer);
const txResponse = await rlnContractWithSigner.register(pubkey, {value: price});
console.log("Transaction broadcasted:", txResponse);
const txResponse = await rlnContractWithSigner.register(pubkey, {
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
membershipId = txReceipt.events[0].args.index.toNumber();
console.log("Obtained index for current membership credentials", membershipId);
updateFields();
registerButton.disabled = false;
// Update membershipId
membershipId = txReceipt.events[0].args.index.toNumber();
console.log(
"Obtained index for current membership credentials",
membershipId
);
updateFields();
registerButton.disabled = false;
} catch (err) {
alert(err);
registerButton.disabled = false;
alert(err);
registerButton.disabled = false;
}
};
}
// Waku
nicknameInput.onchange = updateFields;
nicknameInput.onblur = updateFields;
// Waku
nicknameInput.onchange = updateFields
nicknameInput.onblur = updateFields;
let messages = [];
let messages = [];
const updateMessages = () => {
messagesDiv.innerHTML = "<ul>";
messages.forEach((msg) => {
messagesDiv.innerHTML += `<li>${msg.msg} - [epoch: ${msg.epoch}, proof: ${msg.proofState} ]</li>`;
const updateMessages = () => {
messagesDiv.innerHTML = "<ul>"
messages.forEach(msg => {
messagesDiv.innerHTML += `<li>${msg.msg} - [epoch: ${msg.epoch}, proof: ${msg.proofState} ]</li>`
if (msg.proofState === "verifying...") {
try {
console.log("Verifying proof without roots")
console.time("proof_verify_timer")
const res = msg.verifyNoRoot()
console.timeEnd("proof_verify_timer")
console.log("proof verified without roots", res)
if (res === undefined) {
msg.proofState = "no proof attached"
} else if (res) {
msg.proofState = "verified."
} else {
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())
if (msg.proofState === "verifying...") {
try {
console.log("Verifying proof without roots");
console.time("proof_verify_timer");
const res = msg.verifyNoRoot();
console.timeEnd("proof_verify_timer");
console.log("proof verified without roots", res);
if (res === undefined) {
msg.proofState = "no proof attached";
} else if (res) {
msg.proofState = "verified.";
} else {
msg.proofState = "invalid!";
}
} catch (e) {
msg.proofState = "Error encountered, check console";
console.error("Error verifying proof:", e);
}
})
messagesDiv.innerHTML += "</ul>"
}
updateMessages();
console.log("Verifying proof with roots", msg.verify());
}
});
messagesDiv.innerHTML += "</ul>";
};
const callback = (wakuMessage) => {
const {timestamp, nick, text} = ProtoChatMessage.decode(wakuMessage.payload)
const callback = (wakuMessage) => {
const { timestamp, nick, text } = ProtoChatMessage.decode(
wakuMessage.payload
);
const time = new Date();
time.setTime(Number(timestamp) * 1000);
let proofState, verify, verifyNoRoot;
if (typeof wakuMessage.rateLimitProof === "undefined") {
proofState = "no proof attached";
proofState = "no proof attached";
} else {
console.log("Proof received:", wakuMessage.rateLimitProof)
verify = wakuMessage.verify.bind(wakuMessage);
verifyNoRoot = wakuMessage.verifyNoRoot.bind(wakuMessage);
proofState = "verifying...";
console.log("Proof received:", wakuMessage.rateLimitProof);
verify = wakuMessage.verify.bind(wakuMessage);
verifyNoRoot = wakuMessage.verifyNoRoot.bind(wakuMessage);
proofState = "verifying...";
}
messages.push({
msg: `(${nick}) <strong>${utils.bytesToUtf8(text)}</strong> <i>[${time.toISOString()}]</i>`,
epoch: wakuMessage.epoch,
verify,
verifyNoRoot,
proofState
msg: `(${nick}) <strong>${utils.bytesToUtf8(
text
)}</strong> <i>[${time.toISOString()}]</i>`,
epoch: wakuMessage.epoch,
verify,
verifyNoRoot,
proofState,
});
updateMessages()
}
updateMessages();
};
(async () => {
statusDiv.innerHTML = '<p>Creating Waku node.</p>';
(async () => {
statusDiv.innerHTML = "<p>Creating Waku node.</p>";
node = await createLightNode();
statusDiv.innerHTML = '<p>Starting Waku node.</p>';
statusDiv.innerHTML = "<p>Starting Waku node.</p>";
await node.start();
statusDiv.innerHTML = '<p>Waku node started.</p>';
updateFields()
})()
statusDiv.innerHTML = "<p>Waku node started.</p>";
updateFields();
})();
dialButton.onclick = async () => {
const ma = remoteMultiAddrInput.value
dialButton.onclick = async () => {
const ma = remoteMultiAddrInput.value;
if (!ma) {
statusDiv.innerHTML = '<p>Error: No multiaddr provided.</p>';
return;
statusDiv.innerHTML = "<p>Error: No multiaddr provided.</p>";
return;
}
statusDiv.innerHTML = '<p>Dialing peer.</p>';
await node.dial(ma, ["filter", "lightpush"])
statusDiv.innerHTML = "<p>Dialing peer.</p>";
await node.dial(ma, ["filter", "lightpush"]);
await waitForRemotePeer(node, ["filter", "lightpush"]);
statusDiv.innerHTML = '<p>Waku node connected.</p>';
statusDiv.innerHTML = "<p>Waku node connected.</p>";
await rlnInstancePromise;
const decoder = new RLNDecoder(rlnInstance, new DecoderV0(ContentTopic));
await node.filter.subscribe([decoder], callback)
statusDiv.innerHTML = '<p>Waku node subscribed.</p>';
const decoder = new RLNDecoder(
rlnInstance,
new DecoderV0(ContentTopic)
);
await node.filter.subscribe([decoder], callback);
statusDiv.innerHTML = "<p>Waku node subscribed.</p>";
nodeConnected = true;
updateFields()
}
updateFields();
};
sendButton.onclick = async () => {
sendButton.onclick = async () => {
const text = utils.utf8ToBytes(textInput.value);
const timestamp = new Date();
const msg = ProtoChatMessage.create({
text,
nick: nicknameInput.value,
timestamp: Math.floor(timestamp.valueOf() / 1000)
text,
nick: nicknameInput.value,
timestamp: Math.floor(timestamp.valueOf() / 1000),
});
const payload = ProtoChatMessage.encode(msg).finish();
console.log("Sending message with proof...")
sendingStatusSpan.innerText = 'sending...'
await node.lightPush.push(encoder, {payload, timestamp});
sendingStatusSpan.innerText = 'sent!'
console.log("Message sent!")
console.log("Sending message with proof...");
sendingStatusSpan.innerText = "sending...";
await node.lightPush.push(encoder, { payload, timestamp });
sendingStatusSpan.innerText = "sent!";
console.log("Message sent!");
textInput.value = null;
setTimeout(() => {
sendingStatusSpan.innerText = ''
}, 5000)
};
</script>
</body>
sendingStatusSpan.innerText = "";
}, 5000);
};
</script>
</body>
</html>

91
store-js/index.html
View File

@ -1,62 +1,65 @@
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'/>
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>JS-Waku 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>
<div id='timestamp'></div>
<script type="module">
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'
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'
/**
* 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");
/**
* 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>";
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(
undefined,
{peerDiscovery: [defaultPeerDiscovery()]},
);
const store = wakuStore();
const node = new WakuNode({}, libp2p, store,);
timestampDiv.innerHTML = "<p>Starting waku.</p>";
await node.start();
timestampDiv.innerHTML = '<p>Starting waku.</p>';
await node.start();
timestampDiv.innerHTML = "<p>Connecting to a peer.</p>";
await waitForRemotePeer(node, ["store"]);
timestampDiv.innerHTML = '<p>Connecting to a peer.</p>';
await waitForRemotePeer(node, ["store"]);
timestampDiv.innerHTML = '<p>Retrieving messages.</p>';
const callback = (wakuMessage) => {
timestampDiv.innerHTML = "<p>Retrieving messages.</p>";
const callback = (wakuMessage) => {
// When `backward` direction is passed, first message is the most recent
timestampDiv.innerHTML = wakuMessage.timestamp;
// When returning true, `queryHistory` stops retrieving pages
// In our case, we only want one message, hence one page.
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>

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