feat: allow external signed PSBT

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

@@ -272,15 +272,35 @@ async function payment(path) {
           this.showChecking = false
         }
       },
+
+      fetchUtxoHexForPsbt: async function (psbtBase64) {
+        if (this.tx?.inputs && this.tx?.inputs.length) return this.tx.inputs
+
+        const {data: psbtUtxos} = await LNbits.api.request(
+          'PUT',
+          '/watchonly/api/v1/psbt/utxos',
+          this.adminkey,
+          {psbtBase64}
+        )
+
+        const inputs = []
+        for (const utxo of psbtUtxos) {
+          const txHex = await this.fetchTxHex(utxo.tx_id)
+          inputs.push({tx_hex: txHex})
+        }
+        return inputs
+      },
       extractTxFromPsbt: async function (psbtBase64) {
         try {
+          const inputs = await this.fetchUtxoHexForPsbt(psbtBase64)
+
           const {data} = await LNbits.api.request(
             'PUT',
             '/watchonly/api/v1/psbt/extract',
             this.adminkey,
             {
               psbtBase64,
-              inputs: this.tx.inputs,
+              inputs,
               network: this.network
             }
           )

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

@@ -54,7 +54,10 @@ const watchOnly = async () => {
         showPayment: false,
         fetchedUtxos: false,
         utxosFilter: '',
-        network: null
+        network: null,
+
+        showEnterSignedPsbt: false,
+        signedBase64Psbt: null
       }
     },
     computed: {
@@ -173,6 +176,15 @@ const watchOnly = async () => {
         this.$refs.paymentRef.updateSignedPsbt(psbtBase64)
       },
 
+      showEnterSignedPsbtDialog: function () {
+        this.showEnterSignedPsbt = true
+      },
+
+      checkPsbt: function () {
+        console.log('### checkPsbt', this.signedBase64Psbt)
+        this.$refs.paymentRef.updateSignedPsbt(this.signedBase64Psbt)
+      },
+
       //################### UTXOs ###################
       scanAllAddresses: async function () {
         await this.refreshAddresses()

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

@@ -52,14 +52,37 @@
           ></q-spinner>
         </div>
         <div class="col-md-3 col-sm-5 q-pr-md">
-          <q-btn
-            v-if="!showPayment"
+          <q-btn-dropdown
+            split
             unelevated
+            label="New Payment"
             color="secondary"
             class="btn-full"
             @click="goToPaymentView"
-            >New Payment</q-btn
           >
+            <q-list>
+              <q-item @click="goToPaymentView" clickable v-close-popup>
+                <q-item-section>
+                  <q-item-label>New Payment</q-item-label>
+                  <q-item-label caption
+                    >Create a new payment by selecting Inputs and
+                    Outputs</q-item-label
+                  >
+                </q-item-section>
+              </q-item>
+              <q-item
+                @click="showEnterSignedPsbtDialog"
+                clickable
+                v-close-popup
+              >
+                <q-item-section>
+                  <q-item-label>From Signed PSBT</q-item-label>
+                  <q-item-label caption> Paste a signed PSBT</q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-btn-dropdown>
+
           <q-btn
             v-if="showPayment"
             outline
@@ -226,6 +249,36 @@
     </q-card>
   </q-dialog>
 
+  <q-dialog v-model="showEnterSignedPsbt" position="top">
+    <q-card class="q-pa-lg lnbits__dialog-card">
+      <h5 class="text-subtitle1 q-my-none">Enter the Signed PSBT</h5>
+      <q-separator></q-separator><br />
+
+      <p>
+        <q-input
+          filled
+          dense
+          v-model.trim="signedBase64Psbt"
+          type="textarea"
+          label="Signed PSBT"
+        ></q-input>
+      </p>
+
+      <div class="row q-mt-lg q-gutter-sm">
+        <q-btn
+          outline
+          v-close-popup
+          color="grey"
+          @click="checkPsbt"
+          class="q-ml-sm"
+          >Check PSBT</q-btn
+        >
+        <q-btn v-close-popup flat color="grey" class="q-ml-auto">Close</q-btn>
+      </div>
+      <div class="row q-mt-lg q-gutter-sm"></div>
+    </q-card>
+  </q-dialog>
+
   {% endraw %}
 </div>