From a8951f5b48f9c763147ef45383157c4f7f939aee Mon Sep 17 00:00:00 2001
From: Vlad Stan <stan.v.vlad@gmail.com>
Date: Fri, 9 Sep 2022 18:40:31 +0300
Subject: [PATCH] feat: show QR code for descriptor and xpub

---
 .../components/wallet-list/wallet-list.html   | 36 +++++++++++++++++--
 .../components/wallet-list/wallet-list.js     |  6 ++++
 2 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/lnbits/extensions/watchonly/static/components/wallet-list/wallet-list.html b/lnbits/extensions/watchonly/static/components/wallet-list/wallet-list.html
index a7ca64970..b656bdcad 100644
--- a/lnbits/extensions/watchonly/static/components/wallet-list/wallet-list.html
+++ b/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>
diff --git a/lnbits/extensions/watchonly/static/components/wallet-list/wallet-list.js b/lnbits/extensions/watchonly/static/components/wallet-list/wallet-list.js
index d8df84e1e..004f092ba 100644
--- a/lnbits/extensions/watchonly/static/components/wallet-list/wallet-list.js
+++ b/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 () {