feat: show QR code for descriptor and xpub

lnbits/extensions/watchonly/static/components/wallet-list/wallet-list.html

@@ -116,6 +116,7 @@
                     >New Receive Address</q-btn
                   >
                 </div>
+
                 <div class="col-4">
                   {{getAccountDescription(props.row.type)}}
                 </div>
@@ -124,9 +125,19 @@
 
               <div class="row items-center no-wrap q-mb-md">
                 <div class="col-2 q-pr-lg">Master Pubkey:</div>
-                <div class="col-8">
+                <div class="col-7 q-pr-lg">
                   <q-input v-model="props.row.masterpub" filled readonly />
                 </div>
+                <div class="col-1">
+                  <q-btn
+                    unelevated
+                    dense
+                    size="md"
+                    icon="qr_code"
+                    :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
+                    @click="openQrCodeDialog(props.row.masterpub)"
+                  ></q-btn>
+                </div>
                 <div class="col-2 q-pr-lg">
                   <q-btn
                     outline
@@ -142,9 +153,19 @@
                 class="row items-center no-wrap q-mb-md"
               >
                 <div class="col-2 q-pr-lg">XPub:</div>
-                <div class="col-8">
+                <div class="col-7 q-pr-lg">
                   <q-input v-model="props.row.meta.xpub" filled readonly />
                 </div>
+                <div class="col-1">
+                  <q-btn
+                    unelevated
+                    dense
+                    size="md"
+                    icon="qr_code"
+                    :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
+                    @click="openQrCodeDialog(props.row.meta.xpub)"
+                  ></q-btn>
+                </div>
                 <div class="col-2 q-pr-lg">
                   <q-btn
                     outline
@@ -250,4 +271,15 @@
       </q-form>
     </q-card>
   </q-dialog>
+  <q-dialog v-model="showQrCodeDialog" position="top">
+    <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
+      <q-responsive :ratio="1" class="q-mx-xl q-mb-md">
+        <qrcode
+          :value="qrCodeValue"
+          :options="{width: 800}"
+          class="rounded-borders"
+        ></qrcode>
+      </q-responsive>
+    </q-card>
+  </q-dialog>
 </div>

lnbits/extensions/watchonly/static/components/wallet-list/wallet-list.js

@@ -16,6 +16,8 @@ async function walletList(path) {
       return {
         walletAccounts: [],
         address: {},
+        showQrCodeDialog: false,
+        qrCodeValue: null,
         formDialog: {
           show: false,
 
@@ -296,6 +298,10 @@ async function walletList(path) {
             position: position || 'bottom'
           })
         })
+      },
+      openQrCodeDialog: function (qrCodeValue) {
+        this.qrCodeValue = qrCodeValue
+        this.showQrCodeDialog = true
       }
     },
     created: async function () {