From 5343538b6c9929db99a1b0919c820de0aa0c0c29 Mon Sep 17 00:00:00 2001
From: "fryorcraken.eth" <git@fryorcraken.xyz>
Date: Mon, 26 Sep 2022 10:41:30 +1000
Subject: [PATCH] feat(rln-js): new pure javascript example for RLN

---
 rln-js/README.md  |  11 ++++
 rln-js/index.html | 143 ++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 154 insertions(+)
 create mode 100644 rln-js/README.md
 create mode 100644 rln-js/index.html
diff --git a/rln-js/README.md b/rln-js/README.md
new file mode 100644
index 0000000..4053d34
--- /dev/null
+++ b/rln-js/README.md
@@ -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/.
diff --git a/rln-js/index.html b/rln-js/index.html
new file mode 100644
index 0000000..97a7461
--- /dev/null
+++ b/rln-js/index.html
@@ -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>
