feat: improve on lnbits-qrcode-scanner design (#3633)

lnbits/static/js/components/lnbits-qrcode-scanner.js

@@ -1,25 +1,44 @@
 window.app.component('lnbits-qrcode-scanner', {
   template: '#lnbits-qrcode-scanner',
-  mixins: [window.windowMixin],
+  props: ['callback'],
+  data() {
+    return {
+      showScanner: false
+    }
+  },
   watch: {
-    'g.showScanner'(newVal) {
-      if (newVal === true) {
+    callback(newVal) {
+      if (newVal === null) {
+        return this.reset()
+      }
+      if (typeof newVal !== 'function') {
+        Quasar.Notify.create({
+          message: 'QR code scanner callback is not a function.',
+          type: 'negative'
+        })
+        return this.reset()
+      }
       if (this.g.hasCamera === false) {
         Quasar.Notify.create({
           message: 'No camera found on this device.',
           type: 'negative'
         })
-          this.g.showScanner = false
-        }
+        return this.reset()
       }
+      this.showScanner = true
     }
   },
   methods: {
+    reset() {
+      this.showScanner = false
+      this.g.scanner = null
+    },
     detect(val) {
       const rawValue = val[0].rawValue
       console.log('Detected QR code value:', rawValue)
+      this.callback(rawValue)
       this.$emit('detect', rawValue)
-      this.g.showScanner = false
+      this.reset()
     },
     async onInitQR(promise) {
       try {
@@ -48,7 +67,7 @@ window.app.component('lnbits-qrcode-scanner', {
           type: 'negative'
         })
         this.g.hasCamera = false
-        this.showScanner = false
+        this.reset()
       }
     }
   }

lnbits/static/js/globals.js

@@ -22,7 +22,6 @@ window.g = Vue.reactive({
   fiatBalance: 0,
   exchangeRate: 0,
   fiatTracking: false,
-  showScanner: false,
   payments: [],
   walletEventListeners: [],
   showNewWalletDialog: false,
@@ -58,7 +57,7 @@ window.g = Vue.reactive({
   ads: WINDOW_SETTINGS.AD_SPACE.split(',').map(ad => ad.split(';')),
   denomination: WINDOW_SETTINGS.LNBITS_DENOMINATION,
   isSatsDenomination: WINDOW_SETTINGS.LNBITS_DENOMINATION == 'sats',
-  scanDetectCallback: null
+  scanner: null
 })
 
 window.dateFormat = 'YYYY-MM-DD HH:mm'

lnbits/static/js/windowMixin.js

@@ -1,15 +1,5 @@
 window.windowMixin = {
   methods: {
-    handleScan(val) {
-      if (this.g.scanDetectCallback) {
-        this.g.scanDetectCallback(val)
-        this.g.scanDetectCallback = null
-      }
-    },
-    openScanDialog(scanDetectCallback) {
-      this.g.showScanner = true
-      this.g.scanDetectCallback = scanDetectCallback
-    },
     openNewWalletDialog(walletType = 'lightning') {
       this.g.newWalletType = walletType
       this.g.showNewWalletDialog = true

lnbits/templates/base.html

@@ -34,7 +34,7 @@
     <div id="vue">
       <q-layout view="hHh lpR lfr" v-cloak>
         <lnbits-disclaimer v-if="g.user && !g.isPublicPage"></lnbits-disclaimer>
-        <lnbits-qrcode-scanner @detect="handleScan"></lnbits-qrcode-scanner>
+        <lnbits-qrcode-scanner :callback="g.scanner"></lnbits-qrcode-scanner>
         <lnbits-theme></lnbits-theme>
         <lnbits-header></lnbits-header>
         <lnbits-drawer v-if="g.user && !g.isPublicPage"></lnbits-drawer>

lnbits/templates/components/lnbits-qrcode-scanner.vue

@@ -1,5 +1,5 @@
 <template id="lnbits-qrcode-scanner">
-  <q-dialog v-model="g.showScanner" position="top">
+  <q-dialog v-model="showScanner" position="top">
     <q-card class="q-pa-lg q-pt-xl">
       <div class="text-center q-mb-lg">
         <qrcode-stream
@@ -10,7 +10,7 @@
       </div>
       <div class="row q-mt-lg">
         <q-btn
-          @click="g.showScanner = false"
+          @click="reset"
           flat
           color="grey"
           class="q-ml-auto"

lnbits/templates/pages/wallet.vue

@@ -162,10 +162,9 @@
                 unelevated
                 icon="qr_code_scanner"
                 color="secondary"
-                @click="openScanDialog(decodeQR)"
+                @click="g.scanner = decodeQR"
                 :disable="
-                  !this.g.wallet.canReceivePayments &&
-                  !this.g.wallet.canSendPayments
+                  !g.wallet.canReceivePayments && !g.wallet.canSendPayments
                 "
               >
                 <q-tooltip
@@ -861,7 +860,7 @@
     </q-tabs>
 
     <q-btn
-      @click="openScanDialog(decodeQR)"
+      @click="g.scanner = decodeQR"
       round
       unelevated
       size="35px"