feat(web): add modal info window

eigerco · Oct 3, 2024 · 56e5991 · 56e5991
1 parent 33337e8
commit 56e5991
Show file tree

Hide file tree

Showing 3 changed files with 124 additions and 13 deletions.
diff --git a/web/app.js b/web/app.js
@@ -6,6 +6,10 @@ document.addEventListener("DOMContentLoaded", () => {
     const alchemyKeyInput = document.getElementById("alchemy-key");
     const initBtn = document.getElementById("init-btn");
     const statusSpan = document.getElementById("status");
+    const proxySpan = document.getElementById("proxy");
+    const modalOverlay = document.getElementById("modal-overlay");
+    const infoBtn = document.getElementById("info-btn");
+    const proxyBtn = document.getElementById("proxy-btn");
     let messageId = 1;
 
     const statusIcons = {
@@ -165,4 +169,61 @@ document.addEventListener("DOMContentLoaded", () => {
         worker.postMessage(config);
         statusSpan.innerText = statusIcons.pending;
     });
+
+    modalOverlay.addEventListener("click", (e) => {
+        if (e.target === modalOverlay) {
+            modalOverlay.style.display = "none";
+        }
+    });
+
+    function timeout(ms, promise) {
+        return new Promise((resolve, reject) => {
+          const timer = setTimeout(() => {
+            reject(new Error('TIMEOUT'))
+          }, ms)
+
+          promise
+            .then(value => {
+              clearTimeout(timer)
+              resolve(value)
+            })
+            .catch(reason => {
+              clearTimeout(timer)
+              reject(reason)
+            })
+        });
+    }
+
+    function checkProxy() {
+        proxySpan.innerText = statusIcons.pending;
+        timeout(1000, fetch('http://127.0.0.1:3000/check'))
+            .then(response => response.text())
+            .then(response => {
+                console.log('Proxy:', response);
+                if (response.trim() === 'ready') {
+                    proxySpan.innerText = statusIcons.ready;
+                } else {
+                    proxySpan.innerText = statusIcons.unknown;
+                }
+            })
+            .catch((e) => {
+                console.error('Proxy:', e);
+                proxySpan.innerText = statusIcons.error;
+            });
+    }
+
+    proxyBtn.addEventListener("click", checkProxy);
+
+    modalOverlay.style.display = "flex";
+    infoBtn.addEventListener("click", () => {
+        modalOverlay.style.display = "flex";
+    });
+
+    document.addEventListener("keydown", (e) => {
+        if (e.key === "Escape") {
+            modalOverlay.style.display = "none";
+        }
+    });
+
+    checkProxy();
 });
diff --git a/web/index.html b/web/index.html
@@ -14,8 +14,9 @@
             <div class="alchemy-wrapper">
                 <input type="password" id="alchemy-key" placeholder="Enter Alchemy key" value="nLWc0kd1-CBFNJ57gvB_lVcQpSYCGZS1">
                 <button id="init-btn">Init</button>
-                <button class="template-btn">Status: <span id="status">❓</span></button>
-                <button class="template-btn">&#9432;</button>
+                <button id="status-btn" class="status-btn">Ready: <span id="status">❓</span></button>
+                <button id="proxy-btn" class="status-btn">Proxy: <span id="proxy">❓</span></button>
+                <button id="info-btn" class="status-btn">&#9432;</button>
             </div>
         </div>
         <div class="chat-log" id="chat-log"></div>
@@ -32,6 +33,25 @@
             </div>
         </div>
     </div>
+    <div id="modal-overlay" class="modal-overlay">
+        <div class="modal-content">
+            <h2>Beerus WebAssembly Demo</h2>
+            <ul>
+                <li><a href="https://github.com/eigerco/beerus" target="_blank">Beerus</a> is a light client for <a href="https://www.starknet.io/" target="_blank">Starknet</a></li>
+                <li>Press ESC or click outside this message to hide it</li>
+                <li>Click "Info" button to show this message again</li>
+                <li>Make sure <a href="https://github.com/eigerco/beerus/blob/main/web/etc/proxy/proxy.js" target="_blank">the proxy</a> is listening at localhost:3000</li>
+                <li>Paste the Alchemy API key</li>
+                <li>Click "Init" and wait for ✅</li>
+                <li>Check logs in case of ❌</li>
+                <li>Click "Make Call" for the function call request template</li>
+                <li>Click "Get State" for the get L1 state request template</li>
+                <li>Update the request JSON manually if you want</li>
+                <li>Click "Send" to submit a request</li>
+                <li>The response will apper when ready</li>
+            </ul>
+        </div>
+    </div>
     <script type="module" src="app.js"></script>
 </body>
 </html>
diff --git a/web/style.css b/web/style.css
@@ -9,16 +9,13 @@
 body {
     background-color: #f0f2f5;
     display: flex;
-    /* justify-content: center; */
-    /* align-items: center; */
     height: 100vh;
     overflow: hidden; /* Prevents page scroll */
 }
 
 .container {
     width: 100%;
-    /* max-width: 800px; */
-    /* height: 90vh; */
+    min-width: 680px;
     background-color: white;
     border-radius: 10px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
@@ -27,7 +24,6 @@ body {
     overflow: hidden;
 }
 
-/* Alchemy Section */
 .alchemy-section {
     padding: 15px;
     background-color: #f7f7f7;
@@ -70,7 +66,6 @@ body {
     background-color: #0056b3;
 }
 
-/* Chat Log Styles */
 .chat-log {
     flex: 1;
     padding: 20px;
@@ -116,7 +111,6 @@ body {
     margin-left: 15px;
 }
 
-/* JSON Highlighting */
 .json-key {
     color: #a71d5d;
 }
@@ -129,7 +123,6 @@ body {
     color: #63a35c;
 }
 
-/* Input Section */
 .input-section {
     padding: 15px;
     background-color: #ffffff;
@@ -138,7 +131,6 @@ body {
     flex-direction: column;
 }
 
-/* Input Wrapper */
 .input-wrapper {
     flex-grow: 1;
 }
@@ -149,7 +141,7 @@ body {
     font-size: 1rem;
     border: 1px solid #ddd;
     border-radius: 8px;
-    resize: none; /* Prevents resizing */
+    resize: none;
     font-family: monospace;
     white-space: pre;
     overflow-wrap: break-word;
@@ -181,6 +173,15 @@ body {
     background-color: #0056b3;
 }
 
+.status-btn {
+    background-color: #f0f2f5;
+    border: 1px solid #ddd;
+    padding: 10px 15px;
+    cursor: pointer;
+    border-radius: 8px;
+    transition: background-color 0.2s;
+}
+
 .template-buttons {
     display: flex;
     gap: 10px;
@@ -199,7 +200,36 @@ body {
     background-color: #e0e0e0;
 }
 
-/* Responsive Design */
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.7);
+    display: none;
+    justify-content: center;
+    align-items: center;
+}
+
+.modal-content {
+    background-color: white;
+    padding: 40px;
+    border-radius: 8px;
+    width: 40%;
+    min-width: 300px;
+    max-width: fit-content;
+    position: relative;
+}
+
+.modal-content h2 {
+    margin-bottom: 20px;
+}
+
+.modal-content li {
+    margin-bottom: 5px;
+}
+
 @media only screen and (max-width: 768px) {
     .chat-log .message-pair {
         flex-direction: column;