feat: Add better covenant display

Reviewed-on: #1

.gitignore

@@ -4,3 +4,4 @@ __pycache__/
 .env
 .vs/
 .venv/
+fireexplorer.db

Dockerfile

@@ -22,6 +22,7 @@ RUN --mount=type=cache,target=/root/.cache/uv \
 
 # Add mount point for data volume
 ENV BASE_DIR=/data
+ENV DATABASE_PATH=/data/fireexplorer.db
 VOLUME /data
 
 EXPOSE 5000

server.py

@@ -5,9 +5,12 @@ from flask import (
     send_from_directory,
     send_file,
     jsonify,
+    g,
+    request,
 )
 import os
 import requests
+import sqlite3
 from datetime import datetime
 import dotenv
 from tools import hip2, wallet_txt
@@ -16,6 +19,40 @@ dotenv.load_dotenv()
 
 app = Flask(__name__)
 
+DATABASE = os.getenv("DATABASE_PATH", "fireexplorer.db")
+
+
+def get_db():
+    db = getattr(g, "_database", None)
+    if db is None:
+        db = g._database = sqlite3.connect(DATABASE)
+        db.row_factory = sqlite3.Row
+    return db
+
+
+@app.teardown_appcontext
+def close_connection(exception):
+    db = getattr(g, "_database", None)
+    if db is not None:
+        db.close()
+
+
+def init_db():
+    with app.app_context():
+        db = get_db()
+        db.execute(
+            """
+            CREATE TABLE IF NOT EXISTS names (
+                namehash TEXT PRIMARY KEY,
+                name TEXT NOT NULL
+            )
+        """
+        )
+        db.commit()
+
+
+init_db()
+
 
 def find(name, path):
     for root, dirs, files in os.walk(path):
@@ -133,6 +170,32 @@ def catch_all(path: str):
     return render_template("404.html"), 404
 
 
+# endregion
+
+
+# region API routes
+@app.route("/api/v1/namehash/<namehash>")
+def namehash_api(namehash):
+    db = get_db()
+    cur = db.execute("SELECT * FROM names WHERE namehash = ?", (namehash,))
+    row = cur.fetchone()
+    if row is None:
+        # Get namehash from hsd.hns.au
+        req = requests.get(f"https://hsd.hns.au/api/v1/namehash/{namehash}")
+        if req.status_code == 200:
+            name = req.json().get("result")
+            if not name:
+                return jsonify({"name": "Error", "namehash": namehash})
+            # Insert into database
+            db.execute(
+                "INSERT OR REPLACE INTO names (namehash, name) VALUES (?, ?)",
+                (namehash, name),
+            )
+            db.commit()
+            return jsonify({"name": name, "namehash": namehash})
+    return jsonify(dict(row))
+
+
 @app.route("/api/v1/status")
 def api_status():
     return jsonify(
@@ -153,6 +216,7 @@ def hip02(domain: str):
                 "success": True,
                 "address": hip2_record,
                 "method": "hip02",
+                "name": domain,
             }
         )
 
@@ -163,16 +227,54 @@ def hip02(domain: str):
                 "success": True,
                 "address": wallet_record,
                 "method": "wallet_txt",
+                "name": domain,
             }
         )
     return jsonify(
         {
             "success": False,
+            "name": domain,
             "error": "No HIP02 or WALLET record found for this domain",
         }
     )
 
 
+@app.route("/api/v1/covenant", methods=["POST"])
+def covenant_api():
+    data = request.get_json()
+    # Get the covenant data
+    action = data.get("action")
+    items = data.get("items", [])
+
+    if not action:
+        return jsonify({"success": False, "data": data})
+
+    display = f"{action}"
+    if len(items) > 0:
+        name_hash = items[0]
+        # Lookup name from database
+        db = get_db()
+        cur = db.execute("SELECT * FROM names WHERE namehash = ?", (name_hash,))
+        row = cur.fetchone()
+        if row:
+            name = row["name"]
+            display += f' <a href="/name/{name}">{name}</a>'
+        else:
+            req = requests.get(f"https://hsd.hns.au/api/v1/namehash/{name_hash}")
+            if req.status_code == 200:
+                name = req.json().get("result")
+                if name:
+                    display += f" {name}"
+                    # Insert into database
+                    db.execute(
+                        "INSERT OR REPLACE INTO names (namehash, name) VALUES (?, ?)",
+                        (name_hash, name),
+                    )
+                    db.commit()
+
+    return jsonify({"success": True, "data": data, "display": display})
+
+
 # endregion
 
 

templates/assets/css/index.css

