diff --git a/rln-js/index.html b/rln-js/index.html index c660486..c0e9183 100644 --- a/rln-js/index.html +++ b/rln-js/index.html @@ -11,15 +11,16 @@

RLN

Wallet

-
+
+

RLN

- +

You can either generate new credentials:


- +

Or import existing ones:


@@ -42,7 +43,7 @@

Commitment

- +
@@ -55,8 +56,8 @@
- - + +
@@ -92,13 +93,6 @@ const retrieveRLNDetailsButton = document.getElementById('retrieve-rln-details') const registerButton = document.getElementById('register-button'); - let rlnInstance; - (async () => { - rlnInstance = await create() - generateCredsButton.disabled = false; - connectWalletButton.disabled = false; - })(); - // Waku Elements const statusDiv = document.getElementById('status'); @@ -117,14 +111,21 @@ let nodeConnected; let nick; let retrievedRLNEvents = false; - + let rlnInstance; + + // Load zero-kit WASM blob. + (async () => { + rlnInstance = await create() + generateCredsButton.disabled = false; + connectWalletButton.disabled = false; + })(); + const updateFields = () => { if (membershipKey) { keyDiv.innerHTML = utils.bytesToHex(membershipKey.IDKey) commitmentDiv.innerHTML = utils.bytesToHex(membershipKey.IDCommitment) idDiv.innerHTML = membershipId || "-" - if (membershipId) { encoder = new RLNEncoder( new EncoderV0(ContentTopic), @@ -134,7 +135,7 @@ ); } } - + importButton.disabled = !(membershipIdInput.value && identityKeyInput.value && commitmentKeyInput.value); @@ -159,7 +160,7 @@ const idKey = utils.hexToBytes(identityKeyInput.value) const idCommitment = utils.hexToBytes(commitmentKeyInput.value) membershipKey = new MembershipKey(idKey, idCommitment) - membershipId = membershipIdInput.value ; + membershipId = membershipIdInput.value; updateFields() } @@ -169,38 +170,11 @@ .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 = "" - } - - const callback = (wakuMessage) => { - const {timestamp, nick, text} = ProtoChatMessage.decode(wakuMessage.payload) - const time = new Date(); - time.setTime(Number(timestamp)); - - messages.push(`(${nick}) ${utils.bytesToUtf8(text)} [${time.toString()}]`); - updateMessages(messages, messagesDiv) - } - + // Wallet const checkChain = async (chainId) => { - retrieveRLNDetailsButton.disabled = retrievedRLNEvents || chainId != 5; - registerButton.disabled = !(chainId == 5 && retrievedRLNEvents); - if(chainId != 5){ + retrieveRLNDetailsButton.disabled = retrievedRLNEvents || chainId !== 5; + registerButton.disabled = !(chainId === 5 && retrievedRLNEvents); + if (chainId !== 5) { alert("Switch to Goerli") } } @@ -227,12 +201,12 @@ let accounts; let rlnContract; - const handleMembership = (pubkey, index, event) => { + const handleMembership = (pubkey, index) => { try { const idCommitment = ethers.utils.zeroPad(ethers.utils.arrayify(pubkey), 32); rlnInstance.insertMember(idCommitment); console.debug("IDCommitment registered in tree", idCommitment, index.toNumber()); - } catch(err){ + } catch (err) { alert(err); // TODO: the merkle tree can be in a wrong state. The app should be disabled } } @@ -248,13 +222,13 @@ setAccounts(accounts); checkCurrentChain(); } catch (e) { - ("No web3 provider available", e); + console.log("No web3 provider available", e); } }; retrieveRLNDetailsButton.onclick = async () => { rlnContract = new ethers.Contract(rlnAddress, rlnAbi, provider); - + const filter = rlnContract.filters.MemberRegistered() // populating merkle tree: @@ -285,7 +259,7 @@ registerButton.onclick = async () => { try { registerButton.disabled = true; - + const pubkey = ethers.BigNumber.from(membershipKey.IDCommitment); const price = await rlnContract.MEMBERSHIP_DEPOSIT(); @@ -304,13 +278,40 @@ console.log("Obtained index for current membership credentials", membershipId); updateFields(); registerButton.disabled = false; - } catch(err) { + } catch (err) { alert(err); registerButton.disabled = false; } } + // Waku + nicknameInput.onchange = updateFields + setNickButton.onclick = () => { + nick = nicknameInput.value; + updateFields() + } + + const ContentTopic = "/toy-chat/2/luzhou/proto"; + const decoder = new DecoderV0(ContentTopic); + + let messages = []; + + const updateMessages = (msgs, div) => { + div.innerHTML = "" + } + + const callback = (wakuMessage) => { + const {timestamp, nick, text} = ProtoChatMessage.decode(wakuMessage.payload) + const time = new Date(); + time.setTime(Number(timestamp)); + + messages.push(`(${nick}) ${utils.bytesToUtf8(text)} [${time.toString()}]`); + updateMessages(messages, messagesDiv) + } + let node; (async () => { statusDiv.innerHTML = '

Creating Waku node.

';