status-im
/
js-waku-examples
mirror of https://github.com/status-im/js-waku-examples.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

chore: update rln-js example to use @waku/rln 0.1.0 (#237)

This commit is contained in:
RichΛrd 2023-05-17 16:07:55 -04:00 committed by GitHub
parent 89ee88398a
commit d7bb3016ff
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 64 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
examples/rln-js/index.html
View File

@ -66,10 +66,14 @@
>Membership ID (your index in the RLN smart contract):</label >Membership ID (your index in the RLN smart contract):</label
> >
<input id="membership-id" name="membership-id" type="text" /> <input id="membership-id" name="membership-id" type="text" />
<label for="id-key">RLN Identity Key (hex string):</label> <label for="id-secret-hash">RLN Secret Hash (hex string):</label>
<input id="id-key" name="id-key" type="text" /> <input id="id-secret-hash" name="id-secret-hash" type="text" />
<label for="commitment-key">RLN Commitment Key (hex string):</label> <label for="commitment-key">RLN Commitment Key (hex string):</label>
<input id="commitment-key" name="commitment-key" type="text" /> <input id="commitment-key" name="commitment-key" type="text" />
<label for="id-trapdoor">RLN ID Trapdoor (hex string):</label>
<input id="id-trapdoor" name="id-trapdoor" type="text" />
<label for="id-nullifier">RLN ID Nullifier (hex string):</label>
<input id="id-nullifier" name="id-nullifier" type="text" />
<button disabled id="import-manually-button" type="button"> <button disabled id="import-manually-button" type="button">
Import RLN Credentials Import RLN Credentials
</button> </button>
@ -81,13 +85,21 @@
<code class="value" id="id">none</code> <code class="value" id="id">none</code>
</div> </div>
<div class="row rcenter"> <div class="row rcenter">
<h4>Key</h4> <h4>Secret Hash</h4>
<code class="value" id="key">none</code> <code class="value" id="secret-hash">none</code>
</div> </div>
<div class="row rcenter"> <div class="row rcenter">
<h4>Commitment</h4> <h4>Commitment</h4>
<code class="value" id="commitment">none</code> <code class="value" id="commitment">none</code>
</div> </div>
<div class="row rcenter">
<h4>Nullifier</h4>
<code class="value" id="nullifier">none</code>
</div>
<div class="row rcenter">
<h4>Trapdoor</h4>
<code class="value" id="trapdoor">none</code>
</div>
<h2 class="mu1">Waku</h2> <h2 class="mu1">Waku</h2>
<hr /> <hr />

86
examples/rln-js/index.js
View File

@ -8,11 +8,11 @@ import {
import { protobuf } from "https://taisukef.github.io/protobuf-es.js/dist/protobuf-es.js"; import { protobuf } from "https://taisukef.github.io/protobuf-es.js/dist/protobuf-es.js";
import { import {
create, create,
MembershipKey, IdentityCredential,
RLNDecoder, RLNDecoder,
RLNEncoder, RLNEncoder,
RLNContract, RLNContract,
} from "https://unpkg.com/@waku/rln@0.0.14-7e0966a/bundle/index.js"; } from "https://unpkg.com/@waku/rln@0.1.0/bundle/index.js";
import { ethers } from "https://unpkg.com/ethers@5.7.2/dist/ethers.esm.min.js"; import { ethers } from "https://unpkg.com/ethers@5.7.2/dist/ethers.esm.min.js";
const ContentTopic = "/toy-chat/2/luzhou/proto"; const ContentTopic = "/toy-chat/2/luzhou/proto";
@ -23,8 +23,8 @@ const ProtoChatMessage = new protobuf.Type("ChatMessage")
.add(new protobuf.Field("nick", 2, "string")) .add(new protobuf.Field("nick", 2, "string"))
.add(new protobuf.Field("text", 3, "bytes")); .add(new protobuf.Field("text", 3, "bytes"));
const rlnDeployBlk = 7109391; const rlnDeployBlk = 3193048;
const rlnAddress = "0x4252105670fe33d2947e8ead304969849e64f2a6"; const rlnAddress = "0x9C09146844C1326c2dBC41c451766C7138F88155";
const SIGNATURE_MESSAGE = const SIGNATURE_MESSAGE =
"The signature of this message will be used to generate your RLN credentials. Anyone accessing it may send messages on your behalf, please only share with the RLN dApp"; "The signature of this message will be used to generate your RLN credentials. Anyone accessing it may send messages on your behalf, please only share with the RLN dApp";
@ -64,14 +64,14 @@ async function initRLN(ui) {
window.ethereum.on("accountsChanged", ui.setAccount); window.ethereum.on("accountsChanged", ui.setAccount);
window.ethereum.on("chainChanged", (chainId) => { window.ethereum.on("chainChanged", (chainId) => {
const id = parseInt(chainId, 16); const id = parseInt(chainId, 16);
ui.disableIfNotGoerli(id); ui.disableIfNotSepolia(id);
}); });
ui.onConnectWallet(async () => { ui.onConnectWallet(async () => {
try { try {
const accounts = await provider.send("eth_requestAccounts", []); const accounts = await provider.send("eth_requestAccounts", []);
ui.setAccount(accounts); ui.setAccount(accounts);
const network = await provider.getNetwork(); const network = await provider.getNetwork();
ui.disableIfNotGoerli(network.chainId); ui.disableIfNotSepolia(network.chainId);
} catch (e) { } catch (e) {
console.log("No web3 provider available", e); console.log("No web3 provider available", e);
} }
@ -100,12 +100,9 @@ async function initRLN(ui) {
let signature; let signature;
let membershipId; let membershipId;
let membershipKey; let credentials;
ui.onManualImport((id, key) => {
membershipId = id;
membershipKey = key;
ui.onManualImport((membershipId, credentials) => {
result.encoder = new RLNEncoder( result.encoder = new RLNEncoder(
createEncoder({ createEncoder({
ephemeral: false, ephemeral: false,
@ -113,10 +110,10 @@ async function initRLN(ui) {
}), }),
rlnInstance, rlnInstance,
membershipId, membershipId,
membershipKey credentials
); );
ui.setMembershipInfo(membershipId, membershipKey); ui.setMembershipInfo(membershipId, credentials);
ui.enableDialButton(); ui.enableDialButton();
}); });
@ -124,9 +121,9 @@ async function initRLN(ui) {
const signer = provider.getSigner(); const signer = provider.getSigner();
signature = await signer.signMessage(SIGNATURE_MESSAGE); signature = await signer.signMessage(SIGNATURE_MESSAGE);
membershipKey = await rlnInstance.generateSeededMembershipKey(signature); credentials = await rlnInstance.generateSeededIdentityCredential(signature);
const idCommitment = ethers.utils.hexlify(membershipKey.IDCommitment); const idCommitment = ethers.utils.hexlify(credentials.IDCommitment);
rlnContract.members.forEach((m) => { rlnContract.members.forEach((m) => {
if (m.pubkey._hex === idCommitment) { if (m.pubkey._hex === idCommitment) {
@ -142,21 +139,21 @@ async function initRLN(ui) {
}), }),
rlnInstance, rlnInstance,
membershipId, membershipId,
membershipKey credentials
); );
} }
ui.setMembershipInfo(membershipId, membershipKey); ui.setMembershipInfo(membershipId, credentials);
const network = await provider.getNetwork(); const network = await provider.getNetwork();
ui.enableRegisterButtonForGoerli(network.chainId); ui.enableRegisterButtonForSepolia(network.chainId);
}); });
ui.onRegister(async () => { ui.onRegister(async () => {
ui.setRlnStatus("Trying to register..."); ui.setRlnStatus("Trying to register...");
const event = signature const event = signature
? await rlnContract.registerMember(rlnInstance, signature) ? await rlnContract.registerWithSignature(rlnInstance, signature)
: await rlnContract.registerMemberFromMembershipKey(membershipKey); : await rlnContract.registerWithKey(credentials);
// Update membershipId // Update membershipId
membershipId = event.args.index.toNumber(); membershipId = event.args.index.toNumber();
@ -167,7 +164,7 @@ async function initRLN(ui) {
); );
ui.setRlnStatus("Successfully registered."); ui.setRlnStatus("Successfully registered.");
ui.setMembershipInfo(membershipId, membershipKey); ui.setMembershipInfo(membershipId, credentials);
ui.enableDialButton(); ui.enableDialButton();
}); });
@ -285,16 +282,20 @@ function initUI() {
// Credentials Elements // Credentials Elements
const membershipIdInput = document.getElementById("membership-id"); const membershipIdInput = document.getElementById("membership-id");
const identityKeyInput = document.getElementById("id-key"); const idSecretHashInput = document.getElementById("id-secret-hash");
const commitmentKeyInput = document.getElementById("commitment-key"); const commitmentKeyInput = document.getElementById("commitment-key");
const idTrapdoorInput = document.getElementById("id-trapdoor")
const idNullifierInput = document.getElementById("id-nullifier")
const importManually = document.getElementById("import-manually-button"); const importManually = document.getElementById("import-manually-button");
const importFromWalletButton = document.getElementById( const importFromWalletButton = document.getElementById(
"import-from-wallet-button" "import-from-wallet-button"
); );
const idDiv = document.getElementById("id"); const idDiv = document.getElementById("id");
const keyDiv = document.getElementById("key"); const secretHashDiv = document.getElementById("secret-hash");
const commitmentDiv = document.getElementById("commitment"); const commitmentDiv = document.getElementById("commitment");
const trapdoorDiv = document.getElementById("trapdoor");
const nullifierDiv = document.getElementById("nullifier");
const registerButton = document.getElementById("register-button"); const registerButton = document.getElementById("register-button");
// Waku Elements // Waku Elements
@ -320,13 +321,17 @@ function initUI() {
// monitor & enable buttons if needed // monitor & enable buttons if needed
membershipIdInput.onchange = enableManualImportIfNeeded; membershipIdInput.onchange = enableManualImportIfNeeded;
identityKeyInput.onchange = enableManualImportIfNeeded; idSecretHashInput.onchange = enableManualImportIfNeeded;
commitmentKeyInput.onchange = enableManualImportIfNeeded; commitmentKeyInput.onchange = enableManualImportIfNeeded;
idNullifierInput.onchange = enableManualImportIfNeeded;
idTrapdoorInput.onchange = enableManualImportIfNeeded;
function enableManualImportIfNeeded() { function enableManualImportIfNeeded() {
const isValuesPresent = const isValuesPresent =
identityKeyInput.value && idSecretHashInput.value &&
commitmentKeyInput.value && commitmentKeyInput.value &&
idNullifierInput.value &&
idTrapdoorInput.value &&
membershipIdInput.value; membershipIdInput.value;
if (isValuesPresent) { if (isValuesPresent) {
@ -349,10 +354,12 @@ function initUI() {
setRlnStatus(text) { setRlnStatus(text) {
statusSpan.innerText = text; statusSpan.innerText = text;
}, },
setMembershipInfo(id, key) { setMembershipInfo(id, credential) {
idDiv.innerText = id || "not registered yet"; idDiv.innerText = id || "not registered yet";
keyDiv.innerText = utils.bytesToHex(key.IDKey); secretHashDiv.innerText = utils.bytesToHex(credential.IDSecretHash);
commitmentDiv.innerText = utils.bytesToHex(key.IDCommitment); commitmentDiv.innerText = utils.bytesToHex(credential.IDCommitment);
nullifierDiv.innerText = utils.bytesToHex(credential.IDNullifier);
trapdoorDiv.innerText = utils.bytesToHex(credential.IDTrapdoor);
}, },
setLastMember(index, pubkey) { setLastMember(index, pubkey) {
try { try {
@ -371,9 +378,9 @@ function initUI() {
console.error(err); // TODO: the merkle tree can be in a wrong state. The app should be disabled console.error(err); // TODO: the merkle tree can be in a wrong state. The app should be disabled
} }
}, },
disableIfNotGoerli(chainId) { disableIfNotSepolia(chainId) {
if (!isGoerliChain(chainId)) { if (!isSepolia(chainId)) {
window.alert("Switch to Goerli"); window.alert("Switch to Sepolia");
registerButton.disabled = true; registerButton.disabled = true;
this.disableRetrieveButton(); this.disableRetrieveButton();
@ -387,8 +394,8 @@ function initUI() {
disableRetrieveButton() { disableRetrieveButton() {
retrieveRLNDetailsButton.disabled = true; retrieveRLNDetailsButton.disabled = true;
}, },
enableRegisterButtonForGoerli(chainId) { enableRegisterButtonForSepolia(chainId) {
registerButton.disabled = isGoerliChain(chainId) ? false : true; registerButton.disabled = isSepolia(chainId) ? false : true;
}, },
setAccount(accounts) { setAccount(accounts) {
addressDiv.innerText = accounts.length ? accounts[0] : ""; addressDiv.innerText = accounts.length ? accounts[0] : "";
@ -406,13 +413,16 @@ function initUI() {
}, },
onManualImport(fn) { onManualImport(fn) {
importManually.addEventListener("click", () => { importManually.addEventListener("click", () => {
const idKey = utils.hexToBytes(identityKeyInput.value); const idTrapdoor = utils.hexToBytes(idTrapdoorInput.value);
const idNullifier = utils.hexToBytes(idNullifierInput.value);
const idCommitment = utils.hexToBytes(commitmentKeyInput.value); const idCommitment = utils.hexToBytes(commitmentKeyInput.value);
const idSecretHash = utils.hexToBytes(idSecretHashInput.value);
const membershipId = membershipIdInput.value; const membershipId = membershipIdInput.value;
const membershipKey = new MembershipKey(idKey, idCommitment); const credentials = new IdentityCredential(idTrapdoor, idNullifier, idSecretHash, idCommitment);
fn(membershipId, membershipKey); fn(membershipId, credentials);
}); });
}, },
onWalletImport(fn) { onWalletImport(fn) {
@ -480,6 +490,6 @@ function initUI() {
}; };
} }
function isGoerliChain(id) { function isSepolia(id) {
return id === 5; return id === 11155111;
} }