feat: add rln-js and rln-identity examples (#13)

waku-org · Feb 14, 2024 · 5e1be42 · 5e1be42
1 parent f25868c
commit 5e1be42
Show file tree

Hide file tree

Showing 26 changed files with 36,194 additions and 1 deletion.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -18,7 +18,9 @@ jobs:
             web-chat,
             noise-js,
             noise-rtc,
-            relay-direct-rtc
+            relay-direct-rtc,
+            rln-js,
+            rln-identity
           ]
     runs-on: ubuntu-latest
     steps:

diff --git a/ci/Jenkinsfile b/ci/Jenkinsfile
@@ -40,6 +40,8 @@ pipeline {
         stage('noise-js') { steps { script { buildExample() } } }
         stage('noise-rtc') { steps { script { buildExample() } } }
         stage('relay-direct-rtc') { steps { script { buildExample() } } }
+        stage('rln-js') { steps { script { buildExample() } } }
+        stage('rln-identity') { steps { script { buildExample() } } }
       }
     }
 

diff --git a/examples/rln-identity/favicon.ico b/examples/rln-identity/favicon.ico
diff --git a/examples/rln-identity/favicon.png b/examples/rln-identity/favicon.png
diff --git a/examples/rln-identity/index.html b/examples/rln-identity/index.html
@@ -0,0 +1,206 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+    <title>RLN Credential management</title>
+    <link rel="apple-touch-icon" href="./favicon.png" />
+    <link rel="manifest" href="./manifest.json" />
+    <link rel="icon" href="./favicon.ico" />
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        word-wrap: break-word;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 100%;
+        height: 100%;
+        max-width: 100%;
+        max-height: 100%;
+      }
+
+      html {
+        font-size: 16px;
+        overflow: hidden;
+      }
+
+      body {
+        display: flex;
+        align-items: center;
+        padding: 10px;
+        flex-direction: column;
+        justify-content: center;
+      }
+
+      .container {
+        width: 100%;
+        min-width: 300px;
+        max-width: 800px;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-content: space-between;
+      }
+
+      h2 {
+        text-align: center;
+        margin-bottom: 5px;
+      }
+
+      h3 {
+        margin-bottom: 10px;
+      }
+
+      h3:last-of-type {
+        margin-bottom: 20px;
+      }
+
+      h2 span,
+      h3 span {
+        font-weight: normal;
+      }
+
+      .progress {
+        color: #9ea13b;
+      }
+
+      .success {
+        color: #3ba183;
+      }
+
+      .error {
+        color: #c84740;
+      }
+
+      input {
+        padding: 0.5rem;
+      }
+
+      select {
+        padding: 0.5rem;
+        max-width: 150px;
+      }
+
+      button {
+        padding: 0.5rem;
+      }
+
+      button.progress {
+        color: white;
+        background-color: #9ea13b;
+      }
+
+      button.success {
+        color: white;
+        background-color: #3ba183;
+      }
+
+      button.error {
+        color: white;
+        background-color: #c84740;
+      }
+
+      .mb-1 {
+        margin-bottom: 1rem;
+      }
+      .mb-2 {
+        margin-bottom: 2rem;
+      }
+      .mb-3 {
+        margin-bottom: 3rem;
+      }
+      .mt-1 {
+        margin-top: 1rem;
+      }
+
+      .block {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .hidden {
+        display: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <div class="status">
+        <h3>
+          <b>Status:</b>
+          <span id="status" class="progress">Starting...</span>
+        </h3>
+      </div>
+
+      <div class="block mb-1">
+        <h2>Wallet</h2>
+        <button id="connect">Connect</button>
+      </div>
+
+      <div class="block mb-1">
+        <h2>Keystore</h2>
+        <div>
+          <button id="import">Import</button>
+          <input id="import-file" class="hidden" type="file" />
+          <button id="export">Export</button>
+        </div>
+      </div>
+
+      <hr />
+
+      <h3 class="mt-1">Existing credentials</h3>
+
+      <div class="block mb-2">
+        <select id="keystore"></select>
+        <div>
+          <input id="password" placeholder="password" />
+          <button id="read-credential">Read</button>
+        </div>
+      </div>
+
+      <div class="block mb-3">
+        <h3>Create new (will use the password)</h3>
+        <button id="register-new">Register</button>
+      </div>
+
+      <div id="current-credentials">
+        <div class="block mb-1">
+          <p>Keystore hash</p>
+          <code>none</code>
+        </div>
+
+        <div class="block mb-1">
+          <p>Membership ID</p>
+          <code>none</code>
+        </div>
+
+        <div class="block mb-1">
+          <p>Secret Hash</p>
+          <code>none</code>
+        </div>
+
+        <div class="block mb-1">
+          <p>Commitment</p>
+          <code>none</code>
+        </div>
+
+        <div class="block mb-1">
+          <p>Nullifier</p>
+          <code>none</code>
+        </div>
+
+        <div class="block mb-1">
+          <p>Trapdoor</p>
+          <code>none</code>
+        </div>
+      </div>
+    </div>
+
+    <script src="./index.js"></script>
+  </body>
+</html>
diff --git a/examples/rln-identity/manifest.json b/examples/rln-identity/manifest.json
@@ -0,0 +1,19 @@
+{
+  "name": "Waku RLN",
+  "description": "Example showing Waku RLN credential management.",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "favicon.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    }
+  ],
+  "display": "standalone",
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff"
+}