mirror of https://github.com/waku-org/waku-lab.git
feat: setup rln-identity example to use merkle proof service
This commit is contained in:
Arseniy Klempner
Arseniy Klempner
parent
5e1be42b9d
commit
ab17ee5f21
|
|
@ -1,206 +1,223 @@
|
|||
<!DOCTYPE html>
|
||||
<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,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
<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 {
|
||||
font-size: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
html {
|
||||
font-size: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
min-width: 300px;
|
||||
max-width: 800px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: space-between;
|
||||
}
|
||||
body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.container {
|
||||
width: 100%;
|
||||
min-width: 300px;
|
||||
max-width: 800px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: space-between;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
h2 {
|
||||
text-align: center;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
h3:last-of-type {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
h3 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
h2 span,
|
||||
h3 span {
|
||||
font-weight: normal;
|
||||
}
|
||||
h3:last-of-type {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.progress {
|
||||
color: #9ea13b;
|
||||
}
|
||||
h2 span,
|
||||
h3 span {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.success {
|
||||
color: #3ba183;
|
||||
}
|
||||
.progress {
|
||||
color: #9ea13b;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #c84740;
|
||||
}
|
||||
.success {
|
||||
color: #3ba183;
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
.error {
|
||||
color: #c84740;
|
||||
}
|
||||
|
||||
select {
|
||||
padding: 0.5rem;
|
||||
max-width: 150px;
|
||||
}
|
||||
input {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
select {
|
||||
padding: 0.5rem;
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
button.progress {
|
||||
color: white;
|
||||
background-color: #9ea13b;
|
||||
}
|
||||
button {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
button.success {
|
||||
color: white;
|
||||
background-color: #3ba183;
|
||||
}
|
||||
button.progress {
|
||||
color: white;
|
||||
background-color: #9ea13b;
|
||||
}
|
||||
|
||||
button.error {
|
||||
color: white;
|
||||
background-color: #c84740;
|
||||
}
|
||||
button.success {
|
||||
color: white;
|
||||
background-color: #3ba183;
|
||||
}
|
||||
|
||||
.mb-1 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.mb-2 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.mb-3 {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.mt-1 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
button.error {
|
||||
color: white;
|
||||
background-color: #c84740;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.mb-1 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status">
|
||||
<h3>
|
||||
<b>Status:</b>
|
||||
<span id="status" class="progress">Starting...</span>
|
||||
</h3>
|
||||
</div>
|
||||
.mb-2 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
<div class="block mb-1">
|
||||
<h2>Wallet</h2>
|
||||
<button id="connect">Connect</button>
|
||||
</div>
|
||||
.mb-3 {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
<div class="block mb-1">
|
||||
<h2>Keystore</h2>
|
||||
<div>
|
||||
<button id="import">Import</button>
|
||||
<input id="import-file" class="hidden" type="file" />
|
||||
<button id="export">Export</button>
|
||||
</div>
|
||||
</div>
|
||||
.mt-1 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
<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">
|
||||
<select id="keystore"></select>
|
||||
<div>
|
||||
<input id="password" placeholder="password" />
|
||||
<button id="read-credential">Read</button>
|
||||
</div>
|
||||
</div>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status">
|
||||
<h3>
|
||||
<b>Status:</b>
|
||||
<span id="status" class="progress">Starting...</span>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="block mb-3">
|
||||
<h3>Create new (will use the password)</h3>
|
||||
<button id="register-new">Register</button>
|
||||
</div>
|
||||
<div class="block mb-1">
|
||||
<h2>Wallet</h2>
|
||||
<button id="connect">Connect</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 class="block mb-1">
|
||||
<h2>Keystore</h2>
|
||||
<div>
|
||||
<button id="import">Import</button>
|
||||
<input id="import-file" class="hidden" type="file" />
|
||||
<button id="export">Export</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
<hr />
|
||||
|
||||
<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>
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
"start": "webpack-dev-server"
|
||||
},
|
||||
"dependencies": {
|
||||
"@waku/rln": "0.1.1-77ba0a6",
|
||||
"@waku/rln": "0.1.2",
|
||||
"@waku/sdk": "^0.0.22",
|
||||
"@waku/utils": "^0.0.14",
|
||||
"ethers": "^5.7.2",
|
||||
|
|
|
|||
|
|
@ -10,6 +10,8 @@ async function run() {
|
|||
readCredential,
|
||||
saveLocalKeystore,
|
||||
importLocalKeystore,
|
||||
createEncoderDecoder,
|
||||
onSend
|
||||
} = await initRLN({
|
||||
onStatusChange,
|
||||
});
|
||||
|
|
@ -21,6 +23,8 @@ async function run() {
|
|||
readCredential,
|
||||
saveLocalKeystore,
|
||||
importLocalKeystore,
|
||||
createEncoderDecoder,
|
||||
onSend
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,23 @@
|
|||
import { createRLN, Keystore, extractMetaMaskSigner } from "@waku/rln";
|
||||
import { createLightNode, waitForRemotePeer } from "@waku/sdk";
|
||||
import { randomNumber } from "./utils";
|
||||
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 }) {
|
||||
onStatusChange("Initializing RLN...");
|
||||
|
||||
let rln;
|
||||
let encoder;
|
||||
let decoder;
|
||||
let node;
|
||||
try {
|
||||
rln = await createRLN();
|
||||
} catch (err) {
|
||||
|
|
@ -13,24 +25,34 @@ export async function initRLN({ onStatusChange }) {
|
|||
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 () => {
|
||||
let signer;
|
||||
try {
|
||||
onStatusChange("Connecting to wallet...");
|
||||
signer = await extractMetaMaskSigner();
|
||||
console.log("connected metamask")
|
||||
} catch (err) {
|
||||
onStatusChange(`Failed to access MetaMask: ${err}`, "error");
|
||||
throw Error(err);
|
||||
}
|
||||
|
||||
console.log("reading local keystore")
|
||||
try {
|
||||
onStatusChange("Connecting to Ethereum...");
|
||||
const localKeystore = readLocalKeystore();
|
||||
console.log("got local keystore")
|
||||
console.log(localKeystore)
|
||||
rln.keystore = Keystore.fromString(localKeystore);
|
||||
|
||||
await rln.start({ signer });
|
||||
await rln.start({ signer, fetchMembersFromService: true });
|
||||
} catch (err) {
|
||||
onStatusChange(`Failed to connect to Ethereum: ${err}`, "error");
|
||||
throw Error(err);
|
||||
|
|
@ -50,13 +72,32 @@ export async function initRLN({ onStatusChange }) {
|
|||
);
|
||||
|
||||
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);
|
||||
console.log(rln.keystore)
|
||||
|
||||
return { hash, credential };
|
||||
};
|
||||
|
||||
const readKeystoreOptions = () => {
|
||||
return rln.keystore.keys();
|
||||
return rln.keystore?.keys();
|
||||
};
|
||||
|
||||
const readCredential = async (hash, password) => {
|
||||
|
|
@ -73,6 +114,32 @@ export async function initRLN({ onStatusChange }) {
|
|||
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 {
|
||||
rln,
|
||||
connectWallet,
|
||||
|
|
@ -81,6 +148,8 @@ export async function initRLN({ onStatusChange }) {
|
|||
readCredential,
|
||||
saveLocalKeystore,
|
||||
importLocalKeystore,
|
||||
createEncoderDecoder,
|
||||
onSend
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { renderBytes } from "./utils";
|
||||
|
||||
// Identity
|
||||
const status = document.getElementById("status");
|
||||
const connectWalletButton = document.getElementById("connect");
|
||||
const importKeystoreButton = document.getElementById("import");
|
||||
|
|
@ -10,6 +11,16 @@ const keystorePassword = document.getElementById("password");
|
|||
const readCredentialButton = document.getElementById("read-credential");
|
||||
const registerNewCredentialButton = document.getElementById("register-new");
|
||||
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() {
|
||||
const _renderCredential = (hash, credential) => {
|
||||
|
|
@ -59,11 +70,15 @@ export function initUI() {
|
|||
readCredential,
|
||||
saveLocalKeystore,
|
||||
importLocalKeystore,
|
||||
createEncoderDecoder,
|
||||
onSend
|
||||
}) => {
|
||||
connectWalletButton.addEventListener("click", async () => {
|
||||
await connectWallet();
|
||||
const keystoreKeys = readKeystoreOptions();
|
||||
_renderKeystoreOptions(keystoreKeys);
|
||||
if (keystoreKeys) {
|
||||
_renderKeystoreOptions(keystoreKeys);
|
||||
}
|
||||
});
|
||||
|
||||
registerNewCredentialButton.addEventListener("click", async () => {
|
||||
|
|
@ -104,6 +119,7 @@ export function initUI() {
|
|||
}
|
||||
|
||||
const credential = await readCredential(currentHash, password);
|
||||
console.log(credential)
|
||||
_renderCredential(currentHash, credential);
|
||||
});
|
||||
|
||||
|
|
@ -137,6 +153,27 @@ export function initUI() {
|
|||
link.download = filename;
|
||||
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 {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "waku-lab",
|
||||
"name": "lab.waku.org",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
|
|
|
|||
Loading…
Reference in New Issue