Show onboarding page when liquid is not available

riccardobl · Jan 3, 2024 · 8f513e8 · 8f513e8
1 parent deeb5c9
commit 8f513e8
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 1 deletion.
diff --git a/src/assets/app/liquidnotfound.html b/src/assets/app/liquidnotfound.html
@@ -0,0 +1,62 @@
+<html>
+    <head>
+        <title>Liquid Provider not found!</title>
+        <link rel="stylesheet" href="page.css" />
+        <link rel="stylesheet" href="ui.css" />
+        <style>
+            body {
+                text-align: center;
+                padding: 1rem;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+            }
+
+            button {
+                padding: 1rem;
+                padding-left: 2rem;
+                padding-right: 2rem;
+                border-radius: 4px;
+                border: 2px solid #212121;
+                background-color: #d9eceb;
+                color: #212121;
+                font-size: 1.2rem;
+                font-weight: bold;
+                margin: 0.4rem;
+                cursor: pointer;
+            }
+            button.alby {
+                background-color: #212121;
+                color: #fff;
+            }
+            a {
+                text-decoration: none;
+            }
+            img {
+                width: 90%;
+                max-width: 200px;
+                margin: 1.8rem;
+                margin-left: auto;
+                margin-right: auto;
+            }
+        </style>
+    </head>
+    <body>
+        <h1>Liquid Provider not found!</h1>
+        <img src="static/404.webp" />
+        <p>
+            Sorry, it seems your browser doesn't have a Liquid Provider installed.
+            <br />
+            Please install a Liquid Provider such as <a href="https://getalby.com/">Alby</a> to use this app.
+        </p>
+        <div class="list h">
+            <a href="https://getalby.com/">
+                <button class="alby">Install Alby Browser extension</button>
+            </a>
+
+            <a href="./index.html">
+                <button>Go back and Try Again</button>
+            </a>
+        </div>
+    </body>
+</html>
diff --git a/src/assets/app/static/404.webp b/src/assets/app/static/404.webp
diff --git a/src/js/index.js b/src/js/index.js
@@ -47,7 +47,11 @@ async function main() {
         }
     } catch (e) {
         console.error(e);
-        alert(e);
+        if (e.cause == "liquid_not_available") {
+            window.location.href = "liquidnotfound.html";
+        } else {
+            alert(e);
+        }
     }
 }