From 4e9cfc0f74a5b3160d6a4b4ce1877141bab67231 Mon Sep 17 00:00:00 2001
From: Vlad Stan <stan.v.vlad@gmail.com>
Date: Tue, 26 Jul 2022 18:40:35 +0300
Subject: [PATCH] fix: psbt generation

---
 .../static/components/payment/payment.html    |  8 +--
 .../static/components/payment/payment.js      | 66 ++++++++++++++-----
 .../extensions/watchonly/static/js/index.js   | 18 -----
 .../watchonly/templates/watchonly/index.html  |  1 +
 4 files changed, 53 insertions(+), 40 deletions(-)

diff --git a/lnbits/extensions/watchonly/static/components/payment/payment.html b/lnbits/extensions/watchonly/static/components/payment/payment.html
index 2c1dfeb6..66e77910 100644
--- a/lnbits/extensions/watchonly/static/components/payment/payment.html
+++ b/lnbits/extensions/watchonly/static/components/payment/payment.html
@@ -1,6 +1,5 @@
 <div>
-  <q-form @submit="createPsbt" class="q-gutter-md">
-    <!-- {{addresses}} -->
+  <q-form @submit="checkAndSend" class="q-gutter-md">
     <q-tabs v-model="paymentTab" no-caps class="bg-dark text-white shadow-2">
       <q-tab name="destination" label="Send To"></q-tab>
       <q-tab name="coinControl" label="Coin Select"></q-tab>
@@ -17,7 +16,6 @@
               :sats-denominated="sats_denominated"
               @update:outputs="handleOutputsChange"
             ></send-to>
-
           </q-card-section>
         </q-card>
 
@@ -178,11 +176,13 @@
             <q-btn
               unelevated
               :disabled="changeAmount < 0"
+              label="Check & Send"
               color="green"
               type="submit"
               class="btn-full"
-              >Check & Send</q-btn
             >
+              <q-spinner v-if="showChecking" color="primary"></q-spinner
+            ></q-btn>
           </div>
           <div class="col-9">
             <q-badge
