diff --git a/rln-js/index.html b/rln-js/index.html index 0307296..59a3016 100644 --- a/rln-js/index.html +++ b/rln-js/index.html @@ -55,7 +55,7 @@ - +
@@ -77,7 +77,12 @@ 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.10/bundle/index.js"; + import { + create, + MembershipKey, + RLNDecoder, + RLNEncoder + } from "https://unpkg.com/@waku/rln@0.0.10/bundle/index.js"; import {ethers} from "https://unpkg.com/ethers@5.0.7/dist/ethers-all.esm.min.js" @@ -112,17 +117,19 @@ let membershipId; let membershipKey; let encoder; + let node; let nodeConnected; let nick; let retrievedRLNEvents = false; + let rlnInstancePromise = create(); let rlnInstance; // Load zero-kit WASM blob. - (async () => { - rlnInstance = await create() + rlnInstancePromise.then((_rlnInstance) => { + rlnInstance = _rlnInstance generateCredsButton.disabled = false; connectWalletButton.disabled = false; - })(); + }) const updateFields = () => { if (membershipKey) { @@ -149,6 +156,8 @@ sendButton.disabled = !readyToSend; setNickButton.disabled = !nicknameInput.value; + + dialButton.disabled = !(node && node.isStarted() && retrievedRLNEvents) } generateCredsButton.onclick = () => { @@ -251,6 +260,7 @@ rlnContract.on(filter, (pubkey, index, event) => { handleMembership(event.args.pubkey, event.args.index, event); }); + updateFields() } window.ethereum.on('accountsChanged', setAccounts); @@ -294,15 +304,31 @@ updateFields() } - const ContentTopic = "/toy-chat/2/luzhou/proto"; - const decoder = new DecoderV0(ContentTopic); - let messages = []; - const updateMessages = (msgs, div) => { - div.innerHTML = "" + const updateMessages = () => { + messagesDiv.innerHTML = "" } const callback = (wakuMessage) => { @@ -310,11 +336,28 @@ const time = new Date(); time.setTime(Number(timestamp)); - messages.push(`(${nick}) ${utils.bytesToUtf8(text)} [${time.toString()}]`); - updateMessages(messages, messagesDiv) + console.log("wakuMessage:", wakuMessage) + console.log("wakuMessage.verify", wakuMessage.verify) + console.log("wakuMessage.proof", wakuMessage.rateLimitProof) + + let proofState, verify; + if (typeof wakuMessage.verify === "undefined") { + proofState = "no proof attached"; + } else { + verify = wakuMessage.verify.bind(wakuMessage); + proofState = "verifying..."; + } + + messages.push({ + msg: `(${nick}) ${utils.bytesToUtf8(text)} [${time.toString()}]`, + epoch: wakuMessage.epoch, + verify, + proofState + }); + updateMessages() } - let node; + const ContentTopic = "/toy-chat/2/luzhou/proto"; (async () => { statusDiv.innerHTML = '

Creating Waku node.

'; node = await createLightNode(); @@ -322,7 +365,6 @@ statusDiv.innerHTML = '

Starting Waku node.

'; await node.start(); statusDiv.innerHTML = '

Waku node started.

'; - dialButton.disabled = false; updateFields() })() @@ -336,6 +378,9 @@ await node.dial(ma, ["filter", "lightpush"]) await waitForRemotePeer(node, ["filter", "lightpush"]); statusDiv.innerHTML = '

Waku node connected.

'; + + await rlnInstancePromise; + const decoder = new RLNDecoder(rlnInstance, new DecoderV0(ContentTopic)); await node.filter.subscribe([decoder], callback) statusDiv.innerHTML = '

Waku node subscribed.

'; nodeConnected = true;