555 lines
18 KiB
HTML
555 lines
18 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>
|
|
<link
|
|
href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"
|
|
rel="stylesheet"
|
|
/>
|
|
<link href="style.css" rel="stylesheet" />
|
|
<link rel="apple-touch-icon" href="./favicon.png" />
|
|
<link rel="manifest" href="./manifest.json" />
|
|
<link rel="icon" href="./favicon.ico" />
|
|
</head>
|
|
|
|
<body>
|
|
<div class="row rcenter">
|
|
<h1>Waku RLN</h1>
|
|
<button id="connect-wallet" type="button">Connect Wallet</button>
|
|
</div>
|
|
|
|
<span id="status"></span>
|
|
|
|
<h2 class="mu1">Blockchain</h2>
|
|
<hr />
|
|
|
|
<div class="row rcenter">
|
|
<h4>Address</h4>
|
|
<code class="value" id="address"></code>
|
|
</div>
|
|
|
|
<div class="row mu1 rcenter">
|
|
<h4>Contract Data</h4>
|
|
<button disabled id="retrieve-rln-details" type="button">
|
|
Retrieve contract state from blockchain
|
|
</button>
|
|
</div>
|
|
|
|
<div class="row rcenter">
|
|
<h4>Latest membership id on contract</h4>
|
|
<code class="value" id="latest-membership-id">Not loaded yet</code>
|
|
</div>
|
|
|
|
<h2 class="mu1">Credentials</h2>
|
|
<hr />
|
|
|
|
<div class="row">
|
|
<div class="w50">
|
|
<h4>Generate new, or import existing, credentials from wallet:</h4>
|
|
<br />
|
|
<div id="import-from-wallet">
|
|
<button id="import-from-wallet-button" type="button">
|
|
Generate RLN Credentials
|
|
</button>
|
|
</div>
|
|
<br />
|
|
<button disabled id="register-button" type="button">
|
|
Register Credentials in Contract
|
|
</button>
|
|
</div>
|
|
<div class="w50">
|
|
<h4>Import existing credentials manually:</h4>
|
|
<div>
|
|
<label for="membership-id"
|
|
>Membership ID (your index in the RLN smart contract):</label
|
|
>
|
|
<input id="membership-id" name="membership-id" type="text" />
|
|
<label for="id-key">RLN Identity Key (hex string):</label>
|
|
<input id="id-key" name="id-key" type="text" />
|
|
<label for="commitment-key">RLN Commitment Key (hex string):</label>
|
|
<input id="commitment-key" name="commitment-key" type="text" />
|
|
<button disabled id="import-manually-button" type="button">
|
|
Import RLN Credentials
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row rcenter mu1">
|
|
<h4>Membership id</h4>
|
|
<code class="value" id="id">none</code>
|
|
</div>
|
|
<div class="row rcenter">
|
|
<h4>Key</h4>
|
|
<code class="value" id="key">none</code>
|
|
</div>
|
|
<div class="row rcenter">
|
|
<h4>Commitment</h4>
|
|
<code class="value" id="commitment">none</code>
|
|
</div>
|
|
|
|
<h2 class="mu1">Waku</h2>
|
|
<hr />
|
|
<div id="waku-status"></div>
|
|
|
|
<div class="row rcenter mu1 mf">
|
|
<label for="remote-multiaddr">Remote peer's multiaddr</label>
|
|
<input
|
|
id="remote-multiaddr"
|
|
type="text"
|
|
value="/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm"
|
|
/>
|
|
<button disabled id="dial" type="button">Dial</button>
|
|
</div>
|
|
|
|
<div class="row rcenter mf">
|
|
<label for="nick-input">Your nickname</label>
|
|
<input
|
|
class="p100"
|
|
id="nick-input"
|
|
placeholder="Choose a nickname"
|
|
type="text"
|
|
/>
|
|
</div>
|
|
|
|
<div class="row rcenter mf">
|
|
<label for="textInput">Message text</label>
|
|
<input
|
|
class="p100"
|
|
disabled
|
|
id="textInput"
|
|
placeholder="Type your message here"
|
|
type="text"
|
|
/>
|
|
<button disabled id="sendButton" type="button">
|
|
Send message using Light Push
|
|
</button>
|
|
</div>
|
|
<span id="sending-status"></span>
|
|
|
|
<h4 class="mu1">Messages</h4>
|
|
<div id="messages"></div>
|
|
|
|
<script type="module">
|
|
import { utils } from "https://unpkg.com/js-waku@0.30.0/bundle/index.js";
|
|
import { createLightNode } from "https://unpkg.com/js-waku@0.30.0/bundle/lib/create_waku.js";
|
|
import { waitForRemotePeer } from "https://unpkg.com/js-waku@0.30.0/bundle/lib/wait_for_remote_peer.js";
|
|
import {
|
|
EncoderV0,
|
|
DecoderV0,
|
|
} from "https://unpkg.com/js-waku@0.30.0/bundle/lib/waku_message/version_0.js";
|
|
|
|
import { protobuf } from "https://taisukef.github.io/protobuf-es.js/dist/protobuf-es.js";
|
|
|
|
import {
|
|
create,
|
|
MembershipKey,
|
|
RLNDecoder,
|
|
RLNEncoder,
|
|
} from "https://unpkg.com/@waku/rln@0.0.13/bundle/index.js";
|
|
|
|
import { ethers } from "https://unpkg.com/ethers@5.7.2/dist/ethers.esm.min.js";
|
|
|
|
const statusSpan = document.getElementById("status");
|
|
|
|
// Blockchain Elements
|
|
const addressDiv = document.getElementById("address");
|
|
const connectWalletButton = document.getElementById("connect-wallet");
|
|
|
|
const latestMembershipSpan = document.getElementById(
|
|
"latest-membership-id"
|
|
);
|
|
const retrieveRLNDetailsButton = document.getElementById(
|
|
"retrieve-rln-details"
|
|
);
|
|
|
|
// Credentials Elements
|
|
|
|
const membershipIdInput = document.getElementById("membership-id");
|
|
const identityKeyInput = document.getElementById("id-key");
|
|
const commitmentKeyInput = document.getElementById("commitment-key");
|
|
const importManually = document.getElementById("import-manually-button");
|
|
const importFromWalletButton = document.getElementById(
|
|
"import-from-wallet-button"
|
|
);
|
|
|
|
const idDiv = document.getElementById("id");
|
|
const keyDiv = document.getElementById("key");
|
|
const commitmentDiv = document.getElementById("commitment");
|
|
|
|
const registerButton = document.getElementById("register-button");
|
|
|
|
// Waku Elements
|
|
const statusDiv = document.getElementById("waku-status");
|
|
|
|
const remoteMultiAddrInput = document.getElementById("remote-multiaddr");
|
|
const dialButton = document.getElementById("dial");
|
|
|
|
const nicknameInput = document.getElementById("nick-input");
|
|
|
|
const textInput = document.getElementById("textInput");
|
|
const sendButton = document.getElementById("sendButton");
|
|
const sendingStatusSpan = document.getElementById("sending-status");
|
|
|
|
const messagesDiv = document.getElementById("messages");
|
|
|
|
let membershipId,
|
|
membershipKey,
|
|
encoder,
|
|
node,
|
|
nodeConnected,
|
|
rlnInstance;
|
|
|
|
const allMemberships = [];
|
|
let retrievedRLNEvents = false;
|
|
const rlnInstancePromise = create();
|
|
|
|
const DEFAULT_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";
|
|
|
|
// Load zero-kit WASM blob.
|
|
|
|
statusSpan.innerText = "WASM Blob download in progress...";
|
|
rlnInstancePromise.then((_rlnInstance) => {
|
|
rlnInstance = _rlnInstance;
|
|
statusSpan.innerText = "WASM Blob download in progress... done!";
|
|
updateFields();
|
|
});
|
|
|
|
const ContentTopic = "/toy-chat/2/luzhou/proto";
|
|
|
|
// 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"));
|
|
|
|
// Function to update the fields to guide the user by disabling buttons.
|
|
const updateFields = () => {
|
|
if (membershipKey) {
|
|
keyDiv.innerHTML = utils.bytesToHex(membershipKey.IDKey);
|
|
commitmentDiv.innerHTML = utils.bytesToHex(
|
|
membershipKey.IDCommitment
|
|
);
|
|
idDiv.innerHTML = membershipId || "not registered yet";
|
|
|
|
if (membershipId && rlnInstance) {
|
|
encoder = new RLNEncoder(
|
|
new EncoderV0(ContentTopic),
|
|
rlnInstance,
|
|
membershipId,
|
|
membershipKey
|
|
);
|
|
}
|
|
}
|
|
|
|
registerButton.disabled = !(
|
|
membershipKey &&
|
|
retrievedRLNEvents &&
|
|
!membershipId
|
|
);
|
|
|
|
importManually.disabled = !(
|
|
membershipIdInput.value &&
|
|
identityKeyInput.value &&
|
|
commitmentKeyInput.value
|
|
);
|
|
|
|
const readyToSend =
|
|
membershipKey && membershipId && nodeConnected && nicknameInput.value;
|
|
textInput.disabled = !readyToSend;
|
|
sendButton.disabled = !readyToSend;
|
|
|
|
dialButton.disabled = !(node && node.isStarted() && retrievedRLNEvents);
|
|
|
|
retrieveRLNDetailsButton.disabled = !rlnInstance || retrievedRLNEvents;
|
|
};
|
|
|
|
// Blockchain
|
|
|
|
membershipIdInput.onchange = updateFields;
|
|
identityKeyInput.onchange = updateFields;
|
|
commitmentKeyInput.onchange = updateFields;
|
|
|
|
importManually.onclick = () => {
|
|
const idKey = utils.hexToBytes(identityKeyInput.value);
|
|
const idCommitment = utils.hexToBytes(commitmentKeyInput.value);
|
|
membershipKey = new MembershipKey(idKey, idCommitment);
|
|
membershipId = membershipIdInput.value;
|
|
updateFields();
|
|
};
|
|
|
|
importFromWalletButton.onclick = async () => {
|
|
const signer = provider.getSigner();
|
|
|
|
const signature = await signer.signMessage(DEFAULT_SIGNATURE_MESSAGE);
|
|
|
|
membershipKey = await rlnInstance.generateSeededMembershipKey(
|
|
signature
|
|
);
|
|
|
|
const idCommitment = ethers.utils.hexlify(membershipKey.IDCommitment);
|
|
|
|
allMemberships.forEach((m) => {
|
|
if (m.pubkey._hex === idCommitment) {
|
|
membershipId = m.index.toString();
|
|
}
|
|
});
|
|
|
|
updateFields();
|
|
};
|
|
|
|
const checkChain = async (chainId) => {
|
|
retrieveRLNDetailsButton.disabled = retrievedRLNEvents || chainId !== 5;
|
|
registerButton.disabled = !(chainId === 5 && retrievedRLNEvents);
|
|
if (chainId !== 5) {
|
|
alert("Switch to Goerli");
|
|
}
|
|
};
|
|
|
|
const rlnDeployBlk = 7109391;
|
|
const rlnAddress = "0x4252105670fe33d2947e8ead304969849e64f2a6";
|
|
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"
|
|
);
|
|
|
|
let accounts;
|
|
let rlnContract;
|
|
|
|
const handleMembership = (pubkey, index) => {
|
|
try {
|
|
allMemberships.push({ pubkey, index });
|
|
|
|
const idCommitment = ethers.utils.zeroPad(
|
|
ethers.utils.arrayify(pubkey),
|
|
32
|
|
);
|
|
rlnInstance.insertMember(idCommitment);
|
|
const indexInt = index.toNumber();
|
|
if (
|
|
!latestMembershipSpan.innerText ||
|
|
indexInt > latestMembershipSpan.innerText
|
|
) {
|
|
latestMembershipSpan.innerText = indexInt;
|
|
}
|
|
console.debug(
|
|
"IDCommitment registered in tree",
|
|
idCommitment,
|
|
indexInt
|
|
);
|
|
latestMembershipSpan.innerHTML = indexInt;
|
|
} catch (err) {
|
|
console.error(err); // TODO: the merkle tree can be in a wrong state. The app should be disabled
|
|
}
|
|
};
|
|
|
|
const setAccounts = (acc) => {
|
|
accounts = acc;
|
|
addressDiv.innerHTML = accounts.length ? accounts[0] : "";
|
|
};
|
|
|
|
connectWalletButton.onclick = async () => {
|
|
try {
|
|
accounts = await provider.send("eth_requestAccounts", []);
|
|
setAccounts(accounts);
|
|
const network = await provider.getNetwork();
|
|
checkChain(network.chainId);
|
|
|
|
importFromWalletButton.disabled = false;
|
|
} catch (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:
|
|
const alreadyRegisteredMembers = await rlnContract.queryFilter(
|
|
filter,
|
|
rlnDeployBlk
|
|
);
|
|
alreadyRegisteredMembers.forEach((event) => {
|
|
handleMembership(event.args.pubkey, event.args.index, event);
|
|
});
|
|
|
|
retrievedRLNEvents = true;
|
|
|
|
// reacting to new registrations
|
|
rlnContract.on(filter, (pubkey, index, event) => {
|
|
handleMembership(event.args.pubkey, event.args.index, event);
|
|
});
|
|
updateFields();
|
|
};
|
|
|
|
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;
|
|
}
|
|
};
|
|
|
|
// Waku
|
|
nicknameInput.onchange = updateFields;
|
|
nicknameInput.onblur = updateFields;
|
|
|
|
let messages = [];
|
|
|
|
const updateMessages = () => {
|
|
messagesDiv.innerHTML = "<ul>";
|
|
messages.forEach((msg) => {
|
|
messagesDiv.innerHTML += `<li>${msg.msg} - [epoch: ${msg.epoch}, proof: ${msg.proofState} ]</li>`;
|
|
|
|
if (msg.proofState === "verifying...") {
|
|
try {
|
|
console.log("Verifying proof without roots");
|
|
console.time("proof_verify_timer");
|
|
const res = msg.verifyNoRoot();
|
|
console.timeEnd("proof_verify_timer");
|
|
console.log("proof verified without roots", res);
|
|
if (res === undefined) {
|
|
msg.proofState = "no proof attached";
|
|
} else if (res) {
|
|
msg.proofState = "verified.";
|
|
} else {
|
|
msg.proofState = "invalid!";
|
|
}
|
|
} catch (e) {
|
|
msg.proofState = "Error encountered, check console";
|
|
console.error("Error verifying proof:", e);
|
|
}
|
|
updateMessages();
|
|
console.log("Verifying proof with roots", msg.verify());
|
|
}
|
|
});
|
|
messagesDiv.innerHTML += "</ul>";
|
|
};
|
|
|
|
const callback = (wakuMessage) => {
|
|
const { timestamp, nick, text } = ProtoChatMessage.decode(
|
|
wakuMessage.payload
|
|
);
|
|
const time = new Date();
|
|
time.setTime(Number(timestamp) * 1000);
|
|
|
|
let proofState, verify, verifyNoRoot;
|
|
if (typeof wakuMessage.rateLimitProof === "undefined") {
|
|
proofState = "no proof attached";
|
|
} else {
|
|
console.log("Proof received:", wakuMessage.rateLimitProof);
|
|
verify = wakuMessage.verify.bind(wakuMessage);
|
|
verifyNoRoot = wakuMessage.verifyNoRoot.bind(wakuMessage);
|
|
proofState = "verifying...";
|
|
}
|
|
|
|
messages.push({
|
|
msg: `(${nick}) <strong>${utils.bytesToUtf8(
|
|
text
|
|
)}</strong> <i>[${time.toISOString()}]</i>`,
|
|
epoch: wakuMessage.epoch,
|
|
verify,
|
|
verifyNoRoot,
|
|
proofState,
|
|
});
|
|
updateMessages();
|
|
};
|
|
|
|
(async () => {
|
|
statusDiv.innerHTML = "<p>Creating Waku node.</p>";
|
|
node = await createLightNode();
|
|
|
|
statusDiv.innerHTML = "<p>Starting Waku node.</p>";
|
|
await node.start();
|
|
statusDiv.innerHTML = "<p>Waku node started.</p>";
|
|
updateFields();
|
|
})();
|
|
|
|
dialButton.onclick = async () => {
|
|
const ma = remoteMultiAddrInput.value;
|
|
if (!ma) {
|
|
statusDiv.innerHTML = "<p>Error: No multiaddr provided.</p>";
|
|
return;
|
|
}
|
|
statusDiv.innerHTML = "<p>Dialing peer.</p>";
|
|
await node.dial(ma, ["filter", "lightpush"]);
|
|
await waitForRemotePeer(node, ["filter", "lightpush"]);
|
|
statusDiv.innerHTML = "<p>Waku node connected.</p>";
|
|
|
|
await rlnInstancePromise;
|
|
const decoder = new RLNDecoder(
|
|
rlnInstance,
|
|
new DecoderV0(ContentTopic)
|
|
);
|
|
await node.filter.subscribe([decoder], callback);
|
|
statusDiv.innerHTML = "<p>Waku node subscribed.</p>";
|
|
nodeConnected = true;
|
|
updateFields();
|
|
};
|
|
|
|
sendButton.onclick = async () => {
|
|
const text = utils.utf8ToBytes(textInput.value);
|
|
const timestamp = new Date();
|
|
const msg = ProtoChatMessage.create({
|
|
text,
|
|
nick: nicknameInput.value,
|
|
timestamp: Math.floor(timestamp.valueOf() / 1000),
|
|
});
|
|
const payload = ProtoChatMessage.encode(msg).finish();
|
|
console.log("Sending message with proof...");
|
|
sendingStatusSpan.innerText = "sending...";
|
|
await node.lightPush.push(encoder, { payload, timestamp });
|
|
sendingStatusSpan.innerText = "sent!";
|
|
console.log("Message sent!");
|
|
textInput.value = null;
|
|
setTimeout(() => {
|
|
sendingStatusSpan.innerText = "";
|
|
}, 5000);
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|