feat: toggle serial port

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

@@ -5,7 +5,7 @@
     color="primary"
     icon="usb"
     :text-color="selectedPort ? 'orange' : 'white'"
-    @click="openSerialPort"
+    @click="toggleSerialPortConection"
   >
     <q-list>
       <q-item v-if="!selectedPort" clickable v-close-popup>

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

@@ -34,6 +34,13 @@ async function serialSigner(path) {
     },
 
     methods: {
+      toggleSerialPortConection: async function () {
+        if (!this.selectedPort) {
+          this.openSerialPort()
+        } else {
+          this.closeSerialPort()
+        }
+      },
       openSerialPort: async function () {
         if (!this.checkSerialPortSupported()) return
         console.log('### openSerialPort', this.selectedPort)
@@ -72,6 +79,34 @@ async function serialSigner(path) {
           })
         }
       },
+      closeSerialPort: async function () {
+        try {
+          if (this.writer) this.writer.close()
+          if (this.writableStreamClosed) await this.writableStreamClosed
+          if (this.reader) this.reader.cancel()
+          if (this.readableStreamClosed)
+            await this.readableStreamClosed.catch(() => {
+              /* Ignore the error */
+            })
+          if (this.selectedPort) await this.selectedPort.close()
+          this.selectedPort = null
+          this.$q.notify({
+            type: 'positive',
+            message: 'Serial port disconnected!',
+            timeout: 5000
+          })
+        } catch (error) {
+          this.selectedPort = null
+          console.log('### error', error)
+          this.$q.notify({
+            type: 'warning',
+            message: 'Cannot close serial port!',
+            caption: `${error}`,
+            timeout: 10000
+          })
+        }
+      },
+
       checkSerialPortSupported: function () {
         if (!navigator.serial) {
           this.$q.notify({

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

@@ -273,36 +273,6 @@ const watchOnly = async () => {
       },
       //################### SERIAL PORT ###################
 
-      closeSerialPort: async function () {
-        try {
-          console.log('### closeSerialPort', this.serial.selectedPort)
-          if (this.serial.writer) this.serial.writer.close()
-          if (this.serial.writableStreamClosed)
-            await this.serial.writableStreamClosed
-          if (this.serial.reader) this.serial.reader.cancel()
-          if (this.serial.readableStreamClosed)
-            await this.serial.readableStreamClosed.catch(() => {
-              /* Ignore the error */
-            })
-          if (this.serial.selectedPort) await this.serial.selectedPort.close()
-          this.serial.selectedPort = null
-          this.$q.notify({
-            type: 'positive',
-            message: 'Serial port disconnected!',
-            timeout: 5000
-          })
-        } catch (error) {
-          this.serial.selectedPort = null
-          console.log('### error', error)
-          this.$q.notify({
-            type: 'warning',
-            message: 'Cannot close serial port!',
-            caption: `${error}`,
-            timeout: 10000
-          })
-        }
-      },
-
       sharePsbtWithAnimatedQRCode: async function () {
         console.log('### sharePsbtWithAnimatedQRCode')
       },