feat: wait for HWW to authenticate, then open dialog

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

@@ -88,7 +88,8 @@ async function payment(path) {
           }
           if (!this.serialSignerRef.isAuthenticated()) {
             await this.serialSignerRef.hwwShowPasswordDialog()
-            return
+            const authenticated = await this.serialSignerRef.isAuthenticating()
+            if (!authenticated) return
           }
 
           await this.createPsbt()

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

@@ -158,7 +158,9 @@
       <q-form @submit="hwwSignPsbt" class="q-gutter-md">
         <div class="row q-mt-lg">
           <div class="col-12">
-            <span>Check data on the display of the hardware device.</span>
+            <q-badge class="text-subtitle2" color="yellow" text-color="black">
+              <span>Check data on the display of the hardware device.</span>
+            </q-badge>
           </div>
         </div>
         <div v-if="tx">
@@ -167,6 +169,13 @@
               <span class="text-subtitle2"
                 >Output {{hww.confirm.outputIndex}}</span
               >
+              <q-badge
+                v-if="tx.outputs[hww.confirm.outputIndex].branch_index === 1"
+                color="orange"
+                text-color="black"
+              >
+                <span>change</span>
+              </q-badge>
             </div>
           </div>
           <div v-if="!hww.confirm.showFee" class="row q-mt-lg">
@@ -207,7 +216,7 @@
         <div class="row q-mt-lg">
           <div class="col-6">
             <q-btn
-              v-if="hww.confirm.confirmed"
+              v-if="hww.confirm.showFee"
               unelevated
               color="green"
               :disable="!selectedPort"
@@ -224,7 +233,7 @@
               color="secondary"
               label="Next"
               class="float-left"
-              v-if="!hww.confirm.confirmed"
+              v-if="!hww.confirm.showFee"
               @click="hwwConfirmNext"
             >
             </q-btn>

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

@@ -29,10 +29,10 @@ async function serialSigner(path) {
           sendingPsbt: false,
           signingPsbt: false,
           psbtSentResolve: null,
+          loginResolve: null,
           confirm: {
             outputIndex: 0,
-            showFee: false,
-            confirmed: false
+            showFee: false
           }
         },
         tx: null, // todo: move to hww
@@ -122,6 +122,13 @@ async function serialSigner(path) {
       isAuthenticated: function () {
         return this.hww.authenticated
       },
+      isAuthenticating: function () {
+        if (this.isAuthenticated()) return false
+        return new Promise(resolve => {
+          this.loginResolve = resolve
+        })
+      },
+
       isSendingPsbt: async function () {
         if (!this.hww.sendingPsbt) return false
         return new Promise(resolve => {
@@ -229,10 +236,6 @@ async function serialSigner(path) {
         }
       },
       hwwConfirmNext: async function () {
-        if (this.hww.confirm.showFee === true) {
-          this.hww.confirm.confirmed = true
-          return
-        }
         this.hww.confirm.outputIndex += 1
         if (this.hww.confirm.outputIndex >= this.tx.outputs.length) {
           this.hww.confirm.showFee = true
@@ -271,6 +274,7 @@ async function serialSigner(path) {
       },
       handleLoginResponse: function (res = '') {
         this.hww.authenticated = res.trim() === '1'
+        this.loginResolve(this.hww.authenticated)
         if (this.hww.authenticated) {
           this.$q.notify({
             type: 'positive',
@@ -333,8 +337,7 @@ async function serialSigner(path) {
         this.hww.showConfirmationDialog = true
         this.hww.confirm = {
           outputIndex: 0,
-          showFee: false,
-          confirmed: false
+          showFee: false
         }
         this.hww.sendingPsbt = false
         this.psbtSentResolve()