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) {
-        if (this.g.hasCamera === false) {
-          Quasar.Notify.create({
-            message: 'No camera found on this device.',
-            type: 'negative'
-          })
-          this.g.showScanner = false
-        }
+    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'
+        })
+        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