fix: ui issues

static/js/index.js

@@ -1,7 +1,5 @@
 /* globals Quasar, Vue, _, VueQrcode, windowMixin, LNbits, LOCALE */
 
-Vue.component(VueQrcode.name, VueQrcode)
-
 const locationPath = [
   window.location.protocol,
   '//',
@@ -21,9 +19,9 @@ const mapPayLink = obj => {
   return obj
 }
 
-new Vue({
+window.app = Vue.createApp({
   el: '#vue',
-  mixins: [windowMixin],
+  mixins: [window.windowMixin],
   computed: {
     endpoint: function () {
       return `/lnurlp/api/v1/settings?usr=${this.g.user.id}`
@@ -240,7 +238,7 @@ new Vue({
     }
   },
   created() {
-    if (this.g.user.wallets.length) {
+    if (this.g.user.wallets?.length) {
       var getPayLinks = this.getPayLinks
       getPayLinks()
       this.checker = setInterval(() => {

templates/lnurlp/display.html

@@ -6,11 +6,7 @@
         <div class="text-center">
           <a class="text-secondary" href="lightning:{{ lnurl }}">
             <q-responsive :ratio="1" class="q-mx-md">
-              <qrcode
+              <lnbits-qrcode value="lightning:{{ lnurl }}"></lnbits-qrcode>
-                value="lightning:{{ lnurl }}"
-                :options="{width: 800}"
-                class="rounded-borders"
-              ></qrcode>
             </q-responsive>
           </a>
         </div>
@@ -44,11 +40,9 @@
 </div>
 {% endblock %} {% block scripts %}
 <script>
-  Vue.component(VueQrcode.name, VueQrcode)
+  window.app = Vue.createApp({
-
-  new Vue({
     el: '#vue',
-    mixins: [windowMixin]
+    mixins: [window.windowMixin]
   })
 </script>
 {% endblock %}

templates/lnurlp/index.html

@@ -359,12 +359,8 @@
     <q-card v-if="qrCodeDialog.data" class="q-pa-lg lnbits__dialog-card">
       {% raw %}
       <q-responsive :ratio="1" class="q-mx-xl q-mb-md">
-        <qrcode
+        <lnbits-qrcode :value="'lightning:' + qrCodeDialog.data.lnurl">
-          :value="'lightning:' + qrCodeDialog.data.lnurl"
+        </lnbits-qrcode>
-          :options="{width: 800}"
-          class="rounded-borders"
-        >
-        </qrcode>
       </q-responsive>
       <p style="word-break: break-all">
         <strong>ID:</strong> {{ qrCodeDialog.data.id }}<br />

templates/lnurlp/print_qr.html

@@ -1,7 +1,7 @@
 {% extends "print.html" %} {% block page %}
 <div class="row justify-center">
   <div class="qr">
-    <qrcode value="lightning:{{ lnurl }}" :options="{width}"></qrcode>
+    <lnbits-qrcode value="lightning:{{ lnurl }}"></lnbits-qrcode>
   </div>
 </div>
 {% endblock %} {% block styles %}
@@ -12,9 +12,7 @@
 </style>
 {% endblock %} {% block scripts %}
 <script>
-  Vue.component(VueQrcode.name, VueQrcode)
+  window.app = Vue.createApp({
-
-  new Vue({
     el: '#vue',
     created: function () {
       window.print()