wip: create market

public/css/_tw-input.css

@@ -10,6 +10,10 @@
   --nostr: #8d45dd;
   --black: #000;
   --white: #fff;
+  --bg-success: #149e613d;
+  --fg-success:  #35df8d;
+  --bg-error: #f5395e3d;
+  --fg-error: #ff7386;
 }
 
 @layer base {
@@ -74,6 +78,31 @@
     color: var(--muted);
   }
 
+  .label {
+    border: none;
+    padding: 0.5em 3em;
+  }
+
+  .label.success {
+    background-color: var(--bg-success);
+    color: var(--fg-success);
+  }
+
+  .label.success:hover {
+    background-color: var(--fg-success);
+    color: var(--white);
+  }
+
+  .label.error {
+    background-color: var(--bg-error);
+    color: var(--fg-error);
+  }
+
+  label.error:hover {
+    background-color: var(--fg-error);
+    color: var(--white);
+  }
+
   .figlet {
     display: flex;
     align-items: center;

server/router/pages/components/invoice.templ

@@ -5,17 +5,30 @@ import (
 )
 
 templ Invoice(hash string, bolt11 string, msats int, expiresIn int, paid bool) {
-    <div class="p-5 border border-muted bg-background text-center ">
-        @Qr(bolt11, "lightning:"+bolt11)
-        <small class="mx-auto w-[256px] my-1 break-words">{ bolt11 }</small>
+    <div class="p-5 border border-muted bg-background text-center font-mono">
+        <div>Payment Required</div>
+        <div class="my-3">@Qr(bolt11, "lightning:"+bolt11)</div>
         <div class="my-1">{ strconv.Itoa(msats/1000) } sats</div>
-        if !paid {
-            <div class="font-mono" id="countdown" countdown-data={ templ.JSONString(expiresIn)} hx-preserve></div>
-            <script type="text/javascript">
-            function countdown() {
-                // a script that was included in a previous response might already be running the countdown
-                if (typeof interval !== "undefined") return
+        @InvoiceStatus(hash, expiresIn, paid)
+        <div class="none" id="bolt11" bolt11-data={ templ.JSONString(bolt11) } hx-preserve></div>
+        <script type="text/javascript" id="bolt11-js" hx-preserve>
+            var $ = selector => document.querySelector(selector)
+            var bolt11 = JSON.parse($("#bolt11").getAttribute("bolt11-data"))
+            console.log(bolt11)
+        </script>
+    </div>
+}
 
+templ InvoiceStatus(hash string, expiresIn int, paid bool) {
+    if paid {
+        <div class="font-mono label success my-1">PAID</div>
+    }
+    else if expiresIn <= 0 {
+        <div class="font-mono label error my-1">EXPIRED</div>
+    } else {
+        <!-- invoice is pending -->
+        <div class="font-mono my-1" id="countdown" countdown-data={ templ.JSONString(expiresIn) } hx-preserve></div>
+        <script type="text/javascript" id="countdown-js" hx-preserve>
             var $ = selector => document.querySelector(selector)
             var expiresIn = JSON.parse($("#countdown").getAttribute("countdown-data"))
 
@@ -27,14 +40,17 @@ templ Invoice(hash string, bolt11 string, msats int, expiresIn int, paid bool) {
                 var minutes = Math.floor(expiresIn / 60)
                 var seconds = expiresIn % 60
                 var text = `${pad(minutes, 2)}:${pad(seconds, 2)}`
+                try {
                     $("#countdown").innerText = text
                     expiresIn--
+                } catch {
+                    // countdown element disappeared
+                    clearInterval(interval)
+                }
             }
 
             _countdown()
-                interval = setInterval(_countdown, 1000)
-            }
-            countdown()
+            var interval = setInterval(_countdown, 1000)
         </script>
         <div
             hx-get={ string(templ.SafeURL("/invoice/" + hash)) }
@@ -42,8 +58,5 @@ templ Invoice(hash string, bolt11 string, msats int, expiresIn int, paid bool) {
             hx-target="#modal"
             hx-swap="outerHTML"
             hx-select="#modal" />
-        } else {
-            <div class="font-mono text-green">PAID</div>
     }
-    </div>
 }

server/router/pages/components/modal.templ

@@ -10,7 +10,7 @@ templ Modal(component templ.Component) {
 				class="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
 			>
 				<!-- TODO: add background -->
-				<div class="m-3">
+				<div class="flex justify-center p-3 w-screen">
 					@component
 				</div>
 			</div>

shell.nix

@@ -10,6 +10,7 @@ pkgs.mkShell {
     gnumake
     inotify-tools
     figlet
+    postgresql
   ];
   shellHook = ''
     # install templ if not already installed