feat: ui/ux improvements

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

@@ -48,7 +48,8 @@ new Vue({
         password: null,
         authenticated: false,
         showPasswordDialog: false,
-        showConsole: false
+        showConsole: false,
+        psbtSent: false
       },
 
       formDialog: {
@@ -564,6 +565,7 @@ new Vue({
           wallet.adminkey,
           {tx_hex: this.payment.signedTxHex}
         )
+        this.payment.sentTxId = data
         this.$q.notify({
           type: 'positive',
           message: 'Transaction broadcasted!',
@@ -571,6 +573,7 @@ new Vue({
           timeout: 10000
         })
       } catch (error) {
+        this.payment.sentTxId = null
         this.$q.notify({
           type: 'warning',
           message: 'Failed to broadcast!',
@@ -695,6 +698,7 @@ new Vue({
       else if (msg[0] == COMMAND_PASSWORD) this.handleLoginResponse(msg[1])
       else if (msg[0] == COMMAND_PASSWORD_CLEAR)
         this.handleLogoutResponse(msg[1])
+      else if (msg[0] == COMMAND_SEND_PSBT) this.handleSendPsbtResponse(msg[1])
       else console.log('### handleSerialPortResponse', value)
     },
     updateSerialPortConsole: function (value) {
@@ -708,6 +712,19 @@ new Vue({
       console.log('### sharePsbtWithAnimatedQRCode')
     },
     //################### HARDWARE WALLET ###################
+    hwwShowPasswordDialog: async function () {
+      try {
+        this.hww.showPasswordDialog = true
+        await this.serial.writer.write(COMMAND_PASSWORD + '\n')
+      } catch (error) {
+        this.$q.notify({
+          type: 'warning',
+          message: 'Failed to connect to Hardware Wallet!',
+          caption: `${error}`,
+          timeout: 10000
+        })
+      }
+    },
     hwwLogin: async function () {
       try {
         await this.serial.writer.write(
@@ -716,7 +733,7 @@ new Vue({
       } catch (error) {
         this.$q.notify({
           type: 'warning',
-          message: 'Failed to send password to hardware wallet!',
+          message: 'Failed to send password to Hardware Wallet!',
           caption: `${error}`,
           timeout: 10000
         })
@@ -767,7 +784,7 @@ new Vue({
       if (this.hww.authenticated) {
         this.hwwLogout()
       } else {
-        this.hww.showPasswordDialog = true
+        this.hwwShowPasswordDialog()
       }
     },
     hwwSendPsbt: async function () {
@@ -789,6 +806,9 @@ new Vue({
         })
       }
     },
+    handleSendPsbtResponse: function (res = '') {
+      this.hww.psbtSent = true
+    },
     hwwSignPsbt: async function () {
       try {
         await this.serial.writer.write(COMMAND_SIGN_PSBT + '\n')

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

@@ -1128,12 +1128,13 @@
                             v-if="!hww.authenticated"
                             clickable
                             v-close-popup
-                            @click="hww.showPasswordDialog = true"
+                            @click="hwwShowPasswordDialog()"
                           >
                             <q-item-section>
                               <q-item-label>Login</q-item-label>
                               <q-item-label caption
-                                >Enter password for HWW.</q-item-label
+                                >Enter password for Hardware
+                                Wallet.</q-item-label
                               >
                             </q-item-section>
                           </q-item>
@@ -1155,14 +1156,8 @@
                             :disabled="!hww.authenticated"
                             clickable
                             v-close-popup
-                            @click="hww.showPasswordDialog = true"
+                            @click="hwwShowPasswordDialog()"
                           >
-                            <q-item-section>
-                              <q-item-label>Sign</q-item-label>
-                              <q-item-label caption
-                                >Sign PSBT on Hardware Wallet.</q-item-label
-                              >
-                            </q-item-section>
                           </q-item>
                           <q-item clickable v-close-popup>
                             <q-item-section>
@@ -1234,25 +1229,62 @@
                     </div>
 
                     <div class="col-6">
-                      <q-badge color="blue"
+                      <q-badge
+                        v-if="hww.psbtSent"
+                        color="yellow"
+                        text-color="black"
+                        class="text-subtitle1"
                         >Please check transaction data on the Hardware Wallet
-                        Display</q-badge
+                        display</q-badge
                       >
                     </div>
                     <div class="col-3">
                       <q-btn
+                        v-if="hww.psbtSent"
                         @click="hwwSignPsbt()"
                         unelevated
                         color="green"
-                        class="float-right text-subtitle1"
+                        class="float-right"
                         >Confirm</q-btn
                       >
                     </div>
                   </div>
+                  <div
+                    v-if="payment.psbtBase64Signed"
+                    class="row items-center no-wrap q-mb-md"
+                  >
+                    <div class="col-3 q-pr-lg"></div>
+
+                    <div class="col-9">
+                      <q-input
+                        v-model="payment.psbtBase64Signed"
+                        filled
+                        readonly
+                      />
+                    </div>
+                  </div>
                   <q-separator
                     v-if="payment.signedTx"
                     class="q-mb-md"
                   ></q-separator>
+                  <div
+                    v-if="payment.psbtBase64Signed"
+                    class="row items-center no-wrap q-mb-md"
+                  >
+                    <div class="col-3 q-pr-lg">
+                      <q-btn
+                        v-if="payment.signedTx"
+                        @click="broadcastTransaction()"
+                        unelevated
+                        color="secondary"
+                        >Send Payment</q-btn
+                      >
+                    </div>
+                    <div class="col-9">
+                      <span class="text-subtitle2">Transaction Details</span>
+                      <q-separator></q-separator>
+                    </div>
+                  </div>
                   <div
                     v-if="payment.signedTx"
                     class="row items-center no-wrap q-mb-md"
@@ -1276,6 +1308,8 @@
                         </div>
                       </div>
                       <q-separator class="q-mb-lg"></q-separator>
+                      <span class="text-subtitle2">Outputs</span>
+                      <q-separator class="q-mb-lg"></q-separator>
                       <div
                         v-for="out in payment.signedTx.outputs"
                         class="row items-center no-wrap q-mb-sm"
@@ -1292,28 +1326,18 @@
                           >
                         </div>
                       </div>
-                    </div>
+                      <q-separator
-                  </div>
-                  <div
-                    v-if="payment.psbtBase64Signed"
-                    class="row items-center no-wrap q-mb-md"
-                  >
-                    <div class="col-3 q-pr-lg">
-                      <q-btn
-                        v-if="payment.signedTx"
-                        @click="broadcastTransaction()"
-                        unelevated
-                        color="secondary"
-                        >Send Payment</q-btn
-                      >
-                    </div>
-                    <div class="col-9">
-                      <q-input
                         v-if="payment.sentTxId"
-                        v-model="payment.sentTxId"
+                        class="q-mb-lg"
-                        filled
+                      ></q-separator>
-                        readonly
+                      <div
-                      />
+                        v-if="payment.sentTxId"
+                        class="row items-center no-wrap q-mb-sm"
+                      >
+                        <div class="col-12">
+                          <q-input v-model="payment.sentTxId" filled readonly />
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </q-card-section>

lnbits/extensions/watchonly/views_api.py

@@ -311,10 +311,9 @@ async def api_psbt_extract_tx(
 
 
 @watchonly_ext.post("/api/v1/tx")
-async def api_psbt_extract_tx(
+async def api_tx_broadcast(
     data: BroadcastTransaction, w: WalletTypeInfo = Depends(require_admin_key)
 ):
-    print("### data", data)
     try:
         config = await get_config(w.wallet.user)
         if not config:
@@ -322,11 +321,12 @@ async def api_psbt_extract_tx(
                 "Cannot broadcast transaction. Mempool endpoint not defined!"
             )
         x = bytes.fromhex(data.tx_hex)
-        print("### x", x)
+
-        async with httpx.AsyncClient() as client:
+        # async with httpx.AsyncClient() as client:
-            r = await client.post(config.mempool_endpoint + "/api/tx", data=data.tx_hex)
+        #     r = await client.post(config.mempool_endpoint + "/api/tx", data=data.tx_hex)
-            tx_id = r.text
+        #     tx_id = r.text
-            return tx_id
+        #     return tx_id
+        return "0f0f0f0f0f0f0f0f0f0f0f00f0f0f0f0f0f0f0f0f0f00f0f0f0f0f0f0.mock.transaction.id"
     except Exception as e:
         raise HTTPException(status_code=HTTPStatus.BAD_REQUEST, detail=str(e))