From ca24fec9e5499c4debc8d363df7b787c19bb1665 Mon Sep 17 00:00:00 2001
From: nate <nate@forehead-gate.com>
Date: Thu, 19 Mar 2026 18:10:55 +0400
Subject: [PATCH] update: received payment screen

---
 apps/web/src/views/checkout.ejs | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/views/checkout.ejs b/apps/web/src/views/checkout.ejs
index e865911..ffff901 100644
--- a/apps/web/src/views/checkout.ejs
+++ b/apps/web/src/views/checkout.ejs
@@ -102,10 +102,7 @@
   <div class="card-static p-6 text-center space-y-5">
 
     <% if (inv.status === 'confirming') { %>
-    <!-- Loading spinner instead of QR -->
-    <div class="w-16 h-16 mx-auto rounded-lg bg-surface flex items-center justify-center">
-      <svg class="w-8 h-8 text-blue-500 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
-    </div>
+    <!-- intentionally empty — confirming state is handled below -->
     <% } else if (inv.status !== 'paid') { %>
     <!-- QR -->
     <div>
@@ -162,12 +159,13 @@
     </div>
 
     <% } else if (inv.status === 'confirming') { %>
-    <div class="flex items-center justify-center gap-2 text-sm">
-      <span class="w-2 h-2 rounded-full bg-blue-500 animate-pulse"></span>
-      <span class="text-blue-400">Transaction received, waiting for 1 confirmation...</span>
+    <div class="w-16 h-16 mx-auto rounded-full bg-blue-500/10 border border-blue-500/20 flex items-center justify-center mb-2">
+      <svg class="w-8 h-8 text-blue-500 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
     </div>
+    <p class="text-lg font-semibold text-white">Payment received</p>
+    <p class="text-sm text-gray-400">Waiting for 1 network confirmation...</p>
     <% if (inv.address) { %>
-    <a href="https://transaction.st/address/<%= inv.address %>" target="_blank" rel="noopener" class="block text-xs text-gray-500 hover:text-gray-400 transition-colors">View on block explorer &rarr;</a>
+    <a href="https://transaction.st/address/<%= inv.address %>" target="_blank" rel="noopener" class="block text-xs text-gray-500 hover:text-gray-400 transition-colors mt-1">View on block explorer &rarr;</a>
     <% } %>
 
     <% } else if (inv.status === 'paid') { %>