waku-org
/
waku-lab
mirror of https://github.com/waku-org/waku-lab.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: setup rln-identity example to use merkle proof service

This commit is contained in:
Arseniy Klempner 2024-03-26 22:03:03 -07:00 committed by Arseniy Klempner
parent 5e1be42b9d
commit ab17ee5f21
6 changed files with 308 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

365
examples/rln-identity/index.html
View File

@ -1,206 +1,223 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>RLN Credential management</title>
<link rel="apple-touch-icon" href="./favicon.png" />
<link rel="manifest" href="./manifest.json" />
<link rel="icon" href="./favicon.ico" />
<style>
* {
margin: 0;
padding: 0;
word-wrap: break-word;
box-sizing: border-box;
}
html, <head>
body { <meta charset="UTF-8" />
width: 100%; <meta content="width=device-width, initial-scale=1.0" name="viewport" />
height: 100%; <title>RLN Credential management</title>
max-width: 100%; <link rel="apple-touch-icon" href="./favicon.png" />
max-height: 100%; <link rel="manifest" href="./manifest.json" />
} <link rel="icon" href="./favicon.ico" />
<style>
* {
margin: 0;
padding: 0;
word-wrap: break-word;
box-sizing: border-box;
}
html { html,
font-size: 16px; body {
overflow: hidden; width: 100%;
} height: 100%;
max-width: 100%;
max-height: 100%;
}
body { html {
display: flex; font-size: 16px;
align-items: center; overflow: hidden;
padding: 10px; }
flex-direction: column;
justify-content: center;
}
.container { body {
width: 100%; display: flex;
min-width: 300px; align-items: center;
max-width: 800px; padding: 10px;
height: 100%; flex-direction: column;
display: flex; justify-content: center;
flex-direction: column; }
align-content: space-between;
}
h2 { .container {
text-align: center; width: 100%;
margin-bottom: 5px; min-width: 300px;
} max-width: 800px;
height: 100%;
display: flex;
flex-direction: column;
align-content: space-between;
}
h3 { h2 {
margin-bottom: 10px; text-align: center;
} margin-bottom: 5px;
}
h3:last-of-type { h3 {
margin-bottom: 20px; margin-bottom: 10px;
} }
h2 span, h3:last-of-type {
h3 span { margin-bottom: 20px;
font-weight: normal; }
}
.progress { h2 span,
color: #9ea13b; h3 span {
} font-weight: normal;
}
.success { .progress {
color: #3ba183; color: #9ea13b;
} }
.error { .success {
color: #c84740; color: #3ba183;
} }
input { .error {
padding: 0.5rem; color: #c84740;
} }
select { input {
padding: 0.5rem; padding: 0.5rem;
max-width: 150px; }
}
button { select {
padding: 0.5rem; padding: 0.5rem;
} max-width: 150px;
}
button.progress { button {
color: white; padding: 0.5rem;
background-color: #9ea13b; }
}
button.success { button.progress {
color: white; color: white;
background-color: #3ba183; background-color: #9ea13b;
} }
button.error { button.success {
color: white; color: white;
background-color: #c84740; background-color: #3ba183;
} }
.mb-1 { button.error {
margin-bottom: 1rem; color: white;
} background-color: #c84740;
.mb-2 { }
margin-bottom: 2rem;
}
.mb-3 {
margin-bottom: 3rem;
}
.mt-1 {
margin-top: 1rem;
}
.block { .mb-1 {
display: flex; margin-bottom: 1rem;
justify-content: space-between; }
align-items: center;
}
.hidden { .mb-2 {
display: none; margin-bottom: 2rem;
} }
</style>
</head>
<body>
<div class="container">
<div class="status">
<h3>
<b>Status:</b>
<span id="status" class="progress">Starting...</span>
</h3>
</div>
<div class="block mb-1"> .mb-3 {
<h2>Wallet</h2> margin-bottom: 3rem;
<button id="connect">Connect</button> }
</div>
<div class="block mb-1"> .mt-1 {
<h2>Keystore</h2> margin-top: 1rem;
<div> }
<button id="import">Import</button>
<input id="import-file" class="hidden" type="file" />
<button id="export">Export</button>
</div>
</div>
<hr /> .block {
display: flex;
justify-content: space-between;
align-items: center;
}
<h3 class="mt-1">Existing credentials</h3> .hidden {
display: none;
}
</style>
</head>
<div class="block mb-2"> <body>
<select id="keystore"></select> <div class="container">
<div> <div class="status">
<input id="password" placeholder="password" /> <h3>
<button id="read-credential">Read</button> <b>Status:</b>
</div> <span id="status" class="progress">Starting...</span>
</div> </h3>
</div>
<div class="block mb-3"> <div class="block mb-1">
<h3>Create new (will use the password)</h3> <h2>Wallet</h2>
<button id="register-new">Register</button> <button id="connect">Connect</button>
</div> </div>
<div id="current-credentials"> <div class="block mb-1">
<div class="block mb-1"> <h2>Keystore</h2>
<p>Keystore hash</p> <div>
<code>none</code> <button id="import">Import</button>
</div> <input id="import-file" class="hidden" type="file" />
<button id="export">Export</button>
<div class="block mb-1">
<p>Membership ID</p>
<code>none</code>
</div>
<div class="block mb-1">
<p>Secret Hash</p>
<code>none</code>
</div>
<div class="block mb-1">
<p>Commitment</p>
<code>none</code>
</div>
<div class="block mb-1">
<p>Nullifier</p>
<code>none</code>
</div>
<div class="block mb-1">
<p>Trapdoor</p>
<code>none</code>
</div>
</div> </div>
</div> </div>
<script src="./index.js"></script> <hr />
</body>
</html> <h3 class="mt-1">Existing credentials</h3>
<div class="block mb-2">
<select id="keystore"></select>
<div>
<input id="password" placeholder="password" />
<button id="read-credential">Read</button>
</div>
</div>
<div class="block mb-3">
<h3>Create new (will use the password)</h3>
<button id="register-new">Register</button>
</div>
<div id="current-credentials">
<div class="block mb-1">
<p>Keystore hash</p>
<code>none</code>
</div>
<div class="block mb-1">
<p>Membership ID</p>
<code>none</code>
</div>
<div class="block mb-1">
<p>Secret Hash</p>
<code>none</code>
</div>
<div class="block mb-1">
<p>Commitment</p>
<code>none</code>
</div>
<div class="block mb-1">
<p>Nullifier</p>
<code>none</code>
</div>
<div class="block mb-1">
<p>Trapdoor</p>
<code>none</code>
</div>
</div>
</div>
<div class="chatArea" id="chat-area">
<h2>Chat</h2>
<ul id="messages"></ul>
<div>
<button id="create-coders-button">Create Encoder/Decoder</button>
<input id="nick" placeholder="Choose a nickname" type="text" />
<textarea id="text" placeholder="Type your message here" type="text"></textarea>
<button id="send" type="button">Send message</button>
</div>
</div>
<script src="./index.js"></script>
</body>
</html>

2
examples/rln-identity/package.json
View File

@ -7,7 +7,7 @@
"start": "webpack-dev-server" "start": "webpack-dev-server"
}, },
"dependencies": { "dependencies": {
"@waku/rln": "0.1.1-77ba0a6", "@waku/rln": "0.1.2",
"@waku/sdk": "^0.0.22", "@waku/sdk": "^0.0.22",
"@waku/utils": "^0.0.14", "@waku/utils": "^0.0.14",
"ethers": "^5.7.2", "ethers": "^5.7.2",

4
examples/rln-identity/src/index.js
View File

@ -10,6 +10,8 @@ async function run() {
readCredential, readCredential,
saveLocalKeystore, saveLocalKeystore,
importLocalKeystore, importLocalKeystore,
createEncoderDecoder,
onSend
} = await initRLN({ } = await initRLN({
onStatusChange, onStatusChange,
}); });
@ -21,6 +23,8 @@ async function run() {
readCredential, readCredential,
saveLocalKeystore, saveLocalKeystore,
importLocalKeystore, importLocalKeystore,
createEncoderDecoder,
onSend
}); });
} }

