fix: change address

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

@@ -1,5 +1,6 @@
 <div>
   <q-form @submit="createPsbt" class="q-gutter-md">
+    <!-- {{addresses}} -->
     <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 Control"></q-tab>
@@ -100,14 +101,9 @@
       </q-tab-panel>
 
       <q-tab-panel name="coinControl">
-          <utxo-list
+        <q-card class="q-mb-lg">
-            :utxos="utxos.data"
+          <q-card-section>
-            :selectable="true"
+            <div class="row items-center no-wrap">
-            :payed-amount="getTotalPaymentAmount()"
-            :mempool_endpoint="mempool_endpoint"
-            :sats-denominated="sats_denominated"
-          ></utxo-list>
-          <div class="row items-center no-wrap q-mb-md q-pt-lg">
               <div class="col-2 q-pr-lg">Change Account:</div>
               <div class="col-3 q-pr-lg">
                 <q-select
@@ -133,8 +129,16 @@
                 ></q-input>
               </div>
             </div>
+          </q-card-section>
+        </q-card>
+        <utxo-list
+          :utxos="utxos.data"
+          :selectable="true"
+          :payed-amount="getTotalPaymentAmount()"
+          :mempool_endpoint="mempool_endpoint"
+          :sats-denominated="sats_denominated"
+        ></utxo-list>
       </q-tab-panel>
     </q-tab-panels>
   </q-form>
-  </div>
+</div>
-  

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

@@ -1,11 +1,27 @@
 async function payment(path) {
   const t = await loadTemplateAsync(path)
-  console.log('### template', path, t)
   Vue.component('payment', {
     name: 'payment',
     template: t,
 
-    props: ['accounts', 'utxos', 'mempool_endpoint', 'sats_denominated'],
+    props: [
+      'accounts',
+      'addresses',
+      'utxos',
+      'mempool_endpoint',
+      'sats_denominated'
+    ],
+    watch: {
+      immediate: true,
+      accounts() {
+        console.log('### watch accounts', newVal)
+        this.updateChangeAddress()
+      },
+      addresses(newVal) {
+        console.log('### watch addresses', newVal)
+        this.updateChangeAddress()
+      }
+    },
 
     data: function () {
       return {
@@ -112,12 +128,29 @@ async function payment(path) {
           masterpub_fingerprint: walletAcount.fingerprint
         }
       },
-      selectChangeAddress: function (wallet = {}) {
+      selectChangeAddress: function (account) {
+        console.log('### selectChangeAddress', account)
+        if (!account) this.changeAddress = ''
         this.changeAddress =
           this.addresses.find(
-            a => a.wallet === wallet.id && a.isChange && !a.hasActivity
+            a => a.wallet === account.id && a.isChange && !a.hasActivity
           ) || {}
       },
+      updateChangeAddress: function () {
+        if (this.changeWallet) {
+          const changeAccount = (this.accounts || []).find(
+            w => w.id === this.changeWallet.id
+          )
+          // change account deleted
+          if (!changeAccount) {
+            this.changeWallet = this.accounts[0]
+            this.selectChangeAddress(this.changeWallet)
+          }
+        } else {
+          this.changeWallet = this.accounts[0]
+          this.selectChangeAddress(this.changeWallet)
+        }
+      },
       getTotalPaymentAmount: function () {
         return this.sendToList.reduce((t, a) => t + (a.amount || 0), 0)
       }

lnbits/extensions/watchonly/static/components/send-to/send-to.js

@@ -63,8 +63,6 @@ async function sendTo(path) {
       }
     },
 
-    created: async function () {
+    created: async function () {}
-      
-    }
   })
 }

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

@@ -117,6 +117,7 @@ const watchOnly = async () => {
             }
           }
 
+          // todo: account deleted
           await LNbits.api.request(
             'PUT',
             `/watchonly/api/v1/address/${addressData.id}`,
@@ -194,16 +195,10 @@ const watchOnly = async () => {
       initPaymentData: async function () {
         if (!this.payment.show) return
         await this.$refs.addressList.refreshAddresses()
-
-        this.payment.showAdvanced = false
-        this.payment.changeWallet = this.walletAccounts[0]
-        this.selectChangeAddress(this.payment.changeWallet)
       },
 
       goToPaymentView: async function () {
-        // this.payment.show = true
         this.showPayment = true
-        // this.tab = 'utxos'
         await this.initPaymentData()
       },
 
@@ -834,17 +829,6 @@ const watchOnly = async () => {
         this.walletAccounts = accounts
         // await this.refreshAddressesxx() // todo: automatic now?
         await this.scanAddressWithAmount()
-
-        if (this.payment.changeWallet) {
-          const changeAccount = this.walletAccounts.find(
-            w => w.id === this.payment.changeWallet.id
-          )
-          // change account deleted
-          if (!changeAccount) {
-            this.payment.changeWallet = this.walletAccounts[0]
-            this.selectChangeAddress(this.payment.changeWallet)
-          }
-        }
       },
       showAddressDetails: function (addressData) {
         this.openQrCodeDialog(addressData)

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

@@ -493,7 +493,11 @@
         </q-tab-panels>
       </q-card-section>
       <q-card-section v-show="showPayment">
-        <payment :accounts="walletAccounts" :utxos="utxos"></payment>
+        <payment
+          :accounts="walletAccounts"
+          :addresses="addresses"
+          :utxos="utxos"
+        ></payment>
       </q-card-section>
     </q-card>
   </div>