wip: create market

public/css/_tw-input.css

@@ -10,10 +10,6 @@
   --nostr: #8d45dd;
   --black: #000;
   --white: #fff;
-  --bg-success: #149e613d;
-  --fg-success:  #35df8d;
-  --bg-error: #f5395e3d;
-  --fg-error: #ff7386;
 }
 
 @layer base {
@@ -78,31 +74,6 @@
     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,30 +5,17 @@ import (
 )
 
 templ Invoice(hash string, bolt11 string, msats int, expiresIn int, paid bool) {
-    <div class="p-5 border border-muted bg-background text-center font-mono">
+    <div class="p-5 border border-muted bg-background text-center ">
-        <div>Payment Required</div>
+        @Qr(bolt11, "lightning:"+bolt11)
-        <div class="my-3">@Qr(bolt11, "lightning:"+bolt11)</div>
+        <small class="mx-auto w-[256px] my-1 break-words">{ bolt11 }</small>
         <div class="my-1">{ strconv.Itoa(msats/1000) } sats</div>
-        @InvoiceStatus(hash, expiresIn, paid)
+        if !paid {
-        <div class="none" id="bolt11" bolt11-data={ templ.JSONString(bolt11) } hx-preserve></div>
+            <div class="font-mono" id="countdown" countdown-data={ templ.JSONString(expiresIn)} hx-preserve></div>
-        <script type="text/javascript" id="bolt11-js" hx-preserve>
+            <script type="text/javascript">
-            var $ = selector => document.querySelector(selector)
+            function countdown() {
-            var bolt11 = JSON.parse($("#bolt11").getAttribute("bolt11-data"))
+                // a script that was included in a previous response might already be running the countdown
-            console.log(bolt11)
+                if (typeof interval !== "undefined") return
-        </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"))
 
@@ -40,17 +27,14 @@ templ InvoiceStatus(hash string, 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()
-            var interval = setInterval(_countdown, 1000)
+                interval = setInterval(_countdown, 1000)
+            }
+            countdown()
             </script>
             <div
                 hx-get={ string(templ.SafeURL("/invoice/" + hash)) }
@@ -58,5 +42,8 @@ templ InvoiceStatus(hash string, 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="flex justify-center p-3 w-screen">
+				<div class="m-3">
 					@component
 				</div>
 			</div>

shell.nix

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