js-waku-examples/rln-js/index.html

214 lines
7.5 KiB
HTML

<!DOCTYPE html>
<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>
<body>
<div><h1>RLN</h1>
<p>You can either generate new credentials:</p><br/>
<button id='generate-credentials' type='button' disabled>Generate RLN Credentials</button>
<p>Or import existing ones:</p><br/>
<div>
<label for="membership-id">Membership ID (your index in the RLN smart contract):</label>
<input id="membership-id" name="membership-id" type="text"><br>
<label for="id-key">RLN Identity Key (hex string):</label>
<input id="id-key" name="id-key" type="text"><br>
<label for="commitment-key">RLN Commitment Key (hex string):</label>
<input id="commitment-key" name="commitment-key" type="text"><br>
<button disabled id='import-button' type='button'>Import RLN Credentials</button>
</div>
<div><h2>Credentials</h2>
<div><h3>Membership id</h3>
<div id="id"></div>
</div>
<div><h3>Key</h3>
<div id="key"></div>
</div>
<div><h3>Commitment</h3>
<div id="commitment"></div>
</div>
</div>
</div>
<div><h1>Waku</h1>
<div id='status'></div>
<br/>
<label for='nick-input'>Your nickname</label>
<input id='nick-input' placeholder='Choose a nickname' type='text'>
<button disabled id='set-nick' type='button'>Set nickname</button>
<br/>
<label for='textInput'>Message text</label>
<input id='textInput' placeholder='Type your message here' type='text' disabled>
<button id='sendButton' type='button' disabled>Send message using Light Push</button>
<br/>
<div id="messages"></div>
</div>
<script type='module'>
import {utils} from 'https://unpkg.com/js-waku@0.29.0-7714812/bundle/index.js';
import {createLightNode} from 'https://unpkg.com/js-waku@0.29.0-7714812/bundle/lib/create_waku.js'
import {waitForRemotePeer} from 'https://unpkg.com/js-waku@0.29.0-7714812/bundle/lib/wait_for_remote_peer.js'
import {
PeerDiscoveryStaticPeers
} from "https://unpkg.com/js-waku@0.29.0-7714812/bundle/lib/peer_discovery_static_list";
import {
getPredefinedBootstrapNodes
} from "https://unpkg.com/js-waku@0.29.0-7714812/bundle/lib/predefined_bootstrap_nodes";
import {EncoderV0, DecoderV0} from 'https://unpkg.com/js-waku@0.29.0-7714812/bundle/lib/waku_message/version_0.js'
import {protobuf} from "https://taisukef.github.io/protobuf-es.js/dist/protobuf-es.js";
import {create, MembershipKey, RLNEncoder} from "https://unpkg.com/@waku/rln@0.0.8-964df01/bundle/index.js";
// RLN Elements
const generateCredsButton = document.getElementById('generate-credentials')
const idDiv = document.getElementById('id');
const keyDiv = document.getElementById('key');
const commitmentDiv = document.getElementById('commitment');
const membershipIdInput = document.getElementById('membership-id')
const identityKeyInput = document.getElementById('id-key')
const commitmentKeyInput = document.getElementById('commitment-key')
const importButton = document.getElementById('import-button')
let rlnInstance;
(async () => {
rlnInstance = await create()
generateCredsButton.disabled = false;
})();
// Waku Elements
const statusDiv = document.getElementById('status');
const nicknameInput = document.getElementById('nick-input')
const setNickButton = document.getElementById('set-nick')
const textInput = document.getElementById('textInput');
const sendButton = document.getElementById('sendButton');
const messagesDiv = document.getElementById('messages')
let membershipId;
let membershipKey;
let encoder;
let nodeConnected;
let nick;
const updateFields = () => {
if (membershipKey && membershipId) {
keyDiv.innerHTML = utils.bytesToHex(membershipKey.IDKey)
commitmentDiv.innerHTML = utils.bytesToHex(membershipKey.IDCommitment)
idDiv.innerHTML = membershipId
encoder = new RLNEncoder(
new EncoderV0(ContentTopic),
rlnInstance,
membershipId,
membershipKey
);
}
importButton.disabled = !(membershipIdInput.value
&& identityKeyInput.value
&& commitmentKeyInput.value);
const readyToSend = (membershipKey && membershipId && nodeConnected && nick)
textInput.disabled = !readyToSend;
sendButton.disabled = !readyToSend;
setNickButton.disabled = !nicknameInput.value;
}
generateCredsButton.onclick = () => {
membershipKey = rlnInstance.generateMembershipKey()
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)
membershipId = membershipIdInput.value;
updateFields()
}
// 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"));
// Waku
nicknameInput.onchange = updateFields
setNickButton.onclick = () => {
nick = nicknameInput.value;
updateFields()
}
const ContentTopic = "/toy-chat/2/luzhou/proto";
// const ContentTopic = "/toy-chat/2/huilong/proto"
const decoder = new DecoderV0(ContentTopic);
let messages = [];
const updateMessages = (msgs, div) => {
div.innerHTML = "<ul>"
messages.forEach(msg => div.innerHTML += "<li>" + msg + "</li>")
div.innerHTML += "</ul>"
}
const callback = (wakuMessage) => {
const {timestamp, nick, text} = ProtoChatMessage.decode(wakuMessage.payload)
const time = new Date();
time.setTime(Number(timestamp));
messages.push(`(${nick}) <strong>${utils.bytesToUtf8(text)}</strong> <i>[${time.toString()}]</i>`);
updateMessages(messages, messagesDiv)
}
let node;
(async () => {
statusDiv.innerHTML = '<p>Creating Waku node.</p>';
node = await createLightNode({
libp2p: {
peerDiscovery: [
new PeerDiscoveryStaticPeers(getPredefinedBootstrapNodes("test")),
],
},
});
statusDiv.innerHTML = '<p>Starting Waku node.</p>';
await node.start();
statusDiv.innerHTML = '<p>Waku node started.</p>';
await waitForRemotePeer(node, ["filter", "lightpush"]);
statusDiv.innerHTML = '<p>Waku node connected.</p>';
await node.filter.subscribe([decoder], callback)
nodeConnected = true;
updateFields()
})()
sendButton.onclick = async () => {
const text = utils.utf8ToBytes(textInput.value);
const timestamp = new Date();
const msg = ProtoChatMessage.create({text, nick, timestamp: timestamp.valueOf()});
const payload = ProtoChatMessage.encode(msg).finish();
console.log("Sending message with proof...")
await node.lightPush.push(encoder, {payload, timestamp});
console.log("Message sent!")
textInput.value = null;
};
</script>
</body>
</html>