diff --git a/lnbits/extensions/watchonly/static/components/payment/payment.js b/lnbits/extensions/watchonly/static/components/payment/payment.js
index ef7d0c90..a7cc9d8f 100644
--- a/lnbits/extensions/watchonly/static/components/payment/payment.js
+++ b/lnbits/extensions/watchonly/static/components/payment/payment.js
@@ -9,7 +9,8 @@ async function payment(path) {
       'addresses',
       'utxos',
       'mempool_endpoint',
-      'sats_denominated'
+      'sats_denominated',
+      'adminkey'
     ],
     watch: {
       immediate: true,
@@ -24,12 +25,15 @@ async function payment(path) {
     data: function () {
       return {
         DUST_LIMIT: 546,
+        tx: null,
+        psbtBase64: null,
         paymentTab: 'destination',
         sendToList: [{address: '', amount: undefined}],
         changeWallet: null,
         changeAddress: {},
         showCustomFee: false,
         showCoinSelect: false,
+        showChecking: false,
         showChange: false,
         feeRate: 1
       }
@@ -71,25 +75,35 @@ async function payment(path) {
       satBtc(val, showUnit = true) {
         return satOrBtc(val, showUnit, this['sats_denominated'])
       },
-      createPsbt: async function () {
-        const wallet = this.g.user.wallets[0]
+      checkAndSend: async function () {
         try {
-          // this.computeFee(this.feeRate)
-          const tx = this.createTx()
-          // txSize(tx)
-          for (const input of tx.inputs) {
+          console.log('### this.checkAndSend')
+          this.showChecking = true
+          await this.createPsbt()
+        } catch (error) {
+        } finally {
+          this.showChecking = false
+        }
+      },
+      createPsbt: async function () {
+        try {
+          console.log('### this.createPsbt')
+          this.tx = this.createTx()
+          for (const input of this.tx.inputs) {
             input.tx_hex = await this.fetchTxHex(input.tx_id)
           }
 
-          this.payment.tx = tx
+          const changeOutput = this.tx.outputs.find(o => o.branch_index === 1)
+          if (changeOutput) changeOutput.amount = this.changeAmount
+
           const {data} = await LNbits.api.request(
             'POST',
             '/watchonly/api/v1/psbt',
-            wallet.adminkey,
-            tx
+            this.adminkey,
+            this.tx
           )
 
-          this.payment.psbtBase64 = data
+          this.psbtBase64 = data
         } catch (err) {
           LNbits.utils.notifyApiError(err)
         }
@@ -97,7 +111,6 @@ async function payment(path) {
       createTx: function (excludeChange = false) {
         const tx = {
           fee_rate: this.feeRate,
-          // tx_size: this.payment.txSize, ???
           masterpubs: this.accounts.map(w => ({
             public_key: w.masterpub,
             fingerprint: w.fingerprint
@@ -121,10 +134,9 @@ async function payment(path) {
             tx.outputs.push(change)
           }
         }
-        // Only sort by amount on UI level (no lib for address decode)
-        // Should sort by scriptPubKey (as byte array) on the backend
-        // todo: just shuffle
-        tx.outputs.sort((a, b) => a.amount - b.amount)
+        tx.tx_size = Math.round(txSize(tx))
+        tx.inputs = _.shuffle(tx.inputs)
+        tx.outputs = _.shuffle(tx.outputs)
 
         return tx
       },
@@ -135,8 +147,8 @@ async function payment(path) {
 
         return {
           address: change.address,
-          addressIndex: change.addressIndex,
-          addressIndex: change.addressIndex,
+          address_index: change.addressIndex,
+          branch_index: change.isChange ? 1 : 0,
           masterpub_fingerprint: walletAcount.fingerprint
         }
       },
@@ -161,6 +173,24 @@ async function payment(path) {
         }
         this.selectChangeAddress(this.changeWallet)
       },
+      fetchTxHex: async function (txId) {
+        const {
+          bitcoin: {transactions: transactionsAPI}
+        } = mempoolJS() // todo: hostname
+
+        try {
+          const response = await transactionsAPI.getTxHex({txid: txId})
+          return response
+        } catch (error) {
+          this.$q.notify({
+            type: 'warning',
+            message: `Failed to fetch transaction details for tx id: '${txId}'`,
+            timeout: 10000
+          })
+          LNbits.utils.notifyApiError(error)
+          throw error
+        }
+      },
       handleOutputsChange: function () {
         this.$refs.utxoList.refreshUtxoSelection(this.totalPayedAmount)
       },
diff --git a/lnbits/extensions/watchonly/static/js/index.js b/lnbits/extensions/watchonly/static/js/index.js
index 437a9489..2d050c87 100644
--- a/lnbits/extensions/watchonly/static/js/index.js
+++ b/lnbits/extensions/watchonly/static/js/index.js
@@ -784,24 +784,6 @@ const watchOnly = async () => {
           })
         return retryWithDelay(fn)
       },
-      fetchTxHex: async function (txId) {
-        const {
-          bitcoin: {transactions: transactionsAPI}
-        } = mempoolJS()
-
-        try {
-          const response = await transactionsAPI.getTxHex({txid: txId})
-          return response
-        } catch (error) {
-          this.$q.notify({
-            type: 'warning',
-            message: `Failed to fetch transaction details for tx id: '${txId}'`,
-            timeout: 10000
-          })
-          LNbits.utils.notifyApiError(error)
-          throw error
-        }
-      },
 
       //################### OTHER ###################
 
diff --git a/lnbits/extensions/watchonly/templates/watchonly/index.html b/lnbits/extensions/watchonly/templates/watchonly/index.html
index 8df872fa..de3c500d 100644
--- a/lnbits/extensions/watchonly/templates/watchonly/index.html
+++ b/lnbits/extensions/watchonly/templates/watchonly/index.html
@@ -498,6 +498,7 @@
           :accounts="walletAccounts"
           :addresses="addresses"
           :utxos="utxos.data"
+          :adminkey="g.user.wallets[0].adminkey"
         ></payment>
         <!-- todo: no more utxos.data -->
       </q-card-section>