feat: Add js to pull bids and auction state

templates/auction.html

@@ -66,9 +66,9 @@
                 <div class="container-fluid">
                     <div class="card">
                         <div class="card-body">
-                            <div class="stick-right">{{next_action|safe}}</div>
+                            <div id="next-action" class="stick-right">{{next_action|safe}}</div>
                             <h4 class="card-title">{{rendered}}</h4>
-                            <h6 class="text-muted mb-2 card-subtitle">{{next | safe}}</h6>
+                            <h6 class="text-muted mb-2 card-subtitle" id="next">{{next | safe}}</h6>
                         </div>
                     </div>
                 </div>
@@ -96,11 +96,91 @@
                 <th></th>
             </tr>
         </thead>
-        <tbody>
-            {{bids | safe}}
+        <tbody id="bids-tbody">
+            <tr id="loading-row">
+                <td colspan="5" class="text-center">
+                    <div class="spinner-border spinner-border-sm me-2" role="status">
+                        <span class="visually-hidden">Loading...</span>
+                    </div>
+                    Loading bids...
+                </td>
+            </tr>
         </tbody>
     </table>
 </div>
+
+<script>
+    async function loadBids() {
+        const tbody = document.getElementById('bids-tbody');
+
+        try {
+            const response = await fetch(`/api/v1/wallet/domainBids?domain={{search_term}}`);
+            const data = await response.json();
+
+            if (response.ok && data.result) {
+                tbody.innerHTML = data.result;
+            } else {
+                tbody.innerHTML = '<tr><td colspan="5" class="text-center text-muted">No bids found. <a href="/auction/{{search_term}}/scan">Rescan Auction</a></td></tr>';
+            }
+        } catch (error) {
+            console.error('Error loading bids:', error);
+            tbody.innerHTML = '<tr><td colspan="5" class="text-center text-danger">Error loading bids</td></tr>';
+        }
+
+        try {
+            const nextStateResponse = await fetch(`/api/v1/hsd/nextAuctionState?domain={{search_term}}`);
+            const nextStateData = await nextStateResponse.json();
+
+            if (nextStateResponse.ok && nextStateData.state) {
+                document.getElementById('next').innerHTML = nextStateData.next;
+                document.getElementById('next-action').innerHTML = nextStateData.next_action;
+            } else {
+                document.getElementById('next').innerHTML = 'Unknown';
+                document.getElementById('next-action').innerHTML = '';
+            }
+
+        } catch (error) {
+            console.error('Error fetching next state:', error);
+        }
+
+
+
+        try {
+            const mempoolResponse = await fetch('/api/v1/hsd/mempoolBids');
+            const mempoolData = await mempoolResponse.json();
+            if (mempoolResponse.ok && mempoolData.result) {
+                const domainBids = mempoolData.result['{{search_term}}'];
+                if (domainBids && domainBids.length > 0) {
+                    let mempoolRows = '';
+                    domainBids.forEach(bid => {
+                        const bidValue = bid.revealed ? (bid.value / 1000000).toFixed(2) : 'Hidden until reveal';
+                        const lockupValue = (bid.lockup / 1000000).toFixed(2);
+                        const blindValue = bid.revealed ? (lockupValue - bidValue).toFixed(2) : 'Hidden until reveal';
+                        const type = bid.revealed ? 'Reveal' : 'Bid';
+                        mempoolRows += `<tr class="table-warning">
+                            <td>${lockupValue} HNS</td>
+                            <td>${bidValue} HNS</td>
+                            <td>${blindValue} HNS</td>
+                            <td>${bid.owner}</td>
+                            <td><a class='text-decoration-none' style='color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color)));' target='_blank' href='https://shakeshift.com/transaction/${bid.txid}'>Mempool ${type} 🔗</a></td>
+                        </tr>`;
+                    });
+                    tbody.innerHTML += mempoolRows;
+                }
+            }
+        } catch (error) {
+            console.error('Error loading mempool bids:', error);
+            // Don't override the main table content on mempool error
+        }
+    }
+
+    // Load bids when page loads
+    document.addEventListener('DOMContentLoaded', loadBids);
+
+    // Auto-refresh bids every 20 seconds
+    setInterval(loadBids, 20000);
+
+</script>
                         </div>
                     </div>
                 </div>