feat: show signed transaction details

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

@@ -626,15 +626,16 @@ new Vue({
                 psbtChunks.push(data[0])
                 if (data.length > 1) {
                   console.log('### psbtChunks', psbtChunks)
+                  this.payment.psbtBase64Signed = psbtChunks.join('')
                   this.$q.notify({
                     type: 'positive',
                     message: 'PSBT received from serial port device!',
                     timeout: 10000
                   })
-                  const transaction = await this.etractTxFromPsbt(
+                  const data = await this.etractTxFromPsbt(
-                    psbtChunks.join('')
+                    this.payment.psbtBase64Signed
                   )
-                  console.log('### transaction', transaction)
+                  this.payment.signedTx = JSON.parse(data.tx_json)
                 }
               } else {
                 psbtChunks = []
@@ -672,19 +673,8 @@ new Vue({
             psbtBase64
           }
         )
-        console.log('### data', data)
-        if (data.error) {
-          this.$q.notify({
-            type: 'warning',
-            message: 'Cannot process received PSBT!',
-            caption: data.error,
-            timeout: 10000
-          })
-        }
-
         return data
       } catch (error) {
-        console.log('### error', error, JSON.stringify(error))
         LNbits.utils.notifyApiError(error)
       }
     },

lnbits/extensions/watchonly/static/js/tables.js

@@ -261,6 +261,7 @@ const tableData = {
     txSize: 0,
     psbtBase64: '',
     psbtBase64Signed: '',
+    signedTx: null,
     utxoSelectionModes: [
       'Manual',
       'Random',

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

@@ -1043,13 +1043,14 @@
                     v-if="payment.psbtBase64 && payment.signMode === 'serial-port'"
                     class="row items-center no-wrap q-mb-md q-mt-lg"
                   >
-                    <div class="col-3"></div>
+                    <!-- <div class="col-3"></div> -->
-                    <div class="col-2">
+                    <div class="col-3">
                       <q-btn
                         v-if="!serial.selectedPort"
                         @click="openSerialPort()"
                         unelevated
                         color="secondary"
+                        class="q-pr-lg"
                         >Connect</q-btn
                       >
                       <q-btn
@@ -1057,14 +1058,14 @@
                         @click="closeSerialPort()"
                         outline
                         color="gray"
+                        class="q-pr-lg"
                         >Disconnect</q-btn
                       >
                     </div>
-                    <div class="col-3">
+                    <div class="col-5">
                       <q-toggle
                         label="Advanced Config"
                         color="secodary float-left"
-                        class="q-pl-lg"
                         v-model="serial.showAdvancedConfig"
                       ></q-toggle>
                     </div>
@@ -1074,21 +1075,54 @@
                         @click="sendPsbtToSerialPort()"
                         unelevated
                         color="secondary float-right"
-                        >Send to Device</q-btn
+                        >Send PSBT to Device</q-btn
                       >
                     </div>
                   </div>
-                  <div class="row items-center no-wrap q-mb-md">
+                  <div
-                    <div class="col-4 q-pr-lg"></div>
-                    <div class="col-8">
-                      <q-input
                     v-if="payment.psbtBase64Signed"
+                    class="row items-center no-wrap q-mb-md"
+                  >
+                    <div class="col-3 q-pr-lg">PSBT from device</div>
+                    <div class="col-9">
+                      <q-input
                         v-model="payment.psbtBase64Signed"
                         filled
                         readonly
                       />
                     </div>
                   </div>
+                  <div
+                    v-if="payment.signedTx"
+                    class="row items-center no-wrap q-mb-md"
+                  >
+                    <div class="col-3 q-pr-lg"></div>
+                    <div class="col-9">
+                      <div class="row items-center no-wrap q-mb-sm">
+                        <div class="col-3 q-pr-lg">Version</div>
+                        <div class="col-9">{{payment.signedTx.version}}</div>
+                      </div>
+                      <div class="row items-center no-wrap q-mb-sm">
+                        <div class="col-3 q-pr-lg">Locktime</div>
+                        <div class="col-9">{{payment.signedTx.locktime}}</div>
+                      </div>
+                      <div class="row items-center no-wrap q-mb-sm">
+                        <div class="col-3 q-pr-lg">Fee</div>
+                        <div class="col-9">
+                          <q-badge  color="orange">{{satBtc(payment.signedTx.fee)}} </q-badge></div>
+                      </div>
+                      <div class="row items-center no-wrap q-mb-sm">
+                        <div class="col-3 q-pr-lg">Send </div>
+                        <div class="col-9">
+                          <div v-for="out in payment.signedTx.outputs" class="row items-center no-wrap q-mb-sm">
+                            <div class="col-3 q-pr-lg"> <q-badge  color="orange">{{satBtc(out.amount)}}</div>
+                            <div class="col-1">to</div>
+                            <div class="col-8">{{out.address}}</div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
                 </q-card-section>
               </q-card>
             </q-form>

lnbits/extensions/watchonly/views_api.py

@@ -32,7 +32,14 @@ from .crud import (
     get_config,
     update_config,
 )
-from .models import SignedTransaction, CreateWallet, CreatePsbt, Config, WalletAccount, ExtractPsbt
+from .models import (
+    SignedTransaction,
+    CreateWallet,
+    CreatePsbt,
+    Config,
+    WalletAccount,
+    ExtractPsbt,
+)
 from .helpers import parse_key
 
 
@@ -289,7 +296,7 @@ async def api_psbt_extract_tx(
 
         for out in transaction.vout:
             tx["outputs"].append(
-                {"value": out.value, "address": out.script_pubkey.address()}
+                {"amount": out.value, "address": out.script_pubkey.address()}
             )
         res.tx_json = json.dumps(tx)
     except Exception as e: