From 3a3499cd8bd2ee20b23bf77d5656c11fb432f4e2 Mon Sep 17 00:00:00 2001
From: nate <nate@forehead-gate.com>
Date: Wed, 25 Mar 2026 23:05:12 +0400
Subject: [PATCH] feat: count down in realtime

---
 apps/web/src/views/checkout.ejs | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/views/checkout.ejs b/apps/web/src/views/checkout.ejs
index 4caa07e..7a4f332 100644
--- a/apps/web/src/views/checkout.ejs
+++ b/apps/web/src/views/checkout.ejs
@@ -216,7 +216,7 @@
         <span class="w-1.5 h-1.5 rounded-full <%= inv.status === 'underpaid' ? 'bg-yellow-500' : 'bg-blue-500' %> animate-pulse"></span>
         <span class="text-xs <%= inv.status === 'underpaid' ? 'text-yellow-400' : 'text-gray-400' %>"><%= inv.status === 'underpaid' ? 'Underpaid, send the rest' : 'Waiting for payment' %></span>
       </div>
-      <span class="text-xs text-gray-500 font-mono"><%= mins %>:<%= String(secs).padStart(2, '0') %></span>
+      <span id="timer" class="text-xs text-gray-500 font-mono" data-expires="<%= expiresAt.toISOString() %>"><%= mins %>:<%= String(secs).padStart(2, '0') %></span>
     </div>
 
     <% } else if (inv.status === 'confirming') { %>
@@ -265,6 +265,17 @@
 
 
   <script>
+    // Countdown timer
+    const timerEl = document.getElementById('timer');
+    if (timerEl) {
+      const expires = new Date(timerEl.dataset.expires).getTime();
+      setInterval(() => {
+        const left = Math.max(0, Math.floor((expires - Date.now()) / 1000));
+        timerEl.textContent = Math.floor(left / 60) + ':' + String(left % 60).padStart(2, '0');
+        if (left <= 0) location.reload();
+      }, 1000);
+    }
+
     // Copy address
     function copyAddr() {
       const addr = document.getElementById('pay-address');