script/research/blockchain-explorer: basic web front-end added

script/research/blockchain-explorer/site/.gitignore

@@ -0,0 +1,2 @@
+/venv
+/__pycache__

script/research/blockchain-explorer/site/README.md

@@ -0,0 +1,44 @@
+Blockchain explorer web front-end
+=======
+
+This is a very basic python based web front-end, based on `flask`,
+to serve static pages with blockchain data.
+
+## Usage
+
+We fist have to run 2 other daemons, to retrieve data from.
+Note: all paths are from repo root.
+
+First we start a `darkfid` localnet:
+
+```
+% cd contrib/localnet/darkfid-single-node/
+% ./tmux_sessions.sh
+```
+
+It is advised to shutdown the `minerd` daemon after couple of blocks, to not waste resources.
+
+Now we start a `blockchain-explorer` daemon:
+
+```
+% cd script/research/blockchain-explorer
+% cargo +nightly run --release --all-features
+```
+
+Then we enter the site folder and we generate a new python virtual environment,
+source it and install required dependencies:
+
+```
+% cd script/research/blockchain-explorer/site
+% python -m venv venv
+% source venv/bin/activate
+% pip install -r requirements.txt
+```
+
+To start the `flask` server, simply execute:
+
+```
+% python -m flask run
+```
+
+The web site will be available at `127.0.0.1:5000`.

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

@@ -0,0 +1,17 @@
+from flask import Flask, render_template
+
+import rpc
+
+# DarkFi blockchain-explorer daemon JSON-RPC configuration
+# TODO: make this configurable
+URL = "127.0.0.1"
+PORT = 14567
+
+app = Flask(__name__)
+
+@app.route('/')
+async def index():
+    blocks = await rpc.get_last_n_blocks(10, URL, PORT)
+    stats = await rpc.get_basic_statistics(URL, PORT)
+    return render_template('index.html', blocks=blocks, stats=stats)
+

script/research/blockchain-explorer/site/requirements.txt

@@ -0,0 +1 @@
+flask[async]

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

@@ -0,0 +1,75 @@
+import asyncio, json, random
+from flask import abort
+
+# TODO have a single channel for the whole app
+# Class representing the channel with the JSON-RPC server.
+class Channel:
+    def __init__(self, reader, writer):
+        self.reader = reader
+        self.writer = writer
+
+    async def readline(self):
+        if not (line := await self.reader.readline()):
+            self.writer.close()
+            return None
+        # Strip the newline
+        return line[:-1].decode()
+
+    async def receive(self):
+        if (plaintext := await self.readline()) is None:
+            return None
+
+        message = plaintext
+        response = json.loads(message)
+        return response
+
+    async def send(self, obj):
+        message = json.dumps(obj)
+        data = message.encode()
+
+        self.writer.write(data + b"\n")
+        await self.writer.drain()
+
+# Create a Channel for given server.
+async def create_channel(server_name, port):
+    try:
+        reader, writer = await asyncio.open_connection(server_name, port)
+    except ConnectionRefusedError:
+        print(f"Error: Connection Refused to '{server_name}:{port}', Either because the daemon is down, is currently syncing or wrong url.")
+        abort(500)
+    channel = Channel(reader, writer)
+    return channel
+
+
+# Execute a request towards the JSON-RPC server
+async def query(method, params, server_name, port):
+    channel = await create_channel(server_name, port)
+    request = {
+        "id": random.randint(0, 2**32),
+        "method": method,
+        "params": params,
+        "jsonrpc": "2.0",
+    }
+    await channel.send(request)
+
+    response = await channel.receive()
+    # Closed connect returns None
+    if response is None:
+        print("error: connection with server was closed", file=sys.stderr)
+        abort(500)
+
+    if "error" in response:
+        error = response["error"]
+        errcode, errmsg = error["code"], error["message"]
+        print(f"error: {errcode} - {errmsg}", file=sys.stderr)
+        abort(500)
+
+    return response["result"]
+
+# Retrieve last n blocks from blockchain-explorer daemon
+async def get_last_n_blocks(n, server_name, port):
+    return await query("blocks.get_last_n_blocks", [str(n)], server_name, int(port))
+
+# Retrieve basic statistics from blockchain-explorer daemon
+async def get_basic_statistics(server_name, port):
+    return await query("statistics.get_basic_statistics", [], server_name, int(port))

script/research/blockchain-explorer/site/static/img/darkfi.svg

