2022-09-26 04:01:38 +00:00
<!DOCTYPE html>
2022-12-12 04:59:35 +00:00
< html lang = "en" >
< head >
< meta charset = "UTF-8" / >
< meta content = "width=device-width, initial-scale=1.0" name = "viewport" / >
2022-09-26 04:01:38 +00:00
< title > JS-Waku light node example< / title >
2022-12-12 04:59:35 +00:00
< link
href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"
rel="stylesheet"
/>
< link href = "style.css" rel = "stylesheet" / >
2023-01-04 20:15:56 +00:00
< link rel = "apple-touch-icon" href = "./favicon.png" / >
< link rel = "manifest" href = "./manifest.json" / >
< link rel = "icon" href = "./favicon.ico" / >
2022-12-12 04:59:35 +00:00
< / head >
< body >
< div class = "row rcenter" >
< h1 > Waku RLN< / h1 >
< button id = "connect-wallet" type = "button" > Connect Wallet< / button >
< / div >
2022-10-07 00:47:53 +00:00
2022-12-12 04:59:35 +00:00
< span id = "status" > < / span >
2022-10-07 00:47:53 +00:00
2022-12-12 04:59:35 +00:00
< h2 class = "mu1" > Blockchain< / h2 >
< hr / >
2022-10-07 00:47:53 +00:00
2022-12-12 04:59:35 +00:00
< div class = "row rcenter" >
< h4 > Address< / h4 >
< code class = "value" id = "address" > < / code >
< / div >
2022-10-07 00:47:53 +00:00
2022-12-12 04:59:35 +00:00
< div class = "row mu1 rcenter" >
< h4 > Contract Data< / h4 >
< button disabled id = "retrieve-rln-details" type = "button" >
2022-10-10 14:32:23 +00:00
Retrieve contract state from blockchain
2022-12-12 04:59:35 +00:00
< / button >
< / div >
2022-10-07 00:47:53 +00:00
2022-12-12 04:59:35 +00:00
< div class = "row rcenter" >
< h4 > Latest membership id on contract< / h4 >
< code class = "value" id = "latest-membership-id" > Not loaded yet< / code >
< / div >
2022-10-07 00:47:53 +00:00
2022-12-12 04:59:35 +00:00
< h2 class = "mu1" > Credentials< / h2 >
< hr / >
2022-09-26 04:01:38 +00:00
2022-12-12 04:59:35 +00:00
< div class = "row" >
< div class = "w50" >
2022-12-15 09:49:48 +00:00
< h4 > Generate new, or import existing, credentials from wallet:< / h4 >
2022-12-12 04:59:35 +00:00
< br / >
2022-12-15 09:49:48 +00:00
< div id = "import-from-wallet" >
< button id = "import-from-wallet-button" type = "button" >
Generate RLN Credentials
< / button >
< / div >
2022-12-12 04:59:35 +00:00
< br / >
< button disabled id = "register-button" type = "button" >
Register Credentials in Contract
< / button >
< / div >
< div class = "w50" >
2022-12-15 09:49:48 +00:00
< 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 >
2022-12-12 04:59:35 +00:00
< / 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"
/>
2022-10-05 02:46:56 +00:00
< / div >
2022-12-12 04:59:35 +00:00
< 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 {
2022-10-05 02:46:56 +00:00
EncoderV0,
2022-12-12 04:59:35 +00:00
DecoderV0,
} from "https://unpkg.com/js-waku@0.30.0/bundle/lib/waku_message/version_0.js";
2022-09-27 15:05:42 +00:00
2022-12-12 04:59:35 +00:00
import { protobuf } from "https://taisukef.github.io/protobuf-es.js/dist/protobuf-es.js";
2022-09-27 15:05:42 +00:00
2022-12-12 04:59:35 +00:00
import {
2022-10-05 02:46:56 +00:00
create,
MembershipKey,
RLNDecoder,
2022-12-12 04:59:35 +00:00
RLNEncoder,
2022-12-15 09:49:48 +00:00
} from "https://unpkg.com/@waku/rln@0.0.13/bundle/index.js";
2022-10-04 05:31:18 +00:00
2022-12-12 04:59:35 +00:00
import { ethers } from "https://unpkg.com/ethers@5.7.2/dist/ethers.esm.min.js";
2022-09-26 04:01:38 +00:00
2022-12-12 04:59:35 +00:00
const statusSpan = document.getElementById("status");
2022-10-05 02:46:56 +00:00
2022-12-12 04:59:35 +00:00
// Blockchain Elements
const addressDiv = document.getElementById("address");
const connectWalletButton = document.getElementById("connect-wallet");
2022-10-05 02:46:56 +00:00
2022-12-12 04:59:35 +00:00
const latestMembershipSpan = document.getElementById(
"latest-membership-id"
);
const retrieveRLNDetailsButton = document.getElementById(
"retrieve-rln-details"
);
2022-10-05 02:46:56 +00:00
2022-12-12 04:59:35 +00:00
// Credentials Elements
2022-10-05 02:46:56 +00:00
2022-12-12 04:59:35 +00:00
const membershipIdInput = document.getElementById("membership-id");
const identityKeyInput = document.getElementById("id-key");
const commitmentKeyInput = document.getElementById("commitment-key");
2022-12-15 09:49:48 +00:00
const importManually = document.getElementById("import-manually-button");
const importFromWalletButton = document.getElementById(
"import-from-wallet-button"
);
2022-10-05 02:46:56 +00:00
2022-12-12 04:59:35 +00:00
const idDiv = document.getElementById("id");
const keyDiv = document.getElementById("key");
const commitmentDiv = document.getElementById("commitment");
2022-10-05 02:46:56 +00:00
2022-12-12 04:59:35 +00:00
const registerButton = document.getElementById("register-button");
2022-09-26 04:01:38 +00:00
2022-12-12 04:59:35 +00:00
// Waku Elements
const statusDiv = document.getElementById("waku-status");
2022-09-27 15:05:42 +00:00
2022-12-12 04:59:35 +00:00
const remoteMultiAddrInput = document.getElementById("remote-multiaddr");
const dialButton = document.getElementById("dial");
2022-10-04 05:31:18 +00:00
2022-12-12 04:59:35 +00:00
const nicknameInput = document.getElementById("nick-input");
2022-09-27 15:05:42 +00:00
2022-12-12 04:59:35 +00:00
const textInput = document.getElementById("textInput");
const sendButton = document.getElementById("sendButton");
const sendingStatusSpan = document.getElementById("sending-status");
2022-09-27 15:05:42 +00:00
2022-12-12 04:59:35 +00:00
const messagesDiv = document.getElementById("messages");
2022-09-27 15:05:42 +00:00
2022-12-12 04:59:35 +00:00
let membershipId,
membershipKey,
encoder,
node,
nodeConnected,
rlnInstance;
2022-12-15 09:49:48 +00:00
const allMemberships = [];
2022-12-12 04:59:35 +00:00
let retrievedRLNEvents = false;
const rlnInstancePromise = create();
2022-10-04 05:31:18 +00:00
2022-12-15 09:49:48 +00:00
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";
2022-12-12 04:59:35 +00:00
// Load zero-kit WASM blob.
2022-10-04 05:31:18 +00:00
2022-12-12 04:59:35 +00:00
statusSpan.innerText = "WASM Blob download in progress...";
rlnInstancePromise.then((_rlnInstance) => {
rlnInstance = _rlnInstance;
statusSpan.innerText = "WASM Blob download in progress... done!";
updateFields();
});
2022-10-05 02:46:56 +00:00
2022-12-12 04:59:35 +00:00
const ContentTopic = "/toy-chat/2/luzhou/proto";
2022-10-05 02:46:56 +00:00
2022-12-12 04:59:35 +00:00
// Protobuf
const ProtoChatMessage = new protobuf.Type("ChatMessage")
2022-10-05 02:46:56 +00:00
.add(new protobuf.Field("timestamp", 1, "uint64"))
.add(new protobuf.Field("nick", 2, "string"))
.add(new protobuf.Field("text", 3, "bytes"));
2022-12-12 04:59:35 +00:00
// Function to update the fields to guide the user by disabling buttons.
const updateFields = () => {
2022-10-04 05:31:18 +00:00
if (membershipKey) {
2022-12-12 04:59:35 +00:00
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
);
}
2022-09-27 15:05:42 +00:00
}
2022-12-12 04:59:35 +00:00
registerButton.disabled = !(
membershipKey & &
retrievedRLNEvents & &
!membershipId
);
2022-10-05 02:46:56 +00:00
2022-12-15 09:49:48 +00:00
importManually.disabled = !(
2022-12-12 04:59:35 +00:00
membershipIdInput.value & &
identityKeyInput.value & &
commitmentKeyInput.value
);
2022-09-27 15:05:42 +00:00
2022-12-12 04:59:35 +00:00
const readyToSend =
membershipKey & & membershipId & & nodeConnected & & nicknameInput.value;
2022-09-27 15:05:42 +00:00
textInput.disabled = !readyToSend;
sendButton.disabled = !readyToSend;
2022-12-12 04:59:35 +00:00
dialButton.disabled = !(node & & node.isStarted() & & retrievedRLNEvents);
2022-10-05 02:46:56 +00:00
2022-10-07 00:47:53 +00:00
retrieveRLNDetailsButton.disabled = !rlnInstance || retrievedRLNEvents;
2022-12-12 04:59:35 +00:00
};
2022-09-27 15:05:42 +00:00
2022-12-12 04:59:35 +00:00
// Blockchain
2022-10-05 02:46:56 +00:00
2022-12-12 04:59:35 +00:00
membershipIdInput.onchange = updateFields;
identityKeyInput.onchange = updateFields;
commitmentKeyInput.onchange = updateFields;
2022-09-27 15:05:42 +00:00
2022-12-15 09:49:48 +00:00
importManually.onclick = () => {
2022-12-12 04:59:35 +00:00
const idKey = utils.hexToBytes(identityKeyInput.value);
const idCommitment = utils.hexToBytes(commitmentKeyInput.value);
membershipKey = new MembershipKey(idKey, idCommitment);
2022-09-27 15:05:42 +00:00
membershipId = membershipIdInput.value;
2022-12-12 04:59:35 +00:00
updateFields();
};
2022-09-26 04:01:38 +00:00
2022-12-15 09:49:48 +00:00
importFromWalletButton.onclick = async () => {
const signer = provider.getSigner();
2022-12-23 13:08:09 +00:00
const signature = await signer.signMessage(DEFAULT_SIGNATURE_MESSAGE);
2022-12-15 09:49:48 +00:00
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();
};
2022-12-12 04:59:35 +00:00
const checkChain = async (chainId) => {
2022-10-04 05:31:18 +00:00
retrieveRLNDetailsButton.disabled = retrievedRLNEvents || chainId !== 5;
registerButton.disabled = !(chainId === 5 & & retrievedRLNEvents);
if (chainId !== 5) {
2022-12-12 04:59:35 +00:00
alert("Switch to Goerli");
2022-10-04 05:31:18 +00:00
}
2022-12-12 04:59:35 +00:00
};
2022-10-04 05:31:18 +00:00
2022-12-12 04:59:35 +00:00
const rlnDeployBlk = 7109391;
const rlnAddress = "0x4252105670fe33d2947e8ead304969849e64f2a6";
const rlnAbi = [
2022-10-04 05:31:18 +00:00
"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)",
2022-12-12 04:59:35 +00:00
"event MemberWithdrawn(uint256 pubkey, uint256 index)",
];
2022-10-04 05:31:18 +00:00
2022-12-12 04:59:35 +00:00
const provider = new ethers.providers.Web3Provider(
window.ethereum,
"any"
);
2022-10-04 05:31:18 +00:00
2022-12-12 04:59:35 +00:00
let accounts;
let rlnContract;
2022-10-04 05:31:18 +00:00
2022-12-12 04:59:35 +00:00
const handleMembership = (pubkey, index) => {
2022-10-04 05:31:18 +00:00
try {
2022-12-15 09:49:48 +00:00
allMemberships.push({ pubkey, index });
2022-12-12 04:59:35 +00:00
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;
2022-10-04 05:31:18 +00:00
} catch (err) {
2022-12-12 04:59:35 +00:00
console.error(err); // TODO: the merkle tree can be in a wrong state. The app should be disabled
2022-10-04 05:31:18 +00:00
}
2022-12-12 04:59:35 +00:00
};
2022-10-04 05:31:18 +00:00
2022-12-12 04:59:35 +00:00
const setAccounts = (acc) => {
2022-10-04 05:31:18 +00:00
accounts = acc;
2022-10-05 02:46:56 +00:00
addressDiv.innerHTML = accounts.length ? accounts[0] : "";
2022-12-12 04:59:35 +00:00
};
2022-10-04 05:31:18 +00:00
2022-12-12 04:59:35 +00:00
connectWalletButton.onclick = async () => {
2022-10-04 05:31:18 +00:00
try {
2022-12-12 04:59:35 +00:00
accounts = await provider.send("eth_requestAccounts", []);
setAccounts(accounts);
const network = await provider.getNetwork();
checkChain(network.chainId);
2022-12-15 09:49:48 +00:00
importFromWalletButton.disabled = false;
2022-10-04 05:31:18 +00:00
} catch (e) {
2022-12-12 04:59:35 +00:00
console.log("No web3 provider available", e);
2022-10-04 05:31:18 +00:00
}
2022-12-12 04:59:35 +00:00
};
2022-10-04 05:31:18 +00:00
2022-12-12 04:59:35 +00:00
retrieveRLNDetailsButton.onclick = async () => {
2022-10-04 05:31:18 +00:00
rlnContract = new ethers.Contract(rlnAddress, rlnAbi, provider);
2022-12-12 04:59:35 +00:00
const filter = rlnContract.filters.MemberRegistered();
2022-10-04 05:31:18 +00:00
// populating merkle tree:
2022-12-12 04:59:35 +00:00
const alreadyRegisteredMembers = await rlnContract.queryFilter(
filter,
rlnDeployBlk
);
alreadyRegisteredMembers.forEach((event) => {
handleMembership(event.args.pubkey, event.args.index, event);
2022-10-04 05:31:18 +00:00
});
retrievedRLNEvents = true;
// reacting to new registrations
rlnContract.on(filter, (pubkey, index, event) => {
2022-12-12 04:59:35 +00:00
handleMembership(event.args.pubkey, event.args.index, event);
2022-10-04 05:31:18 +00:00
});
2022-12-12 04:59:35 +00:00
updateFields();
};
2022-10-04 05:31:18 +00:00
2022-12-12 04:59:35 +00:00
window.ethereum.on("accountsChanged", setAccounts);
window.ethereum.on("chainChanged", (chainId) => {
2022-10-04 05:31:18 +00:00
checkChain(parseInt(chainId, 16));
2022-12-12 04:59:35 +00:00
});
2022-10-04 05:31:18 +00:00
2022-12-12 04:59:35 +00:00
registerButton.onclick = async () => {
2022-10-04 05:31:18 +00:00
try {
2022-12-12 04:59:35 +00:00
registerButton.disabled = true;
2022-10-04 05:31:18 +00:00
2022-12-12 04:59:35 +00:00
const pubkey = ethers.BigNumber.from(membershipKey.IDCommitment);
2022-12-23 13:08:09 +00:00
2022-12-12 04:59:35 +00:00
const price = await rlnContract.MEMBERSHIP_DEPOSIT();
2022-10-04 05:31:18 +00:00
2022-12-12 04:59:35 +00:00
const signer = provider.getSigner();
const rlnContractWithSigner = rlnContract.connect(signer);
2022-10-04 05:31:18 +00:00
2022-12-12 04:59:35 +00:00
const txResponse = await rlnContractWithSigner.register(pubkey, {
value: price,
});
console.log("Transaction broadcasted:", txResponse);
2022-10-04 05:31:18 +00:00
2022-12-12 04:59:35 +00:00
const txReceipt = await txResponse.wait();
2022-10-04 05:31:18 +00:00
2022-12-12 04:59:35 +00:00
console.log("Transaction receipt", txReceipt);
2022-10-04 05:31:18 +00:00
2022-12-12 04:59:35 +00:00
// Update membershipId
membershipId = txReceipt.events[0].args.index.toNumber();
console.log(
"Obtained index for current membership credentials",
membershipId
);
updateFields();
registerButton.disabled = false;
2022-10-04 05:31:18 +00:00
} catch (err) {
2022-12-12 04:59:35 +00:00
alert(err);
registerButton.disabled = false;
2022-10-04 05:31:18 +00:00
}
2022-12-12 04:59:35 +00:00
};
// 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);
2022-10-05 02:46:56 +00:00
}
2022-12-12 04:59:35 +00:00
updateMessages();
console.log("Verifying proof with roots", msg.verify());
}
});
messagesDiv.innerHTML += "< / ul > ";
};
2022-09-26 04:01:38 +00:00
2022-12-12 04:59:35 +00:00
const callback = (wakuMessage) => {
const { timestamp, nick, text } = ProtoChatMessage.decode(
wakuMessage.payload
);
2022-09-27 15:05:42 +00:00
const time = new Date();
2022-10-08 03:35:56 +00:00
time.setTime(Number(timestamp) * 1000);
2022-09-26 04:01:38 +00:00
2022-10-10 15:50:14 +00:00
let proofState, verify, verifyNoRoot;
2022-10-06 00:17:52 +00:00
if (typeof wakuMessage.rateLimitProof === "undefined") {
2022-12-12 04:59:35 +00:00
proofState = "no proof attached";
2022-10-05 02:46:56 +00:00
} else {
2022-12-12 04:59:35 +00:00
console.log("Proof received:", wakuMessage.rateLimitProof);
verify = wakuMessage.verify.bind(wakuMessage);
verifyNoRoot = wakuMessage.verifyNoRoot.bind(wakuMessage);
proofState = "verifying...";
2022-10-05 02:46:56 +00:00
}
messages.push({
2022-12-12 04:59:35 +00:00
msg: `(${nick}) < strong > ${utils.bytesToUtf8(
text
)}< / strong > < i > [${time.toISOString()}]< / i > `,
epoch: wakuMessage.epoch,
verify,
verifyNoRoot,
proofState,
2022-10-05 02:46:56 +00:00
});
2022-12-12 04:59:35 +00:00
updateMessages();
};
2022-10-05 02:46:56 +00:00
2022-12-12 04:59:35 +00:00
(async () => {
statusDiv.innerHTML = "< p > Creating Waku node.< / p > ";
2022-10-04 05:31:18 +00:00
node = await createLightNode();
2022-09-27 15:05:42 +00:00
2022-12-12 04:59:35 +00:00
statusDiv.innerHTML = "< p > Starting Waku node.< / p > ";
2022-09-27 15:05:42 +00:00
await node.start();
2022-12-12 04:59:35 +00:00
statusDiv.innerHTML = "< p > Waku node started.< / p > ";
updateFields();
})();
2022-10-04 05:31:18 +00:00
2022-12-12 04:59:35 +00:00
dialButton.onclick = async () => {
const ma = remoteMultiAddrInput.value;
2022-10-04 05:31:18 +00:00
if (!ma) {
2022-12-12 04:59:35 +00:00
statusDiv.innerHTML = "< p > Error: No multiaddr provided.< / p > ";
return;
2022-10-04 05:31:18 +00:00
}
2022-12-12 04:59:35 +00:00
statusDiv.innerHTML = "< p > Dialing peer.< / p > ";
await node.dial(ma, ["filter", "lightpush"]);
2022-09-26 04:01:38 +00:00
await waitForRemotePeer(node, ["filter", "lightpush"]);
2022-12-12 04:59:35 +00:00
statusDiv.innerHTML = "< p > Waku node connected.< / p > ";
2022-10-05 02:46:56 +00:00
await rlnInstancePromise;
2022-12-12 04:59:35 +00:00
const decoder = new RLNDecoder(
rlnInstance,
new DecoderV0(ContentTopic)
);
await node.filter.subscribe([decoder], callback);
statusDiv.innerHTML = "< p > Waku node subscribed.< / p > ";
2022-09-27 15:05:42 +00:00
nodeConnected = true;
2022-12-12 04:59:35 +00:00
updateFields();
};
2022-09-26 04:01:38 +00:00
2022-12-12 04:59:35 +00:00
sendButton.onclick = async () => {
2022-09-27 15:05:42 +00:00
const text = utils.utf8ToBytes(textInput.value);
const timestamp = new Date();
2022-10-10 14:32:23 +00:00
const msg = ProtoChatMessage.create({
2022-12-12 04:59:35 +00:00
text,
nick: nicknameInput.value,
timestamp: Math.floor(timestamp.valueOf() / 1000),
2022-10-10 14:32:23 +00:00
});
2022-09-27 15:05:42 +00:00
const payload = ProtoChatMessage.encode(msg).finish();
2022-12-12 04:59:35 +00:00
console.log("Sending message with proof...");
sendingStatusSpan.innerText = "sending...";
await node.lightPush.push(encoder, { payload, timestamp });
sendingStatusSpan.innerText = "sent!";
console.log("Message sent!");
2022-09-26 04:01:38 +00:00
textInput.value = null;
2022-10-05 02:46:56 +00:00
setTimeout(() => {
2022-12-12 04:59:35 +00:00
sendingStatusSpan.innerText = "";
}, 5000);
};
< / script >
< / body >
2022-09-26 04:01:38 +00:00
< / html >