From bf73275a45159c21cfc6f234e8713101007c2044 Mon Sep 17 00:00:00 2001
From: status-im-auto <auto@status.im>
Date: Fri, 7 Oct 2022 00:47:53 +0000
Subject: [PATCH] Updates

---
 rln-js/index.html | 132 ++++++++++++++++++++++++++++++----------------
 rln-js/style.css  |  51 ++++++++++++++++++
 2 files changed, 137 insertions(+), 46 deletions(-)
 create mode 100644 rln-js/style.css
diff --git a/rln-js/index.html b/rln-js/index.html
index 509765d..437903e 100644
--- a/rln-js/index.html
+++ b/rln-js/index.html
@@ -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
diff --git a/rln-js/style.css b/rln-js/style.css
new file mode 100644
index 0000000..a09d86a
--- /dev/null
+++ b/rln-js/style.css
@@ -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%;
+}
