<!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>