Add SN pubkey QR code

observer.py

@@ -15,6 +15,8 @@ from pygments import highlight
 from pygments.lexers import JsonLexer
 from pygments.formatters import HtmlFormatter
 import subprocess
+import qrcode
+from io import BytesIO
 
 import config
 import local_config
@@ -442,6 +444,25 @@ def show_sn(pubkey):
             sn=sn,
             )
 
+
+@app.route('/qr/<hex64:pubkey>')
+def qr_sn_pubkey(pubkey):
+    qr = qrcode.QRCode(
+        box_size=5,
+        error_correction=qrcode.constants.ERROR_CORRECT_L,
+    )
+    qr.add_data(pubkey.upper())
+    img = qr.make_image(
+        fill_color="#1e1d48",
+        back_color="#dbf7f5"
+    )
+    with BytesIO() as output:
+        img.save(output, format="PNG")
+        r = flask.make_response(output.getvalue())
+    r.headers.set('Content-Type', 'image/png')
+    return r
+
+
 def parse_txs(txs_rpc):
     """Takes a tx_req(...).get() response and parses the embedded nested json into something useful
 

static/style.css

@@ -500,3 +500,14 @@ span.icon {
 tr.tx-input-key-image>td {
     padding-top: 1.5em;
 }
+
+.sn-details .sn-details-main {
+    display: flex;
+    flex-wrap: wrap;
+}
+.sn-details .sn-details-main .details {
+    flex-grow: 1;
+}
+.sn-details .sn-details-main img.qr {
+    flex-grow: 0;
+}

templates/sn.html

@@ -7,16 +7,21 @@
 {%-set decommed = sn.funded and not sn.active %}
 
 <div class="sn-details Wrapper">
-  <h2>Service Node Details</h2>
-  <div class="TitleUnderliner"></div>
-  <h4 style="margin:5px"><label>Service Node Public Key:</label> {{sn.service_node_pubkey}}</h4>
-  {%if sn.pubkey_ed25519 %}
-    {%if sn.pubkey_ed25519 != sn.service_node_pubkey%}
-      <h4 style="margin:5px"><label>Service Node Auxiliary Pubkey:</label> {{sn.pubkey_ed25519}}</h4>
-    {%endif%}
-    <h4 style="margin:5px"><label>Lokinet Address:</label> {{sn.pubkey_ed25519 | base32z}}.snode</h4>
-  {%endif%}
-  <h4 style="margin:5px"><label>Operator Address:</label> {{sn.operator_address}}</h4>
+  <div class="sn-details-main">
+    <div class="details">
+      <h2>Service Node Details</h2>
+      <div class="TitleUnderliner"></div>
+      <h4 style="margin:5px"><label>Service Node Public Key:</label> {{sn.service_node_pubkey}}</h4>
+      {%if sn.pubkey_ed25519 %}
+        {%if sn.pubkey_ed25519 != sn.service_node_pubkey%}
+          <h4 style="margin:5px"><label>Service Node Auxiliary Pubkey:</label> {{sn.pubkey_ed25519}}</h4>
+        {%endif%}
+        <h4 style="margin:5px"><label>Lokinet Address:</label> {{sn.pubkey_ed25519 | base32z}}.snode</h4>
+      {%endif%}
+      <h4 style="margin:5px"><label>Operator Address:</label> {{sn.operator_address}}</h4>
+    </div>
+    <img class="qr" src="/qr/{{sn.service_node_pubkey}}" title="{{sn.service_node_pubkey}}">
+  </div>
 
   <h2>Metadata</h2>
   <div class="TitleUnderliner"></div>