lndhub extension frontend.
This commit is contained in:
fiatjaf
fiatjaf
parent
6210305791
commit
f4fffc19aa
5 changed files with 144 additions and 25 deletions
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "lndhub",
|
||||
"name": "LndHub",
|
||||
"short_description": "Access lnbits from BlueWallet or Zeus.",
|
||||
"icon": "navigation",
|
||||
"contributors": ["fiatjaf"]
|
||||
|
|
|
|||
35
lnbits/extensions/lndhub/templates/lndhub/_instructions.html
Normal file
35
lnbits/extensions/lndhub/templates/lndhub/_instructions.html
Normal file
|
|
@ -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>
|
||||
19
lnbits/extensions/lndhub/templates/lndhub/_lndhub.html
Normal file
19
lnbits/extensions/lndhub/templates/lndhub/_lndhub.html
Normal file
|
|
@ -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>
|
||||
|
|
@ -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 %}
|
||||
<q-card>
|
||||
<code class="text-caption">
|
||||
lndhub://admin:{{wallet.adminkey}}@{% raw %}{{baseURL}}{% endraw %}/lndhub/ext/
|
||||
</code>
|
||||
%} {% 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>
|
||||
{% endfor %}
|
||||
<q-separator class="q-my-lg"></q-separator>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
{% endraw %}
|
||||
|
||||
<div class="col-12 col-md-4 col-lg-5 q-gutter-y-md">
|
||||
<q-card>
|
||||
<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>
|
||||
</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 %}
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue