<!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-secret-hash">RLN Secret Hash (hex string):</label> <input id="id-secret-hash" name="id-secret-hash" type="text" /> <label for="commitment-key">RLN Commitment Key (hex string):</label> <input id="commitment-key" name="commitment-key" type="text" /> <label for="id-trapdoor">RLN ID Trapdoor (hex string):</label> <input id="id-trapdoor" name="id-trapdoor" type="text" /> <label for="id-nullifier">RLN ID Nullifier (hex string):</label> <input id="id-nullifier" name="id-nullifier" 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>Secret Hash</h4> <code class="value" id="secret-hash">none</code> </div> <div class="row rcenter"> <h4>Commitment</h4> <code class="value" id="commitment">none</code> </div> <div class="row rcenter"> <h4>Nullifier</h4> <code class="value" id="nullifier">none</code> </div> <div class="row rcenter"> <h4>Trapdoor</h4> <code class="value" id="trapdoor">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>