Merge pull request #115 from waku-org/js-rln-html

This commit is contained in:
fryorcraken.eth 2022-09-26 10:46:54 +10:00 committed by GitHub
commit b620740049
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 154 additions and 0 deletions

11
rln-js/README.md Normal file
View File

@ -0,0 +1,11 @@
# Using RLN in JavaScript
**Demonstrates**:
- RLN: Generate proof
- Pure Javascript/HTML.
- Use minified bundle of js from unpkg.com, no import, no package manager.
To test the example, simply download the `index.html` file from this folder and open it in a browser.
The `master` branch's HEAD is deployed at https://examples.waku.org/rln-js/.

143
rln-js/index.html Normal file
View File

@ -0,0 +1,143 @@
<!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>
<button id='generate-credentials' type='button'>Generate RLN Credentials</button>
<div><h2>Credentials</h2>
<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>
<div><h2>Local Peer Id</h2>
<div id='peer-id'></div>
</div>
<div><h2>Remote Peer Id</h2>
<div id='remote-peer-id'></div>
</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 id='dial' type='button'>Dial</button>
<br/>
<label for='textInput'>Message text</label>
<input id='textInput' placeholder='Type your message here' type='text'>
<button id='sendButton' type='button'>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/bundle/index.js';
import {
createLightNode
} from 'https://unpkg.com/js-waku@0.29.0/bundle/lib/create_waku.js'
import {
waitForRemotePeer
} from 'https://unpkg.com/js-waku@0.29.0/bundle/lib/wait_for_remote_peer.js'
import {
EncoderV0, DecoderV0
} from 'https://unpkg.com/js-waku@0.29.0/bundle/lib/waku_message/version_0.js'
import {create} from "https://unpkg.com/@waku/rln@0.0.7/bundle/index.js";
// RLN
const generateCredsButton = document.getElementById('generate-credentials')
const keyDiv = document.getElementById('key');
const commitmentDiv = document.getElementById('commitment');
const rlnInstance = await create();
let membership;
generateCredsButton.onclick = () => {
membership = rlnInstance.generateMembershipKey()
keyDiv.innerHTML = utils.bytesToHex(membership.IDKey)
commitmentDiv.innerHTML = utils.bytesToHex(membership.IDCommitment)
}
// Waku
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 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 = [];
dialButton.disabled = true;
textInput.disabled = true;
sendButton.disabled = true;
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>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
if (!ma) {
statusDiv.innerHTML = '<p>Error: No multiaddr provided.</p>';
return;
}
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>'
await node.filter.subscribe([decoder], callback)
textInput.disabled = false;
sendButton.disabled = false;
}
const callback = (wakuMessage) => {
const text = utils.bytesToUtf8(wakuMessage.payload)
const timestamp = wakuMessage.timestamp.toString()
messages.push(text + " - " + timestamp)
updateMessages(messages, messagesDiv)
}
sendButton.onclick = async () => {
const text = textInput.value;
await node.lightPush.push(encoder, {payload: utils.utf8ToBytes(text)});
console.log('Message sent!');
textInput.value = null;
};
</script>
</body>
</html>