explorer/site: enhance explorer UI to display total network and trx g…

…as consumption

This comment introduces UI updates to display total network gas consumption statistics across all transactions, as well as individual transaction gas consumption. These updates enhance the understanding of gas consumption by providing insights that can help users set appropriate gas limits, identify peak usage and anomalies, manage costs, and optimize blockchain performance.

Update Summary:

- Explorer Home Page: The `index.html` file has been updated to include a new section that displays total network gas consumption statistics, covering total gas, WASM gas, ZK circuits gas, signatures gas, and deployments, along with their average, minimum, and maximum values.

- Transaction Details Page: The `transaction.html` file has been updated to include gas consumption metrics and timestamp for individual transactions.

- Index Route: The index route in `app.py` has been modified to retrieve metrics statistics.

- RPC Module: The `rpc.py` file has been updated by introducing a new function to retrieve metrics statistics from the blockchain-explorer daemon.

script/research/blockchain-explorer/site/app.py

@@ -15,18 +15,34 @@
 # 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/>.
 
-import asyncio
-from flask import Flask, request, render_template
-
 import rpc
+from flask import Flask, request, render_template
 
 app = Flask(__name__)
 
 @app.route('/')
 async def index():
+    # Fetch data from RPC
     blocks = await rpc.get_last_n_blocks("10")
-    stats = await rpc.get_basic_statistics()
-    return render_template('index.html', blocks=blocks, stats=stats)
+    basic_stats = await rpc.get_basic_statistics()
+
+    # Fetch the metric statistics
+    metric_stats = await rpc.get_metric_statistics()
+    has_metrics = metric_stats and isinstance(metric_stats, list)
+
+    # Get the latest metric statistics, or use None if no metrics are found
+    if has_metrics:
+        latest_metric_stats = metric_stats[-1]
+    else:
+        latest_metric_stats = None
+
+    # Render template
+    return render_template(
+        'index.html',
+        blocks=blocks,
+        basic_stats=basic_stats,
+        metric_stats=latest_metric_stats,
+    )
 
 @app.route('/search', methods=['GET', 'POST'])
 async def search():
@@ -45,6 +61,7 @@ async def block(header_hash):
     transactions = await rpc.get_block_transactions(header_hash)
     return render_template('block.html', block=block, transactions=transactions)
 
+
 @app.route('/transaction/<transaction_hash>')
 async def transaction(transaction_hash):
     transaction = await rpc.get_transaction(transaction_hash)
@@ -57,3 +74,4 @@ def page_not_found(e):
 @app.errorhandler(500)
 def page_not_found(e):
     return render_template('500.html'), 500
+

script/research/blockchain-explorer/site/rpc.py

@@ -94,6 +94,10 @@ async def get_last_n_blocks(n: str):
 async def get_basic_statistics():
     return await query("statistics.get_basic_statistics", [])
 
+# Retrieve fee data statistics from blockchain-explorer daemon
+async def get_metric_statistics():
+    return await query("statistics.get_metric_statistics", [])
+
 # Retrieve the block information of given header hash from blockchain-explorer daemon
 async def get_block(header_hash: str):
     return await query("blocks.get_block_by_hash", [header_hash])

script/research/blockchain-explorer/site/templates/index.html

@@ -53,16 +53,56 @@ <h2 class="display-8 text-white border-l3" style="font-family:'Weissrundgotisch'
 
     <div class="row m-0 border-secondary border-top">
         <div class="text-white mb-0 border-bottom border-secondary lead-text" style="width:100%;">
-            <h2 class="display-8 text-white border-l3" style="font-family:'Weissrundgotisch';line-height:.9em;">Statistics</h2>
+            <h2 class="display-8 text-white border-l3" style="font-family:'Weissrundgotisch';line-height:.9em;">Basic Statistics</h2>
             <ul>
-                <li>Height: {{ stats[0] }}</li>
-                <li>Epoch: {{ stats[1] }}</li>
-                <li>Last block: <a href="block/{{ stats[2] }}">{{ stats[2] }}</a></li>
-                <li>Total blocks: {{ stats[3] }}</li>
-                <li>Total transactions: {{ stats[4] }}</li>
+                <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>
     </div>
+
+<div class="row m-0 border-secondary border-top">
+    <div class="text-white mb-0 border-bottom border-secondary lead-text" style="width:100%;">
+        <h2 class="display-8 text-white border-l3" style="font-family:'Weissrundgotisch';line-height:.9em;">Total Network Gas Consumption Statistics</h2>
+
+        <strong>Total Gas</strong>
+        <ul>
+            <li>Average: {{ metric_stats[0] }}</li>
+            <li>Minimum: {{ metric_stats[1] }}</li>
+            <li>Maximum: {{ metric_stats[2] }}</li>
+        </ul>
+
+        <strong>WASM Gas</strong>
+        <ul>
+            <li>Average: {{ metric_stats[3] }}</li>
+            <li>Minimum: {{ metric_stats[4] }}</li>
+            <li>Maximum: {{ metric_stats[5] }}</li>
+        </ul>
+
+        <strong>ZK Circuits Gas</strong>
+        <ul>
+            <li>Average: {{ metric_stats[6] }}</li>
+            <li>Minimum: {{ metric_stats[7] }}</li>
+            <li>Maximum: {{ metric_stats[8] }}</li>
+        </ul>
+
+        <strong>Signatures Gas</strong>
+        <ul>
+            <li>Average: {{ metric_stats[9] }}</li>
+            <li>Minimum: {{ metric_stats[10] }}</li>
+            <li>Maximum: {{ metric_stats[11] }}</li>
+        </ul>
+
+        <strong>Deployments Gas</strong>
+        <ul>
+            <li>Average: {{ metric_stats[12] }}</li>
+            <li>Minimum: {{ metric_stats[13] }}</li>
+            <li>Maximum: {{ metric_stats[14] }}</li>
+        </ul>
+</div>
 
 {% endblock %}
 

script/research/blockchain-explorer/site/templates/transaction.html

@@ -28,10 +28,20 @@ <h1 class="display-4 text-white border-l3" style="font-family:'Weissrundgotisch'
 
     <div class="row m-0 border-secondary border-top">
         <div class="text-white mb-0 border-bottom border-secondary lead-text" style="width:100%;">
+            <h2 class="display-8 text-white border-l3" style="font-family:'Weissrundgotisch';line-height:.9em;">Summary</h2>
             <ul>
+                <li>Timestamp: {{ transaction[3] }}</li>
                 <li>Block: <a href="../block/{{ transaction[1] }}">{{ transaction[1] }}</a></li>
                 <li>Payload: {{ transaction[2] }}</li>
             </ul>
+            <h2 class="display-8 text-white border-l3" style="font-family:'Weissrundgotisch';line-height:.9em;">Gas Consumption</h2>
+            <ul>
+                <li>Total: {{ transaction[4] }}</li>
+                <li>WASM: {{ transaction[5] }}</li>
+                <li>ZK Circuits: {{ transaction[6] }}</li>
+                <li>Signatures: {{ transaction[7] }}</li>
+                <li>Deployments: {{ transaction[8] }}</li>
+            </ul>
         </div>
     </div>