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

feat(rln-js): populate merkle tree and register credentials

This commit is contained in:
Richard Ramos 2022-09-27 12:24:43 -04:00
parent f7b4e6b6f7
commit 449dd59d5e
No known key found for this signature in database
GPG Key ID: BD36D48BC9FFC88C
1 changed files with 146 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

157
rln-js/index.html
View File

@ -10,6 +10,14 @@
<body> <body>
<div><h1>RLN</h1> <div><h1>RLN</h1>
<div><h2>Wallet</h2>
<div id='wallet'></div> <button id='connect-wallet' type='button' disabled>Connect Wallet</button>
</div>
<div><h2>RLN</h2>
<button id='retrieve-rln-details' type='button' disabled>Retrieve RLN details</button>
</div>
<p>You can either generate new credentials:</p><br/> <p>You can either generate new credentials:</p><br/>
<button id='generate-credentials' type='button' disabled>Generate RLN Credentials</button> <button id='generate-credentials' type='button' disabled>Generate RLN Credentials</button>
<p>Or import existing ones:</p><br/> <p>Or import existing ones:</p><br/>
@ -34,6 +42,7 @@
<div><h3>Commitment</h3> <div><h3>Commitment</h3>
<div id="commitment"></div> <div id="commitment"></div>
</div> </div>
<button id='register-button' type='button' disabled>Register Credentials in Contract</button>
</div> </div>
</div> </div>
@ -68,6 +77,8 @@
import {create, MembershipKey, RLNEncoder} from "https://unpkg.com/@waku/rln@0.0.8-964df01/bundle/index.js"; import {create, MembershipKey, RLNEncoder} from "https://unpkg.com/@waku/rln@0.0.8-964df01/bundle/index.js";
import {ethers} from "https://unpkg.com/ethers@5.0.7/dist/ethers-all.esm.min.js"
// RLN Elements // RLN Elements
const generateCredsButton = document.getElementById('generate-credentials') const generateCredsButton = document.getElementById('generate-credentials')
const idDiv = document.getElementById('id'); const idDiv = document.getElementById('id');
@ -77,11 +88,15 @@
const identityKeyInput = document.getElementById('id-key') const identityKeyInput = document.getElementById('id-key')
const commitmentKeyInput = document.getElementById('commitment-key') const commitmentKeyInput = document.getElementById('commitment-key')
const importButton = document.getElementById('import-button') const importButton = document.getElementById('import-button')
const connectWalletButton = document.getElementById('connect-wallet');
const retrieveRLNDetailsButton = document.getElementById('retrieve-rln-details')
const registerButton = document.getElementById('register-button');
let rlnInstance; let rlnInstance;
(async () => { (async () => {
rlnInstance = await create() rlnInstance = await create()
generateCredsButton.disabled = false; generateCredsButton.disabled = false;
connectWalletButton.disabled = false;
})(); })();
// Waku Elements // Waku Elements
@ -92,6 +107,7 @@
const textInput = document.getElementById('textInput'); const textInput = document.getElementById('textInput');
const sendButton = document.getElementById('sendButton'); const sendButton = document.getElementById('sendButton');
const walletDiv = document.getElementById('wallet');
const messagesDiv = document.getElementById('messages') const messagesDiv = document.getElementById('messages')
@ -100,20 +116,25 @@
let encoder; let encoder;
let nodeConnected; let nodeConnected;
let nick; let nick;
let retrievedRLNEvents = false;
const updateFields = () => { const updateFields = () => {
if (membershipKey && membershipId) { if (membershipKey) {
keyDiv.innerHTML = utils.bytesToHex(membershipKey.IDKey) keyDiv.innerHTML = utils.bytesToHex(membershipKey.IDKey)
commitmentDiv.innerHTML = utils.bytesToHex(membershipKey.IDCommitment) commitmentDiv.innerHTML = utils.bytesToHex(membershipKey.IDCommitment)
idDiv.innerHTML = membershipId idDiv.innerHTML = membershipId || "-"
encoder = new RLNEncoder(
new EncoderV0(ContentTopic), if (membershipId) {
rlnInstance, encoder = new RLNEncoder(
membershipId, new EncoderV0(ContentTopic),
membershipKey rlnInstance,
); membershipId,
membershipKey
);
}
} }
importButton.disabled = !(membershipIdInput.value importButton.disabled = !(membershipIdInput.value
&& identityKeyInput.value && identityKeyInput.value
&& commitmentKeyInput.value); && commitmentKeyInput.value);
@ -127,7 +148,7 @@
generateCredsButton.onclick = () => { generateCredsButton.onclick = () => {
membershipKey = rlnInstance.generateMembershipKey() membershipKey = rlnInstance.generateMembershipKey()
updateFields() updateFields();
} }
membershipIdInput.onchange = updateFields; membershipIdInput.onchange = updateFields;
@ -138,7 +159,7 @@
const idKey = utils.hexToBytes(identityKeyInput.value) const idKey = utils.hexToBytes(identityKeyInput.value)
const idCommitment = utils.hexToBytes(commitmentKeyInput.value) const idCommitment = utils.hexToBytes(commitmentKeyInput.value)
membershipKey = new MembershipKey(idKey, idCommitment) membershipKey = new MembershipKey(idKey, idCommitment)
membershipId = membershipIdInput.value; membershipId = membershipIdInput.value ;
updateFields() updateFields()
} }
@ -176,6 +197,120 @@
updateMessages(messages, messagesDiv) updateMessages(messages, messagesDiv)
} }
const checkChain = async (chainId) => {
retrieveRLNDetailsButton.disabled = retrievedRLNEvents || chainId != 5;
registerButton.disabled = !(chainId == 5 && retrievedRLNEvents);
if(chainId != 5){
alert("Switch to Goerli")
}
}
const checkCurrentChain = async () => {
const network = await provider.getNetwork();
checkChain(network.chainId);
}
const rlnDeployBlk = 7677135;
const rlnAddress = "0x367F3e869cF2E1DD28644E308b42652cb6fcDA72";
const rlnAbi = [
"function MEMBERSHIP_DEPOSIT() public view returns(uint256)",
"function register(uint256 pubkey) external payable",
"function withdraw(uint256 secret, uint256 _pubkeyIndex, address payable receiver) external",
"event MemberRegistered(uint256 pubkey, uint256 index)",
"event MemberWithdrawn(uint256 pubkey, uint256 index)"
];
const provider = new ethers.providers.Web3Provider(window.ethereum, "any");
checkCurrentChain();
let accounts;
let rlnContract;
const handleMembership = (pubkey, index, event) => {
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){
alert(err); // TODO: the merkle tree can be in a wrong state. The app should be disabled
}
}
const setAccounts = acc => {
accounts = acc;
walletDiv.innerHTML = accounts.length ? accounts[0] : "";
}
connectWalletButton.onclick = async () => {
try {
accounts = await provider.send("eth_requestAccounts", []);
setAccounts(accounts);
checkCurrentChain();
} catch (e) {
("No web3 provider available", e);
}
};
retrieveRLNDetailsButton.onclick = async () => {
rlnContract = new ethers.Contract(rlnAddress, rlnAbi, provider);
const filter = rlnContract.filters.MemberRegistered()
// populating merkle tree:
const alreadyRegisteredMembers = await rlnContract.queryFilter(filter, rlnDeployBlk)
alreadyRegisteredMembers.forEach(event => {
handleMembership(event.args.pubkey, event.args.index, event);
});
alert("Loaded all events from contract");
retrievedRLNEvents = true;
// TODO: at this point it should be possible to register a credential and send messages
// TODO: emit an event to enable message form and register button
retrieveRLNDetailsButton.disabled = true;
registerButton.disabled = false;
// reacting to new registrations
rlnContract.on(filter, (pubkey, index, event) => {
handleMembership(event.args.pubkey, event.args.index, event);
});
}
window.ethereum.on('accountsChanged', setAccounts);
window.ethereum.on('chainChanged', chainId => {
checkChain(parseInt(chainId, 16));
});
registerButton.onclick = async () => {
try {
registerButton.disabled = true;
const pubkey = ethers.BigNumber.from(membershipKey.IDCommitment);
const price = await rlnContract.MEMBERSHIP_DEPOSIT();
const signer = provider.getSigner()
const rlnContractWithSigner = rlnContract.connect(signer);
const txResponse = await rlnContractWithSigner.register(pubkey, {value: price});
console.log("Transaction broadcasted:", txResponse);
const txReceipt = await txResponse.wait();
console.log("Transaction receipt", txReceipt);
// Update membershipId
membershipId = txReceipt.events[0].args.index.toNumber();
console.log("Obtained index for current membership credentials", membershipId);
updateFields();
registerButton.disabled = false;
} catch(err) {
alert(err);
registerButton.disabled = false;
}
}
let node; let node;
(async () => { (async () => {
statusDiv.innerHTML = '<p>Creating Waku node.</p>'; statusDiv.innerHTML = '<p>Creating Waku node.</p>';