mypy on Makefile and apply prettier.

5 years ago · 79d5befe0c
12 changed files with 679 additions and 520 deletions
--- a/7
+++ b/7
@ -1,2 +1,5 @@
-prettier:
-	./node_modules/.bin/prettier --write lnbits/static/js/** lnbits/core/static/js/** lnbits/extensions/*/templates/**
+prettier: $(shell find lnbits -name "*.js" -name ".html")
+	./node_modules/.bin/prettier --write lnbits/static/js/*.js lnbits/core/static/js/*.js lnbits/extensions/*/templates/*/*.html ./lnbits/core/templates/core/*.html lnbits/templates/*.html lnbits/extensions/*/static/js/*.js
+
+mypy: $(shell find lnbits -name "*.py")
+	mypy lnbits
--- a/lnbits/core/templates/core/_api_docs.html
+++ b/lnbits/core/templates/core/_api_docs.html
@ -4,22 +4,43 @@
  label="API info"
  :content-inset-level="0.5"
 >
-  <q-expansion-item group="api" dense expand-separator label="Create an invoice (incoming)">
+  <q-expansion-item
+    group="api"
+    dense
+    expand-separator
+    label="Create an invoice (incoming)"
+  >
    <q-card>
      <q-card-section>
        <code><span class="text-light-green">POST</span> /api/v1/payments</code>
        <h5 class="text-caption q-mt-sm q-mb-none">Headers</h5>
        <code>{"X-Api-Key": "<i>{{ wallet.inkey }}</i>"}</code><br />
        <h5 class="text-caption q-mt-sm q-mb-none">Body (application/json)</h5>
-        <code>{"out": false, "amount": &lt;int&gt;, "memo": &lt;string&gt;}</code>
-        <h5 class="text-caption q-mt-sm q-mb-none">Returns 201 CREATED (application/json)</h5>
-        <code>{"checking_id": &lt;string&gt;, "payment_request": &lt;string&gt;}</code>
+        <code
+          >{"out": false, "amount": &lt;int&gt;, "memo": &lt;string&gt;}</code
+        >
+        <h5 class="text-caption q-mt-sm q-mb-none">
+          Returns 201 CREATED (application/json)
+        </h5>
+        <code
+          >{"checking_id": &lt;string&gt;, "payment_request":
+          &lt;string&gt;}</code
+        >
        <h5 class="text-caption q-mt-sm q-mb-none">Curl example</h5>
-        <code>curl -X POST {{ request.url_root }}api/v1/payments -d '{"out": false, "amount": &lt;int&gt;, "memo": &lt;string&gt;}' -H "X-Api-Key: <i>{{ wallet.inkey }}</i>" -H "Content-type: application/json"</code>
+        <code
+          >curl -X POST {{ request.url_root }}api/v1/payments -d '{"out": false,
+          "amount": &lt;int&gt;, "memo": &lt;string&gt;}' -H "X-Api-Key:
+          <i>{{ wallet.inkey }}</i>" -H "Content-type: application/json"</code
+        >
      </q-card-section>
    </q-card>
  </q-expansion-item>
-  <q-expansion-item group="api" dense expand-separator label="Pay an invoice (outgoing)">
+  <q-expansion-item
+    group="api"
+    dense
+    expand-separator
+    label="Pay an invoice (outgoing)"
+  >
    <q-card>
      <q-card-section>
        <code><span class="text-light-green">POST</span> /api/v1/payments</code>
@ -27,24 +48,45 @@
        <code>{"X-Api-Key": "{{ wallet.adminkey }}"}</code>
        <h5 class="text-caption q-mt-sm q-mb-none">Body (application/json)</h5>
        <code>{"out": true, "bolt11": &lt;string&gt;}</code>
-        <h5 class="text-caption q-mt-sm q-mb-none">Returns 201 CREATED (application/json)</h5>
+        <h5 class="text-caption q-mt-sm q-mb-none">
+          Returns 201 CREATED (application/json)
+        </h5>
        <code>{"checking_id": &lt;string&gt;}</code>
        <h5 class="text-caption q-mt-sm q-mb-none">Curl example</h5>
-        <code>curl -X POST {{ request.url_root }}api/v1/payments -d '{"out": true, "bolt11": &lt;string&gt;}' -H "X-Api-Key: {{ wallet.adminkey }}"</i> -H "Content-type: application/json"</code>
+        <code
+          >curl -X POST {{ request.url_root }}api/v1/payments -d '{"out": true,
+          "bolt11": &lt;string&gt;}' -H "X-Api-Key:
+          <i>{{ wallet.adminkey }}"</i> -H "Content-type:
+          application/json"</code
+        >
      </q-card-section>
    </q-card>
  </q-expansion-item>
-  <q-expansion-item group="api" dense expand-separator label="Check an invoice (incoming or outgoing)"
-    class="q-pb-md">
+  <q-expansion-item
+    group="api"
+    dense
+    expand-separator
+    label="Check an invoice (incoming or outgoing)"
+    class="q-pb-md"
+  >
    <q-card>
      <q-card-section>
-        <code><span class="text-light-blue">GET</span> /api/v1/payments/&lt;checking_id&gt;</code>
+        <code
+          ><span class="text-light-blue">GET</span>
+          /api/v1/payments/&lt;checking_id&gt;</code
+        >
        <h5 class="text-caption q-mt-sm q-mb-none">Headers</h5>
        <code>{"X-Api-Key": "{{ wallet.inkey }}"}</code>
-        <h5 class="text-caption q-mt-sm q-mb-none">Returns 200 OK (application/json)</h5>
+        <h5 class="text-caption q-mt-sm q-mb-none">
+          Returns 200 OK (application/json)
+        </h5>
        <code>{"paid": &lt;bool&gt;}</code>
        <h5 class="text-caption q-mt-sm q-mb-none">Curl example</h5>
-        <code>curl -X GET {{ request.url_root }}api/v1/payments/&lt;checking_id&gt; -H "X-Api-Key: {{ wallet.inkey }}"</i> -H "Content-type: application/json"</code>
+        <code
+          >curl -X GET {{ request.url_root }}api/v1/payments/&lt;checking_id&gt;
+          -H "X-Api-Key: <i>{{ wallet.inkey }}"</i> -H "Content-type:
+          application/json"</code
+        >
      </q-card-section>
    </q-card>
  </q-expansion-item>
--- a/lnbits/core/templates/core/extensions.html
+++ b/lnbits/core/templates/core/extensions.html
@ -1,42 +1,55 @@
-{% extends "base.html" %}
-
-{% from "macros.jinja" import window_vars with context %}
-
-
-{% block scripts %}
-  {{ window_vars(user) }}
-  {% assets filters='rjsmin', output='__bundle__/core/extensions.js',
-    'core/js/extensions.js' %}
-    <script type="text/javascript" src="{{ ASSET_URL }}"></script>
-  {% endassets %}
-{% endblock %}
-
-{% block page %}
-  <div class="row q-col-gutter-md">
-    <div class="col-6 col-md-4 col-lg-3" v-for="extension in g.extensions" :key="extension.code">
-      <q-card>
-        <q-card-section>
-          <q-icon :name="extension.icon" color="grey-5" style="font-size: 4rem;"></q-icon>
-          {% raw %}
-            <h5 class="q-mt-lg q-mb-xs">{{ extension.name }}</h5>
-            {{ extension.shortDescription }}
-          {% endraw %}
-        </q-card-section>
-        <q-separator></q-separator>
-        <q-card-actions>
-          <div v-if="extension.isEnabled">
-            <q-btn flat color="deep-purple"
-              type="a" :href="[extension.url, '?usr=', g.user.id].join('')">Open</q-btn>
-            <q-btn flat color="grey-5"
-              type="a"
-              :href="['{{ url_for('core.extensions') }}', '?usr=', g.user.id, '&disable=', extension.code].join('')"> Disable</q-btn>
-          </div>
-          <q-btn v-else flat color="deep-purple"
+{% extends "base.html" %} {% from "macros.jinja" import window_vars with context
+%} {% block scripts %} {{ window_vars(user) }} {% assets filters='rjsmin',
+output='__bundle__/core/extensions.js', 'core/js/extensions.js' %}
+<script type="text/javascript" src="{{ ASSET_URL }}"></script>
+{% endassets %} {% endblock %} {% block page %}
+<div class="row q-col-gutter-md">
+  <div
+    class="col-6 col-md-4 col-lg-3"
+    v-for="extension in g.extensions"
+    :key="extension.code"
+  >
+    <q-card>
+      <q-card-section>
+        <q-icon
+          :name="extension.icon"
+          color="grey-5"
+          style="font-size: 4rem;"
+        ></q-icon>
+        {% raw %}
+        <h5 class="q-mt-lg q-mb-xs">{{ extension.name }}</h5>
+        {{ extension.shortDescription }} {% endraw %}
+      </q-card-section>
+      <q-separator></q-separator>
+      <q-card-actions>
+        <div v-if="extension.isEnabled">
+          <q-btn
+            flat
+            color="deep-purple"
+            type="a"
+            :href="[extension.url, '?usr=', g.user.id].join('')"
+            >Open</q-btn
+          >
+          <q-btn
+            flat
+            color="grey-5"
            type="a"
-            :href="['{{ url_for('core.extensions') }}', '?usr=', g.user.id, '&enable=', extension.code].join('')">
-            Enable</q-btn>
-        </q-card-actions>
-      </q-card>
-    </div>
+            :href="['{{ url_for('core.extensions') }}', '?usr=', g.user.id, '&disable=', extension.code].join('')"
+          >
+            Disable</q-btn
+          >
+        </div>
+        <q-btn
+          v-else
+          flat
+          color="deep-purple"
+          type="a"
+          :href="['{{ url_for('core.extensions') }}', '?usr=', g.user.id, '&enable=', extension.code].join('')"
+        >
+          Enable</q-btn
+        >
+      </q-card-actions>
+    </q-card>
  </div>
+</div>
 {% endblock %}
--- a/lnbits/core/templates/core/index.html
+++ b/lnbits/core/templates/core/index.html
@ -1,72 +1,111 @@
-{% extends "public.html" %}
+{% extends "public.html" %} {% block scripts %} {% assets filters='rjsmin',
+output='__bundle__/core/index.js', 'core/js/index.js' %}
+<script type="text/javascript" src="{{ ASSET_URL }}"></script>
+{% endassets %} {% endblock %} {% block page %}
+<div class="row q-col-gutter-md justify-center">
+  <div class="col-12 col-md-7 col-lg-6 q-gutter-y-md">
+    <q-card>
+      <q-card-section>
+        {% if lnurl %}
+        <q-btn
+          unelevated
+          color="deep-purple"
+          @click="processing"
+          type="a"
+          href="{{ url_for('core.lnurlwallet', lightning=lnurl) }}"
+        >
+          Press to claim bitcoin
+        </q-btn>
+        {% else %}
+        <q-form @submit="createWallet" class="q-gutter-md">
+          <q-input
+            filled
+            dense
+            v-model="walletName"
+            label="Name your LNbits wallet *"
+          ></q-input>
+          <q-btn
+            unelevated
+            color="deep-purple"
+            :disable="walletName == ''"
+            type="submit"
+            >Add a new wallet</q-btn
+          >
+        </q-form>
+        {% endif %}
+      </q-card-section>
+    </q-card>

-
-{% block scripts %}
-  {% assets filters='rjsmin', output='__bundle__/core/index.js',
-    'core/js/index.js' %}
-    <script type="text/javascript" src="{{ ASSET_URL }}"></script>
-  {% endassets %}
-{% endblock %}
-
-{% block page %}
-  <div class="row q-col-gutter-md justify-center">
-    <div class="col-12 col-md-7 col-lg-6 q-gutter-y-md">
-
-      <q-card>
-        <q-card-section>
-            {% if lnurl %}
-              <q-btn unelevated
-                color="deep-purple"
-                @click="processing"
-                type="a" href="{{ url_for('core.lnurlwallet', lightning=lnurl) }}">
-                Press to claim bitcoin
-              </q-btn>
-            {% else %}
-              <q-form @submit="createWallet" class="q-gutter-md">
-                <q-input filled dense
-                  v-model="walletName"
-                  label="Name your LNbits wallet *"
-                ></q-input>
-                <q-btn unelevated
-                  color="deep-purple"
-                  :disable="walletName == ''"
-                  type="submit">Add a new wallet</q-btn>
-              </q-form>
-            {% endif %}
-        </q-card-section>
-      </q-card>
-
-      <q-card>
-        <q-card-section>
-          <h3 class="q-my-none"><strong>LN</strong>bits</h3>
-          <h5 class="q-my-md">Free and open-source lightning wallet</h5>
-          <p>Easy to set up and lightweight, LNbits can run on any lightning-network funding source, currently supporting LND, c-lightning, OpenNode, lntxbot, LNPay and even LNbits itself!</p>
-          <p>You can run LNbits for yourself, or easily offer a custodian solution for others.</p>
-          <p>Each wallet has its own API keys and there is no limit to the number of wallets you can make. Being able to partition funds makes LNbits a useful tool for money management and as a development tool.</p>
-          <p>Extensions add extra functionality to LNbits so you can experiment with a range of cutting-edge technologies on the lightning network. We have made developing extensions as easy as possible, and as a free and open-source project, we encourage people to develop and submit their own.</p>
-          <div class="row q-mt-md q-gutter-sm">
-            <q-btn outline
-              color="grey"
-              type="a" href="https://github.com/lnbits/lnbits" target="_blank" rel="noopener">View project in GitHub</q-btn>
-            <q-btn outline
-              color="grey"
-              type="a" href="https://lnbits.com/paywall/GAqKguK5S8f6w5VNjS9DfK" target="_blank" rel="noopener">Donate</q-btn>
-          </div>
-        </q-card-section>
-      </q-card>
-
-    </div>
-
-    <!-- Ads -->
-    <div class="col-12 col-md-3 col-lg-3">
-      <div class="row q-col-gutter-lg justify-center">
-        <div class="col-6 col-sm-4 col-md-8 q-gutter-y-sm">
-          <q-btn flat color="purple" label="Supporters" type="a" href="mailto:lnbits@pm.me" class="full-width"></q-btn>
-          <a href="https://github.com/rootzoll/raspiblitz">
-            <q-img contain :src="($q.dark.isActive) ? '{{ url_for('static', filename='images/raspiblitz-negative.svg') }}' : '{{ url_for('static', filename='images/raspiblitz.svg') }}'" style="height: 90px;"></q-img>
-          </a>
+    <q-card>
+      <q-card-section>
+        <h3 class="q-my-none"><strong>LN</strong>bits</h3>
+        <h5 class="q-my-md">Free and open-source lightning wallet</h5>
+        <p>
+          Easy to set up and lightweight, LNbits can run on any
+          lightning-network funding source, currently supporting LND,
+          c-lightning, OpenNode, lntxbot, LNPay and even LNbits itself!
+        </p>
+        <p>
+          You can run LNbits for yourself, or easily offer a custodian solution
+          for others.
+        </p>
+        <p>
+          Each wallet has its own API keys and there is no limit to the number
+          of wallets you can make. Being able to partition funds makes LNbits a
+          useful tool for money management and as a development tool.
+        </p>
+        <p>
+          Extensions add extra functionality to LNbits so you can experiment
+          with a range of cutting-edge technologies on the lightning network. We
+          have made developing extensions as easy as possible, and as a free and
+          open-source project, we encourage people to develop and submit their
+          own.
+        </p>
+        <div class="row q-mt-md q-gutter-sm">
+          <q-btn
+            outline
+            color="grey"
+            type="a"
+            href="https://github.com/lnbits/lnbits"
+            target="_blank"
+            rel="noopener"
+            >View project in GitHub</q-btn
+          >
+          <q-btn
+            outline
+            color="grey"
+            type="a"
+            href="https://lnbits.com/paywall/GAqKguK5S8f6w5VNjS9DfK"
+            target="_blank"
+            rel="noopener"
+            >Donate</q-btn
+          >
        </div>
+      </q-card-section>
+    </q-card>
+  </div>
+
+  <!-- Ads -->
+  <div class="col-12 col-md-3 col-lg-3">
+    <div class="row q-col-gutter-lg justify-center">
+      <div class="col-6 col-sm-4 col-md-8 q-gutter-y-sm">
+        <q-btn
+          flat
+          color="purple"
+          label="Supporters"
+          type="a"
+          href="mailto:lnbits@pm.me"
+          class="full-width"
+        ></q-btn>
+        <a href="https://github.com/rootzoll/raspiblitz">
+          <q-img
+            contain
+            :src="($q.dark.isActive) ? '{{ url_for('static', filename='images/raspiblitz-negative.svg') }}' : '{{ url_for('static', filename='images/raspiblitz.svg') }}'"
+            style="height: 90px;"
+          ></q-img>
+        </a>
      </div>
    </div>
  </div>
+</div>
 {% endblock %}
--- a/lnbits/core/templates/core/wallet.html
+++ b/lnbits/core/templates/core/wallet.html
@ -1,259 +1,345 @@
-{% extends "base.html" %}
-
-{% from "macros.jinja" import window_vars with context %}
-
-
-{% block styles %}
-  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='vendor/vue-qrcode-reader@2.2.0/vue-qrcode-reader.min.css') }}">
-{% endblock %}
-
-{% block scripts %}
-  {{ window_vars(user, wallet) }}
-  <script src="{{ url_for('static', filename='vendor/vue-qrcode@1.0.2/vue-qrcode.min.js') }}"></script>
-  {% assets filters='rjsmin', output='__bundle__/core/chart.js',
-    'vendor/moment@2.25.1/moment.min.js',
-    'vendor/chart.js@2.9.3/chart.min.js' %}
-    <script type="text/javascript" src="{{ ASSET_URL }}"></script>
-  {% endassets %}
-  {% assets filters='rjsmin', output='__bundle__/core/wallet.js',
-    'vendor/bolt11/utils.js',
-    'vendor/bolt11/decoder.js',
-    'vendor/vue-qrcode-reader@2.2.0/vue-qrcode-reader.min.js',
-    'core/js/wallet.js' %}
-    <script type="text/javascript" src="{{ ASSET_URL }}"></script>
-  {% endassets %}
-{% endblock %}
+{% extends "base.html" %} {% from "macros.jinja" import window_vars with context
+%} {% block styles %}
+<link
+  rel="stylesheet"
+  type="text/css"
+  href="{{ url_for('static', filename='vendor/vue-qrcode-reader@2.2.0/vue-qrcode-reader.min.css') }}"
+/>
+{% endblock %} {% block scripts %} {{ window_vars(user, wallet) }}
+<script src="{{ url_for('static', filename='vendor/vue-qrcode@1.0.2/vue-qrcode.min.js') }}"></script>
+{% assets filters='rjsmin', output='__bundle__/core/chart.js',
+'vendor/moment@2.25.1/moment.min.js', 'vendor/chart.js@2.9.3/chart.min.js' %}
+<script type="text/javascript" src="{{ ASSET_URL }}"></script>
+{% endassets %} {% assets filters='rjsmin', output='__bundle__/core/wallet.js',
+'vendor/bolt11/utils.js', 'vendor/bolt11/decoder.js',
+'vendor/vue-qrcode-reader@2.2.0/vue-qrcode-reader.min.js', 'core/js/wallet.js'
+%}
+<script type="text/javascript" src="{{ ASSET_URL }}"></script>
+{% endassets %} {% endblock %} {% block page %}
+<div class="row q-col-gutter-md">
+  <div class="col-12 col-md-7 q-gutter-y-md">
+    <q-card>
+      <q-card-section>
+        <h3 class="q-my-none">
+          <strong>{% raw %}{{ fbalance }}{% endraw %}</strong> sat
+        </h3>
+      </q-card-section>
+      <div class="row q-pb-md q-px-md q-col-gutter-md">
+        <div class="col">
+          <q-btn
+            unelevated
+            color="purple"
+            class="full-width"
+            @click="showSendDialog"
+            >Send</q-btn
+          >
+        </div>
+        <div class="col">
+          <q-btn
+            unelevated
+            color="deep-purple"
+            class="full-width"
+            @click="showReceiveDialog"
+            >Receive</q-btn
+          >
+        </div>
+      </div>
+    </q-card>

-{% block page %}
-  <div class="row q-col-gutter-md">
-    <div class="col-12 col-md-7 q-gutter-y-md">
-      <q-card>
-        <q-card-section>
-          <h3 class="q-my-none"><strong>{% raw %}{{ fbalance }}{% endraw %}</strong> sat</h3>
-        </q-card-section>
-        <div class="row q-pb-md q-px-md q-col-gutter-md">
-          <div class="col">
-            <q-btn unelevated
-              color="purple"
-              class="full-width"
-              @click="showSendDialog">Send</q-btn>
-          </div>
+    <q-card>
+      <q-card-section>
+        <div class="row items-center no-wrap q-mb-sm">
          <div class="col">
-            <q-btn unelevated
-              color="deep-purple"
-              class="full-width"
-              @click="showReceiveDialog">Receive</q-btn>
+            <h5 class="text-subtitle1 q-my-none">Transactions</h5>
          </div>
-        </div>
-      </q-card>
-
-      <q-card>
-        <q-card-section>
-          <div class="row items-center no-wrap q-mb-sm">
-            <div class="col">
-              <h5 class="text-subtitle1 q-my-none">Transactions</h5>
-            </div>
-            <div class="col-auto">
-              <q-btn flat color="grey" @click="exportCSV">Export to CSV</q-btn>
-              <!--<q-btn v-if="pendingPaymentsExist" dense flat round icon="update" color="grey" @click="checkPendingPayments">
+          <div class="col-auto">
+            <q-btn flat color="grey" @click="exportCSV">Export to CSV</q-btn>
+            <!--<q-btn v-if="pendingPaymentsExist" dense flat round icon="update" color="grey" @click="checkPendingPayments">
                <q-tooltip>Check pending</q-tooltip>
              </q-btn>-->
-              <q-btn dense flat round icon="show_chart" color="grey" @click="showChart">
-                <q-tooltip>Show chart</q-tooltip>
-              </q-btn>
-            </div>
+            <q-btn
+              dense
+              flat
+              round
+              icon="show_chart"
+              color="grey"
+              @click="showChart"
+            >
+              <q-tooltip>Show chart</q-tooltip>
+            </q-btn>
          </div>
-          <q-input v-if="payments.length > 10" filled dense clearable
-            v-model="paymentsTable.filter"
-            debounce="300" placeholder="Search by memo, amount" class="q-mb-md">
-          </q-input>
-          <q-table dense flat
-            :data="filteredPayments"
-            row-key="payhash"
-            :columns="paymentsTable.columns"
-            :pagination.sync="paymentsTable.pagination">
-            {% raw %}
-            <template v-slot:header="props">
-              <q-tr :props="props">
-                <q-th auto-width></q-th>
-                <q-th
-                  v-for="col in props.cols"
-                  :key="col.name"
-                  :props="props">{{ col.label }}</q-th>
-              </q-tr>
-            </template>
-            <template v-slot:body="props">
-              <q-tr :props="props">
-                <q-td auto-width class="lnbits__q-table__icon-td">
-                  <q-icon v-if="props.row.isPaid" size="14px"
-                    :name="(props.row.sat < 0) ? 'call_made' : 'call_received'"
-                    :color="(props.row.sat < 0) ? 'pink' : 'green'"></q-icon>
-                  <q-icon v-else name="settings_ethernet" color="grey">
-                    <q-tooltip>Pending</q-tooltip>
-                  </q-icon>
-                </q-td>
-                <q-td key="memo" :props="props">
-                  {{ props.row.memo }}
-                </q-td>
-                <q-td auto-width key="date" :props="props">
-                  {{ props.row.date }}
-                </q-td>
-                <q-td auto-width key="sat" :props="props">
-                  {{ props.row.fsat }}
-                </q-td>
-              </q-tr>
-            </template>
-            {% endraw %}
-          </q-table>
-        </q-card-section>
-      </q-card>
-    </div>
+        </div>
+        <q-input
+          v-if="payments.length > 10"
+          filled
+          dense
+          clearable
+          v-model="paymentsTable.filter"
+          debounce="300"
+          placeholder="Search by memo, amount"
+          class="q-mb-md"
+        >
+        </q-input>
+        <q-table
+          dense
+          flat
+          :data="filteredPayments"
+          row-key="payhash"
+          :columns="paymentsTable.columns"
+          :pagination.sync="paymentsTable.pagination"
+        >
+          {% raw %}
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th auto-width></q-th>
+              <q-th v-for="col in props.cols" :key="col.name" :props="props"
+                >{{ col.label }}</q-th
+              >
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props">
+              <q-td auto-width class="lnbits__q-table__icon-td">
+                <q-icon
+                  v-if="props.row.isPaid"
+                  size="14px"
+                  :name="(props.row.sat < 0) ? 'call_made' : 'call_received'"
+                  :color="(props.row.sat < 0) ? 'pink' : 'green'"
+                ></q-icon>
+                <q-icon v-else name="settings_ethernet" color="grey">
+                  <q-tooltip>Pending</q-tooltip>
+                </q-icon>
+              </q-td>
+              <q-td key="memo" :props="props">
+                {{ props.row.memo }}
+              </q-td>
+              <q-td auto-width key="date" :props="props">
+                {{ props.row.date }}
+              </q-td>
+              <q-td auto-width key="sat" :props="props">
+                {{ props.row.fsat }}
+              </q-td>
+            </q-tr>
+          </template>
+          {% endraw %}
+        </q-table>
+      </q-card-section>
+    </q-card>
+  </div>

-    <div class="col-12 col-md-5 q-gutter-y-md">
-      <q-card>
-        <q-card-section>
-          <q-btn flat color="grey" @click="exportCSV" class="float-right">Renew keys</q-btn>
-          <h6 class="text-subtitle1 q-mt-none q-mb-sm">LNbits wallet</h6>
-          <strong>Wallet name: </strong><em>{{ wallet.name }}</em><br>
-          <strong>Wallet ID: </strong><em>{{ wallet.id }}</em><br>
-          <strong>Admin key: </strong><em>{{ wallet.adminkey }}</em><br>
-          <strong>Invoice/read key: </strong><em>{{ wallet.inkey }}</em>
-        </q-card-section>
-        <q-card-section class="q-pa-none">
+  <div class="col-12 col-md-5 q-gutter-y-md">
+    <q-card>
+      <q-card-section>
+        <q-btn flat color="grey" @click="exportCSV" class="float-right"
+          >Renew keys</q-btn
+        >
+        <h6 class="text-subtitle1 q-mt-none q-mb-sm">LNbits wallet</h6>
+        <strong>Wallet name: </strong><em>{{ wallet.name }}</em><br />
+        <strong>Wallet ID: </strong><em>{{ wallet.id }}</em><br />
+        <strong>Admin key: </strong><em>{{ wallet.adminkey }}</em><br />
+        <strong>Invoice/read key: </strong><em>{{ wallet.inkey }}</em>
+      </q-card-section>
+      <q-card-section class="q-pa-none">
+        <q-separator></q-separator>
+        <q-list>
+          {% include "core/_api_docs.html" %}
          <q-separator></q-separator>
-          <q-list>
-            {% include "core/_api_docs.html" %}
-            <q-separator></q-separator>
-            <q-expansion-item
-              group="extras"
-              icon="remove_circle"
-              label="Delete wallet">
-              <q-card>
-                <q-card-section>
-                  <p>This whole wallet will be deleted, the funds will be <strong>UNRECOVERABLE</strong>.</p>
-                  <q-btn unelevated
-                    color="red-10"
-                    @click="deleteWallet('{{ wallet.id }}', '{{ user.id }}')">Delete wallet</q-btn>
-                </q-card-section>
-              </q-card>
-            </q-expansion-item>
-          </q-list>
-        </q-card-section>
-      </q-card>
-    </div>
+          <q-expansion-item
+            group="extras"
+            icon="remove_circle"
+            label="Delete wallet"
+          >
+            <q-card>
+              <q-card-section>
+                <p>
+                  This whole wallet will be deleted, the funds will be
+                  <strong>UNRECOVERABLE</strong>.
+                </p>
+                <q-btn
+                  unelevated
+                  color="red-10"
+                  @click="deleteWallet('{{ wallet.id }}', '{{ user.id }}')"
+                  >Delete wallet</q-btn
+                >
+              </q-card-section>
+            </q-card>
+          </q-expansion-item>
+        </q-list>
+      </q-card-section>
+    </q-card>
  </div>
+</div>

-  <q-dialog v-model="receive.show" position="top" @hide="closeReceiveDialog">
-    <q-card v-if="!receive.paymentReq" class="q-pa-lg q-pt-xl lnbits__dialog-card">
-      <q-form @submit="createInvoice" class="q-gutter-md">
-        <q-input filled dense
-          v-model.number="receive.data.amount"
-          type="number"
-          label="Amount (sat) *"></q-input>
-        <q-input filled dense
-          v-model.trim="receive.data.memo"
-          label="Memo"
-          placeholder="LNbits invoice"></q-input>
-        <div v-if="receive.status == 'pending'" class="row q-mt-lg">
-          <q-btn unelevated
-            color="deep-purple"
-            :disable="receive.data.amount == null || receive.data.amount <= 0"
-            type="submit">Create invoice</q-btn>
-          <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
-        </div>
-        <q-spinner v-if="receive.status == 'loading'" color="deep-purple" size="2.55em"></q-spinner>
-      </q-form>
-    </q-card>
-    <q-card v-else class="q-pa-lg q-pt-xl lnbits__dialog-card">
-      <div class="text-center q-mb-lg">
-        <a :href="'lightning:' + receive.paymentReq">
-          <q-responsive :ratio="1" class="q-mx-xl">
-            <qrcode :value="receive.paymentReq" :options="{width: 340}" class="rounded-borders"></qrcode>
-          </q-responsive>
-        </a>
-      </div>
-      <div class="row q-mt-lg">
-        <q-btn outline color="grey" @click="copyText(receive.paymentReq)">Copy invoice</q-btn>
-        <q-btn v-close-popup flat color="grey" class="q-ml-auto">Close</q-btn>
+<q-dialog v-model="receive.show" position="top" @hide="closeReceiveDialog">
+  <q-card
+    v-if="!receive.paymentReq"
+    class="q-pa-lg q-pt-xl lnbits__dialog-card"
+  >
+    <q-form @submit="createInvoice" class="q-gutter-md">
+      <q-input
+        filled
+        dense
+        v-model.number="receive.data.amount"
+        type="number"
+        label="Amount (sat) *"
+      ></q-input>
+      <q-input
+        filled
+        dense
+        v-model.trim="receive.data.memo"
+        label="Memo"
+        placeholder="LNbits invoice"
+      ></q-input>
+      <div v-if="receive.status == 'pending'" class="row q-mt-lg">
+        <q-btn
+          unelevated
+          color="deep-purple"
+          :disable="receive.data.amount == null || receive.data.amount <= 0"
+          type="submit"
+          >Create invoice</q-btn
+        >
+        <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
      </div>
-    </q-card>
-  </q-dialog>
+      <q-spinner
+        v-if="receive.status == 'loading'"
+        color="deep-purple"
+        size="2.55em"
+      ></q-spinner>
+    </q-form>
+  </q-card>
+  <q-card v-else class="q-pa-lg q-pt-xl lnbits__dialog-card">
+    <div class="text-center q-mb-lg">
+      <a :href="'lightning:' + receive.paymentReq">
+        <q-responsive :ratio="1" class="q-mx-xl">
+          <qrcode
+            :value="receive.paymentReq"
+            :options="{width: 340}"
+            class="rounded-borders"
+          ></qrcode>
+        </q-responsive>
+      </a>
+    </div>
+    <div class="row q-mt-lg">
+      <q-btn outline color="grey" @click="copyText(receive.paymentReq)"
+        >Copy invoice</q-btn
+      >
+      <q-btn v-close-popup flat color="grey" class="q-ml-auto">Close</q-btn>
+    </div>
+  </q-card>
+</q-dialog>

-  <q-dialog v-model="send.show" position="top" @hide="closeSendDialog">
-    <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
-      <div v-if="!send.invoice">
-        <q-form v-if="!sendCamera.show" @submit="decodeInvoice" class="q-gutter-md">
-          <q-input filled dense
-            v-model.trim="send.data.bolt11"
-            type="textarea"
-            label="Paste an invoice *">
-            <template v-slot:after>
-              <q-btn round dense flat icon="photo_camera" @click="showCamera">
-                <q-tooltip>Use camera to scan an invoice</q-tooltip>
-              </q-btn>
-            </template>
-          </q-input>
-          <div class="row q-mt-lg">
-            <q-btn unelevated
-              color="deep-purple"
-              :disable="send.data.bolt11 == ''"
-              type="submit">Read invoice</q-btn>
-            <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
-          </div>
-        </q-form>
-        <div v-else>
-          <q-responsive :ratio="1">
-            <qrcode-stream @decode="decodeQR" class="rounded-borders"></qrcode-stream>
-          </q-responsive>
-          <div class="row q-mt-lg">
-            <q-btn @click="closeCamera" flat color="grey" class="q-ml-auto">Cancel</q-btn>
-          </div>
-        </div>
-      </div>
-      <div v-else>
-        {% raw %}
-          <h6 class="q-my-none">{{ send.invoice.fsat }} sat</h6>
-          <q-separator class="q-my-sm"></q-separator>
-          <p style="word-break: break-all">
-            <strong>Memo:</strong> {{ send.invoice.description }}<br>
-            <strong>Expire date:</strong> {{ send.invoice.expireDate }}<br>
-            <strong>Hash:</strong> {{ send.invoice.hash }}
-          </p>
-        {% endraw %}
-        <div v-if="canPay" class="row q-mt-lg">
-          <q-btn unelevated
+<q-dialog v-model="send.show" position="top" @hide="closeSendDialog">
+  <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
+    <div v-if="!send.invoice">
+      <q-form
+        v-if="!sendCamera.show"
+        @submit="decodeInvoice"
+        class="q-gutter-md"
+      >
+        <q-input
+          filled
+          dense
+          v-model.trim="send.data.bolt11"
+          type="textarea"
+          label="Paste an invoice *"
+        >
+          <template v-slot:after>
+            <q-btn round dense flat icon="photo_camera" @click="showCamera">
+              <q-tooltip>Use camera to scan an invoice</q-tooltip>
+            </q-btn>
+          </template>
+        </q-input>
+        <div class="row q-mt-lg">
+          <q-btn
+            unelevated
            color="deep-purple"
-            @click="payInvoice">Send satoshis</q-btn>
-          <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
+            :disable="send.data.bolt11 == ''"
+            type="submit"
+            >Read invoice</q-btn
+          >
+          <q-btn v-close-popup flat color="grey" class="q-ml-auto"
+            >Cancel</q-btn
+          >
        </div>
-        <div v-else class="row q-mt-lg">
-          <q-btn unelevated disabled color="yellow" text-color="black">Not enough funds!</q-btn>
-          <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
+      </q-form>
+      <div v-else>
+        <q-responsive :ratio="1">
+          <qrcode-stream
+            @decode="decodeQR"
+            class="rounded-borders"
+          ></qrcode-stream>
+        </q-responsive>
+        <div class="row q-mt-lg">
+          <q-btn @click="closeCamera" flat color="grey" class="q-ml-auto"
+            >Cancel</q-btn
+          >
        </div>
      </div>
-    </q-card>
-  </q-dialog>
+    </div>
+    <div v-else>
+      {% raw %}
+      <h6 class="q-my-none">{{ send.invoice.fsat }} sat</h6>
+      <q-separator class="q-my-sm"></q-separator>
+      <p style="word-break: break-all;">
+        <strong>Memo:</strong> {{ send.invoice.description }}<br />
+        <strong>Expire date:</strong> {{ send.invoice.expireDate }}<br />
+        <strong>Hash:</strong> {{ send.invoice.hash }}
+      </p>
+      {% endraw %}
+      <div v-if="canPay" class="row q-mt-lg">
+        <q-btn unelevated color="deep-purple" @click="payInvoice"
+          >Send satoshis</q-btn
+        >
+        <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
+      </div>
+      <div v-else class="row q-mt-lg">
+        <q-btn unelevated disabled color="yellow" text-color="black"
+          >Not enough funds!</q-btn
+        >
+        <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
+      </div>
+    </div>
+  </q-card>
+</q-dialog>

-  <q-dialog v-model="paymentsChart.show" position="top">
-    <q-card class="q-pa-sm" style="width: 800px; max-width: unset">
-      <q-card-section>
-        <canvas ref="canvas" width="600" height="400"></canvas>
-      </q-card-section>
-    </q-card>
-  </q-dialog>
+<q-dialog v-model="paymentsChart.show" position="top">
+  <q-card class="q-pa-sm" style="width: 800px; max-width: unset;">
+    <q-card-section>
+      <canvas ref="canvas" width="600" height="400"></canvas>
+    </q-card-section>
+  </q-card>
+</q-dialog>

-  {% if service_fee > 0 %}
-    <div ref="disclaimer"></div>
-    <q-dialog v-model="disclaimerDialog.show">
-      <q-card class="q-pa-lg">
-        <h6 class="q-my-md text-deep-purple">Warning</h6>
-        <p>Login functionality to be released in v0.2, for now, <strong>make sure you bookmark this page for future access to your wallet</strong>!</p>
-        <p>This service is in BETA, and we hold no responsibility for people losing access to funds. To encourage you to run your own LNbits installation, any balance on {% raw %}{{ disclaimerDialog.location.host }}{% endraw %} will incur a charge of <strong>{{ service_fee }}% service fee</strong> per week.</p>
-        <div class="row q-mt-lg">
-          <q-btn outline color="grey" @click="copyText(disclaimerDialog.location.href)">Copy wallet URL</q-btn>
-          <q-btn v-close-popup flat color="grey" class="q-ml-auto">I understand</q-btn>
-        </div>
-      </q-card>
-    </q-dialog>
-  {% endif %}
-{% endblock %}
+{% if service_fee > 0 %}
+<div ref="disclaimer"></div>
+<q-dialog v-model="disclaimerDialog.show">
+  <q-card class="q-pa-lg">
+    <h6 class="q-my-md text-deep-purple">Warning</h6>
+    <p>
+      Login functionality to be released in v0.2, for now,
+      <strong
+        >make sure you bookmark this page for future access to your
+        wallet</strong
+      >!
+    </p>
+    <p>
+      This service is in BETA, and we hold no responsibility for people losing
+      access to funds. To encourage you to run your own LNbits installation, any
+      balance on {% raw %}{{ disclaimerDialog.location.host }}{% endraw %} will
+      incur a charge of <strong>{{ service_fee }}% service fee</strong> per
+      week.
+    </p>
+    <div class="row q-mt-lg">
+      <q-btn
+        outline
+        color="grey"
+        @click="copyText(disclaimerDialog.location.href)"
+        >Copy wallet URL</q-btn
+      >
+      <q-btn v-close-popup flat color="grey" class="q-ml-auto"
+        >I understand</q-btn
+      >
+    </div>
+  </q-card>
+</q-dialog>
+{% endif %} {% endblock %}
--- a/lnbits/extensions/events/templates/events/register.html
+++ b/lnbits/extensions/events/templates/events/register.html
@ -157,7 +157,7 @@
              message: 'Registered!'
            })
            setTimeout(function () {
-               window.location.reload()
+              window.location.reload()
            }, 2000)
          })
          .catch(function (error) {
--- a/lnbits/extensions/withdraw/static/js/index.js
+++ b/lnbits/extensions/withdraw/static/js/index.js
@ -59,15 +59,6 @@ new Vue({
          is_unique: false
        }
      },
-      simpleformDialog: {
-        show: false,
-        data: {
-          is_unique: false,
-          title: 'Vouchers',
-          min_withdrawable: 0,
-          wait_time: 1
-        }
-      },
      qrCodeDialog: {
        show: false,
        data: null
@ -106,17 +97,9 @@ new Vue({
        is_unique: false
      }
    },
-    simplecloseFormDialog: function () {
-      this.simpleformDialog.data = {
-        is_unique: false
-      }
-    },
    openQrCodeDialog: function (linkId) {
      var link = _.findWhere(this.withdrawLinks, {id: linkId})
-      
      this.qrCodeDialog.data = _.clone(link)
-      console.log(this.qrCodeDialog.data)
-      this.qrCodeDialog.data.url = window.location.hostname
      this.qrCodeDialog.show = true
    },
    openUpdateDialog: function (linkId) {
@ -144,23 +127,6 @@ new Vue({
        this.createWithdrawLink(wallet, data)
      }
    },
-    simplesendFormData: function () {
-      var wallet = _.findWhere(this.g.user.wallets, {
-        id: this.simpleformDialog.data.wallet
-      })
-      var data = _.omit(this.simpleformDialog.data, 'wallet')
-
-      data.wait_time = 1
-      data.min_withdrawable = data.max_withdrawable
-      data.title = 'vouchers'
-      data.is_unique = true
-
-      if (data.id) {
-        this.updateWithdrawLink(wallet, data)
-      } else {
-        this.createWithdrawLink(wallet, data)
-      }
-    },
    updateWithdrawLink: function (wallet, data) {
      var self = this

@ -198,7 +164,6 @@ new Vue({
        .then(function (response) {
          self.withdrawLinks.push(mapWithdrawLink(response.data))
          self.formDialog.show = false
-          self.simpleformDialog.show = false
        })
        .catch(function (error) {
          LNbits.utils.notifyApiError(error)
--- a/lnbits/extensions/withdraw/templates/withdraw/display.html
+++ b/lnbits/extensions/withdraw/templates/withdraw/display.html
@ -18,7 +18,6 @@
          </a>
        </div>
        <div class="row q-mt-lg">
-
          <q-btn outline color="grey" @click="copyText('{{ link.lnurl }}')"
            >Copy LNURL</q-btn
          >
@ -57,11 +56,8 @@
    data: function () {
      return {
        theurl: location.protocol + '//' + location.host
-
      }
-    },
-
-
+    }
  })
 </script>
 {% endblock %}
--- a/lnbits/static/js/components.js
+++ b/lnbits/static/js/components.js
@ -1,3 +1,5 @@
+/* global Vue, LNbits, EventHub */
+
 Vue.component('lnbits-fsat', {
  props: {
    amount: {
@ -28,11 +30,11 @@ Vue.component('lnbits-wallet-list', {
      <q-item-label header>Wallets</q-item-label>
      <q-item v-for="wallet in wallets" :key="wallet.id"
        clickable
-        :active="activeWallet && activeWallet.id == wallet.id"
+        :active="activeWallet && activeWallet.id === wallet.id"
        tag="a" :href="wallet.url">
        <q-item-section side>
          <q-avatar size="md"
-            :color="(activeWallet && activeWallet.id == wallet.id)
+            :color="(activeWallet && activeWallet.id === wallet.id)
              ? (($q.dark.isActive) ? 'deep-purple-5' : 'deep-purple')
              : 'grey-5'">
            <q-icon name="flash_on" :size="($q.dark.isActive) ? '21px' : '20px'"
@ -43,7 +45,7 @@ Vue.component('lnbits-wallet-list', {
          <q-item-label lines="1">{{ wallet.name }}</q-item-label>
          <q-item-label caption>{{ wallet.live_fsat }} sat</q-item-label>
        </q-item-section>
-        <q-item-section side v-show="activeWallet && activeWallet.id == wallet.id">
+        <q-item-section side v-show="activeWallet && activeWallet.id === wallet.id">
          <q-icon name="chevron_right" color="grey-5" size="md"></q-icon>
        </q-item-section>
      </q-item>
@ -60,7 +62,7 @@ Vue.component('lnbits-wallet-list', {
          <q-form @submit="createWallet">
            <q-input filled dense v-model="walletName" label="Name wallet *">
              <template v-slot:append>
-                <q-btn round dense flat icon="send" size="sm" @click="createWallet" :disable="walletName == ''"></q-btn>
+                <q-btn round dense flat icon="send" size="sm" @click="createWallet" :disable="walletName === ''"></q-btn>
              </template>
            </q-input>
          </q-form>
@ -73,7 +75,7 @@ Vue.component('lnbits-wallet-list', {
      var bal = this.activeBalance
      return this.user.wallets.map(function (obj) {
        obj.live_fsat =
-          bal.length && bal[0] == obj.id
+          bal.length && bal[0] === obj.id
            ? LNbits.utils.formatSat(bal[1])
            : obj.fsat
        return obj
--- a/lnbits/templates/base.html
+++ b/lnbits/templates/base.html
@ -1,107 +1,128 @@
-<!doctype html>
+<!DOCTYPE html>

 <html lang="en">
  <head>
-    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='vendor/quasar@1.10.4/quasar.min.css') }}">
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="{{ url_for('static', filename='vendor/quasar@1.10.4/quasar.min.css') }}"
+    />
    {% assets 'base_css' %}
-      <link rel="stylesheet" type="text/css" href="{{ ASSET_URL }}">
-    {% endassets %}
-    {% block styles %}{% endblock %}
+    <link rel="stylesheet" type="text/css" href="{{ ASSET_URL }}" />
+    {% endassets %} {% block styles %}{% endblock %}
    <title>
-      {% block title %}
-        {% if SITE_TITLE != 'LNbits' %}{{ SITE_TITLE }}{% else %}LNbits{% endif %}
-      {% endblock %}
+      {% block title %} {% if SITE_TITLE != 'LNbits' %}{{ SITE_TITLE }}{% else
+      %}LNbits{% endif %} {% endblock %}
    </title>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
    {% block head_scripts %}{% endblock %}
  </head>

  <body>
    <q-layout id="vue" view="hHh lpR lfr" v-cloak>
-
      <q-header bordered class="bg-lnbits-dark">
        <q-toolbar>
          {% block drawer_toggle %}
-            <q-btn dense flat round icon="menu" @click="g.visibleDrawer = !g.visibleDrawer"></q-btn>
+          <q-btn
+            dense
+            flat
+            round
+            icon="menu"
+            @click="g.visibleDrawer = !g.visibleDrawer"
+          ></q-btn>
          {% endblock %}
          <q-toolbar-title>
-            {% block toolbar_title %}
-              {% if SITE_TITLE != 'LNbits' %}
-                {{ SITE_TITLE }}
-              {% else %}
-                <strong>LN</strong>bits
-              {% endif %}
-            {% endblock %}
+            {% block toolbar_title %} {% if SITE_TITLE != 'LNbits' %} {{
+            SITE_TITLE }} {% else %}
+            <strong>LN</strong>bits {% endif %} {% endblock %}
          </q-toolbar-title>
          {% block beta %}
-            <q-badge color="yellow" text-color="black">
-              <span><span v-show="$q.screen.gt.sm">USE WITH CAUTION - LNbits wallet is still in </span>BETA</span>
-            </q-badge>
+          <q-badge color="yellow" text-color="black">
+            <span
+              ><span v-show="$q.screen.gt.sm"
+                >USE WITH CAUTION - LNbits wallet is still in </span
+              >BETA</span
+            >
+          </q-badge>
          {% endblock %}
-          <q-btn dense flat round @click="toggleDarkMode" :icon="($q.dark.isActive) ? 'brightness_3' : 'wb_sunny'" class="q-ml-lg" size="sm">
+          <q-btn
+            dense
+            flat
+            round
+            @click="toggleDarkMode"
+            :icon="($q.dark.isActive) ? 'brightness_3' : 'wb_sunny'"
+            class="q-ml-lg"
+            size="sm"
+          >
            <q-tooltip>Toggle Dark Mode</q-tooltip>
          </q-btn>
        </q-toolbar>
      </q-header>

      {% block drawer %}
-        <q-drawer v-model="g.visibleDrawer" side="left" :width="($q.screen.lt.md) ? 260 : 230" show-if-above :elevated="$q.screen.lt.md">
-          <lnbits-wallet-list></lnbits-wallet-list>
-          <lnbits-extension-list class="q-pb-xl"></lnbits-extension-list>
-        </q-drawer>
-      {% endblock %}
-
-      {% block page_container %}
-        <q-page-container>
-          <q-page class="q-px-md q-py-lg" :class="{'q-px-lg': $q.screen.gt.xs}">
-            {% block page %}{% endblock %}
-          </q-page>
-        </q-page-container>
-      {% endblock %}
-
-      {% block footer %}
-        <q-footer class="bg-transparent q-px-lg q-py-md" :class="{'text-dark': !$q.dark.isActive}">
-          <q-toolbar>
-            <q-toolbar-title class="text-caption">
-              <strong>LN</strong>bits, free and open-source lightning wallet/accounts system
-            </q-toolbar-title>
-            <q-space></q-space>
-            <q-btn flat dense :color="($q.dark.isActive) ? 'white' : 'deep-purple'" icon="code" type="a" href="https://github.com/lnbits/lnbits" target="_blank" rel="noopener">
-              <q-tooltip>View project in GitHub</q-tooltip>
-            </q-btn>
-          </q-toolbar>
-        </q-footer>
+      <q-drawer
+        v-model="g.visibleDrawer"
+        side="left"
+        :width="($q.screen.lt.md) ? 260 : 230"
+        show-if-above
+        :elevated="$q.screen.lt.md"
+      >
+        <lnbits-wallet-list></lnbits-wallet-list>
+        <lnbits-extension-list class="q-pb-xl"></lnbits-extension-list>
+      </q-drawer>
+      {% endblock %} {% block page_container %}
+      <q-page-container>
+        <q-page class="q-px-md q-py-lg" :class="{'q-px-lg': $q.screen.gt.xs}">
+          {% block page %}{% endblock %}
+        </q-page>
+      </q-page-container>
+      {% endblock %} {% block footer %}
+      <q-footer
+        class="bg-transparent q-px-lg q-py-md"
+        :class="{'text-dark': !$q.dark.isActive}"
+      >
+        <q-toolbar>
+          <q-toolbar-title class="text-caption">
+            <strong>LN</strong>bits, free and open-source lightning
+            wallet/accounts system
+          </q-toolbar-title>
+          <q-space></q-space>
+          <q-btn
+            flat
+            dense
+            :color="($q.dark.isActive) ? 'white' : 'deep-purple'"
+            icon="code"
+            type="a"
+            href="https://github.com/lnbits/lnbits"
+            target="_blank"
+            rel="noopener"
+          >
+            <q-tooltip>View project in GitHub</q-tooltip>
+          </q-btn>
+        </q-toolbar>
+      </q-footer>
      {% endblock %}
-
    </q-layout>

-    {% block vue_templates %}{% endblock %}
-
-    {% if DEBUG %}
-      <script src="{{ url_for('static', filename='vendor/vue@2.6.11/vue.js') }}"></script>
-      <script src="{{ url_for('static', filename='vendor/vue-router@3.1.6/vue-router.js') }}"></script>
-      <script src="{{ url_for('static', filename='vendor/vuex@3.1.3/vuex.js') }}"></script>
-      <script src="{{ url_for('static', filename='vendor/quasar@1.10.4/quasar.umd.js') }}"></script>
-    {% else %}
-      {% assets output='__bundle__/vue.js',
-        'vendor/quasar@1.10.4/quasar.ie.polyfills.umd.min.js',
-        'vendor/vue@2.6.11/vue.min.js',
-        'vendor/vue-router@3.1.6/vue-router.min.js',
-        'vendor/vuex@3.1.3/vuex.min.js',
-        'vendor/quasar@1.10.4/quasar.umd.min.js' %}
-        <script type="text/javascript" src="{{ ASSET_URL }}"></script>
-      {% endassets %}
-    {% endif %}
-
-    {% assets filters='rjsmin', output='__bundle__/base.js',
-      'vendor/axios@0.19.2/axios.min.js',
-      'vendor/underscore@1.10.2/underscore.min.js',
-      'js/base.js',
-      'js/components.js' %}
-      <script type="text/javascript" src="{{ ASSET_URL }}"></script>
-    {% endassets %}
-
-    {% block scripts %}{% endblock %}
+    {% block vue_templates %}{% endblock %} {% if DEBUG %}
+    <script src="{{ url_for('static', filename='vendor/vue@2.6.11/vue.js') }}"></script>
+    <script src="{{ url_for('static', filename='vendor/vue-router@3.1.6/vue-router.js') }}"></script>
+    <script src="{{ url_for('static', filename='vendor/vuex@3.1.3/vuex.js') }}"></script>
+    <script src="{{ url_for('static', filename='vendor/quasar@1.10.4/quasar.umd.js') }}"></script>
+    {% else %} {% assets output='__bundle__/vue.js',
+    'vendor/quasar@1.10.4/quasar.ie.polyfills.umd.min.js',
+    'vendor/vue@2.6.11/vue.min.js', 'vendor/vue-router@3.1.6/vue-router.min.js',
+    'vendor/vuex@3.1.3/vuex.min.js', 'vendor/quasar@1.10.4/quasar.umd.min.js' %}
+    <script type="text/javascript" src="{{ ASSET_URL }}"></script>
+    {% endassets %} {% endif %} {% assets filters='rjsmin',
+    output='__bundle__/base.js', 'vendor/axios@0.19.2/axios.min.js',
+    'vendor/underscore@1.10.2/underscore.min.js', 'js/base.js',
+    'js/components.js' %}
+    <script type="text/javascript" src="{{ ASSET_URL }}"></script>
+    {% endassets %} {% block scripts %}{% endblock %}
  </body>
 </html>
--- a/lnbits/templates/print.html
+++ b/lnbits/templates/print.html
@ -1,24 +1,31 @@
-<!doctype html>
+<!DOCTYPE html>

 <html lang="en">
  <head>
-    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Material+Icons" type="text/css">
+    <link
+      rel="stylesheet"
+      href="//fonts.googleapis.com/css?family=Material+Icons"
+      type="text/css"
+    />
    <style>
      @page {
        size: A4 portrait;
      }
      body {
-        font-family: Roboto,-apple-system,Helvetica Neue,Helvetica,Arial,sans-serif;
+        font-family: Roboto, -apple-system, Helvetica Neue, Helvetica, Arial,
+          sans-serif;
      }
    </style>
    {% block styles %}{% endblock %}
    <title>
-      {% block title %}
-        {% if SITE_TITLE != 'LNbits' %}{{ SITE_TITLE }}{% else %}LNbits{% endif %}
-      {% endblock %}
+      {% block title %} {% if SITE_TITLE != 'LNbits' %}{{ SITE_TITLE }}{% else
+      %}LNbits{% endif %} {% endblock %}
    </title>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
    {% block head_scripts %}{% endblock %}
  </head>

@ -32,17 +39,12 @@
    </q-layout>

    {% if DEBUG %}
-      <script src="{{ url_for('static', filename='vendor/vue@2.6.11/vue.js') }}"></script>
-      <script src="{{ url_for('static', filename='vendor/quasar@1.10.4/quasar.umd.js') }}"></script>
-    {% else %}
-      {% assets output='__bundle__/vue-print.js',
-        'vendor/quasar@1.10.4/quasar.ie.polyfills.umd.min.js',
-        'vendor/vue@2.6.11/vue.min.js',
-        'vendor/quasar@1.10.4/quasar.umd.min.js' %}
-        <script type="text/javascript" src="{{ ASSET_URL }}"></script>
-      {% endassets %}
-    {% endif %}
-
-    {% block scripts %}{% endblock %}
+    <script src="{{ url_for('static', filename='vendor/vue@2.6.11/vue.js') }}"></script>
+    <script src="{{ url_for('static', filename='vendor/quasar@1.10.4/quasar.umd.js') }}"></script>
+    {% else %} {% assets output='__bundle__/vue-print.js',
+    'vendor/quasar@1.10.4/quasar.ie.polyfills.umd.min.js',
+    'vendor/vue@2.6.11/vue.min.js', 'vendor/quasar@1.10.4/quasar.umd.min.js' %}
+    <script type="text/javascript" src="{{ ASSET_URL }}"></script>
+    {% endassets %} {% endif %} {% block scripts %}{% endblock %}
  </body>
 </html>
--- a/lnbits/templates/public.html
+++ b/lnbits/templates/public.html
@ -1,17 +1,7 @@
-{% extends "base.html" %}
-
-
-{% block beta %}{% endblock %}
-{% block drawer_toggle %}{% endblock %}
-{% block drawer %}{% endblock %}
-
-
-{% block toolbar_title %}
-  <a href="/" class="inherit">
-    {% if SITE_TITLE != 'LNbits' %}
-      {{ SITE_TITLE }}
-    {% else %}
-      <strong>LN</strong>bits
-    {% endif %}
-  </a>
+{% extends "base.html" %} {% block beta %}{% endblock %} {% block drawer_toggle
+%}{% endblock %} {% block drawer %}{% endblock %} {% block toolbar_title %}
+<a href="/" class="inherit">
+  {% if SITE_TITLE != 'LNbits' %} {{ SITE_TITLE }} {% else %}
+  <strong>LN</strong>bits {% endif %}
+</a>
 {% endblock %}