webwall-show txn status

rin/wallet/web/static/index.html

@@ -127,6 +127,26 @@
       .sidebar button {
         width: 100%;
       }
+      .status-badge {
+        font-size: 11px;
+        padding: 2px 6px;
+        border-radius: 3px;
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+      }
+      .status-pending {
+        background: rgba(255, 193, 7, 0.2);
+        color: #ffc107;
+      }
+      .status-confirmed {
+        background: rgba(76, 175, 80, 0.2);
+        color: #4caf50;
+      }
+      .status-immature {
+        background: rgba(255, 152, 0, 0.2);
+        color: #ff9800;
+      }
       @media (max-width: 900px) {
         body {
           flex-direction: column;
@@ -246,8 +266,22 @@
         const li = document.createElement('li');
         const amount = Number(tx.amount).toFixed(8);
         const type = tx.category === 'send' ? 'Sent' : 'Received';
+        const confirmations = tx.confirmations || 0;
+        
+        let status, statusClass;
+        if (confirmations === 0) {
+          status = 'Pending';
+          statusClass = 'status-pending';
+        } else if (confirmations < 20) {
+          status = `Immature (${confirmations}/20)`;
+          statusClass = 'status-immature';
+        } else {
+          status = 'Confirmed';
+          statusClass = 'status-confirmed';
+        }
+        
         li.innerHTML = `
-          <div><strong>${type}</strong> ${amount} RIN</div>
+          <div><strong>${type}</strong> ${amount} RIN <span class="status-badge ${statusClass}">${status}</span></div>
           <div class="muted">${tx.time ? new Date(tx.time * 1000).toLocaleString() : ''}</div>
           <div class="muted">${tx.txid}</div>
         `;