js-waku-examples/examples/rln-js/index.html

138 lines
4.0 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"><ul id="messagesList"></ul></div>
<script src="https://unpkg.com/@multiformats/multiaddr@12.1.1/dist/index.min.js"></script>
<script type="module" src="./index.js"></script>
</body>
</html>