satmachineclient/templates/myextension/myextension.html
2024-01-17 13:26:04 +00:00

98 lines
2.8 KiB
HTML

{% 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="text-center">
<a class="text-secondary" href="lightning:{{ lnurl }}">
<q-responsive :ratio="1" class="q-mx-md">
<qrcode
:value="qrValue"
:options="{width: 800}"
class="rounded-borders"
></qrcode>
</q-responsive>
</a>
</div>
<div class="row q-mt-lg q-gutter-sm">
<q-btn outline color="grey" @click="copyText(qrValue)"
>Copy LNURL </q-btn
>
</div>
</q-card-section>
<div class="row justify-start q-mt-lg">
<div class="col col-md-auto">
<q-btn outline style="color: primmary;" @click="qrValue = '{{ lnurlpay }}'">lnurlpay</q-btn>
</div>
<div class="col col-md-auto">
<q-btn outline style="color: primmary;" @click="qrValue = '{{ lnurlwithdraw }}'">lnurlwithdraw</q-btn>
</div>
</div>
</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">Public page</h6>
<p class="q-my-none">
Moat extensions have a public page that can be shared
(this page will still be accessible even if you have restricted
access to your LNbits install).
<br/>
In this example when a user pays the LNURLpay it triggers an event via a websocket waiting for the payment.
</p>.</p>
</q-card-section>
<q-card-section class="q-pa-none">
<q-separator></q-separator>
<q-list> </q-list>
</q-card-section>
</q-card>
</div>
</div>
{% endblock %} {% block scripts %}
<script>
Vue.component(VueQrcode.name, VueQrcode)
new Vue({
el: '#vue',
mixins: [windowMixin],
data: function () {
return {
qrValue: ''
}
},
created: function () {
this.qrValue = '{{lnurlpay}}'
},
methods: {
createInvoice(walletId) {
console.log(walletId)
const wallet = _.findWhere(this.g.user.wallets, {
id: walletId
})
console.log(wallet.inkey)
LNbits.api
.request(
'POST',
`/api/v1/payments`,
wallet.inkey,
{
out: false,
amount: this.invoiceAmount,
}
)
.then(response => {
this.qrValue = response.data.payment_request
})
.catch(error => {
LNbits.utils.notifyApiError(error)
})
},
},
})
</script>
{% endblock %}