lndhub extension frontend.

lnbits/extensions/lndhub/config.json

@@ -1,5 +1,5 @@
 {
-    "name": "lndhub",
+    "name": "LndHub",
     "short_description": "Access lnbits from BlueWallet or Zeus.",
     "icon": "navigation",
     "contributors": ["fiatjaf"]

lnbits/extensions/lndhub/templates/lndhub/_instructions.html

@@ -0,0 +1,35 @@
+<q-expansion-item
+  group="extras"
+  icon="info"
+  label="Instructions"
+  default-opened
+>
+  <q-card>
+    <q-card-section>
+      To access an LNbits wallet from a mobile phone,
+      <ol>
+        <li>
+          Install either <a href="https://zeusln.app">Zeus</a> or
+          <a href="https://bluewallet.io/">BlueWallet</a>;
+        </li>
+        <li>
+          Go to <code>Add a wallet / Import wallet</code> on BlueWallet or
+          <code>Settings / Add a new node</code> on Zeus.
+        </li>
+        <li>Select the desired wallet on this page;</li>
+        <li>Scan one of the two QR codes from the mobile wallet.</li>
+      </ol>
+      <ul>
+        <li>
+          <em>Invoice</em> URLs mean the mobile wallet will only have the
+          authorization to read your payments and invoices and generate new
+          invoices.
+        </li>
+        <li>
+          <em>Admin</em> URLs mean the mobile wallet will be able to pay
+          invoices..
+        </li>
+      </ul>
+    </q-card-section>
+  </q-card>
+</q-expansion-item>

lnbits/extensions/lndhub/templates/lndhub/_lndhub.html

@@ -0,0 +1,19 @@
+<q-expansion-item group="extras" icon="info" label="LndHub info">
+  <q-card>
+    <q-card-section>
+      <p>
+        LndHub is a protocol invented by
+        <a href="https://bluewallet.io/">BlueWallet</a> that allows mobile
+        wallets to query payments and balances, generate invoices and make
+        payments from accounts that exist on a server. The protocol is a
+        collection of HTTP endpoints exposed through the internet.
+      </p>
+      <p>
+        For a wallet that supports it, reading a QR code that contains the URL
+        along with secret access credentials should enable access. Currently it
+        is supported by <a href="https://zeusln.app">Zeus</a> and
+        <a href="https://bluewallet.io/">BlueWallet</a>.
+      </p>
+    </q-card-section>
+  </q-card>
+</q-expansion-item>

lnbits/extensions/lndhub/templates/lndhub/index.html

@@ -1,28 +1,93 @@
 {% extends "base.html" %} {% from "macros.jinja" import window_vars with context
-%} {% block page %}
-<q-card>
-  <q-card-section>
-    <h5 class="text-subtitle1 q-mt-none q-mb-md"></h5>
-    {% for wallet in g.user.wallets %}
+%} {% block page %} {% raw %}
+<div class="row q-col-gutter-md">
+  <div class="col-12 col-md-8 col-lg-7 q-gutter-y-md">
+    <div class="row q-col-gutter-md">
+      <q-card
+        v-for="type in ['invoice', 'admin']"
+        v-bind:key="type"
+        class="q-pa-sm q-ma-sm col-5"
+      >
+        <q-card-section class="q-pa-none">
+          <div class="text-center">
+            <a :href="selectedWallet[type]">
+              <q-responsive :ratio="1" class="q-mx-sm">
+                <qrcode
+                  :value="selectedWallet[type]"
+                  :options="{width: 800}"
+                  class="rounded-borders"
+                ></qrcode>
+              </q-responsive>
+            </a>
+          </div>
+          <div class="row q-mt-lg items-center justify-center">
+            <q-btn
+              outline
+              color="grey"
+              @click="copyText(selectedWallet[type])"
+              class="text-center q-mb-md"
+              >Copy LndHub {{type}} URL</q-btn
+            >
+          </div>
+        </q-card-section>
+      </q-card>
+    </div>
+
+    <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
+      <q-form class="q-gutter-md">
+        <q-select
+          filled
+          dense
+          v-model="selectedWallet"
+          :options="wallets"
+          label="Select wallet:"
+        >
+        </q-select>
+      </q-form>
+    </q-card>
+  </div>
+
+  {% endraw %}
+
+  <div class="col-12 col-md-4 col-lg-5 q-gutter-y-md">
     <q-card>
-      <code class="text-caption">
-        lndhub://admin:{{wallet.adminkey}}@{% raw %}{{baseURL}}{% endraw %}/lndhub/ext/
-</code>
+      <q-card-section>
+        <h6 class="text-subtitle1 q-my-none">
+          LNbits LndHub extension
+        </h6>
+      </q-card-section>
+      <q-card-section class="q-pa-none">
+        <q-separator></q-separator>
+        <q-list>
+          {% include "lndhub/_instructions.html" %}
+          <q-separator></q-separator>
+          {% include "lndhub/_lndhub.html" %}
+        </q-list>
+      </q-card-section>
     </q-card>
-    {% endfor %}
-    <q-separator class="q-my-lg"></q-separator>
-  </q-card-section>
-</q-card>
+  </div>
+</div>
+
 {% endblock %} {% block scripts %} {{ window_vars(user) }}
+<script src="{{ url_for('static', filename='vendor/vue-qrcode@1.0.2/vue-qrcode.min.js') }}"></script>
 <script>
-  new Vue({
-    el: '#vue',
-    mixins: [windowMixin],
-    data: function () {
-      return {
-        baseURL: location.protocol + '//' + location.hostname
-      }
-    }
-  })
+    Vue.component(VueQrcode.name, VueQrcode)
+
+      new Vue({
+        el: '#vue',
+        mixins: [windowMixin],
+        data: function () {
+  var wallets = ({{ g.user.wallets | tojson }}).map(LNbits.map.wallet).map(wallet => ({
+              label: wallet.name,
+              admin: `lndhub://admin:${wallet.adminkey}@${location.protocol}//${location.host}/lndhub/ext/`,
+              invoice: `lndhub://invoice:${wallet.inkey}@${location.protocol}//${location.host}/lndhub/ext/`
+            }))
+
+          return {
+            wallets: wallets,
+              selectedWallet: wallets[0]
+          }
+        },
+      })
 </script>
 {% endblock %}

lnbits/extensions/lndhub/views.py

@@ -1,4 +1,4 @@
-from flask import render_template
+from flask import render_template, g
 
 from lnbits.decorators import check_user_exists, validate_uuids
 from lnbits.extensions.lndhub import lndhub_ext
@@ -8,4 +8,4 @@ from lnbits.extensions.lndhub import lndhub_ext
 @validate_uuids(["usr"], required=True)
 @check_user_exists()
 def lndhub_index():
-    return render_template("lndhub/index.html")
+    return render_template("lndhub/index.html", user=g.user)