cosmetic updates to wallet, qrcode, formatting, favicon

requirements.txt

@@ -7,3 +7,5 @@ Flask-WTF
 flask_sqlalchemy
 flask-bcrypt
 flask-login
+qrcode
+Pillow

wowstash/blueprints/wallet/routes.py

@@ -1,3 +1,6 @@
+from io import BytesIO
+from base64 import b64encode
+from qrcode import make as qrcode_make
 from flask import request, render_template, session, redirect, url_for, current_app
 from flask_login import login_required, current_user
 from wowstash.blueprints.wallet import wallet_bp
@@ -10,6 +13,7 @@ from wowstash.models import User
 @login_required
 def dashboard():
     all_transfers = list()
+    _address_qr = BytesIO()
     user = User.query.get(current_user.id)
     wallet_height = wallet.height()['height']
     daemon_height = daemon.height()['height']
@@ -19,11 +23,16 @@ def dashboard():
     for type in transfers:
         for tx in transfers[type]:
             all_transfers.append(tx)
+
+    qr_uri = f'wownero:{subaddress}?tx_description="{current_user.email}"'
+    address_qr = qrcode_make(qr_uri).save(_address_qr)
+    qrcode = b64encode(_address_qr.getvalue()).decode()
     return render_template(
         "wallet/dashboard.html",
         wallet_height=wallet_height,
         daemon_height=daemon_height,
         subaddress=subaddress,
         balances=balances,
-        all_transfers=all_transfers
+        all_transfers=all_transfers,
+        qrcode=qrcode
     )

wowstash/static/css/main.css

@@ -510,7 +510,25 @@ header.masthead .header-content-lg {
 }
 
 .slim {
-  width: 75%;
   line-break: anywhere;
   margin: auto;
 }
+
+.inline {
+  display: inline;
+}
+
+.container-slim {
+  width: 70%;
+  margin: 0 auto;
+}
+
+.dashboard-buttons {
+  width: 100%;
+  margin: 2em auto;
+  display: block;
+}
+
+.dashboard-button {
+  display: inline;
+}

wowstash/templates/head.html

@@ -3,6 +3,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <meta name="description" content="">
   <meta name="author" content="">
+  <link rel="shortcut icon" href="/static/favicon.ico" />
   <link rel="stylesheet" href="/static/vendor/bootstrap/css/bootstrap.min.css">
   <link rel="stylesheet" href="/static/vendor/font-awesome/css/font-awesome.min.css">
   <link rel="stylesheet" href="/static/css/main.css">

wowstash/templates/wallet/dashboard.html

@@ -7,27 +7,26 @@
 
     {% include 'navbar.html' %}
 
-    <section class="section2" id="">
-      <div class="container">
+    <section class="section2">
+      <div class="container-slim">
         <div class="section-heading text-center">
           <h2>Wallet Info</h2>
-        </div>
-        <div>
-          <p class="slim"><strong>Address:</strong> {{ subaddress }}</p>
-          <p>Balance: {{ balances.1 }} WOW (locked {{ balances.0 }} WOW)</p>
-          <p>Height ({{ wallet_height }} / {{ daemon_height }})</p>
-        </div>
-
-        <div class="row fp-row">
-          <div class="col-lg-4">
-            <a class="btn btn-lg btn-link btn-outline btn-xl js-scroll-trigger" href="#transfers">Transfers</a>
-          </div>
-          <div class="col-lg-4">
-            <a class="btn btn-lg btn-link btn-outline btn-xl" href="#">Send</a>
-          </div>
-          <div class="col-lg-4">
-            <a class="btn btn-lg btn-link btn-outline btn-xl" href="#">Receive</a>
-          </div>
+          <h4>Address:</h4>
+          <p class="slim small">{{ subaddress }}</p>
+          <br>
+          <img src="data:image/png;base64,{{ qrcode }}" width=200 class="center">
+          <hr><br>
+          <h4>Balance</h4>
+          <p class="inline">{{ balances.1 }} WOW </p>
+          <p class="inline small">({{ balances.0 }} locked)</p>
+          <span class="dashboard-buttons">
+            <div class="col-sm-6 dashboard-button">
+              <a class="btn btn-lg btn-link btn-outline btn-xl js-scroll-trigger" href="#transfers">List Tx</a>
+            </div>
+            <div class="col-sm-6 dashboard-button">
+              <a class="btn btn-lg btn-link btn-outline btn-xl" href="#">Send Tx</a>
+            </div>
+          </span>
         </div>
       </div>
     </section>
@@ -36,8 +35,6 @@
       <div class="container">
         <div class="section-heading text-center">
           <h2>Transfers</h2>
-          <p></p>
-
           <table class="table table-striped table-hover table-responsive table-responsive-sm tx-table">
             <tr>
               <th>Date</th>
@@ -45,6 +42,7 @@
               <th>Tx ID</th>
               <th>Amount</th>
               <th>Confirmations</th>
+              <th>Height</th>
               <th>Fee</th>
             </tr>
             {% for tx in all_transfers | sort(attribute='timestamp', reverse=True) %}
@@ -54,11 +52,11 @@
                 <td><a href="https://wownero.club/transaction/{{ tx.txid }}" target="_blank">{{ tx.txid | truncate(12) }}</a></td>
                 <td>{{ tx.amount / 100000000000 }}</td>
                 <td>{{ tx.confirmations }}</td>
+                <td>{{ tx.height }}</td>
                 <td>{{ tx.fee / 100000000000 }} WOW</td>
               </tr>
             {% endfor %}
           </table>
-
         </div>
       </div>
     </section>