refactor: code clean-up; use slot for serial-signer

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

@@ -157,7 +157,8 @@
 
     <div class="row items-center no-wrap q-mb-md q-pt-lg">
       <div class="col-3">
-        <q-btn
+        <q-btn-dropdown
+          split
           unelevated
           :disabled="changeAmount < 0"
           label="Check & Send"
@@ -165,10 +166,28 @@
           type="submit"
           class="btn-full"
         >
-          <q-spinner v-if="showChecking" color="primary"></q-spinner
+          <q-list>
-        ></q-btn>
+            <q-item :disabled="changeAmount < 0" clickable v-close-popup>
+              <q-item-section>
+                <q-item-label>Serial Port</q-item-label>
+                <q-item-label caption>
+                  Sign using a Serial Port device</q-item-label
+                >
+              </q-item-section>
+            </q-item>
+            <q-item clickable disabled v-close-popup>
+              <q-item-section>
+                <q-item-label>Share PSBT</q-item-label>
+                <q-item-label caption
+                  >Share the PSBT as text or Animated QR Code</q-item-label
+                >
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-btn-dropdown>
       </div>
       <div class="col-9">
+        <q-spinner v-if="showChecking" color="primary"></q-spinner>
         <q-badge
           v-if="changeAmount < 0"
           class="text-subtitle2 float-right"

lnbits/extensions/watchonly/static/components/send-to/send-to.html

@@ -53,16 +53,6 @@
           </div>
         </q-tr>
       </template>
-      <template v-slot:bottom-row>
-        <q-tr>
-          <q-td colspan="100%">
-            <div class="row items-center no-wrap">
-              <div class="col-3 q-pr-lg"></div>
-              <div class="col-4 q-pr-lg"></div>
-            </div>
-          </q-td>
-        </q-tr>
-      </template>
     </q-table>
     <div class="row items-center no-wrap">
       <div class="col-3 q-pr-lg">

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

@@ -43,6 +43,7 @@ async function serialSigner(path) {
           })
 
           navigator.serial.addEventListener('disconnect', () => {
+            console.log('### navigator.serial event: disconnected!', event)
             this.hww.authenticated = false
             this.$q.notify({
               type: 'warning',

lnbits/extensions/watchonly/static/components/wallet-config/wallet-config.html

@@ -16,7 +16,7 @@
         </div>
       </div>
       <div class="col-2 float-right">
-        <serial-signer></serial-signer>
+        <slot name="serial"></slot>
       </div>
     </div>
   </q-card>

lnbits/extensions/watchonly/templates/watchonly/index.html

@@ -6,7 +6,11 @@
       :total="utxos.total"
       :config="config"
       :adminkey="g.user.wallets[0].adminkey"
-    ></wallet-config>
+    >
+      <template v-slot:serial>
+        <serial-signer ref="serialSigner"></serial-signer>
+      </template>
+    </wallet-config>
 
     <wallet-list
       :adminkey="g.user.wallets[0].adminkey"
@@ -103,16 +107,6 @@
               :mempool_endpoint="config.data.mempool_endpoint"
               :sats-denominated="config.data.sats_denominated"
             ></utxo-list>
-            <!-- <div v-if="payment.show" class="row items-center no-wrap q-mb-md">
-              <div class="col">
-                <q-toggle
-                  label="Show Advanced"
-                  color="secodary"
-                  v-model="payment.showAdvanced"
-                ></q-toggle>
-              </div>
-            </div> -->
-
             <q-card v-if="payment.show"
               ><q-card-section>
                 <div class="row items-center no-wrap q-mb-md">
@@ -404,7 +398,7 @@
         </q-tab-panels>
       </q-card-section>
     </q-card>
-    <div class="q-mt-lg">
+    <div class="q-pt-sm">
       <payment
         v-show="showPayment"
         :accounts="walletAccounts"