129 lines
No EOL
3.8 KiB
HTML
129 lines
No EOL
3.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: '',
|
|
myExtensionID: ''
|
|
}
|
|
},
|
|
created: function () {
|
|
this.qrValue = '{{lnurlpay}}'
|
|
this.myExtensionID = '{{myextension_id}}'
|
|
this.connectWebocket(this.myExtensionID)
|
|
},
|
|
methods: {
|
|
makeItRain() {
|
|
document.getElementById("vue").disabled = true
|
|
var end = Date.now() + (2 * 1000)
|
|
var colors = ['#FFD700', '#ffffff']
|
|
function frame() {
|
|
confetti({
|
|
particleCount: 2,
|
|
angle: 60,
|
|
spread: 55,
|
|
origin: { x: 0 },
|
|
colors: colors,
|
|
zIndex: 999999
|
|
})
|
|
confetti({
|
|
particleCount: 2,
|
|
angle: 120,
|
|
spread: 55,
|
|
origin: { x: 1 },
|
|
colors: colors,
|
|
zIndex: 999999
|
|
})
|
|
if (Date.now() < end) {
|
|
requestAnimationFrame(frame)
|
|
}
|
|
else {
|
|
document.getElementById("vue").disabled = false
|
|
}
|
|
}
|
|
frame()
|
|
},
|
|
connectWebocket(id) {
|
|
//////////////////////////////////////////////////
|
|
///wait for pay action to happen and do a thing////
|
|
///////////////////////////////////////////////////
|
|
self = this
|
|
if (location.protocol !== 'http:') {
|
|
localUrl =
|
|
'wss://' +
|
|
document.domain +
|
|
':' +
|
|
location.port +
|
|
'/api/v1/ws/' +
|
|
id
|
|
} else {
|
|
localUrl =
|
|
'ws://' +
|
|
document.domain +
|
|
':' +
|
|
location.port +
|
|
'/api/v1/ws/' +
|
|
id
|
|
}
|
|
this.connection = new WebSocket(localUrl)
|
|
this.connection.onmessage = function (e) {
|
|
self.makeItRain()
|
|
}
|
|
}
|
|
},
|
|
})
|
|
</script>
|
|
{% endblock %} |