@@ -0,0 +1,208 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 687.3 179" style="enable-background:new 0 0 687.3 179;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<desc>Generated with Qt</desc>
+<g transform="matrix(1.45797,0,0,1.45797,502.142,172.042)">
+</g>
+<g transform="matrix(1.45797,0,0,1.45797,502.142,172.042)">
+</g>
+<g transform="matrix(1.45797,0,0,1.45797,502.142,172.042)">
+</g>
+<g transform="matrix(1.45797,0,0,1.45797,502.142,172.042)">
+</g>
+<g transform="matrix(1.45797,0,0,1.45797,502.142,172.042)">
+</g>
+<g transform="matrix(1.45797,0,0,1.45797,502.142,172.042)">
+</g>
+<g transform="matrix(1.45797,0,0,1.45797,502.142,172.042)">
+</g>
+<g transform="matrix(1.45797,0,0,1.45797,502.142,172.042)">
+</g>
+<g transform="matrix(1.45797,0,0,1.45797,502.142,172.042)">
+</g>
+<g transform="matrix(1.45797,0,0,1.45797,502.142,172.042)">
+</g>
+<g transform="matrix(1.45797,0,0,1.45797,502.142,172.042)">
+</g>
+<g transform="matrix(1.45797,0,0,1.45797,502.142,172.042)">
+</g>
+<g transform="matrix(1.45797,0,0,1.45797,502.142,172.042)">
+</g>
+<g transform="matrix(1.45797,0,0,1.45797,502.142,172.042)">
+</g>
+<g transform="matrix(1.45797,0,0,1.45797,502.142,172.042)">
+</g>
+<g transform="matrix(1.45797,0,0,1.45797,502.142,172.042)">
+</g>
+<g transform="matrix(0.18662,0,0,-0.18662,548.797,376.392)">
+</g>
+<g transform="matrix(0.18662,0,0,-0.18662,548.797,376.392)">
+</g>
+<g transform="matrix(0.18662,0,0,-0.18662,548.797,376.392)">
+</g>
+<g transform="matrix(0.18662,0,0,-0.18662,688.949,376.392)">
+</g>
+<g transform="matrix(0.18662,0,0,-0.18662,688.949,376.392)">
+</g>
+<g transform="matrix(0.18662,0,0,-0.18662,688.949,376.392)">
+</g>
+<g transform="matrix(0.18662,0,0,-0.18662,777.034,376.392)">
+</g>
+<g transform="matrix(0.18662,0,0,-0.18662,777.034,376.392)">
+</g>
+<g transform="matrix(0.18662,0,0,-0.18662,777.034,376.392)">
+</g>
+<g transform="matrix(0.18662,0,0,-0.18662,834.513,376.392)">
+</g>
+<g transform="matrix(0.18662,0,0,-0.18662,834.513,376.392)">
+</g>
+<g transform="matrix(0.18662,0,0,-0.18662,834.513,376.392)">
+</g>
+<g transform="matrix(0.18662,0,0,-0.18662,834.513,376.392)">
+</g>
+<g transform="matrix(0.18662,0,0,-0.18662,938.46,376.392)">
+</g>
+<g transform="matrix(0.18662,0,0,-0.18662,938.46,376.392)">
+</g>
+<g transform="matrix(0.18662,0,0,-0.18662,938.46,376.392)">
+</g>
+<g transform="matrix(0.18662,0,0,-0.18662,938.46,376.392)">
+</g>
+<g transform="matrix(0.18662,0,0,-0.18662,1054.91,376.392)">
+</g>
+<g transform="matrix(0.18662,0,0,-0.18662,1054.91,376.392)">
+</g>
+<g transform="matrix(0.18662,0,0,-0.18662,1054.91,376.392)">
+</g>
+<g transform="matrix(0.18662,0,0,-0.18662,1054.91,376.392)">
+</g>
+<g transform="matrix(0.18662,0,0,-0.18662,548.797,579.808)">
+</g>
+<g transform="matrix(0.18662,0,0,-0.18662,548.797,579.808)">
+</g>
+<g transform="matrix(0.18662,0,0,-0.18662,548.797,579.808)">
+</g>
+<g transform="matrix(0.18662,0,0,-0.18662,688.949,579.808)">
+</g>
+<g transform="matrix(0.18662,0,0,-0.18662,688.949,579.808)">
+</g>
+<g transform="matrix(0.18662,0,0,-0.18662,688.949,579.808)">
+</g>
+<g transform="matrix(0.18662,0,0,-0.18662,777.034,579.808)">
+</g>
+<g transform="matrix(0.18662,0,0,-0.18662,777.034,579.808)">
+</g>
+<g transform="matrix(0.18662,0,0,-0.18662,777.034,579.808)">
+</g>
+<g transform="matrix(0.18662,0,0,-0.18662,834.513,579.808)">
+</g>
+<g transform="matrix(0.18662,0,0,-0.18662,834.513,579.808)">
+</g>
+<g transform="matrix(0.18662,0,0,-0.18662,834.513,579.808)">
+</g>
+<g transform="matrix(0.18662,0,0,-0.18662,834.513,579.808)">
+</g>
+<g transform="matrix(0.18662,0,0,-0.18662,938.46,579.808)">
+</g>
+<g transform="matrix(0.18662,0,0,-0.18662,938.46,579.808)">
+</g>
+<g transform="matrix(0.18662,0,0,-0.18662,938.46,579.808)">
+</g>
+<g transform="matrix(0.18662,0,0,-0.18662,954.51,579.808)">
+</g>
+<g transform="matrix(0.18662,0,0,-0.18662,954.51,579.808)">
+</g>
+<g transform="matrix(0.18662,0,0,-0.18662,954.51,579.808)">
+</g>
+<g transform="matrix(0.18662,0,0,-0.18662,954.51,579.808)">
+</g>
+<g transform="matrix(0.18662,0,0,-0.18662,1070.96,579.808)">
+</g>
+<g transform="matrix(0.18662,0,0,-0.18662,1070.96,579.808)">
+</g>
+<g transform="matrix(0.18662,0,0,-0.18662,1070.96,579.808)">
+</g>
+<g transform="matrix(0.18662,0,0,-0.18662,1070.96,579.808)">
+</g>
+<g transform="matrix(1.45797,0,0,1.45797,502.142,172.042)">
+</g>
+<g transform="matrix(1.45797,0,0,1.45797,502.142,172.042)">
+</g>
+<g transform="matrix(1.45797,0,0,1.45797,502.142,172.042)">
+</g>
+<g transform="matrix(1.45797,0,0,1.45797,502.142,172.042)">
+</g>
+<g transform="matrix(1.45797,0,0,1.45797,502.142,172.042)">
+</g>
+<g transform="matrix(1.45797,0,0,1.45797,502.142,172.042)">
+</g>
+<g transform="matrix(1.45797,0,0,1.45797,502.142,172.042)">
+</g>
+<g transform="matrix(1,0,0,1,0,0)">
+</g>
+<g transform="matrix(1,0,0,1,0,0)">
+</g>
+<g transform="matrix(1.45797,0,0,1.45797,502.142,172.042)">
+</g>
+<g transform="matrix(1.45797,0,0,1.45797,502.142,172.042)">
+</g>
+<g transform="matrix(1,0,0,1,0,0)">
+	<path vector-effect="non-scaling-stroke" class="st0" d="M295.6,49H287c-2.3,2.1-4.5,4.4-5.8,7.3c-1.4,3-1.5,6.4-1.5,9.6v11.8v15.4
+		c0,3,0,5.9-0.8,8.8c-0.8,2.9-2.1,5.6-3.8,8c-5.3,7.6-14.7,12.6-23.8,14.9l-1.4-3.6c1.8-1.1,3.5-2.6,4.9-4.2
+		c2.4-3.2,3.6-7.1,4.1-11.1l0.3-33.1c0-1.7,0-3.3,0.3-4.9c0.3-1.7,0.9-3.2,1.8-4.7c1.8-2.7,4.5-4.9,7.3-6.5l12.9-7.7h-24.1
+		c-1.4,0-2.9,0-4.1-0.6c-1.4-0.5-2.6-1.2-3.5-2.3c-1.2-1.5-2.1-3.3-2.6-5.2c-0.5-2-0.8-3.9-0.8-5.8c-0.2-3.9,0.5-7.9,1.4-11.7
+		l3.3,0.2c0.3,1.2,0.8,2.3,1.5,3.3c0.6,0.9,1.7,1.7,2.7,2.3c0.9,0.5,2.1,0.9,3.3,1.1c1.2,0.2,2.4,0.2,3.5,0.2h38.5
+		c6.2,0,12.7,0.3,18.5,2.7c5.9,2.4,10.9,6.7,14.7,11.8c6.4,8.9,8.9,20,9.7,30.9c0.5,10.5-0.8,21.1-3.6,31.2
+		c-1.7,5.5-3.8,10.9-6.2,16.1l-37.9,20.9c-7.3-5.3-16.2-8.3-25.2-8.5c-11.5-0.3-19.1,2.9-27,11.8h-4.2c9.3-14.3,17-24.4,34.4-27.9
+		c13.8-2.7,29.6,1.8,40.8,10.5c3-7.9,5.3-16.1,6.8-24.4c1.2-7.9,1.8-15.6,1.5-23.5c0-8.5-2.6-19-8.2-25.6c-2.4-2.7-5.6-5-9.1-6.2
+		C302.5,49.3,299,49,295.6,49"/>
+</g>
+<g transform="matrix(1,0,0,1,0,0)">
+	<path vector-effect="non-scaling-stroke" class="st0" d="M400.3,123.1V80.6l-23.4-15l-16.7,8.8c-1.8,0.9-3.5,1.8-5,3.2
+		c-1.4,1.2-2.6,2.7-3.3,4.4c-0.8,1.7-1.2,3.6-1.1,5.5c0.2,2,0.8,3.9,1.8,5.6c2.1,3.2,5.5,5.5,8.9,7.1c0.8,0.3,1.4,0.8,2.1,1.1
+		c-3.5,1.8-6.8,4.1-9.9,6.7c-2.1,1.8-4.1,4.1-5.6,6.5s-2.4,5.2-2.6,8c-0.3,4.4,1.5,8.9,4.2,12.3c3.9,4.9,9.9,7.9,16.1,8.6l16.1-11.7
+		l11.5,11.7l16.1-11.2L400.3,123.1 M381.3,102.4c-2.7-0.6-5.5-1.2-8.2-2.1c-1.8-0.6-3.6-1.2-5.5-1.8c-1.1-0.5-2-0.9-3-1.4
+		c-2.7-1.4-5.3-3-7.3-5.3c-1.4-1.7-2.3-3.6-2.3-5.8c0-1.5,0.5-2.9,1.2-4.2c0.8-1.4,1.7-2.4,2.9-3.3c0.9-0.8,2.1-1.4,3.2-1.8l19,11.7
+		C381.3,93,381.3,97.7,381.3,102.4 M381.3,106.8c0,7.7,0,15.5,0,23.2c-1.7,0.5-3.3,0.6-5,0.3c-2.1-0.5-4.2-1.5-5.9-3
+		c-1.7-1.5-2.9-3.2-3.9-5.2c-2.1-4.1-3.2-8.8-2.4-13.3c0.3-2.3,1.2-4.5,2.4-6.5c2,0.6,3.9,1.4,5.9,2
+		C375.4,105.1,378.3,105.8,381.3,106.8"/>
+</g>
+<g transform="matrix(1,0,0,1,0,0)">
+	<path vector-effect="non-scaling-stroke" class="st0" d="M453.5,123.7l-8.2,5.5l-5.9-4.7V79.8c2.1,2.1,4.7,3.8,7.4,5
+		c1.8,0.8,3.6,1.4,5.6,1.4s3.8-0.5,5.6-1.2c2.3-1.1,4.1-2.7,5.5-4.9c1.4-2.1,2.3-4.4,2.9-6.8c0.8-2.7,1.4-5.5,1.7-8.3h-2.9
+		c-1.4,2.3-3.6,4.2-7.9,4.2c-3.6,0-6.1-2-7.4-4.2h-1.7l-10.5,12l-11.2-12l-15.8,11.1l8.5,8.6v39.9L415,129l18.8,14.6l22.6-16.4
+		L453.5,123.7"/>
+</g>
+<g transform="matrix(1,0,0,1,0,0)">
+	<path vector-effect="none" class="st0" d="M544,125.3l-6.5,4.4l-29.7-44.3l1.4-3c2.1,2,4.9,3.6,7.6,4.4c2.3,0.8,4.9,0.9,7.3,0.6
+		c2.4-0.3,4.7-1.2,6.7-2.6c2.1-1.5,3.9-3.5,5.3-5.6c1.4-2.1,2.3-4.7,3-7.1c0.6-2.1,1.1-4.2,1.4-6.4h-2.9c-0.9,1.7-2.3,3.2-3.9,4.2
+		c-1.7,1.1-3.5,1.5-5.5,1.5c-2.1,0-4.1-0.3-5.9-1.4s-3.2-2.6-4.2-4.4h-1.5l-22.4,34.9l29.7,43.7l23.4-15.3L544,125.3"/>
+</g>
+<g transform="matrix(1,0,0,1,0,0)">
+	<path vector-effect="non-scaling-stroke" class="st0" d="M492.5,124.5V26.4h-2.9l-24.7,17.4l7.1,7.9c0.2,0.8,0.2,1.5,0.2,2.3v69.1
+		l-5,3.2l18.8,16.4l16.1-10.8L492.5,124.5"/>
+</g>
+<g transform="matrix(1,0,0,1,0,0)">
+	<path vector-effect="none" class="st0" d="M565,93.4h-26.4l13.2,23L565,93.4"/>
+</g>
+<path class="st0" d="M610.3,42c7.4,7.4,14.3,10,22.9,11.1l22-17.7l-3.6-3.2l-4.2,3.2c-12.6,0-25.5-5.9-29-11.5L589,49.8v20.6h-6.5
+	l-14.1,12v3.3c21.4,0,3.3,0,20.6,0v30.2c0,9.9-0.2,14.7-1.5,17.7c-4.1-1.5-8.6-2.9-15.3-2c-17.1,2.3-29.1,16.7-33.5,25.8h3.8
+	c0,0,4.9-8.9,19.3-8.9c5,0,9.3,1.7,12.3,3.9c0,0,28.1-25.3,36.4-35.6V85.7h12.4l19.7-12.9v-3h-32.1V42H610.3z"/>
+<g transform="matrix(1,0,0,1,0,0)">
+	<path vector-effect="none" class="st0" d="M683.8,125.3l-6.7,4.4l-5-5.2V78.7l-11.7-13.8l-15.2,10.3l7.9,9.4v39.9l-4.9,3.5
+		l17.3,15.5l21.8-15.3L683.8,125.3"/>
+</g>
+<g transform="matrix(1,0,0,1,0,0)">
+	<path vector-effect="none" class="st0" d="M661.6,34.5l11.3,12.3L660.7,58l-11.3-12.3L661.6,34.5"/>
+</g>
+<g>
+	<path class="st0" d="M103.3,38.4c-12.4,0-22.4,10-22.4,22.4s10,22.4,22.4,22.4s22.4-10,22.4-22.4S115.7,38.4,103.3,38.4z M103.3,71
+		c-5.6,0-10.1-4.5-10.1-10.1s4.5-10.1,10.1-10.1s10.1,4.5,10.1,10.1S108.9,71,103.3,71z"/>
+	<path class="st0" d="M0,0l103.3,179L206.6,0H0L0,0z M103.3,92.8c-20.1,0-37.2-16-45.9-32c8.7-16,25.8-32,45.9-32s37.2,16,45.9,32
+		C140.5,76.8,123.5,92.8,103.3,92.8z"/>
+</g>
+</svg>

