feat: prompt for Connect and Login before signing

lnbits/extensions/watchonly/static/components/payment/payment.js

@@ -10,6 +10,7 @@ async function payment(path) {
       'utxos',
       'mempool_endpoint',
       'sats_denominated',
+      'serial-signer-ref',
       'adminkey'
     ],
     watch: {
@@ -76,9 +77,21 @@ async function payment(path) {
         return satOrBtc(val, showUnit, this['sats_denominated'])
       },
       checkAndSend: async function () {
+        this.showChecking = true
         try {
-          console.log('### this.checkAndSend')
-          this.showChecking = true
+          console.log(
+            '### this.checkAndSend',
+            this.serialSignerRef.isConnected()
+          )
+          if (!this.serialSignerRef.isConnected()) {
+            await this.serialSignerRef.openSerialPort()
+            return
+          }
+          if (!this.serialSignerRef.isAuthenticated()) {
+            await this.serialSignerRef.hwwShowPasswordDialog()
+            return
+          }
+
           await this.createPsbt()
         } catch (error) {
         } finally {

lnbits/extensions/watchonly/static/components/serial-signer/serial-signer.js

@@ -107,6 +107,13 @@ async function serialSigner(path) {
         }
       },
 
+      isConnected: function () {
+        return !!this.selectedPort
+      },
+      isAuthenticated: function () {
+        return this.hww.authenticated
+      },
+
       checkSerialPortSupported: function () {
         if (!navigator.serial) {
           this.$q.notify({

lnbits/extensions/watchonly/static/js/index.js

@@ -273,9 +273,6 @@ const watchOnly = async () => {
       },
       //################### SERIAL PORT ###################
 
-      sharePsbtWithAnimatedQRCode: async function () {
-        console.log('### sharePsbtWithAnimatedQRCode')
-      },
       //################### HARDWARE WALLET ###################
 
       //################### UTXOs ###################