Satspay display link

This commit is contained in:
benarc 2021-02-23 20:42:24 +00:00
parent 5c894ff707
commit 569f43fe81
4 changed files with 66 additions and 34 deletions

View file

@ -1,46 +1,66 @@
{% extends "public.html" %} {% block page %}
<div class="row q-col-gutter-md justify-center">
<div class="col-12 col-sm-6 col-md-5 col-lg-4">
<q-card class="q-pa-lg">
<q-card-section class="q-pa-none">
<div class="q-pa-md">
<q-card class="my-card">
<q-card-section>
<div class="text-h6">Our Changing Planet</div>
<div class="text-subtitle2">by John Doe</div>
</q-card-section>
<q-tabs v-model="tab" class="text-teal">
<q-tab label="Tab one" name="one" />
<q-tab label="Tab two" name="two" />
</q-tabs>
<q-separator />
<q-tab-panels v-model="tab" animated>
<q-tab-panel name="Lightning">
<div class="text-center">
<a href="lightning:{{ link.lnurl }}">
<a href="lightning:{{ charge.id }}">
<q-responsive :ratio="1" class="q-mx-md">
<qrcode
value="{{ link.lnurl }}"
:options="{width: 800}"
value="{{ charge.id }}"
:options="{width: 300}"
class="rounded-borders"
></qrcode>
</q-responsive>
</a>
</div>
<div class="row q-mt-lg">
<q-btn outline color="grey" @click="copyText('{{ link.lnurl }}')"
>Copy LNURL</q-btn
<q-btn outline color="grey" @click="copyText('{{ charge.id }}')"
>Copy address</q-btn
>
</div>
</q-card-section>
</q-card>
</div>
<div class="col-12 col-sm-6 col-md-5 col-lg-4 q-gutter-y-md">
<q-card>
<q-card-section>
<h6 class="text-subtitle1 q-mb-sm q-mt-none">
LNbits LNURL-pay link
</h6>
<p class="q-my-none">
Use a LNURL compatible bitcoin wallet to claim the sats.
</p>
</q-card-section>
<q-card-section class="q-pa-none">
<q-separator></q-separator>
<q-list>
{% include "lnurlp/_lnurl.html" %}
</q-list>
</q-card-section>
</q-card>
</div>
</q-tab-panel>
<q-tab-panel name="Onchain">
<div class="text-center">
<a href="lightning:{{ charge.id }}">
<q-responsive :ratio="1" class="q-mx-md">
<qrcode
value="{{ charge.id }}"
:options="{width: 300}"
class="rounded-borders"
></qrcode>
</q-responsive>
</a>
</div>
<div class="row q-mt-lg">
<q-btn outline color="grey" @click="copyText('{{ charge.id }}')"
>Copy address</q-btn
>
</div>
</q-tab-panel>
</q-tab-panels>
</q-card>
</div>
{% endblock %} {% block scripts %}
<script src="{{ url_for('static', filename='vendor/vue-qrcode@1.0.2/vue-qrcode.min.js') }}"></script>
<script>

View file

@ -54,7 +54,18 @@
</template>
<template v-slot:body="props">
<q-tr :props="props">
<q-td auto-width>
<q-btn
unelevated
dense
size="xs"
icon="link"
:color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
type="a"
:href="props.row.displayUrl"
target="_blank"
></q-btn>
</q-td>
<q-td auto-width>
<q-icon v-if="props.row.timeleft < 1 && props.row.amount_paid < props.row.amount"
@ -279,6 +290,7 @@
new Date(obj.time * 1000),
'YYYY-MM-DD HH:mm'
)
obj.displayUrl = ['/satspay/', obj.id].join('')
return obj
}

View file

@ -16,6 +16,6 @@ async def index():
@satspay_ext.route("/<charge_id>")
async def display(charge_id):
link = get_payment(charge_id) or abort(HTTPStatus.NOT_FOUND, "Charge link does not exist.")
charge = get_charge(charge_id) or abort(HTTPStatus.NOT_FOUND, "Charge link does not exist.")
return await render_template("satspay/display.html", link=link)
return await render_template("satspay/display.html", charge=charge)

View file

@ -1,6 +1,6 @@
<q-card>
<q-card-section>
<p>The WatchOnly extension uses https://mempool.space for blockchain data.<br />
<p>The WatchOnly extension uses mempool.space for blockchain data.<br />
<small>
Created by, <a href="https://github.com/benarc">Ben Arc</a></small
>