feat(rln-js): add some style
This commit is contained in:
Richard Ramos
parent
d2b024a27b
commit
d9c7d2a3aa
|
|
@ -5,64 +5,102 @@
|
|||
<meta charset='UTF-8'/>
|
||||
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
|
||||
<title>JS-Waku light node example</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div><h1>Waku RLN</h1>
|
||||
<div><span id='status'></span></div>
|
||||
<div><h2>Blockchain</h2>
|
||||
<div><h3>Wallet</h3>
|
||||
<p>Address: <span id='address'></span></p>
|
||||
<button id='connect-wallet' type='button'>Connect Wallet</button>
|
||||
</div>
|
||||
<div><h3>Contract Data</h3>
|
||||
<p>Latest membership id on contract: <span id='latest-membership-id'></span></p>
|
||||
<button disabled id='retrieve-rln-details' type='button'>Retrieve contract state from blockchain
|
||||
</button>
|
||||
</div>
|
||||
<div class="row rcenter">
|
||||
<h1>Waku RLN</h1>
|
||||
<button id='connect-wallet' type='button'>Connect Wallet</button>
|
||||
</div>
|
||||
|
||||
<div><h2>Credentials</h2>
|
||||
<p>You can either generate new credentials:</p>
|
||||
<button disabled id='generate-credentials' type='button'>Generate RLN Credentials</button>
|
||||
<p>Or import existing ones:</p>
|
||||
<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>
|
||||
<span id='status'></span>
|
||||
|
||||
<p><strong>Membership id: </strong><span id="id">none</span></p>
|
||||
<p><strong>Key: </strong><span id="key">none</span></p>
|
||||
<p><strong>Commitment: </strong><span id="commitment">none</span></p>
|
||||
<h2 class="mu1">Blockchain</h2>
|
||||
<hr />
|
||||
|
||||
<button disabled id='register-button' type='button'>Register Credentials in Contract</button>
|
||||
<div class="row rcenter">
|
||||
<h4>Address</h4>
|
||||
<code id="address" class="value"></code>
|
||||
</div>
|
||||
|
||||
<div><h1>Waku</h1>
|
||||
<div id="waku-status"></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 id="latest-membership-id" class="value">Not loaded yet</code>
|
||||
</div>
|
||||
|
||||
|
||||
<h2 class="mu1">Credentials</h2>
|
||||
<hr />
|
||||
|
||||
<div class="row">
|
||||
<div class="w50">
|
||||
<h4>You can either generate new credentials:</h4>
|
||||
<button disabled id='generate-credentials' type='button'>Generate RLN Credentials</button>
|
||||
<br />
|
||||
<br />
|
||||
<button disabled id='register-button' type='button'>Register Credentials in Contract</button>
|
||||
</div>
|
||||
<div class="w50">
|
||||
<h4>Or import existing ones:</h4>
|
||||
<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-button' type='button'>Import RLN Credentials</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row rcenter mu1">
|
||||
<h4>Membership id</h4>
|
||||
<code id="id" class="value">none</code>
|
||||
</div>
|
||||
<div class="row rcenter">
|
||||
<h4>Key</h4>
|
||||
<code id="key" class="value">none</code>
|
||||
</div>
|
||||
<div class="row rcenter">
|
||||
<h4>Commitment</h4>
|
||||
<code id="commitment" class="value">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">
|
||||
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>
|
||||
<br/>
|
||||
<label for='nick-input'>Your nickname</label>
|
||||
<input id='nick-input' placeholder='Choose a nickname' type='text'>
|
||||
<br/>
|
||||
|
||||
<label for='textInput'>Message text</label>
|
||||
<input disabled id='textInput' placeholder='Type your message here' type='text'>
|
||||
<button disabled id='sendButton' type='button'>Send message using Light Push</button>
|
||||
<span id='sending-status'></span>
|
||||
<br/>
|
||||
<div id="messages"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row rcenter mf">
|
||||
<label for='nick-input'>Your nickname</label>
|
||||
<input id='nick-input' placeholder='Choose a nickname' type='text' class="p100">
|
||||
</div>
|
||||
|
||||
<div class="row rcenter mf">
|
||||
<label for='textInput'>Message text</label>
|
||||
<input disabled id='textInput' placeholder='Type your message here' type='text' class="p100">
|
||||
<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.29.0-29436ea/bundle/index.js';
|
||||
|
|
@ -147,7 +185,7 @@
|
|||
if (membershipKey) {
|
||||
keyDiv.innerHTML = utils.bytesToHex(membershipKey.IDKey)
|
||||
commitmentDiv.innerHTML = utils.bytesToHex(membershipKey.IDCommitment)
|
||||
idDiv.innerHTML = membershipId || "-"
|
||||
idDiv.innerHTML = membershipId || "not registered yet"
|
||||
|
||||
if (membershipId && rlnInstance) {
|
||||
encoder = new RLNEncoder(
|
||||
|
|
@ -173,7 +211,7 @@
|
|||
|
||||
dialButton.disabled = !(node && node.isStarted() && retrievedRLNEvents)
|
||||
|
||||
retrieveRLNDetailsButton.disabled = !rlnInstance && !retrievedRLNEvents;
|
||||
retrieveRLNDetailsButton.disabled = !rlnInstance || retrievedRLNEvents;
|
||||
}
|
||||
|
||||
// Blockchain
|
||||
|
|
@ -227,6 +265,7 @@
|
|||
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
|
||||
}
|
||||
|
|
@ -304,6 +343,7 @@
|
|||
|
||||
// Waku
|
||||
nicknameInput.onchange = updateFields
|
||||
nicknameInput.onblur = updateFields;
|
||||
|
||||
let messages = [];
|
||||
|
||||
|
|
@ -351,7 +391,7 @@
|
|||
}
|
||||
|
||||
messages.push({
|
||||
msg: `(${nick}) <strong>${utils.bytesToUtf8(text)}</strong> <i>[${time.toString()}]</i>`,
|
||||
msg: `(${nick}) <strong>${utils.bytesToUtf8(text)}</strong> <i>[${time.toISOString()}]</i>`,
|
||||
epoch: wakuMessage.epoch,
|
||||
verify,
|
||||
proofState
|
||||
|
|
|
|||
|
|
@ -0,0 +1,51 @@
|
|||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 1rem 2.5rem 1rem 0;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
body > footer {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.rcenter {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mu1 {
|
||||
margin-top: 4em;
|
||||
}
|
||||
|
||||
.w50 {
|
||||
width: 46%;
|
||||
}
|
||||
.w30 {
|
||||
width: 35%;
|
||||
}
|
||||
.w70 {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.mf label {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mf input {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.mf input.p100 {
|
||||
width: 100%;
|
||||
}
|
||||
Loading…
Reference in New Issue