waku-org · weboko · Jan 24, 2024 · Jan 22, 2024 · Jan 22, 2024 · Jan 22, 2024
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -20,7 +20,8 @@ jobs:
             web-chat,
             noise-js,
             noise-rtc,
-            relay-direct-rtc
+            relay-direct-rtc,
+            rln-js
           ]
     runs-on: ubuntu-latest
     steps:

diff --git a/ci/Jenkinsfile b/ci/Jenkinsfile
@@ -43,7 +43,7 @@ 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 { buildNextJSExample() } } }
+        stage('rln-js') { steps { script { buildExample() } } }
       }
     }
 
@@ -86,13 +86,3 @@ def copyExample(example=STAGE_NAME) {
   sh "mkdir -p ${dest}"
   sh "cp -r ${source}/. ${dest}"
 }
-
-def buildNextJSExample(example=STAGE_NAME) {
-  def dest = "${WORKSPACE}/build/docs/${example}"
-  dir("examples/${example}") {
-    sh 'npm install --silent'
-    sh 'npm run build'
-    sh "mkdir -p ${dest}"
-    sh "cp -r out/* ${dest}"
-  }
-}
diff --git a/examples/rln-js/.eslintrc.json b/examples/rln-js/.eslintrc.json
diff --git a/examples/rln-js/.gitignore b/examples/rln-js/.gitignore
diff --git a/examples/rln-js/README.md b/examples/rln-js/README.md
diff --git a/examples/rln-js/src/app/favicon.ico → examples/rln-js/favicon.ico b/examples/rln-js/src/app/favicon.ico → examples/rln-js/favicon.ico
diff --git a/examples/rln-js/favicon.png b/examples/rln-js/favicon.png
diff --git a/examples/rln-js/index.html b/examples/rln-js/index.html
@@ -0,0 +1,173 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+    <title></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;
+      }
+
+      button.progress {
+        color: white;
+        background-color: #9ea13b;
+      }
+
+      button.success {
+        color: white;
+        background-color: #3ba183;
+      }
+
+      button.error {
+        color: white;
+        background-color: #c84740;
+      }
+
+      .pairingInfo {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+
+      .pairingInfo input {
+        display: block;
+        min-width: 250px;
+        width: 100%;
+        max-width: 600px;
+        font-size: 1.1rem;
+        line-height: 1.5rem;
+        padding: 5px;
+        margin-bottom: 10px;
+      }
+
+      .pairingInfo button {
+        flex-grow: 1;
+        cursor: pointer;
+        padding: 10px;
+      }
+
+      .pairingInfo button + button {
+        margin-left: 5px;
+      }
+
+      .chatArea {
+      }
+
+      .chatArea ul {
+        margin-bottom: 30px;
+        list-style: none;
+      }
+
+      .chatArea ul li + li {
+        margin-top: 5px;
+      }
+
+      .chatArea div {
+        display: flex;
+        flex-direction: column;
+      }
+
+      .chatArea div > * {
+        font-size: 1.1rem;
+        line-height: 1.5rem;
+        padding: 5px;
+        margin-bottom: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <div class="status">
+        <h3>
+          <b>Waku Status:</b>
+          <span id="status" class="progress">Starting...</span>
+        </h3>
+      </div>
+
+      <div class="chatArea" id="chat-area" style="display: none">
+        <h2>Chat</h2>
+        <ul id="messages"></ul>
+
+        <div>
+          <input id="nick" placeholder="Choose a nickname" type="text" />
+          <textarea
+            id="text"
+            placeholder="Type your message here"
+            type="text"
+          ></textarea>
+          <button id="send" type="button">Send message</button>
+        </div>
+      </div>
+    </div>
+
+    <script src="./index.js"></script>
+  </body>
+</html>
diff --git a/examples/rln-js/manifest.json b/examples/rln-js/manifest.json
@@ -0,0 +1,19 @@
+{
+  "name": "Waku RLN",
+  "description": "Example showing Waku RLN capabilities.",
+  "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"
+}
diff --git a/examples/rln-js/next-env.d.ts b/examples/rln-js/next-env.d.ts
diff --git a/examples/rln-js/next.config.js b/examples/rln-js/next.config.js