script/research/blockchain-explorer/site/static/style.css

@@ -0,0 +1,830 @@
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("font-files/Inter-Regular.woff2?v=3.19") format("woff2"),
+       url("font-files/Inter-Regular.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url("font-files/Inter-Italic.woff2?v=3.19") format("woff2"),
+       url("font-files/Inter-Italic.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("font-files/Inter-Bold.woff2?v=3.19") format("woff2"),
+       url("font-files/Inter-Bold.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url("font-files/Inter-BoldItalic.woff2?v=3.19") format("woff2"),
+       url("font-files/Inter-BoldItalic.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: 'InterDisplay';
+  font-style:  normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url("font-files/InterDisplay-Black.woff2?v=3.19") format("woff2"),
+       url("font-files/InterDisplay-Black.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: 'InterDisplay';
+  font-style:  italic;
+  font-weight: 900;
+  font-display: swap;
+  src: url("font-files/InterDisplay-BlackItalic.woff2?v=3.19") format("woff2"),
+       url("font-files/InterDisplay-BlackItalic.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: 'InterDisplay';
+  font-style:  normal;
+  font-weight: 200;
+  font-display: swap;
+  src: url("font-files/InterDisplay-ExtraLight.woff2?v=3.19") format("woff2"),
+       url("font-files/InterDisplay-ExtraLight.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: 'Chomsky';
+  font-style:  normal;
+  font-weight: 700;
+  font-display: swap;
+  src:  url("font-files/Chomsky.woff2?v=3.19") format("woff2"),
+        url("font-files/Chomsky.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: 'IBMPlexMono';
+  font-style:  normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("font-files/IBMPlexMono-Light.woff2") format("woff2"),
+	   url("font-files/IBMPlexMono-Light.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: 'WeissRundgotisch';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("font-files/weissrundgotisch.regular.woff2") format("woff2"),
+     url("font-files/weissrundgotisch.regular.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: 'IBMPlexSansArabic';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("font-files/IBMPlexSansArabic-Regular.woff2") format("woff2"),
+     url("font-files/IBMPlexSansArabic-Regular.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: 'ReemKufi';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("font-files/ReemKufi-Bold.woff2") format("woff2"),
+     url("font-files/ReemKufi-Bold.woff?v=3.19") format("woff");
+}
+
+/* */
+
+body{
+	font-family: 'Inter', sans-serif;
+	font-style:normal;
+	font-weight:700;
+	background:#090909;
+  text-align:inherit;
+}
+
+.description{
+  margin-top:30px;
+}
+
+p{
+  font-family: 'IBMPlexMono', monospace;
+	font-style:normal;
+	font-weight:400;
+}
+
+h1{
+	font-family: 'InterDisplay', sans-serif;
+	font-style:normal;
+	font-weight:900;
+}
+
+h3 a{
+  color:#00ffff;
+  text-decoration:none;
+}
+
+h3 a:hover{
+  color:#4c9fb5;
+}
+
+.main-text{
+  padding-bottom:70px;
+  background-color:#001111;
+  background-image:url('img/sunset.png');
+  background-position:bottom;
+  background-repeat:no-repeat;
+}
+
+.border-st{
+	border-radius:0;
+}
+
+.border-l1{
+  font-size:56px;
+  text-align:center;
+	text-shadow: 0px 0px 5px #0ff;
+	line-height:1.3em;
+  padding-left:100px;
+  padding-right:100px;
+}
+
+.border-l{
+  font-size:36px;
+  text-align:center;
+  font-weight:100;
+  letter-spacing:1px;
+  color:#005b60;
+	/* text-shadow: 0px 0px 2px #0ff; */
+	line-height:1.3em;
+  padding-top:70px;
+  padding-left:180px;
+  padding-right:180px;
+}
+
+.border-f{
+border-left-width:1px;
+border-left-style:solid;
+border-left-color:#0ff;
+text-shadow: 0px 0px 5px #0ff;
+line-height:1.1em;
+padding-left:48px;
+}
+
+.border-l2{
+	border-left-width:1px;
+	border-left-style:solid;
+	border-left-color:#0ff;
+	font-family: 'WeissRundgotisch', blackletter;
+	font-style:normal;
+	font-weight:400;
+  font-size:2em;
+  line-height:.85em;
+}
+
+.border-l3{
+	/* text-shadow: 0px 0px 5px #0ff; */
+	line-height:1.1em;
+	/*filter:blur(20px);*/
+	/*transition: ease-in-out 10s;*/
+}
+
+a:hover{
+	text-decoration:none;
+}
+
+.mobile{
+  display:none;
+}
+
+.news{
+	padding-top:48px;
+	padding-bottom:48px;
+}
+
+.info{
+	font-family: 'IBMPlexMono', monospace;
+	font-style:  normal;
+	font-weight: 400;
+	font-size:12px;
+	letter-spacing:0.12em;
+	border-left:1px solid #0ff;
+}
+
+.dl-bt{
+  display:inline-block;
+  background-color:#000;
+	transition:ease-in-out 0.15s;
+  border:1px solid #00282e;
+  color:#fff;
+  font-family:'IBMPlexMono',monospace;
+  font-weight:400;
+}
+
+.dl-bt:hover{
+	background-color:#000c0d;
+  border:1px solid #00282e;
+  color:#82b2b5;
+}
+
+.button-insights,.button-insights span{
+  transition:ease .2s;
+  color:#80ffff;
+
+}
+
+.button-insights:hover{
+  background:#180606;
+}
+
+.button-insights:hover span{
+    color:#0ff;
+}
+
+.title-block{
+  background-image:url('img/sunset.png');
+  background-position:bottom;
+  background-repeat:no-repeat;
+}
+
+footer{
+  background-color:#090909;
+  background-image:url('img/sunset2.png');
+  background-position:bottom;
+  background-repeat:no-repeat;
+	height:10vw;
+    bottom: 0;
+    width: 100%;
+}
+
+.navbar-toggler{
+	border-radius:0px;
+	border-color:#6c757d;
+	opacity:1;
+}
+
+.navbar{
+  padding-left:10px;
+  padding-right:10px;
+  padding-top:0;
+  padding-bottom:0;
+  background:#000;
+}
+
+.nav-item a{
+  margin-left:10px;
+  font-family:'IBMPlexMono', monospace;
+  font-weight:400;
+  font-size:.8em;
+  color:#fff;
+}
+
+.nav-link{
+  font-size:.6em;
+  color:#fff;
+}
+
+.nav-item a:hover{
+  color:red;
+}
+
+.a{
+	background-color:rgba(0, 0, 0, 0);
+	transition: ease-in-out 0.2s;
+}
+
+.b{
+	background-color:#000;
+	border-bottom:1px solid #6c757d;
+	padding-top:0px;
+	padding-bottom:0px;
+}
+
+.b 	.nav-link{
+	border:0;
+}
+
+.b .navbar-brand img{
+	max-height:30px;
+	padding:0;
+}
+
+.b .border-st{
+	padding-bottom:0;
+	padding-top:0;
+}
+
+.quote{
+	border-left:1px solid #0ff;
+  background-color:#001615;
+  padding-top:15px;
+  padding-bottom:15px;
+  padding-right:15px;
+}
+
+.quote-src{
+  font-family: 'IBMPlexMono', monospace;
+  font-size:.8em;
+  color:#fff;
+  display:inline-block;
+  border-left:1px solid #0ff;
+  padding-top:10px;
+}
+
+.btn:hover{
+	color:#000;
+	background-color:#000;
+}
+
+a:hover .btn {
+	color:#000;
+}
+
+.icon-sm{
+		vertical-align:middle;
+    width:30px;
+	}
+
+/* Manifesto */
+
+.p-text{
+	font-family: 'Inter';
+	font-style:  normal;
+	font-weight: 400;
+	padding:48px;
+}
+
+h4{
+	font-size:2em;
+	padding-left:0.5em;
+	border-left-width:1px;
+	border-left-style:solid;
+	border-left-color:#0ff;
+
+	font-family: 'InterDisplay', sans-serif;
+	font-style:normal;
+	font-weight:800;
+}
+
+.p-text a{
+	color:#0ff;
+	border-bottom:1px solid #0ff;
+	padding-bottom:2px;
+	transition:ease-in-out 0.3s;
+}
+
+.p-text a:hover{
+	color:#00ffa3;
+	border-bottom:1px solid #00ffa3;
+}
+
+.l-ph{
+	background:url("img/manifesto.jpg") fixed;
+  background-position:right;
+}
+
+.l-ph-ar{
+	background:url("img/manifesto.jpg") fixed;
+  background-position:left;
+}
+
+#manifesto{
+  max-width:700px;
+}
+
+.quote-code{
+  font-family: 'IBMPlexMono', monospace;
+  font-style:  normal;
+  font-weight: 400;
+  display:block;
+  padding:10px;
+}
+
+code{
+  color:#fff;
+  background:#001615;
+  padding:2px;
+  font-size:1.1em;
+  color:#D8E8E2;
+}
+
+#language{
+  font-family: 'IBMPlexMono', monospace;
+  font-style:  normal;
+  font-weight: 400;
+  color:#a0a0a0;
+  margin-bottom:30px;
+}
+
+#language a{
+  color:#a0a0a0;
+  border-bottom:1px solid #a0a0a0;
+}
+
+#language a:hover{
+  color:#fff;
+  border-bottom:1px solid #fff;
+}
+
+/* Manifesto Arabic */
+
+.p-text-ar{
+  font-family: 'IBMPlexSansArabic';
+  font-style: normal;
+  font-weight: 400;
+  font-size:1.1em;
+	padding:48px;
+}
+
+.quote-ar{
+	border-right:1px solid #0ff;
+  background-color:#001615;
+  padding-top:15px;
+  padding-bottom:15px;
+  padding-right:15px;
+}
+
+.quote-src-ar{
+  font-family: 'IBMPlexMono', monospace;
+  font-size:1em;
+  color:#fff;
+  display:inline-block;
+  border-right:1px solid #0ff;
+  padding-top:10px;
+}
+
+.h4-ar{
+	font-size:2em;
+	padding-right:0.5em;
+	border-right-width:1px;
+	border-right-style:solid;
+	border-right-color:#0ff;
+  border-left-width:0;
+  border-left-style:none;
+	font-family: 'InterDisplay', sans-serif;
+	font-style:normal;
+	font-weight:black;
+}
+
+/* Overview */
+
+.lead-text{
+  padding:48px;
+}
+
+.source-list{
+  border-left: 1px solid #00ffff;
+}
+
+/* Community */
+
+.comm{
+  padding-left:48px;
+}
+
+h5{
+	font-size:2em;
+	padding-left:0.5em;
+	border-left-width:1px;
+	border-left-style:solid;
+	border-left-color:#0ff;
+
+	font-family: 'InterDisplay', sans-serif;
+	font-style:normal;
+	font-weight:800;
+}
+
+h5 a{
+	color:#fff;
+	border-bottom:1px solid #0ff;
+	transition:ease-in-out 0.3s;
+}
+
+h5 a:hover{
+	color:#f00;
+	border-bottom:1px solid #f00;
+}
+
+/* Media */
+
+.media-text{
+  font-family:Weissrundgotisch;
+  color:#005458;
+  text-shadow: 0 0 5px #002e4a;
+  -webkit-text-stroke: .5px #001f1f;
+}
+
+/* Download */
+
+.dl-info{
+	font-family: 'IBMPlexMono', monospace;
+	font-style:  normal;
+	font-weight: 400;
+	font-size:15px;
+	letter-spacing:0.12em;
+	border-left:1px solid #0ff;
+}
+
+.navbarb{
+  display:none;
+}
+
+/* Responsive */
+
+@media (max-width: 400px) {
+  .comm{
+    padding-left:30px;
+  }
+}
+
+@media (max-width: 590px) {
+	.navbar-brand img
+	{
+		max-height:40px;
+	}
+
+	.about
+	{
+		font-size:4.5vw;
+	}
+
+	footer{
+		height:60vw;
+	}
+
+	.icon-sm{
+		max-width:20px;
+		vertical-align:middle;
+	}
+
+	.p-text{
+		font-size:14px;
+		padding:24px;
+	}
+}
+
+.mail{
+	display:inline-block;
+}
+
+@media (max-width: 991px) {
+
+  .border-l1{
+    padding-left:60px;
+    padding-right:60px;
+  }
+
+  .news{
+	padding-top:0px;
+	padding-bottom:48px;
+}
+
+.border-l{
+  padding-left:100px;
+  padding-right:100px;
+}
+
+}
+
+@media (max-width: 767px) {
+	.border-st{
+	background-color:#000;
+}
+
+.border-l{
+  padding-left:70px;
+  padding-right:70px;
+}
+
+.navbarb{
+  display:block;
+  margin:0;
+  padding:0;
+}
+
+	.img-dl{
+		display:none;
+	}
+
+	.dl-info-v{
+		display:none;
+	}
+
+	.navbar-nav{
+	margin:auto;
+}
+
+}
+
+@media (max-width: 730px) {
+
+  .lead-text{
+    padding:24px;
+  }
+
+		.display-1
+	{
+		font-size:10vw;
+	}
+
+  .space{
+    display:none;
+  }
+
+  .desktop{
+    display:none;
+  }
+
+  .mobile{
+    display:block;
+  }
+
+		.border-l
+	{
+      padding-left:20px;
+      padding-right:20px;
+  		font-size:7vw;
+	}
+
+  .border-f,.border-l3{
+  border-left-width:1px;
+}
+
+.media-text{
+  font-size:1.7em;
+}
+}
+
+
+@media (max-width: 350px) {
+	.navbar-brand img
+	{
+		max-height:30px;
+	}
+
+  .border-l1{
+    padding-left:20px;
+    padding-right:20px;
+  }
+
+  .border-l
+{
+    padding-left:10px;
+    padding-right:10px;
+}
+}
+
+/* ___________________ */
+
+
+.container2 {
+  max-width: 1050px;
+  width: 90%;
+  margin: auto;
+}
+
+.navbar2 {
+  width: 100%;
+}
+
+.nav-container2 {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 30px;
+}
+
+.navbar2 .menu-items {
+  display: flex;
+}
+
+.navbar2 .nav-container2 li {
+  list-style: none;
+}
+
+.navbar2 .nav-container2 a {
+  text-decoration: none;
+  color: #0e2431;
+  font-weight: 500;
+  font-size: 1.2rem;
+  padding: 0.7rem;
+}
+
+/*.navbar2 .nav-container2 a:hover{
+}*/
+
+.nav-container2 {
+  display: block;
+  position: relative;
+}
+
+.nav-container2 .checkbox {
+  position: absolute;
+  display: block;
+  height: 40px;
+  width: 40px;
+  top: 0px;
+  right: 0px;
+  z-index: 5;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.nav-container2 .hamburger-lines {
+  display: block;
+  height: 15px;
+  width: 20px;
+  position: absolute;
+  top: 12px;
+  right: 0px;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.nav-container2 .hamburger-lines .line {
+  display: block;
+  height: 2px;
+  width: 100%;
+  border-radius: 0;
+  background: #fff;
+}
+
+.nav-container2 .hamburger-lines .line1 {
+  transform-origin: 0% 0%;
+/*  transition: transform 0.4s ease-in-out;*/
+}
+
+.nav-container2 .hamburger-lines .line2 {
+/*  transition: transform 0.2s ease-in-out;*/
+}
+
+.nav-container2 .hamburger-lines .line3 {
+  transform-origin: 0% 100%;
+/*  transition: transform 0.4s ease-in-out;*/
+}
+
+.menu-items {
+  background:#000;
+  margin-top:-10px;
+  /*height: 100vh;*/
+  width: 150px;
+  transform: translate(150%);
+  display: flex;
+  flex-direction: column;
+  margin-left:0;
+  margin-right:0;
+  padding-top:50px;
+  transition: transform 0.5s ease-in-out;
+  border-top:1px solid #fff;
+  border-left:1px solid #fff;
+  border-right:1px solid #fff;
+}
+
+.navbar2 .menu-items li {
+  display:inline-block;
+  width:100%;
+  padding:5px;
+  margin-left:auto;
+  margin-right:auto;
+  border-bottom:1px solid #fff;
+}
+
+.navbar2 .menu-items li a{
+    color:#fff;
+    font-size:1rem;
+}
+
+.nav-container2 input[type="checkbox"]:checked ~ .menu-items {
+  transform: translateX(0);
+}
+
+.nav-container2 input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
+  transform: rotate(45deg);
+}
+
+.nav-container2 input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
+  transform: scaleY(0);
+}
+
+.nav-container2 input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
+  transform: rotate(-45deg);
+}
+
+.nav-container2 input[type="checkbox"]:checked ~ .logo{
+  display: none;
+}
+

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

@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>DarkFi &ndash; {% block title %}{% endblock %}</title>
+
+    <link rel="icon" type="image/png" href="{{ url_for('static', filename= 'img/icon.png') }}" />
+
+    <!-- Latest compiled and minified CSS -->
+    <link rel="stylesheet" href="{{ url_for('static', filename= 'bootstrap.min.css') }}">
+
+    <link rel="stylesheet" href="{{ url_for('static', filename= 'style.css') }}" />
+
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+
+<body style="background-color:#090909">
+    <nav class="navbar navbar-expand-md fixed-top navbar-dark tedt border-bottom border-secondary">
+        <a class="navbar-brand" href="https://dark.fi/">
+            <img src="{{ url_for('static', filename= 'img/darkfi.svg') }}" style="height:35px;"/>
+        </a>
+
+        <div class="collapse navbar-collapse nav justify-content-end" id="collapsibleNavbar" style="height:35px;">
+            <ul class="navbar-nav">
+                <li class="nav-item">
+                    <a class="nav-link text-light" href="/">Explorer</a>
+                </li>
+
+                <!--Twitter-->
+                <li class="nav-item" style="padding-left:10px;">                
+                    <div class="icon-sm">
+                        <a href="https://twitter.com/DarkFiSquad" class="">
+                            <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg"
+                                 xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+                                 viewBox="0 0 100 100" style="enable-background:new 0 0 100 100; max-width:30px; min-width:15px;"
+                                 xml:space="preserve">
+                                <style type="text/css">
+                                    .st0{fill:#3a3a3a;}
+                                </style>
+                                <g id="layer1" transform="translate(-539.17946,-568.85777)">
+                                    <path id="path3611" class="st0" 
+                                        d="M570.9,659c37.3,0,57.7-30.9,57.7-57.7c0-0.9,0-1.8-0.1-2.6c4-2.9,7.4-6.4,10.1-10.5
+                                           c-3.6,1.6-7.5,2.7-11.6,3.2c4.2-2.5,7.4-6.5,8.9-11.2c-3.9,2.3-8.3,4-12.9,4.9c-3.7-3.9
+                                           -9-6.4-14.8-6.4c-11.2,0-20.3,9.1-20.3,20.3c0,1.6,0.2,3.1,0.5,4.6c-16.8-0.8-31.8-8.9
+                                           -41.8-21.2c-1.7,3-2.7,6.5-2.7,10.2c0,7,3.6,13.2,9,16.9c-3.3-0.1-6.5-1-9.2-2.5c0,0.1,0,0.2,0,
+                                           0.3c0,9.8,7,18,16.3,19.9c-1.7,0.5-3.5,0.7-5.3,0.7c-1.3,0-2.6-0.1-3.8-0.4c2.6,8.1,10.1,13.9,
+                                           18.9,14.1c-6.9,5.4-15.7,8.7-25.2,8.7c-1.6,0-3.2-0.1-4.8-0.3C548.7,655.7,559.4,659,570.9,659"/>
+                                </g>
+                            </svg>
+                        </a>
+                    </div>
+                </li>
+
+                <!--Codeberg-->
+                <li class="nav-item" style="padding-left:10px;">
+                    <div class="icon-sm">
+                        <a href="https://codeberg.org/darkrenaissance/darkfi" class="">
+                            <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg"
+                                 xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+                                 viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;"
+                                 xml:space="preserve">
+                                <style type="text/css">
+                                    .st0{fill:#3A3A3A;}
+                                </style>
+                                <g id="g370484" transform="matrix(0.06551432,0,0,0.06551432,-2.232417,-1.431776)">
+                                    <g>
+                                        <path id="path6733-5_00000147220371580420933290000015044290908562073483_" class="st0"
+                                              d="M797.5,506.6c-2.6,0-4.7,1.6-4.7,3.6c0,0.2,0,0.4,0.1,0.6l253.7,1037.5c104.2-35.5,
+                                                 265.5-150.8,346-256.8l-591-783.2C800.8,507.2,799.2,506.6,797.5,506.6z"/>
+                                        <path id="path360787_00000175324937253379690650000018049397027717501353_" class="st0"
+                                              d="M797.3,59C375.7,59,34.1,400.6,34.1,822.1c0,143.4,40.4,283.8,
+                                                116.5,405.3l636.3-822.6c4.6-5.9,16.1-5.9,20.6,0l636.3,822.6c76.2-121.5,
+                                                116.6-262,116.6-405.4C1560.5,400.6,1218.8,59,797.3,59L797.3,59z"/>
+                                    </g>
+                                </g>
+                            </svg>
+                        </a>
+                    </div>
+                </li>
+
+                <!--Darkirc-->
+                <li class="nav-item" style="padding-left:10px;">
+                    <div class="icon-sm">
+                        <a href="https://darkrenaissance.github.io/darkfi/misc/darkirc/darkirc.html" class="">
+                            <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg"
+                                 xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+                                 viewBox="0 0 100 100" style="enable-background:new 0 0 100 100; max-width:30px; min-width:15px;"
+                                 xml:space="preserve">
+                                <style type="text/css">
+                                    .st0{fill:#3a3a3a;}
+                                </style>
+                                <path class="st0" d="M0,0v100h100V0H0z M16.2,30c0-2,1.2-3.6,4.5-3.6c3.4,0,4.5,1.5,4.5,3.6v1.5c0,2-1.2,3.6-4.5,3.6
+                                                    c-3.4,0-4.5-1.6-4.5-3.6V30z M32.3,64.8H8.6v-5.9H17V44.3H8.6v-5.9h15.9v20.5h7.8V64.8z M63.1,45.4h-5.6c-3.7,0-5.7,2.5-5.7,5.7v7.8
+                                                    h8.7v5.9H38.2v-5.9h6.1V44.3h-6.1v-5.9h13.6v7.4h0.4c1-3.9,3.2-7.4,8.4-7.4h2.5V45.4z M81.4,65.4c-8.3,0-13.3-5.3-13.3-13.8
+                                                    c0-8.5,5-13.8,13.3-13.8c5.8,0,9.1,2.6,11,6.4l-5.8,3.2c-0.9-2-2.3-3.6-5.2-3.6C78,43.8,76,46,76,49.5v4.3c0,3.5,1.9,5.6,5.5,5.6
+                                                    c2.9,0,4.4-1.5,5.6-3.7l5.7,3.3C90.9,62.8,87.3,65.4,81.4,65.4z"/>
+                            </svg>
+                        </a>
+                    </div>
+                </li>
+                
+                <!--Telegram-->
+                <li class="nav-item" style="padding-left:10px; padding-right:10px;">
+                    <div class="icon-sm">
+                        <a href="https://t.me/darkfichat" class="">
+                            <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg"
+                                 xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+                                 viewBox="0 0 100 100" style="enable-background:new 0 0 100 100; max-width:30px; min-width:15px;"
+                                 xml:space="preserve">
+                                <style type="text/css">
+                                    .st0{fill:#3a3a3a;}
+                                </style>
+                                <path class="st0" d="M50,0C22.4,0,0,22.4,0,50s22.4,50,50,50s50-22.4,50-50S77.6,0,50,0z M73.8,32.5c-0.1,2-1.4,9.1-2.5,16.8
+                                                    L67.9,72c0,0-0.3,3.3-2.9,3.9c-2.6,0.6-6.5-2-7.2-2.6c-0.6-0.4-10.8-6.9-14.5-10.1c-1-0.9-2.2-2.6,0.1-4.6l15.2-14.5
+                                                    c1.7-1.7,3.5-5.8-3.8-0.9L34.7,56.9c0,0-2.3,1.4-6.6,0.1l-9.4-2.9c0,0-3.5-2.2,2.5-4.3c14.5-6.8,32.2-13.7,48-20.2
+                                                    C69.1,29.6,74.3,27.6,73.8,32.5z"/>
+                            </svg>
+                        </a>
+                    </div>
+                </li>
+            </ul>
+        </div>
+
+        <div class="navbarb">
+            <div class="navbar2">
+                <div class="container2 nav-container2">
+                        <input class="checkbox" type="checkbox" name="" id="" />
+                        <div class="hamburger-lines">
+                            <span class="line line1"></span>
+                            <span class="line line2"></span>
+                            <span class="line line3"></span>
+                        </div>
+                    <div class="menu-items">
+                        <li class="topnav"><a href="/">Explorer</a></li>
+                        <li><a href="https://twitter.com/DarkFiSquad">Twitter</a></li>
+                        <li><a href="https://codeberg.org/darkrenaissance/darkfi">Codeberg</a></li>
+                        <li><a href="https://darkrenaissance.github.io/darkfi/misc/darkirc/darkirc.html">Darkirc</a></li>
+                        <li><a href="https://t.me/darkfichat">Telegram</a></li>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    {% block content %}{% endblock %}
+
+    <footer></footer>
+
+</body>
+

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

@@ -0,0 +1,39 @@
+{% extends "base.html" %}
+{% block title %}Explorer{% endblock %}
+
+{% block content %}
+    <div class="container-fluid pl-5 pb-5 pr-5 title-block" style="margin-top:90px;">
+	    <h1 class="display-4 text-white border-l3" style="font-family:'Weissrundgotisch';line-height:.9em;">Explorer</h1>
+	</div>
+
+    <div class="row m-0 border-secondary border-top"/>
+    <div class="col-md-7 text-white mb-0 border-right border-bottom border-secondary lead-text">
+        <h2 class="display-8 text-white border-l3" style="font-family:'Weissrundgotisch';line-height:.9em;">Latest Blocks</h2>
+	    <table>
+            <tr style="text-align: center;">
+                <th>Height</th>
+                <th>Hash</th>
+                <th>timestamp</th>
+            </tr>
+            {% for block in blocks %}
+                <tr>
+                    <td>{{ block[3] }}</td>
+                    <td>{{ block[0] }}</td>
+                    <td>{{ block[4] }}</td>
+                </tr>
+            {% endfor %}
+        </table>
+    </div>
+    <div class="col-md-5 text-white m-0 border-secondary border-bottom lead-text">
+        <h2 class="display-8 text-white border-l3" style="font-family:'Weissrundgotisch';line-height:.9em;">Statistics</h2>
+        <ul>
+            <li>Height: {{ stats[0] }}</li>
+            <li>Epoch: {{ stats[1] }}</li>
+            <li>Last block: {{ stats[2] }}</li>
+            <li>Total blocks: {{ stats[3] }}</li>
+            <li>Total transactions: {{ stats[4] }}</li>
+        </ul>
+    </div>
+    
+{% endblock %}
+