darkfi/bin/explorer/site/templates/index.html

<!--
 This file is part of DarkFi (https://dark.fi)

 Copyright (C) 2020-2026 Dyne.org foundation

 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU Affero General Public License as
 published by the Free Software Foundation, either version 3 of the
 License, or (at your option) any later version.

 This program is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 GNU Affero General Public License for more details.

 You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <https://www.gnu.org/licenses/>.
-->

{% extends "base.html" %}
{% block title %}Explorer{% endblock %}

{% block content %}
<div class="content-container">

    <!-- Explorer Search -->
    <div class="search-container">
        <h1>Explore</h1>
        <form action="/search">
            <input class="search-input" type="text" placeholder="Search for a block or transaction.." name="search_hash">
        </form>
    </div>

    <!--Network Summary -->
    <div class="content-section" style="padding-bottom: 0px;">
        <h2 class="content-section-header">Network Summary</h2>
        <ul>
            <li>Height: {{ basic_stats[0] }}</li>
            <li>Epoch: {{ basic_stats[1] }}</li>
            <li>Last block: <a href="block/{{ basic_stats[2] }}">{{ basic_stats[2] }}</a></li>
            <li>Total blocks: {{ basic_stats[3] }}</li>
            <li>Total transactions: {{ basic_stats[4] }}</li>
        </ul>
    </div>

    <!--Latest Blocks -->
    <div class="content-section">
        <h2 class="content-section-header">Latest Blocks</h2>
        <table class="table">
            <thead>
            <tr>
                <th>Height</th>
                <th>Hash</th>
                <th>Timestamp</th>
            </tr>
            </thead>
            <tbody>
            {% for block in blocks %}
            <tr>
                <td>{{ block[3] }}</td>
                <td><a href="block/{{ block[0] }}">{{ block[0] }}</a></td>
                <td>{{ block[4] }}</td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>

    <!--Total Network Gas Consumption -->
    <div class="content-section">
        <h2 class="content-section-header">Total Network Gas Consumption</h2>
        {% if metric_stats %}
        <table class="table">
            <thead>
            <tr>
                <th></th>
                <th>Average</th>
                <th>Minimum</th>
                <th>Maximum</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>Total</td>
                <td>{{ metric_stats[0] }}</td>
                <td>{{ metric_stats[1] }}</td>
                <td>{{ metric_stats[2] }}</td>
            </tr>
            <tr>
                <td>WASM</td>
                <td>{{ metric_stats[3] }}</td>
                <td>{{ metric_stats[4] }}</td>
                <td>{{ metric_stats[5] }}</td>
            </tr>
            <tr>
                <td>ZK Circuits</td>
                <td>{{ metric_stats[6] }}</td>
                <td>{{ metric_stats[7] }}</td>
                <td>{{ metric_stats[8] }}</td>
            </tr>
            <tr>
                <td>Signatures</td>
                <td>{{ metric_stats[9] }}</td>
                <td>{{ metric_stats[10] }}</td>
                <td>{{ metric_stats[11] }}</td>
            </tr>
            <tr>
                <td>Deployments</td>
                <td>{{ metric_stats[12] }}</td>
                <td>{{ metric_stats[13] }}</td>
                <td>{{ metric_stats[14] }}</td>
            </tr>
            </tbody>
        </table>
        {% else %}
        Gas consumption details are not available.
        {% endif %}
    </div>

    <!--Native Contracts -->
    <div class="content-section">
        <h2 class="content-section-header">Native Contracts</h2>
        <table class="table">
            <thead>
            <tr class="table-header">
                <th class="contract-id">Contract Id</th>
                <th class="contract-name text-center">Name</th>
                <th class="contract-description">Description</th>
            </tr>
            </thead>
            <tbody>
            {% for contract in native_contracts %}
            <tr class="table-row">
                <td class="contract-id">
                    <a href="contract/{{ contract[0] }}?name={{ contract[1]|urlencode }}">{{ contract[0] }}</a>
                </td>
                <td class="contract-name text-center">{{ contract[1] }}</td>
                <td class="contract-description">{{ contract[2] }}</td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>

</div>
{% endblock %}