349 lines
12 KiB
HTML
349 lines
12 KiB
HTML
<!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>
|
|
<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/>
|
|
<button id='generate-credentials' type='button' disabled>Generate RLN Credentials</button>
|
|
<p>Or import existing ones:</p><br/>
|
|
|
|
<div>
|
|
<label for="membership-id">Membership ID (your index in the RLN smart contract):</label>
|
|
<input id="membership-id" name="membership-id" type="text"><br>
|
|
<label for="id-key">RLN Identity Key (hex string):</label>
|
|
<input id="id-key" name="id-key" type="text"><br>
|
|
<label for="commitment-key">RLN Commitment Key (hex string):</label>
|
|
<input id="commitment-key" name="commitment-key" type="text"><br>
|
|
<button disabled id='import-button' type='button'>Import RLN Credentials</button>
|
|
</div>
|
|
|
|
<div><h2>Credentials</h2>
|
|
<div><h3>Membership id</h3>
|
|
<div id="id"></div>
|
|
</div>
|
|
<div><h3>Key</h3>
|
|
<div id="key"></div>
|
|
</div>
|
|
<div><h3>Commitment</h3>
|
|
<div id="commitment"></div>
|
|
</div>
|
|
<button id='register-button' type='button' disabled>Register Credentials in Contract</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div><h1>Waku</h1>
|
|
<div id='status'></div>
|
|
<br/>
|
|
<label for='nick-input'>Your nickname</label>
|
|
<input id='nick-input' placeholder='Choose a nickname' type='text'>
|
|
<button disabled id='set-nick' type='button'>Set nickname</button>
|
|
<br/>
|
|
|
|
<label for='textInput'>Message text</label>
|
|
<input id='textInput' placeholder='Type your message here' type='text' disabled>
|
|
<button id='sendButton' type='button' disabled>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-29436ea/bundle/index.js';
|
|
import {createLightNode} from 'https://unpkg.com/js-waku@0.29.0-29436ea/bundle/lib/create_waku.js'
|
|
import {waitForRemotePeer} from 'https://unpkg.com/js-waku@0.29.0-29436ea/bundle/lib/wait_for_remote_peer.js'
|
|
import {
|
|
PeerDiscoveryStaticPeers
|
|
} from "https://unpkg.com/js-waku@0.29.0-29436ea/bundle/lib/peer_discovery_static_list";
|
|
import {
|
|
getPredefinedBootstrapNodes
|
|
} from "https://unpkg.com/js-waku@0.29.0-29436ea/bundle/lib/predefined_bootstrap_nodes";
|
|
import {EncoderV0, DecoderV0} from 'https://unpkg.com/js-waku@0.29.0-29436ea/bundle/lib/waku_message/version_0.js'
|
|
|
|
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 {ethers} from "https://unpkg.com/ethers@5.0.7/dist/ethers-all.esm.min.js"
|
|
|
|
// RLN Elements
|
|
const generateCredsButton = document.getElementById('generate-credentials')
|
|
const idDiv = document.getElementById('id');
|
|
const keyDiv = document.getElementById('key');
|
|
const commitmentDiv = document.getElementById('commitment');
|
|
const membershipIdInput = document.getElementById('membership-id')
|
|
const identityKeyInput = document.getElementById('id-key')
|
|
const commitmentKeyInput = document.getElementById('commitment-key')
|
|
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;
|
|
(async () => {
|
|
rlnInstance = await create()
|
|
generateCredsButton.disabled = false;
|
|
connectWalletButton.disabled = false;
|
|
})();
|
|
|
|
// Waku Elements
|
|
const statusDiv = document.getElementById('status');
|
|
|
|
const nicknameInput = document.getElementById('nick-input')
|
|
const setNickButton = document.getElementById('set-nick')
|
|
|
|
const textInput = document.getElementById('textInput');
|
|
const sendButton = document.getElementById('sendButton');
|
|
const walletDiv = document.getElementById('wallet');
|
|
|
|
const messagesDiv = document.getElementById('messages')
|
|
|
|
let membershipId;
|
|
let membershipKey;
|
|
let encoder;
|
|
let nodeConnected;
|
|
let nick;
|
|
let retrievedRLNEvents = 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),
|
|
rlnInstance,
|
|
membershipId,
|
|
membershipKey
|
|
);
|
|
}
|
|
}
|
|
|
|
importButton.disabled = !(membershipIdInput.value
|
|
&& identityKeyInput.value
|
|
&& commitmentKeyInput.value);
|
|
|
|
const readyToSend = (membershipKey && membershipId && nodeConnected && nick)
|
|
textInput.disabled = !readyToSend;
|
|
sendButton.disabled = !readyToSend;
|
|
|
|
setNickButton.disabled = !nicknameInput.value;
|
|
}
|
|
|
|
generateCredsButton.onclick = () => {
|
|
membershipKey = rlnInstance.generateMembershipKey()
|
|
updateFields();
|
|
}
|
|
|
|
membershipIdInput.onchange = updateFields;
|
|
identityKeyInput.onchange = updateFields;
|
|
commitmentKeyInput.onchange = updateFields;
|
|
|
|
importButton.onclick = () => {
|
|
const idKey = utils.hexToBytes(identityKeyInput.value)
|
|
const idCommitment = utils.hexToBytes(commitmentKeyInput.value)
|
|
membershipKey = new MembershipKey(idKey, idCommitment)
|
|
membershipId = membershipIdInput.value ;
|
|
updateFields()
|
|
}
|
|
|
|
// Protobuf
|
|
const ProtoChatMessage = new protobuf.Type("ChatMessage")
|
|
.add(new protobuf.Field("timestamp", 1, "uint64"))
|
|
.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 = "<ul>"
|
|
messages.forEach(msg => div.innerHTML += "<li>" + msg + "</li>")
|
|
div.innerHTML += "</ul>"
|
|
}
|
|
|
|
const callback = (wakuMessage) => {
|
|
const {timestamp, nick, text} = ProtoChatMessage.decode(wakuMessage.payload)
|
|
const time = new Date();
|
|
time.setTime(Number(timestamp));
|
|
|
|
messages.push(`(${nick}) <strong>${utils.bytesToUtf8(text)}</strong> <i>[${time.toString()}]</i>`);
|
|
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;
|
|
(async () => {
|
|
statusDiv.innerHTML = '<p>Creating Waku node.</p>';
|
|
node = await createLightNode({
|
|
libp2p: {
|
|
peerDiscovery: [
|
|
new PeerDiscoveryStaticPeers(getPredefinedBootstrapNodes("test")),
|
|
],
|
|
},
|
|
});
|
|
|
|
statusDiv.innerHTML = '<p>Starting Waku node.</p>';
|
|
await node.start();
|
|
statusDiv.innerHTML = '<p>Waku node started.</p>';
|
|
await waitForRemotePeer(node, ["filter", "lightpush"]);
|
|
statusDiv.innerHTML = '<p>Waku node connected.</p>';
|
|
await node.filter.subscribe([decoder], callback)
|
|
nodeConnected = true;
|
|
updateFields()
|
|
})()
|
|
|
|
sendButton.onclick = async () => {
|
|
const text = utils.utf8ToBytes(textInput.value);
|
|
const timestamp = new Date();
|
|
const msg = ProtoChatMessage.create({text, nick, timestamp: timestamp.valueOf()});
|
|
const payload = ProtoChatMessage.encode(msg).finish();
|
|
console.log("Sending message with proof...")
|
|
await node.lightPush.push(encoder, {payload, timestamp});
|
|
console.log("Message sent!")
|
|
textInput.value = null;
|
|
};
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|