@@ -109,6 +109,7 @@ section {
     transition: transform 0.2s ease, box-shadow 0.2s ease;
     animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
     opacity: 0; /* Start hidden for animation */
+    min-width: 0; /* Prevent grid overflow */
 }
 
 .card:hover {
@@ -159,7 +160,7 @@ section {
 /* Info Grid */
 .info-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     gap: 1rem;
 }
 
@@ -168,6 +169,7 @@ section {
     background: rgba(15, 23, 42, 0.4);
     border-radius: 12px;
     border: 1px solid var(--card-border);
+    min-width: 0; /* Prevent grid overflow */
 }
 
 .info-item.no-border {
@@ -265,6 +267,7 @@ section {
     transition: all 0.2s ease;
     animation: staggerFade 0.4s ease forwards;
     cursor: pointer;
+    min-width: 0; /* Prevent flex overflow */
 }
 
 .tx-item:hover {
@@ -282,6 +285,7 @@ section {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    min-width: 0; /* Prevent flex overflow */
 }
 
 .tx-view-btn {
@@ -388,6 +392,7 @@ section {
     white-space: pre-wrap;
     word-wrap: break-word;
     margin: 0;
+    word-break: break-all;
 }
 
 /* Transaction Details */
@@ -418,6 +423,7 @@ section {
     border: 1px solid var(--card-border);
     border-radius: 8px;
     padding: 1rem;
+    min-width: 0; /* Prevent overflow */
 }
 
 .tx-io-header {
@@ -611,6 +617,7 @@ section {
     font-size: 0.9rem;
     white-space: pre-wrap;
     word-wrap: break-word;
+    word-break: break-all;
 }
 
 .result-box .error {
@@ -622,6 +629,16 @@ section {
     border: 1px solid rgba(239, 68, 68, 0.2);
 }
 
+.success-message {
+    color: var(--success-color);
+    background: rgba(16, 185, 129, 0.1);
+    border: 1px solid rgba(16, 185, 129, 0.2);
+    padding: 1rem;
+    border-radius: 8px;
+    margin-bottom: 1rem;
+    word-break: break-all;
+}
+
 /* Scrollbar */
 .result-box::-webkit-scrollbar {
     width: 8px;
@@ -700,6 +717,26 @@ a:hover {
         padding: 0.5rem;
         font-size: 0.85rem;
     }
+
+    .info-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media (max-width: 480px) {
+    .card {
+        padding: 1rem;
+    }
+    
+    .container {
+        padding: 0 1rem;
+    }
+
+    .tx-io-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.5rem;
+    }
 }
 
 /* Loading Animation */

templates/index.html

@@ -469,7 +469,7 @@
                                     <div style="display: flex; justify-content: space-between; margin-top: 0.5rem; font-size: 0.85rem; color: #b0b0b0;">
                                         <span>Height: ${coin.height.toLocaleString()}</span>
                                         <span>Coinbase: ${coin.coinbase ? 'Yes' : 'No'}</span>
-                                        <span>Covenant: ${coin.covenant.action}</span>
+                                        <span>Covenant: <span data-covenant-action="${coin.covenant.action}" data-covenant="${encodeURIComponent(JSON.stringify(coin.covenant))}">${coin.covenant.action}</span></span>
                                     </div>
                                 </div>
                             `).join('')}
@@ -521,7 +521,7 @@
                             </div>
                             <div class="info-item">
                                 <label>Covenant:</label>
-                                <span>${coin.covenant.action}</span>
+                                <span data-covenant-action="${coin.covenant.action}" data-covenant="${encodeURIComponent(JSON.stringify(coin.covenant))}">${coin.covenant.action}</span>
                             </div>
                         </div>
                     </div>
@@ -861,7 +861,7 @@
                                                 <span class="tx-io-value">${input.coin ? formatValue(input.coin.value) : 'Unknown'}</span>
                                             </div>
                                             <div class="tx-io-address">${input.coin ? input.coin.address : (input.address || 'Unknown')}</div>
-                                            ${input.coin && input.coin.covenant.action !== 'NONE' ? `<div class="tx-covenant">Covenant: ${input.coin.covenant.action}</div>` : ''}
+                                            ${input.coin && input.coin.covenant.action !== 'NONE' ? `<div class="tx-covenant" data-covenant-action="${input.coin.covenant.action}" data-covenant="${encodeURIComponent(JSON.stringify(input.coin.covenant))}">Covenant: ${input.coin.covenant.action}</div>` : ''}
                                         </div>
                                     `;
                                 }
@@ -879,7 +879,7 @@
                                         <span class="tx-io-value">${formatValue(output.value)}</span>
                                     </div>
                                     <div class="tx-io-address">${output.address}</div>
-                                    ${output.covenant.action !== 'NONE' ? `<div class="tx-covenant">Covenant: ${output.covenant.action}</div>` : ''}
+                                    ${output.covenant.action !== 'NONE' ? `<div class="tx-covenant" data-covenant-action="${output.covenant.action}" data-covenant="${encodeURIComponent(JSON.stringify(output.covenant))}">Covenant: ${output.covenant.action}</div>` : ''}
                                 </div>
                             `).join('')}
                         </div>
@@ -919,6 +919,7 @@
                 </div>
             `;
             document.body.appendChild(modal);
+            if (!data.error) updateCovenants();
         }
 
         // Display helper
@@ -940,6 +941,66 @@
             }
         }
 
+        // Update covenant information from API
+        async function updateCovenants() {
+            const elements = document.querySelectorAll('[data-covenant-action]');
+            const cache = {};
+
+            for (const el of elements) {
+                const action = el.dataset.covenantAction;
+                if (action === 'NONE') continue;
+
+                // Skip if already updated
+                if (el.dataset.covenantUpdated) continue;
+
+                // Get full covenant data
+                let covenantData = null;
+                if (el.dataset.covenant) {
+                    try {
+                        covenantData = JSON.parse(decodeURIComponent(el.dataset.covenant));
+                    } catch (e) {
+                        console.error('Failed to parse covenant data:', e);
+                    }
+                }
+
+                if (!covenantData) continue;
+
+                // Create a cache key based on the full covenant data
+                const cacheKey = JSON.stringify(covenantData);
+
+                let display = action;
+                if (cache[cacheKey]) {
+                    display = cache[cacheKey];
+                } else {
+                    try {
+                        const res = await fetch(`/api/v1/covenant`, {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json'
+                            },
+                            body: JSON.stringify(covenantData)
+                        });
+                        
+                        if (res.ok) {
+                            const data = await res.json();
+                            display = data.display || action;
+                            cache[cacheKey] = display;
+                        }
+                    } catch (e) {
+                        console.error('Failed to fetch covenant info:', e);
+                    }
+                }
+                
+                // Check if it's the .tx-covenant div which includes "Covenant: " text
+                if (el.classList.contains('tx-covenant')) {
+                    el.innerHTML = `Covenant: ${display}`;
+                } else {
+                    el.textContent = display;
+                }
+                el.dataset.covenantUpdated = "true";
+            }
+        }
+
         // Show loading animation
         function showLoading(elementId) {
             const element = document.getElementById(elementId);
@@ -1031,6 +1092,7 @@
                 resultElement.innerHTML = `<div class="error">Error: ${data.error}</div>`;
             } else {
                 resultElement.innerHTML = formatTransactionData(data);
+                updateCovenants();
             }
         }
 
@@ -1055,7 +1117,7 @@
                     const note = document.createElement('div');
                     note.className = 'success-message';
                     note.style.marginBottom = '1rem';
-                    note.innerHTML = `Resolved alias <strong>${hip02Result.name || address}</strong> to address`;
+                    note.innerHTML = `Resolved <strong>${hip02Result.name || address}</strong> to address <br><span class="mono">${address}</span>`;
                     resultElement.parentNode.insertBefore(note, resultElement);
                     setTimeout(() => note.remove(), 5000);
                 } else {
@@ -1106,6 +1168,7 @@
                 resultElement.innerHTML = `<div class="error">Error: ${data.error}</div>`;
             } else {
                 resultElement.innerHTML = formatAddressCoins(data);
+                updateCovenants();
             }
         }
 
@@ -1178,18 +1241,24 @@
             }
             
             showLoading('name-result');
-            const data = await apiCall(`namehash/${nameHash}`);
             
-            // Check if result is valid and redirect to name page
+            try {
+                const response = await fetch(`/api/v1/namehash/${nameHash}`);
+                const data = await response.json();
+                
                 const resultElement = document.getElementById('name-result');
                 if (data.error) {
-                resultElement.innerHTML = `<div class="error">Error: ${data.error.message ? data.error.message : "Failed to lookup hash"}</div>`;
-            } else if (data.result && typeof data.result === 'string') {
+                    resultElement.innerHTML = `<div class="error">Error: ${data.error}</div>`;
+                } else if (data.name) {
                     // Valid name found, redirect to name page
-                window.location.href = `/name/${data.result}`;
+                    window.location.href = `/name/${data.name}`;
                 } else {
                     resultElement.innerHTML = `<div class="error">No name found for this hash</div>`;
                 }
+            } catch (e) {
+                const resultElement = document.getElementById('name-result');
+                resultElement.innerHTML = `<div class="error">Error: ${e.message}</div>`;
+            }
         }
 
         // Load status when page loads