77
examples/rln-identity/src/rln.js
View File

@ -1,11 +1,23 @@
import { createRLN, Keystore, extractMetaMaskSigner } from "@waku/rln"; import { createRLN, Keystore, extractMetaMaskSigner } from "@waku/rln";
import { createLightNode, waitForRemotePeer } from "@waku/sdk";
import { randomNumber } from "./utils"; import { randomNumber } from "./utils";
import { SIGNATURE_MESSAGE } from "./const"; import { SIGNATURE_MESSAGE } from "./const";
import protobuf from "protobufjs";
export const CONTENT_TOPIC = "/toy-chat/2/luzhou/proto";
export 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, "string"));
export async function initRLN({ onStatusChange }) { export async function initRLN({ onStatusChange }) {
onStatusChange("Initializing RLN..."); onStatusChange("Initializing RLN...");
let rln; let rln;
let encoder;
let decoder;
let node;
try { try {
rln = await createRLN(); rln = await createRLN();
} catch (err) { } catch (err) {
@ -13,24 +25,34 @@ export async function initRLN({ onStatusChange }) {
throw Error(err); throw Error(err);
} }
onStatusChange("RLN initialized", "success"); onStatusChange("RLN initialized. Initializing Waku...");
node = await createLightNode({
defaultBootstrap: true,
});
onStatusChange("Waiting for peers");
await node.start();
await waitForRemotePeer(node);
onStatusChange("RLN initialized. Waku peer connected.", "success");
const connectWallet = async () => { const connectWallet = async () => {
let signer; let signer;
try { try {
onStatusChange("Connecting to wallet..."); onStatusChange("Connecting to wallet...");
signer = await extractMetaMaskSigner(); signer = await extractMetaMaskSigner();
console.log("connected metamask")
} catch (err) { } catch (err) {
onStatusChange(`Failed to access MetaMask: ${err}`, "error"); onStatusChange(`Failed to access MetaMask: ${err}`, "error");
throw Error(err); throw Error(err);
} }
console.log("reading local keystore")
try { try {
onStatusChange("Connecting to Ethereum..."); onStatusChange("Connecting to Ethereum...");
const localKeystore = readLocalKeystore(); const localKeystore = readLocalKeystore();
console.log("got local keystore")
console.log(localKeystore)
rln.keystore = Keystore.fromString(localKeystore); rln.keystore = Keystore.fromString(localKeystore);
await rln.start({ signer }); await rln.start({ signer, fetchMembersFromService: true });
} catch (err) { } catch (err) {
onStatusChange(`Failed to connect to Ethereum: ${err}`, "error"); onStatusChange(`Failed to connect to Ethereum: ${err}`, "error");
throw Error(err); throw Error(err);
@ -50,13 +72,32 @@ export async function initRLN({ onStatusChange }) {
); );
const credential = await rln.registerMembership({ signature }); const credential = await rln.registerMembership({ signature });
if (!rln.keystore) {
rln.keystore = Keystore.create();
}
const credStr = JSON.stringify({
treeIndex: credential.membership.treeIndex,
identityCredential: {
idCommitment: credential.identity.IDCommitment,
idNullifier: credential.identity.IDNullifier,
idSecretHash: credential.identity.IDSecretHash,
idTrapdoor: credential.identity.IDTrapdoor
},
membershipContract: {
chainId: credential.membership.chainId,
address: credential.membership.address
}
});
console.log(credential)
console.log(credStr)
const hash = await rln.keystore.addCredential(credential, password); const hash = await rln.keystore.addCredential(credential, password);
console.log(rln.keystore)
return { hash, credential }; return { hash, credential };
}; };
const readKeystoreOptions = () => { const readKeystoreOptions = () => {
return rln.keystore.keys(); return rln.keystore?.keys();
}; };
const readCredential = async (hash, password) => { const readCredential = async (hash, password) => {
@ -73,6 +114,32 @@ export async function initRLN({ onStatusChange }) {
rln.keystore = Keystore.fromString(keystoreStr) || Keystore.create(); rln.keystore = Keystore.fromString(keystoreStr) || Keystore.create();
}; };
const createEncoderDecoder = async (credentials) => {
encoder = await rln.createEncoder({
ephemeral: false,
contentTopic: CONTENT_TOPIC,
credentials,
fetchMembersFromService: true
});
decoder = rln.createDecoder(CONTENT_TOPIC);
return { encoder, decoder }
}
const onSend = async (nick, text) => {
const timestamp = new Date();
const msg = ProtoChatMessage.create({
text,
nick,
timestamp: Math.floor(timestamp.valueOf() / 1000),
});
const payload = ProtoChatMessage.encode(msg).finish();
console.log("Sending message with proof...");
const res = await node.lightPush.send(encoder, { payload, timestamp });
console.log("Message sent:", res);
};
return { return {
rln, rln,
connectWallet, connectWallet,
@ -81,6 +148,8 @@ export async function initRLN({ onStatusChange }) {
readCredential, readCredential,
saveLocalKeystore, saveLocalKeystore,
importLocalKeystore, importLocalKeystore,
createEncoderDecoder,
onSend
}; };
} }

39
examples/rln-identity/src/ui.js
View File

@ -1,5 +1,6 @@
import { renderBytes } from "./utils"; import { renderBytes } from "./utils";
// Identity
const status = document.getElementById("status"); const status = document.getElementById("status");
const connectWalletButton = document.getElementById("connect"); const connectWalletButton = document.getElementById("connect");
const importKeystoreButton = document.getElementById("import"); const importKeystoreButton = document.getElementById("import");
@ -10,6 +11,16 @@ const keystorePassword = document.getElementById("password");
const readCredentialButton = document.getElementById("read-credential"); const readCredentialButton = document.getElementById("read-credential");
const registerNewCredentialButton = document.getElementById("register-new"); const registerNewCredentialButton = document.getElementById("register-new");
const currentCredentials = document.getElementById("current-credentials"); const currentCredentials = document.getElementById("current-credentials");
const createEncoderDecoderButton = document.getElementById("create-coders-button");
// Chat
const chat = document.getElementById("chat-area");
const messages = document.getElementById("messages");
const nickInput = document.getElementById("nick");
const textInput = document.getElementById("text");
const sendButton = document.getElementById("send");
export function initUI() { export function initUI() {
const _renderCredential = (hash, credential) => { const _renderCredential = (hash, credential) => {
@ -59,11 +70,15 @@ export function initUI() {
readCredential, readCredential,
saveLocalKeystore, saveLocalKeystore,
importLocalKeystore, importLocalKeystore,
createEncoderDecoder,
onSend
}) => { }) => {
connectWalletButton.addEventListener("click", async () => { connectWalletButton.addEventListener("click", async () => {
await connectWallet(); await connectWallet();
const keystoreKeys = readKeystoreOptions(); const keystoreKeys = readKeystoreOptions();
_renderKeystoreOptions(keystoreKeys); if (keystoreKeys) {
_renderKeystoreOptions(keystoreKeys);
}
}); });
registerNewCredentialButton.addEventListener("click", async () => { registerNewCredentialButton.addEventListener("click", async () => {
@ -104,6 +119,7 @@ export function initUI() {
} }
const credential = await readCredential(currentHash, password); const credential = await readCredential(currentHash, password);
console.log(credential)
_renderCredential(currentHash, credential); _renderCredential(currentHash, credential);
}); });
@ -137,6 +153,27 @@ export function initUI() {
link.download = filename; link.download = filename;
link.click(); link.click();
}); });
createEncoderDecoderButton.addEventListener("click", async () => {
const currentHash = keystoreOptions.value;
const password = keystorePassword.value;
const credential = await readCredential(currentHash, password);
const { encoder, decoder } = await createEncoderDecoder(credential)
console.log('Encoder and Decoder created:', encoder, decoder);
});
sendButton.addEventListener("click", async () => {
const nick = nickInput.value;
const text = textInput.value;
if (!nick || !text) {
console.log("Not sending message: missing nick or text.");
return;
}
await onSend(nick, text);
textInput.value = "";
});
}; };
return { return {

2
package-lock.json generated
View File

@ -1,5 +1,5 @@
{ {
"name": "waku-lab", "name": "lab.waku.org",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {